@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
html {
  background: linear-gradient(to bottom, #cdf5f4, #b8e8e7);
}

html,
body {
  font-family: "Noto Sans HK", Arial, Helvetica, sans-serif;
  font-size: 100px;
  font-weight: 400;
  font-optical-sizing: auto;
  width: 3.75rem;
  min-height: 100vh;
  margin-left: calc(50% - 1.875rem) !important;
  color: #034ea2;
}

/* Common CSS */
body {
  /*
  // Background fixed not working on mobile. workaround use ::before
  &.bg-grass {
      background-image: url('/images/bg.jpg');
      background-size: auto 100%;
      background-position: top center;

      //fix background image position
      background-attachment: fixed;
      background-repeat: no-repeat;
  }
  */
  background-color: transparent;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
body.bg-grass:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("/images/bg.jpg") no-repeat center center;
  background-size: cover;
}
body h2 {
  margin-bottom: 0;
  font-size: 0.24rem;
}
body h3 {
  margin-bottom: 0;
  font-size: 0.18rem;
}
body p {
  margin-bottom: 0;
  font-size: 0.12rem;
  line-height: 0.18rem;
}
body .strong {
  font-weight: bold;
}
body .strong-700 {
  font-weight: 700 !important;
}
body .mb-small {
  margin-bottom: 0.1rem;
}
body .mt-small {
  margin-top: 0.1rem;
}
body .mb-medium {
  margin-bottom: 0.2rem;
}
body .mt-medium {
  margin-top: 0.2rem;
}
body .mb-large {
  margin-bottom: 0.4rem;
}
body .mt-large {
  margin-top: 0.4rem;
}
body .px-small {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
body .py-small {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
body .px-medium {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
body .py-medium {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
body .left-0 {
  left: 0;
}
body .right-0 {
  right: 0;
}
body .top-0 {
  top: 0;
}
body .btn-base {
  font-size: 0.18rem;
  width: 1.32rem;
  height: 0.42rem;
  font-weight: bold;
  border-radius: 0.05rem;
  display: inline-block;
  color: #FFF;
  line-height: 0.36rem;
  text-align: center;
  transition: filter 0.2s ease-in;
  background-size: 100% 100%;
  background-position: center;
}
body .btn-base.green {
  background-image: url(/images/btn_green.png);
}
body .btn-base.blue {
  background-image: url(/images/btn_blue.png);
}
body .btn-base.lightblue {
  background-image: url(/images/btn_lightblue.png);
}
body .btn-base:hover, body .btn-base:focus, body .btn-base:active {
  text-decoration: none;
  color: #FFF;
  outline: none;
  filter: brightness(1.2);
}
body .txt-white {
  color: #FFF !important;
}
body .txt-blue {
  color: #034ea2 !important;
}
body .txt-black {
  color: #000 !important;
}
body .input-wrapper {
  color: #000;
}
body .input-wrapper .input-text {
  width: 100%;
  font-size: 0.16rem;
  line-height: 0.24rem;
  background: #FFF;
  padding: 0.05rem;
  border: none;
  border-radius: 0.05rem;
  color: #000;
  font-weight: bold;
}
body .input-wrapper .input-text:focus {
  outline: none;
  border: none;
}
body .input-wrapper .error {
  color: #F00;
  display: none;
}
body .input-wrapper .error.show {
  display: block;
}
body .check-container {
  display: block;
  position: relative;
  margin-bottom: 0.12rem;
  cursor: pointer;
  font-size: 0.22rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
body .check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
body .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.2rem;
  width: 0.2rem;
  background-color: #eee;
}
body .check-container:hover input ~ .checkmark {
  background-color: #ccc;
}
body .check-container input:checked ~ .checkmark {
  background-color: #FFF;
}
body .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
body .check-container input:checked ~ .checkmark:after {
  display: block;
}
body .check-container .checkmark:after {
  left: 0.06rem;
  top: 0.03rem;
  width: 0.07rem;
  height: 0.12rem;
  border: solid #034ea2;
  border-width: 0 0.04rem 0.04rem 0;
  transform: rotate(45deg);
}
body .tncModal .modal-dialog {
  margin: 0.15rem;
  min-height: calc(100% - 0.3rem);
}
body .tncModal .modal-content {
  background-color: #b8e8e7;
  background-image: linear-gradient(130deg, #d8f2f1 0%, #b8e8e7 100%);
  border: none;
  border-radius: 0.1rem;
}
body .tncModal .modal-content p,
body .tncModal .modal-content li,
body .tncModal .modal-content ol,
body .tncModal .modal-content h2,
body .tncModal .modal-content h3,
body .tncModal .modal-content h4 {
  color: #034ea2;
}
body .tncModal ol,
body .tncModal li {
  font-size: 0.13rem;
  line-height: 0.18rem;
  margin-bottom: 0;
}
body .tncModal ul, body .tncModal ol {
  padding-inline-start: 0.18rem;
}
body .tncModal li {
  margin-bottom: 0.05rem;
}

header {
  text-align: center;
  padding: 0.15rem;
  height: 0.48rem;
}
header .logo {
  width: 1.08rem;
  display: block;
  margin: 0 auto;
}
header .link-home {
  color: #034ea2;
  font-weight: 500;
}
header .link-home:hover, header .link-home:focus, header .link-home:active {
  text-decoration: none;
  color: #034ea2;
  outline: none;
}

footer {
  padding: 0.15rem;
  background-color: #DDD;
}
footer p {
  font-size: 0.12rem;
}

section.step {
  display: none;
}
section.step.active {
  display: block;
}

/* Home Page CSS */
#Home .home-logo {
  width: 0.75rem;
  margin: 0.17rem auto;
  display: block;
}
#Home .home-headline {
  width: 100%;
  display: block;
}
#Home #Content {
  background-image: url("/images/home_bg.jpg");
  background-size: 100% auto;
  background-position: top center;
}
#Home #Video {
  background-image: url("/images/home_bg_yt.jpg");
  background-size: 100% 100%;
  background-position: top center;
}
#Home .lead-in {
  font-size: 0.16rem;
  font-weight: 500;
  margin: 0.15rem auto;
  line-height: 1.5;
}
#Home .box-wrapper {
  padding: 0.15rem;
  border: 2px solid #FFF;
  border-radius: 0.1rem;
  margin-bottom: 0.15rem;
}
#Home .btn-base {
  font-size: 0.12rem;
  width: 1rem;
  height: 0.3rem;
  line-height: 0.25rem;
}
#Home .home-txt2 {
  width: 1.6rem;
}
#Home .home-kv-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#Home .home-kv-element img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
}
#Home .home-kv-element .kv-cloud1 {
  z-index: 1;
}
#Home .home-kv-element .kv-cloud2 {
  z-index: 2;
}
#Home .home-kv-element .kv-main {
  z-index: 3;
}

