@charset "utf-8";
/*banner 背景：顶部一段使用背景图+渐变，下面使用默认页面背景色 */
.banner-bg{
	position: relative;
	z-index: 0;
	background-color: #ffffff;
}

.banner-bg::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1105px; /* 控制背景图+渐变覆盖的高度，超过这里就是纯白底 */
	background:
		/* 顶部背景图 */
		url("/buffhub/images/bg1.png") no-repeat center top,
		/* 从浅紫过渡到页面背景的渐变 */
		linear-gradient(to bottom, #f3f0ff 0%, #f7f7fb 55%, #ffffff 100%);
	background-size: 100% auto, 100% 100%;
	pointer-events: none;
	z-index: -1;
}

.banner{width: 1200px;position: relative;max-width: 100%; margin: 0 auto;z-index: 1;}
.banndeleft{height:100%;background-size: 100% 100%;left: 0;top: 50%;transform: translateY(-50%);position: absolute;content: "";z-index: 100;background-size: 100% 100%;padding: 60px 0;}
.banndeleft img{width:auto;height: 100%;}
.banner-right{right: 0;top: 50%;transform: translateY(-50%);position: absolute;content: "";z-index: 100;background-size: 100% 100%; padding: 60px 0;height: 100%;}
.banner-right img{width:auto;height: 100%;}
.banner .swiper{overflow: auto; padding: 60px 0;}
.banner img{width: 100%;filter:grayscale(100%); transition: all 1s;}

.banner .banner1_bg{border-radius: 10px; overflow: hidden;}
.banner .banner1_bg img{transition: all 2s;border-radius: 15px; opacity: .5;}
.banner .banner1_character img{ transform-origin: bottom center;transition: all .5s ease;transform: scale(1.1); opacity: 0; }
.bannerbox{border-radius: 15px;  position: relative;}

.banner1_character{position: absolute; width: 100%;height: 100%;left: 0;bottom: 0;}

.banner .swiper-button-next{color: #fff;z-index: 100;right: -80px;transition: all .5s;}
.banner .swiper-button-prev{color: #fff;z-index: 100;left: -80px;transition: all .5s;}
.banner .swiper:hover .swiper-button-prev{left: 15px;}
.banner .swiper:hover .swiper-button-next{right: 15px;}
.banner .swiper-slide-active .banner1_bg img,.banner .swiper-slide-duplicate-active .banner1_bg img{box-shadow:0 0 10px rgba(0, 0, 0, .5);border-radius: 15px;}
.banner .swiper-slide-active img,.banner .swiper-slide-duplicate-active img{filter:grayscale(0%); opacity: 1;animation: fadeIn .5s 1;}
.banner .swiper {
    /* 强制导航箭头使用白色（Swiper 变量） */
    --swiper-navigation-color: #fff;
}
.banner .swiper-button-next::after,
.banner .swiper-button-prev::after {
    /* 直接指定伪元素颜色，避免被默认样式覆盖 */
    color: #fff;
}
/* 去掉模糊，只做灰度 + 透明度 */
.banner .swiper-slide .banner1_bg img {
    filter: grayscale(100%);
    opacity: 0.2;       /* 需要更淡可调成 0.2 或 0.15 */
}
/* 中间激活的那张保持全亮 */
.banner .swiper-slide-active .banner1_bg img,
.banner .swiper-slide-duplicate-active .banner1_bg img {
    filter: grayscale(0);
    opacity: 1;
}
.banner .swiper-slide-active .bannerbox:hover .banner1_character img{transform: scale(1.15);}
.banner .swiper-button-next:after,.banner .swiper-button-prev:after{font-size: 24px;font-weight: bold;}
.banner .swiper-pagination{bottom: 70px;}
.banner .swiper-pagination-bullet{opacity: 1;width: 8px;height: 8px;border-radius: 4px;background: #fff;}
.banner .swiper-pagination-bullet-active{width: 25px;background: #ff824b;}


@media (max-width: 950px){
	.banner .swiper{padding: .4rem 0 .2rem;width: 100%;}	
	.banner .swiper-button-next{display: none;}	
	.banner .swiper-button-prev{display: none;}	
    
	/* .banner1_bg{height: 2.95rem;}
	.banner1_bg img{width: 100%;height: 100%; object-fit: cover;}
	.banner1_character{height: 2.95rem;}	
	.banner1_character img{width: 100%;height: 100%; object-fit: cover;}	 */
	.banner .swiper-pagination{bottom: 12px;}	
	
}