/* ==========================================================================
   中科康润官网前台样式
   设计基线:画布 1920 / 内容区 1536 / 左右留白 192;色值与字号取自
   .design/spec-*.txt 的图层数据,改动前先核对那份文件。
   响应式只做"窄屏不破版":>=1280 按设计稿,768-1279 降列,<768 单列堆叠。
   ========================================================================== */

/* ---------- token ---------- */
:root {
    --c-primary: #EC6D28;
    --c-primary-d: #D55F1F;
    --c-text: #222222;
    --c-text-2: #999999;
    --c-placeholder: #DCDCDC;
    --c-line: #EAEAEA;
    --c-line-2: #E2E2E2;
    --c-bg-gray: #F6F6F6;
    --c-bg-gray-2: #F2F3F4;
    --c-blue: #2D63A4;
    --c-blue-text: #2B61A3;
    --c-dark: #060C19;

    --container: 1536px;
    --head-h: 80px;
    --hero-h: 360px;

    /* 位移动画的统一曲线:起手就冲出去,收尾慢慢停。轮播推帧与配图放大共用 */
    --ease-out: cubic-bezier(0, 0, .2, 1);

    /* 配图悬停放大的倍数:首页公司简介、新闻卡、研究院介绍三处共用,改这里一次到位 */
    --hover-zoom: 1.1;

    --font: "Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * 关于滚动条:出现纵向滚动条时视口少 15px,整站会左移约 7px,与设计稿的绝对坐标
 * 差几像素。不用 scrollbar-gutter 去凑——那会把满幅头图压窄到 1890,得不偿失。
 * 设计稿是 1920 无滚动条的静态画布,截图比对时用整页截图即可(截图时无滚动条)。
 */

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 30px;
    color: var(--c-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* ---------- 布局 ---------- */
.wrap {
    width: min(var(--container), 100% - 48px);
    margin-inline: auto;
}

.sec {
    padding-block: 60px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.empty {
    padding: 80px 0;
    color: var(--c-text-2);
    text-align: center;
}

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    padding-inline: 24px;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: var(--c-primary);
    border: 1px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn:hover {
    color: #fff;
    background: var(--c-primary-d);
}

.btn--lg {
    width: 200px;
    height: 60px;
    padding-inline: 0;
}

.btn--md {
    width: 160px;
    height: 50px;
    padding-inline: 0;
}

/* 列表页「查看详情」:橙底白字 100×30 */
.btn--sm {
    width: 100px;
    height: 30px;
    padding-inline: 0;
    gap: 6px;
    font-size: 14px;
}

/* ---------- 导航 ---------- */
.head {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
}

/* 首页:导航压在 banner 上,靠一张黑色渐变图保证白字可读
   top/left/right 三个方向必须写全:绝对定位元素会收缩到内容宽度,
   只写 position:absolute 的话头会缩成 1536 宽并贴住视口左边,logo 跑到 x=0 */
.head--over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent url("../images/nav/head-bg.png") center/100% 100% no-repeat;
}

.head__in {
    display: flex;
    align-items: center;
    height: var(--head-h);
}

.head__logo {
    flex: none;
    display: block;
}

.head__logo img {
    display: block;
    width: 204px;
    height: 30px;
}

.head__nav {
    display: flex;
    gap: 80px;
    margin-left: auto;
}

.head__link {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--head-h);
    font-size: 18px;
    color: var(--c-text);
    white-space: nowrap;
}

/* 当前项的橙色顶条 36×4,压在高 80 的链接顶部 */
.head__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 4px;
    background: var(--c-primary);
    opacity: 0;
    transform: translateX(-50%);
}

.head__link.is-on {
    color: var(--c-primary);
    font-weight: 700;
}

/* hover 只变色、不加粗:加粗会让文字变宽,而 .head__nav 是 margin-left:auto
   靠右对齐的,宽度一变整排标题跟着左移(当前项越靠右,抖动越明显)。 */
.head__link:hover {
    color: var(--c-primary);
}

.head__link.is-on::before {
    opacity: 1;
}

.head--over .head__link {
    color: #fff;
}

/* 透明头上当前项只保留橙条:文字仍是白色常规体 */
.head--over .head__link:hover,
.head--over .head__link.is-on {
    color: #fff;
    font-weight: 400;
}

.head--over .head__link.is-on::before {
    opacity: 1;
}

/* 滚动过 banner 后整条落成白底固定条:site.js 滚过阈值加 .is-stuck。
   透明头原本是 absolute(随页面滚走),这里换成 fixed 把它钉在视口顶。 */
.head--over .head__logo-color {
    display: none;
}

.head--over.is-stuck {
    position: fixed;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

.head--over.is-stuck .head__link,
.head--over.is-stuck .head__link:hover,
.head--over.is-stuck .head__link.is-on {
    color: var(--c-text);
    font-weight: 400;
}

.head--over.is-stuck .head__link:hover,
.head--over.is-stuck .head__link.is-on {
    color: var(--c-primary);
    font-weight: 700;
}

.head--over.is-stuck .head__link.is-on::before {
    opacity: 1;
}

.head--over.is-stuck .head__logo-white {
    display: none;
}

.head--over.is-stuck .head__logo-color {
    display: block;
}

.head--over.is-stuck .head__burger span {
    background: var(--c-text);
}

/* 白底上的白色语言图标看不见,压成纯黑(只改颜色,透明区保留) */
.head--over.is-stuck .head__langbtn img {
    filter: brightness(0);
}

.head__lang {
    display: flex;
    margin-left: 60px;
}

.head__langbtn {
    display: block;
}

.head__langbtn img {
    display: block;
    width: 28px;
    height: 28px;
}

.head__burger {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: 16px;
    padding: 9px 8px;
}

.head__burger span {
    display: block;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
}

.head__burger span + span {
    margin-top: 5px;
}

.head--over .head__burger span {
    background: #fff;
}

/* ---------- 内页头图 ---------- */
.hero {
    position: relative;
    background: var(--c-dark);
}

.hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 360;
    object-fit: cover;
}

/* ---------- 区块标题 ---------- */
.sec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.sec-head__title {
    position: relative;
    padding-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
}

.sec-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background: var(--c-primary);
}

.sec-head__more {
    flex: none;
}

/* 深色区块里的标题改白字 */
.sec--dark .sec-head__title {
    color: #fff;
}

/* ---------- 新闻列表页 ---------- */
.sec--news-list {
    padding-top: 30px;
    padding-bottom: 0;
}

.nlist {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 57px;
}

