.banner {
  width: 100vw;
  height: 783px;
  background-image: url('../assets/banner_back@2x.jpg');
  background-size: 100% 100%;
  padding: 174px 0 0 0;
}
.banner .title-1{
  position: relative;
  z-index: 1;
}
.banner .title-1::after{
  content: "";
  width: 48px;
  height: 48px;
  background: #C6CAF8;
  opacity: 0.4;
  position: absolute;
  left: -22px;
  top: -15px;
  border-radius: 100%;
  z-index: -1;
}
.banner .title-3{
  margin-top: 30px;
}
.banner .content-2{
  margin-top: 36px;
  margin-bottom: 40px;
}
.banner img{
  width: 24px;
  margin-right: 12px;
}
.banner .btn{
  width: 200px;
  height: 60px;
  margin: 0 24px 24px 0;
  background: #FFFFFF;
  box-shadow: 0px 6px 12px 1px rgba(105,88,254,0.2);
  border-radius: 8px 8px 8px 8px;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  cursor: pointer;
}
.banner .right-img-box{
  position: relative;
  margin-left: 76px;
}
.banner .right-img-box .right-img{
  width: 660px;
  height: 440px;
}
.banner .right-img-box .play-box{
  width: 40px;
  height: 40px;
  background-image: url('../assets/play_def.png');
  background-size: 100% 100%;
  position: absolute;
  cursor: pointer;
}
.banner .right-img-box .play-box:hover{
  background-image: url('../assets/play_bf_hover.png');
}
.banner .right-img-box .play-box-1{
  left: 48%;
  top: 151px;
}
.banner .right-img-box .play-box-2{
  right: 135px;
  top: 304px;
}

