/* banner */
.banner{width: 100%;}
.banner .wrap{display: block;width: 100%;height: 0;padding-bottom: 100vh;}
.banner .wrap em{transition: all 0.5s linear;-webkit-transform: scale(1.1);transform: scale(1.1);}
.banner .wrap .text{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 2;}
.banner .wrap .text .title{color: #fff;line-height: 1.1;}
.banner .swiper-slide-active a em,.banner .swiper-slide-duplicate-active a em{transition: 0.5s linear; transform: scale(1,1);opacity: 1;}
.banner::after{content: "";width: 100%;height: 9.27rem;position: absolute;left: 0;bottom: -3.47rem;background: linear-gradient(180deg, rgba(0, 14, 24, 0) 0%, #000E18 77%);z-index: 2;}
.banner .bottom{position: absolute;left: 0;bottom: 0;width: 100%;z-index: 3;}
.banner .control{margin-bottom: 1.33rem;}
.banner .swiper-pagination{position: relative;left: 0;transform: translateX(0);}
.banner .swiper-pagination .swiper-pagination-bullet{width: 24px;height: 24px;margin: 0 0.4rem 0 0;background: none;opacity: 1;overflow: hidden;position: relative;}
.banner .swiper-pagination .swiper-pagination-bullet::before{content: "";width: 8px;height: 8px;background: #fff;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.banner .swiper-pagination .swiper-pagination-bullet svg{z-index: -1;position: absolute;left: 0;right: 0;top: 0;bottom: 0;fill: transparent;stroke-width: 1px;stroke: #fff;stroke-dasharray: 70;stroke-dashoffset: -70;}
.banner .swiper-pagination .swiper-pagination-bullet-active svg{animation: svgAni 2s linear forwards;}
@keyframes svgAni{to{stroke-dashoffset: 0;}}
.banner .btn{margin-left: 1.33rem;cursor: pointer;height: 0.83rem;}
.banner .btn:first-child{margin-left: 0;}
.banner .logos{border-top: 1px solid rgba(255, 255, 255, 0.2);}
.banner .logos li{height: 3.67rem;}



/* isect1 */
.isect1{height: 130vh;}
.isect1 .box{position: sticky;top: 0;height: 100vh;height: 100vh;
    --clip1: 12.5%;
    --clip2: 10%;
    --radius: 60px;
    clip-path: inset(var(--clip1) var(--clip2) round var(--radius));}
.isect1 .container .wrap{display: block;height: 0;padding-bottom: 100vh;}
.isect1 .container .wrap .title{width: 90%;max-width: 42.4rem;position: absolute;left: 50%;top: 40%;transform: translateX(-50%);z-index: 3;color: #fff;line-height: 1.2;font-family: "DDinProMed";text-align: center;font-weight: normal;}
.isect1 .btnWrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 3;height: 0;}
.isect1 .state{position: absolute;left: 50%;bottom: 3.43rem;transform: translateX(-50%);z-index: 3;font-family: "Helvetica";color: rgba(255, 255, 255, 0.4);}
.isect1 .state ul{color: #fff;width: 1.07rem;height: 1.33rem;position: relative;overflow: hidden;}
.isect1 .state ul li{position: absolute;left: 0;top: 0;width: 100%;text-align: center;}
.isect1 .state em{margin: 0 0.25em;}
.isect1 .thumbnail{width: 31rem;position: absolute;right: 0;bottom: 2.67rem;z-index: 4;}
.isect1 .thumbnail .swiper-slide{width: 6.4rem;height: 2.87rem;position: relative;position: relative;cursor: pointer;}
.isect1 .thumbnail .swiper-slide::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;box-sizing: border-box;border: 4px solid #fff;opacity: 0;}
.isect1 .thumbnail .swiper-slide.active::after{opacity: 1;}

/* logos */
.wapLogos{padding: 1.6rem 0;display: none;}

/* isect2 */
.isect2{padding: 3.33rem 0 23rem;background: url(../images/isect2_bg.png) no-repeat center top;background-size: cover;padding: 3.33rem 0 39rem;}
.isect2 .top{margin-bottom: 2.67rem;justify-content: space-between;}
.isect2 .top .left{width: 37.75%;}
.isect2 .top .left .title{margin-top: 0.4rem;color: #222222;line-height: 1.3;font-family: "DDinProMed";font-weight: normal;}
.isect2 .top .left .title span{color: #ccc;}
.isect2 .top .right{width: 50%;padding-top: 3.07rem;}
.isect2 .top .right .desc{margin-bottom: 2rem;color: #666666;line-height: 0.93rem;}
.isect2 .dataList{justify-content: space-between;text-align: center;}
.isect2 .dataList .desc{line-height: 1.07rem;}
.isect2 .dataList .data{color: var(--primary-color);display: flex;justify-content: center;font-family: "DDinProMed";margin-bottom: 0.33rem;}



@media screen and (max-width: 2000px){
.isect2{padding: 3.33rem 0 23rem;}
}
@media screen and (max-width: 1480px){
.banner .logos li img{max-height: 1.8rem;}


}

@media screen and (max-width: 1300px){
}


@media screen and (max-width: 1024px){
.banner .wrap{padding-bottom: 50%;}
/* .banner .logos{display: none;} */

/* .wapLogos{display: block;} */

}

@media screen and (max-width: 760px){
.banner .control{margin-bottom: 0.3rem;}
.banner .btn{height: 0.4rem;}
.banner .swiper-pagination .swiper-pagination-bullet{transform-origin: left center;transform: scale(0.8);margin: 0;display: none;}
.banner .logos li{height: 1.5rem;}
.banner .logos li img{max-height: none;height: 0.5rem;}

.isect1,
.isect1 .box{height: auto;}
.isect1 .box{position: relative;
    --clip1: 0;
    --clip2: 0;
    --radius: 0;
    clip-path: inset(var(--clip1) var(--clip2) round var(--radius));}
.isect1 .container .wrap{padding-bottom: 50%;}
.isect1 .thumbnail{width: 90%;right: auto;left: 50%;transform: translateX(-50%);bottom: 5%;}
.isect1 .container .wrap .title{top:35%;font-size: 0.8rem;line-height: 1.05;}
.isect1 .state{display: none;}
.isect1 .thumbnail .swiper-slide{height: auto;width: 3rem;}
.isect1 .thumbnail .swiper-slide em{display: block;position: relative;height: 0;padding-bottom: 44.8%;}
.isect1 .thumbnail .swiper-slide::after{border-width: 2px;}
.isect1 .btnWrap{top: 40%;display: none;}


.isect2{padding: 1.6rem 0 7rem;background-image: url(../images/isect2_bg1.png);background-size: 100% auto;background-position: center bottom;}
.isect2 .top{flex-wrap: wrap;margin-bottom: 1rem;}
.isect2 .top .left,
.isect2 .top .right{width: 100%;}
.isect2 .top .right{padding-top: 1rem;}
.isect2 .top .right .desc{margin-bottom: 1rem;}
.isect2 .top .right .moreBtnStyle.readMore{display: none;}
.isect2 .dataList{flex-wrap: wrap;}
.isect2 .dataList li{width: 50%;margin-bottom: 0.6rem;}
.isect2 .dataList .data{font-size: 1rem;margin-bottom: 0.1rem;}

.wapLogos{padding: 1rem 0;}
.wapLogos ul{flex-wrap: wrap;justify-content: flex-start}
.wapLogos ul li{width: 33.33%;height: 2rem;}
.wapLogos ul li img{max-width: 80%;max-height: 40%;}

}

@media screen and (max-width: 468px){
}