@charset "utf-8";
/* CSS Document */


body {
  font-family:  "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
  font-size: 16px;
  color: #333333;
  background-color: #000;
  padding-top: 0px;
}
@media (max-width: 1024px) { /*平板*/
	body {
  padding-top: 0px;
}

	
	}

@media (max-width: 767px) { /*手機*/
	body {
  padding-top: 0px;
}
	}

a {
  color: #fff;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #fff;
  text-decoration: none;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


p {
  margin: 0 0 10px;
}

small,
.small {
  font-size: 85%;
}

.well{
	padding:5px 19px 15px;
	
	}
/*讓所有圖片能自動縮放*/
img { 
  vertical-align: middle;
  /*margin: auto;*/
  max-width:100%;
   /*height:auto!important;
 display:block; /*讓圖片置中*/
  
}	
	

/*chrome超連結不要有外框,內容字顏色*/
a:focus{
	outline:none
	}
input:focus{
	outline:none
	}
/*input{
	color:#333;
	}*/

/*燈箱*/
#basic,#basic_01,#mo_basic,#mo_basic_01{
	width:80%;
	background-color:#031226;
	border:#031226 1px solid;
	
	}

@media (max-width: 992px) { /*平板*/	
#basic,#basic_01,#mo_basic,#mo_basic_01{
	width:90%
	
	}
	
	}

@media (max-width: 767px) { /*手機*/
	#basic,#basic_01,#mo_basic,#mo_basic_01{
	width:98%
	
	}
	}

   #section2_video_A,#section2_video_B,#section2_video_C,#mo_section2_video_A,#mo_section2_video_B,#mo_section2_video_C{
	width:80%;
	background-color:#031226;
	border:#031226 1px solid;
	
	}

@media (max-width: 992px) { /*平板*/	
   #section2_video_A,#section2_video_B,#section2_video_C,#mo_section2_video_A,#mo_section2_video_B,#mo_section2_video_C{
	width:90%
	
	}
	
	}

@media (max-width: 767px) { /*手機*/
	#section2_video_A,#section2_video_B,#section2_video_C,#mo_section2_video_A,#mo_section2_video_B,#mo_section2_video_C{
	width:95%
	
	}
	}

/*mouse*/
.mouse-icon {
  position: absolute;
  /*border: 2px solid #2f2f2f;*/
  background: url(../image/scrolldownhint.gif) top center no-repeat;
  background-size:5%;
  /*background: #ffffff;*/
  opacity: 0.8;
  /*border-radius: 13px;*/
  height: 58px;
  width: 30px;
  margin: 0 auto;
  display: block;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 100;
}

@media (max-width: 992px) { 
.mouse-icon {
  position: absolute;
  background: url(../image/scrolldownhint.gif) top center no-repeat;
  background-size:10%;
  opacity: 0.8;
  height: 50px;
  width: 30px;
  margin: 0 auto;
  display: block;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 100;
}

}


@media (max-width: 767px) { 
.mouse-icon {
  position: absolute;
  background: url(../image/scrolldownhint.gif) top center no-repeat;
  background-size:15%;
  opacity: 0.8;
  height: 60px;
  width: 30px;
  margin: 0 auto;
  display: block;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 100;
}

}

@media (max-width: 480px) { 
.mouse-icon {
  position: absolute;
  background: url(../image/scrolldownhint.gif) top center no-repeat;
  background-size:15%;
  opacity: 0.8;
  height: 60px;
  width: 30px;
  margin: 0 auto;
  display: block;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 100;
}

}

/*車子滑動*/
div > a:focus {
	outline: 0;
	}
.gototop{
  font-family:verdana;
  width:85px;
  height:85px;
  line-height:30px;
  text-align:center;
  /*background:rgba(204,204,204,0.4);*/
  color:#999;
  position: fixed;
  top:300px;
  /*bottom:350px;*/
  left:0px;
  margin-left:0px;
  border-radius:50%;
  text-decoration:none;
  cursor: pointer;
  z-index:999;
  /*先隱藏
  display:none;*/
}
.gototop img {
	max-width:70%;
	
	}
@media (min-width: 1440px) { 
.gototop{
  left:7%;
  margin-left:5px;
  
  
}
.gototop img {
	max-width:100%;
	
	}
}

@media (min-width: 1920px) { 
.gototop{
  left:17.5%;
  margin-left:5px;
  
  
}
.gototop img {
	max-width:100%;
	
	}
}

@media (min-width: 2560px) { 
.gototop{
  left:26%;
  margin-left:5px;
  
  
}
.gototop img {
	max-width:100%;
	
	}
}

@media (max-width: 991px) { 
.gototop{
	width:110px;
	height:100px;
	top:120px;
	left:-20px;
	}
.gototop img {
	max-width:50%;
	
	}
}

.modal-body {
	background-color:#1a4677;
	
	}

/*mo版立即捐款*/
div.circle{
width:60px;
height:60px;
border-radius: 999em;/*設定成 999em 都會自動隨著直徑調整*/
background-color:#c6c5c4;
color:#e30112;
text-align:center;
line-height:20px;
padding-top:2px;
margin-left:26px;
}

/*向下滑动的动画效果*/
@-webkit-keyframes drop {
  10%   { top:-10px;  opacity: 1;}
  30%  { top:-5px; opacity: 1;}
  100% { top:0px; opacity: 1;}
}
@keyframes drop {
  10%   { top:-10px;  opacity: 1;}
  30%  { top:-5px; opacity: 1;}
  100% { top:0px; opacity: 1;}
}

/*应用动画，添加按钮效果*/
a.down {
    border: 2px solid #c6c5c4;
    border-radius: 50%;
	background-color:#c6c5c4;
	color:#e30112;
    text-align:center;
    line-height:20px;
    padding-top:2px;
    margin: 0 auto;
    height: 60px;
    width: 60px;
    display: block;
    z-index: 10;
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}
.down span {
    position: relative;
    color: #e30112;
    font-size: 14px;
    -webkit-animation-name: drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-name: drop;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

/*=================================*/
/*scroll*/
#intro-mouse{
  position: fixed;
  width: 60px;
  height: 60px;
  /*background: url('../image/landing-mouse-tappetino.png') no-repeat;*/
  display: none;
  z-index: 10000;
  bottom: 3%;
  left: 50%;
  margin-left: -35px;
}

#intro-mouse .mouse{
  position: absolute;
  top:0px;left:0px;right:0px;bottom:0px;
  background: url('../image/landing-mouse.gif') no-repeat 50% 50%;
}

.mouse a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: pointer;
}

@media (max-width: 991px) {
	#intro-mouse{
  bottom: 55%;
}
}

@media (max-width: 860px) {
	#intro-mouse{
  bottom: 25%;
}
}

@media (max-width: 767px) {
	#intro-mouse{
  bottom: 45%;
}
}