@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=Roboto:wght@400&display=swap");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  display: block;
}

legend, hr {
  display: none;
}

th {
  font-style: inherit;
  font-weight: inherit;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

a {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
  text-decoration: none;
  cursor: pointer;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

/* main.css ==============================================*/
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  display: block;
}

.hide {
  display: none;
}

*:focus {
  outline: none;
}

.footerbg {
  background: #313131;
}

.MAIN {
  width: 100%;
}

#inside {
  width: 100%;
}

.cutClass {
  width: 100%;
}

.stars-1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.stars-1 span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: #fff;
  animation: stars1 4s infinite;
}
@keyframes stars1 {
  0%, 100% {
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100vh);
  }
}
.stars-1 span:nth-child(1) {
  position: absolute;
  left: 27.8863991731%;
  top: 1.2943916917%;
  animation-duration: 6.9936661535s;
  animation-delay: -0.1s;
  animation-timing-function: linear;
  filter: blur(3.3211502358px);
}
.stars-1 span:nth-child(2) {
  position: absolute;
  left: 55.5308191029%;
  top: 5.4672202674%;
  animation-duration: 4.6017502833s;
  animation-delay: -0.2s;
  animation-timing-function: linear;
  filter: blur(2.590812853px);
}
.stars-1 span:nth-child(3) {
  position: absolute;
  left: 82.587009024%;
  top: 7.1667626637%;
  animation-duration: 6.5353334352s;
  animation-delay: -0.3s;
  animation-timing-function: linear;
  filter: blur(1.3158257637px);
}
.stars-1 span:nth-child(4) {
  position: absolute;
  left: 44.7760463852%;
  top: 0.9905033778%;
  animation-duration: 3.6307277941s;
  animation-delay: -0.4s;
  animation-timing-function: linear;
  filter: blur(1.5673536736px);
}
.stars-1 span:nth-child(5) {
  position: absolute;
  left: 37.7861039382%;
  top: 2.7181503425%;
  animation-duration: 4.7024154275s;
  animation-delay: -0.5s;
  animation-timing-function: linear;
  filter: blur(1.5067759564px);
}
.stars-1 span:nth-child(6) {
  position: absolute;
  left: 11.6148958343%;
  top: 2.4917079364%;
  animation-duration: 6.3654796796s;
  animation-delay: -0.6s;
  animation-timing-function: linear;
  filter: blur(3.020418311px);
}
.stars-1 span:nth-child(7) {
  position: absolute;
  left: 89.5079881473%;
  top: 7.3543247057%;
  animation-duration: 6.0320150555s;
  animation-delay: -0.7s;
  animation-timing-function: linear;
  filter: blur(3.2070145036px);
}
.stars-1 span:nth-child(8) {
  position: absolute;
  left: 57.4310422306%;
  top: 4.1140458718%;
  animation-duration: 2.0672203764s;
  animation-delay: -0.8s;
  animation-timing-function: linear;
  filter: blur(1.2153856431px);
}
.stars-1 span:nth-child(9) {
  position: absolute;
  left: 47.1077513042%;
  top: 2.0915684152%;
  animation-duration: 3.4185490898s;
  animation-delay: -0.9s;
  animation-timing-function: linear;
  filter: blur(1.5929808369px);
}
.stars-1 span:nth-child(10) {
  position: absolute;
  left: 29.160084611%;
  top: 6.0499831629%;
  animation-duration: 6.6271666322s;
  animation-delay: -1s;
  animation-timing-function: linear;
  filter: blur(1.9108088609px);
}
.stars-1 span:nth-child(11) {
  position: absolute;
  left: 45.3586849667%;
  top: 1.4105993908%;
  animation-duration: 5.5038986371s;
  animation-delay: -1.1s;
  animation-timing-function: linear;
  filter: blur(0.1822117508px);
}
.stars-1 span:nth-child(12) {
  position: absolute;
  left: 97.7420798708%;
  top: 2.4553524675%;
  animation-duration: 6.2653640704s;
  animation-delay: -1.2s;
  animation-timing-function: linear;
  filter: blur(1.7448591014px);
}
.stars-1 span:nth-child(13) {
  position: absolute;
  left: 80.468219607%;
  top: 7.6306663311%;
  animation-duration: 5.8790130599s;
  animation-delay: -1.3s;
  animation-timing-function: linear;
  filter: blur(0.9345085114px);
}
.stars-1 span:nth-child(14) {
  position: absolute;
  left: 58.2848833258%;
  top: 7.2309979532%;
  animation-duration: 6.6914055999s;
  animation-delay: -1.4s;
  animation-timing-function: linear;
  filter: blur(4.0735064628px);
}
.stars-1 span:nth-child(15) {
  position: absolute;
  left: 0.953917606%;
  top: 1.9615106754%;
  animation-duration: 5.2838914278s;
  animation-delay: -1.5s;
  animation-timing-function: linear;
  filter: blur(4.6757820097px);
}
.stars-1 span:nth-child(16) {
  position: absolute;
  left: 71.8923635565%;
  top: 0.7867828443%;
  animation-duration: 6.6002348016s;
  animation-delay: -1.6s;
  animation-timing-function: linear;
  filter: blur(3.0469336702px);
}
.stars-1 span:nth-child(17) {
  position: absolute;
  left: 0.8909991008%;
  top: 4.4728274146%;
  animation-duration: 4.3972201158s;
  animation-delay: -1.7s;
  animation-timing-function: linear;
  filter: blur(0.3859447836px);
}
.stars-1 span:nth-child(18) {
  position: absolute;
  left: 78.1682926666%;
  top: 1.8191084408%;
  animation-duration: 4.5650491973s;
  animation-delay: -1.8s;
  animation-timing-function: linear;
  filter: blur(1.3107049337px);
}
.stars-1 span:nth-child(19) {
  position: absolute;
  left: 17.9795113496%;
  top: 3.8172679933%;
  animation-duration: 3.3971770267s;
  animation-delay: -1.9s;
  animation-timing-function: linear;
  filter: blur(4.627595435px);
}
.stars-1 span:nth-child(20) {
  position: absolute;
  left: 17.6498390159%;
  top: 7.5102244691%;
  animation-duration: 6.140436087s;
  animation-delay: -2s;
  animation-timing-function: linear;
  filter: blur(0.3926701651px);
}
.stars-1 span:nth-child(21) {
  position: absolute;
  left: 87.9820472658%;
  top: 1.4762478652%;
  animation-duration: 6.4903446265s;
  animation-delay: -2.1s;
  animation-timing-function: linear;
  filter: blur(0.7642697868px);
}
.stars-1 span:nth-child(22) {
  position: absolute;
  left: 81.5706915865%;
  top: 2.8369424214%;
  animation-duration: 4.5163382543s;
  animation-delay: -2.2s;
  animation-timing-function: linear;
  filter: blur(3.6413934092px);
}
.stars-1 span:nth-child(23) {
  position: absolute;
  left: 10.128601319%;
  top: 2.7720379572%;
  animation-duration: 4.7233325183s;
  animation-delay: -2.3s;
  animation-timing-function: linear;
  filter: blur(1.8955360047px);
}
.stars-1 span:nth-child(24) {
  position: absolute;
  left: 89.0299206327%;
  top: 5.9628560143%;
  animation-duration: 4.3683507098s;
  animation-delay: -2.4s;
  animation-timing-function: linear;
  filter: blur(3.9676070508px);
}
.stars-1 span:nth-child(25) {
  position: absolute;
  left: 14.5750822994%;
  top: 5.5623121915%;
  animation-duration: 4.2725623122s;
  animation-delay: -2.5s;
  animation-timing-function: linear;
  filter: blur(2.8519936456px);
}
.stars-1 span:nth-child(26) {
  position: absolute;
  left: 73.9319730747%;
  top: 0.4895705276%;
  animation-duration: 5.9851918791s;
  animation-delay: -2.6s;
  animation-timing-function: linear;
  filter: blur(1.3812485456px);
}
.stars-1 span:nth-child(27) {
  position: absolute;
  left: 65.4605530258%;
  top: 3.5965414091%;
  animation-duration: 4.4270127173s;
  animation-delay: -2.7s;
  animation-timing-function: linear;
  filter: blur(0.1117134349px);
}
.stars-1 span:nth-child(28) {
  position: absolute;
  left: 43.1066584198%;
  top: 3.727893419%;
  animation-duration: 3.6508682389s;
  animation-delay: -2.8s;
  animation-timing-function: linear;
  filter: blur(0.2786387073px);
}
.stars-1 span:nth-child(29) {
  position: absolute;
  left: 18.2259625322%;
  top: 0.1510787616%;
  animation-duration: 2.9558928631s;
  animation-delay: -2.9s;
  animation-timing-function: linear;
  filter: blur(2.5931201523px);
}
.stars-1 span:nth-child(30) {
  position: absolute;
  left: 84.8721696871%;
  top: 4.133361698%;
  animation-duration: 3.7051834108s;
  animation-delay: -3s;
  animation-timing-function: linear;
  filter: blur(0.2133237428px);
}

