@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap");
:root {
  --swiperBanner-w:100%;
  --swiper-navigation-size: var(--swiperArrow-w);
  --logoW:115px;
  --logoW-sm:80px;
  --iconW:18px;
  --menuIconW:30px;
  --gameIcon-w: 28px;
  --monitorIconW: 60px;
  --featureIconW:70px;
  --flowerIcon-w:60px;
  --supportIcon-w:30px;
  --swiperArrow-w:70px;
  --selectIcon-w:22px;
  --advIcon-w:65px;
  --featureIcon-w:80px;
  --monitorIcon-w:50px;
  --pokerIconW: 13vw;
  --iconBg:#fff;
  --menuIcon-bg:#fff;
  --menuIcon-bg-on:#e93423;
  --commonIcon-color:#fff;
  --btnFz:14px;
  --btnPlayW:110px;
  --btnProd:120px;
  --btnProd-fz:15px;
  --btnShowcase-fz: 14px;
  --defaultH:190px;
  --headerH:60px;
  --menuH:60px;
  --footerH:70px;
  --bannerH:150px;
  --aboutUsH:250px;
  --visionH:250px;
  --pd-default:20px 15px;
  --monitor-pd:var(--pd-default);
  --adv-pd:var(--pd-default);
  --prod-pd:var(--pd-default);
  --vision-pd:var(--pd-default);
  --aboutUs-pd:var(--pd-default);
  --feature-pd: 30px 20px;
  --bannerW:260px;
  --bannerAboutTitleW:220px;
  --bannerProdTitleW:360px;
  --bannerProdTitleBottom:40px;
  --bannerContactTitleBottom:40px;
  --bannerVideo-h:calc(100vh - var(--headerH) );
  --contactInfo-h:24px;
  --phoneW:220px;
  --phoneAniW:193px;
  --aboutFrameW: 30vw;
  --adv-gp:10px;
  --adv-mg:20px auto 0;
  --font-lg:18px;
  --font-md:16px;
  --font-sm:14px;
  --titleFz:var(--font-lg);
  --selectFz: var(--font-sm);
  --prodInfoFz: var(--font-sm);
  --prodTitle-fz: var(--font-md);
  --prodList-fz: var(--font-sm);
  --aboutUs-cont-fz: var(--font-sm);
  --aboutUs-info-fz: var(--font-sm);
  --supportTitle-fz: var(--titleFz);
  --supportList-fz: var(--font-sm);
  --advTitle-fz: var(--font-sm);
  --advP-fz: var(--font-sm);
  --featureTitle-fz: var(--titleFz);
  --featureTitle-p-fz: var(--font-sm);
  --featureList-title-fz: var(--font-md);
  --featureList-txt-fz: var(--font-sm);
  --monitor-title-fz: var(--font-md);
  --monitor-txt-fz: var(--font-sm);
  --contactListTitle-fz: var(--font-lg);
  --titleFz-s: 13px;
  --menuFz: 13px;
  --copyrightFz: 12px;
  --sideMenu-link-fz: 18px;
  --selectW:80px;
}

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

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: "Noto Sans TC", "Arial", sans-serif;
}

html, body, .main {
  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: 4px;
  border-radius: 4px;
  background: #ccc;
  font-weight: 400;
  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) / 2.99);
  box-sizing: border-box;
  transition: 0.3s;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.2));
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: absolute;
  right: 15%;
  bottom: 7%;
}
.btn-play::before, .btn-play::after {
  font-weight: 900;
}
.btn-play: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 1px #fff, 0 0 0 3px #515151;
  padding: 0;
}
.btn-prod span {
  line-height: calc(var(--btnProd) / 4.24);
}
.btn-showcase {
  --iconW: 16px;
  font-size: var(--btnShowcase-fz);
  background: #15527c;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  padding: 6px 8px;
  gap: 5px;
}

