@charset "UTF-8";
/* 
  KN-EVENT SCSS v1.0 | 20200316
*/
a{
outline: none !important; /* for Firefox Google Chrome */
behavior:expression(this.onFocus=this.blur()); /* for IE */
}
.bg_index{
    width: 100%;
    //height: calc(100vh - 55px) ;
    margin-top: 55px;
    margin-bottom: 20px;
    background-image: url(../images/bg_index.png);
    background-color: #01C3C5;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center;    
}
.bg_main{
    width: 100%;
    //height: calc(100vh - 55px) ;
    margin-top: 55px;
    margin-bottom: 20px;
    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 {
    color: #fff;
    border: 3px solid #FFF;
    background-color: #01C3C5;
    /*border-color: #ffae05;*/
    text-shadow: 1px 1px 5px #a25700;
    border-radius : 50px;
  }
#btn-warning:hover {
    color: #0068B7;
    background-color: #FFDC00;
    text-shadow: none;
  }
.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;
  margin-bottom: 55px;
}
.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;
}

.searchlist_zone{
  width: 100%;
  margin:auto;
  border-radius: 10px;
  background-color: #FFF;
  padding:40px 20px;
  margin-bottom: 55px;
  min-height: 400px;
}
.searchlist_zone li{ 
list-style: none;
padding: 15px 15px 0 15px;
font-size: 26px;
}
.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: 10px;
    font-weight: bold;
}
#back_btn a {
    color: #7D7D7D;
}
#back_btn:hover {    
    background: #7D7D7D;
    color: #FFF;}
/** 一般檢驗 **/
.bg_inside{
    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;
}
.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 ;
  margin-bottom: 55px;
}
.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: 350px !important;
    margin-top: 80px; 
}
.img_S{
    width: 80%;
    height: 80% !important;
    min-height: 250px !important;
    margin-top: 150px; 
}

.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;
} 
.pieceofheart{
    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: 50%;
    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;
  vertical-align: top;
  width: 100%;
  display: inline-block;
}

.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 **/             




@media (max-width: 991px) { 
.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: 49%;
    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;
}
.img_S {
    margin-top: 13px;
}
.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;
}

.bg_3_01 {
    background-size: 80% auto;
}
.bg_3_02 {
    background-size: 40% auto;
}
.bg_3_03 {
    background-size: 33% auto;
}
.bg_4_01, .bg_4_02 {
    background-size: 60% auto;
}
.bg_4_03, .bg_4_04{
    background-size: 40% 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;}  
}
@media (max-width: 767px) {
#say_step_01,#say_step_02{width: 35%;position: absolute;left: 40%;top:30%;display: none;text-align: justify;}
  .searchlist_zone h1{
	font-size: 1.5rem;
	}
}
@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{
    background-color: #BBE2E8;
  }  
.bg_main {
    width: 100%;
    height:auto;
}
  .wrap{
    width: 75%;
    margin:auto; 
  }
  #back_btn {    
    margin: 20px auto;
    display: inline-table;
    position: relative;
    /*
    float: none;
    width: 40%;
    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 (max-width: 320px) {
  #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%;
}
}