.g-form {
  width: 100%;
  margin: 9% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.g-form li {
  position: relative;
  padding: 1% 0 1% 15%;
  width: 100%;
  margin-bottom: 1.5%;
}
.g-form li label {
  width: 15%;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: left;
  line-height: 1.8;
  transform: translateY(-50%);
}
.g-form li input {
  padding: 0.7rem;
  margin: 0.4rem 0;
  width: 100%;
  color: #333;
  border: 0;
  background: transparent;
  background: #fff;
  border-radius: 0.2rem;
}
.g-form li select {
  width: 100%;
  padding: 0.7rem;
  border: 0;
  background: #fff;
  border: 0;
  color: #333;
  font-family: "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background: url(../img/icon-select.svg) no-repeat 95% 50% transparent !important;
  background-size: 5% !important;
  border-radius: 0.2rem;
}
.g-form li select option {
  background-color: #fff;
}
.g-form li a {
  text-decoration: underline;
}
.g-form li.is-2row {
  display: flex;
  justify-content: space-between;
}
.g-form li.is-2row select {
  width: 47%;
}
.g-form li.is-pl {
  padding-left: 15%;
}
.g-form li.is-rule label {
  left: 0;
}
.g-form input[type=checkbox], .g-form input[type=radio] {
  display: none;
}
.g-form input[type=checkbox] + label, .g-form input[type=radio] + label {
  padding-left: 60px;
  width: 100%;
  color: #fff;
  position: relative;
  display: inline-block;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.g-form input[type=checkbox] + label:before, .g-form input[type=radio] + label:before,
.g-form input[type=checkbox] + label:after, .g-form input[type=radio] + label:after {
  content: "✔";
  color: #000;
  width: 47px;
  height: 47px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  background-position: -633px -466px;
  transition: 0.2s;
  text-align: center;
  font-size: 47px;
  line-height: 0.8;
  border-radius: 0.2rem;
}
.g-form input[type=checkbox] + label:before, .g-form input[type=radio] + label:before {
  content: "";
}
.g-form input[type=checkbox] + label:after, .g-form input[type=radio] + label:after {
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 80%;
  transform: scale(1.5);
  background-color: transparent;
}
.g-form input[type=checkbox] + label:active:after, .g-form input[type=checkbox]:checked + label:after,
.g-form input[type=radio] + label:active:after, .g-form input[type=radio]:checked + label:after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.counter {
  position: relative;
  height: 50px;
  margin: 5%;
  overflow: hidden;
  width: 160px;
  z-index: 2;
}
.counter * {
  margin: 0;
  padding: 0;
}
.counter > div {
  position: relative;
  float: left;
  top: 100%;
  transform: translateY(-1000%);
  transition-timing-function: cubic-bezier(0, 0.575, 0.565, 1.05);
  will-change: transform;
}
.counter > div:nth-child(1) {
  transition-duration: 1s;
}
.counter > div:nth-child(2) {
  transition-duration: 1.2s;
}
.counter > div:nth-child(3) {
  transition-duration: 1.4s;
}
.counter > div:nth-child(4) {
  transition-duration: 1.6s;
}
.counter > div:nth-child(5) {
  transition-duration: 1.8s;
}
.counter > div:nth-child(6) {
  transition-duration: 2s;
}
.counter > div:nth-child(7) {
  transition-duration: 2.2s;
}
.counter > div:nth-child(8) {
  transition-duration: 2.4s;
}
.counter > div:nth-child(9) {
  transition-duration: 2.6s;
}
.counter > div:nth-child(10) {
  transition-duration: 2.8s;
}
.counter > div > span {
  display: block;
  font-size: 45px;
  color: #fff;
  font-weight: normal;
  line-height: 1;
}
.counter > span {
  display: block;
  font-size: 45px;
  color: #fff;
  font-weight: normal;
  line-height: 1;
}
.counter.is-animate > div {
  top: 0;
  transform: translateY(0);
}
.counter.delay200 > div:nth-child(1) {
  transition-duration: 1.4s;
}
.counter.delay200 > div:nth-child(2) {
  transition-duration: 1.6s;
}
.counter.delay200 > div:nth-child(3) {
  transition-duration: 1.8s;
}
.counter.delay400 > div:nth-child(1) {
  transition-duration: 1.8s;
}
.counter.delay400 > div:nth-child(2) {
  transition-duration: 2s;
}
.counter.delay400 > div:nth-child(3) {
  transition-duration: 2.2s;
}
.counter.delay600 > div:nth-child(1) {
  transition-duration: 2.2s;
}
.counter.delay600 > div:nth-child(2) {
  transition-duration: 2.4s;
}
.counter.delay600 > div:nth-child(3) {
  transition-duration: 2.6s;
}
.counter.delay800 > div:nth-child(1) {
  transition-duration: 2.6s;
}
.counter.delay800 > div:nth-child(2) {
  transition-duration: 2.8s;
}
.counter.delay800 > div:nth-child(3) {
  transition-duration: 3s;
}

.video-wrap {
  margin: 0 0;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.5% !important;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-wrap .img {
  position: absolute;
  overflow: hidden;
  float: left;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-wrap .img:after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/video.jpg) no-repeat center;
  background-size: 102%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.5s;
}
.video-wrap .img:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: 0.5s;
}
.video-wrap .img .video-btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  z-index: 2;
}
.video-wrap p {
  font-size: 15px;
}
.video-wrap.is-active .img {
  opacity: 0;
  visibility: hidden;
}
.video-wrap:hover .img:after {
  transform: scale(1.1);
}
.video-wrap:hover .img:before {
  opacity: 0;
}
.video-wrap:hover .video-btn-play:before {
  border: 60px solid #fff;
  transform: translate(-50%, -50%) scale(1.5);
}
.video-wrap:hover .video-btn-play:after {
  transform: translate(-50%, -50%) scale(1.2);
  border-color: transparent transparent transparent #3876a3;
}

