.about-wrap {
    margin: 0 auto;
    padding: .6rem 0 1.2rem 0;
}

.about-title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-title-cn {
    font-size: 0.4rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #C81526;
}

.about-title-line {
    width: 2.59rem;
    height: 0.01rem;
    background: #D3D3D3;
    position: relative;
    margin: .16rem 0;
}

.about-title-line::after {
    content: '';
    width: 0.45rem;
    height: 0.03rem;
    background: #BD1D27;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.about-title-en {
    font-size: 0.18rem;
    font-family: 'Arial', 'Helvetica Neue', 'HarmonyOS Sans SC', sans-serif;
    font-weight: 400;
    color: #444444;
    opacity: 0.5;
}

/*  企业介绍*/
.intro-wrap {
    display: flex;
    align-items: center;
    margin-top: .65rem;
}

.intro-des {
    font-size: 0.14rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 400;
    color: #444444;
    line-height: 0.38rem;
    flex: 1;
}

.intro-img {
    margin-left: .5rem;
    flex-shrink: 0;
    width: 6.45rem;
    height: 4.32rem;
}

.intro-img img,
.intro-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 企业文化 */
.culture-wrap {
    margin-top: .7rem;
    display: flex;
    justify-content: space-between;
}

.culture {
    width: 4.03rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.03rem 0.2rem 0.01rem rgba(0, 0, 0, 0.16);
    padding: .6rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.culture::after {
    content: '';
    width: 0;
    height: 0.09rem;
    background: #C81526;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .25s;
}

.culture-icon {
    width: 1.04rem;
    height: 1.04rem;
    background: #FFFFFF;
    border: 0.01rem solid #C81526;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.culture-icon img {
    width: .42rem;
}

.culture-text {
    font-size: 0.25rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #444444;
    text-align: center;
    margin-top: .3rem;
}

.culture-p {
    font-size: 0.2rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 500;
    color: #444444;
    line-height: 0.35rem;
    margin-top: .2rem;
}

.culture:hover::after {
    width: 100%;
}

/* 企业团队 */
.team-wrap {
    margin-top: .7rem;

}

.team-swiper {
    width: 100%;
    position: relative;
}

.teamSwiper {
    width: 100%;
    overflow: hidden;
}

.teamSwiper .swiper-slide {
    height: 3.47rem;
    transition: 300ms;
    transform: scale(0.8);
}

.teamSwiper .swiper-slide-active,
.teamSwiper .swiper-slide-duplicate-active {
    transform: scale(1);
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teamSwiper-next,
.teamSwiper-prev {
    color: #C81526;
}

.teamSwiper-next {
    right: -.5rem;
}

.teamSwiper-prev {
    left: -.5rem;
}

.team-content {
    font-size: 0.14rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 400;
    color: #444444;
    line-height: 0.38rem;
    margin-top: 1.1rem;
    text-align: justify;
}

/* 荣誉资质 */
.honor-wrap {
    margin-top: .75rem;
}

.honor-swiper {
    width: 100%;
    position: relative;
}

.honorSwiper {
    width: 100%;
    height: 3.96rem;
    overflow: hidden;
}

.honorSwiper-next,
.honorSwiper-prev {
    color: #C81526;
}

.honorSwiper-next {
    right: -.75rem;
}

.honorSwiper-prev {
    left: -.75rem;
}

.honorSwiper .swiper-slide {
    width: auto;
}

.honor-img {
    height: 100%;
    width: auto;
}

.honor-text {
    width: 100%;
    height: 0.37rem;
    background: #C81526;
    padding: 0 .1rem;
    text-align: center;
    line-height: .37rem;
    font-size: 0.18rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 400;
    color: #FEFEFE;

    position: absolute;
    bottom: 0;
    left: 0;
}

/* 发展历程 */
.history-wrap {
    margin-top: .7rem;
    overflow: hidden;
    padding: .1rem;
}

.mySwiper2 {
    width: 100%;
    overflow: hidden;
    box-shadow: 0rem 0rem 0.1rem 0.01rem rgba(0, 0, 0, 0.16);
}

.history-item {
    padding: .8rem 1rem;
    text-align: center;
}

.history-text {
    font-size: 0.3rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #C81526;
}

.history-p {
    font-size: 0.2rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 500;
    color: #444444;
    line-height: 0.4rem;
    margin-top: .3rem;
}

.mySwiper {
    width: 100%;
    position: relative;
}

.mySwiper::after {
    content: '';
    width: 100%;
    height: 0.06rem;
    background: #C81526;
    position: absolute;
    top: 0;
    left: 0;
}

.history-year {
    position: relative;
}

.history-year-ball {
    width: 0.15rem;
    height: 0.15rem;
    background: #FFFFFF;
    border: 0.01rem solid #444444;

    position: absolute;
    top: -0.045rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: all .2s;
}

.history-year-ball::after {
    content: '';
    width: 0.06rem;
    height: 0.06rem;
    background: #444444;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .2s;
}

.history-year-text {
    font-size: 0.23rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 500;
    color: #C81526;

    padding-top: .25rem;
    text-align: center;
    cursor: pointer;
}

.mySwiper .swiper-slide-thumb-active .history-year-ball {
    width: 0.22rem;
    height: 0.22rem;
    border-color: #C81526;
    top: -0.08rem;
}

.mySwiper .swiper-slide-thumb-active .history-year-ball::after {
    width: 0.09rem;
    height: 0.09rem;
    background: #C81526;
}

/* 招聘信息 */
.invite-wrap {
    margin-top: .8rem;
}

.invite-list {
    display: flex;
    flex-wrap: wrap;
}

.invite-item {
    width: 50%;
    padding-right: 1.25rem;
    border-right: 0.01rem solid #979797;

    display: flex;
    align-items: center;
    padding-top: .41rem;
}

.invite-item:nth-child(1),
.invite-item:nth-child(2) {
    padding-top: 0;
}

.invite-item:nth-child(even) {
    padding-right: 0;
    padding-left: 1.25rem;
    border: 0;
}

.invite-icon {
    width: 0.1rem;
    flex-shrink: 0;
}

.invite-line {
    flex: 1;
    border-top: 0.01rem dashed #969696;
}

.invite-text {
    font-size: 0.18rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #444444;
    padding: 0 .15rem;
    flex-shrink: 0;
}

.invite-time {
    font-size: 0.18rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 500;
    color: #444444;
    padding-left: .15rem;
    flex-shrink: 0;
}

.invite-item:hover .invite-text {
    color: #C81526;
}
/* ===== 品牌家族卡片矩阵（49 壳页专用，2026-09-13）===== */
.brand-family-list {
    margin-top: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.brand-family-card {
    width: calc((100% - .6rem) / 3);
    border-radius: .04rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .02rem .12rem rgba(0,0,0,.08);
    transition: box-shadow .3s, transform .3s;
    text-decoration: none;
    color: #333;
}
.brand-family-card:hover {
    box-shadow: 0 .06rem .24rem rgba(0,0,0,.15);
    transform: translateY(-.04rem);
}
.brand-family-img {
    height: 2.6rem;
    overflow: hidden;
}
.brand-family-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.brand-family-card:hover .brand-family-img img {
    transform: scale(1.06);
}
.brand-family-info {
    padding: .25rem .2rem .3rem;
}
.brand-family-name {
    font-size: 0.22rem;
    font-weight: bold;
    color: #15294a;
}
.brand-family-sub {
    font-size: 0.13rem;
    color: #9aa8bd;
    letter-spacing: .03em;
    margin-top: .05rem;
}
.brand-family-des {
    font-size: 0.14rem;
    color: #5a6a80;
    line-height: .26rem;
    margin-top: .12rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.brand-family-link {
    margin-top: .16rem;
    font-size: 0.14rem;
    color: #C81526;
}

/* ===== 绿色制造聚合页（43 专用，2026-09-15）=====
   一个页面自上而下展示 5 个工序小节：标题 + 配图 + 富文本正文，
   各小节图文左右交替；排版基准与 .intro-wrap / .intro-img 保持一致
   （配图 6.45rem × 4.32rem，正文 0.14rem / 行高 0.38rem）。 */
.gm-wrap {
    margin-top: .5rem;
}

/* 频道总述：后台 43 自己填的"详细内容"，留空则整块不输出 */
.gm-intro {
    font-size: 0.14rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    color: #444444;
    line-height: 0.38rem;
    margin-bottom: .3rem;
}

/* 单个工序小节 */
.gm-sec {
    padding: .55rem 0;
    border-top: 1px solid #EFEFEF;
    /* 锚点跳转（例如从别处带 #gm-46 进来）时给「固定头部」让位：
       固定导航 1.9rem + 8px 余量 ≈ 2.0rem，取 2.1rem。
       胶囊条已改成常驻屏幕**底部**，顶部不再需要为它预留高度，
       所以这个值只算头部，并且必须和 JS 里 gmNavOffset() 算出来的对得上。 */
    scroll-margin-top: 2.1rem;
}

/* 第一个小节不画顶部分割线（.gm-sec-first 由模板在 $i==0 时输出） */
.gm-sec-first {
    border-top: 0;
    padding-top: .2rem;
}

/* 小节标题 + 红色短线 */
.gm-sec-hd {
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
}

.gm-sec-title {
    font-size: 0.28rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #222222;
}

.gm-sec-line {
    width: 0.45rem;
    height: 0.03rem;
    background: #C81526;
    margin-left: .16rem;
}

/* 图文区：默认左图右文；奇数小节加 .gm-sec-rev 变成右图左文 */
.gm-sec-body {
    display: flex;
    align-items: flex-start;
}

.gm-sec-rev .gm-sec-body {
    flex-direction: row-reverse;
}

.gm-sec-img {
    flex-shrink: 0;
    width: 6.45rem;
    height: 4.32rem;
    margin-right: .5rem;
}

.gm-sec-rev .gm-sec-img {
    margin-right: 0;
    margin-left: .5rem;
}

.gm-sec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-sec-text {
    flex: 1;
    font-size: 0.14rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    color: #444444;
    line-height: 0.38rem;
}

/* 富文本里插入的图片不超出容器宽度 */
.gm-sec-text img {
    max-width: 100%;
    height: auto;
}

/* ===== 工序版式（2026-09-15 第四轮）：后台给 44~48 各自选布局 =====
   · .gm-sec--img-left  左图 + 右文（= 原来的默认排法）
   · .gm-sec--img-right 右图 + 左文（等价于旧的 .gm-sec-rev）
   · .gm-sec--text      文字（第五轮升级：传了图/GIF/视频 → 变「动态背景 + 压字」，
                        见下面的 .gm-sec-textbg；不传素材 → 退回通栏纯文字）
   · .gm-sec--cover     大图 · 图上压字
   · .gm-sec--video     视频
   旧规则（.gm-sec-rev / .gm-sec-body 默认）保留不动 —— 没选版式的页面
   仍然走左右交替，零变化。 */
.gm-sec--img-right .gm-sec-body {
    flex-direction: row-reverse;
}

.gm-sec--img-right .gm-sec-img {
    margin-right: 0;
    margin-left: .5rem;
}

/* 纯文案 / 视频下方的说明文字：通栏但限宽（1920 下一行过长会不好读） */
.gm-sec-text--full {
    max-width: 12.6rem;
    margin: 0 auto;
}

/* ===== 版式：大图 · 图上压字 =====
   通栏大图 + 居中标题/文案。上面那层渐变蒙版是为了让白字压在
   任何底图（亮的、花的）上都读得清，别删。 */
.gm-sec-cover {
    position: relative;
    width: 100%;
    height: 5.6rem;
    max-height: 62vh;              /* 矮屏（如 1366×768）不会被吃掉整屏 */
    overflow: hidden;
    background: #1D2126;           /* 还没传图时的兜底深色，不是白屏 */
}

.gm-sec-cover > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-sec-cover-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .4rem .6rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .16) 45%, rgba(0, 0, 0, .44) 100%);
}

.gm-sec-cover-title {
    font-size: 0.46rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: .02rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.gm-sec-cover-text {
    margin-top: .18rem;
    max-width: 10.5rem;
    font-size: 0.16rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    line-height: 0.32rem;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.gm-sec-cover-text p {
    margin: 0 0 .06rem;
}

.gm-sec-cover-text img {
    max-width: 100%;
    height: auto;
}

/* ===== 版式：视频 =====
   通栏播放器；高度给 vh 上限，竖屏/超宽视频不会把页面撑爆。
   ⚠️ 模板里不要加 muted —— 这里不自动播放，加了用户就听不到声音。 */
.gm-sec-video {
    width: 100%;
    background: #000000;
}

.gm-sec-video video {
    display: block;
    width: 100%;
    max-height: 62vh;
    background: #000000;
}

/* 视频版式下，正文与播放器之间留一点呼吸位 */
.gm-sec--video .gm-sec-text--full {
    margin-top: .3rem;
}

/* ===== 版式：文字 · 动态背景（2026-09-15 第五轮）=====
   后台「版式」选「文字」时，只要在「内容配图」里传了图（含 **gif 动图**）
   或在「视频文件」里传了视频，这一节就变成「铺满整块的动态背景 + 居中压字」；
   两个都没传则不进这里，退回原来的通栏纯文字（见 .gm-sec-text--full）。
   结构：.gm-sec-textbg
        ├ .gm-sec-textbg-media（<img> 或 <video>，绝对定位铺满，object-fit:cover）
        ├ .gm-sec-textbg-mask （渐变蒙版，让白字压在任何底图上都读得清）
        └ .gm-sec-textbg-inner（标题 + 文案，复用 .gm-sec-cover-title / -text 的白字样式）
   ⚠️ 背景视频必须带 muted 才允许自动播放（浏览器策略），且不加 controls。 */
.gm-sec-textbg {
    position: relative;
    width: 100%;
    min-height: 5.6rem;              /* 与 .gm-sec-cover 同高，观感统一 */
    min-height: max(5.6rem, 58vh);   /* 矮屏（1366×768）按屏高再撑一点；读不懂 max() 的浏览器退回上一行 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1D2126;             /* 素材还没加载出来时的兜底深色，不是白闪 */
}

/* 背景层：图/GIF/视频都铺满整块，多余部分裁掉（GIF 与 video 都会自己动） */
.gm-sec-textbg-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;            /* 背景不吃点击，文字里的链接照常可点 */
}

.gm-sec-textbg-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .16) 45%, rgba(0, 0, 0, .44) 100%);
    pointer-events: none;
}

