@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300..700&display=swap";

.slick-loading .slick-list{
  background:#fff url("../images/loading.gif") center center no-repeat
}

.slick-prev,.slick-next{
  position:absolute;
  display:block;
  height:40px;
  width:40px;
  line-height:0px;
  background-color:#000;
  cursor:pointer;
  top:50%;
  transform:translate(0, -50%);
  padding:0;
  border:none;
  outline:none;
  transition:all .3s;
  z-index:1
}

.slick-prev:hover,.slick-next:hover{
  opacity:.75
}

.slick-prev.slick-disabled,.slick-next.slick-disabled{
  opacity:.25
}

.slick-prev::before,.slick-prev::after,.slick-next::before,.slick-next::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:2px;
  background-color:#fff;
  margin:-1px 0 0 -5px;
  opacity:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.slick-prev{
  left:10px
}

[dir=rtl] .slick-prev{
  left:auto;
  right:10px
}

.slick-prev::before,.slick-prev::after{
  transform-origin:0 50%
}

.slick-prev::before{
  transform:rotate(45deg)
}

.slick-prev::after{
  transform:rotate(-45deg)
}

.slick-next{
  right:10px
}

[dir=rtl] .slick-next{
  left:10px;
  right:auto
}

.slick-next::before,.slick-next::after{
  transform-origin:100% 50%
}

.slick-next::before{
  transform:rotate(45deg)
}

.slick-next::after{
  transform:rotate(-45deg)
}

.slick-dotted.slick-slider{
  margin-bottom:30px
}

.slick-dots{
  position:absolute;
  bottom:-20px;
  list-style:none;
  display:block;
  text-align:center;
  padding:0;
  margin:0;
  width:100%
}

.slick-dots li{
  position:relative;
  display:inline-block;
  height:10px;
  width:10px;
  margin:0 5px;
  padding:0;
  cursor:pointer
}

.slick-dots li button{
  border:0;
  background:rgba(0,0,0,0);
  display:block;
  height:10px;
  width:10px;
  outline:none;
  line-height:0px;
  color:rgba(0,0,0,0);
  padding:5px;
  cursor:pointer
}

.slick-dots li button:hover,.slick-dots li button:focus{
  outline:none
}

.slick-dots li button:hover::before,.slick-dots li button:focus::before{
  opacity:.75
}

.slick-dots li button::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  background-color:#000;
  border-radius:50%;
  text-align:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:all .3s
}

.slick-dots li.slick-active button::before{
  background-color:#ddd
}

header{
  position:absolute;
  top:0px;
  left:0px;
  z-index:10;
  width:100%
}

@media (min-width: 768px){
  header{
    position:relative;
    --tw-bg-opacity:1;
    background-color:rgba(0, 0, 0, var(--tw-bg-opacity))
  }
}

header .container{
  padding-top:1.5rem;
  padding-bottom:1.5rem
}

@media (min-width: 768px){
  header .container{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

header .container #logo{
  position:relative;
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center
}

header .container .icon-hamburger{
  position:absolute;
  left:0px;
  width:2.5rem
}

@media (min-width: 768px){
  header .container .icon-hamburger{
    width:3rem
  }
}

header .container .logo{
  width:10rem
}

@media (min-width: 768px){
  header .container .logo{
    width:9rem
  }
}

.mfp-fade.mfp-bg{
  opacity:0;
  transition:all .15s ease-out
}

.mfp-fade.mfp-bg.mfp-ready{
  opacity:.8
}

.mfp-fade.mfp-bg.mfp-removing{
  opacity:0
}

.mfp-fade.mfp-wrap .mfp-content{
  opacity:0;
  transform:translateY(50px);
  transition:all .15s ease-out
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
  opacity:1;
  transform:translateY(0)
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
  opacity:0;
  transform:translateY(-50px)
}

.mfp-container{
  padding:1rem
}

.popup{
  position:relative;
  margin-left:auto;
  margin-right:auto
}

.popup .popupContent{
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity:1;
  color:rgba(0, 0, 0, var(--tw-text-opacity))
}

.popup .mfp-close{
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  transition:all .4s
}

.popup .mfp-close:hover{
  scale:.8
}

.popup .mfp-close::before,.popup .mfp-close::after{
  content:"";
  display:block;
  position:absolute;
  width:30px;
  height:2px;
  left:0;
  top:50%;
  background:#000
}

.popup .mfp-close::before{
  transform:rotate(45deg)
}

.popup .mfp-close::after{
  transform:rotate(-45deg)
}

.tncPopup, .privacyPopup{
  font-size:0.875rem;
  line-height:1.25rem
}

.tncPopup h3, .privacyPopup h3{
  margin-bottom:1rem;
  display:block;
  font-size:1.125rem;
  line-height:1.75rem;
  font-weight:700
}

body{
  --tw-bg-opacity:1;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity));
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity));
  min-height:100vh
}