.nrow {
    position: relative;
    display: flex;
    gap: 24px;
    height: 230px;
    padding: 20px 30px 16px 20px;
    background: #fff;
    border: 1px solid var(--c-line);
    transition: box-shadow .2s;
}

.nrow:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.nrow__thumb {
    flex: none;
    align-self: flex-start;
    width: 190px;
    height: 190px;
    overflow: hidden;
    background: var(--c-placeholder);
}

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

.nrow__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-top: 13px;
}

.nrow__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--c-text);
}

.nrow__desc {
    max-width: 1259px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    color: var(--c-text-2);
    /* 设计稿是两行截断;-webkit-box 是 line-clamp 的前提,不能换成 block */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nrow__foot {
    margin-top: auto;
}

.nrow__date {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 28px;
    color: var(--c-text);
}

.nrow__year {
    display: block;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 300;
    line-height: 18px;
    color: var(--c-text-2);
}

/* 尺寸与配色复用 .btn--sm,这里只管定位(设计稿 100×30 @ 距右 30 / 距底 20) */
.nrow__btn {
    position: absolute;
    right: 30px;
    bottom: 20px;
    color: #fff;
}

.nrow__btn img {
    width: 15px;
    height: 10px;
}

/* ---------- 分页 ---------- */
/* 一格一个方框,两端是尖括号箭头。页码由 pager_items() 限成 7 格窗口,
   所以格子数固定,不会再被撑成几千像素(见 app/common.php 里的注释) */
.pager {
    display: grid;
    grid-auto-flow: column;
    /* 格宽上限 46px,宽度不够时整排一起收窄 —— 手机 9 格并排也不会撑出横向滚动 */
    grid-auto-columns: minmax(0, 46px);
    gap: 8px;
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
}

.pager__item,
.pager__side,
.pager__more {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 不许被压到内容以下:早先「上一页」几个字被挤成竖排就是这么来的 */
    min-width: 0;
    height: 41px;
    font-size: 16px;
    color: var(--c-text);
    background: #fff;
    border: 1px solid #E5E5E5;
}

/* 省略号只是占位,画框会让人以为能点 */
.pager__more {
    font-size: 14px;
    color: var(--c-text-2);
    border-color: transparent;
}

.pager__side svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pager__item:hover,
.pager__side:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

.pager__item.is-on {
    color: #fff;
    font-weight: 700;
    background: var(--c-primary);
    border-color: var(--c-primary);
}

/* 首尾页:箭头留位但不可点(不渲染成 a,pointer-events 也挡掉 hover 换色) */
.pager__side.is-off {
    color: #C9C9C9;
    cursor: default;
    pointer-events: none;
}

/* ---------- 新闻详情 ---------- */
.art {
    max-width: 1100px;
    margin-inline: auto;
}

.art__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
}

.art__meta {
    margin-top: 16px;
    padding-bottom: 24px;
    font-size: 14px;
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-line);
}

.art__body {
    padding-top: 32px;
    font-size: 16px;
    line-height: 32px;
}

.art__body img {
    display: block;
    margin: 24px auto;
}

.art__body p {
    margin-bottom: 20px;
}

/* 返回列表:用主按钮(橙底),不是首页卡片那种 88×30 描边小按钮 */
.art__back {
    margin-top: 48px;
    font-size: 16px;
}

/* ---------- 页脚 ---------- */
/* 分页条底(2054)到版权文字顶(2192)在设计稿里是 138 */
.foot {
    padding: 138px 0 70px;
}

.foot__copy {
    font-size: 16px;
    line-height: 30px;
    color: var(--c-text);
    text-align: center;
}

/* ---------- 响应式:降列,不做像素级移动版 ---------- */
@media (max-width: 1199px) {
    .head__nav {
        gap: 40px;
    }

    .head__lang {
        margin-left: 32px;
    }
}

