/* 首页响应式适配 CSS */

/* Banner 区域 1600:500 比例适配 - 铺满屏幕 */
.banner .slick-slide {
    width: 100% !important;
    /* 默认两侧各 160px 内边距 */
    box-sizing: border-box;
    padding: 0 160px !important;
}

.banner .slick-slide .con {
    /* 使用 padding-bottom 实现固定宽高比 */
    height: auto !important;
    padding-bottom: 31.25% !important; /* 500/1600 = 31.25% */
}

/* 大屏幕优化 - 确保铺满 (1920px 以上) */
@media screen and (min-width: 1920px) {
    .banner .slick-slide .con {
        min-height: 600px; /* 500 / (1920/1600) ≈ 417px，适当增加最小高度 */
    }
    .banner .slick-slide {
        padding: 0 160px !important;
    }
}

/* 标准大屏幕适配 (1400px-1920px) */
@media screen and (min-width: 1400px) and (max-width: 1920px) {
    .banner .slick-slide .con {
        padding-bottom: 31.25% !important;
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 160px !important;
    }
}

/* 中等屏幕适配 (1200px-1399px) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .banner .slick-slide .con {
        padding-bottom: 31.25% !important;
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 120px !important;
    }
}

/* 小屏幕适配 (992px-1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .banner .slick-slide .con {
        padding-bottom: 35% !important; /* 稍微调整比例 */
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 80px !important;
    }
}

/* 平板横屏适配 (768px-991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .banner .slick-slide .con {
        padding-bottom: 40% !important;
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 60px !important;
    }
}

/* 平板竖屏适配 (576px-767px) */
@media screen and (min-width: 576px) and (max-width: 767px) {
    .banner .slick-slide .con {
        padding-bottom: 50% !important;
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 40px !important;
    }
}

/* 手机竖屏适配 (575px 以下) */
@media screen and (max-width: 575px) {
    .banner .slick-slide .con {
        padding-bottom: 60% !important;
        background-size: cover !important;
    }
    .banner .slick-slide {
        padding: 0 20px !important;
    }
}

/* 超宽屏幕适配 (21:9 等) */
@media screen and (min-aspect-ratio: 21/9) {
    .banner .slick-slide .con {
        padding-bottom: 31.25% !important;
        background-size: cover !important;
    }
}

/* 窄屏幕适配 (4:3 等) */
@media screen and (max-aspect-ratio: 4/3) {
    .banner .slick-slide .con {
        padding-bottom: 50% !important;
        background-size: cover !important;
    }
}

/* 浏览器缩放 150% 适配 */
@media screen and (min-resolution: 144dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .banner .slick-slide .con {
        /* 高 DPI 屏幕优化 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 页面缩放支持 */
html {
    zoom: 1; /* 允许浏览器默认缩放 */
}

body {
    transform-origin: top center;
}

/* 确保 banner 在不同缩放下都能正常显示 */
@media screen and (zoom: 1.5), screen and (-moz-transform: scale(1.5)) {
    .banner .slick-slide .con {
        background-size: cover !important;
    }
}

/* 首页主要模块（资讯热点、品牌项目、合作机构）响应式间距 */
.news-update .wp,
.row-a2 .wp,
.row-a3 .wp {
    padding: 0 160px !important;
}

/* 品牌项目 row-a2 直接设置左右边距（因为.wp 被注释了） */
.row-a2 {
    padding: 52px 160px 0px !important;
}

/* 浏览器缩放 150% 适配 - 品牌项目 */
@media screen and (zoom: 1.5), screen and (-moz-transform: scale(1.5)) {
    .m-slider-brand {
        padding: 0 160px 0 14px;
    }
    .m-slider-brand .slide-item {
        flex: 0 0 16.98vw;
    }
    .m-slider-brand .slide-item:hover,
    .m-slider-brand .slide-item.active {
        flex: 0 0 28.02vw;
    }
}

/* 浏览器缩放 200% 适配 - 品牌项目 */
@media screen and (zoom: 2), screen and (-moz-transform: scale(2)) {
    .m-slider-brand {
        padding: 0 160px 0 14px;
    }
    .m-slider-brand .slide-item {
        flex: 0 0 16.98vw;
    }
    .m-slider-brand .slide-item:hover,
    .m-slider-brand .slide-item.active {
        flex: 0 0 28.02vw;
    }
}

/* 高 DPI 屏幕适配 (Retina 等) - 品牌项目 */
@media screen and (min-resolution: 144dpi),
       screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .m-slider-brand {
        padding: 0 160px 0 14px;
    }
    .m-slider-brand .slide-item {
        flex: 0 0 16.98vw;
    }
    .m-slider-brand .slide-item:hover,
    .m-slider-brand .slide-item.active {
        flex: 0 0 28.02vw;
    }
}