.gm-sec-textbg-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 12.6rem;              /* 通栏但限宽：1920 下一行过长不好读 */
    margin: 0 auto;
    padding: .9rem .6rem;            /* 文字多时上下留白，块被文字撑高也不会贴边 */
    text-align: center;
}

/* ===== 43 首屏全屏 hero：banner 铺满第一屏（2026-09-15 第二轮微调）=====
   · body 有 padding-top:1.75rem（给固定头部让位），这里用负 margin 顶掉，
     让大图从视口 y=0 开始，100vh 正好铺满一屏
   · 宽度不用管：.common-banner.w1500 本来就是 width:100%（.wrap 满宽）
   · height 写两行是老写法：读不懂 svh 的浏览器会退回上一行 100vh，
     新浏览器用 svh，避免移动端地址栏收起后 hero 被裁掉一截
   · 兜底底色：后台还没传 banner 图时，不至于是一片刺眼的白 */
.common-banner.gm-hero {
    height: 100vh;
    height: 100svh;
    margin-top: -1.75rem;
    overflow: hidden;
    background: #171A1F;
}

/* ===== 绿色制造（43）底部常驻胶囊式锚点导航（2026-09-15，第三轮改版）=====
   只作用于 43（$navParentId==43），其它频道仍用整行下划线子导航。
   结构：.gm-nav-wrap（外壳，满宽，只负责居中与悬浮）
        └ .gm-nav-pill（胶囊底，inline-flex）
            ├ .gm-nav-ink（红色滑块，绝对定位，由 JS 跟随高亮项）
            └ a.gm-nav-item × N（5 个工序）

   ⚠️ 2026-09-15 第三轮：需求改为「胶囊常驻屏幕底部，滚动时相对屏幕完全不动」，
      所以取消了上一轮「首屏 absolute 悬浮在 banner 底部 → 滚过 banner 后吸顶」的两段式，
      现在从头到尾都是 position:fixed + bottom —— 滚到页面任何位置，胶囊都在同一处，
      随时可点。首屏因为 banner 铺满整屏，视觉上仍然是「悬浮在大图底部正中」。
   ⚠️ fixed 不受祖先 overflow 裁剪，所以外壳继续留在 banner 容器内部也没问题；
      但祖先若带 transform / filter / will-change 会把它变成「相对该祖先定位」——
      .gm-hero 目前没有这些属性，**以后别往上加**（否则胶囊会跟着 banner 跑）。
   ⚠️ 固定头部 .header-wrap 是 position:fixed / z-index:999，
      所以这里 z-index 取 30（在正文之上、头部之下）。
   ⚠️ 外壳是满宽 fixed 元素 → 必须 pointer-events:none，否则底部整条都会拦截点击
      （正文/页脚链接点不到）；可点区域由 .gm-nav-pill 的 pointer-events:auto 恢复。 */