@media (max-width: 1099px) {
    .sec {
        padding-block: 48px;
    }

    .head__link {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    .head__burger {
        display: block;
    }

    /* 抽屉:默认收起,点汉堡展开 */
    .head__nav {
        position: absolute;
        top: var(--head-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin-left: 0;
        padding: 8px 24px 16px;
        background: #fff;
        border-top: 1px solid var(--c-line);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        display: none;
    }

    .head__nav.is-open {
        display: flex;
    }

    .head__link {
        height: 48px;
        color: var(--c-text);
        font-size: 16px;
    }

    .head__link::before {
        top: 50%;
        left: -12px;
        width: 4px;
        height: 18px;
        transform: translateY(-50%);
    }

    .head--over .head__nav,
    .head--over .head__link {
        color: var(--c-text);
    }

    .head--over .head__nav {
        background: #fff;
    }

    /* 当前项与悬停项也得压回深色。上面 .head--over .head__link.is-on 的白色
       (权重 0,3,0)是给压在 banner 上的横向导航用的,抽屉底色是白的,白字会
       整行消失——媒体查询不提升优先级,所以这几条要在抽屉里按同权重再写一遍 */
    .head--over .head__link.is-on,
    .head--over .head__link:hover {
        color: var(--c-primary);
        font-weight: 700;
    }

    .nrow {
        height: auto;
        padding: 16px;
    }

    .nrow__thumb {
        width: 120px;
        height: 120px;
    }

    .nrow__btn {
        position: static;
        margin-top: 16px;
        align-self: flex-start;
    }

    .nrow__body {
        padding-top: 0;
    }

    .nrow__foot {
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    .sec-head {
        flex-direction: column;
        gap: 16px;
    }

    .sec-head__title {
        font-size: 24px;
        line-height: 24px;
    }

    /* 190 封面 + 文字在窄屏挤成一团,改成上图下文 */
    .nrow {
        flex-direction: column;
    }

    .nrow__thumb {
        width: 100%;
        height: 180px;
    }

    .nrow__date {
        font-size: 24px;
        line-height: 24px;
    }

    .art__title {
        font-size: 24px;
    }
}

/* ==========================================================================
   首页
   设计稿 5820 = 6 条 970 高的色带(banner + bg1..bg5)。每条色带用 min-height
   锁 970、背景整图 cover,带内内容按设计稿坐标换算成 padding/margin 走正常流——
   不做绝对定位,窄屏才能自然降级。
   换算约定:设计稿给的是文字「墨迹」坐标,这里按 字号/行高 反推 line box 顶边;
   差 2~3px 属字体度量差异,不再追。
   ========================================================================== */

/* 占位块:设计稿里客户尚未供图的灰块 */
.ph {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--c-placeholder);
}

.hsec {
    position: relative;
    /* 自成层叠上下文,好让下面的装饰水印用 z-index:-1 沉到内容底下。
       不这么做的话水印是绝对定位、内容列是静态定位,定位元素一律画在静态内容
       之上,"About Us" 那行 252px 大字会直接盖到配图上。 */
    z-index: 0;
    min-height: 970px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.hsec--about {
    padding-top: 170px;
    padding-bottom: 130px;
    background-image: url("../images/home/bg1.webp");
}

.hsec--team {
    padding-top: 315px;
    background-image: url("../images/home/bg2.webp");
}

.hsec--tech {
    padding-top: 83px;
    background-image: url("../images/home/bg3.webp");
}

.hsec--news {
    padding-top: 148px;
    background-image: url("../images/home/bg4.webp");
}

.hsec--contact {
    padding-top: 216px;
    background-image: url("../images/home/bg5.webp");
}

/* 装饰大字水印:左缘按设计稿的绝对坐标钉死(色带是满幅的,不受内容列影响) */
.hsec__mark {
    position: absolute;
    /* 沉到本节内容之下、色带背景图之上(负 z-index 画在自己所在层叠上下文的
       背景之后、块级内容之前) */
    z-index: -1;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--c-text);
    opacity: .06;
    pointer-events: none;
    user-select: none;
}

.hsec--about .hsec__mark {
    top: 99px;
    left: 275px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 252px;
}

/* Contact Us 水印挂在 .hcontact 上而不是 section 上:首页与加入我们的色带内边距不同,
   但水印相对「地图顶边」的位置两页一致(都在地图顶边 +264),挂内层才不用按页写两遍。
   left:-147px 是因为 .hcontact 在 1536 内容列内,而设计稿的 45 是画布绝对坐标。 */
.hsec__mark--contact {
    top: 264px;
    left: -147px;
    font-family: var(--font);
    font-size: 150px;
    opacity: .04;
}

/* 右侧页码点:固定在视口右侧垂直居中,一屏一个点,点一下滚到那一屏。
   按钮由 site.js 按 [data-section] 数量生成——banner 全隐藏时只有 5 屏。
   整条垫一层半透明黑底板:浅色带上白点本来就看不见,底板让它在任何色带上
   都读得出来(内边距还要容得下当前项外扩 7px 的圆环)。底板是深色,未选中的
   点必须是浅色,否则两者明度贴在一起、点就糊没了。 */
.hpager {
    position: fixed;
    top: 50%;
    right: 30px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 14px 10px;
    background: rgba(0, 0, 0, .3);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    transform: translateY(-50%);
}

.hpager__dot {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    background: rgba(255, 255, 255, .7);
    border: 0;
    border-radius: 50%;
    transition: background-color .2s;
}

/* 当前项:24×24 白底橙边圆环 + 12×12 橙心。
   绘制顺序是 元素背景 → ::before → ::after,橙心必须在 ::after 才不被白环盖住。
   圆环定位用 -6px 而不是 -7px:(24 − 12) / 2 = 6,写 -7 环心就偏到左上 1px,
   橙心看着不在环中间。 */
.hpager__dot.is-on {
    border-color: transparent;
}

.hpager__dot.is-on::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid var(--c-primary);
    border-radius: 50%;
}

.hpager__dot.is-on::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-primary);
    border-radius: 50%;
}

.hpager__dot:hover {
    background: var(--c-primary);
}

/* ---------- banner ---------- */
.hero--home {
    position: relative;
    /* 轨道比容器宽,多出来的帧靠这里裁掉,页面才不会横向滚动 */
    overflow: hidden;
    background: var(--c-dark);
}

.hero__track {
    display: flex;
    transition: transform .6s var(--ease-out);
}

/* 每帧占满一屏宽,高度由图片的宽高比撑出 */
.hero__slide {
    flex: 0 0 100%;
    width: 100%;
}

.hero__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 970;
    object-fit: cover;
}

/* 左右切换箭头 30×50,垂直居中压在图上 */
.hero__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 50px;
    margin-top: -25px;
    padding: 0;
}

.hero__nav img {
    display: block;
    width: 30px;
    height: 50px;
}

.hero__nav--prev {
    left: 48px;
}

.hero__nav--next {
    right: 48px;
}

/* ---------- 关于我们 ---------- */
.habout {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.habout__text {
    width: 846px;
}

.habout__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.habout__body {
    margin-top: 31px;
    font-size: 16px;
    line-height: 30px;
}

.habout .btn--lg {
    margin-top: 56px;
}

.habout__pic {
    flex: none;
    width: 580px;
    height: 340px;
    margin-top: 5px;
    overflow: hidden;
}

.habout__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ease-out);
}

/* 鼠标移到配图上放大一点(外框 overflow:hidden 裁掉溢出部分) */
.habout__pic:hover img {
    transform: scale(var(--hover-zoom));
}

/* ---------- 数据条 ---------- */
/* 白卡比内容区宽 31px(左右各 15.5),设计稿如此 */
.hstats {
    height: 231px;
    margin: 94px -15.5px 0;
    background: #fff;
}

/* 四列是「内容区 1536 的四等分」(每列 384),不是白卡 1567 的四等分,
   所以白卡多出来的 15.5 用内边距补回来,分栏竖线才会落在 576/960/1344 上 */
.hstats__list {
    display: flex;
    height: 100%;
    padding-inline: 15.5px;
}

.hstat {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-bottom: 12px;
}

/* 高亮项:整块橙底,顶边距白卡 12px。
   宽度跟着列宽走(4 条时正是设计稿的 384),写死 384 的话后台加到 5 条
   每列只剩 307,橙块就顶到白卡外面去了 */
.hstat.is-on::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    height: 200px;
    background: var(--c-primary);
}

/* 分栏竖线 1×120,顶边距白卡 52px;::after 画在下一列的左缘 */
.hstat + .hstat::after {
    content: "";
    position: absolute;
    top: 52px;
    left: 0;
    width: 1px;
    height: 120px;
    background: var(--c-line);
}

/* 橙块紧右边的那条竖线设计稿里没有(会被橙块边沿吃掉),去掉 */
.hstat.is-on + .hstat::after {
    display: none;
}

.hstat__value,
.hstat__label {
    position: relative;
    line-height: 1;
}

.hstat__value {
    font-size: 60px;
    font-weight: 700;
}

.hstat__label {
    font-size: 24px;
    color: var(--c-text-2);
}

.hstat.is-on .hstat__value,
.hstat.is-on .hstat__label {
    color: #fff;
}

