@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500&display=swap');

.wrapper{ background-color: #f7f7f7; }

.sp_text { font-family: 'Cabin','微軟正黑體','Microsoft Jhenghei',Arial, sans-serif; }

.header .logo_f { width: 100px; }
.footer { padding-bottom: 30px; }

.kv_box { width: 100%; height: calc(100vh - 76px); max-height: calc(100vw * 1080 / 1920); position: relative; }
.kv_1 { background-color: #ecb133; }
.kv_2 { background-color: #7a3d82; }
.kv_3 { background-color: #ecb133; }
.kv_box .kv_model { position: absolute; }
.kv_box .kv_model img { width: 100%; position: relative; z-index: 1; }
.kv_box .kv_model .kv_mdbg { width: 80%; height: 80%; background-color: #7a3d82; position: absolute; bottom: -3%; padding-left: 5%; z-index: 0; }
.kv_box .kv_product { position: absolute; bottom: 5%; z-index: 2 }
.kv_box .kv_product img { width: 100%; }
.kv_box .kv_btext { width: 28%; min-width: 350px; background-color: #ededed; font-weight: 400; position: absolute; top: 0; right: calc((50% - (28% + 60px)) /2); padding: 0 30px; /*display: flex; display: -ms-flexbox; flex-direction: column; justify-content: center;*/ }
.kv_1 .kv_btext{height: calc(95vh - 76px - 409px);}
.kv_2 .kv_btext{height: calc(95vh - 76px - 400px);}
.kv_3 .kv_btext{height: calc(95vh - 76px - 405px);}
.kv_1 .kv_btext:after { content: ''; position: absolute; height: calc(95vh - 315px); width: 100%; bottom: 0; left: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); background: #ededed;}
.kv_2 .kv_btext:after { content: ''; position: absolute; height: 100vh; width: 100%; bottom: 0; left: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); background: #ecb133;}
.kv_3 .kv_btext:after { content: ''; position: absolute; height: 100vh; width: 100%; bottom: 0; left: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); background: #ededed;}
.kv_3 .kv_btext { right: calc((45% - (28% + 60px)) /2); }

.kv_box .kv_twlogo { width: 100%; }
.kv_box .kv_slogn { font-size: 42px; line-height: 1.3em; padding-top: 50px; font-weight: 500; }
.kv_box .kv_stext { width: 50vw; color: #fff; background-color: #5d3478; position: absolute; bottom: 12%; right: 0; box-sizing: border-box; }
.kv_box .kv_stext2 { width: 45%; color: #fff; background-color: #5d3478; position: absolute; bottom: 12%; right: 0; box-sizing: border-box; }
.kv_box .ptext { font-size: 24px; color: #fff; background-color: #5d3478; text-align: center; line-height: 1.8em; }
.kv_box .kv_c { position: relative; display: inline-block; margin-right: 20px; }
.kv_box .kv_c img { width: 60px; position: absolute; top: 0; right: -15px; }
.kv_box .kv_feature { font-size: 20px; width: fit-content; width: -webkit-fit-content; width: -moz-fit-content; margin: 40px auto 0; }
.kv_box .kv_feature li { position: relative; padding-left: 40px; margin-bottom: 5px; }
.kv_box .kv_check { width: 30px; position: absolute; top: 0; left: 0; }
.kv_box .kv_check img { width: 100%; }
.kv_box .kv_feature p { display: inline-block; }

.kv_1 .kv_model { width: 43%; top: 10%; left: 5%; }
.kv_1 .kv_logo{ width: 100%; }
.kv_1 .kv_btext{ padding-top: 18vh; }
.kv_1 .kv_stext{ padding: 80px 30px; }
.kv_1 .kv_feature { max-width: 370px; }
.kv_1 .kv_model .kv_mdbg { left: -5vw; }

.kv_2 .kv_model { width: 35%; top: 5%; right: 5%; }
.kv_2 .kv_model .kv_mdbg { background-color: #ecb133; right: -5vw; padding-left: 0; padding-right: 5%; }
.kv_2 .kv_btext { background-color: #ecb133; left: calc((45% - (20% + 60px)) / 2); right: unset; padding-top: 18vh;  }
.kv_2 .kv_stext { background-color: #5d3478; right: unset; left: 0; padding: 100px 30px; }
.kv_2 .kv_feature { max-width: 250px; margin-top: 20px; }
.kv_2 .ptext { background-color: #5d3478; }
.kv_2 .kv_c img { left: unset; right: -15px; }

.kv_3 .kv_logo{ width: 43%; left: 5%;}
.kv_3 .kv_model { top: 8%; width: 39%; }
.kv_3 .kv_btext { padding-top: 20vh; }
.kv_3 .kv_stext2 { padding: 100px 30px; }
.kv_3 .kv_product { width: 35%; right: 30%; }
.kv_3 .kv_feature { max-width: 228px; margin-top: 20px; }
.kv_3 .kv_c { top: -2px; }
.kv_3 .kv_c img { width: 40px; top: 8px; }
.kv_3 .kv_model .kv_mdbg { left: -5vw; }

.pd_fixed{
  position: absolute;
  width: 100vw;
  height: calc(100vh - 76px);
  z-index: 1;
}
.pd_box{
  position: absolute;
  height: 373px;
  width: 50%;
  bottom: 12%;
  right: 0;
}
.pd_ok{
  left: 0%;
  top: 50%;
  position: absolute;
  width: 10vw;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  backface-visibility: hidden;
}
.pd_gel{
  left: 0%;
  top: 50%;
  position: absolute;
  width: 10vw;
  -webkit-transform: translateX(-50%) translateY(-50%) rotateY(180deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotateY(180deg);
  transform: translateX(-50%) translateY(-50%) rotateY(180deg);
  backface-visibility: hidden;
}
.mobile_pd_box{
  display: none;
}


/* --- mobile --- */
@media screen and (max-height: 1100px) {
  .kv_1 .kv_btext { padding-top: 12vh; }
  .kv_2 .kv_btext { padding-top: 12vh; }
  .kv_3 .kv_btext { padding-top: 14vh; }
}

@media screen and (max-width: 1600px) {
  .kv_box .kv_slogn { font-size: 38px; padding-top: 30px; }

}


@media screen and (max-width: 1500px) {
  .kv_box .kv_stext { bottom: 5%; padding: 50px 30px; }
  .kv_box .kv_stext2 { bottom: 9%; padding: 40px 30px; }
  .kv_1 .kv_btext{height: calc(95vh - 76px - 309px);}
  .kv_2 .kv_btext{height: calc(95vh - 76px - 290px);}
  .kv_3 .kv_btext{height: calc(95vh - 76px - 285px);}

  .kv_1 .kv_model { width: 42%; }
  .pd_box {
    height: 313px;
    bottom: 5%;
  }

}


@media screen and (max-width: 1300px) {
  .kv_box .kv_btext { right: calc((45% - 400px) / 2); }
  .kv_2 .kv_btext { left: calc((45% - 400px) / 2); }
}

@media (max-width: 1200px) {
  .kv_box .kv_logo { padding: 15% 0 30px; }
  .kv_box .kv_slogn { padding-top: 0; }
}

@media screen and (max-width: 1100px) {
  .main { margin-top: 70px; }

  .header .logo_f { width: 70px; }

  .kv_box { height: calc(100vw * 1600 / 1920); max-height: unset; }
  .kv_box .kv_btext { height: 90vw; width: 75%; min-width: unset; top: 15%; bottom: unset; right: 0; padding: 0 50px; display: inline-block;}
  .kv_box .kv_stext { width: 60%; bottom: 5%; padding: 30px; }
  .kv_box .kv_stext2 { width: 60%; bottom: 5%; padding: 50px 30px; }
  .kv_box .ptext { font-size: 20px; }
  .kv_box .kv_slogn { text-align: right; font-size: 35px; }
  .kv_box .kv_feature { font-size: 18px; }
  .kv_box .kv_c img { width: 50px; }
  .kv_box .kv_check { width: 25px; top: 3px; }
  .kv_box .kv_feature li { padding-left: 35px; }

  .kv_1 .kv_model { top: 3%; width: 48%; }
  .kv_1 .kv_logo { width: 50%; padding-top: 10%; margin-left: auto; }

  .kv_2 .kv_btext { height: 80vw; top: 20%; left: 0; right: unset; }
  .kv_2 .kv_stext { padding: 60px 30px; }
  .kv_2 .kv_model { top: 3%; width: 40%; }
  .kv_2 .kv_logo { width: 55%; padding-top: 12%; margin-right: auto; }
  .kv_2 .kv_slogn { text-align: left; }

  .kv_3 .kv_model { top: 3%; width: 45%; }
  .kv_3 .kv_logo { width: 30%; padding-top: 15%; margin-left: 55%; }
  .kv_3 .kv_slogn { top: 3%; width: 50%; text-align: left; margin-left: 55%; }
  .kv_3 .kv_c img { width: 35px; }
  .kv_3 .kv_product { width: 40%; right: 50%; bottom: 0; }


  .pd_fixed{
    display: none;
  }
  .mobile_pd_box{
    display: inline-block;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
  }

  .mobile_pd_box.ok{
    position: absolute;
    top: 34%;
    left: 20%;
    width: auto;
  }
  .mobile_pd_box.gel{
    position: absolute;
    top: 40%;
    right: 20%;
    width: auto;
  }

  .mobile_ok{
    width: 13vw;
    z-index: 2;
  }

}


@media screen and (max-width: 900px) {
  .kv_box .kv_btext { padding: 0 30px; }
  .kv_box .kv_stext { font-size: 30px; bottom: 5%; }

  .kv_1 .kv_logo { padding-top: 8%; }
  .kv_2 .kv_stext { bottom: 3%; }

}


@media screen and (max-width: 768px) {
  .main { margin-top: 65px; }
  
  .kv_box { height: calc(100vw * 1920 / 1200); }
  .kv_box .kv_btext { height: 75vw; width: 80%; min-width: unset; top: 30%; bottom: unset;; }
  .kv_box .kv_stext { width: 100%; padding: 30px; }
  .kv_box .kv_stext2 { width: 100%; padding: 30px; }
  .kv_box .ptext { font-size: 20px; }
  .kv_box .kv_slogn { text-align: left; }
  .kv_box .kv_feature { font-size: 18px; }
  .kv_box .kv_c img { width: 50px; }
  .kv_box .kv_check { width: 25px; top: 3px; }
  .kv_box .kv_feature { margin-top: 40px; }
  .kv_box .kv_feature li { padding-left: 35px; }
  .kv_1 .kv_model { top: 3%; width: 70%; }
  .kv_1 .kv_logo { width: 65%; padding-top: 40%; margin: unset; }

  .kv_2 .kv_model { top: 3%; width: 65%; }
  .kv_2 .kv_logo { width: 65%; padding-top: 35%; margin-right: unset; margin-left: auto; }
  .kv_2 .kv_stext { padding: 40px 30px; }
  .kv_2 .kv_btext { top: 40%; }
  .kv_2 .kv_slogn { padding-left: 35%; }
  .kv_2 .kv_feature { margin-top: 20px; }

  .kv_3 .kv_btext { top: 35%; }
  .kv_3 .kv_model { top: 3%; width: 68%; }
  .kv_3 .kv_logo { width: 35%; padding-top: 50%; padding-bottom: 10px; margin: unset; }
  .kv_3 .kv_slogn { width: unset; text-align: left; margin-left: unset; }
  .kv_3 .kv_product { width: 45%; right: 3%; bottom: 32%; }
  .kv_3 .kv_c img { width: 32px; }
  .kv_3 .kv_feature { margin-top: 20px; }

  .mobile_pd_box.ok{
    position: absolute;
    top: -18%;
    right: 5%;
    left: unset;
    width: auto;
  }
  .mobile_pd_box.gel{
    position: absolute;
    top: -18%;
    left: 3%;
    right: unset;
    width: auto;
  }
  .mobile_ok{
    width: 20vw;
  }

  .mobile_pd_box.gel .mobile_ok{
    width: 25vw;
  }


}


@media screen and (max-width: 640px) {
  .kv_box .kv_logo { padding-bottom: 10px; }
  .kv_box .kv_btext { height: 70vw; }

  .kv_1 .kv_logo { padding-top: 32%; }
  .kv_2 .kv_logo { padding-top: 28%;}
  .kv_2 .kv_model .kv_mdbg { background-color: #5d3478; }
}


@media screen and (max-width: 550px) {
  .kv_box { height: calc(100vw * 1920 / 1150); }
  .kv_box .kv_btext { height: 65vw; top: 32%; }
  .kv_box .kv_slogn { font-size: 25px; }
  .mobile_pd_box.ok { top: -30%; }

  .kv_1 .kv_logo { padding-top: 28%; }

  .kv_2 .kv_logo { padding-top: 45%; }
  .kv_2 .kv_btext { height: 75vw; }

  .kv_3 .kv_model { top: 2%; width: 75%; }
  .kv_3 .kv_btext { height: 80%; }
  .kv_3 .kv_product { bottom: 32%; }

}


@media screen and (max-width: 460px) {
  .kv_box { height: calc(100vw * 1920 / 1080); }
  .kv_box .kv_logo { padding-bottom: 10px; }
  .kv_box .kv_btext { height: 65vw; width: 75%; }
  .kv_box .kv_slogn { font-size: 20px; }
  .kv_box .kv_feature { font-size: 16px; }
  .kv_box .kv_stext { bottom: 0; padding: 30px 20px; }
  .kv_box .kv_stext2 { bottom: 0;}


  .kv_1 .kv_logo { width: 75%; }
  .kv_2 .kv_btext { height: 80vw; top: 35%; }
  .kv_2 .kv_logo { width: 75%; }
  .kv_2 .kv_logo { padding-top: 38%; margin-left: 35%; }

  .kv_3 .kv_btext { height: 90%; }
  .kv_3 .kv_logo { padding-top: 55%; padding-bottom: 10px; }
  .kv_3 .kv_product { width: 45%; right: 0%; bottom: 30%; }

}

@media screen and (max-width: 380px) {
  .kv_box { height: calc(100vw * 1920 / 1100); }
  .kv_box .kv_btext { top: 30%; padding: 0 20px; }

  .kv_2 .kv_btext { height: 90vw; }
  .kv_2 .kv_logo { padding-top: 50%; }

  .kv_3 .kv_model { top: 0; }
  .kv_3 .kv_logo { padding-top: 60%; }
  .kv_3 .kv_btext {  }
  .kv_3 .kv_product { width: 50%; bottom: 38%; }
}

@media screen and (max-width: 360px) {
  .kv_box { height: calc(100vw * 1920 / 1000); }
  .kv_box .kv_btext { height: 85vw; top: 30%; }

  .kv_1 .kv_logo { padding-top: 28%; }
  .kv_1 .kv_model { width: 75%; }

  .kv_2 .kv_btext { height: 90vw; }
  
  .kv_3 .kv_product { bottom: 40%; }
  .kv_3 .kv_logo { padding-top: 65%; }
}



@media screen and (min-width: 1100px) and (max-height: 800px) {
  .kv_1 .kv_model { width: 38%; top: 10%; }
  .kv_1 .kv_btext { height: calc(95vh - 76px - 239px); padding-top: 8vh; }
  .kv_box .kv_slogn { font-weight: 400; padding-top: 25px; }
  .kv_1 .kv_stext { padding: 30px 30px; }
  .kv_2 .kv_model{ width: 32%; top: 1%; }
  .kv_2 .kv_btext { height: calc(95vh - 76px - 250px); padding-top: 8vh; }
  .kv_2 .kv_stext { bottom: 8%; }
  .kv_2 .kv_mbg{ bottom: 3%; }
  .kv_3 .kv_model { width: 33%; top: 3%; }
  .kv_3 .kv_product { width: 30%; right: 32%; bottom: 2%; }
  .kv_3 .kv_btext { padding-top: 10vh; }

  .pd_ok,.pd_gel { width: 9vw; }
}


@media screen and (min-width: 300px) and (max-height: 450px) {
  .kv_box { height: calc(100vw * 1920 / 1200); }
  .kv_1 .kv_logo { padding-top: 30%;  }
  .kv_2 .kv_logo { padding-top: 30%;  }
  .kv_3 .kv_logo { padding-top: 30%;  }
}