button, button:focus{
  outline:2px solid transparent;
  outline-offset:2px
}

::-moz-selection{
  --tw-bg-opacity:1;
  background-color:rgba(205, 205, 205, var(--tw-bg-opacity))
}

::selection{
  --tw-bg-opacity:1;
  background-color:rgba(205, 205, 205, var(--tw-bg-opacity))
}

ol, ul{
  padding-left:0.5rem
}

ol li, ul li{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

ol li, ul li{
  padding-left:0.25rem
}

ol li::marker,ul li::marker{
  letter-spacing:-0.1em
}

@font-face{
  font-family:"Gotham Book";

  src:url("../fonts/Gotham-Book.eot");

  src:url("../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"),url("../fonts/Gotham-Book.woff2") format("woff2"),url("../fonts/Gotham-Book.woff") format("woff"),url("../fonts/Gotham-Book.ttf") format("truetype"),url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");

  font-weight:normal
}

@font-face{
  font-family:"Gotham";

  src:url("../fonts/GothamBold.eot");

  src:url("../fonts/GothamBold.eot?#iefix") format("embedded-opentype"),url("../fonts/GothamBold.woff2") format("woff2"),url("../fonts/GothamBold.woff") format("woff"),url("../fonts/GothamBold.ttf") format("truetype"),url("../fonts/GothamBold.svg#GothamBold") format("svg");

  font-weight:bold
}

@font-face{
  font-family:"Kepler Std";

  src:url("../fonts/KeplerStd-Light.woff2") format("woff2"),url("../fonts/KeplerStd-Light.woff") format("woff"),url("../fonts/KeplerStd-Light.ttf") format("truetype"),url("../fonts/KeplerStd-Light.svg#KeplerStd-Light") format("svg");

  font-weight:300;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"Kepler Std";

  src:url("../fonts/KeplerStd-Bold.woff2") format("woff2"),url("../fonts/KeplerStd-Bold.woff") format("woff"),url("../fonts/KeplerStd-Bold.ttf") format("truetype"),url("../fonts/KeplerStd-Bold.svg#KeplerStd-Bold") format("svg");

  font-weight:bold;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"Kepler Std";

  src:url("../fonts/KeplerStd-Black.woff2") format("woff2"),url("../fonts/KeplerStd-Black.woff") format("woff"),url("../fonts/KeplerStd-Black.ttf") format("truetype"),url("../fonts/KeplerStd-Black.svg#KeplerStd-Black") format("svg");

  font-weight:900;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"Kepler Std";

  src:url("../fonts/KeplerStd-Medium.woff2") format("woff2"),url("../fonts/KeplerStd-Medium.woff") format("woff"),url("../fonts/KeplerStd-Medium.ttf") format("truetype"),url("../fonts/KeplerStd-Medium.svg#KeplerStd-Medium") format("svg");

  font-weight:500;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"Kepler Std";

  src:url("../fonts/KeplerStd-Regular.woff2") format("woff2"),url("../fonts/KeplerStd-Regular.woff") format("woff"),url("../fonts/KeplerStd-Regular.ttf") format("truetype"),url("../fonts/KeplerStd-Regular.svg#KeplerStd-Regular") format("svg");

  font-weight:normal;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"MHeiHK";

  src:url("../fonts/MHeiHK-Light.otf") format("opentype");

  font-weight:300;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"MHeiHK";

  src:url("../fonts/MHeiHK-Medium.otf") format("opentype");

  font-weight:500;

  font-style:normal;

  font-display:swap
}

@font-face{
  font-family:"MHeiHK";

  src:url("../fonts/MHeiHK-Bold.otf") format("opentype");

  font-weight:bold;

  font-style:normal;

  font-display:swap
}

.loader{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  display:flex;
  align-items:center;
  justify-content:center;
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
  opacity:0;
  visibility:hidden;
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
  transition-duration:300ms;
  z-index:50
}

.loading .loader{
  opacity:1;
  visibility:visible
}

.loader .loaderIcon{
  display:block;
  width:2.5rem;
  height:2.5rem;
  border-radius:9999px;
  animation:spin 1s linear infinite;
  border-top:2px solid #000;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  border-left:2px solid #fff;
  text-indent:-12345px
}

select option,select optgroup{
  background:#fff;
  color:#000
}

.slick-slide{
  outline:2px solid transparent;
  outline-offset:2px
}

.slick-prev{
  left:0px
}

.slick-next{
  right:0px
}

.slick-prev, .slick-next{
  background-color:transparent
}

.slick-prev,.slick-next{
  text-indent:-9999px
}

.slick-prev::before, .slick-prev::after, .slick-next::before, .slick-next::after{
  --tw-bg-opacity:1;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity))
}