.gm-nav-wrap {
    position: fixed;               /* 常驻屏幕底部：滚动时位置不变 */
    left: 0;
    right: 0;
    bottom: .5rem;                 /* 胶囊下沿距屏幕底边的留白（不依赖胶囊自身高度） */
    z-index: 30;
    text-align: center;            /* 胶囊自身水平居中 */
    pointer-events: none;          /* 外壳满宽，避免挡住两侧空白处的点击 */
}

.gm-nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .04rem;
    padding: .05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(.12rem);
    backdrop-filter: saturate(180%) blur(.12rem);
    box-shadow: 0 .06rem .18rem rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(0, 0, 0, .05);
    pointer-events: auto;          /* 外壳关掉了，这里恢复可点 */
    animation: gmNavIn .45s cubic-bezier(.22, .61, .36, 1) both;
}

/* 进场：淡入 + 轻微上浮，不抢 banner 的视觉。
   ⚠️ 这里只能用 translateY，**不能用 scale**：滑块宽度是用
      getBoundingClientRect() 量的，缩放期间量到的是缩小的值（差 4%），
      动画结束后胶囊恢复原宽，滑块右边缘就会露白（实测 1366/1536/1920 差 3px）。 */
@keyframes gmNavIn {
    from { opacity: 0; transform: translateY(-.1rem); }
    to   { opacity: 1; transform: none; }
}

