* {
	box-sizing: border-box;
}

html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #999;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #333;
	margin: 0;
	padding: 0;
	min-width: 1200px;
	/* white-space: nowrap; */
}
a{
	text-decoration:none;
	color: #333;
}

.page-wrapper {
	transition-delay: .3s;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.slide {
	min-width: 1200px;
}

.swiper-slide {
	background: #fff;
}

.slide:nth-child(1) {
	padding-top: 0;
}

.swiper-slide p {
	transform: translateX(-200px);
	opacity: 0;
	transition: all .4s;
}

.ani-slide p {
	transform: translateX(0);
	opacity: 1;
}

/* 导航栏 */
.nav-wrapper, .theme-nav-bar {
	position: fixed;
	z-index: 999;
	height: 4rem;
	width: 100%;
	/* background-color: rgba(255, 255, 255, 0.7); */
	/* box-shadow: 0 2px 4px #C2C2C2; */
	min-width: 1200px;
  background: transparent;
}

.nav-content {
	width: 70.333333%;
	margin: 0 auto;
	/* border: 1px red solid; */
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.nav-left{
  display: flex;
  align-items: center;
}
.nav-left span{
  font-size: 20px;
  padding-left: 20px;
  font-weight: bold;
}
.nav-wrapper .nav-left span{
  color: #fff;
}
.nav-logo {
	width: 3rem;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
	width: 100%;
  object-fit: contain;
}

.bar-text {
	margin: 2rem;
	color: rgba(255, 255, 255, 0.7);
	padding: 1rem 0;
	position: relative;
}

.bar-text:hover {
	cursor: pointer;
	color: #fff;
}

.bar-text::after {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 3px solid #fff;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	transition: .3s;
}

.active-bar {
	color: #fff;
}

.active-bar::after {
	width: 100%;
}

.theme-nav-bar{
  display: none;
}
.grey{
  color: #312E33;
}
.active-theme-bar{
  color: #8272EF;
}
.active-theme-bar::after{
  width: 100%;
}
.grey::after{
  border-bottom: 3px solid #8272EF;
}
.grey:hover {
	cursor: pointer;
	color: #8272EF;
}




/* 主内容 */
.home-bg-wrapper{
  width: 100%;
  height: 100vh;
}
.home-bg-wrapper img{
  width: 100%;
  height: 100%;
}
.slide1{
  position: relative;
}
.slide1-content-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.content-out-wrapper{
  height: 100%;
  display: flex;
  align-items: center;
  height: 100vh;
  position: relative;
}
.slide-content{
  width: 73%;
  /* max-width: 1440px; */
  margin: 0 auto;
  /* padding-top: 100px; */
  display: flex;
  z-index: 99;
}
.slide-left{
  width: 50%;
  padding-top: 13vh;
  position: relative;
  margin-right: -11.1vh;
}
.slide-right{
  width: 50%;
  padding-top: 7.4vh;
  
}
.text-img{
  width: 37vw;
  height: 13vh;
  
}
.text-img img{
  width: 100%;
}
.note{
  font-size: 1.56vw;
  color: #fff;
  padding-left: 1.04vw;
  margin-top: 65px;
}
.download-box{
  display: flex;
  align-items: center;
  margin-top: 7.4vh;
}
.apple, .android{
  background-color: #1A0D2D;
  width: 11.5vw;
  height: 6.5vh;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border: 1px solid #fff;
}
.android{
  margin-left: 20px;
}
.apple:hover, .android:hover{
  background-color: #FC639C;
  border: none;
}

.apple img, .android img{
  width: 2.1vw;
  height: 2.1vw;
}
.apple span, .android span{
  font-size: 24px;
  color: #fff;
  margin-left: 20px;
}

.star-img{
  width: 43.9vw;
  height: 64vh;
  position: relative;
  margin-left: -44px;
  -webkit-animation: bounce-down 4s ease-in-out infinite;
  animation: bounce-down 4s ease-in-out infinite;
}
.star-img img{
  width: 100%;
}

@keyframes bounce-down{
  0%, 100% {
      -webkit-transform: translateY(0) scale(100%);
  }
 50% {
      -webkit-transform: translateY(36px) scale(102%);
  }

}
@-webkit-keyframes bounce-down{
  0%, 100% {
       -webkit-transform: translateY(0) scale(100%);
   }
  50% {
       -webkit-transform: translateY(36px) scale(102%);
   }
}

.downarrow{
  
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 30px;
  -webkit-animation: down-up 1.2s ease-in-out infinite;
  animation: down-up 1.2s ease-in-out infinite;
  z-index: 99;
}
.downarrow img{
  width: 32px;
  height: 32px;
  cursor: pointer;
}
@keyframes down-up{
  50% {
    transform: translateY(12px);
  }
}
@-webkit-keyframes down-up{
  50% {
    transform: translateY(12px);
  }
}




/* slide2 */
.slide2{
  background-color: #F7F0FD;
  width: 100%;
  height: 100%;
}
.column-center{
  align-items: center;
}
.slide-left-pad{
  padding-top: 4vh;
  margin: 0;
}
.slide-right-pad{
  padding-top: 4vh;
}
.circle-wrapper{
  position: relative;
  width: 37.5vw;
  height: 37.5vw;
}
.out-circle{
  /* width: 37.5vw;
  height: 37.5vw; */
  width: 24.75vw;
  height: 24.75vw;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(130, 114, 239, 0.05); 
  -webkit-animation: wave 1.2s linear infinite;
  animation: wave 1.2s linear infinite;
}
.mid-circle{
  /* width: 28.125vw;
  height: 28.125vw; */
  width: 20.75vw;
  height: 20.75vw;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(130, 114, 239, 0.25);
  /* opacity: 25%; */
  -webkit-animation: wave 1.6s linear infinite;
  animation: wave 1.6s linear infinite;
}
@keyframes wave {
  0% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 0.1;
  }
  25% {
    transform: translate(-50%,-50%) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%,-50%) scale(1.4);
    opacity: 0.7;
  }
  75% {
    transform: translate(-50%,-50%) scale(1.6);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%,-50%) scale(1.8);
    opacity: 0;
  }
}
@-webkit-keyframes wave{
  0% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 0.1;
  }
  25% {
    transform: translate(-50%,-50%) scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%,-50%) scale(1.4);
    opacity: 0.7;
  }
  75% {
    transform: translate(-50%,-50%) scale(1.6);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%,-50%) scale(1.8);
    opacity: 0;
  }
}

