@charset "utf-8";

/* CSS Document */

:root {
    --main-color: #FF9662;
    --sub-color: #333;
    --header-color: #FF9662;
    --highlight-color: #FF9662;
    --subheader-color: #333;
    --text-color: #333;
    --remark-color: #333;
}


/****** Start Global Setting  ******/

body {
    margin: 0 auto;
    font: 13px 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", 微軟正黑體, "Apple LiGothic Medium", "蘋果儷中黑", 蘋果儷中黑, Arial, Helvetica, sans-serif;
    background: #FFF;
}

body.nofullwidth {
    margin: 0 auto;
    font: 13px 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", 微軟正黑體, "Apple LiGothic Medium", "蘋果儷中黑", 蘋果儷中黑, Arial, Helvetica, sans-serif;
    background: #FFF;
    max-width: 2560px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.clearfix {
    display: inline-block
}

a {
    text-decoration: none;
    transition: all .3s;
}

a:hover,a:focus {
    text-decoration: none;
    transition: all .3s;
    outline: 0;
}

button,
button:hover,
button:focus {
    transition: all .3s;
    outline: 0;
}

button.btn-terms {
    color: #8b7348;
    text-decoration: underline;
    margin-top: 10px;
}

button.btn-terms:hover {
    color: var(--text-color, #666);
    text-decoration: underline;
}

input {
    box-shadow: none
}

textarea {
    resize: none;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}

img.fullwidth {
    width: 100%;
    height: auto
}

h1 {
    color: #2B2B2B;
    font-size: 44px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 2.64px;
    margin-bottom: 40px;
}


h2 {
    color: #2B2B2B;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.16px;
}

h3 {
    color: #2B2B2B;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.56px;
}

p, li {
    color: #2B2B2B;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    letter-spacing: 1.08px;
    margin-bottom: 0;
}

.btn-pri {
    display: block;
    border-radius: 50px;
    border:0;
    background: #008266;
    padding: 16px;
    color:#fff !important;
    font-size: 26px;
    text-align: center;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.56px;
    max-width:290px;
    width: 100%;
    margin:0 auto;
    box-shadow: none !important;
    transition: all .3s;
}

.btn-pri.active, .btn-pri:active {
    background: #FFEC70 !important;
    color:#2B2B2B !important;
}


.btn-pri.focus, .btn-pri:focus {
    background: #008266;
    color:#fff;
}

.small-txt {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px; /* 150% */
}

.text-bold {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 175%;
    letter-spacing: 1.08px;
}

.paper-bg {
    background:url('../img/paper_background_desktop.png') no-repeat top / cover; 
}

.green {
    color: #008266
}

/****** Desktop large Screen ******/
body {
    padding-top: 96px;
}


/********** Nav **********/
.navbar {
    background-color: #fff;
    z-index: 10;
    padding: 15px;
}

nav .navbar-brand img {max-width: 200px; width:100%}

nav .nav-item {
    padding: 20px 0
}

nav .nav-link {
    position: relative;
    color: #003E52;
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    letter-spacing: 1.08px;
    text-align: center;
    padding: 0 !important
}

nav .nav-link:hover {
    cursor: pointer;
    font-weight: 700;
    transition: all .3s
}

nav .navbar-nav .nav-link.active,
nav .navbar-nav .show>.nav-link {
    font-weight: 700;
    background: none
}

nav .nav-link.disabled {
    opacity: .4
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 7H26ZM4 15H26ZM4 23H26Z" fill="%23008266"/><path d="M4 7H26M4 15H26M4 23H26" stroke="%23008266" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/></svg>');
}


/* kv,  content */

.kv img {max-width: 1440px; margin:0 auto}

.introduction {
    padding:80px 0
}


.introduction p {
    padding-bottom: 50px;
}


.about {
    background: #008266;
    padding:50px 0 66px;
}


.about h2{
    color: #FFF;
    margin-bottom: 40px;
}

.about img {
    max-width: 395px;
}

.about ol { 
    list-style: none; 
    counter-reset: item; 
    padding-left: 0;
} 
  
.about ol li { 
    counter-increment: item; 
 } 
  
.about ol li::before { 
    margin-right: 20px;
    content: counter(item);
    background: #fff;
    border-radius: 100%;
    color: #008266;
    width: 40px;
    height: 40px;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    font-size: 26px;
    padding: 2px;
    vertical-align: top;
} 

.about .pt{
    margin-bottom: 30px;
    text-align: left;
    color: #fff;
}

.circle {
    text-align: center;
    display: inline-block;
    line-height: 0px;
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    vertical-align: top;
}
  .circle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 8px;
    margin-right: 8px;
    font-weight: 700;
    font-size: 26px;
    color: #008266;
    text-align: center;
    margin-top: -1px;
}


.about .pt p{
    display: inline-block;
    padding-left: 20px;
    text-align: left;
    color: #fff;
    width: 80%;
}
.simulator {
    background: rgba(0, 130, 102, 0.08);
    padding:60px 0 80px;
}

.simulator h2 ~ p {
    color: #008266;
    margin:0 auto 115px;
}

.simulator .white-bg {
    background:#fff;
    margin-bottom: 30px;
    padding: 40px 60px;
}

.simulator .button-list {
    margin-top: 40px;
}

.simulator .button-list button{
    z-index: 4;
    position: relative;
}

.simulator button, .simulator button:focus {
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.56px;
    max-width: 370px;
    border-radius: 50px;
    margin-bottom: 40px;
}

.simulator button span {
    display: block;
    font-size: 20px;
    letter-spacing: 1.2px;
}

.simulator button:not:last-child {
    margin-bottom: 40px;
}

.simulator .result-box img{
    max-width: 350px;
    margin-bottom: 20px;
}


.simulator .result-box{
    top:-65px;
    position: relative;
    transition: all .3s;
}


.simulator .result-box:not(.normal){
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
}


.simulator .reminder {
    border:1px solid #008266;
    border-radius: 10px;
    padding: 35px 30px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}


.simulator .reminder img{
    margin-right:20px
}

.simulator .reminder p{
    text-indent: -25px;
    margin-left: 25px;
}

#doctor {
    padding:65px 0 100px;
}

