@charset "UTF-8";
/* 
  KN-EVENT SCSS v1.0 | 20200316
*/

@font-face {
  font-family: GenSen;
  src: url(../fonts/GenSenMaruGothicTW-Bold.ttf); /* 如果使用者電腦中找不到，則從網路下載 */
}

html, body {
    font-family: GenSen, sans-serif !important;
    font-size: 1em;
}

a{
outline: none !important; /* for Firefox Google Chrome */
behavior:expression(this.onFocus=this.blur()); /* for IE */
}
.bg_index{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/bg_index-desktop.png); 
    background-repeat: no-repeat;
    background-size: auto;
 height: calc(100vh - 100px);
 background-position: center -55px;
}

.bg_qa{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/kv_bkgdQA-desktop.png); 
    background-repeat: no-repeat;
    background-size: auto;
}
.bg_score{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/score-kv_bkgd-desktop.png); 
    background-repeat: no-repeat;
    background-size: auto;
}
.bg_form{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/award-kv_bkgd-desktop.png); 
    background-repeat: no-repeat;
    background-size: auto;
}
.bg_final{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/award-kv_bkgd-desktop.png); 
    background-repeat: no-repeat;
    background-size: auto;
}
.logo_icon{
	float: left;
	position: relative;
	left: -20%;
	top: 20px;
}
.center-wrap{position: relative;}
.position_LT{
  position: absolute;
  top: 25%;
  left: -30%;
  width: 50%;
}
.position_RT{
  position: absolute;
  top:25%;
  right: -10%;
}
.position_RTb {
    position: absolute;
top: 100%;
right: 15%;
}

.position_Bm{
    position: absolute;
    bottom: -300px;    
    width: 90%;    
    font-size:13px;
    color:#231815;
    font-family: 'DFHeiStd-W7';
}

.startbtn{
    display:none;
}
.startbtn-desktop{
    position: absolute;
    bottom: -50%;
    left: calc(50% - 170px);
    z-index:9999;
}
.ceremony_RT_01 {
  position: absolute;
  top: 10%;
  right: -8%;
  width: 30%;
}
.ceremony_RT_02 {
  position: absolute;
  top: 30%;
  right: -29%;
  width: 30%;
}
.green_zone{
  background: #FFFCDB;
  border-radius: 10px;  
  margin-top: 75px;
  padding: 30px 50px;
  position: relative;
  max-width: 1240px;
  min-height: 564px;
  margin: 80px auto;
}

#news_lists{
  width: 85%; 
  margin: 20px 25%;
}
#news_lists li a {
color: #9C5F24;  
font-size: 24px;
  line-height: 22px;
}

#news_lists li a:hover {
color: #E56C61;  
}


#news_lists li::before {
  content: "●"; 
  color: #a7ce4e;
  font-size: 10px;
  position: relative;
  top: -3px;
}

#download_lists{
  width: 60%; 
  margin: auto;
}
#download_lists p{
  color:#595757;
  font-size: 18px;
}
#download_lists li {
	list-style:none;
  
  color: #9C5F24;
  font-size: 22px;
  line-height: 1.35em;
  position: relative;
  top: -3px;
}

#download_lists li a {
  color: #fff100;
  word-wrap: break-word
}

#download_lists li a:hover {
  text-decoration: underline !important;
}
#download_lists li input[type=text]{
width: 60%;
      height: 35px;
      margin: 0 auto;
      border: none; /* <-- This thing here */
      border:solid 2px #F18E34;
      border-radius: 10px;
}
#download_lists input[type=checkbox]{
    position: relative;
    cursor: pointer;
    z-index: 1;
    opacity: 1 ;
    width: 20px;
    height: 20px;
    margin:3px;
}
.final_notice{
	color: #E56C61;
	font-size: 24px;
	margin: 20px 24%;
	width: 54%;
}
.final_RB{
	width: 350px;
	    position: absolute;
    bottom: -9%;
    right: -9.5%;
}
.share_link{
  margin: 50px auto;
  width: 40%;
}

.share_link p,.share_link a{
  float: left;
  margin-left:10px; 
}

.share_link p{
  font-size: 1.4em;
  color: #595757;
  line-height: 3em;
}
.share_link img{
text-shadow: 2px 2px 2px rgba(125,125,125,1);
}

#news_btn {
    width: 60%;
    margin: 15px auto;
  margin:55px auto;
  clear:both;
}

#news_btn button{
  width: 65%;
  margin: 0 1%;
  float: left;
}