.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-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-arrowDown {
  width: var(--selectIcon-w);
  height: var(--selectIcon-w);
  background: url("../img/icon/arrowDown.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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) 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-close {
  -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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (8 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (8 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-menu {
  -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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (9 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (9 - 1) * -1) 0;
  width: var(--menuIconW);
  height: calc(var(--menuIconW) * 0.9);
  background: var(--commonIcon-color);
}

.i-earch {
  -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) * 10) calc(var(--menuIconW) * 0.9);
          mask-size: calc(var(--menuIconW) * 10) calc(var(--menuIconW) * 0.9);
  -webkit-mask-position: calc(var(--menuIconW) * (10 - 1) * -1) 0;
          mask-position: calc(var(--menuIconW) * (10 - 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(--featureIconW) * 4) var(--featureIconW);
  background-position: calc(var(--featureIconW) * (1 - 1) * -1) 0;
  width: var(--featureIconW);
  height: var(--featureIconW);
}

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

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

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

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

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

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

.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(--menuIconW);
  position: relative;
  cursor: pointer;
}
.select_title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #f9e58a, #d4a743);
  border-radius: 4px;
  font-size: var(--selectFz);
  font-weight: 600;
  color: #333;
}
.select_cont {
  width: var(--selectW);
  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: 500;
  z-index: 10;
}
.select_cont a {
  padding: 10px 10px;
  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 .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 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 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 {
  0% {
    background-position: calc(var(--phoneAniW) * 0) top;
  }
  0.8064516129% {
    background-position: calc(var(--phoneAniW) * -1) top;
  }
  1.6129032258% {
    background-position: calc(var(--phoneAniW) * -2) top;
  }
  2.4193548387% {
    background-position: calc(var(--phoneAniW) * -3) top;
  }
  3.2258064516% {
    background-position: calc(var(--phoneAniW) * -4) top;
  }
  4.0322580645% {
    background-position: calc(var(--phoneAniW) * -5) top;
  }
  4.8387096774% {
    background-position: calc(var(--phoneAniW) * -6) top;
  }
  5.6451612903% {
    background-position: calc(var(--phoneAniW) * -7) top;
  }
  6.4516129032% {
    background-position: calc(var(--phoneAniW) * -8) top;
  }
  7.2580645161% {
    background-position: calc(var(--phoneAniW) * -9) top;
  }
  8.064516129% {
    background-position: calc(var(--phoneAniW) * -10) top;
  }
  8.8709677419% {
    background-position: calc(var(--phoneAniW) * -11) top;
  }
  9.6774193548% {
    background-position: calc(var(--phoneAniW) * -12) top;
  }
  10.4838709677% {
    background-position: calc(var(--phoneAniW) * -13) top;
  }
  11.2903225806% {
    background-position: calc(var(--phoneAniW) * -14) top;
  }
  12.0967741935% {
    background-position: calc(var(--phoneAniW) * -15) top;
  }
  12.9032258065% {
    background-position: calc(var(--phoneAniW) * -16) top;
  }
  13.7096774194% {
    background-position: calc(var(--phoneAniW) * -17) top;
  }
  14.5161290323% {
    background-position: calc(var(--phoneAniW) * -18) top;
  }
  15.3225806452% {
    background-position: calc(var(--phoneAniW) * -19) top;
  }
  16.1290322581% {
    background-position: calc(var(--phoneAniW) * -20) top;
  }
  16.935483871% {
    background-position: calc(var(--phoneAniW) * -21) top;
  }
  17.7419354839% {
    background-position: calc(var(--phoneAniW) * -22) top;
  }
  18.5483870968% {
    background-position: calc(var(--phoneAniW) * -23) top;
  }
  19.3548387097% {
    background-position: calc(var(--phoneAniW) * -24) top;
  }
  20.1612903226% {
    background-position: calc(var(--phoneAniW) * -25) top;
  }
  20.9677419355% {
    background-position: calc(var(--phoneAniW) * -26) top;
  }
  21.7741935484% {
    background-position: calc(var(--phoneAniW) * -27) top;
  }
  22.5806451613% {
    background-position: calc(var(--phoneAniW) * -28) top;
  }
  23.3870967742% {
    background-position: calc(var(--phoneAniW) * -29) top;
  }
  24.1935483871% {
    background-position: calc(var(--phoneAniW) * -30) top;
  }
  25% {
    background-position: calc(var(--phoneAniW) * -31) top;
  }
  25.8064516129% {
    background-position: calc(var(--phoneAniW) * -32) top;
  }
  26.6129032258% {
    background-position: calc(var(--phoneAniW) * -33) top;
  }
  27.4193548387% {
    background-position: calc(var(--phoneAniW) * -34) top;
  }
  28.2258064516% {
    background-position: calc(var(--phoneAniW) * -35) top;
  }
  29.0322580645% {
    background-position: calc(var(--phoneAniW) * -36) top;
  }
  29.8387096774% {
    background-position: calc(var(--phoneAniW) * -37) top;
  }
  30.6451612903% {
    background-position: calc(var(--phoneAniW) * -38) top;
  }
  31.4516129032% {
    background-position: calc(var(--phoneAniW) * -39) top;
  }
  32.2580645161% {
    background-position: calc(var(--phoneAniW) * -40) top;
  }
  33.064516129% {
    background-position: calc(var(--phoneAniW) * -41) top;
  }
  33.8709677419% {
    background-position: calc(var(--phoneAniW) * -42) top;
  }
  34.6774193548% {
    background-position: calc(var(--phoneAniW) * -43) top;
  }
  35.4838709677% {
    background-position: calc(var(--phoneAniW) * -44) top;
  }
  36.2903225806% {
    background-position: calc(var(--phoneAniW) * -45) top;
  }
  37.0967741935% {
    background-position: calc(var(--phoneAniW) * -46) top;
  }
  37.9032258065% {
    background-position: calc(var(--phoneAniW) * -47) top;
  }
  38.7096774194% {
    background-position: calc(var(--phoneAniW) * -48) top;
  }
  39.5161290323% {
    background-position: calc(var(--phoneAniW) * -49) top;
  }
  40.3225806452% {
    background-position: calc(var(--phoneAniW) * -50) top;
  }
  41.1290322581% {
    background-position: calc(var(--phoneAniW) * -51) top;
  }
  41.935483871% {
    background-position: calc(var(--phoneAniW) * -52) top;
  }
  42.7419354839% {
    background-position: calc(var(--phoneAniW) * -53) top;
  }
  43.5483870968% {
    background-position: calc(var(--phoneAniW) * -54) top;
  }
  44.3548387097% {
    background-position: calc(var(--phoneAniW) * -55) top;
  }
  45.1612903226% {
    background-position: calc(var(--phoneAniW) * -56) top;
  }
  45.9677419355% {
    background-position: calc(var(--phoneAniW) * -57) top;
  }
  46.7741935484% {
    background-position: calc(var(--phoneAniW) * -58) top;
  }
  47.5806451613% {
    background-position: calc(var(--phoneAniW) * -59) top;
  }
  48.3870967742% {
    background-position: calc(var(--phoneAniW) * -60) top;
  }
  49.1935483871% {
    background-position: calc(var(--phoneAniW) * -61) top;
  }
  50% {
    background-position: calc(var(--phoneAniW) * -62) top;
  }
  50.8064516129% {
    background-position: calc(var(--phoneAniW) * -63) top;
  }
  51.6129032258% {
    background-position: calc(var(--phoneAniW) * -64) top;
  }
  52.4193548387% {
    background-position: calc(var(--phoneAniW) * -65) top;
  }
  53.2258064516% {
    background-position: calc(var(--phoneAniW) * -66) top;
  }
  54.0322580645% {
    background-position: calc(var(--phoneAniW) * -67) top;
  }
  54.8387096774% {
    background-position: calc(var(--phoneAniW) * -68) top;
  }
  55.6451612903% {
    background-position: calc(var(--phoneAniW) * -69) top;
  }
  56.4516129032% {
    background-position: calc(var(--phoneAniW) * -70) top;
  }
  57.2580645161% {
    background-position: calc(var(--phoneAniW) * -71) top;
  }
  58.064516129% {
    background-position: calc(var(--phoneAniW) * -72) top;
  }
  58.8709677419% {
    background-position: calc(var(--phoneAniW) * -73) top;
  }
  59.6774193548% {
    background-position: calc(var(--phoneAniW) * -74) top;
  }
  60.4838709677% {
    background-position: calc(var(--phoneAniW) * -75) top;
  }
  61.2903225806% {
    background-position: calc(var(--phoneAniW) * -76) top;
  }
  62.0967741935% {
    background-position: calc(var(--phoneAniW) * -77) top;
  }
  62.9032258065% {
    background-position: calc(var(--phoneAniW) * -78) top;
  }
  63.7096774194% {
    background-position: calc(var(--phoneAniW) * -79) top;
  }
  64.5161290323% {
    background-position: calc(var(--phoneAniW) * -80) top;
  }
  65.3225806452% {
    background-position: calc(var(--phoneAniW) * -81) top;
  }
  66.1290322581% {
    background-position: calc(var(--phoneAniW) * -82) top;
  }
  66.935483871% {
    background-position: calc(var(--phoneAniW) * -83) top;
  }
  67.7419354839% {
    background-position: calc(var(--phoneAniW) * -84) top;
  }
  68.5483870968% {
    background-position: calc(var(--phoneAniW) * -85) top;
  }
  69.3548387097% {
    background-position: calc(var(--phoneAniW) * -86) top;
  }
  70.1612903226% {
    background-position: calc(var(--phoneAniW) * -87) top;
  }
  70.9677419355% {
    background-position: calc(var(--phoneAniW) * -88) top;
  }
  71.7741935484% {
    background-position: calc(var(--phoneAniW) * -89) top;
  }
  72.5806451613% {
    background-position: calc(var(--phoneAniW) * -90) top;
  }
  73.3870967742% {
    background-position: calc(var(--phoneAniW) * -91) top;
  }
  74.1935483871% {
    background-position: calc(var(--phoneAniW) * -92) top;
  }
  75% {
    background-position: calc(var(--phoneAniW) * -93) top;
  }
  75.8064516129% {
    background-position: calc(var(--phoneAniW) * -94) top;
  }
  76.6129032258% {
    background-position: calc(var(--phoneAniW) * -95) top;
  }
  77.4193548387% {
    background-position: calc(var(--phoneAniW) * -96) top;
  }
  78.2258064516% {
    background-position: calc(var(--phoneAniW) * -97) top;
  }
  79.0322580645% {
    background-position: calc(var(--phoneAniW) * -98) top;
  }
  79.8387096774% {
    background-position: calc(var(--phoneAniW) * -99) top;
  }
  80.6451612903% {
    background-position: calc(var(--phoneAniW) * -100) top;
  }
  81.4516129032% {
    background-position: calc(var(--phoneAniW) * -101) top;
  }
  82.2580645161% {
    background-position: calc(var(--phoneAniW) * -102) top;
  }
  83.064516129% {
    background-position: calc(var(--phoneAniW) * -103) top;
  }
  83.8709677419% {
    background-position: calc(var(--phoneAniW) * -104) top;
  }
  84.6774193548% {
    background-position: calc(var(--phoneAniW) * -105) top;
  }
  85.4838709677% {
    background-position: calc(var(--phoneAniW) * -106) top;
  }
  86.2903225806% {
    background-position: calc(var(--phoneAniW) * -107) top;
  }
  87.0967741935% {
    background-position: calc(var(--phoneAniW) * -108) top;
  }
  87.9032258065% {
    background-position: calc(var(--phoneAniW) * -109) top;
  }
  88.7096774194% {
    background-position: calc(var(--phoneAniW) * -110) top;
  }
  89.5161290323% {
    background-position: calc(var(--phoneAniW) * -111) top;
  }
  90.3225806452% {
    background-position: calc(var(--phoneAniW) * -112) top;
  }
  91.1290322581% {
    background-position: calc(var(--phoneAniW) * -113) top;
  }
  91.935483871% {
    background-position: calc(var(--phoneAniW) * -114) top;
  }
  92.7419354839% {
    background-position: calc(var(--phoneAniW) * -115) top;
  }
  93.5483870968% {
    background-position: calc(var(--phoneAniW) * -116) top;
  }
  94.3548387097% {
    background-position: calc(var(--phoneAniW) * -117) top;
  }
  95.1612903226% {
    background-position: calc(var(--phoneAniW) * -118) top;
  }
  95.9677419355% {
    background-position: calc(var(--phoneAniW) * -119) top;
  }
  96.7741935484% {
    background-position: calc(var(--phoneAniW) * -120) top;
  }
  97.5806451613% {
    background-position: calc(var(--phoneAniW) * -121) top;
  }
  98.3870967742% {
    background-position: calc(var(--phoneAniW) * -122) top;
  }
  99.1935483871% {
    background-position: calc(var(--phoneAniW) * -123) top;
  }
  100% {
    background-position: calc(var(--phoneAniW) * -124) top;
  }
  100% {
    background-position: calc(var(--phoneAniW) * -124) top;
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --menuIconW: 24px;
  background: var(--headerBg);
  height: var(--headerH);
  padding: 0 15px;
  transition: 0.4s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  box-sizing: border-box;
}
.header .logo img {
  width: var(--logoW);
  transition: 0.3s;
}
.header-r {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: var(--menuFz);
  height: var(--menuH);
  background: #1d1d1d;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--menuIcon-bg);
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
  height: 100%;
  gap: 2px;
}
.menu li:hover a, .menu li.active a {
  --menuIcon-bg:var(--menuIcon-bg-on);
  color: var(--menuIcon-bg-on);
}
.sideMenu {
  transition: all 0.1s ease-in;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  left: auto;
  right: 0;
  top: 0;
  overflow: hidden;
  display: none;
}
.sideMenu-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}
.sideMenu.active {
  display: block;
}
.sideMenu-box {
  width: 56%;
  position: relative;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e1e1e;
  margin-left: auto;
  z-index: 12;
  transform: translateX(100%);
  transition: all 0.2s ease-in;
  box-shadow: -1px 0 5px rgba(255, 255, 255, 0.2);
}
.sideMenu-box.active {
  transform: translateX(0%);
}
.sideMenu-header {
  --menuIconW: 24px;
  --commonIcon-color:#ddd;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, transparent 40%), linear-gradient(to bottom, #3a3a3a, #1a1a1a);
  border-bottom: 1px solid #3d3d3d;
}
.sideMenu-header .logo img {
  height: 24px;
}
.sideMenu-content {
  flex-grow: 1;
}
.sideMenu-content .link {
  display: flex;
  align-items: center;
  padding: 15px 30px;
  gap: 10px;
  font-size: var(--sideMenu-link-fz);
  text-decoration: none;
  color: #fff;
  transition: all 0.3 ease-in;
  font-weight: 500;
}
.sideMenu-content .link:hover, .sideMenu-content .link:active, .sideMenu-content .link.active {
  background: linear-gradient(180deg, rgb(245, 233, 187) 0%, rgb(206, 170, 73) 70%);
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  --commonIcon-color:linear-gradient(180deg, rgba(245, 233, 187, 1) 0%, rgba(206, 170, 73, 1) 70%);
}
.sideMenu-content .link:hover .icon_header, .sideMenu-content .link:active .icon_header, .sideMenu-content .link.active .icon_header {
  background: linear-gradient(180deg, rgb(245, 233, 187) 0%, rgb(206, 170, 73) 70%);
}
.sideMenu-content .link span {
  max-width: calc(100% - var(--menuIconW) - 10px);
}
.sideMenu-content .link-item:not(:last-child):after {
  content: "";
  background: #3e3e3e;
  width: 85%;
  height: 1px;
  margin: auto;
  display: block;
}
.sideMenu-footer {
  display: flex;
  align-items: center;
}
.sideMenu-footer .link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  color: #fff;
}
.sideMenu-footer .link-list {
  width: 100%;
  display: flex;
  align-items: center;
}
.sideMenu-footer .link-item {
  flex: 1;
}
.sideMenu-footer .link-item:first-child {
  background: #205a9c;
}
.sideMenu-footer .link-item:last-child {
  background: #3c3e42;
}

.container {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.main {
  padding-top: var(--headerH);
}

.banner {
  position: relative;
  height: var(--bannerH);
}
.banner-video {
  height: var(--bannerVideo-h);
  background: #000;
}
.banner-video video {
  width: 100%;
  height: 100%;
}
.banner_title {
  background: url("../img/bg/banner_title.png") no-repeat center/contain;
  width: var(--bannerW);
  height: 100%;
}
.banner_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  text-align: center;
  height: 100%;
}
.banner img {
  vertical-align: top;
}
.banner_about {
  --bannerW: var(--bannerAboutTitleW);
  background: url("../img/banner/banner_about.png") no-repeat center right/cover;
}
.banner_about .banner_title {
  background: url("../img/bg/banner_about_title.png") no-repeat center/contain;
}
.banner_prod {
  --bannerW: var(--bannerProdTitleW);
  background: url("../img/banner/banner_prod.png") no-repeat center/cover;
}
.banner_prod .banner_txt {
  right: 0;
  left: 0;
  transform: none;
  top: initial;
  bottom: var(--bannerProdTitleBottom);
}
.banner_prod .banner_title {
  background: url("../img/bg/banner_prod_title.png") no-repeat center bottom/contain;
}
.banner_contact {
  --bannerW: var(--bannerProdTitleW);
  background: url("../img/banner/banner_contact.png") no-repeat center/cover;
}
.banner_contact .banner_txt {
  right: 0;
  left: 0;
  transform: none;
  top: initial;
  bottom: var(--bannerContactTitleBottom);
  height: auto;
}
.banner_contact .banner_title {
  background: none !important;
  color: #fff;
  font-size: 30px;
}

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

.scrollTop {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 30px;
  height: 30px;
  font-size: 30px;
}

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

.aboutUs, .prod, .vision, .serive, .support, .adv, .feature, .monitor, .contact, .footer {
  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: 600;
  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: 10px;
  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);
  text-align: center;
}
.aboutUs_cont, .vision_cont {
  position: relative;
  font-size: var(--aboutUs-cont-fz);
  color: #fff;
  z-index: 2;
}

