/* 全屏轮播容器 */
        .banner-slider {
            width: 100%;
            height: 284px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        /* ========== 1. 底层：全屏虚化背景层 ========== */
        .slider-bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .slider-bg-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .slider-bg-item.active {
            opacity: 1;
        }

        .slider-bg-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.08);
            filter: blur(20px);
            -webkit-filter: blur(20px);
        }

        /* ========== 2. 中层：1200px居中清晰主图层 ========== */
        .slider-main-layer {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 主图容器：关键修改 - 加上 position: relative 作为箭头的定位参照 */
        .slider-main-wrapper {
            width: 100%;
            max-width: 1200px;
            height: 100%;
            position: relative; /* 核心：让箭头相对于这个1200px的容器定位 */
            overflow: hidden;
        }

        .slider-list {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            display: flex;
        }

        .slider-item {
            width: 1200px;
            height: 100%;
            flex-shrink: 0;
        }

        .slider-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ========== 3. 控制层：箭头（修改后）+ 长方形指示器 ========== */
        /* 左右切换箭头 - 核心修改：位置调整到主图两侧 */
        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 60px;
            background: rgba(0, 0, 0, 0.2); /* 稍微加一点背景，更易点击 */
            color: rgba(255,255,255,0.8);
            border: none;
            font-size: 36px;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .slider-btn:hover {
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        /* 左箭头：紧贴主图左侧边缘 */
        .prev-btn {
            left: 0; /* 相对于1200px容器的最左边 */
        }

        /* 右箭头：紧贴主图右侧边缘 */
        .next-btn {
            right: 0; /* 相对于1200px容器的最右边 */
        }

        /* 底部长方形指示器 */
        .slider-dots {
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 10;
        }

        .slider-dots .dot {
            width: 24px;
            height: 4px;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .slider-dots .dot.active {
            background: #fff;
            width: 36px;
        }