.video-btn-play {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  text-indent: -9999px;
}
.video-btn-play:before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 2px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  transition: 0.2s;
  animation: circle-jump 0.5s linear infinite alternate;
}
@keyframes circle-jump {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
.video-btn-play:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 0 30px 45px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  transition: 0.1s;
}

.tns-outer {
  position: relative;
}

.tns-controls button, .tns-controls div, .tns-cus-controls button, .tns-cus-controls div {
  position: absolute;
  width: 5rem;
  height: 5rem;
  background-size: 50%;
  top: 44%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
  background-color: transparent;
  z-index: 3;
  text-indent: -9999px;
  border: 0;
  transform: translateY(-50%);
  background-image: url(../img/icon-next-blue.svg);
  cursor: pointer;
}
.tns-controls button:hover, .tns-controls div:hover, .tns-cus-controls button:hover, .tns-cus-controls div:hover {
  background-color: #fff;
}
.tns-controls button:nth-of-type(1), .tns-controls div:nth-of-type(1), .tns-cus-controls button:nth-of-type(1), .tns-cus-controls div:nth-of-type(1) {
  left: 0;
  transform: scale(-1, 1) translateY(-50%);
}
.tns-controls button:nth-of-type(2), .tns-controls div:nth-of-type(2), .tns-cus-controls button:nth-of-type(2), .tns-cus-controls div:nth-of-type(2) {
  right: 0;
}

.tns-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.tns-nav button {
  width: 25px;
  height: 25px;
  border: 0;
  margin: 2px;
  position: relative;
  background-color: transparent;
}
.tns-nav button:before, .tns-nav button:after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.tns-nav button:after {
  transform: translate(-50%, -50%) scale(0);
}
.tns-nav button:hover:before, .tns-nav button:hover:after {
  background-color: #3876a3;
}
.tns-nav button.tns-nav-active:after {
  background-color: red;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
}

.tns-controls {
  text-align: center;
  margin-bottom: 10px;
}

.msg-box {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 101;
  transform: scale(1);
  perspective: 700px;
  font-family: "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  pointer-events: none;
}
.msg-box.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.msg-box ::-webkit-scrollbar-track {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.3);
}
.msg-box ::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}
.msg-box ::-webkit-scrollbar-thumb {
  overflow: hidden;
  -webkit-box-shadow: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.msg-box .msg-wrap {
  background: #fff;
  width: 90%;
  height: 90%;
  max-width: 550px;
  max-height: 730px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: rotateY(50deg) scale(0.5) translate3d(0, -50%, 0);
  transform-style: preserve-3d;
  transition-delay: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}
.msg-box .msg-wrap > .close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  transition: 0.2s;
  background: #3876a3;
  opacity: 0;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.msg-box .msg-wrap > .close:before, .msg-box .msg-wrap > .close:after {
  content: "";
  width: 2px;
  height: 40px;
  background: #fff;
  transform: rotate(45deg) translate3d(0, 0, 0);
  position: absolute;
  top: 7px;
  left: 21px;
}
.msg-box .msg-wrap > .close:before {
  transform: rotate(45deg) translate3d(0, 0, 0);
}
.msg-box .msg-wrap > .close:after {
  transform: rotate(-45deg) translate3d(0, 0, 0);
}
.msg-box.is-active .msg-wrap {
  transform: rotateY(0deg) scale(1) translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
}
.msg-box.is-active .msg-wrap > .close {
  transform: scale(1);
  opacity: 1;
}
.msg-box.is-active .msg-wrap > .close:hover {
  transform: rotate(90deg);
}
.msg-box .msg-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding-right: 5%;
}
.msg-box .msg-content header {
  font-size: 35px;
  font-weight: bold;
}
.msg-box .msg-content p {
  line-height: 2;
  margin: 10px 0;
}
.msg-box .msg-content img {
  max-width: 100%;
}
.msg-box .msg-content .bt {
  background: #3876a3;
  width: 70%;
  display: block;
  border-radius: 30px;
  margin: 10px auto;
  cursor: pointer;
  color: #fff;
  line-height: 2.5;
  font-weight: bold;
  transition: 0.5s;
  position: relative;
}
.msg-box .msg-content .bt:hover {
  background: #00c5db;
  color: #fff;
  transition: 0.2s;
}
.msg-box#msg-skin .msg-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5%;
}
.msg-box#msg-skin .msg-content header h2 {
  font-size: 45px;
  margin: 50px 0 20px;
}
.msg-box#msg-skin .msg-content p {
  line-height: 1.5;
  font-size: 22px;
}
.msg-box#msg-skin .msg-content img {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

#msg-alert .msg-wrap {
  height: auto;
  min-height: 100px;
  width: 400px;
}
#msg-alert .msg-content {
  text-align: center;
  padding: 5%;
  height: auto;
}
#msg-alert .msg-content header {
  font-size: 25px;
}

