/* ============================================================
   首页 Banner / 品牌首屏
   依据《特力康官网首页改版完整设计稿》V2.2 · S1（桌面） / m1（移动端）

   设计原则：
   - 背景图仍由后台 Banner 管理（3 张轮播，可随时换图）；
   - 深色渐变遮罩、文字、数字指标、按钮、轮播指示、布局
     全部写在本代码里，与 CMS 内容解耦，换图后自动沿用。
   - 本文件最后加载，用于覆盖 banner.css / 11_home_unify.css 的旧规则。
   ============================================================ */

.index_banner{
    --hero-deep:#0C447C;
    --hero-brand:#185FA5;
    --hero-yellow:#F2C230;
    --hero-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    /* 内容整体下移量（各断点在下方覆盖），供逐帧淡入动画复用 */
    --hero-shift:56px;
    /* 整屏自适应：桌面 = 一整个视口高度；svh 让移动端地址栏变化时版式稳定
       两行写法为渐进增强：不支持 svh 的浏览器自动回退到 vh */
    height:100vh !important;
    height:100svh !important;
    min-height:520px;                    /* 极矮视口时兜底，避免内容被压叠 */
    position:relative;
    overflow:hidden;
    background:#0B1B2B;
    font-family:var(--hero-sans);
}
.index_banner .banner_Swiper{
    height:100% !important;
}
.index_banner .banner_Swiper .swiper-wrapper,
.index_banner .banner_Swiper .swiper-slide{
    height:100%;
}
.index_banner .banner_item{
    height:100% !important;
}
.index_banner .banner_item img,
.index_banner .banner_item video,
.index_banner .banner_blank{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
/* 新建轮播页尚未上传背景图时的占位底色 */
.index_banner .banner_blank{
    background:linear-gradient(135deg,#0B1B2B 0%,#123055 100%);
}

/* ---------- 深色渐变遮罩（代码层，后台换图自动生效） ---------- */
.index_banner .banner_scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(6,18,34,.90) 0%,
        rgba(6,18,34,.72) 34%,
        rgba(6,18,34,.22) 64%,
        rgba(6,18,34,.04) 100%);
}
/* 设计稿 .s1 .lines：120px 间距的极淡竖线装饰 */
.index_banner .banner_lines{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.20;
    background-image:linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.12) 119px 120px);
    background-size:120px 100%;
    background-position:120px 0;
}

/* ---------- 文字内容层（设计稿 .s1 .inner） ----------
   3 帧文案各自一层，随背景图轮播同步淡入（JS 切换 .is-active）。 */
.index_banner .hero_inner{
    position:absolute;
    inset:0;
    z-index:2;
    padding:0 120px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    opacity:0;
    visibility:hidden;
    transform:translateY(calc(var(--hero-shift) + 16px));
    transition:opacity .5s ease, transform .5s ease, visibility .5s;
    pointer-events:none;       /* 让触摸/滑动穿透到轮播，仅按钮可点 */
}
.index_banner .hero_inner.is-active{
    opacity:1;
    visibility:visible;
    transform:translateY(var(--hero-shift));  /* 整屏后内容整体略下移，视觉重心更居中 */
}
.index_banner .hero_inner a{ pointer-events:auto; }
.index_banner .hero_inner:not(.is-active) a{ pointer-events:none; }

.index_banner .hero_eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    color:#DCEEFB;
    font-size:14px;
    font-weight:400;
    letter-spacing:.10em;
    margin-bottom:22px;
}
.index_banner .hero_eyebrow::before{
    content:"";
    width:26px;
    height:3px;
    background:var(--hero-yellow);
    display:block;
    flex:none;
}
.index_banner .hero_title{
    font-size:56px;
    line-height:1.28;
    font-weight:700;
    color:#fff;
    margin:0 0 20px;
    max-width:820px;
    letter-spacing:-.01em;
    text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.index_banner .hero_title em{
    font-style:normal;
    color:var(--hero-yellow);
    /* 全站有 em{font-size:0.18rem}，会压掉标题字号，这里强制继承 H1 */
    font-size:inherit !important;
    line-height:inherit;
    font-weight:inherit;
}
.index_banner .hero_lede{
    font-size:18px;
    line-height:1.85;
    font-weight:400;
    color:#DCE9F4;
    max-width:640px;
    margin:0 0 30px;
}
.index_banner .hero_kpis{
    display:flex;
    align-items:center;
    gap:0;
    margin-bottom:34px;
}
.index_banner .hero_kpi{
    padding:0 26px;
    border-left:1px solid rgba(255,255,255,.22);
}
.index_banner .hero_kpi:first-child{
    padding-left:0;
    border-left:none;
}
.index_banner .hero_kpi .n{
    font-size:26px;
    font-weight:700;
    color:#fff;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
}
.index_banner .hero_kpi .n small{
    font-size:13px;
    font-weight:500;
    color:#BFE0F5;
    margin-left:3px;
}
.index_banner .hero_kpi .l{
    font-size:12px;
    color:#A9C6E4;
    margin-top:2px;
}
.index_banner .hero_cta{
    display:flex;
    gap:14px;
    align-items:center;
}
.index_banner .hero_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    height:48px;
    padding:0 26px;
    box-sizing:border-box;
    border-radius:6px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.index_banner .hero_btn--p{
    background:var(--hero-brand);
    color:#fff;
    box-shadow:0 6px 18px rgba(24,95,165,.35);
}
.index_banner .hero_btn--p:hover{
    background:#0F4C88;
}
.index_banner .hero_btn--o{
    border:1.5px solid rgba(255,255,255,.62);
    color:#fff;
    background:rgba(255,255,255,.06);
}
.index_banner .hero_btn--o:hover{
    background:rgba(255,255,255,.16);
}

/* ---------- 轮播指示：01 / 03 + 进度条（从左到右填充，与自动播放同步） ---------- */
.index_banner .banner_txt{
    top:auto !important;
    right:120px !important;
    left:auto !important;
    bottom:78px !important;      /* 同步下移，与内容保持整屏比例 */
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:flex-start !important;
    gap:9px;
    z-index:3;
}
.index_banner .hero_counter{
    font-family:"SF Mono",Consolas,"Roboto Mono",monospace;
    font-size:11px;
    color:rgba(255,255,255,.75);
    margin-right:6px;
    white-space:nowrap;
}
.index_banner .banner_txt .banner_tab{
    display:flex;
    align-items:center;
    position:relative !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer;
}
.index_banner .banner_txt .banner_tab .tab_txt{
    display:none !important;
}
.index_banner .banner_txt .banner_tab .tab_icon{
    width:auto !important;
    height:auto !important;
    position:relative;
    display:flex;
    align-items:center;
}
/* 轨道：等宽，未播放部分为半透明白 */
.index_banner .banner_txt .banner_tab .tab_icon div{
    position:relative;
    width:40px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,.30) !important;
    display:block;
    overflow:hidden;
    transition:background-color .25s ease;
}
.index_banner .banner_txt .banner_tab.active .tab_icon div{
    background:rgba(255,255,255,.46) !important;
}
/* 填充条：JS 用 scaleX 逐帧推进（0 → 1），transform 不触发重排 */
.index_banner .banner_txt .banner_tab .tab_icon div i{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:block;
    border-radius:2px;
    background:var(--hero-yellow) !important;
    transform:scaleX(0);
    transform-origin:left center;
    will-change:transform;
    pointer-events:none;
}
.index_banner .banner_txt .banner_tab .tab_icon svg{
    display:none !important;
}