/* ---------- 研发团队 / 技术创新(深色带,文字整块白) ---------- */
.hrow {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.hrow__text {
    width: 726px;
}

/* 深色带上的标题:bg2/bg3 是深色背景,设计稿里这里和 .htech__title 一样是白字。
   走的是 .sec-head__title 的默认黑字,所以必须显式改白。 */
.hrow__title {
    display: block;
    color: #fff;
}

.hrow__body {
    margin-top: 53px;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
}

.hrow__pic {
    flex: none;
    width: 640px;
    height: 340px;
    overflow: hidden;
}

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

.htech__title {
    display: block;
    color: #fff;
}

.htech__body {
    margin-top: 12px;
    max-width: 1433px;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
}

.htech__pic {
    display: block;
    width: 1158px;
    height: 622px;
    margin: 27px auto 0;
    object-fit: cover;
}

/* 产线视频:占位与图片同尺寸,倍速按钮浮在右上角(原生控件已含全屏) */
.htech__media {
    position: relative;
    width: 1158px;
    max-width: 100%;
    margin: 27px auto 0;
}

.htech__video {
    display: block;
    width: 100%;
    aspect-ratio: 1158 / 622;
    background: #000;
    object-fit: contain;
}

.htech__rate {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    min-width: 58px;
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(6, 12, 25, .6);
    border-radius: 4px;
    transition: background-color .2s;
}

.htech__rate:hover {
    background: rgba(6, 12, 25, .85);
}

/* ---------- 新闻动态 ---------- */
.hcards-wrap {
    position: relative;
    margin-top: 42px;
}

.hcards {
    display: flex;
    gap: 21.5px;
    overflow-x: auto;
    /* 不要 scroll-behavior:smooth:动画由 site.js 按帧做,这里再加一层
       会让每一帧自己又变成一段动画,滑起来发飘 */
    scrollbar-width: none;
}

.hcards::-webkit-scrollbar {
    display: none;
}

/* 滚到头的那个箭头不显示(装得下时两端都到头,两个一起藏),由 site.js 判断 */
.harw.is-off,
.rrail-btn.is-off {
    display: none;
}

.hcard {
    position: relative;
    display: flex;
    flex: 0 0 290px;
    flex-direction: column;
    height: 520px;
    padding-bottom: 20px;
    background: #fff;
    border: 1px solid var(--c-line);
    transition: background-color .2s, border-color .2s;
}

.hcard.is-on {
    background: var(--c-primary);
    border-color: var(--c-primary);
}

/* 封面与外框同宽同源(设计稿里封面压在卡片 1px 边框上),左右各外扩 1px 抵消边框 */
.hcard__thumb {
    display: block;
    flex: none;
    height: 290px;
    margin: -1px -1px 0;
    overflow: hidden;
    background: var(--c-placeholder);
}

.hcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

/* 高亮的那张封面轻微放大(缩放在 .hcard__thumb 的 overflow:hidden 里裁掉) */
.hcard.is-on .hcard__thumb img {
    transform: scale(var(--hover-zoom));
}

.hcard__date,
.hcard__title,
.hcard__desc,
.hcard__btn {
    margin-inline: 20px 25px;
}

.hcard__date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 25px;
}

.hcard__date em,
.hcard__date i {
    font-style: normal;
    line-height: 1;
}

.hcard__date em {
    font-size: 30px;
    font-weight: 700;
}

.hcard__date i {
    font-size: 18px;
    font-weight: 300;
    color: var(--c-text-2);
}

/* 卡片里的文字都定高截断:设计稿是 2 行标题 + 2 行摘要,
   缺字时高度不塌,按钮靠 margin-top:auto 始终贴底 */