/* 红色滑块：跟着当前工序走，点击/滚动时平滑滑过去（宽高都过渡） */
.gm-nav-ink {
    position: absolute;
    top: .05rem;                   /* 与 .gm-nav-pill 的 padding 对齐 */
    left: 0;
    height: calc(100% - .1rem);
    width: 0;
    border-radius: 999px;
    background: #BD1D27;
    box-shadow: 0 .03rem .1rem rgba(189, 29, 39, .35);
    opacity: 0;                    /* 没有高亮项时藏起来（由 .gm-has-active 打开） */
    transition: transform .38s cubic-bezier(.22, .61, .36, 1),
                width .38s cubic-bezier(.22, .61, .36, 1),
                opacity .2s;
    pointer-events: none;
    z-index: 0;
}

.gm-nav-pill.gm-has-active .gm-nav-ink {
    opacity: 1;
}

/* 单个胶囊 */
.gm-nav-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: .44rem;
    padding: 0 .24rem;
    border-radius: 999px;
    font-size: 0.16rem;
    font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    font-weight: 500;
    line-height: 1;
    color: #555555;
    white-space: nowrap;
    transition: color .28s, background-color .28s, transform .28s;
}

/* 悬停：微微上浮 + 淡红底 + 变红（“小动态”主要靠这一步） */
.gm-nav-item:hover {
    color: #BD1D27;
    background: rgba(189, 29, 39, .07);
    transform: translateY(-.02rem);
}