.text-gradient-1 {
  color: #e4c884;
  background: linear-gradient(to right, #e4c884 20%, #fbf2c2 45%, #fbf2c2 55%, #e4c884 70%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
  color: #dbd6c6;
  background: linear-gradient(to bottom, #cdb8a2, #dbd6c6 40%, #e7d2ab 70%, #d4bf98 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-3 {
  color: #25728d;
  background: linear-gradient(125deg, #25728d, #004e6a);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.3rem rgba(0, 78, 106, 0.3));
}

.text-gradient-4 {
  color: #0b90a1;
  background: linear-gradient(110deg, #0b90a1 20%, #15aebf, #1cbccf, #23a1b3 80%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-5 {
  color: #fff;
  background: linear-gradient(to bottom, #eee, #666);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0rem 0.2rem 0.2rem rgba(0, 0, 0, 0.5));
}

.text-gradient-6 {
  color: #fff;
  font-weight: bold;
  background: radial-gradient(ellipse at 30% 0%, #fff, #fedf4b), radial-gradient(ellipse at 90% 100%, #fff, transparent), yellow;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-7 {
  color: #fff;
  font-weight: bold;
  background: linear-gradient(to right, #4083bc 40%, #01577b 50%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-red {
  color: red;
}

.color-green {
  color: #00ab85;
}

.color-light-green {
  color: #74ccad;
}

.color-blue {
  color: #3876a3;
}

.color-light-blue {
  color: #46aaff;
}

.color-yellow {
  color: #f5e828;
}

.font-notosans {
  font-family: "Noto Sans TC";
}

html {
  font-size: 1.25vw;
}

body {
  overflow-x: hidden;
}

.g-wrap {
  font-family: "Roboto", "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  width: 100%;
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(ellipse, #fff 0%, rgba(255, 255, 255, 0) 80%), url(../img/bg-footer.png), url(../img/bg-mountain.png), url(../img/bg-water.png);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: 50% 70%, 50% 102%, 50% 0, 0 0;
  background-size: 100% 40%, 100%, 100%, 100%;
  background-color: #051c30;
}
.g-wrap img {
  max-width: 100%;
}
.g-wrap a {
  color: #3876a3;
  text-decoration: none;
  transition: color 0.4s;
}
.g-wrap a:hover {
  color: #fff;
}
.g-wrap * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.g-wrap li {
  list-style-type: none;
}

[class^=g-bt-] {
  color: #fff;
  width: 15rem;
  line-height: 2;
  display: block;
  text-align: center;
  border-radius: 0.2rem;
  cursor: pointer;
  position: relative;
  background: linear-gradient(to bottom, #ffdc79, #cb9b34);
}
[class^=g-bt-]:before {
  content: "";
  width: 10rem;
  height: 2.5rem;
  background: url(../img/icon-flare-white.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation: flare_shine 0.02s infinite alternate;
  bottom: calc(100% - 1.25rem);
  left: 0%;
}
@keyframes flare_shine {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.1);
  }
}
[class^=g-bt-]:after {
  content: "";
  border: 0.15rem solid #ffdc79;
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  bottom: -0.3rem;
  left: -0.3rem;
  border-radius: 0.5rem;
}
[class^=g-bt-] span {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
  color: #fff;
  padding: 0;
}
[class^=g-bt-] span:before {
  content: "";
  background: linear-gradient(125deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, white 60%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: 1s;
  animation: bt_shine 2s ease infinite;
}
@keyframes bt_shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
[class^=g-bt-] span b {
  display: block;
  font-size: 1.7rem;
}
[class^=g-bt-] i {
  background: url(../img/icon-next-fff.svg) no-repeat center;
  background-size: 100%;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.2rem;
  margin-left: 0.3rem;
}
[class^=g-bt-].is-light {
  background: linear-gradient(to bottom, #ccc, #fff);
}
[class^=g-bt-].is-light span {
  color: #000;
  background: #fff;
}
[class^=g-bt-].is-light span:after {
  background-image: url(../img/icon-next-blue.svg);
}
[class^=g-bt-]:hover {
  color: #fff;
  background: linear-gradient(to top, #ffdc79, #cb9b34);
}

.g-bt-2 span {
  background: linear-gradient(to bottom, #0097c8, #006695);
}
.g-bt-2:hover span {
  background: linear-gradient(to top, #0097c8, #006695);
}

[class^=bt-pd-] {
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  z-index: 1;
}

.bt-pd-1, .bt-pd-2 {
  width: 6.5rem;
  height: 7rem;
  top: -0.4rem;
  left: 5%;
}

.bt-pd-1 {
  background-image: url(../img/bt-pd-1.png);
}

.bt-pd-2 {
  background-image: url(../img/bt-pd-2.png);
}

.bt-pd-3, .bt-pd-4, .bt-pd-5, .bt-pd-6 {
  width: 6.4rem;
  height: 6rem;
  top: -3.2rem;
  left: 60.7%;
}

.bt-pd-3 {
  background-image: url(../img/bt-pd-3.png);
}

.bt-pd-4 {
  background-image: url(../img/bt-pd-4.png);
}

.bt-pd-5 {
  background-image: url(../img/bt-pd-5.png);
}

.bt-pd-6 {
  background-image: url(../img/bt-pd-6.png);
}

.btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btns a {
  margin: 0 0.7rem;
}

.list-no li {
  position: relative;
  margin-left: 1.2vw;
  list-style-type: decimal;
}

.list-star li {
  position: relative;
}
.list-star li:before {
  content: "*";
}

.list-dot li {
  position: relative;
  padding-left: 0.7rem;
}
.list-dot li:before {
  content: "．";
  position: absolute;
  top: 0;
  left: 0;
}

.g-section {
  position: relative;
}
.g-section header {
  width: 75%;
  background: linear-gradient(310deg, #d5b060, #fce79e, #755006, #d5b060, #fce79e, #755006);
  position: relative;
  padding: 0.1rem;
  margin: 0 auto;
  display: block;
  border-radius: 50rem;
  box-shadow: 0 1rem 0.8rem rgba(0, 0, 0, 0.5);
}
.g-section header:before {
  content: "";
  width: 30rem;
  height: 5rem;
  background: url(../img/icon-flare-white.png) center;
  background-size: 100%;
  position: absolute;
  bottom: calc(100% - 2.5rem);
  left: -7%;
  display: block;
  z-index: 1;
}
.g-section header h2 {
  background: linear-gradient(to bottom, #02283c, #00587c 30%, #00587c 70%, #02283c);
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  border-radius: 50rem;
  font-size: 3.5rem;
  letter-spacing: 0.5rem;
}
.g-section header h2:before, .g-section header h2:after {
  content: "";
  width: 0.8rem;
  height: 1.1rem;
  background: url(../img/icon-diamond-gold.svg);
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1.2rem;
  position: relative;
  top: -0.4rem;
}
.g-section header h2 b {
  font-size: 3.8rem;
  margin: 0 0.8rem;
}
#g-bg .stars-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
#g-bg .deco-bird-1 {
  position: absolute;
  background: url(../img/deco-bird-1.png);
  background-size: 100%;
  width: 19.6rem;
  height: 22.7rem;
  top: 0.9%;
  left: 1.8%;
}
#g-bg .deco-bird-2 {
  position: absolute;
  background: url(../img/deco-bird-2.png);
  background-size: 100%;
  width: 14.5rem;
  height: 22.7rem;
  top: 4.9%;
  right: -0.3%;
}
#g-bg .gondola {
  position: absolute;
  top: 41.5rem;
  left: -5%;
  width: 110%;
  height: 2.8rem;
  transform: rotate(-11.5deg);
  display: block;
}
#g-bg .gondola [class^=line-] {
  width: 100%;
  height: 0.2rem;
  background: #999;
  position: absolute;
}
#g-bg .gondola .line-1 {
  top: 0;
}
#g-bg .gondola .line-2 {
  bottom: 1rem;
}
#g-bg .gondola .car {
  width: 100%;
  animation: gondola_move 10s linear infinite;
}
@keyframes gondola_move {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(50%);
  }
}
#g-bg .gondola .deco-gondola {
  width: 4.6rem;
  height: 7.3rem;
  background: url(../img/deco-gondola.png) no-repeat;
  background-size: 100%;
  position: absolute;
  transform: rotate(11.5deg);
}
#g-bg .gondola .deco-gondola:nth-child(odd) {
  top: 1rem;
}
#g-bg .gondola .deco-gondola:nth-child(even) {
  top: -0.6rem;
}
#g-bg .gondola .deco-gondola:nth-of-type(1) {
  left: 0%;
}
#g-bg .gondola .deco-gondola:nth-of-type(2) {
  left: 50%;
}
#g-bg .gondola .deco-gondola:nth-of-type(3) {
  left: 100%;
}
#g-bg .gondola .deco-gondola:nth-of-type(4) {
  left: 150%;
}

