:root {
  --safeWidth: 1200px;
  --safeMinWidth: 900px;
  --designWidth: 1920px;
  --designWidthNum: 1920;
  --safeWidthVW: 61.212vw;
}
head {
  width: 100%;
  height: 100%;
}
.app, .appHeader {
  display: none;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
/* body {
  margin: 0;
  width: 100%;
  min-width: var(--safeWidth);
} */
.safeWidth {
  /* width: var(--safeWidth); */
  width: 100%;
  margin: 0 auto;
}
.safeWidth2 {
  max-width: var(--safeWidth);
  /* min-width: var(--safeMinWidth); */
  width: var(--safeWidthVW);
  margin: 0 auto;
}
.hidden {
  display: none;
}

.container {
  width: 100%;
  position: relative;
  overflow: hidden;
}
header {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
  z-index: 2;
}

.headerContent {
  display: flex;
  position: relative;
  width: var(--safeWidthVW);
}
.logo {
  width: 200px;
  height: 66px;
  background-image: url('../img/newImg/logo.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 32px;
  left: 0;
}
.pcNav {
  margin-left: auto;
  margin-top: 30px;
  z-index: 2;
}
.pcNav ul {
  display: flex;
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.pcNav ul li {
  /* width: 180px; */
  width: calc(180 / 1920 * 100vw);
  min-width: 100px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  border-radius: 40px;
  color: #FFFFFF;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
}
.pcNav .active {
  background-color: #FFFFFF;
  box-shadow: 0px 2px 10px 0px #00000040,  0px -2px 6px 0px #756CEFE5 inset;
  color: #7269F1;
}
.banner {
  width: 100%;
}
.banner img {
  width: 100%;
}


.videoWrapper {
  /* margin-top: 146px; */
  margin-top: calc(146 / var(--designWidthNum) * 100vh);
  /* width: calc(100% + 46px); */
  /* width: 100%;
  max-width: auto; */
}
.videoWrapper .videoTitle {
  margin: 0 auto;
}
.videoWrapper .videoTitle1 {
  width: calc(355 / 1200 * 100%);
}
.videoWrapper .videoTitle2 {
  width: calc(207 / 1200 * 100%);
  margin-bottom: calc(30 / var(--designWidthNum) * 100vw);
}
.videoWrapper .videoTitle img {
  width: 100%;
}
.videoContainer {
  display: flex;
}
.videoContainer .videoContent {
  /* width: calc(100% + 46px); */
  /* width: 100%;
  aspect-ratio: 16 / 9; */
  position: relative;
  margin: 0 auto;
    /* border: 23px solid #7680FE;
  box-shadow: 0px -4px 10px 0px #6A4CC1 inset, 0px 10px 30.6px 0px #915E929C;
  border-radius: 30px; */
}
.videoContainer .videoContent .cir {
  width: calc(273 / 1200 * 100%);
  aspect-ratio: 1 / 1;
  top: calc(-52 / 1200 * 100%);
  left: calc(-117 / 1200 * 100%);
  position: absolute;
  background-image: url('../img/newImg/videoCir.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.videoContainer .videoContent .star {
  width: 68px;
  height: 68px;
  top: calc(100 / 711 * 100%);
  /* 这是边框和边框的加起来是 1200px的right */
  /* right: -72px; */
  right: calc(-128 / 711 * 100%);
  position: absolute;
  background-image: url('../img/newImg/videoStar.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.videoContainer .videoContent .sign {
  width: calc(639 / 1200 * 100%);
  position: absolute;
  top: calc(208 / 711 * 100%);
  right: calc(-364 / 1200 * 100%);
}
.videoContainer .videoContent .video {
  /* width: 100%; */
  /* height: 100%; */
  position: relative;
  z-index: 2;

  /* border: calc(23 / var(--designWidthNum) * 100vw) solid #7680FE;
  border-radius: calc(30 / var(--designWidthNum) * 100vw);
  box-shadow: 0px -4px 10px 0px #6A4CC1 inset, 0px 10px 30.6px 0px #915E929C; */
}
.videoContainer .videoContent .video video {
  /* width: calc(100% + 46px); */
  width: var(--safeWidthVW);
  /* border-radius: 7px; */
  /* border: 23px solid #7680FE;
  border-radius: 30px; */
  border: calc(23 / var(--designWidthNum) * 100vw) solid #7680FE;
  border-radius: calc(30 / var(--designWidthNum) * 100vw);
  box-shadow: 0px -4px 10px 0px #6A4CC1 inset, 0px 10px 30.6px 0px #915E929C;
  aspect-ratio: 16 / 9;
  background-color: #fff;
}
.ability {
  width: calc(700 / 1200 * 100%);
  margin: 0 auto;
  margin-top: calc(60 / var(--designWidthNum) * 100vw);
}
.ability img {
  width: 100%;
}

.imgIntroduce {
  /* padding-top: 150px; */
  margin-top: calc(150 / var(--designWidthNum) * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  /* width: 100%; */
}
.imgIntroduce img {
  width: 100%;
}

.img2 img {
  width: 102%;
  transform: translateX(-1%);
}
.part4 {
  height: calc(610 / 1080 * 100vh);
  background-image: url('../img/newImg/part4Bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 calc(70 / 1080 * 100vh);
  align-items: start;
}
.part4 {
  min-height: 360px;
}

.leftSign {
  position: absolute;
  width: calc(1180 / var(--designWidthNum) * 100%);
  /* height: 1180px; */
  left: 0;
  /* top: 2776px; */
  top: calc(2854 / 5353 * 100%);
}


.floatingFrameWrapper {
  --coefficient: 0.7;
  --floatingFrameWrapperWidthNum: calc(var(--coefficient) * 200);
  --floatingFrameWrapperWidth: calc(var(--floatingFrameWrapperWidthNum) * 1px);
  --QRCodeNum: calc(var(--coefficient) * 311);
  --QRCode: calc(var(--QRCodeNum) * 1px);
}
.floatingFrameWrapper {
  /* min-width: 120px;
  max-width: var(--floatingFrameWrapperWidth);
  width: calc(var(--floatingFrameWrapperWidthNum) / var(--designWidthNum) * 100%); */
  /* aspect-ratio: 1 / 2; */
  position: fixed;
  right: 0;
  bottom: 3%;
  z-index: 9;
  transition: bottom 0.5s ease-in-out;
  width: 100px;
  height: 200px;
}
.floatingFrameWrapperAni {
  bottom: 42%;
}
.floatingFrameWrapper .content {
  background-image: url('../img/newImg/floatingFrameBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  /* padding-top: 10%;
  padding-bottom: 8%; */
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.floatingFrameWrapper .paipai {
  width: 100%;
  position: absolute;
  left: -6%;
  top: 0;
  transform: translateY(-90%);
}
.floatingFrameWrapper .appIconWrapper {
  /* width: calc(115 / var(--floatingFrameWrapperWidthNum) * 100%); */
  width: calc(115 / 2 * 1px);
  cursor: pointer;
}
.floatingFrameWrapper .appIconWrapper .appIcon {
  width: 100%;
}
.floatingFrameWrapper .downLoadRight{
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;

}
.floatingFrameWrapper .appIconWrapper .appCode {
  /* width: calc(var(--QRCodeNum) / var(--floatingFrameWrapperWidthNum) * 100%); */
  width: calc(311 / 2 * 1px);
  position: absolute;
  top: 6px;
  left: 0;
  transform: translateX(-100%);
  display: none;
}
.floatingFrameWrapper .appIconWrapper:hover .appCode {
  display: block;
}
.floatingFrameWrapper .imgLine {
  width: 80%;
  margin-top: calc(22 / 2 * 1px);
  margin-bottom: calc(33 / 2 * 1px);
}
.floatingFrameWrapper  .publicAccountIconWrapper {
  /* width: calc(98.5 / var(--floatingFrameWrapperWidthNum) * 100%); */
  width: calc(98.5 / 2 * 1px);
  cursor: pointer;
}
.floatingFrameWrapper .publicAccountIconWrapper  .publicAccountIcon {
  width: 100%;
}
.floatingFrameWrapper .publicAccountIconWrapper .publicAccountIconCode {
  /* width: calc(var(--QRCodeNum) / var(--floatingFrameWrapperWidthNum) * 100%); */
  width: calc(311 / 2 * 1px);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  display: none;
}
.floatingFrameWrapper .publicAccountIconWrapper:hover .publicAccountIconCode {
  display: block;
}


footer {
  background: #6E5CE1;
  height: 200px;
  /* min-width: 1200px; */
}
.inner-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.footer-line {
  margin: 4px 0;
  color: #fff;
  a {
    color: #fff;
    text-decoration: underline;
  }
}

.downloadWrapper {
  display: none;
}

@media  (min-width: 1600px) {
  .pcNav ul li {
    font-size: 30px;
  }
}

@media  (max-width: 900px) {
  .container {
    --headerBaseHeight: 6rem;
    --bottomBaseHeight: 10rem;
    --safeWidthVW: 90vw;
    /* padding-top: var(--headerBaseHeight); */
    padding-bottom: var(--bottomBaseHeight);
    box-sizing: border-box;

  }

  .safeWidth2 {
    width: var(--safeWidthVW);
  }
  .pc, .pcHeader {
    display: none;
  }
  .app {
    display: block;
  }
  .appHeader {
    display: block;
    height: var(--headerBaseHeight);
    overflow: hidden;
    position: absolute;
    /* transition: height 0.3s linear; */
    left: 0;
    top: 0;
    z-index: 999;
  }
  .appHeader.appHeaderAni {
    transition: height 0.3s linear;
  }
  .appHeader.active {
    height: 100vh;
  }
  .appHeader .nav1 {
    display: flex;
    height: var(--headerBaseHeight);
    /* background-color: #7C4FFB; */
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: space-between;
    align-items: center;
  }
  .appHeader .nav1 .btnWrapper {
    width: 3rem;
    height: 100%;
    position: relative;
  }
  .appHeader .nav1 .btnWrapper .line {
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 0;
    width: 100%;
    transition: transform 0.5s ease-in-out, width 0.5s ease-in-out;
    transform-origin: 34% center;
  }
  .appHeader .nav1 .btnWrapper .line1 {
    top: 43%;
  }
  .appHeader .nav1 .btnWrapper .line2 {
    top: 57%;
  }
  .appHeader .nav1 .btnWrapper .line1Rotate {
    transform: rotate(45deg);
    /* width: 110%; */
  }
  .appHeader .nav1 .btnWrapper .line2Rotate {
    transform: rotate(-45deg);
    /* width: 110%; */
  }
  .appHeader .appLogo {
    width: 14rem;
  }
  .appHeader .nav2 {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: var(--headerBaseHeight);
    opacity: 0.8;
    overflow: auto;
  }
  .appHeader .nav2 ul  {
    padding: 0 4rem;
  }
  .appHeader .nav2 ul li {
    font-size: 3rem;
    height: 10rem;
    line-height: 10rem;
    position: relative;
    color: #11181c;
  }
  .appHeader .nav2 ul li::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #7C4FFB;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .appHeader .nav2 ul .active {
    color: #000;
    font-weight: 500;
  }

  .videoWrapper .videoTitle1 {
    width: calc(530 / 1200 * 100%);
    margin-bottom: 0.5rem;
  }
  .videoWrapper .videoTitle2 {
    width: calc(257 / 1200 * 100%);
  }

  .ability {
    width: calc(950 / 1200 * 100%);
  }

  .floatingFrameWrapper {
    display: none;
  }

  .part4 {
    /* height: calc(260 / 1080 * 100vh); */
    height: 20rem;
    min-height: auto;
  }


  footer {
    height: 14rem;
    font-size: 1.4rem;
  }
  
  .downloadWrapper {
    display: block;
    height: var(--bottomBaseHeight);
    padding-bottom: 2rem;
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1999;
    display: flex;
    padding-left: 4rem;
    padding-right: 3rem;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  .downloadLogo {
    width: 14rem;
  }
  .downloadBtn {
    width: 16rem;
    font-size: 2.5rem;
    border-radius: 3rem;
    height: 6rem;
    line-height: 6rem;
    text-align: center;
    background-color: rgb(68, 109, 248);
    color: #fff;
  }
}
@media  (max-width: 1030px) {
  .part4 {
    height: 20rem;
    min-width: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 899px) {
  .downloadWrapper {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  :root {
    --topBaseHeight: 7px;
  }
  .logo {
    top: var(--topBaseHeight);
  }
  .pcNav {
    margin-top: var(--topBaseHeight);
  }
}

/* 横屏 */
@media (orientation: landscape) {
  .appHeader .nav2 ul {
    padding-bottom: 18rem;
  }
}

/* 模态框的样式 */
.modal {
  position: fixed;
  z-index: 1990;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}
.modalContent {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
}
.modalContent .modalTip {
  width: 100%;
}
.modalContent .modalBtn {
  width: 40%;
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}