#download_btn {
    width: 60%;
    font-size: 0.6em;
    margin: 15px auto;
}

#download_btn button{
  width: 48%;
  margin: 0 1%;
  float: left;
}

#score_btn{
  width: 60%;
  font-size: 0.6em;
  margin:55px auto;
  clear:both;
  float: right;
}

#score_btn button{
  width: 48%;
  margin: 0 1%;
  float: left;
}

#score_btn_one {
    width: auto;
    font-size: 0.6em; 
    margin: 15px auto;
}

#score_btn_one button{
  width: 48%;
  margin: auto;
}

.qa_LT {
    position: absolute;
    bottom: -12%;
    left: 5%;
}
.qa_RT {
    position: absolute;
    bottom: -12%;
    right: 5%;
}
.qa_LB {
    position: absolute;
    bottom: -12%;
    left: 5%;
}
.score_LT{
    position: absolute;
    bottom: -12%;
    left: 20%;
}
.news_LT {
    position: absolute;
    top: 75%;
    left: 2%;
}
 
.final_LT {
    position: absolute;
    bottom: -15%;
    left: 4%;
}
.form_RB {
    position: absolute;
    bottom: -28%;
    left: 2%;
}
.score_top{
	width: 300px;
	margin-top: 50px;
	float: left;
}
.score_bottom{
	width: calc(100% - 300px);	
	float: right;	
	margin-top: 100px;
}
.score_star{
	margin-right:100px;
}
.form_RB {
	display: none;
}    
.form_RB_word {
	display: none;
}
.form_RBgift {
	display: none;
}  
  
.form_RB_pc {
        position: absolute;
    bottom: -20%;
    right: 2%;
}  
.form_RBgift_pc {
        position: absolute;
    bottom: -10%;
right: -13%;
}
.download_RT {
        position: absolute;
    bottom: -20%;
    left: 2%;
}

#score_RT{
  top:25%;
}

/*.green_zone h3{
    font-size: 1.4em;
    color: #008dd5;
    background: #ffff00;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,82,114,0.6);
    max-width: 130px;
    width: 120px;
    margin-bottom: 25px;
}*/

.green_zone h3 {
    font-size: 1.4em;
    color: #008dd5;
    background: #ffff00;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,82,114,0.6);
    /* max-width: 130px; */
    /* width: 120px; */
    margin-bottom: 25px;
    width: auto;
    display: table;
    text-align: center;
}

.green_zone #h3_10{
    font-size: 1.4em;
    color: #008dd5;
    background: #ffff00;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgba(0,82,114,0.6);
    /* max-width: 130px; */
    /* width: 120px; */
    margin-bottom: 25px;
    width: auto;
    display: table;
    text-align: center;
}

.green_zone ul{
  width: 50%;
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: auto; 
}

.green_zone ul.qa{
  width: 80%; 
  float: right;
}

.qa{
  font-size: 1.75em;
  color: #595757;
  margin: auto;
}

.qa p{
  text-align: center;
  font-size: 1.4em;
}

.qa .ask{
  text-align: left;
  font-size: 33px;
}

/*#score_zone{
width: 200px;
max-width: 200px;
margin:20px auto;
}*/

#score_zone{
    width: auto;
    margin: 20px auto;
    text-align: center;
    display: table;  
}

#big_score{
	font-size: 35px;
  line-height: 1.2em;
  margin-top: 100px;
  color: #F18E34;
}

#big_score b{
  font-size: 152px;
}
#middle_score{
  font-size: 38px;
  color: #9C5F24;
}
#small_score{
  font-size: 24px;
  line-height: 1.4em;
  width: 60%;
  margin: 25px auto; 
  border-top: solid 2px #808080c9;
  padding-top: 25px;
}
  
.green_zone li{
  position: relative;
  color: #9C5F24;   
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 10px ;   
  font-size: 31px;  
}

.green_zone li:hover{
  color: #E56C61;   
}
.add{
  color: #ffff00;   
}

.green_zone  input[type=checkbox]{
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0 ;
}

#next_btn{
  margin:0 auto; 
  color: #008dd5;
  background-color: #ffff00;
  border-color: #ffff00;
  font-size: 1.85em;
  text-shadow: none;
  border-radius: 30px;
  box-shadow:2px 2px 4px rgba(0,82,114,0.6); 
  padding-top: 12px;
}

#next_btn:hover {
    color: #ffff00;
    background-color: #008dd5;
    text-shadow: none;
    border: 0;
  }