.deco-fogs {
  pointer-events: none;
}
.deco-fogs div {
  width: 70rem;
  height: 50rem;
  position: absolute;
  mix-blend-mode: plus-lighter;
  z-index: 1;
}
.deco-fogs div:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  position: absolute;
  top: 0;
  left: 0;
}
.deco-fogs div:nth-child(3n-1):before {
  background-image: url(../img/fog-1.png);
}
.deco-fogs div:nth-child(3n-2):before {
  background-image: url(../img/fog-2.png);
}
.deco-fogs div:nth-child(3n-3):before {
  background-image: url(../img/fog-3.png);
}
.deco-fogs div:nth-of-type(1) {
  top: 80%;
  left: 0;
}
.deco-fogs div:nth-of-type(2) {
  top: 90%;
  left: 20%;
}
.deco-fogs div:nth-of-type(3) {
  top: 13%;
  left: -10%;
}
.deco-fogs div:nth-of-type(4) {
  top: 15%;
  left: 30%;
}
.deco-fogs div:nth-of-type(5) {
  top: 30%;
  left: -10%;
}
.deco-fogs div:nth-of-type(6) {
  top: 50%;
  left: 30%;
}
.deco-fogs div:nth-of-type(7) {
  top: 61%;
  left: 0%;
}
.deco-fogs div:nth-of-type(8) {
  top: 66%;
  left: 30%;
}
.deco-fogs div:nth-of-type(9) {
  top: 72%;
  left: 20%;
}
.deco-fogs div.is-animate:nth-child(odd):before {
  transform: translateX(-100%);
  opacity: 0.1;
}
.deco-fogs div.is-animate:nth-child(even):before {
  transform: translateX(100%);
  opacity: 0.1;
}

#kv {
  height: 20rem;
}
#kv .logo-biotherm {
  position: absolute;
  width: 17.1rem;
  height: 5.6rem;
  top: 15.5%;
  left: 39.4%;
  background: url(../img/logo-biotherm.svg);
  background-size: 100%;
  text-indent: -9999px;
  filter: drop-shadow(0 0 0.2rem #fff);
}
#kv h1 {
  position: absolute;
  width: 38rem;
  height: 7.1rem;
  top: 53%;
  left: 26.1%;
  background: url(../img/h1.png);
  background-size: 100%;
  text-indent: -9999px;
}
#game {
  height: 55rem;
  margin: 5rem 0;
}
#game header {
  margin-top: 3rem;
}
#game .doors {
  position: relative;
  height: 39.5rem;
  margin-top: 3.1rem;
}
#game .door-pole {
  width: 100%;
  height: 1.7rem;
  background: linear-gradient(to bottom, #fff 20%, #aaa 90%, #fff 100%);
  transform: translateX(-100%);
  transition: 0.2s;
}
#game .door-left {
  width: 24%;
  height: 100%;
  background: url(../img/door-left.png) no-repeat;
  background-size: 100% 105%;
  position: absolute;
  top: -0.2rem;
  left: 0;
  transform: translateX(-100%);
  transition: 1s;
}
#game .door-right {
  width: 89%;
  height: 100%;
  background: url(../img/door-right.png) no-repeat;
  background-size: 100% 105%;
  position: absolute;
  top: -0.2rem;
  right: 0;
  transform: translateX(100%);
  transition: 1s;
}
#game .lp-char-1 {
  width: 14rem;
  height: 15rem;
  bottom: -1%;
  left: 17.5%;
  display: block;
  background: url(../img/lp-char-1.png);
  background-size: 100%;
  position: absolute;
  transform-origin: 50% 100%;
  animation: char_LP_jump 1s infinite;
}
@keyframes char_LP_jump {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(0.9, 1.1);
  }
  20% {
    transform: scale(1.1, 0.9);
  }
  30%, 100% {
    transform: scale(1, 1);
  }
}
#game .lp-char-1 .tip {
  font-size: 1.7rem;
  text-shadow: 0 0 0.5rem #fff;
  width: 14rem;
  position: absolute;
  top: 2.5%;
  left: 91%;
  letter-spacing: 0.2rem;
}
#game .lp-char-1 .tip p {
  transform: rotate(8deg);
}
#game .lp-char-1 .tip:after {
  content: "";
  width: 100%;
  height: 3rem;
  background: url(../img/game-tip.png) no-repeat;
  background-size: 88%;
  display: block;
  margin-top: -0.5rem;
}
#game .txt {
  width: 50%;
  margin-left: 18.6%;
  position: relative;
  z-index: 1;
}
#game .txt .logo-biotherm {
  width: 14.4rem;
  height: 3.85rem;
  margin: 3.9rem auto 0;
  display: block;
  background: url(../img/logo-biotherm.svg) no-repeat;
  background-size: 100%;
  text-indent: -9999px;
  filter: drop-shadow(0 0 0.2rem #fff);
}
#game .txt h3 {
  font-size: 3.8rem;
  font-weight: bold;
  color: #fff;
  margin-top: -0.3rem;
  letter-spacing: 0.5rem;
  background: url(../img/texture-white-paper.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#game .txt hr {
  width: 27rem;
  height: 0.6rem;
  background: radial-gradient(ellipse, #fff 0%, transparent 60%);
  display: block;
  border: 0;
  margin: 0.8rem auto 0.8rem;
}
#game .txt p {
  font-size: 2.2rem;
  letter-spacing: 0.9rem;
  text-indent: 0.9rem;
  color: #fff;
  background: url(../img/texture-white-paper.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#game .txt .btns {
  margin-top: 1.6rem;
}
#game .txt .btns a {
  width: 20rem;
  color: #00587c;
  font-size: 1.3rem;
  background: url(../img/texture-white-paper.jpg);
  border-radius: 50rem;
  position: relative;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
  line-height: 2.3;
  letter-spacing: 0.2rem;
  cursor: pointer;
}
#game .txt .btns a:before {
  content: "";
  position: absolute;
  border: 0.1rem solid #fff;
  top: -0.4rem;
  right: -0.4rem;
  bottom: -0.4rem;
  left: -0.4rem;
  border-radius: 50rem;
}
#game .txt .btns i {
  width: 0.5rem;
  height: 0.5rem;
  background: url(../img/deco-pixel-arrow.svg) no-repeat center;
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1rem;
}
#game .txt .btns:hover a {
  color: #00c5db;
}
#game.is-animate .door-pole {
  transform: translateX(0);
}
#game.is-animate .door-left {
  transform: translateX(0);
}
#game.is-animate .door-right {
  transform: translateX(0);
}