#Receipt .s1 .btnPrizeList {
  width: 2.35rem;
  display: inline-block;
}
#Receipt .s2 .title-wrapper {
  margin-top: 0.3rem;
}
#Receipt .s2 .blue-border {
  border: 1px #034ea2 solid;
  width: 2.7rem;
  padding: 0.07rem;
  margin: 0.15rem auto;
  text-align: center;
}
#Receipt .s2 .white-bg {
  width: 95%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0.2rem;
}
#Receipt .s2 .input-wrapper {
  padding: 0.15rem 0;
}
#Receipt .s2 .input-wrapper h3,
#Receipt .s2 .input-wrapper p {
  margin-bottom: 0.05rem;
}
#Receipt .s2 #receiptCanvas {
  width: 100%;
  display: none;
}
#Receipt .s2 #receiptCanvas.show {
  display: block;
}
#Receipt .s2 .disclaimer {
  padding-top: 0.3rem;
}
#Receipt .s2 .disclaimer p {
  color: #000;
  font-size: 0.09rem;
  line-height: 0.12rem;
  margin-bottom: 0.02rem;
}
#Receipt .s2 .disclaimer a {
  color: #034ea2;
  text-decoration: underline;
}
#Receipt .s2 .disclaimer a:hover, #Receipt .s2 .disclaimer a:focus, #Receipt .s2 .disclaimer a:active {
  text-decoration: underline;
}
#Receipt .s3 .title-wrapper {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
#Receipt .s3 .btn-large {
  width: 2.4rem;
}
#Receipt .s3 .btn-large.blue {
  background-image: url("/images/btn_blue_large.png");
}
#Receipt .s3 .bottom-logo {
  margin-top: 0.5rem;
}
#Receipt .modal .modal-dialog {
  margin: 0.15rem;
  min-height: calc(100% - 0.3rem);
}
#Receipt .modal .modal-body {
  padding: 0;
}
#Receipt .modal .btn-close {
  width: 0.53rem;
  padding: 0.15rem;
  display: block;
}