.bg_main{
    width: 100%;
    height: calc(100vh - 55px) ;
    margin-top: 55px;
    background-image: url(../images/bg_main.jpg);
    background-color: #DDEFFB;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    display: none;
}
#btn-warning {
    border: 0px solid #FFF;
    /* border-color: #ffae05; */
    text-shadow: 2px 2px 2px #FFF; 
    box-shadow:2px 2px 4px rgba(0,82,114,0.6);
    border-radius: 50px;
    font-size: 1.5em;
    /* line-height: 1.1em; */
    color: #854217;
    padding-top: 5px 80px;    
    //margin-top: -40px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f3f49c+6,fccd4d+50,f8b500+94,f8b500+99,f8b500+99,fbdf93+100 */
background: #f3f49c; /* Old browsers */
background: -moz-linear-gradient(top,  #f3f49c 6%, #fccd4d 50%, #f8b500 94%, #f8b500 99%, #f8b500 99%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f3f49c 6%,#fccd4d 50%,#f8b500 94%,#f8b500 99%,#f8b500 99%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f3f49c 6%,#fccd4d 50%,#f8b500 94%,#f8b500 99%,#f8b500 99%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f49c', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

  }
#btn-warning:hover {
    color: #FFF;
    background-color: #f49d3a;
    text-shadow: none;
  }
a#startbtn:active{   
    background: url(../images/kv1_button_02.png);
}

.inspection_zone{
  width: 100%;
  margin:auto;
  border-radius: 10px;
  background-color: #FFF;
  text-shadow: 1px 1px 5px rgba(0,0,0,.4); 
  padding:40px 20px;
} 
.inspection_zone li{ 
list-style: none;
min-height: 160px;
padding: 15px 15px 0 15px;
border: 1px solid #C9CACA;
}
.inspection_zone li:nth-child(1){border-top:0px;border-left:0px;}
.inspection_zone li:nth-child(2){border-top:0px;border-right:0px;border-left:0px;}
.inspection_zone li:nth-child(3){border-bottom:0px;border-left:0px;border-top:0px;}
.inspection_zone li:nth-child(4){border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;}
.inspection_zone li:nth-child(5){border-bottom:0px;border-left:0px;}
.inspection_zone li:nth-child(6){border-bottom:0px;border-right:0px;border-left:0px;}
.inspection_zone li .inspection{ 
border-radius: 10px;
border: 3px solid #FFF;
background-color: #FFFCD9;
box-shadow: 1px 1px 5px #C9CACA;  
min-height: 150px;
margin: 0px;
width: 100% ;
padding: 0 10px;
}
.inspection_zone li img{width: 24%;height: auto;float: left;margin:37px 10px 45px 0; }
.inspection_zone li h3{text-align: left;font-weight: bold;text-shadow:none;}
.inspection_zone li p{text-shadow:none;color: #595757;text-align: justify;}
.inspection_zone li :hover{ 
text-decoration: none; 
}
.inspection_zone .back_btn a {
color: #7D7D7D;
text-align: center;
/*border: 1px solid #7D7D7D;*/
background: #FFF;
border-radius: 30px;
text-decoration: none;
margin: auto; 
}
a:hover, a:focus {
    color: #F7931E;
    text-decoration: none !important;
}
#red{color:#FF6D74;}
#tangerine{color:#F49E00}
#green{color:#63B032;}
#blue{color:#0092D3;}
#dr_zone{position: absolute;left:-300px;bottom: -30px;}
#dr_zone img{width: 250px;height: auto;}
#say_step_01,#say_step_02{width: 25%;position: absolute;left: 42%;top:30%;display: none;text-align: justify;}
/**搜尋BAR**/
.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 1px solid #929292;
  border-right: none;
  padding: 5px;
  /*height: 20px;*/
  outline: none;
  color: #000;
  font-size: 1em; 
  line-height: 1em !important;
 
}

.searchTerm:focus{
  color: #000;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #929292;
  background: #FCCB00;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}

.topic-center {
    margin: 10px auto;
}

.hot_word{
  text-align: center;
  margin:auto; 
  margin-top: 10px;
}
.hot_word a{
color:#FFF;
}
/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 46.5%;
  margin:auto; 
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}
/**搜尋BAR END**/
#back_btn {
    list-style: none;
    min-height: 16px;
    padding: 8px;
    border: 2px solid #C9CACA;
    text-align: center;
    border-radius: 39px;
    background: #FFF;
    box-shadow: 1px 1px 5px #D8D8D8;
    text-shadow: none;
    color: #7D7D7D;
    float: right;
    margin-right: 10px;
    font-weight: bold;
}
#back_btn a {
    color: #7D7D7D;
}
#back_btn:hover {    
    background: #7D7D7D;
    color: #FFF;}