/* 当前工序：白字压在红色滑块上。
   ⚠️ 这里刻意"不再加粗"（统一 500）：加粗会让胶囊宽度多 2~3px，
      滑块是按激活后的宽度量的，切换瞬间会有一次宽度跳变 + 右边缘露白；
      红底白字本身已经足够醒目，不需要靠字重强调。 */
.gm-nav-item.active {
    color: #FFFFFF;
}

.gm-nav-item.active:hover {
    background: transparent;
    color: #FFFFFF;
    transform: none;
}

@media screen and (max-width:1024px){
    .intro-wrap{
        display: block;
        text-align: justify;
    }
    .intro-des{
        font-size: .28rem;
        line-height: .42rem;
    }
    .about-wrap{
        padding: 0.6rem 0.25rem .8rem;
    }
    .about-title-cn{
        font-size: .32rem;
    }
    .about-title-en{
        font-size: 0.24rem;
    }
    .intro-img{
        margin-left: 0;
        width: 100%;
        margin-top: .3rem;
    }
    .culture-wrap{
        display: block;
    }
    .culture{
        width: 100%;
        margin-bottom: .3rem;
    }
    .culture-text{
        font-size: 0.3rem;
    }
    .culture-p{
        font-size: .28rem;
    }
    .teamSwiper .swiper-slide{
        height: auto;
    }
    .team-swiper{
        width: 90%;
        margin: 0 auto;
    }
    .team-content{
        margin-top: 0.5rem;
        font-size: .28rem;
        line-height: .42rem;
    }
    .honor-swiper{
        width: 80%;
        margin: 0 auto;
    }
    .honorSwiper{
        height: 3.26rem
    }
    .honor-text{
        font-size: .24rem;
    }
    .history-year-text{
        font-size: 0.24rem;
    }
    .history-p,.invite-text,.invite-time{
        font-size: .28rem;
    }
    .history-text{
        line-height: .42rem;
    }
    .invite-item{
        padding-right: 3.5rem;
    }
    /* 品牌家族卡片移动适配 */
    .brand-family-list{
        gap: .2rem;
    }
    .brand-family-card{
        width: 100%;
    }
    .brand-family-img{
        height: 3rem;
    }
    .brand-family-name{
        font-size: .3rem;
    }
    .brand-family-sub{
        font-size: .22rem;
    }
    .brand-family-des{
        font-size: .24rem;
        line-height: .38rem;
    }
    .brand-family-link{
        font-size: .24rem;
    }
    /* 绿色制造聚合页移动适配：图文改上下排（无论奇数偶数小节） */
    /* 手机端顶部条只有 .9rem（.header-mobile），让位比 PC 小；
       胶囊已常驻屏幕底部，顶部不再为它预留高度 */
    .gm-sec{
        padding: .4rem 0;
        scroll-margin-top: 1rem;
    }
    .gm-sec-title{
        font-size: .3rem;
    }
    .gm-sec-body,
    .gm-sec-rev .gm-sec-body{
        display: block;
    }
    .gm-sec-img,
    .gm-sec-rev .gm-sec-img{
        width: 100%;
        height: auto;
        margin: 0 0 .3rem 0;
    }
    .gm-sec-img img{
        height: auto;
    }
    .gm-sec-text{
        font-size: .28rem;
        line-height: .42rem;
    }
    /* ---- 工序版式（第四轮）移动适配 ----
       ① 左右图一律改成上下排（手机没那么多横向空间）
       ② 纯文案不再限宽
       ③ 大图压字降低高度、字号放大，文字仍居中 */
    .gm-sec--img-left .gm-sec-body,
    .gm-sec--img-right .gm-sec-body{
        display: block;
    }
    .gm-sec--img-right .gm-sec-img{
        margin: 0 0 .3rem 0;
    }
    .gm-sec-text--full{
        max-width: 100%;
    }
    .gm-sec-cover{
        height: 4.2rem;
        max-height: 56vh;
    }
    .gm-sec-cover-inner{
        padding: .3rem .35rem;
    }
    .gm-sec-cover-title{
        font-size: .38rem;
    }
    .gm-sec-cover-text{
        max-width: 100%;
        margin-top: .14rem;
        font-size: .26rem;
        line-height: .42rem;
    }
    .gm-sec-video video{
        max-height: 56vh;
    }
    /* ---- 文字 · 动态背景（第五轮）移动适配 ----
       ① 高度对齐 .gm-sec-cover 的移动端高度（4.2rem / 56vh → 取 52vh 更矮一点，
          手机竖屏本来就不高，背景块太高会把 5 个工序拖得很长）
       ② 内边距收小；标题与正文的字号已经由上面 .gm-sec-cover-title / -text
          的移动端规则接管（这两块共用同一套类名，不用重复写） */
    .gm-sec-textbg{
        min-height: 4.2rem;
        min-height: max(4.2rem, 52vh);
    }
    .gm-sec-textbg-inner{
        padding: .5rem .35rem;
    }
    /* 绿色制造胶囊导航移动适配：手机端同样常驻屏幕底部（留白略小），
       胶囊允许换行并居中，滑块继续工作。
       ⚠️ 这里**不要**写 pointer-events:auto —— 外壳满宽，一旦可点就会挡住
         底部整条区域的正文/页脚链接；可点区域交给 .gm-nav-pill 恢复。 */
    .gm-nav-wrap{
        position: fixed;
        left: 0;
        right: 0;
        bottom: .36rem;
        padding: 0;
    }
    /* 手机端 body 的 padding-top 是 0.9rem（见 header.css 的媒体查询），
       所以这里负 margin 也用 0.9rem，同样让大图从视口顶开始铺满一屏 */
    .common-banner.gm-hero{
        margin-top: -0.9rem;
    }
    .gm-nav-pill{
        flex-wrap: wrap;
        justify-content: center;
        gap: .03rem;
        padding: .04rem;
        border-radius: .32rem;
        animation: none;
    }
    .gm-nav-ink{
        top: .04rem;
        height: calc(100% - .08rem);
        border-radius: .28rem;
    }
    .gm-nav-item{
        height: .56rem;
        padding: 0 .2rem;
        font-size: .22rem;
    }
}

