:root {
  --wrap-w:85vw;
  --swiperBanner-w:85vw;
  --swiper-navigation-size: var(--swiperArrow-w);
  --menuIconW: 2.3vw;
  --menuIconW-b:2.5vw;
  --logoW:13vw;
  --logoW-sm:10.5vw;
  --iconW:1.8vw;
  --gameIcon-w: 2.5vw;
  --flowerIcon-w:7vw;
  --contactIconW: 30px;
  --supportIcon-w:3vw;
  --swiperArrow-w:3.5vw;
  --selectIcon-w:1.1vw;
  --advIcon-w:7.5vw;
  --qr-w:9vw;
  --featureIcon-w:6.75vw;
  --monitorIcon-w:5vw;
  --contactIcon-w:2.5vw;
  --pokerIconW: 6vw;
  --btnFz:1.2vw;
  --btnPlayW:21vw;
  --btnProd:14vw;
  --btnProd-fz:var(--font-md);
  --btnShowcase-fz: var(--font-md);
  --btnShowcase-pd:1vw 2vw;
  --btnShowcase-gap:.5vw;
  --defaultH:37.5vw;
  --headerH:5.5vw;
  --headerH-sm:4vw;
  --bannerTitleW:46vw;
  --bannerAboutTitleW:50vw;
  --bannerProdTitleW:80vw;
  --banner_prod_txt-bottom:7vw;
  --banner_contact_txt-bottom:3vw;
  --banner_contact_txt-fz:5vw;
  --bannerH:var(--defaultH);
  --bannerH-sm:10vw;
  --aboutUsH:var(--defaultH);
  --visionH:36.5vw;
  --prodList-h:6vw;
  --contact-bg-w:52vw;
  --contactCont-w: 53vw;
  --contactListW:24vw;
  --contactList-full-W:49.5vw;
  --contact_info-w:20vw;
  --phoneW:22vw;
  --phoneAniW:19.2vw;
  --featureListW: 31vw;
  --aboutFrameW: 16.5vw;
  --default-pd:2vw 1vw;
  --default-pd-md:3vw 1vw;
  --header-pd: 0 1.6vw;
  --menu-gap:1.5vw;
  --menu-pd: .5vw 1.5vw;
  --menuIcon-gap:1.5vw;
  --adv-gp: 1.5vw;
  --adv-mg: 2vw auto 0;
  --advList-pd:2.25vw;
  --advList-shadow:inset 0 0 0 .75vw rgba(0,0,0,.1);
  --advTitle-mg:1vw 0 .5vw;
  --prodInfo-pd:1.75vw 2vw;
  --contactList-pd: 2vw 2.5vw;
  --aboutUsPic-left:7vw;
  --aboutUsPic-top:.5vw;
  --monitor-pd: 4.5vw 0;
  --monitorCont-mg:2.5vw;
  --monitorCont-gap:1vw;
  --monitorList-pd: 2vw 2vw;
  --monitorList-gap: 1vw;
  --monitorSpan-mg: .5vw;
  --bannerAboutTitle-mg:3vw;
  --bannerTxt-left:5vw;
  --about-ul-pd:1vw;
  --about-ul-mg:1.5vw 0;
  --about-p-mg:1.5vw;
  --vision-p-mg: 2vw 0 2.5vw;
  --copyright-mg:1vw;
  --feature-pd: 2.5vw .5vw;
  --feature-gap: 2.25vw;
  --featureTitle-p-mg:1vw 0;
  --featureCont-gap: 1vw;
  --featureList-gap: 1.5vw;
  --featureList-pd: 0 3vw;
  --prodCatalog-mg: 2vw auto;
  --prodCatalog-gap: 1.5vw;
  --prodInfo-mg: 2vw auto;
  --prodInfo-p-mg: 1vw ;
  --prodList-pd: 1.5vw;
  --prodList-p-pd: 1vw;
  --prodTitle-mg:.75vw;
  --swiper-pd: 0 4vw;
  --contactCont-gap:1.5vw;
  --contactList-gap:.5vw;
  --contactInfo-gap:.25vw;
  --contactInfo-h:3.2vw;
  --supportList-mg:1vw;
  --support-gap:2.5vw;
  --support-mg:1.5vw;
  --font-lg:2.1vw;
  --font-md:1.4vw;
  --font-sm:1.3vw;
  --titleFz:2vw;
  --titleFz-s:var(--font-md);
  --menuFz: var(--font-sm);
  --selectFz:1.4vw;
  --copyrightFz:1vw;
  --prodInfoFz:var(--font-md);
  --prodInfo-h3-Fz:1.6vw;
  --featureTitle-p-fz: 1.5vw;
  --contact-p-fz: var(--font-md);
  --selectW:6.5vw;
}