/** 一般檢驗 **/

.bg_metabolism{
    width: 100%;
    height: calc(100vh - 55px) ;
    margin-top: 55px;
    background-image: url(../images/bg_inside.png);
    background-color: #01C3C5;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    display: none;
}
.inside_title{
  width: 100%;
  background:#FFFCD9;
  text-align: center;
  font-size: 1.3em;
  color: #575554;
  padding: 10px;
  border-bottom: 1px solid #9FA0A0; 
  text-shadow: none;
  margin-top: 0px;
  border-radius: 10px 10px 0 0;
  font-weight: 500;
}
.title_icon_red{
  background-image: url(../images/slick/title_icon_red.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
  padding-left:40px; 
}
.title_icon_tangerine{
  background-image: url(../images/slick/title_icon_tangerine.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
  padding-left:40px; 
}
.title_icon_green{
  background-image: url(../images/slick/title_icon_green.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
  padding-left:40px; 
}
.title_icon_blue{
  background-image: url(../images/slick/title_icon_blue.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center left;
  padding-left:40px; 
}
#inspection{
  padding: 0 ;
}
.heart_inside{
    width: 50%;
    height:auto ;
    margin:35px auto;
    position: relative; 
}
a.heart_top {
    z-index: 5;
    position: absolute;
    left: 6px;
    top: 3px;
    width: 100%;
    height: 47%;
    transform: rotate(180deg);
    -webkit-clip-path: polygon(52% 1%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    clip-path: polygon(52% 1%, 100% 59%, 82% 100%, 18% 100%, 0% 59%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_left {
    z-index: 5;
    position: absolute;
    left: 0px;
    top: 70px;
    width: 100%;
    height: 80%;
    -webkit-clip-path: polygon(1% 0%, 50% 33%, 50% 100%, 0% 29%);
    clip-path: polygon(1% 0%, 50% 33%, 50% 100%, 0% 29%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_right {
    z-index: 5;
    position: absolute;
    right: 0px;
    top: 58px;
    width: 50%;
    height: 83%;
    transform: rotate(0deg);
    -webkit-clip-path: polygon(0 21%, 100% 0, 100% 42%, 0 99%);
    clip-path: polygon(0 38%, 100% 0, 100% 34%, 0% 100%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_top:hover,a.heart_left:hover,a.heart_right:hover{color: #000;}
a.heart_top span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    font-size: 1.05em;
    transform: rotate(180deg);
    margin: -5% 0 0 -16.5%;
}
a.heart_left span {
    display: inline-block;
    position: absolute;
    top: 42%;
    left: 24%;
    width: 100px;
    font-size: 1.05em;
}
a.heart_right span {
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 16%;
    width: 100px;
    font-size: 1.05em;
}
#M_BN{
  margin-bottom: 20px;
}
#dr_lt{
  width: 30%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
}
#dr_rt{
  width: 30%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 10%;
}
/** 一般檢驗 END **/

/** 代謝檢驗 **/
a.heart_left_one{
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 42%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(25% 5%,76% 3%, 100% 24%, 100% 100%, 4% 100%, 0% 62%);
    clip-path: polygon(25% 5%,76% 3%, 100% 24%, 100% 100%, 4% 100%, 0% 62%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_right_one{
    z-index: 5;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 42%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(25% 5%,60% 3%, 97% 24%, 100% 100%, 0% 100%, 0% 25%);
    clip-path: polygon(25% 5%,60% 3%, 97% 24%, 100% 100%, 0% 100%, 0% 25%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_left_two{
    z-index: 5;
    position: absolute;
    left: 0;
    top: 42%;
    width: 50%;
    height: 57%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 10% 12%);
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 10% 12%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_right_two{
    z-index: 5;
    position: absolute;
    right: 0;
    top: 42%;
    width: 50%;
    height: 57%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(98% 0, 92% 12%, 0% 102%, 0% 0%);
    clip-path: polygon(98% 0, 92% 12%, 0% 102%, 0% 0%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_center_three{
    z-index: 5;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 47%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(25% 5%,60% 3%, 97% 24%, 100% 100%, 0% 100%, 0% 25%);
    clip-path: polygon(50% 7%, 79% 0, 100% 40%, 51% 100%, 1% 41%, 17% 0);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_left_four{
    z-index: 5;
    position: absolute;
    left: 0;
    top: 20%;
    width: 50%;
    height: 80%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(5% 0, 100% 33%, 100% 100%, 0% 30%);
    clip-path: polygon(5% 0, 100% 33%, 100% 100%, 0% 30%);
    background: rgba(0,0,0,0);
    color: #FFF;
}
a.heart_right_four{
    z-index: 5;
    position: absolute;
    right: 0;
    top: 18%;
    width: 50%;
    height: 82%;
    /* transform: rotate(180deg); */
    -webkit-clip-path: polygon(100% 0, 100% 32%, 0% 100%, 0% 36%);
    clip-path: polygon(100% 0, 100% 32%, 0% 100%, 0% 36%);
    background: rgba(0,0,0,0);
    color: #FFF;
    text-align: center;
}
.bg_metabolism a:hover{
  color: #000;
}
a.heart_left_one span , a.heart_right_one span{
  position: absolute;
  left: 30%;
  top:35%;
  text-align: center;
}
a.heart_left_two span , a.heart_right_two span{
  position: absolute;
  left: 30%;
  top:15%;
  text-align: center;
}
a.heart_left_four span {
  position: absolute;
  left: 45%;
  top:35%;
  text-align: center;
}
a.heart_right_four span{
  position: absolute;
  right: 40%;
  top:35%;
}
a.heart_center_three span{
  position: absolute;
  right: 25%;
  top:30%;
  text-align: center;
}
a#heart_center_three_only span {
    position: absolute;
    right: 39%;
    top: 45%;
    text-align: center;
}
/** 代謝檢驗 END **/


/** 內頁  **/
.one-time{width: 100%;height: 500px;}

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
  margin: 0px 10px;
}

.slick-dots li {
list-style: none;
min-height: 0px;
padding: 15px;
border: 0px solid #C9CACA;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.border_RT {border-right:1px solid #c1c2c2;margin: 10px auto 20px;}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.img_W{
    width: 100%;
    height: 200px !important;
    min-height:200px !important;
    margin-top: 150px; 
}

.img_H{
    width: 100px;
    height: 300px !important;
    min-height: 300px !important;
    margin-top: 100px; 
}

.bg_red_01{
    background-image: url(../images/slick/slick_red_01.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    align-items: center;
}

.bg_red_02{
    background-image: url(../images/slick/slick_red_02.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    align-items: center;
} 

.bg_red_03{
    background-image: url(../images/slick/slick_red_03.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    align-items: center;
} 

.one-time p{
    font-size:1.1em;
    text-align: center !important;
    color: #FFF; 
    margin: auto;
    align-items: center;
    position: relative;
    top: 40%;
}

.one-time .fa-chevron-left{
  position:absolute;
  top:50%;
  left:0px;
  width:30px;
  height:45px;
  background:#e8e8e8;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#6a6969;
  z-index:5;
}

.one-time .fa-chevron-right{
  position:absolute;
  top:50%;
  right:0px;
  width:30px;
  height:45px;
  background:#e8e8e8;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#6a6969;
  z-index:5;
} 

.two-time .fa-chevron-left{
  position:absolute;
  top:50%;
  left:0px;
  width:30px;
  height:45px;
  background:transparent !important;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#c9c9c9;
  z-index:5;
}

.two-time .fa-chevron-right{
  position:absolute;
  top:50%;
  right:0px;
  width:30px;
  height:45px;
  background:transparent !important;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#c9c9c9;
  z-index:5;
}

.two-time{
    background: #fffde6;
    width: 100%;
    height: auto;
    padding: 12px 0 12px 26px;
    top: 8px;
    position: relative;
}

.two-time ul{padding: 0px;}

.two-time li {
    width: 31%;
    list-style: none;
    /* float: left; */
    border: 0px solid #C9CACA;
    min-height: 0px;
    text-shadow: none;
    display: inline-block;
    /* margin: 0px; */
    padding: 8px;
}

.two-time li a{
  font-size: 1em;
  color: #595757;
  text-align: left;
}

.two-time li a:hover,.two-time li a.active{
  color: #01c3c5;
}

.explanation{
  width: 100%;
  height: 230px;
  overflow-y:scroll;
  overflow-x:auto;
  margin-top: 20px;
}

.explanation::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.explanation::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

.explanation::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #b5b5b6;
}

.explanation h3{
  padding-left: 30px;
  font-size: 1.2em;
  color: #01c3c5;
  font-weight: bold;
  text-shadow: none;
  margin-top: 0px;
  background-image: url(../images/slick/h3_icon.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center left;
}
.explanation .font_point{
  padding: 0; 
}
.explanation .font_point li{
  width: 100%;
  border: 0px solid #C9CACA;
  min-height: 0px;
  text-shadow: none;
  display: inline-block;
  color: #595757;
  font-size: 1em;
  list-style: none;
  margin-bottom: 20px;
  padding: 0px;
  font-weight: 400;
}
.explanation .font_point li::before {content: "●";font-size: 0.8em; color: #01c3c5;margin-right: 3px;}
.insidepage .m_20{margin:10px 0px 20px 20px !important; }
/** 內頁 END **/             

li.awardlist{
	float: left;
	padding-right: 50px;	
}

@media (max-width: 991px) { 
.ceremony_RT_01 , .ceremony_RT_02 {
  display: none;
}  
.insidepage .m_20{margin:-10px 0px 20px 0px !important;  }  
.bg_metabolism {
    width: 100%;
    height: 100%;
    margin-top: 55px;
    background-image: url(../images/bg_inside.png);
    background-color: #01C3C5;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;
    display: none;
}
.two-time li {
    width: 45%;
    list-style: none;
    /* float: left; */
    border: 0px solid #C9CACA !important;
    min-height: 0px !important;
    text-shadow: none;
    display: inline-block;
    /* margin: 0px; */
    padding: 5px 0 !important;
} 
.explanation .font_point li {
  border: 0px solid #C9CACA !important;
}
.explanation {
    margin-bottom: 20px;
}
.one-time {
    height: 135px;
}
.img_W {
    margin-top: 25px;
}
.img_H {
    margin-top: 0px;
}
.one-time p {
    font-size: 1em;
    top: 15%;
}
.bg_red_01 {
    background-size: 80% auto;
}
.bg_red_02 {
    background-size: 40% auto;
}
.bg_red_03 {
    background-size: 33% auto;
}
.two-time li a {
    font-size: 0.95em;
}  
#dr_zone{display: none;}  
.inspection_zone{
  padding:30px 20px;
}  
.inspection_zone{margin-bottom: 50px;}  
.inspection_zone li h3,.inspection_zone li p{text-align: center;}  
.inspection_zone li img{width: 30%;height: auto;float: none;margin: 10px auto;margin-bottom: -10px;padding-left: 20px; }  
.inspection_zone li {
/*min-height: 200px;*/
border-bottom:1px solid #C9CACA;
border-right:0px solid #C9CACA;
padding: 15px 0;
}
.inspection_zone li:nth-child(3){border-bottom:1px solid #C9CACA;}
.bg_main {height: auto;}  

li.awardlist{
	float: left;
	padding-right: 50px;	
}
}
@media (max-width: 767px) {
.img-responsive {
    padding: 4px 0;
}  

.logo_icon{		
	display: none;
}
.share_link {
    width: auto;
    position: absolute;
    right: 4%;
    bottom: 2%;
}  
.share_link p {
    font-size: 18px;
    color: #595757;
    line-height: 0em;
    clear: both;
    float: none;
    /* margin-left: 15px; */
    text-align: center;
    margin-bottom: 4px;
}
#score_btn_one {
    width: auto;
    font-size: 0.8em;
    margin: 15px auto;
}
#score_btn_one button {
    width: 48%;
    margin: auto;
    font-size: 1.4em;
    position: absolute;
    bottom: 19%;
}
#download_lists {
    width: 85%;
    margin-left: 3%;
    margin-bottom: 125px;
}  

.score_top{
	width: 100%;
	float: left;
	margin-top: 0px;
}
.score_bottom{
	width: 100%;
	float: left;
	margin-top: 0px;
}
.score_star{
	display:none;
}
.form_RB {
	display:block;
        position: absolute;
    bottom: -25%;
    right: 32%;
} 
.form_RB_word {
	display:block;
        position: absolute;
    bottom: -25%;
    right: 15%;
}   
.form_RBgift {
	display:block;
        position: absolute;
    bottom: -20%;
    right: 2%;
}  
  
.form_RB_pc {
	display: none;
}  
.form_RBgift_pc {
	display: none;
}  
.download_RT {
        position: absolute;
    bottom: -28%;
    left: 2%;
}

#news_lists li a {
font-size: 18px;
  line-height: 22px;
}
#news_lists h3{
  margin:auto;
  margin-top: 15px;
  margin-bottom: 15px;
} 
#news_btn {
    width: 70%;
    font-size: 0.7em;
    margin: 15px auto;
    position: absolute;
    top: 0%;
    left: clac(50%-35%);
    left: 0%;
}  
#news_btn button {
   width: 65%;
   margin: 5% 25%;
    position: relative;
    font-size: 1.4em;
    padding: 8px 7px 7px 7px;
}

li.awardlist{
	float: left;
	padding-right: 5px;	
	font-size: 18px;
}
#download_btn {
    width: 70%;
    font-size: 0.7em;
    margin: 15px auto;
    position: absolute;
    top: 33%;
    left: clac(50%-35%);
    left: 0%;
}  
#download_btn button {
    width: 48%;
    margin: 0 1%;
    float: left;
    position: relative;
    font-size: 1.4em;
    padding: 8px 7px 7px 7px;
}

.news_LT {
    position: absolute;
    bottom: -20%;
    left: 2%;
    width: 30%;
}  

.final_notice{	
	width:100%;
	margin: auto;
}
.final_LT {
    position: absolute;
    bottom: -28%;
    left: 2%;
}
#download_lists{
  width: 100%; 
  font-size: 1em;
  line-height: 1.5em;
}

#news_lists{
  width: 100%; 
  font-size: 1em;
  line-height: 1em;
  margin:auto;
}   
#small_score {    
  font-size: 24px;
    line-height: 1.4em;
    width: 90%;
    margin: auto;
    margin-bottom: 25px;
    padding: 0px;
    border:0px;
  margin-top: 0px;
}  
#score_RT {
    top: 80%;
    width: 25%;
}

#big_score{
  line-height: 1.2em;
  margin-top: 50px;
  font-size: 35px;
  color: #F18E34;
}

#big_score b{
  font-size: 102px;
}

#score_btn {
    width: 65%;
    font-size: 17px;
    margin: auto;
    /* margin-top: 0; */
    position: absolute;
    top: 1%;
    left: 25%;
}
#score_btn button,#score_btn_one button {
    width: 60%;
    margin: 5% 0;
    float: none;
    position: relative;
    font-size: 1.4em;
    padding: 4x 15px;
}  
.qa_RT {
    position: absolute;
    bottom: -140px;
    right: 5%;
}  
.qa_LT {
    position: absolute;
    bottom: -28%;
    left: 5%;
}  
.green_zone {
    margin-top: 15px;
    padding:15px 25px;
    min-height: 520px;
    margin-bottom: 155px;
}  
.green_zone ul{
  width: 100%;
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: auto ; 
}
.green_zone ul.qa{
  width: 100%; 
}
.qa{
  font-size: 1.3em;
  color: #595757; 
}
.green_zone h3 {
    text-align: center;
}
.green_zone li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 10px;
} 
#next_btn {
    max-width: 40%;
    font-size: 1.3em;
    margin-top: 7.5px;
    line-height: 1;
    display: inline-block;
} 
.center-wrap {
    margin: 30px auto;
}
.position_LT {
    position: absolute;
    top: 95%;
    left: 2.5%;
    width: 90%;
} 
.position_RT {
    position: absolute;
top: 167%;
right: 25%;
}
.position_RTb {
    position: absolute;
top: 230%;
right: 5%;
}
#btn-warning {
    font-size: 1.2em;
    position: absolute;
    left: calc(50% - 70px);
    bottom: -380px;
}
.startbtn{
    display: block;
    position: absolute;
    left: calc(50% - 70px);
    bottom: -380px;
    z-index:9999;
}
.startbtn-desktop{
    display:none;
}
.submitbtn{
    position: absolute;
    left: calc(50% - 70px);    
}
.position_Bm{
    position: absolute;
    bottom: -580px;
    font-size: 10px;
    width: 90%;
}
#say_step_01,#say_step_02{width: 35%;position: absolute;left: 40%;top:30%;display: none;text-align: justify;}
}
@media (max-width: 550px) {
  #say_step_01,#say_step_02{width: 50%;position: absolute;left: 33%;top:30%;display: none;text-align: justify;}
 
	
.bg_index{
    width: 100%;
    height: calc(100vh - 90px) ;
    margin-top: 55px;    
    background-image: url(../images/bg_index.png); 
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 47% 28%;
}
.bg_qa{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/kv_bkgdQA.png); 
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center 0px;
    height: calc(100% -30px);
}
.bg_score{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/score-kv_bkgd.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center 0px;
    height: calc(100% -30px);
}
.bg_form{
    width: 100%;
    margin-top: 55px;
    background-image: url(../images/final-kv_bkgd.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center 0px;
    height: calc(100% -30px);
}
.bg_final{
    width: 100%;
height: calc(105vh - 90px);
margin-top: 55px;
background-image: url(../images/score-kv_bkgd.png);
background-repeat: no-repeat;
background-size: auto;
background-position: center -105px;
}
.bg_main {
    width: 100%;
    height:auto;
}
  .wrap{
    width: 75%;
    margin:auto; 
  }
  #back_btn {
    float: none;
    margin: auto;
    width: 40%;
    display: inline-table;
    position: relative;
    left: calc(50% - 20%);
  }