.hcard__title {
    display: -webkit-box;
    min-height: 52px;
    margin-top: 11px;
    overflow: hidden;
    font-size: 18px;
    line-height: 26px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hcard__desc {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    color: var(--c-text-2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hcard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 88px;
    height: 30px;
    margin-top: auto;
    font-size: 14px;
    color: var(--c-text-2);
    background: #fff;
    border: 1px solid #CCCCCC;
}

.hcard__btn img {
    width: 15px;
    height: 10px;
}

.hcard.is-on .hcard__title,
.hcard.is-on .hcard__date em,
.hcard.is-on .hcard__date i,
.hcard.is-on .hcard__desc {
    color: #fff;
}

.hcard.is-on .hcard__btn {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

/* 左右翻页箭头 30×50。设计稿把它们压在卡片上,但 5 张卡正好铺满 1536 内容列,
   压上去就是盖住第一张的封面和最后一张的边。改成退到内容列外面的页边空白里。
   窗口不够宽、页边空白塞不下 30px 箭头时,由下面的媒体查询改在内容列里
   让出 40px 一条边(卡片本来就在横向滚动,窄屏少露一截不影响)。 */
.harw {
    position: absolute;
    top: 235px;
    z-index: 2;
    width: 30px;
    height: 50px;
    padding: 0;
}

.harw img {
    display: block;
    width: 30px;
    height: 50px;
}

.harw--prev {
    left: -40px;
}

.harw--next {
    right: -40px;
}

/* 页边空白不足 40px 时(内容列 1536 + 两侧各 40,再留出滚动条),
   改为内容列内部让出同样的 40px,箭头贴着内容列边线,卡片区相应变窄 */
@media (max-width: 1660px) {
    .hcards-wrap {
        padding-inline: 40px;
    }

    .harw--prev {
        left: 0;
    }

    .harw--next {
        right: 0;
    }
}

/* ---------- 联系我们 ---------- */
.hcontact {
    position: relative;
    /* 也是层叠上下文:Contact Us 水印的 z-index:-1 要沉在本块内容之下、色带背景之上。
       首页的宿主是 .hsec--contact,但加入我们页这个区块挂在 .sec--join > .wrap 里,
   没有 .hsec 祖先——不在自己这里立一层的话,水印会一路沉到 body 背景底下看不见。
   hcontact 本来就是 position:relative(水印的包含块),补个 z-index 即可。 */
    z-index: 0;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.hcontact__info {
    margin-top: 59px;
}

.hcontact__list {
    margin-top: 57px;
}

.hcontact__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
}

.hcontact__item + .hcontact__item {
    margin-top: 26px;
}

/* 图标列固定 20 宽、图标居中,三行文字才会对齐在同一条 x 上 */
.hcontact__icon {
    flex: none;
    width: 20px;
    text-align: center;
}

.hcontact__icon img {
    display: inline-block;
    vertical-align: middle;
}

.hcontact__text {
    font-size: 16px;
    line-height: 30px;
}

.hcontact__map {
    flex: none;
    width: 742px;
    height: 400px;
    overflow: hidden;
}

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

/* 高德地图容器:铺满 742×400 的地图框,整块可点(跳高德打开这个点) */
.hcontact__amap {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 地图标注:房子图标(高德默认水滴针与设计稿不搭,图标由 site.js 注入),
   图标底边压在坐标点上,点位名落在它所指点位的下方 */
.amap-pin {
    line-height: 0;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}

/* 高德的标签外壳自带白底描边,这里清掉,只留自己那枚小胶囊 */
.hcontact__amap .amap-marker-label {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.amap-pin__label {
    display: inline-block;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
    background: rgba(0, 0, 0, .62);
    border-radius: 3px;
}

/* ---------- 加入我们 ---------- */
/* 白底,没有整图色带:头图 360 之后到地图顶边是 83 */
.sec--join {
    padding-top: 83px;
    padding-bottom: 0;
}

/* 地图底(923)到版权顶(1191)= 260,版权底(1213)到画板底(1272)= 59 */
.page-join .foot {
    padding: 260px 0 59px;
}

/* 首页版权落在 bg5 这条色带内:负 margin 把页脚提进色带底部,
   这样 bg5 的整图仍按 1920×970 完整铺满,版权文字压在同一张背景上。
   354 = 270(地图底到版权顶) + 30(版权行高) + 54(版权底到画板底)

   position:relative 不能省:.hsec 是定位元素会画在普通流之上,页脚不提层的话
   会被 bg5 那张背景图整个盖住(文字在 DOM 里但屏幕上看不见)。 */
.page-home .foot {
    position: relative;
    margin-top: -354px;
    padding: 270px 0 54px;
}

/* ==========================================================================
   内页:ETO原创技术
   设计稿 1614 = hero 360 + 白底段(示意图 300 + 导语)+ 灰带 660(含版权)。
   灰带从 954 通到 1614,但带内内容 1350 就结束了——版权那 264 靠页脚的负
   margin 提上来,做法与首页一致(见 .page-eto .foot)。
   ========================================================================== */

.sec--eto-top {
    padding-top: 60px;
    padding-bottom: 87px;
}

.eto-figure {
    display: block;
    width: 1168px;
    height: 300px;
    margin-inline: auto;
}

/* 导语在设计稿里是居中的一行;文本框量到 944 宽但文字溢出该框(单行 45 字 × 24px
   ≈ 1080),所以这里不锁宽度,只居中,免得被 944 挤成两行 */
.eto-intro {
    margin-top: 37px;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
}

.sec--eto-adv {
    padding-top: 66px;
    padding-bottom: 264px;
    background: var(--c-bg-gray);
}

/* 设计稿里这条内容块 1382 宽居中,比 1536 内容区窄(左右各差 77) */
.eplist {
    width: 1382px;
    margin-inline: auto;
}

.eplist__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
}

/* 列间距设计稿是 80(文字右缘 565 到配图左缘 645),但左栏可用宽只有 297-22=275,
   而「更环保的产品 (>70% 为绿电)」在思源黑体下要 274——只差 1px,回退字体一渲染就折行。
   所以把 flex 间距收到 40 给文字留余量:列变宽不影响观感,文字本身没那么宽,
   与配图的视觉间距仍是 ~73。 */
.eplist__row {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.eplist__list {
    flex: 1;
    min-width: 0;
}

/* 11×11 的橙色方点用 ::before,行内左内边距 22 = 点宽 11 + 间距 11;
   设计稿的点是旋转 45° 的菱形,不是正放的正方形 */
.eplist__list li {
    position: relative;
    padding-left: 22px;
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
}

.eplist__list li + li {
    margin-top: 32.5px;
}

.eplist__list li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 11px;
    height: 11px;
    background: var(--c-primary);
    transform: rotate(45deg);
}

/* 橙色只盖在行首几个字上(设计稿前三条如此),分界由后台正文里的 | 标出,
   见 PageBlock::expand() 的 line_parts。没写 | 的行整行黑色。 */
.eplist__list li em {
    font-style: normal;
    font-weight: 500;
    color: var(--c-primary);
}

/* 配图顶边比左侧首行低 39(设计稿 y=1130,首行 1091) */
.eplist__pic {
    flex: none;
    width: 1005px;
    height: 220px;
    margin-top: 39px;
    overflow: hidden;
    background: var(--c-placeholder);
}

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

/* 版权落在灰带底部:灰带的 padding-bottom 264 让出位置,页脚用等量负 margin 提上来。
   position:relative 与首页同理,避免被前面的区块盖住。 */
.page-eto .foot {
    position: relative;
    margin-top: -264px;
    padding: 188px 0 46px;
}

/* ==========================================================================
   内页:产品与品牌
   设计稿 1614 = hero 360 + 灰卡 264(UltraSyn™ 介绍)+ 渐变标题条 + 3 张图表卡
   + 版权。图表卡是整图(坐标轴、数值、结论都烧在切图里),后台只换图。
   ========================================================================== */

.sec--pbrand {
    padding-top: 60px;
}

/* 灰卡 1536×264:文字左右各缩进 172,上下 33/39。
   min-height 是为了文字被改动后卡片仍不低于设计稿高度。 */
.pcard {
    min-height: 264px;
    padding: 33px 172px 39px;
    background: var(--c-bg-gray);
}

/* 行高 36 = 24 的 1.5 倍,取自设计稿里这段文字的自动行框高(214 ≈ 6 行 × 35.7)。
   换成回退字体后同样宽度排不满设计稿的行数,卡片高度靠 min-height 锁死。 */
.pcard__text {
    font-size: 24px;
    line-height: 36px;
}

/* 橙色渐变标题条 719×71,水平居中,压在三张图表卡上方
   min-width 锁设计稿宽度,标题字多了条子跟着变宽而不是挤成两行 */
.pcharts-head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 719px;
    height: 71px;
    margin: 74px auto 0;
    padding-inline: 116px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(90deg, #FF9924 0%, #EC6D28 100%);
    /* 胶囊形:条高 71,圆角取满高一半 */
    border-radius: 999px;
    box-shadow: 3px 0 10px rgba(236, 109, 40, .22);
}

/* 三张卡按切图原尺寸(360/356/361)排开,两端对齐内容区;
   设计稿两处间距是 233 与 226(手放的),这里由 space-between 均分 */
.pcharts {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 54px;
}

.pchart {
    flex: none;
}

.pchart img {
    display: block;
}

/* 图表卡下沿 1336 到版权 1534 = 198;版权底到画板底 50 */
.page-product .foot {
    padding: 198px 0 50px;
}

/* ==========================================================================
   内页:研发实力
   设计稿 2557 = hero 360 + 研究院介绍 + 发展历程(整图 1536×641)
   + 荣誉资质灰带 520。区块标题 36px + 橙条 36×4(与列表页的 30px/60×4 不同)。
   ========================================================================== */

.sec-title {
    position: relative;
    padding-bottom: 19px;
    font-size: 36px;
    font-weight: 700;
    line-height: 36px;
}

.sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 4px;
    background: var(--c-primary);
}

.sec--rinstitute {
    padding-top: 90px;
}

/* 左栏 849 与右图 580 之间留 105(849+105+580 = 1534 ≈ 内容区 1536)。
   左栏写死宽度而不是 flex:1——用 flex:1 的话剩余宽度全给左栏,配图的 x 就永远是
   内容区右缘减去图宽(1148),而不是设计稿的 1146。 */
.rinst {
    display: flex;
    gap: 105px;
}

.rinst__text {
    flex: none;
    width: 849px;
    min-width: 0;
}

.rinst__body {
    margin-top: 5px;
    font-size: 16px;
    line-height: 30px;
}

/* 三段之间 32 的空档(设计稿段间距 30~34,取中) */
.rinst__body p + p {
    margin-top: 32px;
}

/* 图顶比标题顶低 21 */
.rinst__pic {
    flex: none;
    width: 580px;
    height: 340px;
    margin-top: 21px;
    overflow: hidden;
    background: var(--c-placeholder);
}

.rinst__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s var(--ease-out);
}

/* 与首页公司简介的图同一个动效:悬停放大一点,外框 overflow:hidden 裁掉溢出 */
.rinst__pic:hover img {
    transform: scale(var(--hover-zoom));
}

/* 历程图底 1819 到荣誉灰带顶 1873 = 54 */
.sec--rhistory {
    padding-top: 172px;
    padding-bottom: 54px;
}

.rhistory__pic {
    margin-top: 27px;
    overflow: hidden;
    background: var(--c-placeholder);
}

.rhistory__pic img {
    display: block;
    width: 100%;
    height: auto;
}

/* 荣誉区灰带:上下各留 45 / 60 */
.sec--rhonor {
    padding-top: 45px;
    padding-bottom: 60px;
    background: var(--c-bg-gray-2);
}

/* 画稿六张是 295 宽、300 步距(缝 5),起点 175、末张压窄成 245 顶到 1920 画布边。
   那套坐标只在恰好 1920 且无滚动条时成立:窄一点点末张就整张落在屏幕外,
   整排又没有滚动条,谁都没法把它弄出来。
   改成内容区里六等分的流体网格——缝仍取画稿的 5,卡片按画稿比例缩放(见下),
   任何宽度六张都在一屏里,不需要任何滚动或拖拽。 */
.rhonors-wrap {
    position: relative;
    margin-top: 37px;
}

.rhonors {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

/* 超过 6 张:切成横向轨道,卡片尺寸与六等分时一致,靠箭头 / 拖拽 / 滚轮手动滑动。
   滚轮是纵向的,浏览器不会自动转成横向,所以由 site.js 把纵向滚轮接到这排上。
   这里刻意不写 scroll-behavior: smooth——CSS 平滑在部分环境(含无头浏览器)会让
   程序化的 scrollLeft 赋值原地不动,箭头就点不动了;滑动动画由 site.js 按帧做。 */
.rhonors--rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 25px) / 6);
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
}

