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

.banner-bg::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 100%; /* 控制背景图+渐变覆盖的高度，超过这里就是纯白底 */
	background:
		/* 顶部背景图 */
		url("/buffhub/svg/page-bg.svg") 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;}	
	
}

/** 新版Banner */

/*!*banner cover*!*/
/*#banner-cover{position:relative;overflow:hidden;padding-top: 0;}*/
/*#banner-cover>.inner{width:100%;max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing);padding-top:0;}*/

/*!* banner_show *!*/
/*#banner-slider{position:relative;padding-top:64px;overflow:hidden;touch-action:pan-y;border-radius:1em;transform:translate3d(0,0,0);}*/
/*#banner-slider .list{display:flex;}*/

/*#banner-slider .prev{*/
/*	display:flex;*/
/*	justify-content: flex-end;*/
/*}*/
/*#banner-slider .next .slide-container{*/
/*	width: 12%;*/
/*	border-radius: 1em;*/
/*	height: 100%;*/
/*	overflow: hidden;*/
/*}*/
/*#banner-slider .prev .slide-container{*/
/*	width: 12%;*/
/*	border-radius: 1em;*/
/*	height: 100%;*/
/*	overflow: hidden;*/
/*}*/
/*#banner-slider .prev .slide-container .img{*/
/*	transform: translateX(-88%);*/
/*}*/

/*#banner-slider .slide{flex:none;width:100%;max-width:950px;transition:filter 1000ms,opacity 1000ms;padding-inline:calc(var(--spacing) / 2);}*/
/*#banner-slider .slide .img{display:block;height:100%;max-width:950px;overflow:hidden;background-color:var(--body-background-color,#fff);border-radius:1em;aspect-ratio:950/342;}*/
/*#banner-slider .slide img{display:block;width:100%;height:100%;object-fit:cover;}*/
/*#banner-slider .slide:not(.active){opacity:.25;filter:grayscale(1);pointer-events:none;}*/

/*!** 中间放大效果 移植*!*/
/*#banner-slider .side-character {position: absolute; width: 100%;height: 100%;left: 0;bottom: 0; opacity: 0;z-index: 99999;}*/
/*#banner-slider .slide.active .side-character{*/
/*	opacity: 1; !* 初始隐藏 *!*/
/*	animation: fadeIn 0.1s ease-in forwards; !* 动画名称、时长、速度、保持最后状态 *!*/
/*	animation-delay: 0.01s; !* 延迟 1 秒显示 *!*/
/*	transition: transform 0.5s ease;*/
/*}*/
/*@keyframes fadeIn {*/
/*	to {*/
/*		opacity: 1; !* 最终显示 *!*/
/*	}*/
/*}*/
/*!*#banner-slider .slide.active:hover picture img{*!*/
/*!*	transform: scale(1.05);*!*/
/*!*	transition: all 0.5s ease-out;*!*/
/*!*	transform-origin: center center;*!*/
/*!*}*!*/
/*#banner-slider .slide .side-character img{*/
/*	transform-origin: bottom center;transition: all .5s ease;transform: scale(1.05); animation: fadeIn 0.1s ease-in forwards;*/
/*}*/
/*#banner-slider .slide.active:hover .side-character img{*/
/*	transform: scale(1.1);*/
/*	transition: all 0.1s ease-out;*/
/*	transform-origin: bottom center;*/
/*}*/

/*#banner-slider .navigation{position:absolute;inset:0;z-index:1;display:flex;gap:2em;pointer-events:none;}*/
/*#banner-slider .navigation::after{content:'';display:block;flex:none;width:100%;max-width:1000px;}*/
/*#banner-slider .nav{flex:auto;pointer-events:initial;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;padding-top: 64px;}*/
/*#banner-slider .nav::before{content:attr(icon);display:block;font-size:3em;width:1em;height:1em;line-height:1;overflow:hidden;opacity:0;transition:opacity 300ms;color:#fff;}*/
/*#banner-slider .nav:hover::before{opacity:1;}*/
/*#banner-slider .nav.prev{order:-1;margin-left: 10%;}*/
/*#banner-slider .nav.next{order:1;margin-right: 10%;}*/

/*#banner-slider .pagination{margin-bottom: 25px;display:flex;align-items:end;justify-content:center;gap:.5em;position:absolute;inset-inline:0;inset-block-end:1.5em;z-index:1;height:0;margin-inline:auto;width:calc(100% - 6em);max-width:20em;box-sizing:border-box;}*/
/*#banner-slider .bullet{flex:1;display:block;height:.5em;min-width:1em;border-radius:1em;background:rgba(255 255 255/25%);backdrop-filter:blur(1em);cursor:pointer;transition:flex 300ms,color 300ms;}*/
/*#banner-slider .bullet.active{flex:3;background: rgb(255 69 0);}*/