.heart_inside {
    width: 85%;
}
#dr_lt {
    width: 37%;
    height: auto;
    position: absolute;
    left: -5%;
    bottom: 0;
} 
#dr_rt {
    width: 40%;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 10%;
}
a.heart_center_three span{
  position: absolute;
  right: 17%;
  top:30%;
}
a.heart_right_one span,a.heart_right_two span  {
  margin-left: -7.5%;
} 
}
@media (max-width: 480px) {
  #say_step_01,#say_step_02{width: 60%;position: absolute;left: 30%;top:30%;display: none;text-align: justify;}
  .wrap{
    width: 91%;
    margin:auto; 
  }
}

@media (max-width: 380px) {  
a.heart_top span {
    top: 50%;
    left: 46%;
}
a.heart_left span {
    top: 36%;
    left: 22%;
}
a.heart_right span {
    top: 40%;
    left: 8%;
}
}

@media (min-width: 380px) and (max-width: 420px) { 
 #download_btn {
    width: 70%;
    font-size: 0.7em;
    margin: 15px auto;
    position: absolute;
    top: 27%;
    left: clac(50%-35%);
    left: 0%;
}
}

@media (max-width: 320px) {
	
.share_link p {
    font-size: 1em;
    color: #595757;
    line-height: 0em;    
    clear: both;
    float: none;
    /* margin-left: 15px; */
    text-align: center;
    margin-bottom: 6px;
}  
.position_LT {
    top: 73%;
}  
#news_btn {
    width: 70%;
    font-size: 0.7em;
    margin: 15px auto;
    position: absolute;
    top: 28%;
    left: clac(50%-35%);
    left: 4%;
} 