.banner2{
  padding: 80px 0;
}
.banner2 .content-2{
  margin: 30px 0 30px 0;
}
.banner2 .part-twelve-swiper{
  height: 500px;
}
.banner2 .swiper-slide{
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner2 .swiper-pagination-bullet{
  display: inline-block;
  width: 24px;
  height: 8px;
  background: #F1F1F1;
  border-radius:7px;
  opacity: 1;
}
.banner2 .swiper-pagination-bullet-active{
  display: inline-block;
  width: 24px;
  height: 8px;
  background: #FE6C6C;
  border-radius:7px;
}
.banner2 .pagination-2{
  width: 524px;
  height: 60px;
  background: #F6F6F6;
  border-radius: 30px;
  margin:0 0 30px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.banner2 .pagination-2 .item{
  width: 96px;
  height: 40px;
  border-radius: 30px 30px 30px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}
.banner2 .pagination-2 .active{
  color: #FFFFFF;
  background: linear-gradient( 98deg, #3349FF 0%, #5D55FE 32%, #A669FF 68%, #F4968B 100%);
}
.banner2 .swiper-slide{
  position: relative;
}
.banner2 .swiper-slide .play-box{
  width: 56px;
  height: 56px;
  background-image: url('../assets/play_def.png');
  background-size: 100% 100%;
  position: absolute;
  left: calc(50%-28px);
  cursor: pointer;
}
.banner2 .swiper-slide .play-box:hover{
  background-image: url('../assets/play_bf_hover.png');
}

.banner3{
  width: 100vw;
  height: 880px;
  background-image: url('../assets/module_3_back@2x.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner3 .content-2{
  margin-top: 30px;
  margin-bottom: 40px;
}
.banner3 .imglist-box{
  width: 1200px;
  height: 432px;
  padding: 36px 0 0 40px;
  background: #FFFFFF;
  border-radius: 20px 20px 20px 20px;
}
.banner3 .imglist-box .item img{
  width: 170px;
  height: 170px;
  margin: 0 20px 20px 0;
}

.banner4{
  width: 100vw;
  height: 880px;
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner4 .content-2{
  margin-top: 30px;
  margin-bottom: 40px;
}
.banner4 .imglist-box{
  width: 1230px;
  height: 432px;
  padding: 36px 0 0 40px;
}
.banner4 .imglist-box .item{
  width: 174px;
  height: 174px;
  margin: 0 20px 20px 0;
  background: #F2F4FF;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #DFE2FF;
}
.banner4 .imglist-box .item:hover{
  box-shadow: 0px 6px 12px 1px rgba(129, 129, 129, 0.2);
}
.banner4 .imglist-box .item img{
  width: 50px;
  height: 50px;
}
.banner4 .imglist-box .item span{
  font-weight: bold;
  font-size: 24px;
  line-height: 41px;
  margin-top: 19px;
}

.banner5{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/b5矩形1.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner5 .left-img-bg{
  width: 164px;
  height: 250px;
  position: absolute;
  left: -164px;
}
.banner5 .left-img{
  width: 520px;
  height: 480px;
}
.banner5 .right-div{
  margin-left: 180px;
}
.banner5 .gradient-text-2{
  margin: 24px 0 40px 0;
}

.banner6{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/b5矩形2.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner6 .right-img-bg{
  width: 164px;
  height: 250px;
  position: absolute;
  right: -164px;
}
.banner6 .right-img{
  width: 520px;
  height: 480px;
}
.banner6 .left-div{
  margin-right: 180px;
}
.banner6 .gradient-text-2{
  margin: 24px 0 40px 0;
}

.banner7{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/b5矩形1.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner7 .left-img-bg{
  width: 164px;
  height: 250px;
  position: absolute;
  left: -164px;
}
.banner7 .left-img{
  width: 520px;
  height: 480px;
}
.banner7 .right-div{
  margin-left: 180px;
}
.banner7 .gradient-text-2{
  margin: 24px 0 40px 0;
}

.banner8{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/b5矩形2.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner8 .right-img-bg{
  width: 164px;
  height: 250px;
  position: absolute;
  right: -164px;
}
.banner8 .right-img{
  width: 520px;
  height: 480px;
}
.banner8 .left-div{
  margin-right: 180px;
}
.banner8 .gradient-text-2{
  margin: 24px 0 40px 0;
}

.banner9{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/b5矩形1.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner9 .left-img-bg{
  width: 164px;
  height: 250px;
  position: absolute;
  left: -164px;
}
.banner9 .left-img{
  width: 520px;
  height: 480px;
}
.banner9 .right-div{
  margin-left: 180px;
}
.banner9 .gradient-text-2{
  margin: 24px 0 40px 0;
}

.banner10{
  width: 100vw;
  padding: 120px 0 80px 0;
}
.banner10 .content-2{
  margin: 30px 0 40px 0;
}
.banner10 .card-item-box{
  background-size: 100% 100%;
  width: 380px;
  height: 200px;
  border-radius: 20px;
  color: #FFFFFF;
  padding: 40px 44px 0 30px;
}
.banner10 .card-item-box1{
  background-image: url('../assets/module_6_back_1@2x.png');
}
.banner10 .card-item-box2{
  background-image: url('../assets/module_6_back_2@2x.png');
  margin: 0 30px;
}
.banner10 .card-item-box3{
  background-image: url('../assets/module_6_back_3@2x.png');
}
.banner10 .card-item-box .icon{
  width: 38px;
  margin-right: 20px;
}
.banner10 .card-item-box .title{
  color: #FFFFFF;
}
.banner10 .card-item-box .content-4{
  color: #FFFFFF;
  margin-top: 25px;
}

.banner11{
  width: 100vw;
  height: 680px;
  background-image: url('../assets/module_3_back@2x.png');
  background-size: 100% 100%;
  padding: 80px 0 80px 0;
}
.banner11 .img-box{
  width: 180px;
  height: 80px;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.12);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner11 .img-box img{
  height: 60px;
}
.banner11 .img-box{
  margin-bottom: 24px;
}
.banner11 .img-box:not(:last-child){
  margin-right: 24px ;
}
.banner11 .title-1{
  margin-bottom: 49px;
}

.banner12{
  width: 100vw;
  padding: 80px 0;
}
.banner12 .bg-box{
  width: 1200px;
  height: 554px;
  margin-top: 48px;
  background: linear-gradient( 48deg, #DFE9FF 0%, #EEF5FE 51%, #FEFEFF 100%);
  border-radius: 48px;
  padding: 105px;
}
.banner12 .title-2{
  position: relative;
  z-index: 1;
}
.banner12 .content-2{
  margin-bottom: 36px;
}

.banner12 .title-2::after{
  content: "";
  width: 36px;
  height: 36px;
  background: #C6CAF8;
  position: absolute;
  left: -15px;
  top: -5px;
  border-radius: 100%;
  z-index: -1;
}
.banner12 .btn{
  width: 302px;
  height: 56px;
  border-radius: 40px;
  padding: 0 40px;
  margin:0 24px 20px 0;
  font-size: 16px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.banner12 .btn .right-box{
  width: 32px;
  height: 32px;
  position: absolute;
  right: 40px;
  font-weight: 400;
  font-size: 16px;
}
.banner12 .btn .right-box img{
  width: 32px;
  height: 32px;
}
.banner12 .btn:hover{
}
.banner12 .message-box{
  display: none;
  width: 160px;
  height: 160px;
  padding: 5px;
  border-radius:15px;
  background: #FFFFFF;
  z-index: 9999;
  top: -175px;
  left: -55px;
  position: absolute;
}
.banner12 .message-box::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
  top: 160px;
  left: 60px;
  border-radius: 5px;
}
.banner12 .btn:hover .message-box{
  display: block;
}
.banner12 .btn:hover .message-box .qrcode{
  width: 100%;
  height: 100%;
}
.banner12 .btn .icon{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.banner12 .macos-btn{
  background: #7E88A3;
}
.banner12 .black-btn{
  background: #333333;
}
.banner12 .purple-btn{
  background: #4A38C8;
}
.banner12 .green-btn{
  background: #67C838;
}
.banner12 .blue-btn{
  background: #2A93FD;
}
.banner12 .red-btn{
  background: #FE6C6C;
}

.banner13{
  width: 100vw;
  height: 362px;
  background-image: url('../assets/module_3_back@2x.png');
  background-size: 100% 100%;
  padding: 80px 0;
}
.banner13 .content-2{
  margin: 32px 0 36px 0;
}