:root {
  --FontAwesome-color:#fff;
  --headerBg:#1d1d1d;
  --gameIcon-color: #fff;
  --commonIcon-color:#fff;
  --gray:#333;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

img {
  max-width: 100%;
}

body {
  font-family: "Microsoft JhengHei";
}

body, html {
  scroll-behavior: smooth;
}

section {
  scroll-behavior: smooth;
}

.w-full {
  width: 100%;
}

.center {
  text-align: center;
}

li, p {
  line-height: 1.5;
}

.text-danger {
  color: #f00 !important;
}
.text-green {
  color: #00dfeb !important;
}
.text-yellow {
  color: #ffe600 !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--btnFz);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  background: #ccc;
  font-weight: 600;
  transition: 0.3s;
  gap: 5px;
}
.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-outline {
  background: transparent;
  padding: 0;
}
.btn-play {
  background: url("../img/bg/btnPlay.png") no-repeat center/contain;
  width: var(--btnPlayW);
  height: calc(var(--btnPlayW) * 0.299);
  box-sizing: border-box;
  transition: 0.3s;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.2));
  animation-name: btnPlayAni;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
.btn-play::before, .btn-play::after {
  font-weight: 900;
}
.btn-play:hover {
  transform: translateY(-5px);
}
.btn-showcase {
  font-size: var(--btnShowcase-fz);
  padding: var(--btnShowcase-pd);
  gap: var(--btnShowcase-gap);
  background: #15527c;
  color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
}
.btn-showcase:hover {
  transform: translateY(-5px);
}
.btn-prod {
  width: var(--btnProd);
  height: calc(var(--btnProd) / 4.24);
  font-size: var(--btnProd-fz);
  background: #515151;
  color: #fff;
  border-radius: 50px;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #515151;
}

.i {
  display: inline-block;
}
.i-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.i-android {
  width: var(--supportIcon-w);
  height: var(--supportIcon-w);
  background: url("../img/icon/android.svg") no-repeat center/contain;
}

.i-mac {
  width: var(--supportIcon-w);
  height: var(--supportIcon-w);
  background: url("../img/icon/mac.svg") no-repeat center/contain;
}

.i-arrowLeft {
  width: var(--swiperArrow-w);
  height: var(--swiperArrow-w);
  background: url("../img/icon/arrowLeft.png") no-repeat center/contain;
}

.i-arrow {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/arrow.png") no-repeat center/contain;
}

.i-arrowDown {
  width: var(--selectIcon-w);
  height: var(--selectIcon-w);
  background: url("../img/icon/arrowDown.png") no-repeat center/contain;
}

.i-adv1 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv1.png") no-repeat center/contain;
}

.i-adv2 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv2.png") no-repeat center/contain;
}

.i-adv3 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv3.png") no-repeat center/contain;
}

.i-adv4 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv4.png") no-repeat center/contain;
}

.i-adv5 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv5.png") no-repeat center/contain;
}

.i-adv6 {
  width: var(--iconW);
  height: var(--iconW);
  background: url("../img/icon/adv6.png") no-repeat center/contain;
}

.i-flower {
  width: var(--flowerIcon-w);
  height: var(--flowerIcon-w);
  background: url("../img/icon/flower.png") no-repeat center/contain;
}

.i-flower2 {
  width: var(--flowerIcon-w);
  height: var(--flowerIcon-w);
  background: url("../img/icon/flower2.png") no-repeat center/contain;
}

.i-game-live {
  width: var(--gameIcon-w);
  height: var(--gameIcon-w);
  background: url("../img/icon/game-live.png") no-repeat center/contain;
}

