.m102-banner{position:relative;}

.m102-banner .swiper-slide{display:flex;position:relative;}
.m102-banner .swiper-slide::after{content:"";background:#150E28;position:absolute;right:0;top:0;bottom:0;width:100%;height:100%;transition:all 1s ease-in-out;}
.m102-banner .swiper-slide .pic{width:70%;position:relative;}
.m102-banner .swiper-slide .pic picture img{width:100%;}

.m102-banner .swiper-slide .pic .t{position:absolute;left:0;right:0;top:0;bottom:0;padding:0 10%;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;}
.m102-banner .swiper-slide .pic .t h4{font-size:clamp(24px, 3.15vw, 60px);color:#fff;line-height:1.2;font-weight:700;}
.m102-banner .swiper-slide .pic .t .more{margin-top:40px;padding:0 50px;height:45px;line-height:45px;font-size:24px;color:#fff;background:#E2352F;display:inline-block;}
.m102-banner .swiper-slide .pic .t .more:hover{background:rgba(226,53,47,0.7);}

.m102-banner .swiper-slide .txt{width:30%;background:#150E28;padding:5% 5% 0;position:relative;z-index:30;}

.m102-banner .swiper-slide .txt p{font-size:16px;font-weight:500;color:#fff;line-height:1.6;}
.m102-banner .swiper-slide .txt dl{font-size:16px;color:#fff;}
.m102-banner .swiper-slide .txt dl dd{background:url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/355136/1301/7d63addc776a0f1ab748505d2434e0d2/dot.png) no-repeat left center;padding:0 0 0 20px;}
.m102-banner .swiper-slide .txt dl dd+dd{margin-top:10px;}

.m102-banner .swiper-slide.swiper-slide-active::after{width:30%;}


.m102-banner .thumbnail-box{position:absolute;right:0;width:30%;padding:0 5%;bottom:50px;z-index:20;}
.m102-banner .thumbnails{display:flex;justify-content:center;gap:10px;}
.m102-banner .thumbnail{flex:1;overflow:hidden;cursor:pointer;position:relative;opacity:0.5;transition:all 0.3s ease;box-shadow:0 4px 8px rgba(0,0,0,0.2);}
.m102-banner .thumbnail:hover {opacity:1;}
.m102-banner .thumbnail.active {opacity:1;box-shadow:0 0 8px rgba(255,255,255,0.4);}
.m102-banner .thumbnail img {width:100%;height:100%;object-fit:cover;}


.m102-banner .page{position:absolute;left:0;width:70%;bottom:40px;z-index:40;}
.m102-banner .page .custom-fraction{padding:0 10%;font-size:16px;color:#fff;}
.m102-banner .page .custom-fraction span{opacity:0.7;}


.m102-banner .swiper-button-prev,.m102-banner .swiper-button-next{width:40px;height:40px;color:#fff;border-radius:0;margin-top:-20px;text-align:center;opacity:0;transition:all 0.5s ease;}
.m102-banner .swiper-button-prev::after,.m102-banner .swiper-button-next::after{display:none;}
.m102-banner .swiper-button-prev,.m102-banner .swiper-container-rtl .swiper-button-next{left:10px;right:auto;}
.m102-banner .swiper-button-next,.m102-banner .swiper-container-rtl .swiper-button-prev{right:10px;left:auto;}

.m102-banner .swiper-button-prev i,.m102-banner .swiper-button-next i{color:inherit;font-size:26px;line-height:40px;}
.m102-banner .swiper-button-prev:hover,.m102-banner .swiper-button-next:hover{color:#E2352F;}

.m102-banner:hover .swiper-button-prev,.m102-banner:hover .swiper-button-next{opacity:1;}

@media screen and (max-width:1441px) {
.m102-banner .swiper-slide .pic .t .more{margin-top:35px;padding:0 45px;height:42px;line-height:42px;font-size:22px;}

}

@media screen and (max-width:1367px) {
.m102-banner .swiper-slide .pic .t .more{margin-top:30px;padding:0 40px;height:39px;line-height:39px;font-size:20px;}
}

@media screen and (max-width:1281px){
.m102-banner .swiper-slide .pic .t .more{margin-top:25px;padding:0 35px;height:36px;line-height:36px;font-size:18px;}
.m102-banner .swiper-slide .txt{padding:30px 30px 0;}
.m102-banner .swiper-slide .txt p{font-size:15px;line-height:1.5;}
.m102-banner .swiper-slide .txt dl{font-size:15px;}
.m102-banner .thumbnail-box{width:30%;padding:0 30px;bottom:30px;}
}

@media screen and (max-width:992px){
.m102-banner .swiper-slide::after{display:none}
.m102-banner .swiper-slide .pic{width:100%;}
.m102-banner .swiper-slide .txt{display:none}
.m102-banner .swiper-slide .pic .t{padding:0 8%}
.m102-banner .swiper-slide .pic .t .more{padding:0 30px;height:33px;line-height:33px;font-size:16px;}
.m102-banner .thumbnail{border:2px solid #fff;}
.m102-banner .thumbnail.active{border-color:#E2352F}

.m102-banner .page{width:100%;bottom:30px;}
.m102-banner .page .custom-fraction{padding:0 8%;font-size:15px;}

}

@media screen and (max-width:768px){
.m102-banner .swiper-slide .pic .t .more{padding:0 25px;height:30px;line-height:30px;font-size:15px;}
}


@media screen and (max-width:480px){
.m102-banner .swiper-slide .pic .t{padding:0 5%}
.m102-banner .swiper-slide .pic .t .more{padding:0 15px;height:27px;line-height:27px;font-size:14px;}
.m102-banner .page{bottom:20px;}
.m102-banner .page .custom-fraction{padding:0 5%;font-size:14px;}
.m102-banner .thumbnail-box{bottom:20px;}
}