body {
  -webkit-transform-style: preserve-3d;
}

body.about {
  background: #fff;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9998;
  padding: 0px 50px;
  height: 100px;
  background: rgba(0,0,0,0.5);
}

.header .logo img {
  width: 190px;
  display: block;
}
.header .right a{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  margin-left: 100px;
}
.header .right a.active{
  font-weight: 500;
  font-size: 22px;
}

.banner-index{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background: #060C0C;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.slide-inner{
  width: 100%;
  height: 100vh;
  background: #060C0C;
  font-size: 40px;
  color: #fff;
  text-align: center;
  position: relative;
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: center;
}
.swiper-container-vertical>.swiper-pagination {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0,-50%,0);
  -moz-transform: translate3d(0,-50%,0);
  -o-transform: translate(0,-50%);
  -ms-transform: translate3d(0,-50%,0);
  transform: translate3d(0,-50%,0);
  left: inherit;
  bottom: inherit;
  width: auto;
}
.swiper-pagination-customs{
  width: 45px !important ;
  height: 45px !important;
  display:block !important;
  border-radius: 50% !important;
  outline: 0;
  box-sizing: border-box;
  margin: 18px auto;
  cursor: pointer;
  opacity: 1 !important;
  transition: all 0.4s;
}
.swiper-pagination-customs.swiper-pagination-customs-active{
  width: 60px !important;
  height: 60px !important;
}
.swiper-pagination-customs-1{
  background: url(../images/nav-1@2x.png) !important;
  background-size: 100% !important;

}
.swiper-pagination-customs-2{
  background: url(../images/nav-2@2x.png) !important;
  background-size: 100% !important;

}
.swiper-pagination-customs-3{
  background: url(../images/nav-3@2x.png) !important;
  background-size: 100% !important;
}
.swiper-pagination-customs-4{
  background: url(../images/nav-4@2x.png) !important;
  background-size: 100% !important;
}
.swiper-pagination-customs-5{
  background: url(../images/nav-5@2x.png) !important;
  background-size: 100% !important;
}
.swiper-pagination-customs-6{
  background: url(../images/nav-6@2x.png) !important;
  background-size: 100% !important;
}
.swiper-pagination-customs-7{
  background: url(../images/nav-7@2x.png) !important;
  background-size: 100% !important;
}

.swiper-slide-active .slide-inner{
  display: flex;
}
.swiper-slide-1 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide1/left@2x.png);
  background-size: 100%;
  width: 451px;
  height: 624px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;

 }
.swiper-slide-1 .slide-inner .bg-right{
  position: absolute;
  background: url(../images/slide1/right@2x.png);
  background-size: 100%;
  width: 1233px;
  height: 772px;
  top: 0;
  right: 0;
  opacity: 0;
  animation: fade 0.5s ease-in-out 1.5s forwards;
 }
 .swiper-slide-2 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide2/left@2x.png);
  background-size: 100%;
  width: 1369px;
  height: 763px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-3 .slide-inner .bg-right{
  position: absolute;
  right: 0;
  bottom: 0;
  background: url(../images/slide3/right@2x.png);
  background-size: 100%;
  width: 915px;
  height: 648px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-4 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide4/left@2x.png);
  background-size: 100%;
  width: 623px;
  height: 496px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-4 .slide-inner .bg-right{
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/slide4/right@2x.png);
  background-size: 100%;
  width: 378px;
  height: 392px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-5 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide5/left@2x.png);
  background-size: 100%;
  width: 419px;
  height: 386px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-5 .slide-inner .bg-right{
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/slide5/right@2x.png);
  background-size: 100%;
  width: 489px;
  height: 495px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-6 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide6/left@2x.png);
  background-size: 100%;
  width: 526px;
  height: 500px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-7 .slide-inner .bg-left{
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/slide7/left@2x.png);
  background-size: 100%;
  width: 292px;
  height: 392px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .swiper-slide-7 .slide-inner .bg-right{
  position: absolute;
  right: 0;
  top: 0;
  background: url(../images/slide7/right@2x.png);
  background-size: 100%;
  width: 426px;
  height: 343px;
  opacity: 0.5;
  animation: fade2 3s ease-in-out infinite;
 }
 .slide-inner .inner{
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;
  width: 1200px;
  margin: 0 auto;
  justify-content: center;
 }
 .slide-inner .inner .left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  animation: fade 0.5s ease-in-out forwards;
  animation-delay: 1s;
  opacity: 0;
  width: 500px;
  margin-left: 50px;
  margin-right: 50px;
  flex: 1;
}
.slide-inner .inner .left .logo img{
  width: 100px;
  height: 100px;
  margin-bottom: 40px;
}
.slide-inner .inner .left .title{
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-family: AlibabaPuHuiTi_2_95;
  text-align: left;
}
.slide-inner .inner .left .title span{
  font-size: 28px;
  font-family: PingFangSC;
  font-weight: 400;
}
.slide-inner .inner .left .text{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  margin: 50px 0px;
  text-align: left;
}
.slide-inner .inner .left .more{
  display: flex;
  align-items: center;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
}
.slide-inner .inner .left .more i{
  width: 20px;
  height: 20px;
  background: url(../images/more@2x.png);
  background-size: 100%;
  margin-left: 10px;
}
.effects{
  animation: anim1 1.5s ease-in-out;
  width: 600px;
}
.effects img{
  display: block;
  width: 100%;
}