#doctor h1 {
    margin-bottom: 20px;
}

#doctor p {
    margin-bottom: 50px;
}


#myth {
    background:#7A9187;
    padding:52px 0 86px;
}

#myth * {
    color:#fff !important;
}

#myth .carousel {
    margin-top: 50px;
}

#myth .carousel-control-next, #myth .carousel-control-prev {
    width:60px
}

#myth .carousel-control-prev {
    left: -100px;
}

#myth .carousel-control-next {
    right: -100px;
}

#myth .carousel .carousel-control-prev-icon, #myth .carousel .carousel-control-next-icon{
    width:60px;
    height: 60px;
}

#myth .carousel .carousel-control-prev-icon{
   background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M37.5 45L22.5 30L37.5 15" stroke="%23FFEC70" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}


#myth .carousel .carousel-control-next-icon{
   background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.5 45L37.5 30L22.5 15" stroke="%23FFEC70" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

#myth .carousel-indicators{visibility: hidden}


#cure {
    padding:56px 0 94px
}


#cure img.img-doctor {
   position: relative;
   right: -35px;
}

/* faq */
#faq {
    padding:90px 0;
}
#faq .medical-intro{
   padding:40px;
   position: relative;
   background: url(../img/paper_box_background.png) no-repeat top / cover;
}

#faq h1 ~ p {
    margin-bottom: 70px;
}

#faq .card {
   margin-bottom: 30px;
   border: 0;
   box-shadow: 0px 4px 8px rgba(122, 145, 135, 0.25);
   border-radius: 5px;
    border: 1px solid rgba(0, 130, 102, 0.15);
}

#faq .card-header {
    background-color: #fff;
    padding:0;
    border-bottom: 0;
}

#faq .card-header button {
    position: relative;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none !important;
    padding:16px 25px;
    font-weight: 700;
    font-size: 18px;
    line-height: 175%;
    letter-spacing: 0.1em;
    color: #2B2B2B;
    box-shadow: none !important;
  }

  #faq .card-header button[aria-expanded="true"] {
    background:#F5F8E8;
    border-radius: 5px 5px 0 0;
  }

  #faq .card-header button::after {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: auto;
    content: "";
    background-image: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10.5L14 17.5L21 10.5" stroke="%23008266" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .2s ease-in-out;
}

#faq .card-header button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

#faq .card-body:before {
    content:"";
    background:rgba(122, 145, 135, 0.3);
    width: 95%;
    height: 1px;
    position: absolute;
    left:0;
    right:0;
    top: 0;
    margin: auto;
}

  #faq .card-body {
    position: relative;
    padding: 28px 25px 40px
  }