.rhonors--rail::-webkit-scrollbar {
    display: none;
}

.rhonors--rail.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* 箭头:与首页新闻区同一套 30×50,只在轨道模式下由模板输出 */
.rrail-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 50px;
    margin-top: -25px;
    padding: 0;
}

.rrail-btn img {
    display: block;
    width: 30px;
    height: 50px;
}

.rrail-btn--prev {
    left: 0;
}

.rrail-btn--next {
    right: 0;
}

.rhonor {
    min-width: 0;
    text-align: center;
}

/* 白卡 295×295 见方,证书图 229×162、左内缩 33、上留 62;文字标签在白卡外面,露在灰底上。
   尺寸全部折成百分比与等比:卡宽变了整张卡跟着等比缩放,不像素走形。
   62 写成白卡的 padding 而不是图的 margin——图的上外边距会穿出白卡(外边距合并),
   把整张白卡往下推 62,卡就不能压在 2010 这条线上了。 */
.rhonor__card {
    display: block;
    aspect-ratio: 1;
    padding: 21% 11.2% 0;
    background: #fff;
}

/* 229 / 162 是画稿里证书图的宽高比,换行时高度自动跟着宽度走 */
.rhonor__pic {
    display: block;
    aspect-ratio: 229 / 162;
    background: var(--c-placeholder);
}

/* 证书是照片,按完整内容缩放,不裁切 */
.rhonor__pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rhonor__name {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    line-height: 28px;
}

/* 灰带底 2393 到版权框 2472 = 79;版权底到画板底 55 */
.page-research .foot {
    padding: 79px 0 55px;
}

/* ==========================================================================
   内页:市场应用
   设计稿 3300 = hero 360 + 应用领域灰带 907 + 应用场景 + 性能指标整图。
   领域阶梯图与性能指标表都是整图:标签、数值、结论都烧在切图里,后台只换图。
   ========================================================================== */

/* 灰带紧贴头图下沿(440),不是从下一个区块开始 */
.sec--achart {
    padding-top: 55px;
    padding-bottom: 25px;
    background: var(--c-bg-gray-2);
}

.achart__pic {
    margin-top: 41px;
    overflow: hidden;
    background: var(--c-placeholder);
}

.achart__pic img {
    display: block;
    width: 100%;
    height: auto;
}

/* 整图外面套的链接:手机上图被缩到屏宽,图内文字小到读不了,点一下开原图。
   桌面图本来就按容器宽显示、看得清,所以提示语只在手机段打开(见媒体查询) */
.pic-zoom {
    display: block;
}

.pic-hint {
    display: none;
    margin-top: 12px;
    color: var(--c-text-2);
    font-size: 13px;
    text-align: center;
}

.sec--acases {
    padding-top: 90px;
}

.acases__lead {
    margin-top: 12px;
    font-size: 18px;
    line-height: 30px;
}

.acases {
    margin-top: 47px;
}

.acase {
    display: flex;
}

.acase + .acase {
    margin-top: 20px;
}

/* 场景图 440×340,标题白字压在图上(切图里没有字,标题是真实文本) */
.acase__pic {
    position: relative;
    flex: none;
    width: 440px;
    height: 340px;
    overflow: hidden;
    background: var(--c-placeholder);
}

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