.slick-dots li{
  width:1.5rem;
  padding-left:0px;
  padding-right:0px
}

.slick-dots li button:before{
  opacity:0.2
}

.slick-dots li.slick-active button:before{
  --tw-bg-opacity:1;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity));
  opacity:1
}

.slick-dots li button:before{
  height:0.375rem;
  width:100%;
  border-radius:0px
}

.videoWrapper{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden
}

.videoWrapper iframe,.videoWrapper object,.videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}

.pc{
  display:none
}

@media (min-width: 768px){
  .pc{
    display:block
  }
}

@media (min-width: 768px){
  .mobi{
    display:none
  }
}

.font-cn{
  font-family:MHeiHK, Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, Heiti TC, LiHei Pro, 新細明體, PMingLiU, sans-serif
}

.font-en{
  font-family:Kepler Std, Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, Heiti TC, LiHei Pro, 新細明體, PMingLiU, sans-serif
}

.wrapper{
  overflow:hidden;
  text-align:center
}

.top-kv{
  display:flex;
  width:100%;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden
}

.top-kv>img{
  width:100%
}

.bg-gradient{
  background:linear-gradient(to right, #EEE6C5 30%, #362817 70%)
}

.text-gradient{
  color:rgba(0,0,0,0);
  background:linear-gradient(to right, #EEE6C5 30%, #362817 70%);
  -webkit-background-clip:text;
          background-clip:text;
  display:block
}

.text-gradient1{
  color:rgba(0,0,0,0);
  background:linear-gradient(90.01deg, #A78030 0.01%, #F1CE8D 43.56%, #A78030 102.48%);
  -webkit-background-clip:text;
          background-clip:text;
  display:block
}

.text-gradient1.inline{
  display:inline
}

.text-gradient1 sup{
  color:rgba(0,0,0,0);
  background:linear-gradient(90.01deg, #A78030 0.01%, #F1CE8D 43.56%, #A78030 102.48%);
  -webkit-background-clip:text;
          background-clip:text;
  line-height:1.25;
  font-size:60%;
  top:-0.75rem
}

.text-gradient2{
  color:rgba(0,0,0,0);
  background:linear-gradient(90.01deg, #d1b477 0%, #F1CE8D 15%, #F1CE8D 85%, #d1b477 100%);
  -webkit-background-clip:text;
          background-clip:text;
  display:block;
  font-weight:700
}

.text-gradient2.inline{
  display:inline
}

.text-gradient2 sup{
  color:rgba(0,0,0,0);
  background:linear-gradient(90.01deg, #A78030 0%, #F1CE8D 10%, #F1CE8D 90%, #A78030 100%);
  -webkit-background-clip:text;
          background-clip:text;
  font-weight:700;
  line-height:1.25;
  font-size:60%;
  top:-0.75rem
}

sup{
  font-family:MHeiHK, Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, Heiti TC, LiHei Pro, 新細明體, PMingLiU, sans-serif
}

.section{
  padding-bottom:1rem
}

@media (min-width: 768px){
  .section{
    padding-bottom:2rem
  }
}

.section .container{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.section .section-title{
  font-size:1.625rem;
  line-height:2.5rem
}

@media (min-width: 1024px){
  .section .section-title{
    font-weight:700;
    line-height:1.25;
    font-size:1.675rem
  }
}

.section .title{
  font-weight:700;
  font-size:1.375rem
}

@media (min-width: 768px){
  .section .title{
    font-size:1.5rem;
    line-height:2rem
  }
}

.section .title{
  line-height:1.75rem
}

.section .title .large{
  font-size:1.875rem;
  line-height:2.25rem;
  font-weight:500;
  line-height:1.75rem
}

@media (min-width: 1024px){
  .section .title .large{
    font-size:3rem;
    line-height:1
  }
}

.section article{
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  font-size:1.125rem;
  line-height:1.75rem;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

.section article>span{
  font-weight:700
}

.section .sub-title{
  font-size:1.125rem;
  line-height:1.75rem;
  line-height:1.25;
  line-height:1.75rem
}

@media (min-width: 1024px){
  .section .sub-title{
    text-align:center
  }
}

.section .sub-title .large{
  font-size:1.5rem;
  line-height:2rem;
  font-weight:500;
  line-height:1.75rem
}

@media (min-width: 1024px){
  .section .sub-title .large{
    font-size:1.875rem;
    line-height:2.25rem;
    line-height:1.75rem
  }
}

.section .content{
  font-size:1rem;
  line-height:1.5rem;
  font-weight:300;
  line-height:1.375rem
}

.register-now-box{
  margin-top:-8rem;
  cursor:pointer
}

@media (min-width: 768px){
  .register-now-box{
    padding-left:1rem;
    padding-right:1rem
  }
}

@media (min-width: 768px){
  .register-now-box{
    margin-top:-16vw
  }
}

.register-now-box .inner{
  position:relative;
  padding-top:0.75rem
}

.register-now-box .inner .sub-title{
  font-size:1.125rem;
  line-height:1.75rem;
  line-height:1.75rem
}

@media (min-width: 1024px){
  .register-now-box .inner .sub-title{
    text-align:center
  }
}

.register-now-box .inner .section-title{
  font-size:1.625rem;
  line-height:2.5rem
}

@media (min-width: 1024px){
  .register-now-box .inner .section-title{
    text-align:center;
    font-size:1.875rem;
    line-height:2.25rem;
    line-height:1.25;
    font-size:1.675rem
  }
}

.register-now-box .inner .section-title .large{
  font-size:2.25rem;
  line-height:2.5rem;
  font-weight:500;
  line-height:1.75rem
}

@media (min-width: 1024px){
  .register-now-box .inner .section-title .large{
    font-size:3rem;
    line-height:1
  }
}

@media (min-width: 768px){
  .register-now-box{
    margin-left:auto;
    margin-right:auto;
    width:100%
  }
}

.section-promo{
  padding-left:1rem;
  padding-right:1rem;
  padding-top:0px;
  padding-bottom:0px
}

.section-promo .container{
  margin-left:auto;
  margin-right:auto;
  display:flex;
  max-width:48rem;
  flex-direction:column;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  padding-left:1rem;
  padding-right:1rem
}

.section-promo .promo-box .sub-title{
  line-height:1.375rem
}

.section-promo .promo-box .thumb{
  margin-left:auto;
  margin-right:auto;
  margin-top:2rem;
  width:100%
}

@media (min-width: 768px){
  .section-promo .promo-box .thumb.single{
    width:66.666667%
  }
}

.section-promo .promo-box .content{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.remarks{
  text-align:left;
  font-size:0.75rem;
  line-height:1rem
}

.remarks.tnc{
  text-align:center
}

@media (min-width: 768px){
  .remarks.tnc{
    text-align:left
  }
}

.btn-regnow{
  position:fixed;
  right:0.75rem;
  bottom:0.75rem;
  z-index:10;
  width:5rem
}

@media (min-width: 768px){
  .btn-regnow{
    width:8rem
  }
}

.btn{
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
  padding-left:2.5rem;
  padding-right:2.5rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  font-size:1.125rem;
  line-height:1.75rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgba(0, 0, 0, var(--tw-text-opacity))
}

.btn#btnValidation{
  height:100%;
  padding:0.5rem;
  font-size:0.75rem;
  line-height:1rem
}

.intro{
  margin-left:auto;
  margin-right:auto;
  padding-bottom:2.5rem;
  text-align:center
}

table th, table td{
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  vertical-align:top
}

ol{
  margin-left:0.75rem
}

ol[type=a]{
  list-style-type:lower-alpha
}

ol[type=i]{
  list-style-type:lower-roman
}

ol[type="1"]{
  list-style-type:decimal
}

ol li{
  padding-left:0px
}

.sect-main{
  --tw-bg-opacity:1;
  background-color:rgba(225, 139, 139, var(--tw-bg-opacity));
  padding-top:3.5rem;
  padding-bottom:3.5rem;
  text-align:center;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

@media (min-width: 768px){
  .sect-main{
    margin-top:-1.5rem
  }
}

.sect-main .container{
  max-width:48rem
}

.sect-main .intro{
  margin-top:2rem;
  padding-bottom:1.25rem;
  font-size:1rem;
  line-height:1.5rem
}

.sect-main .intro h3{
  font-size:1.25rem;
  line-height:1.75rem
}

@media (min-width: 768px){
  .sect-main .intro h3{
    font-size:1.5rem;
    line-height:2rem
  }
}

.sect-main .intro p{
  margin-top:0.75rem;
  margin-bottom:0.75rem;
  font-size:1.125rem;
  line-height:1.75rem
}

.redeem-form{
  margin-left:auto;
  margin-right:auto;
  margin-top:-0.75rem;
  max-width:36rem
}

.redeem-form .form-input{
  border-width:1px;
  border-style:solid;
  --tw-border-opacity:1;
  border-color:rgba(255, 255, 255, var(--tw-border-opacity));
  background-color:transparent;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity));
  text-align:center
}

.redeem-form .form-input::-moz-placeholder{
  --tw-placeholder-opacity:1;
  color:rgba(255, 255, 255, var(--tw-placeholder-opacity))
}

.redeem-form .form-input::placeholder{
  --tw-placeholder-opacity:1;
  color:rgba(255, 255, 255, var(--tw-placeholder-opacity))
}

.redeem-form .action-bar{
  margin-bottom:0.5rem
}

.form-input::-moz-placeholder{
  font-size:1rem;
  line-height:1.5rem
}

.form-input::placeholder{
  font-size:1rem;
  line-height:1.5rem
}

.form-input, .form-select{
  padding:0.5rem;
  font-size:1rem;
  line-height:1.5rem;
  --tw-text-opacity:1;
  color:rgba(0, 0, 0, var(--tw-text-opacity));
  --tw-text-opacity:0.75
}

.form-input, .form-select{
  display:flex;
  height:2.5rem;
  align-items:center
}

.form-input,.form-select{
  max-height:2.5rem
}

.container.pt-0{
  padding-top:0
}

.divider{
  position:relative;
  z-index:10;
  margin-left:auto;
  margin-right:auto;
  width:14rem;
  border-radius:9999px;
  height:1.8px;
  background:radial-gradient(50% 764750.02% at 50% 49.99%, #F0CD8C 0%, rgba(241, 206, 141, 0) 100%)
}

.divider-icon{
  position:relative;
  z-index:10;
  margin-left:auto;
  margin-right:auto;
  width:14rem;
  aspect-ratio:532/49;
  background:url(../images/icon-divider.png) no-repeat;
  background-size:cover;
  background-position:center
}

.deco{
  position:absolute;
  z-index:-1
}

.promo-swiper{
  position:relative;
  width:100%;
  overflow:hidden
}
/*# sourceMappingURL=common.css.map */