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






/*

--------------------font size unity--------------------



*/


/* ------------------ common ------------------ */ 
* {margin: 0; padding: 0; outline: 0;}
*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

html {height:100%;}
body {
	font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
	color: #fff;
	font-size: 10px;
	height:100%;
  background-color: #000;
  text-align: center;
/*  overflow: hidden;*/
}
/*
h1, h2, h3 {font-weight:normal;margin:0 0 15px 0;}
h4{ font-weight:bold;}*/
ol, ul, li {    margin: 0; padding:0; list-style-type: none;}
p {
	margin: 0 0 25px 0;
	font-size:2rem;
	color:#4a4a4a;
  line-height: 1.5; 
  word-break:break-all; 
}

a {	color: #fff;	text-decoration:none; font-size:1em;}
a:hover, a:focus{text-decoration:none; color: #999;}






/* ------------------ 選項頁 ------------------ */ 
/* -------------------------------------------- */ 

#choice_page{ 
  background: url('../images/bg_shadow.png') 0 0 repeat-x, url('../images/bg_noise.png') 0 0 repeat;

}



.control{
  position:absolute;
  top:0; 
  right:0; 
  z-index: 10000; 
  text-align: right;
}
#mute{ 
  background-color: transparent; 
  border: 0;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10000;
}
#mute:hover, #mute:focus{cursor: pointer; opacity: 0.8;}

#choice_page vedio{  }


.video-wrapper{
position: relative;
margin:0 auto;
height: 90vh;
display: inline-block;



}
.video-wrapper .mask{ 
  display: none;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  background: url('../images/vedio-mask.png') center bottom no-repeat;
  background-size: contain;
}
.video-wrapper img.starcover, .video-wrapper video{
/*  position: absolute;*/
  height: 90vh;
  width: auto;
  cursor: pointer;
}
.video-wrapper video{
  cursor: auto;
}

.video-wrapper .answer{
  position: absolute;
  height: 45vh;
  width: 100%;
  z-index: 9000;
}

.video-wrapper #answer-b{
  top: 45vh;
}

.video-wrapper .answer.enable{
  cursor: pointer;
}


.video-wrapper img.starcover:hover, .video-wrapper img.starcover:focus{
 -webkit-filter:brightness(1.2); filter:brightness(1.2);
}



.qrcode{
  width: 100%;
  padding-top: 58.2%;
  height: 0px;
  display: none;
  position: absolute;
  bottom:0;
  left: 0;
  right:  0;
  cursor: pointer;
}
.qrcode img{ 
  position: absolute; 
  right: 0; top: 0; 
    width: 24%;
    position: absolute;
    right: 17%;
    top: 28%;
}

.yellow-click{
		padding-top: 21%;
		position: absolute;
		bottom: 6%;
		left: 12%;
		right: 10%;
		cursor: pointer;
		z-index: 9000;
}

/* ------------------ modal ------------------ */ 
/* -------------------------------------------- */ 

.modal_crad{
  width: 300px; height: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
  background-color: #f5c622;
  padding: 5px;
  border-radius: 40px; 
  margin: 0 auto;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px ;
   margin-left: -150px ;
}
.modal_crad .inner{ width: 100%; height: 100%; border:6px solid #000;border-radius: 38px; position: relative;padding-top: 70px;
    padding-bottom: 40px; }

.modal_crad .inner:before, .modal_crad .inner:after{ 
    height: 20px; 
    content: ''; 
    background: url('../images/line02.png') 0 0 repeat;
    width: 100%; display: block;
    position: absolute;
    
    left: 0;
}

.modal_crad .inner:before{top: 0; border-top-left-radius:38px; border-top-right-radius:38px; }
 .modal_crad .inner:after{bottom: 0;border-bottom-left-radius:38px; border-bottom-right-radius:38px; }