#Showcase .title-wrapper {
  margin-top: 0.3rem;
}
#Showcase .swiper {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#Showcase .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 3rem;
  height: 3rem;
}
#Showcase .swiper-slide .img-stand,
#Showcase .swiper-slide .img-screen {
  position: relative;
  display: block;
  width: 100%;
}
#Showcase .swiper-slide .img-screen {
  opacity: 0.2;
}
#Showcase .swiper-slide .img-case {
  max-width: 1.75rem;
  max-height: 1.75rem;
  margin-top: 0.17rem;
}
#Showcase .swiper-slide .txt-name {
  margin-top: 2.67rem;
  color: #FFF;
  font-size: 0.3rem;
}
#Showcase .swiper-slide-next,
#Showcase .swiper-slide-prev {
  filter: brightness(0.7);
}
#Showcase .swiper-slide-active {
  filter: brightness(1);
}
#Showcase .swiper-button-next::after {
  content: "";
}
#Showcase .swiper-button-prev::after {
  content: "";
}
#Showcase .swiper-button-next,
#Showcase .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 65%);
}
#Showcase .swiper-button-next img,
#Showcase .swiper-button-prev img {
  width: 0.22rem;
  display: block;
}

#Moments .a-step {
  display: none;
}
#Moments .a-step.active {
  display: block;
}
#Moments .s1 .title-wrapper {
  margin-top: 0.15rem;
  margin-bottom: 0.2rem;
}
#Moments .s1 .txt-intro {
  text-align: left;
  padding: 0.3rem 0.38rem 0.1rem;
  padding-right: 1.1rem;
}
#Moments .s1 .txt-intro p {
  color: #bc6936;
  font-size: 0.12rem;
  line-height: 0.15rem;
}
#Moments .s1 .img_detail {
  width: 0.85rem;
}
#Moments .s2 .title-wrapper {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}
#Moments .s2 label {
  font-size: 0.18rem;
  font-weight: bold;
  color: #034ea2;
  margin-bottom: 0;
}
#Moments .s2 input[type=text] {
  text-align: center;
  text-transform: uppercase;
}
#Moments .s2 input[type=radio] {
  width: 0.2rem;
  height: 0.2rem;
  border: none;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: 0.03rem #FFF solid;
  background-color: #FFF;
  border-radius: 50%;
}
#Moments .s2 input[type=radio]:checked {
  background-color: #034ea2;
}
#Moments .s2 .bottom-logo {
  margin-top: 0.4rem;
  margin-bottom: 0.3rem;
}
#Moments .s3 {
  position: relative;
  height: calc(100vh - 0.48rem);
  /*
  .btn-download {
      position: absolute;
      top: -0.48rem;
      right: 0;
      width: 0.7rem;
      display: inline-block;
      padding: 0.15rem;
  }
      */
}
#Moments .s3 .bg-white {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2rem;
  background-color: #FFF;
}
#Moments .s3 canvas {
  width: 100%;
  display: block;
}
#Moments .s3 .canvas-wrapper .canvas-ui {
  position: absolute;
  left: 0.15rem;
  top: 50%;
  transform: translate(0%, -50%);
  width: 0.3rem;
  text-align: center;
  padding: 0.08rem 0;
  background-color: #FFF;
  border-radius: 0.05rem;
}
#Moments .s3 .canvas-wrapper .canvas-ui.a4 {
  top: 20%;
  transform: translate(0%, -20%);
}
#Moments .s3 .canvas-wrapper .canvas-ui a {
  display: inline-block;
  filter: grayscale(1);
  opacity: 0.5;
}
#Moments .s3 .canvas-wrapper .canvas-ui a.active {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}
#Moments .s3 .canvas-wrapper .canvas-ui a img {
  width: 0.26rem;
}
#Moments .s3 .v-panel {
  position: absolute;
  left: 0;
  width: 100%;
  background: #FFF;
  border-top-left-radius: 0.15rem;
  border-top-right-radius: 0.15rem;
  padding: 0.15rem 0.12rem;
  transition: top 0.3s ease;
}
#Moments .s3 .v-panel.panel-face {
  top: 3.2rem;
}
#Moments .s3 .v-panel.panel-clothes {
  top: 3.2rem;
}
#Moments .s3 .v-panel.panel-house {
  top: 3.8rem;
}
#Moments .s3 .v-panel .v-taps {
  text-align: center;
}
#Moments .s3 .v-panel .v-taps .tap-item,
#Moments .s3 .v-panel .v-taps .tap-div {
  font-size: 0.15rem;
  font-weight: 700;
  line-height: 0.16rem;
  padding: 0 0.03rem;
  color: #c7c7c7;
}
#Moments .s3 .v-panel .v-taps .tap-item {
  cursor: pointer;
}
#Moments .s3 .v-panel .v-taps .tap-item.active {
  color: #034ea2;
}
#Moments .s3 .v-panel .v-colors {
  display: none;
  text-align: center;
  margin-bottom: 0.05rem;
  margin-top: 0.05rem;
}
#Moments .s3 .v-panel .v-colors.active {
  display: block;
}
#Moments .s3 .v-panel .v-colors span {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  margin-left: 0.12rem;
  margin-right: 0.12rem;
  cursor: pointer;
}
#Moments .s3 .v-panel .v-colors span.v-blue {
  background-color: #4575b3;
}
#Moments .s3 .v-panel .v-colors span.v-pink {
  background-color: #f5addc;
}
#Moments .s3 .v-panel .v-colors span.v-yellow {
  background-color: #ffc97a;
}
#Moments .s3 .v-panel .v-colors span.v-brown {
  background-color: #a67c52;
}
#Moments .s3 .v-panel .v-colors span.v-red {
  background-color: #e9584f;
}
#Moments .s3 .v-panel .v-options {
  text-align: center;
  font-size: 0.18rem;
  line-height: 0.24rem;
}
#Moments .s3 .v-panel .v-options .btn-option {
  display: inline-block;
  width: 1rem;
  padding: 0.05rem;
  margin: 0 0.05rem 0.05rem;
  border: 2px solid #FFF;
  border-radius: 0.05rem;
  text-align: center;
  cursor: pointer;
}
#Moments .s3 .v-panel .v-options .btn-option.active {
  border: 2px solid #b8eae9;
}
#Moments .s3 .v-panel .v-options .btn-option img {
  max-width: 0.9rem;
  max-height: 0.9rem;
  display: block;
  margin: 0 auto;
}
#Moments .s3 .v-panel .v-options .btn-option.col2 {
  width: 1.5rem;
}
#Moments .s3 .v-panel .v-options .btn-option.col2 img {
  max-width: 1.3rem;
  max-height: 1.3rem;
}
#Moments .s3 .v-panel .v-options .btn-option.col4 {
  width: 0.6rem;
}
#Moments .s3 .v-panel .v-options .btn-option.col4 img {
  max-width: 0.4rem;
  max-height: 1.5rem;
}
#Moments .s3 .v-panel .v-options .btn-option.colhouse {
  width: 0.75rem;
  padding: 0;
}
#Moments .s3 .v-panel .v-options .btn-option.colhouse img {
  max-width: 0.7rem;
  max-height: 0.7rem;
}
#Moments .s3 .drinkSwiper {
  width: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
