/* =========================================================
 * Hi4-Z 页面专属样式
 * 命名规范：统一 h4z- 前缀；变体修饰符以 -- 分隔
 * 单位规范：rem / %
 * ========================================================= */

.h4z-body {
    position: relative;
}

.mb_ {
    display: none;
}

/* ---------- 页面标题 ---------- */
.banner_desc {
    padding: 0 1.5rem;
    font-size: 0.22rem;
    line-height: 2;
    font-weight: 300;
}

.h4z-title,
.banner_title {
    font-size: 0.48rem;
    font-weight: 600;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0.24rem;
    color: #000;
    letter-spacing: 0.018rem;
}

/* 灰底区块标题（都江堰）：上移贴近内容 */
.h4z-title.h4z-title--gray {
    margin-top: 0;
    padding-top: 1rem;
    margin-bottom: -0.4rem;
}

/* 图解区块标题（核心部件 / 核心亮点）：紧凑排布 */
.h4z-title.h4z-title--flat {
    margin: 0;
    padding: 0.5rem;
}

/* ---------- 页面描述文字 ---------- */
.h4z-text {
    font-size: 0.2rem;
    color: #515151;
    margin-top: 0.4rem;
    letter-spacing: 0.009rem;
    line-height: 0.4rem;
}

/* 独立于区块之外的描述文字：补水平内边距 */
.h4z-text--pad {
    padding: 0 1.5rem;
}

/* ---------- 家族导航（滚动吸顶） ---------- */
.banner_tab_marks {
    display: none;
}

.banner_tab {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 0.8rem;
    line-height: 0.8rem;
    border-bottom: 1px solid transparent;
    /* border-bottom: 1px solid #ccc;
    background-color: #ccc; */
    position: sticky;
    top: 0;
    z-index: 200;
    transition: all .3s;
    z-index: 1;
    background-color: #fff;
}

.banner_tab.active {
    /* background-color: rgba(55, 55, 55, 0.8); */
    background-color: #fff;
}

.banner_tab.active a {
    color: #fff !important;
}

.banner_tab div {
    width: 1.4rem;
    margin: 0rem 0.4rem;
    border-bottom: 1px solid transparent;
    font-size: 0.2rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 2;
    height: 0.5rem;
    line-height: 0.5rem;
    opacity: 0.5;
}

.banner_tab div img {
    width: 100%;
    height: auto;
}

.banner_tab div.active {
    /* border-bottom: 1px solid #2a5f9b; */
    border-bottom: 2px solid #ddd;
    opacity: 1;
}

.banner_tab div.active a {
    color: #2a5f9b;
}

.banner_tab.active div {
    color: rgba(255, 255, 255, 0.3);
}

.banner_tab.active div {
    color: rgba(255, 255, 255, 0.3);
}

.banner_tab.active div.active {
    color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
}

/* 吸顶态：深色半透明底（对应官网 .banner_tab.active） */
.h4z-nav.active {
    background-color: rgba(55, 55, 55, 0.8);
}

/* 吸顶态磨砂玻璃层：铺满导航并做背景模糊 */
.h4z-nav.active .h4z-nav-marks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    backdrop-filter: saturate(80%) blur(0.5rem);
    -webkit-backdrop-filter: saturate(80%) blur(0.5rem);
}

.h4z-nav-item {
    margin: 0 0.4rem;
    border-bottom: 0.01rem solid transparent;
    font-size: 0.2rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 2;
    height: 0.5rem;
    line-height: 0.5rem;
}

.h4z-nav-item.active {
    border-bottom: 0.01rem solid #2a5f9b;
}

.h4z-nav-item.active a {
    color: #2a5f9b;
}

/* 吸顶态文字：未选中半透明白，选中纯白 */
.h4z-nav.active .h4z-nav-item,
.h4z-nav.active .h4z-nav-item a {
    color: rgba(255, 255, 255, 0.3);
}

.h4z-nav.active .h4z-nav-item.active,
.h4z-nav.active .h4z-nav-item.active a {
    color: #fff;
    border-bottom-color: #fff;
}

/* ---------- 通用区块 ---------- */
.h4z-section {
    padding: 1.2rem 1.5rem;
    position: relative;
}

/* 标题位于区块上方时：去顶部内边距 */
.h4z-section--pt0 {
    padding-top: 0;
}

/* 图片贴底：去底部内边距 */
.h4z-section--pb0 {
    padding-bottom: 0;
}

.h4z-img {
    width: 100%;
}

/* 视频：对应官网 banner_video，随容器宽度自适应（显示/隐藏仍由 .pc-pad / .mb-only 控制） */
.h4z-video {
    width: 100%;
    display: block;
    background-color: #000;
}

.h4z-gray {
    background-color: #fafafa;
}

/* ---------- 数据指标 ---------- */
.h4z-stats {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    padding: 0 0.6rem;
}

.h4z-stat-num {
    font-size: 0.3rem;
    font-weight: 800;
    color: #e8a136;
    letter-spacing: 0.01rem;
    line-height: 1.3;
}

.h4z-stat-lab {
    font-size: 0.14rem;
    color: #333;
    margin-top: 0.06rem;
}