#sale {
  margin-top: 15rem;
  padding-bottom: 5rem;
}
#sale header {
  width: 80%;
  margin-top: 3rem;
}
#sale header h2 {
  font-size: 3rem;
  letter-spacing: 0.2rem;
  text-indent: 0.2rem;
  padding: 0.5rem;
}
#sale header h2 b {
  font-size: 3.3rem;
}
#sale .sub-title {
  font-size: 2.5rem;
  color: #00587c;
  text-shadow: 0 0 1rem #fff;
  margin: 2rem 0 1rem;
}
#sale #swiper {
  width: 1920px;
  margin: 2.2rem auto 4rem;
  transform-origin: 0 0;
}
#sale .owl-wrap {
  margin: 0em auto 0;
}
#sale .owl-wrap {
  width: 120%;
  margin-left: -10%;
  position: relative;
}
#sale .sale-1-item {
  width: 23.75rem;
  margin: 0 auto;
}
#sale .sale-1-item li dl {
  padding-left: 10%;
}
#sale .owl-item {
  opacity: 0;
  pointer-events: none;
  filter: blur(5px);
  transform: scale(0);
  transition: 1s;
  position: relative;
  margin-bottom: 2rem;
}
#sale .owl-item.active {
  opacity: 0.5;
  transform: translateX(50%) scale(0.8);
}
#sale .owl-item.active ~ .active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: translateX(-10%) scale(1);
  z-index: 1;
}
#sale .owl-item.active ~ .active ~ .active {
  transform: translateX(10%) scale(1);
  z-index: 1;
}
#sale .owl-item.active ~ .active ~ .active ~ .active {
  opacity: 0.5;
  pointer-events: none;
  filter: blur(5px);
  transform: translateX(-50%) scale(0.8);
  z-index: 0;
}
#sale li {
  background: url(../img/sale-bg-1.png);
  background-size: 100%;
  height: 40.9rem;
  box-shadow: 1rem 1rem 0.7rem rgba(0, 88, 124, 0.6);
  margin: 0 auto;
}
#sale li .img img {
  width: 100%;
  margin-bottom: -2rem;
}
#sale li .txt {
  width: 100%;
  color: #00587c;
}
#sale li h4 {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-indent: 0.1rem;
  color: #00263a;
}
#sale li .price {
  font-size: 1.2rem;
  color: #00263a;
}
#sale li .price b {
  font-weight: normal;
  font-size: 1.3rem;
}
#sale li .price u {
  color: #68a7ba;
  text-decoration: none;
  transform: skew(-10deg);
  display: inline-block;
  vertical-align: middle;
  font-size: 1.7rem;
  margin: 0 0.2rem;
}
#sale li dl {
  padding-left: 15%;
  font-size: 1.2rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
#sale li dt {
  color: #fff;
  background: #00587c;
  border: 0.1rem solid #d5b060;
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sale li dd {
  width: calc(100% - 1.7rem);
  padding-left: 0.5rem;
}
#sale li dd small {
  font-size: 0.7rem;
}
#sale li dt, #sale li dd {
  margin-bottom: 0.5rem;
}
#sale li .btns {
  margin-top: 1.3rem;
}
#sale li .btns a span {
  display: flex;
  align-items: center;
  justify-content: center;
}
#sale li .btns a span b {
  font-weight: normal;
}

#sale-1-btn-prev, #sale-1-btn-next,
#sale-2-btn-prev, #sale-2-btn-next {
  width: 6rem;
  height: 6rem;
  background: #00587c;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #d5b060;
  position: absolute;
  top: 37%;
  z-index: 2;
  cursor: pointer;
}
#sale-1-btn-prev:before, #sale-1-btn-next:before,
#sale-2-btn-prev:before, #sale-2-btn-next:before {
  content: "";
  width: 2rem;
  height: 3rem;
  background: url(../img/icon-next-fff.svg) center;
  background-size: 100%;
  position: absolute;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1rem);
}
#sale-1-btn-prev:hover, #sale-1-btn-next:hover,
#sale-2-btn-prev:hover, #sale-2-btn-next:hover {
  background-color: #d5b060;
}

#sale-1-btn-prev, #sale-2-btn-prev {
  left: 12%;
}
#sale-1-btn-prev:before, #sale-2-btn-prev:before {
  transform: scale(-1, 1);
}

#sale-1-btn-next, #sale-2-btn-next {
  right: 12%;
}

#sale-owl-1 li dl {
  padding-left: 18%;
}

#sale-owl-2 li {
  background-image: url(../img/sale-bg-2.png);
}