.aboutUs {
  overflow: hidden;
}
.aboutUs_top {
  position: relative;
  background: url("../img/bg/about.png") no-repeat center right/cover;
  height: var(--aboutUsH);
  padding: 20px 15px 40px;
}
.aboutUs_top .title {
  text-align: center;
  margin-bottom: 30px;
}
.aboutUs_pic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.aboutUs_frame1, .aboutUs_frame2, .aboutUs_frame3 {
  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, .aboutUs_frame3::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, .aboutUs_frame3 img {
  width: 98%;
}
.aboutUs_frame1 .i, .aboutUs_frame2 .i, .aboutUs_frame3 .i {
  position: absolute;
}
.aboutUs_frame1 {
  transform: rotate(-7deg) translateX(10px);
}
.aboutUs_frame1 .i-clubs {
  top: -6vw;
  right: -4vw;
}
.aboutUs_frame2 {
  transform: rotate(3deg) translateX(0) translateY(-5px);
  z-index: 3;
}
.aboutUs_frame2 .i-diamonds {
  bottom: -6vw;
  left: -1vw;
}
.aboutUs_frame3 {
  transform: rotate(7deg) translateX(-5px);
}
.aboutUs_frame3 .i-hearts {
  bottom: 2vw;
  right: -6vw;
}
.aboutUs_frame3 .i-spades {
  top: -6vw;
  right: 2vw;
}
.aboutUs_info {
  font-size: var(--aboutUs-info-fz);
  background: linear-gradient(180deg, rgb(31, 24, 86) 0%, rgb(11, 6, 45) 60%);
  color: #fff;
  padding: var(--aboutUs-pd);
  text-align: justify;
}
.aboutUs_info p + p {
  margin-top: 20px;
}
.aboutUs_info ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}
.aboutUs_info li + li {
  margin-top: 5px;
}

