img {
  max-width: 100%;
  transform: translateZ(0);
  image-rendering: optimizeQuality;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

canvas {
  image-rendering: optimizeQuality;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

a {
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: "custom1";
  /* src: url(../../font/HarmonyOS_Sans_SC_Black.ttf); */

  src: url("../font/HarmonyOS_Sans_SC_Black.eot");
  src: url("../font/HarmonyOS_Sans_SC_Black.eot?#iefix")
      format("embedded-opentype"),
    url("../font/HarmonyOS_Sans_SC_Black.woff") format("woff"),
    url("../font/HarmonyOS_Sans_SC_Black.ttf") format("truetype"),
    url("../font/HarmonyOS_Sans_SC_Black.svg#custom1") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "custom2";

  /* src: url(../../font/HarmonyOS_Sans_SC_Bold.ttf); */
  src: url("../font/HarmonyOS_Sans_SC_Bold.eot");
  src: url("../font/HarmonyOS_Sans_SC_Bold.eot?#iefix")
      format("embedded-opentype"),
    url("../font/HarmonyOS_Sans_SC_Bold.woff") format("woff"),
    url("../font/HarmonyOS_Sans_SC_Bold.ttf") format("truetype"),
    url("../font/HarmonyOS_Sans_SC_Bold.svg#custom2") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* @font-face {
    font-family: "custom3";
    src: url("../font/HarmonyOS_Sans_SC_Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "custom4";
    src: url("../font/Vudotronic.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
} */
@font-face {
  font-family: "custom5";
  /* src: url(../../font/HarmonyOS_Sans_SC_Regular.ttf); */
  src: url("../font/HarmonyOS_Sans_SC_Regular.eot");
  src: url("../font/HarmonyOS_Sans_SC_Regular.eot?#iefix")
      format("embedded-opentype"),
    url("../font/HarmonyOS_Sans_SC_Regular.woff") format("woff"),
    url("../font/HarmonyOS_Sans_SC_Regular.ttf") format("truetype"),
    url("../font/HarmonyOS_Sans_SC_Regular.svg#custom2") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "custom6";
  /* src: url("../font/HarmonyOS_Sans_SC_Thin.ttf"); */
  src: url("../font/HarmonyOS_Sans_SC_Thin.eot");
  src: url("../font/HarmonyOS_Sans_SC_Thin.eot?#iefix")
      format("embedded-opentype"),
    url("../font/HarmonyOS_Sans_SC_Thin.woff") format("woff"),
    url("../font/HarmonyOS_Sans_SC_Thin.ttf") format("truetype"),
    url("../font/HarmonyOS_Sans_SC_Thin.svg#custom2") format("svg");
  font-weight: normal;
  font-style: normal;
}

.f1 {
  font-family: custom1;
}
.f2 {
  font-family: custom2;
}
/* .f3 {
  font-family: custom3;
}
.f4 {
  font-family: custom4;
} */
.f5 {
  font-family: custom5;
}
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -00.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInDown20 {
  -webkit-animation-name: fadeInDown20;
  animation-name: fadeInDown20;
}
@-webkit-keyframes fadeInDown20 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown20 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -0.4rem, 0);
    transform: translate3d(0, -0.4rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes opacityFade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.opacityFade {
  animation: opacityFade 2s infinite linear alternate;
}

.img {
  width: 100%;
  /*   height: 100%; */
  display: block;
}
.nav {
  width: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  right: 0.3rem;
  top: 0.6rem;
  z-index: 9999;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xjt {
  padding: 0.4rem 0;
  font-size: 0.3rem;
  font-weight: 600;
  text-align: center;
}
.w64 {
  width: 6.4rem;
}
.sj {
  display: block;
  width: 0;
  height: 0;
  border: 0.2rem solid transparent;
  border-left-color: orange;
  margin-left: 0.1rem;
}
.bodyh {
  overflow: hidden;
}
.hidenav {
  width: 100%;
  height: 100%;
  display: none;
}
.nav-main {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  padding-top: 1.48rem;
  z-index: 999;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-main a {
  margin-top: 0.73rem;
  width: 100px;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
.nav-main h1 {
  font-family: custom5;
  font-size: 0.28rem;
  color: #fefefe;
}

@keyframes dong {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.xh {
  -webkit-animation: dong 2s infinite;
  animation: dong 2s infinite;
}

.xh2 {
  -webkit-animation: dong 5s infinite;
  animation: dong 5s infinite;
}

@keyframes bounce-down {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
  }
}
.animate-bounce-down {
  -webkit-animation: bounce-down 1.8s linear infinite;
  animation: bounce-down 1.8s linear infinite;
}

@-webkit-keyframes cloud1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes cloud1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
}

.zoom {
  -webkit-animation: zoom 1.5s infinite linear alternate;
  animation: zoom 1.5s infinite linear alternate;
}

.cloud {
  -webkit-animation: cloud1 15s infinite linear;
  animation: cloud1 15s infinite linear;
}

.a1 {
  animation-delay: 0.2s;
}
.a2 {
  animation-delay: -0.4s;
}
.a3 {
  animation-delay: -0.6s;
}
.a4 {
  animation-delay: -0.8s;
}
.a5 {
  animation-delay: -1s;
}
.a6 {
  animation-delay: -1.2s;
}
.a7 {
  animation-delay: -1.4s;
}

/*
  公用 *
*/

.por {
  position: relative;
}

/* 箭头 */
.g-arrDown {
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.g-arrDown .img1 {
  width: 0.3rem;
}

.g-arrDown .img2 {
  width: 0.5rem;
}

/* 更多 */
.g-more {
  text-align: center;
}

.g-more a {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 50px;
  border-radius: 6px;
  background: #ff4d00;
  overflow: hidden;
}

.g-more img {
  margin-right: 6px;
  width: 50px;
  height: auto;
}

.g-more em {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ffd200;
}

img {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.popVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10000;
  padding: 2% 5%;
  display: none;
  box-sizing: border-box;
}

.popVideo .box {
  position: relative;
  width: 100%;
  height: 100%;
}

.popVideo .box .close {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.7rem;
  height: 0.7rem;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.4rem;
  cursor: pointer;
  z-index: 10001;
  z-index: 99;
}

.popVideo .box video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  object-fit: cover;
}

/* 视频 */
.m-boxVideoPop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  box-sizing: border-box;
}

.m-boxVideoPop .w12k {
  flex-direction: column;
  justify-content: center;
}

.m-boxVideoPop h3 {
  font-family: "custom1";
  font-size: 0.48rem;
}

.m-boxVideoPop h4 {
  padding: 0.12rem 0 0.09rem;
  font-family: "custom1";
  font-size: 0.38rem;
}

.m-boxVideoPop p {
  font-family: "custom5";
  text-transform: uppercase;
  font-size: 0.24rem;
}

.m-boxVideoPop .imgTxt {
  display: flex;
  align-items: center;
  padding-top: 0.3rem;
}

.m-boxVideoPop .video1 {
  background: #000;
}

.m-boxVideoPop .imgTxt .s1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  background: #963a88;
}

.m-boxVideoPop .imgTxt .s1:after {
  content: "";
  display: block;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
  -webkit-transform: translateY(-1px) translateX(3px);
  transform: translateY(-1px) translateX(3px);
}

.m-boxVideoPop .imgTxt .s2 {
  font-size: 0.3rem;
}

.m-more {
  text-align: center;
}

.m-more a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 3.4rem;
  height: 1rem;
  border-radius: 8px;
  background: #ab3f8b;
  box-sizing: border-box;
}

.m-more .con {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.2rem 0 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 32px;
}

.m-more .con img {
  width: 100%;
  height: 100%;
}

.m-more .con:after {
  content: "";
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #ab3f8b;
  -webkit-transform: translateY(-1px) translateX(0.04rem);
  transform: translateY(-1px) translateX(0.04rem);
}

.m-more .rig {
  flex: 1;
  overflow: hidden;
  color: #fff;
  text-align: left;
}

.m-more .rig h3 {
  padding-bottom: 0.05rem;
  font-size: 0.3rem;
  font-family: "custom2";
}

.m-more .rig p {
  font-size: 0.22rem;
  font-family: "custom1";
  text-transform: uppercase;
}

.m-loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 10;
  width: 1.7rem;
}

.m-loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.m-loader:before,
.m-loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: mpulsOut 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 0.08rem rgba(255, 255, 255, 0.75));
}
.m-loader:before {
  width: 100%;
  padding-bottom: 100%;
  box-shadow: inset 0 0 0 0.16rem #fff;
  animation-name: mpulsIn;
}
.m-loader:after {
  width: calc(100% - 0.16rem);
  padding-bottom: calc(100% - 0.16rem);
  box-shadow: 0 0 0 0 #fff;
}

@keyframes mpulsIn {
  0% {
    box-shadow: inset 0 0 0 0.08rem #fff;
    opacity: 1;
  }
  50%,
  100% {
    box-shadow: inset 0 0 0 0 #fff;
    opacity: 0;
  }
}

@keyframes mpulsOut {
  0%,
  50% {
    box-shadow: 0 0 0 0 #fff;
    opacity: 0;
  }
  100% {
    box-shadow: 0 0 0 0.08rem #fff;
    opacity: 1;
  }
}

.ttu {
  text-transform: uppercase;
}

* {
  font-family: arial !important;
}

.poa {
  position: absolute;
}

.poa-img {
  display: block;
  width: 100%;
  height: auto;
  /* height: 100%; */
}

.m-index {
  position: relative;
  overflow: hidden;
}

.m-index-bg {
  display: block;
  width: 100%;
}

.m-index-con {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}



body {
  font-family: "custom5";
}