/* 活动中心顶部轮播样式
 * 2026-07-23 自建：替代已失效的第三方 OSS 样式（zbgxing.oss.../swiper.activity.min.css 返回 404）
 * 设计稿还原：中间幻灯片 1200x560 居中全显；两侧幻灯片 1200x520 垂直居中、半透明露出；幻灯片间距 20px
 */
.pc-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.pc-banner .swiper-container {
    width: 100%;
    height: 560px;
    margin: 0 auto;
}
/* Swiper3 wrapper 为 flex 布局（垂直居中在 .swiper-slide 上实现，见下） */
.pc-banner .swiper-wrapper {
    align-items: stretch;
}
.pc-banner .swiper-slide {
    width: 1200px;
    /* Swiper3 幻灯片高度恒为容器 100%，wrapper 的 align-items 无效；
       改为幻灯片自身 flex 居中，使 520px 图片在 560px 容器内垂直居中 */
    display: flex;
    align-items: center;
    opacity: .55;
    transition: opacity .3s ease;
}
.pc-banner .swiper-slide-active {
    opacity: 1;
}
.pc-banner .swiper-slide a {
    display: block;
    width: 100%;
}
.pc-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: height .3s ease;
}
.pc-banner .swiper-slide-active img {
    height: 560px;
}
/* 左右切换按钮：深色圆形小按钮，位于两侧露出的幻灯片区域（对齐设计稿 2026-07-23）
 * 视口 1600px 时主幻灯片 1200px 居中，两侧各露出 200px，按钮居中于露出区 */
.pc-banner .swiper-button-prev,
.pc-banner .swiper-button-next {
    width: 52px;
    height: 52px;
    margin-top: -26px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    opacity: .9;
    transition: opacity .2s ease;
}
.pc-banner .swiper-button-prev:hover,
.pc-banner .swiper-button-next:hover {
    opacity: 1;
}
.pc-banner .swiper-button-prev {
    left: calc(50% - 736px);
    background-image: url("/static/diy/images/ic_arrow_left_white@2x.png");
}
.pc-banner .swiper-button-next {
    right: calc(50% - 736px);
    background-image: url("/static/diy/images/ic_arrow_right_white@2x.png");
}
/* 分页器圆点提高可见性 */
.pc-banner .swiper-pagination-bullet {
    background: #fff;
    opacity: .5;
}
.pc-banner .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}
/* 窄屏适配：露出区域过窄时按钮移到视口边缘；幻灯片不满 1200px 时改为整宽 */
@media (max-width: 1480px) {
    .pc-banner .swiper-button-prev { left: 16px; }
    .pc-banner .swiper-button-next { right: 16px; }
}
@media (max-width: 1240px) {
    .pc-banner .swiper-slide { width: 100%; opacity: 1; }
}