/* ==================== 移动端（设计稿 .m1 / 560px） ==================== */
@media screen and (max-width:1043px){
    .index_banner{
        /* 移动端顶部有 56px 的常驻头部，二者相加正好一整屏 */
        height:calc(100vh - 56px) !important;
        height:calc(100svh - 56px) !important;
        min-height:480px;
        --hero-shift:44px;
    }
    .index_banner .banner_scrim{
        background:linear-gradient(180deg,
            rgba(6,18,34,.56) 0%,
            rgba(6,18,34,.70) 45%,
            rgba(6,18,34,.88) 100%);
    }
    .index_banner .banner_lines{
        display:none;
    }
    .index_banner .hero_inner{
        padding:38px 20px 0;
        justify-content:flex-start;
    }
    .index_banner .hero_eyebrow{
        font-size:11px;
        color:#BFE0F5;
        letter-spacing:.08em;
        gap:8px;
        margin-bottom:14px;
    }
    .index_banner .hero_eyebrow::before{
        width:18px;
        height:2px;
    }
    .index_banner .hero_title{
        font-size:25px;
        line-height:1.4;
        margin:0 0 12px;
        max-width:100%;
    }
    .index_banner .hero_lede{
        font-size:12.5px;
        line-height:1.7;
        color:#D2E2F0;
        margin:0 0 16px;
        max-width:100%;
    }
    .index_banner .hero_kpis{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px 0;
        margin-bottom:18px;
        width:100%;
    }
    .index_banner .hero_kpi{
        border-left:none;
        padding:0;
    }
    .index_banner .hero_kpi .n{ font-size:19px; }
    .index_banner .hero_kpi .n small{ font-size:10px; }
    .index_banner .hero_kpi .l{ font-size:10px; }
    .index_banner .hero_cta{
        flex-direction:column;
        align-items:stretch;
        gap:9px;
        width:100%;
    }
    .index_banner .hero_btn{
        height:42px;
        font-size:13.5px;
        width:100%;
    }
    .index_banner .banner_txt{
        right:auto !important;
        left:20px !important;
        bottom:56px !important;
        gap:7px;
    }
    .index_banner .banner_txt .banner_tab .tab_icon div{ width:28px; }
    .index_banner .hero_counter{ font-size:10px; }
}

/* ---------- 矮视口自适应：收紧内容，避免与底部进度条重叠 ---------- */
@media screen and (min-width:1044px) and (max-height:720px){
    .index_banner{ --hero-shift:22px; }
    .index_banner .hero_inner{ padding:0 clamp(40px,8.3vw,120px); }
    .index_banner .hero_eyebrow{ font-size:12px; margin-bottom:12px; }
    .index_banner .hero_title{ font-size:clamp(34px,3.9vw,56px); margin-bottom:12px; }
    .index_banner .hero_lede{ font-size:15px; line-height:1.7; margin-bottom:18px; }
    .index_banner .hero_kpis{ margin-bottom:18px; }
    .index_banner .hero_kpi .n{ font-size:22px; }
    .index_banner .hero_btn{ height:42px; font-size:14px; }
    .index_banner .banner_txt{ bottom:34px !important; }
}
@media screen and (max-width:1043px) and (max-height:620px){
    .index_banner{ --hero-shift:16px; }
    .index_banner .hero_inner{ padding-top:22px; }
    .index_banner .hero_eyebrow{ margin-bottom:8px; }
    .index_banner .hero_title{ font-size:21px; margin-bottom:8px; }
    .index_banner .hero_lede{ font-size:11.5px; margin-bottom:10px; }
    .index_banner .hero_kpis{ margin-bottom:10px; gap:6px 0; }
    .index_banner .hero_kpi .n{ font-size:17px; }
    .index_banner .hero_cta{ gap:7px; }
    .index_banner .hero_btn{ height:38px; }
    .index_banner .banner_txt{ bottom:24px !important; }
}