.acase__name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 40px;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: #fff;
    text-align: center;
}

/* 右侧面板:灰底 + 齿轮线稿水印(纯装饰,写死在 CSS 里),列表在面板内垂直居中。
   不写死上内边距是因为两条场景的条数不同(7 条 / 8 条),居中后都在面板里站得住。 */
.acase__panel {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding-inline: 35px;
    background: var(--c-bg-gray-2) url("../images/application/deco-gear.webp") center / 100% 100% no-repeat;
}

/* 11×11 橙点:面板左内边距 35 让点心落在 666(631+35),文字再往右 19 */
.acase__list li {
    position: relative;
    padding-left: 19px;
    font-size: 22px;
    line-height: 40px;
}

/* 11×11 的橙色方点,旋转 45° 成菱形——与 ePAO 技术那条列表同一个点 */
.acase__list li::before {
    content: "";
    position: absolute;
    top: 14.5px;
    left: 0;
    width: 11px;
    height: 11px;
    background: var(--c-primary);
    transform: rotate(45deg);
}

.sec--aperf {
    padding-top: 110px;
}

.aperf__pic {
    margin-top: 29px;
    overflow: hidden;
    background: var(--c-placeholder);
}

.aperf__pic img {
    display: block;
    width: 100%;
    height: auto;
}

/* 指标图底 3093 到版权框 3221 = 128;版权底到画板底 49 */
.page-application .foot {
    padding: 128px 0 49px;
}

/* ---------- 首页 / 内页响应式:1200 以下放弃像素级坐标,退回堆叠 ----------
   设计稿是 1920 定宽(内容区 1536 + 两侧 192 留白)。视口 ≥1200 时由 site.js 给
   html 设 zoom,整站按 1920 等比缩放,版式比例永远与设计稿一致;
   低于 1200 缩放会小到看不清字,于是关掉缩放、退回堆叠布局。 */