.vision {
  overflow: hidden;
  min-height: var(--visionH);
  background: url("../img/bg/vision.png") no-repeat center/cover;
  padding: var(--vision-pd);
}
.vision_cont {
  margin: auto;
}
.vision_cont p {
  margin: 15px 0;
}
.vision_cont .btn .i {
  transform: rotate(90deg);
  margin-left: 5px;
}
.vision_cont .qr {
  margin-top: 10px;
  width: 80px;
}
.vision_pic {
  background: url("../img/bg/vision_pic.png") no-repeat left bottom/contain;
  width: 65%;
  right: 0;
  height: 100%;
  position: absolute;
  bottom: -25%;
  z-index: 1;
}

.prod {
  background: url("../img/bg/prod.png") no-repeat top center/100% auto;
  padding: var(--prod-pd);
}
.prod_catalog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 15px auto;
  gap: 15px;
}
.prod_catalog .i-flower {
  transition: 0.3s;
}
.prod_catalog .i-flower:last-child {
  transform: scale(-1, 1);
}
.prod_info {
  font-size: var(--prodInfoFz);
  padding: 10px;
  background: #fff;
  font-weight: 400;
  margin: 20px auto 15px;
  line-height: 1.4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #333333;
  text-align: justify;
}
.prod_info p + p {
  margin-top: 10px;
}
.prod_list {
  background: #fff;
  border-radius: 10px;
  padding-bottom: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.prod_list p {
  font-size: var(--prodList-fz);
  color: #666666;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.3;
  font-weight: 400;
  text-align: justify;
}
.prod_img img {
  width: 100%;
}
.prod_title {
  font-size: var(--prodTitle-fz);
  text-align: center;
  margin: 10px 0;
  font-weight: 500;
}

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

.adv {
  background: url("../img/bg/adv.png") no-repeat top center/cover;
  padding: var(--adv-pd);
}
.adv .title {
  color: #fff;
}
.adv .i {
  width: var(--advIcon-w);
  height: var(--advIcon-w);
  margin: auto;
}
.adv-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--adv-gp);
  margin: var(--adv-mg);
}
.adv_list {
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), inset 0 0 0 6px #dadfe2;
  text-align: center;
}
.adv_title {
  font-size: var(--advTitle-fz);
  font-weight: 500;
  text-align: center;
  margin: 6px 0;
}
.adv p {
  font-size: var(--advP-fz);
  color: #666666;
  font-weight: 500;
  text-align: justify;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: url("../img/bg/feature.png") no-repeat top center/cover;
  --iconW:var(--featureIcon-w);
  padding: var(--feature-pd);
}
.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;
  margin: 5px 0 20px;
}
.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: 8.9%;
}
.feature .title span {
  color: #b46212;
  font-size: var(--featureTitle-fz);
  margin-top: 0;
}
.feature .title p {
  font-size: var(--featureTitle-p-fz);
  margin: 10px 0;
  color: #6f6f6f;
}
.feature_cont ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.feature_list {
  gap: 5px;
  width: 100%;
  padding: 20px;
  background: url("../img/bg/feature_list.png") no-repeat top center/100% 100%;
  box-sizing: border-box;
}
.feature_list .icon {
  text-align: center;
}
.feature_list .icon p {
  color: #186e82;
  font-size: var(--featureList-title-fz);
}
.feature_list p {
  font-size: var(--featureList-txt-fz);
  font-weight: 500;
  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: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.monitor_list {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 5px;
}
.monitor_list .icon {
  width: var(--monitorIcon-w);
}
.monitor_list_txt {
  width: calc(100% - var(--monitorIcon-w) - 20px);
}
.monitor span {
  font-size: var(--monitor-title-fz);
  margin-bottom: 5px;
  color: #333;
  font-weight: 600;
  display: inline-block;
}
.monitor p {
  font-size: var(--monitor-txt-fz);
  font-weight: 400;
  color: #666666;
  line-height: 1.4;
}

.contact {
  --commonIcon-color:#186e82;
  --menuIconW: 22px;
  background: url("../img/bg/contact.png") repeat-y top center/cover;
  padding: 20px 10px;
  box-sizing: border-box;
}
.contact .title {
  margin-bottom: 20px;
}
.contact_cont {
  gap: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.contact_list {
  background: url("../img/bg/contact_list.png ") no-repeat top center/100% 100%;
  width: 48%;
  padding: 20px 20px 60px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}
.contact_list_title {
  font-size: var(--contactListTitle-fz);
  font-weight: 600;
  color: #186e82;
}
.contact_list p {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  text-align: center;
}
.contact_list img {
  width: 60%;
}
.contact_list-full {
  background: url("../img/bg/contact_list-full.png ") no-repeat top center/100% 100%;
  width: 100%;
}
.contact_list-full p {
  min-height: auto;
}
.contact_info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 1px solid var(--commonIcon-color);
  height: var(--contactInfo-h);
  gap: 5px;
  border-radius: 5px;
  background: #fff;
  color: #333;
  text-decoration: none;
  max-width: 250px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: auto;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  background: #1d1d1d;
  text-align: center;
  padding: 0 3px;
  height: var(--footerH);
}
.footer .logo img {
  width: var(--logoW-sm);
}
.footer .copyright {
  font-size: var(--copyrightFz);
  color: #818181;
  margin-top: 10px;
}

.en {
  --sideMenu-link-fz:16px;
  --featureList-title-fz:14px;
  --featureList-txt-fz:13px;
  --contactListTitle-fz:16px;
  --bannerAboutTitleW:230px;
  --bannerProdTitleBottom:20px;
}
.en .btn-play {
  background: url("../img/en/btnPlay.png") no-repeat center/contain;
}
.en .banner-video {
  --bannerW: 320px;
}
.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_about .banner_txt {
  left: 2%;
}
.en .banner_about .btn-play {
  right: 10%;
}
.en .banner_prod .banner_title {
  background: url("../img/en/banner_prod_title.png") no-repeat center bottom/contain;
}
.en .aboutUs_info,
.en .prod_list p, .en .adv p, .en .prod_info {
  text-align: left;
}
.en .adv_list {
  padding: 10px 10px;
}
.en .contact_list p, .en .adv_title, .en .title {
  line-height: 1.3;
}
.en .sideMenu-content .link {
  padding: 15px 20px;
}
.en .feature_list {
  background: url("../img/bg/contact_list.png") no-repeat center/100% 100%;
}
.en .feature_list .icon {
  margin-bottom: 2px;
}
.en .feature_list p {
  text-align: center;
}

.zhcn {
  font-family: "Noto Sans SC", "Arial", sans-serif;
}
.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 */