.inner-circle{
  width: 18.75vw;
  height: 18.75vw;
  border-radius: 50%;
  background-color: rgba(130, 114, 239, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.phone-img{
  position: absolute;
  /* left: 30px;
  top: 36px;
  bottom: 36px;
  right: 30px; */
  /* transform: translateX(-50%); */
  width: 33.85vw;
  height: 33.85vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.phone-img img{
  width: 100%;
}
.title-wrapper{
  position: relative;
  padding-left: 5.2vw;
}
.title{
  font-size: 5.2vw;
  font-weight: bold;
  z-index: 10;
  position: relative;
}
.down-line{
  width: 20.8vw;
  height: 4.63vh;
  border-radius: 0.83vw;
  background: linear-gradient(to right, #9567F2,#5E86F8);
  position: relative;
  margin-top: -50px;
}
.flex-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.desc-wrapper{
  padding-left: 5.2vw;
}
.small-title{
  font-size: 1.56vw;
  /*font-weight: bold;*/
  margin: 40px 0;
  color: #312E33;
}
.desc{
  /*width: 18.75vw;*/
  font-size: 1.25vw;
  color: #312E33;
}
.xq-img{
  position: absolute;
  right: -4.2vw;
  bottom: -4.6vh;
  width: 43.2vw;
  height: 61.8vh;
}
.xq-img img{
  width: 100%;
}

/* slide3 */
.text-right{
  /* text-align: right; */
  padding-right: 5.2vw;
  padding-left: 0;
}
.desc-right{
  text-align: right;
}
.xq-left{
  left: -9.2vw;
  top: 20%;
  transform: scale(120%);
}


.bot-img{
  position: absolute;
  bottom: -22.22vh;
  left: -1.67vw;
  transform: scale(140%);
}
.bot-img img , .bot-right img{
  width: 100%;
}

.bot-right{
  position: absolute;
  right: -24.67vw;
  bottom: -20vh;
  /* transform: scale(120%); */
}
.socket{
  position: absolute;
  bottom: 0;
  right: 3.75vw;
  width: 10.57vw;
  height: 16vh;
}

.socket img {
  width: 100%;
}


.flex-center{
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: -14.8vh;
}
.footer{
  position: absolute;
  bottom: 4.5vh;
  left: 0;
  right: 0;
  color: #fff;
}
.link-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}
.link{
  color: #fff;
  margin: 0 12px;
}
.link:hover{
  text-decoration: underline;
}
.no-link{
  cursor: default;
}
.no-link:hover{
  text-decoration: none;
}
.bei{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #C9D4F9;
}

.poppup{
  width: 250px;
  height: 250px;
  background-color: #fff;
  border-radius: 12px;
  position: absolute;
  top: 8.8vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 24px;
  visibility: hidden;
  transform-origin: 1px 1px;
}

.poppup::after{
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 16px;
  border-style: solid;
  border-color:  transparent transparent #fff transparent ;
  
}
.qr-code{
  width: 100%;
  height: 100%;
}
.qr-code img{
  width: 100%;
  /* object-fit: cover; */
  height: 100%;
}
.show {
  visibility: visible;
  -webkit-animation: fadeIn .4s;
  animation: fadeIn .4s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {scale: 0;} 
    to {scale: 1;}
}

@keyframes fadeIn {
    from {scale: 0;}
    to {scale: 1 ;}
}


/* 滚动弹幕 */
.barrage-swiper{
  position: absolute;
  top: 5.2vw;
  left: 0;
  right: 0;
  height: 22vh;
  overflow: hidden;
  z-index: 999;
}
.barrage-wrapper{
  transition-timing-function: linear !important;
}

.barrage-slide{
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  /* display: flex;
  flex-wrap: wrap; */
  background: transparent;
}
.barrage-box{
  height: 3.5vw;
  margin: 0 20px;
  position: relative;
}
.barrage-box img{
  width: 100%;
  height: 3.5vw;
}
.up, .down, .up2, .down2{
  display: flex;
  height: 11vh;
  align-items: center;
}
.down{
  justify-content: center;
}
.up2{
  justify-content: center;
}
.barrage-text{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 0.833vw;
  color: #fff;
  text-align: center;
  line-clamp: 1;
}

.xq-wrapper{
  -webkit-animation: bounce-down 4s ease-in-out infinite;
  animation: bounce-down 4s ease-in-out infinite;
}