#Moments .s3 .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 3.5rem;
  height: 3.5rem;
}
#Moments .s3 .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
#Moments .s3 .swiper-button-next::after {
  content: "";
}
#Moments .s3 .swiper-button-prev::after {
  content: "";
}
#Moments .s3 .swiper-button-next,
#Moments .s3 .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 65%);
}
#Moments .s3 .swiper-button-next img,
#Moments .s3 .swiper-button-prev img {
  width: 0.22rem;
  display: block;
}
#Moments .s3 .a5 label {
  font-size: 0.16rem;
  margin-bottom: 0.05rem;
  margin-top: 0.05rem;
  color: #FFF;
  position: relative;
  display: inline-block;
  padding-left: 0.25rem;
}
#Moments .s3 .a5 .post-ig-wrapper {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.1rem;
  padding: 0.15rem 0.3rem;
  text-align: left;
}
#Moments .s3 .a5 .post-ig-wrapper p {
  font-size: 0.16rem;
  font-weight: bold;
  line-height: 0.24rem;
}
#Moments .s5 .download-wrapper {
  position: absolute;
  margin-top: 0.4rem;
}
#Moments .s5 .download-wrapper a {
  display: inline-block;
  margin: 0 0.2rem;
}
#Moments .s5 .download-wrapper a img {
  width: 0.22rem;
}