@media (max-width: 1199px) {
    .hsec {
        min-height: 0;
        padding-block: 64px;
    }

    .hsec--about,
    .hsec--contact {
        padding-bottom: 64px;
    }

    .hsec__mark {
        display: none;
    }

    .habout,
    .hrow,
    .hcontact {
        flex-direction: column;
        gap: 32px;
    }

    .habout__text,
    .hrow__text {
        width: auto;
    }

    .habout__pic,
    .hrow__pic,
    .hcontact__map {
        width: 100%;
        max-width: 640px;
        height: auto;
        aspect-ratio: 580 / 340;
        margin-top: 0;
    }

    .hrow__pic {
        aspect-ratio: 640 / 340;
    }

    .hcontact__map {
        aspect-ratio: 742 / 400;
        max-width: 742px;
    }

    .htech__pic {
        width: 100%;
        height: auto;
        aspect-ratio: 1158 / 622;
    }

    .habout__title {
        font-size: 34px;
    }

    .hstats {
        height: auto;
        margin-inline: 0;
        padding: 20px 0;
    }

    .hstats__list {
        flex-wrap: wrap;
        gap: 20px;
    }

    .hstat {
        flex: 1 1 40%;
        min-width: 160px;
        gap: 12px;
        padding-bottom: 0;
    }

    /* 降列后橙块与竖线按列宽写死会错位,改成整列底色 */
    .hstat.is-on::before {
        top: 0;
        width: 100%;
        height: 100%;
    }

    .hstat + .hstat::after {
        display: none;
    }

    .hstat__value {
        font-size: 40px;
    }

    .hstat__label {
        font-size: 18px;
    }

    .page-home .foot {
        margin-top: 0;
        padding: 64px 0 32px;
    }

    /* ETO:1382 定宽的内容块与 1005 定宽的配图都放开,配图按比例缩 */
    .sec--eto-top {
        padding-block: 48px;
    }

    .eto-figure {
        width: 100%;
        height: auto;
        aspect-ratio: 1168 / 300;
    }

    .eto-intro {
        margin-top: 24px;
        font-size: 18px;
        line-height: 30px;
    }

    .sec--eto-adv {
        padding-block: 64px;
    }

    .eplist {
        width: auto;
    }

    .eplist__row {
        flex-direction: column;
        gap: 32px;
        margin-top: 28px;
    }

    .eplist__pic {
        width: 100%;
        max-width: 1005px;
        height: auto;
        aspect-ratio: 1005 / 220;
        margin-top: 0;
    }

    .eplist__list li {
        font-size: 18px;
        line-height: 26px;
    }

    .eplist__list li + li {
        margin-top: 16px;
    }

    .eplist__list li::before {
        top: 7px;
    }

    .page-eto .foot {
        margin-top: 0;
        padding: 64px 0 32px;
    }

    /* 产品与品牌:灰卡去掉定宽缩进,图表卡换行等分 */
    .sec--pbrand {
        padding-top: 40px;
    }

    .pcard {
        min-height: 0;
        padding: 24px;
    }

    .pcard__text {
        font-size: 18px;
        line-height: 30px;
    }

    .pcharts-head {
        width: 100%;
        min-width: 0;
        height: auto;
        margin-top: 40px;
        padding: 16px 24px;
        font-size: 18px;
        line-height: 28px;
    }

    .pcharts {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: 32px;
    }

    .pchart {
        flex: 1 1 280px;
        max-width: 360px;
    }

    .pchart img {
        width: 100%;
        height: auto;
    }

    .page-product .foot {
        padding: 64px 0 32px;
    }

    /* 研发实力:左右分栏改堆叠,证书条继续横向滚动 */
    .sec-title {
        padding-bottom: 14px;
        font-size: 26px;
        line-height: 30px;
    }

    .sec--rinstitute,
    .sec--rhistory {
        padding-top: 48px;
    }

    .rinst {
        flex-direction: column;
        gap: 28px;
    }

    .rinst__text {
        width: auto;
    }

    .rinst__pic {
        width: 100%;
        max-width: 580px;
        height: auto;
        aspect-ratio: 580 / 340;
        margin-top: 0;
    }

    .rinst__body p + p {
        margin-top: 18px;
    }

    .rhistory__pic {
        margin-top: 20px;
    }

    .sec--rhonor {
        padding-block: 48px;
    }

    .rhonors {
        margin-top: 24px;
    }

    .page-research .foot {
        padding: 64px 0 32px;
    }

    /* 市场应用:场景卡改上下堆叠;两张整图等比缩到屏宽。
       曾经是按原图宽度显示 + 横向滚动(想保住图内文字的可读宽度),但原图 1537 宽,
       width: auto 直接取原图尺寸,手机上一屏只看得到四分之一,又没有滑动提示。
       现在缩放适配:图内文字会小到约 6px 看不清,所以图外包了一层
       a.pic-zoom,点一下新标签看原图(见下 .pic-zoom)。 */
    .sec--achart {
        padding-block: 40px;
    }

    .achart__pic,
    .aperf__pic {
        margin-top: 24px;
    }

    .achart__pic img,
    .aperf__pic img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
    }

    .pic-zoom {
        cursor: zoom-in;
    }

    /* 手机上缩放后的图内文字读不了,必须让「点图看大图」这件事能被发现 */
    .pic-hint {
        display: block;
    }

    .sec--acases {
        padding-top: 48px;
    }

    .acases {
        margin-top: 28px;
    }

    .acase {
        flex-direction: column;
    }

    .acase__pic {
        width: 100%;
        max-width: 440px;
        height: auto;
        aspect-ratio: 440 / 340;
    }

    .acase__name {
        font-size: 22px;
        line-height: 32px;
    }

    .acase__panel {
        padding: 20px 24px;
    }

    .acase__list li {
        padding-left: 17px;
        font-size: 16px;
        line-height: 30px;
    }

    .acase__list li::before {
        top: 9.5px;
        width: 9px;
        height: 9px;
    }

    .sec--aperf {
        padding-top: 48px;
    }

    .page-application .foot {
        padding: 64px 0 32px;
    }

    /* 首页:视频容器放开定宽,切换箭头贴边(48 的留白在窄屏太占地方) */
    .htech__media {
        width: 100%;
    }

    .hero__nav--prev {
        left: 12px;
    }

    .hero__nav--next {
        right: 12px;
    }

    /* 页码点:窄屏往里收一点,别压到内容 */
    .hpager {
        right: 12px;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    /* 内页头图源图是 1920×360(5.33:1),通栏后手机上只剩 68px 高,
       标题烧在图里被缩到中文约 7.5px,看不清。
       手机改成 16:9,cover 会自动居中裁掉左右:可见源图宽 = 360 × 16/9 = 640px
       (源图 x 640~1280)。六张内页头图的标题都烧在水平正中(x 800~1118),
       裁不到;高度 204px,标题放大到 180px 宽。
       16:9 在 767 宽时会到 431px 太高,用 max-height 封顶(cover 继续居中裁)。
       首页 banner 走 .hero--home,不受这里影响 */
    .hero__img {
        aspect-ratio: 16 / 9;
        max-height: 240px;
    }

    /* 手机上的新闻卡改一行一张、水平居中,不再横向滚动。
       横向轨道在手机上有两个毛病——卡片比可视区宽(定宽 260 撞上 1660 断点
       给 .hcards-wrap 留的 40px 内边距)被切掉一截,而且没有任何能滑动的提示。
       最多露 2 条,其余走标题右侧的「查看更多」 */
    .hcards-wrap {
        padding-inline: 0;
    }

    .hcards {
        flex-direction: column;
        gap: 16px;
        /* 横向溢出关掉;两轴同时声明 visible 才不会被另一边拉成 auto */
        overflow: visible;
    }

    .hcards .hcard:nth-child(n + 3) {
        display: none;
    }

    /* 一行一张、居中。75% 而不是通栏:通栏时封面占满整屏宽显得笨重,
       留出两侧等宽白边更透气;左右留白沿用桌面的 20/25,
       日期行「09-24 2026」需要 129px,75%(约 236px)内宽 189px 绰绰有余 */
    .hcard {
        flex: 0 0 auto;
        width: 75%;
        margin-inline: auto;
        height: auto;
    }

    /* 封面铺满卡片宽,与桌面同为 1:1(通栏 16:9 会把竖版封面裁掉一大半,
       只剩 42% 高度)。外扩 1px 压住卡片边框,和桌面同一套做法 */
    .hcard__thumb {
        width: auto;
        height: auto;
        aspect-ratio: 1;
        margin: -1px -1px 0;
    }

    /* 摘要也锁两行,卡片高度才齐(标题本来就有 min-height) */
    .hcard__desc {
        min-height: 48px;
    }

    /* 手机没有鼠标悬停,橙色高亮态只在桌面出现,否则第一张永远亮着 */
    .hcard.is-on {
        background: #fff;
        border-color: var(--c-line);
    }

    .hcard.is-on .hcard__title,
    .hcard.is-on .hcard__date em {
        color: var(--c-text);
    }

    .hcard.is-on .hcard__date i,
    .hcard.is-on .hcard__desc {
        color: var(--c-text-2);
    }

    .hcard.is-on .hcard__btn {
        color: var(--c-text-2);
        border-color: #CCCCCC;
    }

    .hcard.is-on .hcard__thumb img {
        transform: none;
    }

    .harw {
        display: none;
    }

    .hstat {
        flex: 1 1 100%;
    }

    /* 手机上一屏本来就看不满一个色带,固定页码点反而是干扰,交给自然滚动 */
    .hpager {
        display: none;
    }

    /* banner 的左右箭头留着:手机上没法拖拽切帧,这是唯一的切换入口 */
    .htech__rate {
        top: 8px;
        right: 8px;
    }

    /* 9 格并排到手机上格子只剩 20 多像素,跟着矮一档,数字才不显挤 */
    .pager {
        gap: 4px;
    }

    .pager__item,
    .pager__side,
    .pager__more {
        height: 34px;
        font-size: 14px;
    }
}

/* 荣誉证书:宽度不够时六等分会让卡小到看不清,分档换成三列 / 两列。
   证书超过 6 张时模板会给 .rhonors--rail(横向轨道,靠 grid-auto-flow: column
   + grid-auto-columns 把卡片排成一行)。轨道只在桌面成立,这里必须显式退回网格:
   分档原先只改 grid-template-columns 的列数,显式列因此被挤扁(1023 下三列各
   53px、479 下两列直接 0px),装不下的卡片落进隐式列——于是同一排里前几张又小
   又挤、后几张正常大,窄屏上文字还互相重叠。
   窄屏不需要轨道:网格自动换行,箭头一并藏掉(site.js 的滚轮 / 拖拽逻辑在
   不溢出时本来就自行退出,不用改)。 */
@media (max-width: 1023px) {
    .rhonors,
    .rhonors--rail {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 16px;
        overflow-x: visible;
        cursor: auto;
    }

    .rrail-btn {
        display: none;
    }
}

@media (max-width: 479px) {
    .rhonors,
    .rhonors--rail {
        grid-template-columns: repeat(2, 1fr);
    }
}