.about-index{
  width: 100%;
  height: 100vh;
  position: relative;
  background: #060C0C;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-index .bg-top{
  width: 1231px;
  height: 388px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
  background: url(../images/about/top@2x.png);
  background-size: 100%;
  position: absolute;
  animation: fade2 3s ease-in-out infinite;

}
.about-index .bg-right{
  width: 522px;
  height: 875px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: url(../images/about/right@2x.png);
  background-size: 100%;
  position: absolute;
  animation: fade2 3s ease-in-out infinite;

}

.about-index-text-box{
  width: 1200px;
}
.about-index-text-box h1{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #FFFFFF;
  position: relative;
  width: 480px;
  margin:0px 20px 0px 40px;
  font-size: 60px;
  animation: fade 0.5s ease-in-out forwards;
  animation-delay: 1s;
  opacity: 0;
}
.about-index-text-box h1 i{
  position: absolute;
  width: 326px;
  height: 184px;
  background: url(../images/about/title-bg@2x.png);
  background-size: 100%;
  left: 0;
  top: 0px;
  animation: fade2 3s ease-in-out infinite;

}
.about-right{
  flex: 1;
  animation: anim1 1.5s ease-in-out;
}
.about-right img{
  display: block;
  width: 100%;
}



.about-index-text-box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-btn {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  z-index: 9;
}
.about-btn:hover{
  border: 2px solid #fff;
}

.about-btn i {
  width: 13px;
  height: 8px;
  background: url(../images/about/banner-btn-i.png) center center no-repeat;
  background-size: cover;
}