#new-year-vip {
  padding-bottom: 7rem;
}
#new-year-vip header {
  margin-top: 2.4rem;
}
#new-year-vip ol {
  display: flex;
  justify-content: space-between;
  width: 75%;
  margin: 6.2rem auto 0;
}
#new-year-vip li {
  width: 43.5%;
  height: 45.6rem;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
  transform: translateY(30%) scale(0.8);
  opacity: 0;
  transition: 1s;
}
#new-year-vip li:nth-of-type(2) {
  transition-delay: 0.2s;
}
#new-year-vip li.gift-1 {
  background-image: url(../img/new-year-vip-1.jpg);
}
#new-year-vip li.gift-1 .label {
  background-color: #90110e;
}
#new-year-vip li.gift-1 .desc {
  margin: 19rem 0 0 5.5rem;
}
#new-year-vip li.gift-1 .btns {
  margin-top: 13.8rem;
}
#new-year-vip li.gift-2 {
  background-image: url(../img/new-year-vip-2.jpg);
}
#new-year-vip li.gift-2 .label {
  background-color: #095488;
}
#new-year-vip li.gift-2 .desc {
  margin-top: 31rem;
}
#new-year-vip li.gift-2 .btns {
  margin-top: 2.5rem;
}
#new-year-vip li .label {
  width: 7rem;
  height: 7rem;
  border-radius: 50rem;
  position: absolute;
  top: -3rem;
  left: -3.2rem;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.8), 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.7);
}
#new-year-vip li .label .icon-gift {
  width: 4.1rem;
  height: 2.6rem;
  background: url(../img/icon-gift.svg) center no-repeat;
  background-size: 100%;
  display: block;
  margin: 0.5rem auto 0.2rem;
}
#new-year-vip li .label span {
  font-size: 1.6rem;
  border-top: 0.1rem solid #fff;
  border-bottom: 0.1rem solid #fff;
}
#new-year-vip li dl {
  font-size: 2rem;
  text-align: left;
  margin-bottom: 0.3rem;
}
#new-year-vip li dl dt {
  background: #3876a3;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.8), 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.7);
  border-radius: 50rem;
  width: 3rem;
  height: 3rem;
  border: 0.1rem solid gold;
  text-align: center;
  line-height: 1.5;
}
#new-year-vip li dl dt, #new-year-vip li dl dd {
  display: inline-block;
}
#new-year-vip li dd, #new-year-vip li p {
  font-size: 2.2rem;
  text-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
}
#new-year-vip.is-animate li {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#spa-treatment header {
  margin-top: 2.5rem;
}
#spa-treatment .sub-title {
  font-size: 2.5rem;
  color: #00587c;
  text-shadow: 0 0 1rem #fff;
  margin: 0.5rem 0 0;
}
#spa-treatment .for-girl, #spa-treatment .for-men {
  width: 67.8rem;
  height: 40rem;
  margin: 0 auto;
  background-size: 100%;
  position: relative;
  opacity: 0;
  transition: 1s;
}
#spa-treatment .for-girl h3, #spa-treatment .for-men h3 {
  font-size: 2.5rem;
  font-weight: bold;
  position: absolute;
  top: 26%;
  left: 21.6%;
  letter-spacing: 0.1rem;
}
#spa-treatment .for-girl .btns, #spa-treatment .for-men .btns {
  position: absolute;
  top: 38%;
  left: -21%;
}
#spa-treatment .for-girl .btns a, #spa-treatment .for-men .btns a {
  width: 28rem;
  line-height: 1.7;
}
#spa-treatment .for-girl .btns a span, #spa-treatment .for-men .btns a span {
  display: flex;
  align-items: center;
  justify-content: center;
}
#spa-treatment .for-girl .btns a span b, #spa-treatment .for-men .btns a span b {
  display: inline-block;
  font-size: 2.3rem;
}
#spa-treatment .for-girl .btns a span i, #spa-treatment .for-men .btns a span i {
  margin-right: 0.5rem;
}
#spa-treatment .for-girl .desc, #spa-treatment .for-men .desc {
  position: absolute;
  top: 53%;
  left: 8%;
}
#spa-treatment .for-girl .desc p, #spa-treatment .for-men .desc p {
  font-size: 2.1rem;
  line-height: 1.3;
  letter-spacing: 0.1rem;
}
#spa-treatment .for-girl .desc .icon-cross, #spa-treatment .for-men .desc .icon-cross {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  text-indent: -9999px;
  position: relative;
}
#spa-treatment .for-girl .desc .icon-cross:before, #spa-treatment .for-girl .desc .icon-cross:after, #spa-treatment .for-men .desc .icon-cross:before, #spa-treatment .for-men .desc .icon-cross:after {
  content: "";
  width: 2.4rem;
  height: 0.1rem;
  background: #fff;
  position: absolute;
  top: 1.2rem;
  left: -0.2rem;
}
#spa-treatment .for-girl .desc .icon-cross:before, #spa-treatment .for-men .desc .icon-cross:before {
  transform: rotate(45deg);
}
#spa-treatment .for-girl .desc .icon-cross:after, #spa-treatment .for-men .desc .icon-cross:after {
  transform: rotate(-45deg);
}
#spa-treatment .for-girl .gift, #spa-treatment .for-men .gift {
  position: absolute;
  top: 75%;
  left: 3.5%;
  text-align: left;
}
#spa-treatment .for-girl .gift p, #spa-treatment .for-men .gift p {
  font-size: 1.3rem;
  letter-spacing: 0.6rem;
}
#spa-treatment .for-girl .gift b, #spa-treatment .for-men .gift b {
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
}
#spa-treatment .for-girl .gift b u, #spa-treatment .for-men .gift b u {
  font-size: 2.1rem;
  text-decoration: none;
  letter-spacing: 0.2rem;
  line-height: 1;
}
#spa-treatment .for-girl {
  background-image: url(../img/spa-treatment-1.png);
  left: -0.5rem;
  margin-bottom: 2rem;
  transform: translateX(30%) scale(0.8);
}
#spa-treatment .for-men {
  background-image: url(../img/spa-treatment-2.png);
  transform: translateX(-30%) scale(0.8);
  transition-delay: 0.2s;
}
#spa-treatment .for-men h3 {
  left: 64%;
}
#spa-treatment .for-men .btns {
  left: 22%;
}
#spa-treatment .for-men .desc {
  left: 50%;
}
#spa-treatment .for-men .gift {
  left: 75.5%;
}
#spa-treatment .rule {
  margin-top: 17rem;
  margin-bottom: 2.2rem;
  color: #00587c;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#spa-treatment .rule h3 {
  background-color: #00587c;
  color: #fff;
  display: inline-block;
  padding: 0 0.5rem;
  letter-spacing: 0.1rem;
  margin-right: 1rem;
}
#spa-treatment .rule .list-no {
  display: flex;
}
#spa-treatment.is-animate .for-girl, #spa-treatment.is-animate .for-men {
  transform: translateX(0) scale(1);
  opacity: 1;
}

#try-it {
  height: 60.5rem;
  background-image: url(../img/bg-4.jpg);
}
#try-it header {
  padding-top: 2.5rem;
  letter-spacing: 0.1rem;
}
#try-it header h2 {
  margin-bottom: 0.4rem;
}
#try-it header p {
  font-size: 1.4rem;
  letter-spacing: 0.2rem;
  line-height: 1.4;
}
#try-it .flex {
  width: 68%;
  margin: 2rem auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#try-it .gift {
  width: 47.9%;
  margin-top: 4.3rem;
}
#try-it .gift img {
  width: 100%;
}
#try-it .gift .txt {
  width: 69%;
  background: linear-gradient(310deg, #d5b060, #fce79e, #755006, #d5b060, #fce79e, #755006);
  position: relative;
  padding: 0.1rem;
  margin: -2.6rem auto 0;
  display: block;
}
#try-it .gift .txt > div {
  background: linear-gradient(310deg, #02283c, #415f6f 40%, #415f6f 60%, #02283c);
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.2rem;
}
#try-it .gift .txt > div p {
  font-size: 1.5rem;
  font-weight: bold;
}
#try-it .gift .txt > div b {
  font-size: 2.4rem;
  display: inline-block;
  vertical-align: middle;
}
#try-it .gift u {
  font-size: 1.45rem;
  color: #00587c;
  text-decoration: none;
  font-weight: bold;
  margin: 0.7rem 0 0 0.7rem;
  display: block;
}
#try-it .gift u b {
  font-size: 2.2rem;
  display: inline-block;
  vertical-align: middle;
}
#try-it .form {
  width: 50%;
  padding-left: 1.8rem;
}
#try-it .g-form {
  width: 100%;
  margin: 0 auto 0;
}
#try-it .g-form li {
  padding: 0.2rem 0 0.2rem 0rem;
  margin: 0.4rem 0;
  background: #fff;
  border: 0;
  border-radius: 0.2rem;
}
#try-it .g-form li input, #try-it .g-form li select {
  font-size: 1.2rem;
  background: transparent;
  margin: 0;
  padding: 0.4rem 1rem;
  border: 0;
}
#try-it .g-form li label {
  font-size: 1.2rem;
  color: #fff;
  left: auto;
  right: 100%;
}
#try-it .g-form li.is-pl {
  padding-left: 0;
  border: 0;
  box-shadow: none;
}
#try-it .g-form li.is-rule {
  display: flex;
  margin-bottom: 0;
}
#try-it .g-form li.is-rule .btns {
  width: 67%;
}
#try-it .g-form li.is-rule .btns button {
  width: 100%;
  font-size: 2rem;
  line-height: 2.6;
}
#try-it .g-form li.is-nobg {
  background: none;
}
#try-it .g-form li.is-option {
  color: #000;
  font-size: 30px;
  text-align: center;
  margin-top: 0%;
  background: none;
}
#try-it .g-form li.is-option .btns {
  margin: 6% 0 4%;
}
#try-it .g-form li.is-option .btns a {
  font-size: 2rem;
  text-decoration: none;
  color: #fff;
  width: 40%;
  line-height: 2.3;
}
#try-it .g-form input[type=checkbox] + label {
  left: 0;
  padding-left: 3rem;
  font-size: 0.9rem;
  color: #fff;
}
#try-it .g-form input[type=checkbox] + label a {
  display: inline-block;
  color: #fff;
}
#try-it .g-form input[type=checkbox] + label:before, #try-it .g-form input[type=checkbox] + label:after {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}
#try-it .g-form input[type=checkbox] + label:before {
  background: #fff;
  border: 0;
}
#try-it .g-form .btns {
  width: 100%;
  margin-top: 1%;
  margin-bottom: 0;
  justify-content: space-between;
}
#try-it .g-form .btns button, #try-it .g-form .btns a {
  width: 100%;
  text-decoration: none;
  font-weight: normal;
  font-family: "Roboto", "Noto Sans TC", "蘋果儷中黑", "微軟正黑體", Arial, sans-serif;
  margin: 0;
  border: 0;
}
#try-it .note {
  margin: 3% auto;
  font-size: 0.7rem;
  text-align: left;
  line-height: 1.6;
  color: #fff;
}
#try-it.is-animate header b {
  transform: scale(1);
  opacity: 1;
}
#try-it.is-animate .flex > img {
  transform: translateY(0);
}

