/* Banner响应式设计 */
.banner {
    width: 100%;
    height: 100vh; /* 满屏高度 */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例并填充容器，超出部分会被剪裁 */
    object-position: center; /* 居中剪裁 */
}

/* 1200px以上：满屏显示并剪裁 */
@media screen and (min-width: 1201px) {
    .banner {
        height: 100vh;
    }
    
    .banner img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
}

/* 1200px到768px：居中裁剪到1200px后等比例缩放 */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    .banner {
        max-width: 1200px;
        margin: 0 auto;
        height: auto;
        min-height: 50vh; /* 最小高度保证视觉效果 */
    }
    
    .banner img {
        width: 100%;
        height: auto;
        max-width: 1200px;
        object-fit: contain; /* 等比例缩放，完整显示 */
    }
}

/* 768px以下：显示移动端banner并等比例缩放 */
@media screen and (max-width: 768px) {
    .banner {
        height: auto;
        padding: 0;
    }
    
    .banner img {
        width: 100%;
        height: auto;
        object-fit: contain; /* 等比例缩放 */
        /* 如果有移动端专用图片，可以这样切换： */
        /* content: url('./img/banner_sp.png'); */
    }
}

/* 针对超宽屏幕的优化 */
@media screen and (min-width: 1920px) {
    .banner img {
        object-fit: cover;
        object-position: center;
    }
}

/* 针对超小屏幕的优化 */
@media screen and (max-width: 480px) {
    .banner {
        min-height: 30vh;
    }
    
    .banner img {
        width: 100%;
        height: auto;
    }
}