/* ===== 版式⑦：整块背景 · 全屏（2026-09-15 第八轮）=====
   后台「版式」选「★ 整块背景 · 全屏」时用。
   素材、蒙版、压字与版式④ 完全一样（同一套 .gm-sec-textbg-* 结构），
   只改"尺寸口径"：

     ④ .gm-sec-textbg        → 宽 = 正文那一列（.about-wrap.w1500 = 15rem 居中）
                               高 = max(5.6rem, 58vh)     ← 实测 1920 下 1475.8 × 551
     ⑦ .gm-sec-textbg--full  → 宽 = 整个屏幕（左右顶到边）
                               高 = 一屏（100vh，与首屏 banner 同高）

   ① 横向"破框"怎么做的：
      祖先 .about-wrap.w1500 是固定 15rem 且 margin:0 auto 的，块只写 width:100%
      最多也就到那一列宽（1920 下 1475.8，占屏 77.5%）。
      用 width:100vw + margin-left:calc(50% - 50vw) 把它左右各拉回屏幕边缘。
      body 已有 overflow-x:hidden，不会出现横向滚动条；两侧各有约 7~8px 落在
      屏幕外（100vw 把纵向滚动条的宽度也算了进去）—— 底图是 object-fit:cover，
      这点裁切看不出来，画面仍是正中的。
   ② 纵向写成两行是老写法：读不懂 svh 的浏览器自动退回上一行 100vh。
      min-height 必须显式清零 —— .gm-sec-textbg 与手机端媒体查询里的
      min-height 都在本段**之前**，同权重比先后，这里后写所以生效。
   ③ 本段必须留在文件**最末尾**：要压过 .gm-sec / .gm-sec-first /
      手机端媒体查询里的同名规则（都是同权重，靠先后顺序取胜）。 */