@media screen and (min-width: 900px) {
  .is-m {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  html {
    font-size: 3vw;
  }

  .g-wrap {
    background-position: 50% 70%, 50% 100%, 50% 0, 0 0;
    background-size: 100% 30%, 200%, 183%, 100%;
  }

  .is-pc {
    display: none;
  }

  #msg-alert .msg-wrap {
    width: 90%;
  }
  #msg-alert .msg-content header {
    font-size: 4.5vw;
  }
  #msg-alert .msg-content .detail {
    font-size: 4vw;
  }

  .msg-box .msg-content .bt {
    font-size: 3vw;
  }

  .video-wrap .img .video-btn-play {
    transform: scale(0.5);
  }

  .g-section header {
    width: 94%;
  }
  .g-section header h2 {
    font-size: 3rem;
    line-height: 1.2;
    padding: 1rem 0;
  }
  .g-section header h2 b {
    font-size: 3.2rem;
  }
  .g-section header h2:before, .g-section header h2:after {
    position: absolute;
    width: 1.2rem;
    height: 1.7rem;
    top: calc(50% - 1.7rem*.5);
  }
  .g-section header h2:before {
    left: 0;
  }
  .g-section header h2:after {
    right: 0;
  }

  #g-bg .deco-bird-1 {
    width: 12.6rem;
    height: 14.6rem;
  }
  #g-bg .deco-bird-2 {
    width: 10.5rem;
    height: 18.1rem;
  }

  #kv .logo-biotherm {
    width: 12.1rem;
    height: 3.6rem;
    top: 15.5%;
    left: 31.4%;
  }
  #kv h1 {
    width: 28rem;
    height: 5.1rem;
    top: 42%;
    left: 8.5%;
  }

  #game {
    margin: 0;
  }
  #game .txt {
    width: 100%;
    margin-left: 6%;
  }
  #game .lp-char-1 {
    left: 3.5%;
  }
  #game .lp-char-1 .tip {
    top: 12.5%;
  }

  #sale {
    margin-top: 3rem;
  }
  #sale header {
    width: 94%;
  }
  #sale header h2 {
    padding: 1.2rem 0;
    font-size: 2.7rem;
  }
  #sale header h2 b {
    font-size: 3rem;
  }
  #sale .owl-wrap {
    width: 200%;
    margin-left: -44%;
  }
  #sale .owl-item.active ~ .active ~ .active {
    opacity: 0.5;
    pointer-events: none;
    filter: blur(5px);
    transform: translateX(-50%) scale(0.8);
    z-index: 0;
  }
  #sale .owl-item.active ~ .active ~ .active ~ .active {
    opacity: 0;
  }
  #sale li {
    height: 38.35rem;
  }
  #sale li h2 {
    font-size: 2rem;
  }
  #sale li .btns {
    margin-top: 0.7rem;
  }
  #sale #sale-1-btn-prev, #sale #sale-1-btn-next,
#sale #sale-2-btn-prev, #sale #sale-2-btn-next {
    width: 4rem;
    height: 4rem;
    top: 40%;
  }
  #sale #sale-1-btn-prev, #sale #sale-2-btn-prev {
    left: 23%;
  }
  #sale #sale-1-btn-next, #sale #sale-2-btn-next {
    right: 29%;
  }
  #sale .sale-1-item {
    width: 22.25rem;
  }

  #new-year-vip {
    padding-bottom: 5rem;
  }
  #new-year-vip ol {
    display: block;
  }
  #new-year-vip li {
    width: 100%;
    height: 44.3rem;
  }
  #new-year-vip li.gift-1 {
    margin-bottom: 4rem;
  }
  #new-year-vip li.gift-1 .desc {
    margin-top: 18.4rem;
  }
  #new-year-vip li.gift-2 .desc {
    margin-top: 29.4rem;
  }

  #spa-treatment .sub-title {
    font-size: 2rem;
    margin: 1rem 0 0;
  }
  #spa-treatment .for-girl, #spa-treatment .for-men {
    width: 80%;
    height: 43.4rem;
    background-repeat: no-repeat;
  }
  #spa-treatment .for-girl h3, #spa-treatment .for-men h3 {
    font-size: 2.3rem;
    top: 47%;
    left: 31.6%;
  }
  #spa-treatment .for-girl .btns, #spa-treatment .for-men .btns {
    top: 57%;
    left: 1%;
  }
  #spa-treatment .for-girl .btns a, #spa-treatment .for-men .btns a {
    width: 20.5rem;
  }
  #spa-treatment .for-girl .btns a span, #spa-treatment .for-men .btns a span {
    font-size: 1.5rem;
  }
  #spa-treatment .for-girl .btns a span b, #spa-treatment .for-men .btns a span b {
    font-size: 1.7rem;
  }
  #spa-treatment .for-girl .desc, #spa-treatment .for-men .desc {
    top: 67.5%;
    left: 10%;
  }
  #spa-treatment .for-girl .desc p, #spa-treatment .for-men .desc p {
    font-size: 1.5rem;
  }
  #spa-treatment .for-girl .desc .icon-cross:before, #spa-treatment .for-girl .desc .icon-cross:after, #spa-treatment .for-men .desc .icon-cross:before, #spa-treatment .for-men .desc .icon-cross:after {
    width: 1.7rem;
    top: 0.9rem;
    left: 0.1rem;
  }
  #spa-treatment .for-girl .gift, #spa-treatment .for-men .gift {
    top: 82.5%;
    left: 4.5%;
  }
  #spa-treatment .for-girl .gift p, #spa-treatment .for-men .gift p {
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
  }
  #spa-treatment .for-girl .gift b, #spa-treatment .for-men .gift b {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }
  #spa-treatment .for-girl .gift b u, #spa-treatment .for-men .gift b u {
    font-size: 1.5rem;
  }
  #spa-treatment .for-girl {
    background-image: url(../img/spa-treatment-1-m.png);
    left: 0;
  }
  #spa-treatment .for-men {
    background-image: url(../img/spa-treatment-2-m.png);
  }
  #spa-treatment .for-men .gift {
    left: 57%;
  }
  #spa-treatment .rule {
    margin-top: 14rem;
    display: block;
  }
  #spa-treatment .rule h3 {
    margin-bottom: 0.5rem;
  }
  #spa-treatment .rule .list-no {
    display: block;
    width: 75%;
    text-align: left;
    margin: 0 auto;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
}