@charset "UTF-8";
@font-face {
  font-family: "ITC-Avant-Garde-Gothic-Demi_0";
  src: url("../fonts/ITC-Avant-Garde-Gothic-Demi_0.ttf");
  font-weight: normal;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

body,
html {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.overflow-x-clear {
  overflow-x: visible;
  overflow-x: clip !important;
}

.btn-disable {
  pointer-events: none;
  cursor: default;
}

.flex-block {
  display: flex;
  flex-wrap: wrap;
}

.touch-disable {
  touch-action: none;
}

/* 字體相關設定 */
.bold {
  font-weight: bold;
}

.medium {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

.img-autofull {
  justify-content: center;
  background-color: #fff;
  display: flex;
}

.img-autofull img {
  width: auto;
  object-fit: contain;
}

ul,
ol {
  margin-bottom: 0;
}

/* img相關設定 */
img {
  border: none;
  max-width: 100%;
}

.img video,
.img img {
  width: 100%;
  height: 100%;
  object-position: center;
}

/* 圖片放大時的遮罩 */
.img-fit {
  overflow: hidden;
}

.img-fit video,
.img-fit img {
  object-fit: cover;
}

.img-contain img,
.img-contain video {
  object-fit: contain;
}

.padding-fit {
  --fit-padding: 56.25%;
  position: relative;
  padding-bottom: var(--fit-padding);
}

.padding-fit img,
.padding-fit iframe,
.padding-fit video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .m-padding-fit {
    --fit-padding: 56.25%;
    position: relative;
    padding-bottom: var(--fit-padding);
  }
  .m-padding-fit img,
  .m-padding-fit iframe,
  .m-padding-fit video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
}
.main-container {
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.for-mb {
  display: none;
}

@media screen and (max-width: 768px) {
  .main-container {
    max-width: 767px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .for-pc {
    display: none;
  }
  .for-mb {
    display: block;
  }
}
/* cta start */
/* ============================================================================================================================================================================================================================================================================================================== */
.cta {
  position: fixed;
  width: 18.8%;
  z-index: 500;
  top: 42.3%;
  padding-top: 18.8%;
  right: 0;
  cursor: pointer;
}
.cta img.cta-green,
.cta img.cta-blue,
.cta .move-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.cta img.cta-green,
.cta img.cta-blue,
.cta .move-box {
  z-index: 2;
}
.cta .experience-leaf {
  position: absolute;
  width: 86.98%;
  z-index: 1;
  left: 13%;
  top: 73%;
}

@media screen and (max-width: 768px) {
  .cta {
    width: 40.23%;
    top: 32.3%;
    padding-top: 51.04%;
  }
  .cta .experience-leaf {
    width: 86.73%;
    left: 13%;
    top: 57%;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* cta end */
/* meun start */
/* ============================================================================================================================================================================================================================================================================================================== */
.menu {
  margin: 0 auto;
  position: fixed;
  width: 100%;
  background-image: url("../images/menu.jpg");
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 4.063%;
  z-index: 3;
}

.menu.move {
  z-index: 999;
}

.home {
  position: absolute;
  width: 16.5%;
  height: 91%;
  cursor: pointer;
  top: 4%;
  left: 0.2%;
  display: block;
}

.menu .effective-coverage {
  position: absolute;
  cursor: pointer;
  height: 95%;
  top: 50%;
  transform: translate(0, -50%);
}

.menu .effective-coverage:nth-of-type(1) {
  width: 14.5%;
  left: 41.5%;
}

.menu .effective-coverage:nth-of-type(2) {
  width: 11%;
  left: 56.8%;
}

.menu .effective-coverage:nth-of-type(3) {
  width: 6.5%;
  left: 68.7%;
}

.menu .effective-coverage:nth-of-type(4) {
  width: 6.2%;
  left: 76.2%;
}

.menu .effective-coverage:nth-of-type(5) {
  width: 6.2%;
  left: 83.5%;
}

.menu .effective-coverage:nth-of-type(6) {
  width: 8.8%;
  left: 90.5%;
}

@media screen and (max-width: 768px) {
  .menu {
    max-width: 768px;
    margin: 0 auto;
    position: fixed;
    width: 100%;
    background-image: url("../images/menu-m.jpg");
    padding-top: 14.47%;
    z-index: 4;
  }
  .menu::before {
    width: 0;
    height: 0;
  }
  .menu .effective-coverage {
    display: none;
  }
  .mb-menu-btn {
    position: absolute;
    width: 10%;
    padding-top: 10%;
    top: 16.5%;
    left: 88.5%;
    cursor: pointer;
    z-index: 1201;
  }
  .mb-menu-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1200;
    display: none;
  }
  .mb-menu {
    position: absolute;
    top: 14.3vw;
    right: -100%;
    width: 67.06%;
    padding-top: 186.72%;
    z-index: 1200;
    background-image: url("../images/mb-menu.png");
    background-size: cover;
    background-repeat: no-repeat;
    transition: right linear 0.3s;
  }
  .mb-menu a {
    position: absolute;
    display: block;
    width: 100%;
    padding-top: 20%;
    top: 0;
    left: 0;
    cursor: pointer;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .mb-menu a:nth-of-type(1) {
    top: 14.9%;
    background-image: url("../images/menu-title1.png");
  }
  .mb-menu a:nth-of-type(2) {
    top: 25%;
    background-image: url("../images/menu-title2.png");
  }
  .mb-menu a:nth-of-type(3) {
    top: 34.8%;
    background-image: url("../images/menu-title3.png");
  }
  .mb-menu a:nth-of-type(4) {
    top: 44.9%;
    background-image: url("../images/menu-title4.png");
  }
  .mb-menu a:nth-of-type(5) {
    top: 55.3%;
    background-image: url("../images/menu-title5.png");
  }
  .mb-menu a:nth-of-type(6) {
    top: 66%;
    background-image: url("../images/menu-title6.png");
  }
  .mb-menu.active {
    right: 0;
  }
  .home {
    position: absolute;
    width: 35.5%;
    height: 92.6%;
    cursor: pointer;
    top: 4%;
    left: 32%;
    display: block;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* meun end */
/* kv start */
/* ============================================================================================================================================================================================================================================================================================================== */
.kv {
  margin: 0 auto;
  position: relative;
  padding-top: 77.03%;
  overflow: hidden;
  z-index: 2;
}
.kv .bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url("../images/kv.png");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  top: 0;
  z-index: 1;
}
.kv .new {
  position: absolute;
  width: 5.42%;
  left: 79.79%;
  top: 32.12%;
  font-size: 0;
  z-index: 2;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.kv .new-pic {
  position: relative;
  z-index: 2;
}
.kv .new-light-pic {
  max-width: none;
  position: absolute;
  width: 334.62%;
  top: 50%;
  transform: translateY(-50%);
  left: -185%;
  font-size: 0;
  z-index: 3;
}
.kv .new .new-text {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}
.kv .video {
  position: absolute;
  width: 12.4%;
  padding-top: 22.14%;
  z-index: 3;
  top: 35.84%;
  left: 52.03%;
  cursor: pointer;
  overflow: hidden;
}
.kv .video.playing #kv-video-icon {
  opacity: 0;
  pointer-events: none;
  /* 播放時不阻擋點擊影片 */
}
.kv .video #inner-video {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 2;
}
.kv .video #kv-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 居中 */
  cursor: pointer;
  width: 28.15%;
  /* 調整按鈕大小 */
  transition: opacity 0.3s ease;
  /* 增加漸變效果 */
  z-index: 10;
  /* 確保按鈕在影片之上 */
}
.kv .video #kv-video-icon:hover {
  opacity: 0.8;
}
.kv .video .video-iframe {
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 0;
  left: 0;
  position: absolute;
  background-image: url("../images/kv-video-iframe.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.kv .leaf {
  position: absolute;
  width: 6.3%;
  top: 49.09%;
  left: 62.45%;
  z-index: 3;
}

@media screen and (max-width: 768px) {
  .kv {
    padding-top: 284.9%;
  }
  .kv .bg {
    background-image: url("../images/kv-m.png");
  }
  .kv .new {
    width: 9.51%;
    left: 85.81%;
    top: 41.91%;
  }
  .kv .new-light-pic {
    width: 334.62%;
    left: -185%;
  }
  .kv .video {
    width: 53.52%;
    padding-top: 95.44%;
    top: 66.41%;
    left: 22.79%;
  }
  .kv .video #kv-video-icon {
    width: 27.74%;
  }
  .kv .video .video-iframe {
    background-image: url("../images/kv-video-iframe-m.png");
  }
  .kv .leaf {
    width: 19.92%;
    top: 82.63%;
    left: 68.62%;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* kv end */
/* moisturize start */
/* ============================================================================================================================================================================================================================================================================================================== */
.mid-content {
  position: relative;
  z-index: 1;
  background-image: url("../images/main-bg2.png");
  background-position: center -152%;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: -24.6%;
  padding-bottom: 15.96%;
}

.fast-moisturize {
  position: relative;
  padding-top: 89.06%;
}
.fast-moisturize .fast-moisturize-bg {
  position: absolute;
  width: 80.52%;
  height: 80.82%;
  background-image: url("../images/moisturize-bg.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
}
.fast-moisturize .fast-moisturize-bg > div {
  font-size: 0;
  line-height: 0;
}
.fast-moisturize .fast-moisturize-bg .moisturize-tech {
  position: absolute;
  width: 23.09%;
  top: 33.65%;
  left: 15.07%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-shadow {
  position: absolute;
  width: 22.05%;
  top: 61.8%;
  left: 41.13%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-bottle {
  position: absolute;
  width: 22.06%;
  top: 22.43%;
  left: 39.13%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-ingd {
  position: absolute;
  width: 15.85%;
  top: 36.54%;
  left: 55.37%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-molecular {
  position: absolute;
  width: 17.14%;
  top: 26.05%;
  left: 61.45%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-arrow {
  position: absolute;
  width: 11.58%;
  top: 23.71%;
  left: 73.57%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-time {
  position: absolute;
  width: 12.16%;
  padding-top: 9.84%;
  top: 66.5%;
  left: 14.94%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-time-text {
  position: absolute;
  width: 91.67%;
  top: 2.85%;
  left: 17.17%;
}
.fast-moisturize .fast-moisturize-bg .moisturize-time-star {
  position: absolute;
  width: 19.61%;
  top: -14.25%;
  left: 7.88%;
}

.comment {
  position: relative;
  padding-top: 90.78%;
}
.comment .comment-bg {
  position: absolute;
  width: 80.57%;
  height: 83.94%;
  background-image: url("../images/comment-bg.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
}
.comment .comment-bg > div {
  font-size: 0;
  line-height: 0;
}
.comment .comment-bg .comment-intro1 {
  position: absolute;
  width: 40.79%;
  top: 20.51%;
  left: 40.85%;
}
.comment .comment-bg .comment-intro-star {
  position: absolute;
  width: 3.18%;
  top: 18.87%;
  left: 75.57%;
}
.comment .comment-bg .comment-intro2 {
  position: absolute;
  width: 40.79%;
  top: 29.12%;
  left: 40.85%;
}
.comment .comment-bg .comment-intro3 {
  position: absolute;
  width: 40.79%;
  top: 37.32%;
  left: 40.85%;
}
.comment .comment-bg .comment-intro4 {
  position: absolute;
  width: 40.79%;
  top: 45.93%;
  left: 40.85%;
}
.comment .comment-bg .comment-intro5 {
  position: absolute;
  width: 40.79%;
  top: 54.27%;
  left: 40.85%;
}
.comment .comment-bg .comment-intro6 {
  position: absolute;
  width: 42.79%;
  top: 66.5%;
  left: 39.63%;
}
.comment .comment-bg .comment-heart {
  position: absolute;
  width: 4.48%;
  top: 76.46%;
  left: 4.78%;
}

@media screen and (max-width: 768px) {
  .mid-content {
    background-position: center top;
    background-image: url("../images/main-bg-m.png");
    margin-top: -101.6%;
    padding-top: 105.6%;
  }
  .fast-moisturize {
    padding-top: 197.66%;
  }
  .fast-moisturize .fast-moisturize-bg {
    width: 91.8%;
    height: 88.67%;
    background-image: url("../images/moisturize-bg-m.png");
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-tech {
    width: 31.91%;
    top: 33.73%;
    left: 4.26%;
    z-index: 2;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-shadow {
    width: 43.83%;
    top: 54%;
    left: 27.4%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-bottle {
    width: 39.19%;
    top: 19.79%;
    left: 25.53%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-ingd {
    width: 25.25%;
    top: 32.39%;
    left: 53.16%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-molecular {
    width: 22.01%;
    top: 20.43%;
    left: 53.16%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-arrow {
    width: 23.55%;
    top: 15.82%;
    left: 70.61%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-time {
    width: 18.72%;
    padding-top: 9.84%;
    top: 56.32%;
    left: 15.18%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-time-text {
    width: 90.84%;
    top: 2.85%;
    left: 17.17%;
  }
  .fast-moisturize .fast-moisturize-bg .moisturize-time-star {
    width: 17.56%;
    top: -14.25%;
    left: 7.88%;
  }
  .comment {
    padding-top: 342.45%;
  }
  .comment .comment-bg {
    width: 100%;
    height: 94.6%;
    background-image: url("../images/comment-bg-m.png");
  }
  .comment .comment-bg .comment-intro1 {
    width: 77.99%;
    top: 39.64%;
    left: 10.94%;
  }
  .comment .comment-bg .comment-intro-star {
    width: 7.16%;
    top: 38.67%;
    left: 77.6%;
  }
  .comment .comment-bg .comment-intro2 {
    width: 77.99%;
    top: 45.31%;
    left: 10.94%;
  }
  .comment .comment-bg .comment-intro3 {
    width: 77.99%;
    top: 50.81%;
    left: 10.94%;
  }
  .comment .comment-bg .comment-intro4 {
    width: 77.99%;
    top: 56.44%;
    left: 10.94%;
  }
  .comment .comment-bg .comment-intro5 {
    width: 77.99%;
    top: 61.82%;
    left: 10.94%;
  }
  .comment .comment-bg .comment-intro6 {
    width: 86.46%;
    top: 68.22%;
    left: 7.16%;
  }
  .comment .comment-bg .comment-heart {
    width: 9.9%;
    top: 75.33%;
    left: 2.86%;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* product end */
/* ============================================================================================================================================================================================================================================================================================================== */
/* ============================================================================================================================================================================================================================================================================================================== */
/* form start */
/* ============================================================================================================================================================================================================================================================================================================== */
.form {
  position: relative;
  padding-top: 101.98%;
}
.form .form-bg {
  position: absolute;
  width: 88.39%;
  height: 83.66%;
  background-image: url("../images/experience-form.png");
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
}
.form .form-bg > div {
  font-size: 0;
  line-height: 0;
}
.form .form-bg .left-note {
  position: absolute;
  width: 1.97%;
  top: 25.03%;
  left: 39.95%;
}
.form .form-bg .right-note {
  position: absolute;
  width: 2.32%;
  top: 28.57%;
  left: 42.97%;
}
.form .form-bg .experience-arrow {
  position: absolute;
  width: 7.18%;
  top: 45.38%;
  left: 22.5%;
  cursor: pointer;
}
.form .form-bg .shineing-heart {
  position: absolute;
  width: 4.98%;
  top: 67.07%;
  left: 34.01%;
}
.form .form-bg .shineing-heart img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.form .form-bg .agree_block {
  position: absolute;
  width: 34.5%;
  height: 2.2%;
  top: 40.8%;
  left: 56.8%;
}
.form .form-bg .agree_block #rule {
  position: absolute;
  width: 37%;
  height: 100%;
  cursor: pointer;
  right: 0;
}
.form .form-bg .agree_block input {
  display: none;
}
.form .form-bg .agree_block input ~ i {
  position: absolute;
  width: 1.3vw;
  height: 1.3vw;
  background-image: url("../images/form-agree.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  left: 0;
  top: 50%;
  transform: translate(0px, -50%);
  cursor: pointer;
  pointer-events: none;
}
.form .form-bg .agree_block input:checked ~ i {
  background-image: url("../images/form-agree-check.png");
}
.form .form-bg .btn {
  position: absolute;
  width: 35.8%;
  height: 5%;
  top: 48.7%;
  left: 52.35%;
  font-family: Microsoft JhengHei;
  font-size: 2vw;
  border: none;
  outline: none;
  font-weight: bold;
  background-color: transparent;
  cursor: pointer;
  color: #fff;
  letter-spacing: 0.2vw;
}
.form .form-bg .btn a {
  margin-left: 2vw;
}
.form .form-bg .agree_block label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.form .form-bg .link {
  position: absolute;
  display: block;
}
.form .form-bg .link.buy {
  width: 98.3%;
  padding-top: 37%;
  top: 59%;
  left: 1%;
}

#area.form-select-style {
  position: absolute;
  width: 16.7%;
  height: 4.4%;
  background-color: #d9ebdd;
  top: 25.5%;
  left: 57%;
  font-family: Microsoft JhengHei;
  font-size: 1.5vw;
  padding: 0px 20px;
  color: #059047;
}

#counters.form-select-style {
  position: absolute;
  width: 23.8%;
  height: 4.4%;
  background-color: #d9ebdd;
  top: 25.5%;
  left: 74%;
  font-family: Microsoft JhengHei;
  font-size: 1.5vw;
  padding: 0px 20px;
  color: #059047;
}

.form-select-style {
  /*移除箭頭樣式*/
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /*改變右邊箭頭樣式*/
  background-image: url(../images/arrow-down.png);
  background-repeat: no-repeat;
  background-position: 95%;
  background-size: 1vw;
  border: none;
  outline: none;
}

#name.form-input-style {
  position: absolute;
  width: 40.8%;
  height: 4.4%;
  background-color: #f5f3f4;
  top: 30.35%;
  left: 57%;
  font-family: Microsoft JhengHei;
  font-size: 1.5vw;
  padding: 0px 20px;
  border: none;
  outline: none;
  color: #059047;
}

#phone.form-input-style {
  position: absolute;
  width: 40.8%;
  height: 4.4%;
  background-color: #f5f3f4;
  top: 35.15%;
  font-family: Microsoft JhengHei;
  font-size: 1.5vw;
  padding: 0px 20px;
  border: none;
  outline: none;
  color: #059047;
  left: 57%;
}

::placeholder {
  color: #059047 !important;
}

:-ms-input-placeholder {
  color: #059047 !important;
}

::-ms-input-placeholder {
  color: #059047 !important;
}

/*IE隱藏箭頭樣式*/
.form-select-style::-ms-expand {
  display: none;
}

.precautions {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  padding-bottom: 30px;
}

.precautions-container {
  position: absolute;
  background-image: url("../images/precaution.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 69.58%;
  padding-top: 52.4%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.understand {
  position: absolute;
  width: 59.8%;
  padding-top: 7.2%;
  top: 72%;
  left: 19.5%;
  cursor: pointer;
}

.precautions-line {
  position: absolute;
  width: 12.8%;
  padding-top: 3.2%;
  top: 41.3%;
  left: 77.2%;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .form {
    padding-top: 482.94%;
  }
  .form .form-bg {
    width: 100%;
    height: 94.34%;
    background-image: url("../images/experience-form-m.png");
  }
  .form .form-bg .left-note {
    width: 4.43%;
    top: 17.53%;
    left: 80.95%;
  }
  .form .form-bg .right-note {
    width: 5.21%;
    top: 19.57%;
    left: 86.97%;
  }
  .form .form-bg .experience-arrow {
    width: 16.15%;
    top: 27.38%;
    left: 42.5%;
  }
  .form .form-bg .shineing-heart {
    width: 11.2%;
    top: 76.07%;
    left: 61.01%;
  }
  .form .form-bg .agree_block {
    width: 81%;
    height: 1.2%;
    top: 57.05%;
    left: 9.8%;
  }
  .form .form-bg .agree_block #rule {
    width: 37%;
    height: 100%;
    cursor: pointer;
    right: 0;
  }
  .form .form-bg .agree_block input {
    display: none;
  }
  .form .form-bg .agree_block input ~ i {
    width: 3vw;
    height: 3vw;
    left: 0;
    top: 21%;
    transform: translate(0px, 0%);
  }
  .form .form-bg .btn {
    width: 76.2%;
    height: 3.25%;
    top: 61.5%;
    left: 8.4%;
    font-size: 6.5vw;
    letter-spacing: 0.7vw;
  }
  .form .form-bg .btn a {
    margin-left: 0vw;
  }
  .form .form-bg .link.buy {
    width: 91%;
    padding-top: 122%;
    top: 73.5%;
    left: 4%;
  }
  #area.form-select-style {
    width: 60.8%;
    height: 1.86%;
    top: 46%;
    left: 30%;
    font-size: 4vw;
    padding: 0px 4%;
  }
  #counters.form-select-style {
    width: 60.8%;
    height: 1.86%;
    top: 48.2%;
    left: 30%;
    font-size: 4vw;
    padding: 0px 4%;
  }
  .form-select-style {
    background-position: 95%;
    background-size: 3vw;
  }
  #name.form-input-style {
    width: 60.8%;
    height: 1.86%;
    top: 51.1%;
    left: 30%;
    font-size: 4vw;
    padding: 0px 4%;
  }
  #phone.form-input-style {
    width: 60.8%;
    height: 1.86%;
    top: 53.9%;
    left: 30%;
    font-size: 4vw;
    padding: 0px 4%;
  }
  .precautions-container {
    background-image: url("../images/precaution-m.png");
    width: 93.62%;
    padding-top: 168.5%;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1000;
  }
  .understand {
    width: 83.2%;
    padding-top: 13.9%;
    top: 87.2%;
    left: 8.4%;
  }
  .precautions-line {
    width: 26.2%;
    padding-top: 7.2%;
    top: 39.5%;
    left: 10.5%;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* form end */
/* ============================================================================================================================================================================================================================================================================================================== */
/* 頁尾 start */
.bottom-content {
  position: relative;
  z-index: 2;
  margin-top: -3%;
}
.bottom-content .event {
  position: relative;
  padding-top: 91.98%;
  background-image: url("../images/event-bg.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: clip;
}
.bottom-content .event.show .event-end-bg {
  display: block;
}
.bottom-content .event .event-end-bg {
  background-image: url("../images/event-end.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 5;
  display: none;
}
.bottom-content .event .battery {
  position: absolute;
  width: 42.5%;
  left: 28.65%;
  top: 17.89%;
  padding-top: 12.29%;
}
.bottom-content .event .battery > div {
  font-size: 0;
  line-height: 0;
}
.bottom-content .event .battery-text {
  position: absolute;
  width: 100%;
  top: 0%;
  right: 0;
}
.bottom-content .event .event-counter {
  position: absolute;
  width: 100%;
  left: 0;
  top: 32.9%;
  z-index: 2;
}
.bottom-content .footer {
  position: relative;
  padding-top: 7.71%;
  background-image: url("../images/footer.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 3;
  margin-top: -4.2%;
}
.bottom-content .footer .link {
  position: absolute;
  display: block;
}
.bottom-content .footer .fb {
  padding-top: 3%;
  width: 3%;
  top: -2.2%;
  left: 43.15%;
}
.bottom-content .footer .ig {
  width: 3%;
  padding-top: 3%;
  top: -2.2%;
  left: 46.75%;
}
.bottom-content .footer .youtube {
  width: 3%;
  padding-top: 3%;
  top: -2.2%;
  left: 50.65%;
}
.bottom-content .footer .line {
  width: 3%;
  padding-top: 3%;
  top: -2.2%;
  left: 54.48%;
}

@media screen and (max-width: 768px) {
  .bottom-content {
    margin-top: -3%;
  }
  .bottom-content .event {
    background-image: url("../images/event-bg-m.png");
    padding-top: 143.1%;
  }
  .bottom-content .event.show {
    padding-top: 146.09%;
    overflow: visible;
  }
  .bottom-content .event .event-end-bg {
    background-image: url("../images/event-end-m.png");
  }
  .bottom-content .event .battery {
    width: 87.63%;
    left: 6.9%;
    top: 30.69%;
    padding-top: 35.29%;
  }
  .bottom-content .event .event-counter {
    top: 53.9%;
  }
  .bottom-content .footer {
    padding-top: 28.52%;
    background-image: url("../images/footer-m.png");
    margin-top: 13%;
  }
  .bottom-content .footer .fb {
    width: 14%;
    padding-top: 13%;
    top: 0%;
    left: 15.9%;
  }
  .bottom-content .footer .ig {
    width: 14%;
    padding-top: 13%;
    top: 0;
    left: 33%;
  }
  .bottom-content .footer .youtube {
    width: 14%;
    padding-top: 13%;
    top: 0%;
    left: 51.2%;
  }
  .bottom-content .footer .line {
    width: 14%;
    padding-top: 13%;
    top: 0;
    left: 70.3%;
  }
}
/* ============================================================================================================================================================================================================================================================================================================== */
/* 頁尾 end */
.body-scroll-lock {
  position: fixed !important;
  overflow: hidden !important;
  width: 100% !important;
  top: calc(var(--scroll-y, 0px) * -1) !important;
}

.thank-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  padding-bottom: 5%;
  /* 防止縮放和滾動 */
  touch-action: manipulation;
  -webkit-overflow-scrolling: auto;
  /* 如果彈窗內容需要滾動 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.thank-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* 針對 iPhone X 系列的安全區域 */
@supports (padding: max(0px)) {
  .thank-container {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}
.thank {
  position: relative;
  top: 20px;
  left: 50%;
  background-image: url(../images/thank-page.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 500px;
  padding-top: 3104px;
  transform: translate(-50%, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.thank-close {
  position: absolute;
  top: 0.3%;
  left: 93%;
  padding-top: 6%;
  width: 5.4%;
  cursor: pointer;
  background-image: url(../images/close-btn.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(1);
}

.thank-name {
  position: absolute;
  top: 34.5%;
  left: 50%;
  padding-top: 0%;
  width: 44%;
  font-weight: bold;
  font-size: 32px;
  font-family: Microsoft JhengHei;
  color: #009142;
}

.thank-counter {
  position: absolute;
  top: 36.3%;
  left: 50%;
  padding-top: 0%;
  width: 44%;
  font-weight: bold;
  font-size: 32px;
  font-family: Microsoft JhengHei;
  color: #009142;
}

.thank .link {
  position: absolute;
}

.thank-event {
  position: absolute;
  top: 69.7%;
  left: 0%;
  padding-top: 148.7%;
  width: 100%;
  background-image: url(../images/thank-page-event.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.thank-event.show {
  background-image: url(../images/thank-page-end.jpg);
}
.thank-event.show + .thank-footer {
  padding-top: 39.52%;
  background-position: center bottom;
  background-color: rgba(0, 0, 0, 0.8);
}

.thank-footer {
  position: absolute;
  bottom: 0%;
  left: 0%;
  padding-top: 28.52%;
  width: 100%;
  background-image: url(../images/thank-page-footer.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.thank-buy {
  top: 47.1%;
  left: 5%;
  width: 89%;
  padding-top: 130%;
}

.thank-fb {
  top: 95.3%;
  left: 16%;
  width: 13%;
  padding-top: 13%;
}

.thank-ig {
  top: 95.3%;
  left: 33.3%;
  width: 13%;
  padding-top: 13%;
}

.thank-youtube {
  top: 95.3%;
  left: 52.8%;
  width: 13%;
  padding-top: 13%;
}

.thank-line {
  top: 95.3%;
  left: 70.7%;
  width: 14%;
  padding-top: 13%;
}

@media screen and (max-width: 768px) {
  .thank {
    width: 95%;
    padding-top: 590.15%;
  }
  .thank-name {
    font-size: 5.5vw;
  }
  .thank-counter {
    font-size: 5.5vw;
  }
  .thank-container {
    padding-bottom: 10%;
  }
}
.mfp-auto-cursor .mfp-content {
  text-align: center;
}

.video-player-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  display: none;
}

.video-player-container .video-player {
  position: absolute;
  width: 800px;
  height: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#youtube-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.video-player-close {
  position: absolute;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
  height: 44px;
  line-height: 44px;
  width: 44px;
  color: #FFF;
  text-align: center;
  right: 0;
  top: -44px;
  cursor: pointer;
}

.video-player-close:hover {
  color: #ccc;
}

@media screen and (max-width: 900px) {
  .video-player-container .video-player {
    width: 640px;
    height: 360px;
  }
}
@media screen and (max-width: 768px) {
  .video-player-container .video-player {
    width: 100%;
    height: 56.25vw;
  }
}
.pop-remind {
  position: absolute;
  background-image: url(../images/pop-remind.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40%;
  height: 9.427%;
  left: 52%;
  top: 72%;
  z-index: 9999;
  display: none;
}

.pop-remind-close {
  position: absolute;
  width: 11%;
  height: 13%;
  left: 84%;
  top: 6%;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .pop-remind {
    width: 100%;
    height: 6.52%;
    left: 0%;
    top: 70.6%;
  }
}

/*# sourceMappingURL=default.css.map */