.gm-sec--text-full {
    padding: 0;               /* 块自己就是一屏，不再加 .55rem 的上下留白 */
    border-top: 0;            /* 全屏块上下不画小节分割线 */
    scroll-margin-top: 0;     /* 跨页带 #gm-4x 进来时落到视口顶部（与 JS 的 0 让位配套） */
}

.gm-sec-textbg--full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 0;
    height: 100vh;
    height: 100svh;
}


/* ===== 全屏开关（2026-09-16 第九轮建立 / 第十轮改宽高口径）=====
   后台「单页管理 → 44~48」的「全屏显示」开关（存 pages.is_hot 列）。
   与版式**正交**：图文 / 左图右文 / 右图左文 / 大图压字 / 视频 / 整块背景 都能挂。

   第十轮（2026-09-16）用户定的口径 ——「除了 banner 图，其他模块开全屏后
   宽度和 banner 一样（满宽、自适应），高度最高 620」：
     · 宽度：与 .common-banner 同口径 —— 块自己左右顶到屏幕两边（破框 100vw），
             块内的图片 / 文字 / 背景素材再按 100% 铺满这个块。
     · 高度：620px 封顶 —— min-height: min(620px, 100svh)：
             ≥1920 就是 620（banner 是 5.7rem = 570，同一量级、比 banner 略高）；
             矮屏（1366×768 可视高约 617）自动取 100svh，不会顶出屏幕。
             内容比 620 高时块自然变高，绝不裁字。
     · 块内垂直居中（flex + justify-content:center），观感与 banner 一致。

   与第九轮做法的区别（重要）：
     第九轮是「子元素各自破框」—— 给 textbg / cover / video 各写
     width:100vw + margin-left:calc(50% - 50vw)，块本身仍是 15rem 版心宽，
     于是块的背景、上下边线、以及图文类的图片都到不了 banner 那么宽。
     第十轮改成「整块破框」：.gm-sec--full 自己就是 100vw，块内一切按 100% 排，
     口径统一，后代不必再各写一遍负 margin。

   破框原理（与第八轮版式⑦相同）：祖先 .about-wrap.w1500 是固定 15rem + margin:0 auto，
   只写 width:100% 最多到那一列宽（1920 下 1475.8px，占屏 77.5%）；
   必须 width:100vw + margin-left:calc(50% - 50vw) 才能左右拉回屏幕边缘。
   body 已有 overflow-x:hidden，不会出横向滚动条；两侧各约 7~8px 落在屏幕外
   （100vw 把纵向滚动条宽度也算进去了）—— 素材是 object-fit:cover，看不出来。

   ⚠️ 本段必须留在文件**最末尾**：要压过 .gm-sec / .gm-sec-first / 手机端媒体
   查询里的同名规则（都是同权重，靠先后顺序取胜）。 */