.company-profile{
  background: #060C0C;
  padding: 110px 0px;
  position: relative;
}
.company-profile .bg-left{
  width: 1391px;
  height: 815px;
  background: url(../images/about/company-bg@2x.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
}
.company-inner{
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
}
.company-inner.active .left{
  animation: anim3 1s ease-in-out forwards;
}
.company-inner.active .right{
  animation: anim2 1s ease-in-out forwards;
}
.company-inner .left{
  position: relative;

}
.company-inner .left img{
  width: 400px;
  height: 101px;
  position: relative;
  z-index: 1;
}
.company-inner .left i{
  width: 1428px;
  height: 360px;
  background: url(../images/about/logo-bg@2x.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.company-inner .right{
  width: 520px;
  height: 508px;
  background: url(../images/about/company-text@2x.png) center center no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

}
.company-inner .right i{
  width: 48px;
  height: 46px;
  background: url(../images/about/text-sign@2x.png) center center no-repeat;
  background-size: cover;
  position: absolute;
  left: 65px;
  top: 50px;
}
.company-inner .right p{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  padding: 0px 65px;
}
.company-modular{
  padding: 150px 0 250px;
  background: #F9FBFF;
}
.company-modular-title{
  font-family: AlibabaPuHuiTi_2_95_ExtraBold;
  font-weight: 800;
  font-size: 40px;
  text-align: center;
  margin-bottom: 90px;
}
.company-modular-title p{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 20px;
}
.company-modular ul{
  width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.company-modular ul li{
  width: 400px;
  height: 400px;
  position: relative;
  background: #121111;
  border-radius: 28px;
  overflow: hidden;
}
.company-modular ul li:hover .modular-text{
  transform: translateY(0);
}
.modular-img{
  position: absolute;
  bottom: 0;
  right: 0;
}
.modular-img.modular-1 {
  width: 294px;
  height: 272px;
}
.modular-img.modular-2 {
  width: 291px;
  height: 255px;
}
.modular-img.modular-3 {
  width: 328px;
  height: 299px;
}

.modular-text-1{
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 28px;

}
.modular-text-1 h1{
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  padding: 50px 0px 0px 50px;
}
.company-modular .modular-text{
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background-image: linear-gradient(-38deg, #014AE2 0%, #6097FF 100%);
  transition: 0.4s all;
  transform: translateY(100%);

}
.company-modular .modular-text .modular-text-inner{
  position: absolute;
  left: 50px;
  top: 50px;
  right: 50px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
}
.company-modular .modular-text h1{ 
  font-family: PingFangSC-S0pxibold;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
  text-align: left;
  margin-bottom: 35px;
}
.company-modular .modular-text p{ 
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  text-align: left;
}
.company-modular .more{
  width: 40px;
  height: 40px;
  background: url(../images/about/more@2x.png);
  background-size: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 2;
}

.footer{
  height: 554px;
  width: 100%;
  background: url(../images/about/footer@2x.png);
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.footer-nav{
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-nav .left img{
  width: 300px;
}
.footer-nav .right {
  display: flex;

}
.footer-nav .right .row{
  margin-left: 120px;
}
.footer-nav .right .row label{
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 22px;
  color: #fff;
}
.footer-nav .right .row ul{
  margin-top: 45px;
}
.footer-nav .right .row ul li{
  margin-bottom: 40px;
}
.footer-nav .right .row ul li a{
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  font-family: PingFangSC-Regular;
  line-height: 1.5;
}
.footer-nav .right .row ul li a:hover{
  text-decoration: underline;
}
.footer-beian a{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
}
.index-beian{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.index-beian a{
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
}
@media (min-width: 1441px) {
 .slide-inner .inner .left{
  margin-left: 100px;
  margin-right: 100px;
}
 .slide-inner .inner{
  width: 1400px;
 }
 .company-modular ul{
  width: 1540px;
}
.company-modular ul li{
  width: 500px;
  height: 500px;
  position: relative;
}
 .about-index-text-box{
  width: 1600px;
  justify-content: space-around;
 }
.about-index-text-box h1{
  margin: 0px 120px;
  font-size: 60px;

}
.company-inner{
  width: 1600px;
}
.footer-nav{
  width: 1500px; 
}
.company-inner .right{
  width: 780px;
  height: 761px;
}
.company-inner .right i{
  width: 72px;
  height: 69px;
  position: absolute;
  left: 65px;
  top: 100px;
}
.company-inner .right p{
  font-size: 20px;
}
 .effects{
  width: 800px;
 }
 .swiper-slide-6 .slide-inner .effects img{
  width: 594px;
  margin: 0 auto;
}
 .swiper-slide-7 .slide-inner .effects img{
  width: 874px;
}
.swiper-pagination-customs{
  width: 60px !important ;
  height: 60px !important;
  display:block !important;
  border-radius: 50% !important;
  outline: 0;
  box-sizing: border-box;
  margin: 30px auto;
  cursor: pointer;
  opacity: 1 !important;
}
.swiper-pagination-customs.swiper-pagination-customs-active{
  width: 100px !important;
  height: 100px !important;
}

  .company-modular .modular-text .modular-text-inner{
    top: 70px;
  }
  .company-modular .modular-text h1{ 
    font-size: 28px;
  }
  .company-modular .modular-text p{ 
    font-size: 20px;
}
}