.i-home {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (1 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (1 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-member {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (2 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (2 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-game {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (3 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (3 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-prod {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (4 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (4 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-telegram {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (5 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (5 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-mail {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (6 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (6 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-report {
  -webkit-mask-image: url("../img/icon/menu.png");
          mask-image: url("../img/icon/menu.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 7) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (7 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (7 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-gaming {
  background-image: url("../img/icon/feature.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 4) var(--iconW);
  background-position: calc(var(--iconW) * (1 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-diverse {
  background-image: url("../img/icon/feature.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 4) var(--iconW);
  background-position: calc(var(--iconW) * (2 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-realtime {
  background-image: url("../img/icon/feature.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 4) var(--iconW);
  background-position: calc(var(--iconW) * (3 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-dealers {
  background-image: url("../img/icon/feature.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 4) var(--iconW);
  background-position: calc(var(--iconW) * (4 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-monitor {
  background-image: url("../img/icon/monitor.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 3) var(--iconW);
  background-position: calc(var(--iconW) * (1 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-poker {
  background-image: url("../img/icon/monitor.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 3) var(--iconW);
  background-position: calc(var(--iconW) * (2 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-computer {
  background-image: url("../img/icon/monitor.png");
  background-repeat: no-repeat;
  background-size: calc(var(--iconW) * 3) var(--iconW);
  background-position: calc(var(--iconW) * (3 - 1) * -1) 0;
  width: var(--iconW);
  height: var(--iconW);
}

.i-clubs {
  background-image: url("../img/icon/pokerIcon.png");
  background-repeat: no-repeat;
  background-size: calc(var(--pokerIconW) * 4) var(--pokerIconW);
  background-position: calc(var(--pokerIconW) * (1 - 1) * -1) 0;
  width: var(--pokerIconW);
  height: var(--pokerIconW);
  animation: pokerAni 1s infinite backwards;
}

.i-spades {
  background-image: url("../img/icon/pokerIcon.png");
  background-repeat: no-repeat;
  background-size: calc(var(--pokerIconW) * 4) var(--pokerIconW);
  background-position: calc(var(--pokerIconW) * (2 - 1) * -1) 0;
  width: var(--pokerIconW);
  height: var(--pokerIconW);
  animation: pokerAni 1s infinite backwards;
}

.i-diamonds {
  background-image: url("../img/icon/pokerIcon.png");
  background-repeat: no-repeat;
  background-size: calc(var(--pokerIconW) * 4) var(--pokerIconW);
  background-position: calc(var(--pokerIconW) * (3 - 1) * -1) 0;
  width: var(--pokerIconW);
  height: var(--pokerIconW);
  animation: pokerAni 1s infinite backwards;
}

.i-hearts {
  background-image: url("../img/icon/pokerIcon.png");
  background-repeat: no-repeat;
  background-size: calc(var(--pokerIconW) * 4) var(--pokerIconW);
  background-position: calc(var(--pokerIconW) * (4 - 1) * -1) 0;
  width: var(--pokerIconW);
  height: var(--pokerIconW);
  animation: pokerAni 1s infinite backwards;
}

.i-flower, .i-flower2 {
  height: calc(var(--flowerIcon-w) / 5.185);
}

.i-game-live {
  height: calc(var(--gameIcon-w) * 0.68);
}

.i-windows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--FontAwesome-color);
}
.i-windows::before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f17a";
  font-size: var(--supportIcon-w);
}

.i-apple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--FontAwesome-color);
}
.i-apple::before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f179";
  font-size: var(--supportIcon-w);
}

.i-html5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--FontAwesome-color);
}
.i-html5::before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f13b  ";
  font-size: var(--supportIcon-w);
}

.form_item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form input {
  padding: 8px;
  border-radius: 4px;
  border: none;
  outline: none;
}
.form select {
  border: none;
  padding: 8px;
  border-radius: 4px;
}

.select-wrap {
  width: var(--selectW);
  height: calc(var(--selectW) / 2.6);
  position: relative;
  cursor: pointer;
}
.select-wrap .i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.select_title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fdf0cc 0%, #ebab26 90%, #fcd971 100%);
  border-radius: 10px;
  font-size: var(--selectFz);
  font-weight: 600;
}
.select_cont {
  position: absolute;
  top: calc(var(--selectW) / 2.6 + 10px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  display: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  min-width: 80px;
}
.select_cont a {
  padding: 10px 15px;
  display: block;
  color: #1b1b1b;
  text-decoration: none;
}
.select_cont a.active, .select_cont a:hover {
  color: #ca0a0a;
}

.swiper-button-next::after, .swiper-button-prev::after {
  content: none;
}
.swiper-button-prev {
  left: 0px;
}
.swiper-button-next {
  right: 0px;
}
.swiper-button-next .i-arrowLeft {
  transform: scaleX(-1);
}
.swiper_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.swiper .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  transition: 0.5s;
  opacity: 1;
}
.swiper .swiper-pagination-bullet-active {
  background: #ea3423;
  width: 60px;
  border-radius: 20px;
}
.swiper-banner {
  height: 100%;
}
.swiper-prod {
  width: var(--swiperBanner-w);
  margin: auto;
  padding: var(--swiper-pd);
  position: relative;
}
.swiper-prod .swiper {
  padding-bottom: 10px;
}
@keyframes btnPlayAni {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes pokerAni {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}
@keyframes phoneAni {
  10% {
    background-position: calc(var(--phoneAniW) * -1) top;
  }
  20% {
    background-position: calc(var(--phoneAniW) * -2) top;
  }
  30% {
    background-position: calc(var(--phoneAniW) * -3) top;
  }
  40% {
    background-position: calc(var(--phoneAniW) * -4) top;
  }
  50% {
    background-position: calc(var(--phoneAniW) * -5) top;
  }
  60% {
    background-position: calc(var(--phoneAniW) * -6) top;
  }
  70% {
    background-position: calc(var(--phoneAniW) * -7) top;
  }
  80% {
    background-position: calc(var(--phoneAniW) * -8) top;
  }
  90% {
    background-position: calc(var(--phoneAniW) * -9) top;
  }
  100% {
    background-position: calc(var(--phoneAniW) * -10) top;
  }
}
.header {
  background: var(--headerBg);
  height: var(--headerH);
  padding: var(--header-pd);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  transition: 0.4s;
}
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.header .logo img {
  width: var(--logoW);
  transition: 0.3s;
}

.headroom--not-top {
  --headerH: var(--headerH-sm);
  --logoW:var(--logoW-sm);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--menuFz);
  gap: var(--menu-gap);
}
.menu ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--menu-gap);
}
.menu ul a {
  display: inline-flex;
  align-items: center;
  gap: 0.3vw;
  padding: var(--menu-pd);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.menu li:hover a, .menu li.active a {
  background: linear-gradient(180deg, #fdf0cc 0%, #ebab26 90%, #fcd971 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}
.menu li:hover .i, .menu li.active .i {
  --commonIcon-color:linear-gradient(180deg,#fdf0cc 0%,#ebab26 90% , #fcd971 100%) ;
}
.menu_icon {
  --menuIconW: var(--menuIconW-b);
  display: inline-flex;
  gap: var(--menuIcon-gap);
}

.container {
  min-width: 1000px;
  overflow: hidden;
  background: #1d1d1d;
}

.wrap {
  width: var(--wrap-w);
  margin: auto;
}

.main, .banner {
  margin-top: var(--headerH);
}

.banner {
  position: relative;
  height: var(--bannerH);
}
.banner-video {
  height: calc(100vh - var(--headerH));
}
.banner-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.banner_title {
  background: url("../img/bg/banner_title.png") no-repeat center/contain;
  width: var(--bannerTitleW);
  height: 100%;
}
.banner_txt {
  position: absolute;
  top: 50%;
  left: var(--bannerTxt-left);
  transform: translateY(-50%);
  text-align: center;
  height: 100%;
}
.banner img {
  vertical-align: top;
}
.banner01 {
  height: calc(100vh - var(--headerH));
}
.banner-sm {
  height: var(--bannerH-sm);
}
.banner_about {
  --bannerTitleW: var(--bannerAboutTitleW);
  background: url("../img/banner/banner_about.png") no-repeat center right/cover;
}
.banner_about .banner_txt {
  height: auto;
}
.banner_about .banner_title {
  background: url("../img/bg/banner_about_title.png") no-repeat center/contain;
  height: calc(var(--bannerTitleW) * 0.3706);
  margin-bottom: var(--bannerAboutTitle-mg);
}
.banner_prod {
  --bannerTitleW: var(--bannerProdTitleW);
  background: url("../img/banner/banner_prod.png") no-repeat center/cover;
}
.banner_prod .banner_txt {
  left: 0;
  right: 0;
  top: initial;
  bottom: var(--banner_prod_txt-bottom);
  transform: none;
}
.banner_prod .banner_title {
  background: url("../img/bg/banner_prod_title.png") no-repeat center bottom/contain;
  margin: auto;
}

.scrollTop, .scrollBottom {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 50px;
  text-decoration: none;
  z-index: 2;
}

.scrollTop {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 2%;
}

.scrollBottom {
  position: fixed;
  bottom: 2%;
  right: 2%;
  background: rgba(2, 30, 71, 0.371);
}
.scrollBottom.hidden {
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

.aboutUs, .prod, .vision, .serive, .support, .adv, .feature, .monitor, .contact, .footer {
  padding: var(--default-pd);
  box-sizing: border-box;
}
.aboutUs .title, .prod .title, .vision .title, .serive .title, .support .title, .adv .title, .feature .title, .monitor .title, .contact .title, .footer .title {
  font-size: var(--titleFz);
  font-weight: 900;
  text-align: center;
}
.aboutUs .title span, .prod .title span, .vision .title span, .serive .title span, .support .title span, .adv .title span, .feature .title span, .monitor .title span, .contact .title span, .footer .title span {
  font-size: var(--titleFz-s);
  color: #818181;
  margin-top: 15px;
  display: inline-block;
}

.aboutUs, .vision {
  position: relative;
}
.aboutUs .title, .vision .title {
  background: linear-gradient(180deg, #fdf0cc 0%, #ebab26 90%, #fcd971 100%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  font-weight: 800;
  filter: drop-shadow(0 0 5px #0a0068);
}
.aboutUs_cont, .vision_cont {
  display: flex;
  align-items: start;
  justify-content: center;
  position: relative;
  flex-direction: column;
  font-size: var(--font-md);
  width: 50%;
  height: 100%;
  color: #fff;
  z-index: 2;
}
.aboutUs_pic, .vision_pic {
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.main .prod_info {
  margin-top: 0;
}

.aboutUs {
  background: url("../img/bg/about.png") no-repeat center/cover;
  height: var(--aboutUsH);
}
.aboutUs .title {
  text-align: left;
}
.aboutUs_frame1, .aboutUs_frame2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--aboutFrameW);
  height: calc(var(--aboutFrameW) * 1.735);
  z-index: 2;
}
.aboutUs_frame1::before, .aboutUs_frame2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../img/bg/about_frame.png") no-repeat center/100% 100%;
}
.aboutUs_frame1 img, .aboutUs_frame2 img {
  width: 98%;
}
.aboutUs_frame1 .i, .aboutUs_frame2 .i {
  position: absolute;
}
.aboutUs_frame1 {
  transform: rotate(-7deg);
}
.aboutUs_frame1 .i-clubs {
  left: -2vw;
  top: 2vw;
}
.aboutUs_frame1 .i-hearts {
  top: -3vw;
  right: -2vw;
  z-index: -1;
}
.aboutUs_frame2 {
  transform: rotate(7deg) translateX(-15px);
}
.aboutUs_frame2 .i-diamonds {
  bottom: -2vw;
  left: -2vw;
}
.aboutUs_frame2 .i-spades {
  top: 2vw;
  right: -2.5vw;
}
.aboutUs_pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42%;
  left: var(--aboutUsPic-left);
  top: var(--aboutUsPic-top);
}
.aboutUs_pic::before, .aboutUs_pic::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.aboutUs_pic::before {
  background: url("../img/bg/about_icon.png") no-repeat bottom center/contain;
  z-index: 3;
}
.aboutUs_pic::after {
  background: url("../img/bg/about_icon2.png") no-repeat top center/contain;
  z-index: 1;
}
.aboutUs_cont {
  margin-left: auto;
}
.aboutUs_cont ul {
  list-style: disc;
  padding-left: var(--about-ul-pd);
  margin: var(--about-ul-mg);
}
.aboutUs_cont p {
  margin-bottom: var(--about-p-mg);
}

.vision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--visionH);
  background: url("../img/bg/vision.png") no-repeat center/cover;
}
.vision .title {
  text-align: left;
}
.vision_cont {
  margin-right: auto;
}
.vision_cont p {
  margin: var(--vision-p-mg);
}
.vision_cont .btn .i {
  margin-left: 15px;
}
.vision_cont .btn:hover {
  transform: translateY(5px);
}
.vision_pic {
  background: url("../img/bg/vision_pic.png") no-repeat left bottom/contain;
  width: 45%;
  right: 0;
}

.prod {
  background: url("../img/bg/prod.png") no-repeat top center/cover;
  padding: var(--default-pd-md);
}
.prod_catalog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: var(--prodCatalog-mg);
  gap: var(--prodCatalog-gap);
}
.prod_catalog .i-flower {
  transition: 0.3s;
}
.prod_catalog .i-flower:last-child {
  transform: scale(-1, 1);
}
.prod_info {
  font-size: var(--prodInfoFz);
  padding: var(--prodInfo-pd);
  margin: var(--prodInfo-mg);
  background: #fff;
  font-weight: 600;
  line-height: 1.6;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: var(--gray);
}
.prod_info p + p {
  margin-top: var(--prodInfo-p-mg);
}
.prod_list {
  padding-bottom: var(--prodList-pd);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.prod_list p {
  font-size: var(--font-sm);
  min-height: var(--prodList-h);
  padding-left: var(--prodList-p-pd);
  padding-right: var(--prodList-p-pd);
  color: #666666;
  line-height: 1.2;
  font-weight: 600;
}
.prod_img img {
  width: 100%;
}
.prod_title {
  font-size: var(--font-md);
  margin: var(--prodTitle-mg) 0;
  text-align: center;
  font-weight: 600;
}
.prod h3 {
  font-size: var(--prodInfo-h3-Fz);
}

.support {
  background: url("../img/bg/support.png") no-repeat center/cover;
  text-align: center;
}
.support .title {
  font-size: var(--font-md);
  color: #fff;
}
.support-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--support-gap);
  margin-top: var(--support-mg);
}
.support_list {
  font-size: var(--font-sm);
  color: #fff;
}
.support_list .i {
  margin-bottom: var(--supportList-mg);
}

.adv {
  background: url("../img/bg/adv.png") no-repeat top center/cover;
  padding: var(--default-pd-md);
}
.adv .i {
  width: var(--advIcon-w);
  height: var(--advIcon-w);
  margin: auto;
}
.adv .title {
  color: #fff;
}
.adv-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--adv-gp);
  margin: var(--adv-mg);
}
.adv_list {
  padding: var(--advList-pd);
  box-shadow: var(--advList-shadow);
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.adv_title {
  font-size: var(--font-md);
  margin: var(--advTitle-mg);
  font-weight: 600;
  text-align: center;
}
.adv p {
  font-size: var(--font-sm);
  color: #666666;
  font-weight: 600;
  text-align: left;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/bg/contact.png") no-repeat top center/cover;
  --iconW:var(--featureIcon-w);
  padding: var(--feature-pd);
  gap: var(--feature-gap);
}
.feature .phone {
  position: relative;
  background: url("../img/bg/phone_frame.png") no-repeat top center/cover;
  width: var(--phoneW);
  height: calc(var(--phoneW) * 1.9027);
  text-align: center;
}
.feature .pic {
  position: absolute;
  background: url("../img/bg/phone.gif") no-repeat center/contain;
  width: var(--phoneAniW);
  height: calc(var(--phoneAniW) * 1.7286);
  left: 7%;
  margin: auto;
  top: 9.3%;
}
.feature .title span {
  color: #b46212;
  font-size: var(--titleFz);
  margin-top: 0;
}
.feature .title p {
  font-size: var(--featureTitle-p-fz);
  margin: var(--featureTitle-p-mg);
  color: #6f6f6f;
}
.feature_cont ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--featureCont-gap);
}
.feature_list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--featureList-gap);
  width: var(--featureListW);
  height: calc(var(--featureListW) / 1.834);
  padding: var(--featureList-pd);
  background: url("../img/bg/feature_list.png") no-repeat top center/cover;
  box-sizing: border-box;
}
.feature_list .icon {
  text-align: center;
}
.feature_list .icon p {
  color: #186e82;
}
.feature_list p {
  font-size: var(--font-md);
  font-weight: 600;
  color: #1d1d1d;
}

.monitor {
  --iconW:var(--monitorIcon-w);
  --titleFz: var(--font-lg);
  background: url("../img/bg/monitor.png") no-repeat top center/cover;
  padding: var(--monitor-pd);
}
.monitor_cont {
  margin-top: var(--monitorCont-mg);
  gap: var(--monitorCont-gap);
  display: flex;
}
.monitor_list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--monitorList-pd);
  gap: var(--monitorList-gap);
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}
.monitor span {
  font-size: var(--titleFz-s);
  margin-bottom: var(--monitorSpan-mg);
  color: var(--gray);
  font-weight: 700;
  display: inline-block;
}
.monitor p {
  font-size: var(--font-sm);
  font-weight: 700;
  color: #666666;
  line-height: 1.4;
}

.contact {
  --iconW:var(--contactIcon-w);
  --titleFz: var(--font-lg);
  --commonIcon-color:#186e82;
  background: url("../img/bg/contact_left.png") no-repeat center left/var(--contact-bg-w) auto, url("../img/bg/contact.png") no-repeat top center/cover;
}
.contact_cont {
  gap: var(--contactCont-gap);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: var(--contactCont-w);
  margin-left: auto;
}
.contact_cont .title {
  flex: 100%;
}
.contact_list {
  background: url("../img/bg/contact_list.png ") no-repeat top center/100% 100%;
  width: var(--contactListW);
  min-height: calc(var(--contactListW) * 1.1096);
  padding: var(--contactList-pd);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--contactList-gap);
  box-sizing: border-box;
  position: relative;
}
.contact_list_title {
  font-size: var(--font-lg);
  font-weight: 900;
  color: #186e82;
}
.contact_list p {
  display: flex;
  align-items: center;
  font-size: var(--contact-p-fz);
  font-weight: 600;
  color: var(--gray);
  line-height: 1.5;
  text-align: center;
  min-height: 30%;
}
.contact_list img {
  width: var(--qr-w);
}
.contact_list:last-child {
  background: url("../img/bg/contact_list2.png ") no-repeat top center/100% 100%;
  width: var(--contactList-full-W);
  min-height: calc(var(--contactList-full-W) / 3.1);
}
.contact_list:last-child p {
  min-height: 50%;
}
.contact_info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-md);
  border: 2px solid var(--commonIcon-color);
  gap: var(--contactInfo-gap);
  height: var(--contactInfo-h);
  max-width: var(--contact_info-w);
  border-radius: 10px;
  width: 100%;
  background: #fff;
  color: #333;
  text-decoration: none;
}

.footer {
  position: relative;
  background: #1d1d1d;
  text-align: center;
}
.footer .logo img {
  width: var(--logoW-sm);
}
.footer .copyright {
  font-size: var(--copyrightFz);
  margin-top: var(--copyright-mg);
  color: #818181;
}

@media screen and (max-width: 1000px) {
  :root {
    --wrap-w:950px;
    --swiperBanner-w:950px;
    --swiper-navigation-size: var(--swiperArrow-w);
    --logoW-sm:100px;
    --iconW:18px;
    --gameIcon-w: 24px;
    --flowerIcon-w:70px;
    --supportIcon-w:30px;
    --swiperArrow-w:35px;
    --selectIcon-w:11px;
    --advIcon-w:74px;
    --qr-w:90px;
    --featureIcon-w:66px;
    --monitorIcon-w:50px;
    --contactIcon-w:24px;
    --btnFz:12px;
    --btnPlayW:210px;
    --btnProd:140px;
    --btnProd-fz:var(--font-md);
    --btnShowcase-fz: var(--font-md);
    --btnShowcase-pd:10px 26px;
    --btnShowcase-gap:5px;
    --defaultH:375px;
    --headerH:55px;
    --headerH-sm:40px;
    --bannerTitleW:460px;
    --bannerAboutTitleW:500px;
    --bannerProdTitleW:800px;
    --banner_prod_txt-bottom:70px;
    --banner_contact_txt-bottom:95px;
    --banner_contact_txt-fz:50px;
    --bannerH:var(--defaultH);
    --aboutUsH:var(--defaultH);
    --visionH:365px;
    --prodList-h:60px;
    --contact-bg-w:500px;
    --contactCont-w:530px;
    --contactListW:240px;
    --contactList-full-W:495px;
    --contact_info-w:200px;
    --phoneW:220px;
    --phoneAniW:195px;
    --featureListW: 310px;
    --aboutFrameW: 165px;
    --default-pd:20px 10px;
    --default-pd-md:30px 10px;
    --header-pd: 0 16px;
    --menu-gap:15px;
    --adv-gp: 15px;
    --adv-mg: 26px auto 0;
    --advList-pd: 22px;
    --advList-shadow:inset 0 0 0 8px rgba(0,0,0,.1);
    --advTitle-mg:10px 0 5px;
    --prodInfo-pd:18px 26px;
    --contactList-pd: 20px ;
    --aboutUsPic-left:70px;
    --aboutUsPic-top:5px;
    --monitor-pd: 45px 0;
    --monitorCont-mg:24px;
    --monitorCont-gap:10px;
    --monitorList-pd: 26px;
    --monitorList-gap: 10px;
    --monitorSpan-mg: 5px;
    --bannerAboutTitle-mg:30px;
    --bannerTxt-left:50px;
    --about-ul-pd:10px;
    --about-ul-mg:15px 0;
    --about-p-mg:15px;
    --vision-p-mg: 26px 0 24px;
    --copyright-mg:10px;
    --feature-pd: 24px 5px;
    --feature-gap: 22px;
    --featureTitle-p-mg:10px 0;
    --featureCont-gap: 10px;
    --featureList-gap: 15px;
    --featureList-pd: 0 30px;
    --prodCatalog-mg: 26px auto;
    --prodCatalog-gap: 15px;
    --prodInfo-mg: 26px auto;
    --prodInfo-p-mg: 10px ;
    --prodList-pd: 15px;
    --prodList-p-pd: 10px;
    --prodTitle-mg: 8px;
    --swiper-pd: 0 40px;
    --contactCont-gap:15px;
    --contactList-gap:5px;
    --contactInfo-gap:3px;
    --contactInfo-h:32px;
    --supportList-mg:10px;
    --support-gap:25px;
    --support-mg:15px;
    --font-lg:20px;
    --font-md:14px;
    --font-sm: 12px;
    --titleFz:26px;
    --copyrightFz:10px;
    --prodInfo-h3-Fz:16px;
    --featureTitle-p-fz: 15px;
  }
  .swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 10px;
  }
  .swiper .swiper-pagination-bullet-active {
    width: 30px;
  }
  .contact {
    --menuIconW:24px;
  }
}
.en {
  --featureTitle-p-fz: 1.3vw;
  --font-lg:1.8vw;
  --font-sm: 1.2vw;
  --titleFz-s: var(--font-md);
  --bannerTitleW:55vw;
  --bannerProdTitleW: 70vw;
  --banner_prod_txt-bottom: 3vw;
  --contact-p-fz: 1.25vw;
  --contactListW:25vw;
  --contactList-full-W:51.5vw;
}
.en .btn-play {
  background: url("../img/en/btnPlay.png") no-repeat center/contain;
}
.en .banner_title {
  background: url("../img/en/banner_title.png") no-repeat center/contain;
}
.en .banner_about .banner_title {
  background: url("../img/en/banner_about_title.png") no-repeat center/contain;
}
.en .banner_prod .banner_title {
  background: url("../img/en/banner_prod_title.png") no-repeat center bottom/contain;
}
.en .feature_list {
  --font-md: var(--font-sm);
}
.en .feature_list .icon p {
  line-height: 1.2;
}
.en .aboutUs, .en .vision {
  --font-md: var(--font-sm);
}
.en .contact p {
  min-height: 35%;
}
.en .contact_list:last-child p {
  min-height: 50%;
}
@media screen and (max-width: 1000px) {
  .en {
    --featureTitle-p-fz: 14px;
    --font-lg:20px;
    --font-sm: 13px;
    --titleFz:22px;
    --menu-gap:5px;
    --menu-pd: .5vw .5vw;
    --bannerTitleW:550px;
    --bannerAboutTitleW:550px;
    --bannerProdTitleW: 700px;
    --banner_prod_txt-bottom: 25px;
    --contact-p-fz:13px;
    --contactListW:240px;
    --contactList-full-W:495px;
  }
  .en .contact {
    --font-md: 12px;
  }
}

.zhcn .btn-play {
  background: url("../img/zhcn/btnPlay.png") no-repeat center/contain;
}
.zhcn .banner_title {
  background: url("../img/zhcn/banner_title.png") no-repeat center/contain;
}
.zhcn .banner_about .banner_title {
  background: url("../img/zhcn/banner_about_title.png") no-repeat center/contain;
}
.zhcn .banner_prod .banner_title {
  background: url("../img/zhcn/banner_prod_title.png") no-repeat center bottom/contain;
}/*# sourceMappingURL=css.css.map */