.gm-sec--full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding: 0;
    border-top: 0;
    scroll-margin-top: 0;
    min-height: 620px;
    min-height: min(620px, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 媒体类（整块背景 / 大图压字 / 视频）：素材铺满整块。
   flex:1 1 0 —— 基础尺寸写 0、高度全交给 grow 分配（= 块高 − 其它子元素），
   内部 height:100% 的 img / video 才有确定父高可解析。
   不能写 flex:0 0 auto（素材按自身自然高，比 620 小时块内留空，
   第九轮 100vh 时看不出，620 就一定露），也不能写 flex:1 1 auto
   （基础尺寸取素材比例高，可能远大于 620 把块撑破）。
   ⚠️ min-height / max-height 必须显式清零：.gm-sec-cover（5.6rem / 62vh）与
   .gm-sec-textbg（max(5.6rem,58vh)）的原值都写在本段之前。 */
.gm-sec--full > .gm-sec-textbg,
.gm-sec--full > .gm-sec-cover,
.gm-sec--full > .gm-sec-video {
    flex: 1 1 0;
    width: 100%;
    max-width: none;
    margin: 0;
    height: auto;
    min-height: 0;
    max-height: none;
}

.gm-sec--full > .gm-sec-video video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

/* 块内图文内容：整块已经满宽，但标题 / 正文仍限宽居中
   （1920 下一行字横跨 1900px 没法读）—— 相当于 banner 里居中的那行字。 */
.gm-sec--full > .gm-sec-hd,
.gm-sec--full > .gm-sec-body,
.gm-sec--full > .gm-sec-text {
    width: 100%;
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
}

/* 手机端（≤1024px）：全屏块内图文内容补回左右留白。
   .about-wrap 在手机断点本来有 padding: 0.6rem 0.25rem .8rem（见本文件媒体查询），
   全屏块破框到 100vw 之后这层内边距就没了 —— 图文的字会直接贴到手机屏幕边。
   这里按同样的 0.25rem 补回；媒体素材（整块背景 / 大图 / 视频）不加，
   它们本来就该顶到屏幕两边。
   ⚠️ 必须在文件最末尾（同权重靠先后顺序压过上面的规则）。 */
@media screen and (max-width:1024px){
    .gm-sec--full > .gm-sec-hd,
    .gm-sec--full > .gm-sec-body,
    .gm-sec--full > .gm-sec-text{
        box-sizing: border-box;
        padding-left: .25rem;
        padding-right: .25rem;
    }
}