/* ---------- 核心部件及系统 / 核心亮点 Tab 切换 ---------- */
.h4z-stage {
    position: relative;
    overflow: hidden;
    /* 容器高度由脚本按当前图片设定，切换时平滑过渡（各 Tab 图片高度不一致） */
    transition: height .45s;
}

/* 图片随 Tab 切换：与线上 .tab_swiper 的 fade 一致（speed:1000） */
.h4z-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s;
}

.h4z-slide.active {
    /* 激活项参与布局，撑起图片区高度 */
    position: relative;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}

/* 轮播里的 <video>：填满舞台（高度由 JS 按封面图宽高比设定），
   视频自身画幅与封面不一致时按 cover 裁剪，避免下方描述区上下跳动 */
.h4z-slide .h4z-video {
    height: 100%;
    object-fit: cover;
}

/* 端适配：PC 图 / 仅移动端图 */
.pc-pad {
    display: block;
}

.mb-only {
    display: none;
}

/* ---------- 上一项 / 下一项 ----------
 * 对齐线上 .swiper-container-4-btns：PC 端隐藏（PC 靠 Tab 悬停切换），
 * 移动端由容器铺满图片区、两个按钮左右分列并垂直居中
 */
.h4z-stage-btns {
    display: none;
}

.h4z-arrow {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: #FFF;
    opacity: .8;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .25s;
}

.h4z-arrow:hover {
    opacity: 1;
}

/* 右箭头整体翻转，对应线上 .swiper-container-4_right_btn */
.h4z-arrow.next {
    transform: rotate(180deg);
}

.h4z-arrow svg {
    width: 0.5rem;
    height: 0.5rem;
    display: block;
}

.h4z-tabbar {
    display: flex;
    margin-top: 0.35rem;
    border-bottom: 0.01rem solid #e5e5e5;
    overflow-x: auto;
    scrollbar-width: none;
}

.h4z-tabbar::-webkit-scrollbar {
    display: none;
}

.h4z-tabbar button {
    flex: 1 0 auto;
    min-width: max-content;
    padding: 0.14rem 0.28rem;
    font-size: 0.15rem;
    font-weight: 400;
    color: #444;
    position: relative;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .25s;
}

.h4z-tabbar button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.01rem;
    height: 0.02rem;
    background: #e8a136;
    transform: scaleX(0);
    transition: transform .3s;
}

.h4z-tabbar button:hover {
    color: #e8a136;
}

.h4z-tabbar button.active {
    color: #e8a136;
    font-weight: 600;
}

.h4z-tabbar button.active::after {
    transform: scaleX(1);
}

/* 核心部件及系统：首项标题居左、末项标题居右 */
.h4z-tabs[data-section="parts"] .h4z-tabbar button:first-child {
    text-align: left;
    padding-left: 0;
}

.h4z-tabs[data-section="parts"] .h4z-tabbar button:last-child {
    text-align: right;
    padding-right: 0;
}

.h4z-tab-desc {
    display: grid;
    max-width: 11.8rem;
    margin: 0.35rem auto 0;
    text-align: center;
    color: #333;
    font-size: 0.15rem;
    line-height: 0.3rem;
    font-weight: 300;
}

