/* ============================================================
   #banner · 板块基础样式（移动基线 + 渐进升级）
   原 index.css / index@N.css 中的本板块代码迁移至此。
   加载顺序：本文件 → index-remaining-variants.css → banner-variants.css
   ============================================================ */

#banner {
    text-align: center;
    background-image: url("/assets/pages/index/img/banner_bg.webp");
    background-image: -webkit-image-set(
            url("/assets/pages/index/img/banner_bg.webp") 1x,
            url("/assets/pages/index/img/banner_bg@2x.webp") 2x
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#banner .banner_info {
    padding-top: 24px;
}

#banner .banner_info h1 {
    z-index: 1;
    position: relative;
}

#banner .banner_info .banner_img {
    margin-top: -10%;
    z-index: 0;
    position: relative;
}

#banner .banner_info .banner_img img {
    width: 100%;
}

#banner > * {
    box-sizing: border-box;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

@media (max-width: 768px) {
    #banner {
        min-height: auto;
        padding-top: var(--header-height, 56px);
        overflow: hidden;
    }

    #banner .banner_info {
        width: 100%;
        min-height: 0;
        padding-bottom: 10px;
    }

    #banner .banner_info h1 img {
        width: min(86vw, 420px);
        height: auto;
    }

    #banner .banner_img {
        width: 100%;
        margin: 14px auto 0;
    }

    #banner .banner_img img {
        height: auto;
        object-fit: contain;
    }

}

@media (min-width: 769px) {
    #banner .banner_info {
        padding-top: 7%;
    }

}

@media (min-width: 1025px) {
    #banner .banner_info {
        padding-top: 5%;
    }

}