/*#banner-slider-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;}*/
/*#banner-slider-bg::after{content:'';display:block;position:absolute;inset:0;z-index:0;width:min(1920px,100%);margin-inline:auto;background:url('../images/art/page_bg-b92fada734.svg') no-repeat top center/cover;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));}*/
/*#banner-slider-bg .list{width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));mask-image:linear-gradient(180deg,rgba(0 0 0 / 75%),rgba(0 0 0 / 0));}*/
/*#banner-slider-bg .bg{position:absolute;inset:0;z-index:1;background-color:var(--background-color);background-image:linear-gradient(135deg,hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-size:cover;transition:opacity 1000ms;}*/
/*#banner-slider-bg .bg:not(.show){z-index:0;opacity:0;transition-delay:1000ms;}*/
/*@media only screen and (max-width:1000px){*/
/*	#banner-slider .navigation{display:none;}*/
/*}*/
/*@media only screen and (max-width:480px){*/
/*	#banner-slider{margin-inline:calc(var(--spacing) * -1 + 1em);}*/
/*	#banner-slider .slide .img{aspect-ratio:3/1.5;}*/
/*	#banner-slider .pagination{display:none;}*/
/*	#banner-slider .bullet{flex:none;min-width:unset;width:5px;}*/
/*	#banner-slider .bullet.active{width:2em;}*/
/*}*/

/* 还原新版banner */

/*home cover*/
#banner-cover{position:relative;overflow:hidden;}
#banner-cover>.inner{width:100%;max-width:var(--MaxContentWidth);margin-inline:auto;padding:var(--spacing) var(--spacing) 0 var(--spacing);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing);}

/* slide_show */
#banner-slider{position:relative;overflow:hidden;touch-action:pan-y;border-radius:1em;transform:translate3d(0,0,0)}
#banner-slider .list{display:flex;}

#banner-slider .slide{flex:none;width:100%;max-width:1000px;transition:filter 1000ms,opacity 1000ms;padding-inline:calc(var(--spacing) / 2);}
#banner-slider .slide .img{display:block;width:100%;max-width:1000px;overflow:hidden;background-color:var(--body-background-color,#fff);border-radius:1em;aspect-ratio:1000/320;}
#banner-slider .slide img{display:block;width:100%;height:100%;object-fit:cover;}
#banner-slider .slide:not(.active){opacity:.5;filter:grayscale(1);pointer-events:none;}

#banner-slider .navigation{position:absolute;inset:0;z-index:1;display:flex;gap:2em;pointer-events:none;}
#banner-slider .navigation::after{content:'';display:block;flex:none;width:100%;max-width:1000px;}
#banner-slider .nav{flex:auto;pointer-events:initial;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;}
#banner-slider .nav::before{content:attr(icon);display:block;font-size:3em;width:1em;height:1em;line-height:1;overflow:hidden;opacity:0;transition:opacity 300ms;color:#fff;}
#banner-slider .nav:hover::before{opacity:1;}
#banner-slider .nav.prev{order:-1}
#banner-slider .nav.next{order:1;}

#banner-slider .pagination{display:flex;align-items:end;justify-content:center;gap:.5em;position:absolute;inset-inline:0;inset-block-end:1.5em;z-index:1;height:0;margin-inline:auto;width:calc(100% - 6em);max-width:20em;box-sizing:border-box;}
#banner-slider .bullet{flex:1;display:block;height:.5em;min-width:1em;border-radius:1em;background:rgba(255 255 255/25%);backdrop-filter:blur(1em);cursor:pointer;transition:flex 300ms,color 300ms;}
#banner-slider .bullet.active{flex:3;background: rgb(255 69 0);}


#banner-slider-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;border-bottom: 2px solid #eee;}
#banner-slider-bg::after{content:'';display:block;position:absolute;inset:0;z-index:0;width:min(1920px,100%);margin-inline:auto;background:url('../svg/page-bg.svg') no-repeat top center;opacity: .1;-webkit-mask-image:linear-gradient(180deg, rgb(55, 60, 115) 0%, rgba(255, 255, 255, 0.1) 100%);mask-image:linear-gradient(180deg, rgb(55, 60, 115) 0%, rgba(255, 255, 255, 0.1) 100%);}
#banner-slider-bg .list{width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg, rgb(55, 60, 115) 0%, rgba(255, 255, 255, 0.1) 100%);mask-image:linear-gradient(180deg, rgb(55, 60, 115) 0%, rgba(255, 255, 255, 0.1) 100%);opacity: .5;}
#banner-slider-bg .bg{position:absolute;inset:0;z-index:1;background-color:linear-gradient(180deg, rgba(12, 16, 60, 0.3) 0%, rgba(255, 255, 255, 0) 50%);background-image:linear-gradient(135deg,hsl(var(--offset-h1) var(--offset-s1) var(--offset-l1)),hsl(var(--offset-h2) var(--offset-s2) var(--offset-l2)));background-size:cover;transition:opacity 1000ms;}
#banner-slider-bg .bg:not(.show){z-index:0;opacity:0;transition-delay:1000ms;}
@media only screen and (max-width:950px){
	#banner-slider .navigation{display:none;}
	#banner-cover{padding-top: 30px;}
}
@media only screen and (max-width:480px){
	#banner-cover>.inner{padding:var(--spacing) 3%;}
	#banner-slider{margin-inline:calc(var(--spacing) * -1 + 1em);}
	#banner-slider .slide{padding-inline:calc(var(--spacing) / 2);}
	/* #banner-slider .slide .img{aspect-ratio:3/1.8;} */
	#banner-slider .pagination{display:none;}
	#banner-slider .bullet{flex:none;min-width:unset;width:5px;}
	#banner-slider .bullet.active{width:2em;}
}