#prevent {
    padding:90px 0 110px;
}

#prevent .solution-box h3 { font-weight:500 }

.solution-box {margin-bottom: 30px}
.solution-box img {max-width: 300px; margin-bottom:25px}


  .ref {
    padding:52px 0 90px;
  }

  .ref ol {
    margin-left: -21px;
  }


  .ref ol li{
    margin-bottom: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px; 
    letter-spacing: 0;
  }

  .ref ol li a{
    color: #2B2B2B;
    text-decoration: underline;
    word-break: break-word;
  }

  .ref ol li a:hover{
    color: #008266;
  }

 a.expend-ref {cursor: pointer}


/* Footer */
footer {
    background: #2B2B2B;
    padding: 50px 0 80px;
}


/* back to top */
#back-to-top a {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url('../img/scroll-top-btn.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
}


footer p {color:#fff}

footer p.text-bold {
    text-decoration-line: underline;
    font-size:18px;
}


footer a, footer a:hover{
    color:#fff;
    text-decoration: underline;
}


@media screen and (min-width: 992px) {
    .navbar img.logo {
        width: 170px;
    }

    nav .nav-item:not(:last-child) {
        margin-right: 40px
    }


    .btn-pri:hover {
        background: #FFEC70 !important;
        color:#2B2B2B !important;
    }

}



@media screen and (max-width: 1920px) {
    body.nofullwidth {
        border: none;
    }
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1280px) {
    #myth .carousel-control-prev {
        left: -60px;
    }

    #myth .carousel-control-next {
        right: -60px;
    }
}


@media screen and (max-width: 1024px) {
    textarea,
    input[type=text] {
        /* Remove First */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }



}

@media screen and (max-width: 991px) {
    body {
        padding-top: 80px;
    }


    .paper-bg, #faq .medical-intro {
        background:url('../img/paper_background_mobile.png') no-repeat top / cover; 
    }

    #faq .img-wrapper img {max-width: 200px; margin:0 auto; }

    .result-desc {min-height: 48px}

}


/****** Tablet Screen ******/

@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0s !important;
    }
    header {
        padding: 12px 0;
    }
    .kv_logo img {
        max-width: 180px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    p, li {
        font-size: 16px;
    }

    #myth .carousel-indicators{visibility: visible;}

    #myth .carousel {margin-top: 25px}
    .carousel-indicators {
       position: relative;
       bottom: 0px;
    }

    #faq h1 ~ p {
        margin-bottom: 35px;
    } 

}

@media screen and (max-width:767px) {
    nav .navbar-brand img {max-width: 150px}

    .about h2 {
        text-align: center
    }

    .simulator h2 ~ p {margin-bottom: 60px}

    .about img {margin-bottom: 30px}

    #myth .carousel-item p {margin-bottom: 20px}

    .simulator .white-bg {padding-left: 20px;padding-right: 20px}

    .simulator button span {font-size: 16px;}
    .simulator button, .simulator button:focus {font-size: 20px; margin-bottom: 20px}
    
    .simulator .reminder {flex-direction: column;}
    .simulator .reminder img {width:100px !important; margin:0 auto 30px}
    .simulator .result-box:not(.normal) {position: relative;}
    .simulator .button-list {margin-top: -10px;}
    
    #faq .medical-intro {
/*        background: url(../img/paper_box_background.png) no-repeat center / cover;*/
        padding:20px 20px 0;
    }

    #faq .medical-intro .text-bold { font-size: 16px;}

    .accordion {    margin-top: 70px;}
}


/* Mobile Screen */

@media screen and (max-width: 414px) {
    .checkbox-inside-align>.row {
        margin: 0 -15px !important;
        width: unset !important;
    }

    .result-wrapper {
        margin-bottom: -20px;
    }

    /*.simulator button, .simulator button:focus {
        padding: 8px;
    }*/

    .simulator button, .simulator button:focus {
        font-size: 16px;
    }

    .simulator button span {
        font-size: 14px;
    }

    #prevent {
/*        background: url(../img/paper_background_mobile.png) no-repeat center / cover;*/
    }

    .about img {
        width: 60% !important;
    }

    .simulator .result-box img {
        width: 80% !important;
    }



}

@media screen and (max-width: 375px) {}

@media screen and (max-width: 320px) {}