/* 描述面板叠放在同一格：切换时淡入淡出（对应线上 .change_text_box div 的 opacity 过渡） */
.h4z-tab-pane {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

.h4z-tab-pane.active {
    opacity: 1;
    pointer-events: auto;
}

/* Tab 栏变体 */
/* 核心部件及系统：Tab 栏左右留边 */
.h4z-tabs--pad {
    padding: 0 0.5rem;
}

/* 核心亮点：Tab 栏半宽居中 */
.h4z-tabs--half {
    width: 50%;
    margin: auto;
}

/* tab swiper */
.tab_swiper_box {
    padding: 1.2rem 1.5rem 0.5rem;
    position: relative;
}

.tab_swiper_box .tab_swiper .swiper-slide img,
.tab_swiper_box .tab_swiper .swiper-slide video {
    width: 100%;
}

.sw_tab_list {
    display: flex;
    justify-content: space-between;
}

.sw_tab_min {
    padding: 0.4rem 0.9rem;
    font-size: 0.2rem;
    font-weight: 300;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    height: 101%;
}

.sw_tab_min.active {
    font-weight: 500;
    border-bottom: 1px solid #444;
}

.sw_tab_list {
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
}

.change_text_box {
    position: relative;
    height: 1rem;
}

.change_text_box div {
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 300;
    font-size: 0.16rem;
    line-height: 0.28rem;
    opacity: 0;
    transition: all .4s;
    width: 100%;
}

.change_text_box div.active {
    opacity: 1;
}

.change_text_box div:nth-of-type(1) {
    position: relative;
}

.change_text_box div span {
    margin: 0 0.1rem;
}

.mb_ {
    display: none;
}

.tsb_title_mb,
.change_text_box_mb {
    display: none;
}

.swiper-container-4-btns {
    display: none
}

/* =========================================================
 * 响应式 — 移动端
 * ========================================================= */
@media (max-width: 768px) {

    /* 端适配：移动端只显示 H5 图 */
    .pc-pad {
        display: none;
    }

    .pc_ {
        display: none;
    }

    .mb-only {
        display: block;
    }

    .mb_ {
        display: block;
    }

    .h4z-title,
    .banner_title {
        font-size: 0.48rem;
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .banner_desc {
        padding: 0 0.75rem;
        font-size: 0.25rem;
        line-height: 2;
        font-weight: 300;
        text-align: justify;
    }

    .banner_tab {
        height: 1rem;
        line-height: 1rem;
    }

    .banner_tab div {
        margin: 0rem 0.15rem;
        font-size: 0.28rem;
        height: 0.7rem;
        line-height: 0.7rem;
    }

    .h4z-text {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }


    .h4z-nav {
        height: 1rem;
        line-height: 1rem;
    }

    .h4z-nav-item {
        margin: 0 0.3rem;
        font-size: 0.28rem;
        height: 0.7rem;
        line-height: 0.7rem;
    }

    .h4z-section {
        padding: 0;
        margin-top: 1rem;
    }


    .h4z-section--pt0 {
        margin-top: 0;
    }

    .h4z-stats {
        flex-wrap: wrap;
    }

    .h4z-stat {
        width: calc(50% - 0.15rem);
        margin-bottom: 0.2rem;
    }

    .h4z-stats[data-count="5"] .h4z-stat:nth-child(n+3) {
        width: calc(33.333% - 0.2rem);
        margin-bottom: 0;
    }

    .h4z-stat-num {
        font-size: 0.28rem;
    }

    /* 上一项 / 下一项：移动端容器铺满图片区，两个按钮左右贴边（对应线上 .swiper-container-4-btns） */
    .h4z-stage-btns {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
        /* 容器不遮挡图片，仅按钮可点 */
    }

    /* 移动端：Tab 栏可横向滑动，选中项由脚本滚动居中 */
    .h4z-tabbar {
        margin-top: 0.1rem;
        padding: 0 0.5rem;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .h4z-tabbar button {
        flex: 1 0 46%;
        padding: 0.2rem 0.1rem;
        font-size: 0.24rem;
        text-align: center !important;
    }

    /* Tab 栏留边由 .h4z-tabbar 自身承担，避免与变体叠加 */
    .h4z-tabs--pad {
        padding: 0;
    }

    /* 半宽变体在移动端恢复全宽，保证 Tab 栏可横向滑动 */
    .h4z-tabs--half {
        width: 100%;
    }

    .h4z-tab-desc {
        max-width: 100%;
        padding: 0.35rem 0.5rem;
        margin: 0;
        text-align: justify;
        font-size: 0.24rem;
        line-height: 0.5rem;
    }

    .pd2 {
        transform: translateX(-1.1rem);
    }

    .h4z-tab-pane {
        font-size: 0.18rem;
        text-align: center;
    }

    .tab_swiper_box {
        padding: 1.2rem 0rem 0.5rem;
        position: relative
    }

    .swiper-container-4-btns {
        position: absolute;
        width: 100%;
        top: 0rem;
        left: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    .swiper-container-4-btns img {
        width: 1rem
    }

    .swiper-container-4-btns .swiper-container-4_right_btn {
        transform: rotate(180deg)
    }

    .tab_swiper {
        width: 100%;
        margin-top: 0.5rem;
    }

    .tab_swiper .swiper-slide img {
        width: 100%;
    }

    .sw_tab_min {
        padding: 0;
        margin-right: 0.5rem;
    }

    .nav {
        position: relative;
        height: 1rem;
    }

    .nav-list {
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        display: flex;
        height: 1rem;
        align-items: center;
    }

    .nav-a {
        color: rgba(0, 0, 0, 0.3);
        text-decoration: none;
        font-size: 14px;
        margin: 0px;
        width: 50vw;
        line-height: 1rem;
        display: inline-block;
        height: 100%;
        overflow: hidden;
        position: relative;
        font-weight: 300;
    }

    #top {
        margin: 5vh 0 0 0.7rem;
    }

    .selected {
        color: #000;
        position: relative;
        font-weight: 300;
    }

    .nav-a::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        top: 1px;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .selected::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        top: 1px;
        background-color: rgba(0, 0, 0, 1);
    }

    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    .change_text_box {
        display: none;
    }

    .tsb_title_mb,
    .change_text_box_mb {
        display: block;
        padding: 0 0.7rem;
    }

    .tsb_title_mb {
        text-align: center;
        font-size: 0.46rem;
        font-weight: 400;
    }

    .change_text_box_mb {
        height: 4rem;
        position: relative;
    }

    .change_text_box_mb .ctbm_min {
        position: absolute;
        top: 0;
        opacity: 0;
        transition: all .4s;
        line-height: 0.5rem;
        padding-right: 0.7rem;
    }

    .change_text_box_mb .ctbm_min:nth-of-type(1) {
        position: relative;
    }

    .change_text_box_mb .ctbm_min.active {
        opacity: 1;
    }


    .tab_swiper_box .tab_swiper .swiper-slide img {
        width: 100%;
        height: 30vh;
        object-fit: cover;
    }
}