.awardlist{
	float: left;
	padding-right: 5px;
	font-size:18px;
}
#download_btn {
    width: 70%;
    font-size: 0.7em;
    margin: 15px auto;
    position: absolute;
    top: 28%;
    left: clac(50%-35%);
    left: 4%;
} 
#download_lists {
    width: 100%;
    font-size: 0.85em;
    line-height: 1.2em;
} 
#news_lists {
    width: 100%;
    font-size: 0.85em;
    line-height: 1em;
}  
.qa p {
    text-align: center;
    font-size: 1.25em;
}
#small_score {
  font-size: 24px;
    line-height: 1.4em;
    width: 70%;
    margin: auto;
    margin-bottom: 40px;
}  
#score_btn {
    width: 50%;
    font-size: 0.6em;
    margin: auto;
    /* margin-top: 0; */
    position: absolute;
    top: 18%;
    left: 33%;
}
#score_btn button {
    width: 63%;
    margin: 5% 0;
    float: none;
    position: relative;
}
.green_zone {
    min-height: 390px;
    margin-top: 40px;
    padding: 15px 25px;
}
.green_zone ul {
    width: 100%;
    list-style: none;
    perspective: 900;
    padding: 0;
    margin: auto;
}
.qa{
    font-size: 1.2em;
    line-height: 1.15em;
    color: #FFF;
}
  .bg_index {
    background-position: center center;
  }
  .center-wrap {
      margin: 10px auto;
  }  
  #say_step_01,#say_step_02{width: 60%;position: absolute;left: 30%;top:30%;display: none;text-align: justify;font-size: 0.93em;line-height: 1.2em;}
  .topic-center {
      margin: 5px auto;
  }
  a.heart_left {
    top: 48px;
  }
  a.heart_right {
      top: 40px;
  }
  a.heart_top span {
      left: 40%;
      font-size: 0.9em;
  } 
  a.heart_left span {
    left: 22%;
    font-size: 0.9em;
} 
a.heart_right span {
    left: 9%;
    font-size: 0.9em;
}
a.heart_left_one span, a.heart_right_one span {
    position: absolute;
    left: 17%;
    top: 35%;
}
a.heart_right_two span {
    position: absolute;
    left: 17%;
    top: 15%;
}
a.heart_center_three span{
  position: absolute;
  right: 12%;
  top:30%;
}
}