.modal_crad p{ font-size: 34px; font-weight: bolder; color: #000; line-height: 1.2; }

.modal_crad button{
  background-color: #000; 
  border-radius: 40px; 
  padding:5px 30px; 
  border: 0; 
  font-size: 20px; 
  font-weight: bold; 
   color: #fff;
    font-family: 'Roboto Condensed', sans-serif,"微軟正黑體", Microsoft JhengHei;
    cursor: pointer;
 }
 .modal_crad button:hover, .modal_crad button:focus{ background-color: #1b1b1b; }





.error-modal{
   display: none; /* Hidden by default */
    position: fixed; /* Stay in place */

    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    z-index: 99999;
    text-align: center;
}

/* ------------------ 首頁 ------------------ */
/* -------------------------------------------- */

section{ min-height: 60vh; padding: 80px; position: relative; }
.bg_natural{  background: url('../images/bg_naturalblack.png') 0 0 repeat;}
footer{ color: #b0b0b0; font-size: 18px;  padding: 40px 80px; letter-spacing: 2px;}
.container{ width:1024px; margin: 0 auto; position:relative;   }

footer p { font-size: 20px; font-weight: normal; margin-bottom: 10px;}
footer a{color:#383838; text-decoration: underline; font-size: 18px; letter-spacing: 0;}
footer a:hover{color:#383838; text-decoration: none;}

h1{ color: #fff; font-size: 44px; margin-bottom: 40px; }
h1 span{ font-size: 1em;}

.title-line{  display: flex;align-items: center; margin-top: 40px;}
.title-line:before, .title-line:after{ content: ''; flex: 2; background-color: #fed42a; height: 6px; }
.title-line span{ flex: 1;padding: 0 10px; white-space: nowrap; color: #fff;font-size: 44px;margin-bottom: 40px; }

.Propaganda_wrapper .mobile_display{ display: none; }
.Propaganda_wrapper .pc_display{ display: block; }



@media  (max-width:1279px) {
     .container{ width: 100%;}
     .show-video-wrap{margin: 40px 40px 0 40px;    width: calc(100% - 100px);}
}

@media  (max-width:768px) {
  section{ min-height: 60vh; padding: 40px 20px; }
  footer{  font-size: 16px;  padding: 40px 20px; letter-spacing: 2px;}
    h1{ font-size: 24px;}
    .Propaganda_wrapper .mobile_display{ display: block; }
    .Propaganda_wrapper .pc_display{ display: none; }
}

/*  封面 */
.cover_wrapper{
  background:#000  url('../images/KV.jpg')  0 -50px no-repeat;
  background-size: 100% auto;
  width: 100%;
  padding: 0;
  padding-top: 40%;
  min-height: auto;
  position: relative;
  padding-bottom: 15px;
 
}
.cover_wrapper:after {
    content: '';
    background: url(../images/line01.png) 0 0 repeat-x;
    width: 100%;
    display: block;
    height: 14px;
    position: absolute;
    bottom: 0;
    z-index: 4;
}

.kvtit{
  width:925px;
  height: 198px;
  background: url('../images/KV-btn.png') 0 0 no-repeat;
  background-size: cover;
  border: 0;
/*  cursor: pointer;*/
  display:block;
  margin: 25px auto  20px auto;
}
.kvtit:hover, .kvtit:focus{ -webkit-filter:brightness(1.2); filter:brightness(1.2); }

.show-video-wrap{margin: 0 auto 40px auto; }
/*.show-video{ width: 100%; height: 0; padding-top:56.25%;  position: relative; margin-right:auto; margin-left: auto;}
.show-video video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }*/

.owl-carousel.owl-carousel-cover .item-video .title{ top: 51%;}
.owl-carousel-cover .owl-video-play-icon{   top: 40%;}
.owl-carousel-cover{ padding:0 20px; }




@media  (max-width:1160px) {

 
  a.kv{ width: 634px;  height: 135px; margin: 0 auto  40px auto;}
}

@media  (max-width:768px) {
.kvtit img{width: 100%;}
  .cover_wrapper{
      background: url(../images/KV_phone.jpg) 50% 0 no-repeat;
      padding-top: 118%;
      background-size: 90% auto;
      padding-bottom:80px;
  }

  .cover_wrapper:after {
    height: 8px;
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    width: 100%;
}
.owl-carousel.owl-carousel-cover .item-video .title{ font-size: 20px; top:58%;}

.show-video-wrap{margin: 40px 0px 0 0px;    width: 100%; }
 .kvtit{
    width: 320px;
    height: 127px;
display:block;
    margin-left: auto;
    margin-right:auto; 
    background: url('../images/KV-btn-m.png') 0 0 no-repeat;
    background-size: contain;
    position: static;
  }

}

@media  (max-width:414px) {



}


/*  */

/* ==Module== */
.card{font-size: 24px; }
.card p{font-size: 20px;color: #f9faff; font-weight: lighter;}
/* ==/.Module== */


.Propaganda_wrapper{ /*padding-right: 8%; padding-left:8%;*/  width: 100%;  padding: 160px 20px 0px 20px; }

.Propaganda_wrapper:before{
/*  background: url('../images/bg_Propaganda-path.png') 0 0 no-repeat; */
  width: 290px; height: 533px;
  content: '';
  display: block;
  position: absolute;
  top: -150px;
  left:-100px;
  z-index: 1;
}
.Propaganda_wrapper:after{
/*  background: url('../images/bg_Propaganda.png') 0 0 no-repeat; */
  background-size: cover;
  width: 200px; height: 533px;
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  right:0px;
   z-index: 1;

}



.key_points_wrap{ margin-bottom: 80px; }
.key_points_card{  
  text-align: center; 

  background:#0287bf;
  background-size:auto 300px;
  padding:40px;
  position: relative; 
  z-index: 3;
  margin-bottom: 80px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5),  0 0 20px rgba(0,0,0,.5);
}


h2{font-size:24px; margin-bottom: 20px;text-align: left;}
h2 .title{  color: #ffeb3B; display: block;font-size:24px;}





.key_points_card h2 .num{ 
  font-size: 30px;
  color: #2e3842; 
  background: url('../images/keyPoint_num.png') 0 0 no-repeat;
  width: 94px;
  height: 54px;
  display: block;
  text-align: left;
  padding: 7px 0 0 30px;
  position: absolute;
  top: -41px;
  left:  0.83em;

}

.key_points_card p{text-align: left;}
.key_points_card img{ max-width: 90%; width: auto; margin: 0px auto; }

.prevention_card{  padding:20px;}
.prevention_card h2{ text-align: center; }
.prevention_card img{ width: 200px; margin: 10px auto; display: block;}
.prevention_card p {  }




.ps{ display: block; font-size: 20px;    color: #f9faff;    font-weight: lighter;}
.ps_img{ display: block; max-width: 100%; width: 490px; margin: 0 auto; }
.ps_img2{ display: block; max-width: 100%; width: 640px; margin: 0px auto 25px auto; }

@media  (min-width:769px) {
  .Propaganda_wrapper:after{
    width: 405px; height: 1088px;
    top: -10px;
    right:0px;
  }
  

  .key_points_card:after{clear: both; content: ''; display: block;}
  .key_points_card .pro_box{float: left; width: 45%;}
  .key_points_card .pro_box_img{ float: right; width: 50%; max-width: auto;}



}

@media  (min-width:769px) and (max-width:1024px){
 .Propaganda_wrapper{padding-top: 150px; }
  .key_points_wrap{ display: block;}
  .key_points_card{ width: 100% ; margin:30px;}

.key_points_card:nth-of-type(2) .mobile_display{display:block;}
.key_points_card:nth-of-type(2) .pc_display{display:none;}




}


@media  (min-width:1025px) {
.Propaganda_wrapper{ padding-top: 30px; }

  .key_points_wrap{ display: flex; justify-content: center;flex-wrap: wrap; align-items:stretch; }

  .key_points_card{ font-size: 36px;padding:0.83em; width: calc(50% - 60px); margin:30px;}

 
  h2{font-size:50px;text-align: center;}
  h2 .num{}


  .prevention_wrap{ display: flex; justify-content: center; align-items: flex-start;}
  .prevention_card{ width: calc(100% / 3);  padding:20px 60px;}

  .key_points_card .pro_box, .key_points_card .pro_box_img{float: none;  width: 100%;}

.key_points_card:nth-of-type(2) .mobile_display{display:block;}
.key_points_card:nth-of-type(2) .pc_display{display:none;}

}

@media  (min-width:1380px) {
.Propaganda_wrapper{width: 100%; margin: 0 auto; padding-left: 8%; padding-right: 8%; }
.key_points_card .pro_box{float: left;}
.key_points_card .pro_box_img{ float: right; width: 50%; max-width: auto;}
.key_points_card:nth-of-type(2) .pro_box, .key_points_card:nth-of-type(2) .pro_box_img{float:none;}

.key_points_card:nth-of-type(2) .mobile_display{display:none;}
.key_points_card:nth-of-type(2) .pc_display{display:block;}
}



.KOL_wrapper{ padding-right: 0; padding-left: 0;  }
.KOL_wrapper .container{margin:0 80px; width: calc(100% - 160px);}
.owl-carousel .item-video{ /*height: 400px; */ height: 0%; padding-top: 56.25%; position: relative; }
.owl-carousel .owl-video-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.owl-theme .owl-dots .owl-dot span {
    width: 16px;
    height: 16px;
    background: rgba(251,215,42,0.2);  
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: rgba(251,215,42,0.8);
}
.owl-carousel .item-video{}
.owl-carousel .owl-video-play-icon{    background: url(../images/play.png) no-repeat; background-size: cover; top: 43%;}

.owl-carousel .item-video .title{ font-size: 24px; color: #d4d4d4; position: absolute;    top: 53%; left: 0; right: 0; }




.owl-carousel .owl-item .owl-lazy{ background-size: cover; }

@media  (max-width:768px) {
.KOL_wrapper .container{margin:0 20px; width: calc(100% - 40px);}
.owl-carousel .owl-video-play-icon{   top: 40%;}
.owl-carousel .item-video .title{    top: 58%;font-size: 20px; }

.owl-carousel{ padding:0 20px; }

}



.cooperation_wrapper{}

.cooperation_wrapper h1.title-line:nth-of-type(2){margin:80px 0 40px 0;}

.cooperation_wrapper li {margin:0 20px 40px 20px;}
.cooperation_wrapper li img{ height: 55px; }
.cooperation_wrapper li a img{ }
.cooperation_wrapper li a:hover, .cooperation_wrapper li a:focus img{  -webkit-filter:brightness(1.2); filter:brightness(1.2);}

.cooperation_wrapper ul:nth-of-type(2) li{ display: inline-block; }



@media  (max-width:768px) {
.cooperation_wrapper h1.title-line{margin:40px 0 20px 0;}
.cooperation_wrapper ul:nth-of-type(2) li{ display: block; }
.cooperation_wrapper li{margin:0 5px 20px 5px; display: block; }
.cooperation_wrapper li img{ height:  40px; width: auto; margin: 0 auto;  }

}
@media  (max-width:414px) {
  
  .cooperation_wrapper li img{ width: 100%; height: auto; }

}


/* gotop */


a:hover.gotop{ 
/*
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;*/
}


/* cd-top  */

.cd-top {
  border-radius: 0;
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
 bottom:10px; 
 right:10px; 
 
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url('../images/icon_up-arrow.png') 50% 50% no-repeat; 
  background-size:cover;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  
  z-index:999;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.7;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .8;
}
.no-touch .cd-top:hover {
  
  opacity: 1;
}

/*標題*/