#Comment #fullname {
  text-transform: uppercase;
}
#Comment .step {
  display: none;
}
#Comment .step.active {
  display: block;
}
#Comment canvas {
  width: 100%;
  position: relative;
  display: block;
  z-index: 1;
}
#Comment .canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
#Comment .canvas-overlay.comment {
  padding-top: 0.6rem;
  z-index: 2;
}
#Comment .canvas-overlay.comment textarea {
  width: 2.6rem;
  height: 0.9rem;
  font-size: 0.16rem;
  line-height: 0.32rem;
  border: none;
  color: #000;
  resize: none;
  background: transparent;
}
#Comment .canvas-overlay.comment textarea:focus {
  outline: none;
  border: none;
}
#Comment .canvas-overlay.info {
  padding-top: 1.5rem;
  z-index: 2;
}
#Comment .canvas-overlay.info .input-wrapper {
  width: 2rem;
  margin: 0 auto;
  position: relative;
}
#Comment .canvas-overlay.info .input-wrapper .input-text {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  text-align: center;
}
#Comment .canvas-overlay.info .input-wrapper #username {
  position: absolute;
  left: 0;
  top: 0;
}
#Comment .canvas-overlay.info .input-wrapper .err-username {
  position: absolute;
  left: 0;
  top: 0.27rem;
  width: 100%;
}
#Comment .canvas-overlay.info .input-wrapper #fullname {
  position: absolute;
  left: 0;
  top: 0.52rem;
}
#Comment .canvas-overlay.info .input-wrapper .err-fullname {
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 100%;
}
#Comment .canvas-overlay.mailbox {
  z-index: 0;
}
#Comment .canvas-overlay.mailbox-bubble {
  z-index: 2;
}
#Comment .canvas-overlay.mailbox-bubble .img-bubble {
  width: 1.2rem;
  position: absolute;
  right: 0.05rem;
  top: 0.43rem;
}
#Comment .s1 .prize-wrapper.s1 {
  margin-top: -0.2rem;
}
#Comment .s1 .prize-text {
  padding-left: 0.35rem;
  padding-top: 0.2rem;
}
#Comment .s1 .prize-text h3 {
  font-size: 0.15rem;
}
#Comment .s2 .prize-wrapper.s2 {
  margin-top: -0.6rem;
}
#Comment .s2 .prize-wrapper.s2 h3 {
  font-size: 0.16rem;
}
#Comment .s3 .prize-wrapper.s3 {
  margin-top: 0.3rem;
  z-index: 5;
}
#Comment .s3 .btn-base {
  width: 1.6rem;
}
#Comment .s4 .couponSwiper {
  width: 100%;
  padding-top: 0rem;
  padding-bottom: 0.3rem;
}
#Comment .s4 .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 80%;
  margin: 0 10%;
}
#Comment .s4 .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
#Comment .s4 .swiper-button-next::after {
  content: "";
}
#Comment .s4 .swiper-button-prev::after {
  content: "";
}
#Comment .s4 .swiper-button-next,
#Comment .s4 .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 45%);
}
#Comment .s4 .swiper-button-next img,
#Comment .s4 .swiper-button-prev img {
  width: 0.22rem;
  display: block;
}
#Comment .s4 .btn-view-tnc {
  position: absolute;
  font-size: 0.1rem;
  color: #FFF;
  display: inline-block;
  padding: 0.05rem;
  padding-right: 0.09rem;
  right: 0;
  top: 1.76rem;
  text-decoration: none;
}
#Comment .s4 .btn-view-tnc:active, #Comment .s4 .btn-view-tnc:focus {
  outline: none;
  border: none;
  text-decoration: none;
}
#Comment .s4 .btn-view-tnc.black {
  color: #000;
}
#Comment .modal .modal-dialog {
  margin: 0.15rem;
  min-height: calc(100% - 0.3rem);
}
#Comment .modal .modal-body {
  padding: 0;
}

@media screen and (min-width: 768px) {
  html {
    background: url("/images/bg_desktop.jpg") no-repeat center bottom;
    background-color: #daf9fb;
    background-size: 100% auto;
    background-attachment: fixed;
  }
  body {
    background: #CCC;
  }
  body.bg-grass {
    background-image: url("/images/bg.jpg");
    background-size: 3.75rem 100%;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  body.bg-grass:before {
    background: none;
  }
  body .tncModal .modal-dialog {
    margin: 0.15rem auto;
  }
  #Receipt .modal .modal-dialog,
  #Comment .modal .modal-dialog {
    margin: 0.15rem auto;
  }
}/*# sourceMappingURL=main.css.map */