@charset "utf-8";
/* ==========================================================================
   custom.css —— 复刻站自主定制样式
   说明：本文件由复刻方新增，用于承载所有「原站之外」的自定义改动。
        原站原有样式文件（style.css / base.css / media.css / lib.css）保持不变，
        以后要加新样式，统一加在文件末尾，方便回溯与维护。
   包含四部分：
     1. 首页首屏 Hero（原站 banner 轮播为空，导致首屏大面积留白）
     2. 询盘表单提交状态提示
     3. WhatsApp 悬浮按钮（含手机端独立按钮）
     4. 页脚社交图标（品牌色 / 内联 SVG 图标尺寸）
   ========================================================================== */

/* ==========================================================================
   1. 首页首屏 Hero
   --------------------------------------------------------------------------
   模板本身预留了 #banner .hz .txt 文字层样式（白色文字、左对齐、垂直居中），
   原本就是为「深色大图 + 白字导航」设计的，这里按同一设计语言填充内容。
   ========================================================================== */

/* 1.1 实景照片型：整屏大图 + 深色渐变遮罩，保证白色文字可读 */
#banner .slide-photo .mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(6, 18, 52, .94) 0%,
        rgba(9, 26, 74, .78) 38%,
        rgba(10, 30, 84, .34) 72%,
        rgba(8, 24, 68, .58) 100%);
}

#banner .slide-photo .hz {
    z-index: 2;
}

/* 1.2 产品型：品牌蓝渐变底 + 右侧设备图
   --------------------------------------------------------------------------
   设备图原先放在白色圆角卡片里，而图片自带白色底 + 灰色地面投影，
   叠在品牌蓝渐变底上很脏。现改为：
     · 设备用脚本抠底成透明 PNG（scripts/cutout_device.py → dev_*.png / .webp）
     · 去掉白卡片 / 内边距 / 圆角 / 盒阴影，让设备直接"站"在蓝色渐变底上
     · 用 filter: drop-shadow() 沿透明轮廓落影（box-shadow 会是矩形，不能用）
     · 用独立的 .dev_refl 层做湖面倒影：垂直翻转 + 渐变遮罩。
       之所以不用 -webkit-box-reflect：那是 WebKit 私有属性，Firefox 无效，
       而且倒影高度受 #banner 的 overflow:hidden 限制，不好控制。
   HTML 侧由 scripts/build_banner_device.py 负责，两边配套。
   -------------------------------------------------------------------------- */
#banner .slide-card .bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(122deg, #061a4e 0%, #133690 52%, #1f57c4 100%);
}

#banner .slide-card .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 76% 42%, rgba(120, 180, 255, .22), transparent 58%);
}

#banner .slide-card .hz {
    z-index: 2;
}

#banner .slide-card .pic {
    /* 倒影需要占用的额外下方空间，同时决定倒影层贴在哪 */
    --refl-gap: 2.5rem;
    flex: 0 0 46%;
    max-width: 46%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#banner .slide-card .pic .dev {
    position: relative;
    width: 100%;
    /* 给下方倒影让出位置：.dev 变高后 flex 居中会把设备整体抬上去，
       倒影才不会一头撞进 #banner 的 overflow:hidden 里 */
    padding-bottom: var(--refl-gap);
}

#banner .slide-card .pic picture {
    display: block;
    width: 100%;
}

#banner .slide-card .pic picture img {
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
    display: block;
    /* 沿设备透明轮廓的柔和落影 */
    filter: drop-shadow(0 1rem 1.5rem rgba(2, 12, 38, .5));
}

/* 倒影层：与主图同宽同高，垂直翻转后用渐变遮罩渐隐 */
#banner .slide-card .pic .dev_refl {
    position: absolute;
    left: 0;
    top: calc(100% - var(--refl-gap));
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 58%);
    filter: blur(1.5px);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1100px) {
    #banner .slide-card .pic picture img {
        max-height: 46vh;
    }
}

@media (max-width: 768px) {
    #banner .slide-card .pic .dev_refl {
        display: none;
    }
}

/* 1.3 文字层排版（在模板 .hz .txt 基础上补充副标题与正文） */
#banner .hz>.w1600 {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 5rem;
}

#banner .hz .flexbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    width: 100%;
}

#banner .hz .txt .eyebrow {
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #8fc0ff;
    margin-bottom: 1.5rem;
}

/* h1 是首屏第一张 slide 的标题（2026-10-27 由 h2 升为 h1），
   宽度约束必须与 h2 一致，否则换行数会变、版式跟着走样 */
#banner .hz .txt h1,
#banner .hz .txt h2 {
    max-width: 44rem;
}

#banner .slide-card .hz .txt h2 {
    font-size: 3rem;
    line-height: 1.28;
}

#banner .hz .txt .desc {
    margin-top: 1.75rem;
    max-width: 36rem;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.95;
    color: rgba(255, 255, 255, .84);
}

#banner .hz .more_a {
    margin-top: 3rem;
    flex-shrink: 0;
}

/* 1.4 响应式 */
@media (max-width: 1550px) {
    #banner .hz>.w1600 {
        padding-top: 4rem;
    }

    #banner .hz .txt h1,
    #banner .hz .txt h2 {
        max-width: 36rem;
    }

    #banner .slide-card .hz .txt h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 1100px) {
    #banner .hz .flexbox {
        gap: 2rem;
    }

    #banner .slide-card .pic {
        flex: 0 0 42%;
        max-width: 42%;
    }

    #banner .slide-card .hz .txt h2 {
        font-size: 2.125rem;
    }

    #banner .hz .txt .desc {
        font-size: .9375rem;
        line-height: 1.8;
    }
}

@media (max-width: 768px) {
    #banner .hz>.w1600 {
        padding-top: 4rem;
    }

    #banner .hz .txt .eyebrow {
        font-size: .75rem;
        letter-spacing: .14em;
        margin-bottom: .75rem;
    }

    #banner .hz .txt .desc {
        display: none;
    }

    #banner .slide-card .pic {
        display: none;
    }

    #banner .slide-card .hz .txt h2 {
        font-size: 1.5rem;
        line-height: 1.4;
    }
}

/* ==========================================================================
   2. 询盘表单提交状态提示
   ========================================================================== */
.form-tip {
    display: none;
}

.form-tip.on {
    display: block;
    margin-top: 1rem;
    padding: .875rem 1.25rem;
    border-radius: .375rem;
    border: 1px solid transparent;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: .9375rem;
    line-height: 1.6;
}

.form-tip.on.ok {
    background: #e8f7ee;
    border-color: #b6e3c8;
    color: #12703c;
}

.form-tip.on.err {
    background: #fdecec;
    border-color: #f5c2c2;
    color: #a32020;
}

/* ==========================================================================
   3. WhatsApp 悬浮按钮
   ========================================================================== */

/* 3.1 桌面端：并入右侧漂浮栏（样式与原有按钮一致） */
#online_q .btn2.btn-wa span svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

#online_q .open.wa p {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* 3.2 手机端：漂浮栏整体隐藏，单独给一个圆形 WhatsApp 按钮 */
#wa_float {
    display: none;
}

@media (max-width: 768px) {
    #wa_float {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 15px;
        /* 让开 Tawk.to 客服气泡（默认在右下角） */
        bottom: 6.5rem;
        z-index: 996;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        background: #25d366;
        box-shadow: 0 .5rem 1.25rem rgba(37, 211, 102, .45);
    }

    #wa_float svg {
        width: 1.75rem;
        height: 1.75rem;
        fill: #fff;
    }
}

/* ==========================================================================
   4. 品牌墙文字标识
   --------------------------------------------------------------------------
   #pro_pp 里的品牌标识统一改用文字（不是图片）：第三方品牌已全部撤掉，
   现在只剩自家品牌（磨床页 zyfeng、其余 JSWAY），详见第 9 章。
   文字标识尺寸沿用模板的瓷砖样式，不依赖任何外部图床。
   ========================================================================== */
.n_pro .hz .right .top li .img .brand-txt {
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #6b7280;
    text-align: center;
    padding: 0 .5rem;
}

.n_pro .hz .right .top li:hover .img .brand-txt,
.n_pro .hz .right .top li.on .img .brand-txt {
    color: #133690;
}

/* ==========================================================================
   5. 页脚排版修复
   --------------------------------------------------------------------------
   原站 bug：Contact 列固定 305px，右侧 6 个栏目列 flex-shrink:0，
   1440 宽下总宽超出容器 —— 右侧栏目整体向左溢出，直接压在邮箱和电话上
   （邮箱盖住 Company Profile、电话盖住 Corporate Culture）。
   改成 grid 自适应列宽，并允许长邮箱/长地址换行。
   ========================================================================== */
@media (min-width: 769px) {
    footer .hz {
        display: grid;
        grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    footer .hz .tel {
        max-width: none;
    }

    footer .hz .tel h2 {
        font-size: 1.25rem;
        line-height: 1.45;
        margin-bottom: 1.875rem;
        overflow-wrap: anywhere;
    }

    footer .hz .tel p {
        font-size: .875rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    footer .hz .right {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        gap: 2rem 1.75rem;
        justify-content: stretch;
    }

    footer .hz .right dl {
        width: auto;
        min-width: 0;
    }

    footer .hz .right dt {
        white-space: normal;
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }

    footer .hz .right dd {
        font-size: .875rem;
        line-height: 1.45;
        margin-bottom: 1rem;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   6. 站内搜索页（/search.html）
   --------------------------------------------------------------------------
   原站顶部搜索框提交到 CMS 的 /index.php，静态站上必然失败。
   这里改成纯前端站内搜索：搜索页 + 由 polish.py 生成的整站索引。
   ========================================================================== */
.search_page {
    padding: 4.5rem 0 6rem;
}

.search_page .search-box {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    max-width: 46rem;
    margin: 0 auto 1.5rem;
}

.search_page .search-box input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 3.5rem;
    padding: 0 1.25rem;
    border: 1px solid #dfe3ea;
    border-radius: .375rem;
    background: #fff;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: 1rem;
    color: #212121;
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.search_page .search-box input[type="text"]:focus {
    border-color: #133690;
    box-shadow: 0 0 0 .1875rem rgba(19, 54, 144, .1);
}

.search_page .search-box button {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.875rem;
    border: 0;
    border-radius: .375rem;
    background: #133690;
    color: #fff;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .3s ease;
    flex-shrink: 0;
}

.search_page .search-box button:hover {
    background: #1f57c4;
}

.search_page .search-box button span {
    display: inline-block;
}

.search-tips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    max-width: 46rem;
    margin: 0 auto 1.25rem;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: .875rem;
}

.search-tips .sug-label {
    color: rgba(0, 0, 0, .45);
}

.search-tips a {
    display: inline-block;
    padding: .375rem .875rem;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    color: #333;
    transition: all .3s ease;
}

.search-tips a:hover {
    border-color: #133690;
    background: #133690;
    color: #fff;
}

.search-stat {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: .9375rem;
    color: rgba(0, 0, 0, .55);
}

.search-stat b {
    font-family: 'Inter-SemiBold', Arial, sans-serif;
    color: #133690;
}

.search-stat a {
    color: #133690;
    text-decoration: underline;
}

.search-list {
    display: grid;
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto;
}

.sr-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #eceef2;
    border-radius: .5rem;
    background: #fff;
    transition: all .3s ease;
}

.sr-item:hover {
    border-color: #133690;
    box-shadow: 0 1rem 2rem rgba(19, 54, 144, .09);
    transform: translateY(-2px);
}

.sr-item .sr-img {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .375rem;
    background: #f5f7fa;
}

.sr-item .sr-img img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}

.sr-item .sr-txt {
    flex: 1;
    min-width: 0;
}

.sr-item .sr-txt h3 {
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #212121;
    margin-bottom: .25rem;
}

.sr-item .sr-cat {
    display: inline-block;
    margin-bottom: .375rem;
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #133690;
    opacity: .75;
}

.sr-item .sr-txt p {
    font-family: 'Inter-Light', Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-item .sr-go {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: .875rem;
    color: #133690;
    opacity: .8;
}

.sr-item .sr-go .iconfont {
    transform: rotate(180deg);
    font-size: .875rem;
}

@media (max-width: 768px) {
    .search_page {
        padding: 3rem 0 4rem;
    }

    .search_page .search-box {
        flex-wrap: wrap;
    }

    .search_page .search-box input[type="text"] {
        flex: 1 1 100%;
    }

    .search_page .search-box button {
        flex: 1 1 100%;
        height: 3.25rem;
        justify-content: center;
    }

    .sr-item {
        align-items: flex-start;
        gap: .875rem;
        padding: .875rem;
    }

    .sr-item .sr-img {
        flex: 0 0 4.25rem;
        width: 4.25rem;
        height: 3.5rem;
    }

    .sr-item .sr-go {
        display: none;
    }

    .sr-item .sr-txt h3 {
        font-size: 1rem;
    }
}

/* ==========================================================================
   4. 页脚社交图标
   --------------------------------------------------------------------------
   图标清单由 scripts/polish.py 按 site-config.json 生成，数量会随配置增减。
   品牌底色改成行内样式（见 polish.py 的 BRAND_COLOR），这里只负责
   「图标垂直水平居中 + 白色图形」这两件与数量无关的事。
   原站样式表用的是 .ico:nth-child(n) 上色，一旦增减平台就会串色，故弃用。
   ========================================================================== */

footer .top .follow .ico_box .ico a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
}

/* 内联 SVG 图标（VK / Instagram / WhatsApp）：与 iconfont 图标视觉等大 */
footer .top .follow .ico_box .ico a svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
}

/* 微信二维码浮层里的图片：原站未限制，长图会撑破 9.375rem 的方框 */
footer .top .follow .ico_box .ico .ewm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 图标增至 7 个（FB / YouTube / 领英 / VK / 抖音 / WhatsApp / 微信），
   窄屏一行放不下时允许换行，避免挤出页脚或压到左边联系信息 */
footer .top .follow .ico_box {
    flex-wrap: wrap;
    row-gap: .75rem;
}

@media (max-width: 1100px) {
    footer .top .follow .ico_box { justify-content: flex-start; }
}

/* 未填地址的平台：图标照常显示，鼠标悬停时提示链接待补充 */
footer .top .follow .ico_box .ico a[title] { cursor: default; }

/* ==========================================================================
   5. 首页「解决方案」六宫格
   --------------------------------------------------------------------------
   悬停切换由 custom.js 的 initSolutionHover() 驱动（切换后 Swiper 的
   thumbs 模块会给对应方块加 .swiper-slide-thumb-active，样式沿用原站）。
   这里只补两件原站没有的事：
     · 手型光标 —— 让「能点」这件事在鼠标移上去时就有反馈
     · 悬停微投影 —— 不能改 transform，方块位置靠 nth-child 的 translateX
       错落排布，一旦动 transform 整排就散了
   ========================================================================== */

.s_solution .hz .right .swiper-slide {
    cursor: pointer;
}

.s_solution .hz .right .swiper-slide:hover {
    box-shadow: 0 .875rem 2rem rgba(0, 0, 0, .22);
}

.s_solution .hz .right .swiper-slide:focus-within {
    box-shadow: 0 .875rem 2rem rgba(0, 0, 0, .22);
}

/* ==========================================================================
   6. 公司简介（.n_profile）大标题行高
   --------------------------------------------------------------------------
   原站 .ar_article 上写了 line-height: 1.875rem（30px），而
   .n_profile .hz .ar_article h3 的字号是 3.125rem（50px）。
   h3 自己没有 line-height，于是继承 30px —— 字号比行高还大，
   两行 "GUANYANG / TECHNOLOGY" 直接叠在一起。
   这里补上行高（1.25 ≈ 62px），并顺手兜住 h1/h2/h4，
   避免其它正文页出现同类问题。移动端 media.css 已有 line-height:1.5，不受影响。
   ========================================================================== */

.ar_article h1,
.ar_article h2,
.ar_article h3,
.ar_article h4 {
    line-height: 1.3;
}

.n_profile .hz .ar_article h3 {
    line-height: 1.25;
}

/* 公司简介左侧图位：原站这里就是 <img src="">（空），
   空容器仍占 86rem 宽度，把正文挤到右半边、还留一个空边框。
   空 src 时直接收起该列，正文占满并限制可读宽度；
   以后往 src 里填了真图片，这条规则自动失效、两栏布局恢复。
   about.html / company.html 都吃这条。 */
.n_profile .hz .img:has(img[src=""]) {
    display: none;
}

.n_profile .hz:has(.img img[src=""]) .ar_article {
    max-width: 62rem;
    margin-right: auto;
}

@media (max-width: 1280px) {
    .n_profile .hz:has(.img img[src=""]) .ar_article {
        max-width: none;
    }
}

/* ==========================================================================
   7. 应用领域索引页（application.html）
   --------------------------------------------------------------------------
   原站 application.html 是 automobile_making 的副本，点「应用领域」进去
   只看得到汽车制造。改成 6 张行业卡片的索引网格（由
   scripts/build_application.py 生成），这里补卡片样式。
   ========================================================================== */

.n_field_index .top {
    margin-bottom: 3.75rem;
}

.n_field_index .app_index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.n_field_index .app_index > li {
    display: flex;
}

.n_field_index .app_index > li > a {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2.5rem 2rem;
    background-color: #fff;
    border: 1px solid #e6e7e9;
    border-radius: .75rem;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.n_field_index .app_index > li > a:hover {
    border-color: #133690;
    box-shadow: 0 .875rem 2rem rgba(19, 54, 144, .12);
    transform: translateY(-.25rem);
}

.n_field_index .app_index .ico {
    height: 3.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.n_field_index .app_index .ico img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.n_field_index .app_index h3 {
    font-family: 'Inter-Medium';
    font-size: 1.375rem;
    line-height: 1.35;
    color: #212121;
    margin-bottom: 1.5rem;
}

.n_field_index .app_index .more {
    margin-top: auto;
    font-family: 'Inter-Regular';
    font-size: .9375rem;
    color: #133690;
}

.n_field_index .app_index .more::after {
    content: '';
    display: inline-block;
    width: .42rem;
    height: .42rem;
    margin-left: .5rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

@media (max-width: 1100px) {
    .n_field_index .app_index {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .n_field_index .app_index {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   8. 2026-09-22 修正：页头导航排版 / 产品卡白底 / 按钮文字压线
   ========================================================================== */

/* 8.1 页头导航
   --------------------------------------------------------------------------
   问题：7 个菜单项在 1552px、1300px 这些宽度下被挤成两行，而且 li 是左对齐，
        「About / Us」「News & / Events」这种断行非常难看。
   根因：ul 的间距写死 4.375rem（只有 ≤1550px 才降到 3rem），于是窗口一大
        反而更挤 —— 1552px 恰好卡在断点之外，间距弹回 70px 就溢出了。
   做法：间距与字号跟随视口；菜单项不换行、居中；窄到一行实在放不下
        （≤1180px）才退回两行居中（狗哥允许的兜底）。
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
    #pc_header .box .right { gap: clamp(1rem, 1.7vw, 2.5rem); }
    /* ul 本身占满 logo 与语言/搜索之间的整段宽度，把 flex-end 的右聚
       改成 space-evenly，菜单项就在这段空行里均匀分布（2026-09-24 狗哥） */
    #pc_header .box .right ul {
        justify-content: space-evenly;
        gap: clamp(.75rem, 1.5vw, 2.5rem);
    }
    #pc_header .box .right ul li { display: flex; align-items: center; }
    #pc_header .box .right ul li > a {
        white-space: nowrap;
        text-align: center;
    }
}

/* 窄桌面：只看页头容器收紧内边距，给菜单腾地方（正文容器不动） */
@media (min-width: 1101px) and (max-width: 1300px) {
    #pc_header .w1600 { padding: 0 2.5rem; }
}

/* 再窄就一行放不下了：允许折行，但要居中（不再左对齐） */
@media (min-width: 1101px) and (max-width: 1180px) {
    #pc_header .box .right ul li > a { white-space: normal; }
}

/* 8.2 首页产品卡：图片自带纯白底，叠在浅灰渐变卡面上就是一个突兀的白色方块
   --------------------------------------------------------------------------
   用 mix-blend-mode: darken —— 比背景亮的像素直接取背景色，于是白色底、
   以及机器周围那圈白色光晕一次性消失，机器本体（比背景暗）原样保留，
   连照片自带的地面柔影都自然变成了落地阴影。
   比抠图省事，也不会误伤机器本身的白色机壳。
   -------------------------------------------------------------------------- */
.s_pro .swiper a .img img {
    mix-blend-mode: darken;
}

/* 8.3 「Learn More / Explore Products」类按钮：英文标签压到白色分隔线上
   --------------------------------------------------------------------------
   原样式 span{width:70%} + white-space:nowrap：英文标签比 70% 宽时直接溢出，
   正好横穿那条 1px 的白色分隔线（实测 span 宽 88px，而文字要 110px）。
   改成按钮按内容自适应宽度，min-width 保持与其它按钮一致的观感。
   注意：index.html 里还有一段原始模板留下的 <style>.more_a{max-width:11.4375rem}</style>，
   它在 body 里、晚于本文件加载，同权重会盖住本文件 —— 所以这里加 body 前缀提权。
   -------------------------------------------------------------------------- */
body .more_a {
    width: fit-content;
    max-width: none;
    min-width: 11.4375rem;
    gap: .875rem;
}

body .more_a span {
    width: auto;
    flex: 0 0 auto;
}

/* ==========================================================================
   9. 行业页「实际应用」卡片（.n_field_case）
   --------------------------------------------------------------------------
   5 个行业页原本是空占位页（build_industry.py 生成），现由
   scripts/build_industry_apps.py 填入「行业概述 + 3 个应用」。
   卡片版式沿用 application.html 索引页那套（白卡片 + 细边 + hover 抬升），
   保持全站一致。配图由 scripts/prepare_app_images.py 产出，已把背景推成纯白，
   所以这里图片区直接用白底，不会出现灰白方块。
   ========================================================================== */

/* 本页正文短、下面还有卡片，公用的 7.5rem 下间距太空 */
.n_field_case .top {
    margin-bottom: 3.75rem;
}

.n_field_case .app_cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

.n_field_case .app_cases > li {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e6e7e9;
    border-radius: .75rem;
    overflow: hidden;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.n_field_case .app_cases > li:hover {
    border-color: #133690;
    box-shadow: 0 .875rem 2rem rgba(19, 54, 144, .12);
    transform: translateY(-.25rem);
}

.n_field_case .app_cases .img {
    aspect-ratio: 4 / 3;
    background-color: #fff;
    border-bottom: 1px solid #eef0f2;
    overflow: hidden;
}

.n_field_case .app_cases .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.n_field_case .app_cases > li:hover .img img {
    transform: scale(1.03);
}

.n_field_case .app_cases .txt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem 1.75rem 2rem;
}

.n_field_case .app_cases .txt h3 {
    font-family: 'Inter-Medium';
    font-size: 1.25rem;
    line-height: 1.4;
    color: #212121;
    margin-bottom: .875rem;
}

.n_field_case .app_cases .txt > p {
    font-size: .9375rem;
    line-height: 1.8;
    color: #6b7280;
}

/* 材料 / 精度 / 工艺 三个要点，做成小圆角标签 */
.n_field_case .app_cases .spec {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

.n_field_case .app_cases .spec li {
    font-family: 'Inter-Regular';
    font-size: .8125rem;
    line-height: 1.4;
    color: #133690;
    background-color: rgba(19, 54, 144, .06);
    border: 1px solid rgba(19, 54, 144, .14);
    border-radius: 999px;
    padding: .3125rem .75rem;
}

@media (max-width: 1100px) {
    .n_field_case .top {
        margin-bottom: 2rem;
    }

    .n_field_case .app_cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .n_field_case .app_cases {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .n_field_case .app_cases .txt {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

/* ==========================================================================
   9. 产品中心品牌标识栏
   --------------------------------------------------------------------------
   原站 #pro_pp 挂 3 个第三方品牌 logo（其中一个还是外链图片），且只是静态
   展示 —— 全站 js 里没有任何 pro_pp / pro_list 逻辑，li 的 data-value 是
   遗留死参数。现已统一成自家品牌（磨床页 zyfeng，其余 JSWAY），第三方品牌
   全部撤掉，相关图片不再被引用。

   样式跟着从「七格网格 + 每格 max-width:9.6875rem」改成 flex + 宽度自适应：
   只剩一个品牌时，左上角不会再是一个孤零零的小方块；中文名（JSWAY 捷程）
   比英文长，格子会自己长宽，不会被 overflow 裁掉。
   ========================================================================== */
.n_pro .hz .right .top ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
}

.n_pro .hz .right .top li {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 9.6875rem;
    padding: 0 1.5rem;
}

/* 品牌文字是 flex item，不给它收缩的机会，否则中文会被截尾（"JSWAY 捷程" → "JSWAY 捷"） */
.n_pro .hz .right .top li .img {
    width: auto;
    overflow: visible;
}

.n_pro .hz .right .top li .img .brand-txt {
    flex: 0 0 auto;
    font-family: 'Inter-Medium', Arial, sans-serif;
    font-size: 1.125rem;
    letter-spacing: .06em;
    white-space: nowrap;
    color: #133690;
}

/* ==========================================================================
   10. 首页品牌带 (.s_about) 放大 + 新闻区块 (.s_news) 改轮播
   --------------------------------------------------------------------------
   狗哥 2026-09-22 的两条反馈：
   ① 品牌带「占比放大一些」—— 原来自 6.25rem / 字号 3.125rem 偏秀气，
      整段在长页里像一条细带子。这里把内边距与字号整体抬一档，
      同时把左右两栏的 max-width 放宽，让中间那道空档收掉。
   ② 新闻区块「太空了」—— 原版是 grid 三列 + li:first-child 跨两列，
      而首页只有 1 条新闻，于是右边 2/3 全是白。现改成 Swiper 轮播，
      每屏 3 张卡片、自动轮播，7 条新闻循环。

   注意：media.css 里的同选择器规则在 @media(max-width:768px) 内，
   而 custom.css 在这之后加载 —— 不加断点包一层，桌面规则会把手机端
   规则顶掉（`.s_about .top .left h2` 手机端会从 2rem 变 3.75rem）。
   ========================================================================== */

/* ---- 10.1 品牌带：整段加高、左右放宽 ----
   背景图是 1920x830 的固定比例图，原来靠 background-size:100% 撑。
   加高后可能超出图片高度 → 底部露白；改成 cover 让它永远铺满，
   再垫一层同色底，万一 cover 也不够（超宽超矮的窗口）也不会穿帮。 */
.s_about {
    background-size: cover;
    background-position: center top;
    background-color: #143a85;
}

@media (min-width: 769px) {
    .s_about {
        /* 原来只有 padding-top:6.25rem，底部靠 .top 的 margin 撑，
           这里改成上下都有内边距，段落收口更整齐 */
        padding: 10rem 0 8.75rem;
    }

    .s_about .top {
        margin-bottom: 0;
        /* 两栏靠 justify-content:space-between 分开，窄屏时会被挤到贴住，
           给一条最小间隙兜底（w1600 的左右内边距在 1101px 时只有 893px 可用） */
        gap: 2.5rem;
    }

    .s_about .top .left {
        max-width: 54rem;
    }

    .s_about .top .left h2 {
        font-size: 3.75rem;
        line-height: 1.16;
        margin-bottom: 3.125rem;
    }

    .s_about .top .left .ar_article {
        font-size: 1.1875rem;
        line-height: 2.1;
        opacity: .78;
        margin-bottom: 3.5rem;
    }

    .s_about .top .right {
        max-width: 26rem;
    }

    .s_about .top .right li {
        padding-top: 1.25rem;
        margin-bottom: 4.375rem;
    }

    .s_about .top .right li p {
        font-size: 5rem;
        line-height: 1;
    }

    .s_about .top .right li h6 {
        font-size: 1.0625rem;
    }
}

/* 1101~1300px：两栏 max-width 之和会超过可用宽度，收一档，别让正文贴到数字上 */
@media (min-width: 769px) and (max-width: 1300px) {
    .s_about .top .left {
        max-width: 48rem;
    }

    .s_about .top .right {
        max-width: 24rem;
    }
}

/* ---- 10.2 新闻轮播 ----
   style.css 里 `.s_news ul{display:grid}` 的权重(0,1,1)高于 lib.css 的
   `.swiper-wrapper{display:flex}`(0,1,0)，不显式改回来轮播根本不会横排。 */
.s_news .newsSwiper {
    position: relative;
    /* 卡片阴影 / hover 抬升要露出容器，否则被裁 */
    padding-bottom: .25rem;
}

.s_news .newsSwiper ul.swiper-wrapper {
    display: flex;
    gap: 0;
}

.s_news .newsSwiper ul li {
    height: auto;
}

/* 第一张卡片原本是「跨两列 + 文字压在图上」的大图版式，
   轮播里所有卡片必须等权，逐条撤掉。权重都比 style.css 原文高。 */
.s_news .newsSwiper ul li:first-child {
    grid-column: auto;
}

.s_news .newsSwiper ul li:first-child .img {
    height: 19.0625rem;
    max-height: none;
}

.s_news .newsSwiper ul li:first-child .txt {
    position: static;
    width: auto;
    border: 1px solid #eaeaeb;
    background: transparent;
}

.s_news .newsSwiper ul li:first-child .txt h2,
.s_news .newsSwiper ul li:first-child:hover .txt h2 {
    color: #212121;
}

.s_news .newsSwiper ul li:first-child .txt .time {
    color: #a7a6ae;
}

.s_news .newsSwiper ul li:first-child .txt .more {
    display: block;
}

/* 卡片整体抬升 + 图片轻微推近，鼠标扫过一排时有反馈 */
.s_news .newsSwiper ul li a {
    display: block;
    height: 100%;
    transition: transform .35s ease;
}

.s_news .newsSwiper ul li:hover a {
    transform: translateY(-.5rem);
}

.s_news .newsSwiper ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.s_news .newsSwiper ul li:hover .img img {
    transform: scale(1.04);
}

.s_news .newsSwiper ul li .txt {
    display: flex;
    flex-direction: column;
    height: calc(100% - 19.0625rem);
}

.s_news .newsSwiper ul li .txt h2 {
    flex: 1 1 auto;
}

/* 翻页控件：左右箭头 + 分页点，居中排在卡片下方 */
.s_news .news_ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3.125rem;
}

.s_news .news_ctl .jt {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e5e8;
    border-radius: 50%;
    color: #374757;
    cursor: pointer;
    transition: all .3s ease;
}

/* iconfont 里只有左箭头字形，右箭头翻转复用，省一个不存在的类名 */
.s_news .news_ctl .jt.next .iconfont {
    display: inline-block;
    transform: scaleX(-1);
}

.s_news .news_ctl .jt:hover {
    background-color: #133690;
    border-color: #133690;
    color: #fff;
}

.s_news .news_ctl .jt.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.s_news .news_ctl .jt.swiper-button-disabled:hover {
    background-color: transparent;
    border-color: #e3e5e8;
    color: #374757;
}

.s_news .news_ctl .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.s_news .news_ctl .swiper-pagination .swiper-pagination-bullet {
    width: .5rem;
    height: .5rem;
    margin: 0 !important;
    background-color: #c9ccd2;
    opacity: 1;
    border-radius: 999px;
    transition: all .3s ease;
}

.s_news .news_ctl .swiper-pagination .swiper-pagination-bullet-active {
    width: 1.5rem;
    background-color: #133690;
}

/* 手机端：media.css 里 `.s_news ul li{display:none}` + 只放行前两条，
   轮播里所有卡片都得在场，且改成一屏一张。 */
@media (max-width: 768px) {
    .s_news .newsSwiper ul li {
        display: block;
    }

    .s_news .newsSwiper ul li .img {
        height: 12.5rem;
    }

    .s_news .newsSwiper ul li .txt {
        height: auto;
    }

    .s_news .news_ctl {
        margin-top: 2rem;
    }
}

/* ==========================================================================
   11. 公司标识（齿轮 + GY）：深底上的白色态
   --------------------------------------------------------------------------
   logo_mark.svg 是**单色平涂**（深宝蓝 #082EA5 压在纯白底上，源自 2026-09-23 狗哥
   发来的正式标识）。它有 16 个齿轮齿，齿与齿之间的留白很细，放在深底上会糊成
   一团暗块。实测这四处背景是：
     · #pc_header 未滚动态 —— 页头本身透明，底下压着横幅图，首页与**所有内页**都是
       深色的，所以这里必须转白，不能只改首页
     · footer —— 底色 #101d2d
     · #pc_header.xg —— 滚动后页头变白，保持原色
     · #m_header —— 手机页头底色 #fff，保持原色
   brightness(0) 把非透明像素全压成黑，invert(1) 再翻成纯白；alpha 抗锯齿边保留，
   边缘一样干净。这样不用另存一份「白版」文件 —— 将来拿到真矢量同名覆盖
   logo_mark.svg，颜色一变这里的白色态自动跟着对。
   ⚠️ 页头滚动类名是 .xg（见 base.js 第 112 行），不是 .on / .hd_on；改这里先去确认。
   ========================================================================== */
#pc_header:not(.xg) .box .logo a img,
footer .top .f_logo a img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   12. Cookie 同意条（配合 custom.js 的 GA4「先同意后加载」）
   只在 GA4_ID 填了之后才会出现；没填统计 ID 时不会弹任何东西。
   放左下角 —— Tawk.to 客服气泡占着右下角，别打架。
   ========================================================================== */
.gy_consent {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    max-width: 21rem;
    padding: .8rem .95rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .75rem;
    background: #101d2d;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.45;
    box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .22);
}
.gy_consent p {
    flex: 1 1 11rem;
    margin: 0;
    opacity: .86;
}
.gy_consent .acts {
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
}
.gy_btn {
    padding: .5rem 1.125rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    background: #fff;
    color: #101d2d;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .2s;
}
.gy_btn:hover {
    opacity: .84;
}
.gy_btn.ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
@media (max-width: 768px) {
    .gy_consent {
        left: .6rem;
        right: .6rem;
        bottom: .6rem;
        max-width: none;
        padding: .7rem .8rem;
        font-size: .75rem;
        gap: .5rem .7rem;
    }
    .gy_consent p { flex: 1 1 100%; }
    .gy_consent .acts { flex: 1 1 100%; }
    .gy_btn {
        flex: 1 1 0;
    }
}

/* ==========================================================================
   14. 占位页卡片（scripts/build_placeholder.py 生成）
   8 个栏目正文待补。与其让访客点进来撞上一片空白（甚至被弹到无关页面），
   不如给一句实话 + 三个出口，把人接回有内容的页面。
   页面上线后一旦填入真实内容并删掉 page:placeholder 标记，这段样式也不再被引用。
   ========================================================================== */
.n_field .ph_note {
    margin-top: 3rem;
    padding: 1.75rem 2rem;
    border-left: 3px solid #133690;
    background: #f4f6fa;
    border-radius: 0 .5rem .5rem 0;
}
.n_field .ph_note p {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.75;
    color: #5b6478;
}
.n_field .ph_acts {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.n_field .ph_act {
    display: inline-block;
    padding: .625rem 1.375rem;
    border: 1px solid #133690;
    border-radius: .375rem;
    font-size: .9375rem;
    line-height: 1.3;
    color: #133690;
    background: transparent;
    transition: background .25s, color .25s;
}
.n_field .ph_act:hover {
    background: #133690;
    color: #fff;
}
@media (max-width: 768px) {
    .n_field .ph_note {
        margin-top: 2rem;
        padding: 1.25rem 1.25rem;
    }
    .n_field .ph_act {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ==========================================================================
   15. 404 页面（scripts/build_404.py 生成 + serve.py 接管 404 响应）
   原来访客走到失效地址只会看到 http.server 的白底默认错误页，没有任何出口。
   这里给一个居中版式：水印式 404 + 全站搜索框 + 五个主要出口 + 直联方式。
   ========================================================================== */

/* 首屏：母版那张行业背景图换成品牌蓝渐变。
   必须用 #n_banner.gy_404_banner 提权 —— base.css 里的 #n_banner 是 id 选择器，
   单靠一个 class 压不住。 */
#n_banner.gy_404_banner {
    background-color: #133690;
    background-image: linear-gradient(120deg, #0d2a6b 0%, #133690 55%, #1b57c4 100%);
}

.gy_404 .gy_404_box {
    text-align: center;
    max-width: 62rem;
    margin: 0 auto;
}
.gy_404 .gy_404_box .code {
    font-size: 7.5rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .1em;
    color: #133690;
    opacity: .1;
    margin-bottom: -1.75rem;      /* 让数字与标题咬合，做成水印而不是一个显眼的元素 */
    user-select: none;
}
.gy_404 .gy_404_box .h2 {
    font-size: 2.25rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}
.gy_404 .gy_404_box .lead {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #5b6478;
}

/* 搜索框：与站内 search.html 同一入口，参数名保持 keyword */
.gy_404_search {
    display: flex;
    gap: .75rem;
    max-width: 40rem;
    margin: 0 auto 3.5rem;
}
.gy_404_search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3.5rem;
    padding: 0 1.25rem;
    font-size: 1rem;
    color: #222;
    background: #fff;
    border: 1px solid #dcdfe5;
    border-radius: .375rem;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.gy_404_search input:focus {
    border-color: #133690;
    box-shadow: 0 0 0 3px rgba(19, 54, 144, .12);
}
.gy_404_search button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 3.5rem;
    padding: 0 2rem;
    font-size: 1rem;
    color: #fff;
    background: #133690;
    border: 0;
    border-radius: .375rem;
    cursor: pointer;
    transition: background .25s;
}
.gy_404_search button:hover {
    background: #0d2a6b;
}

/* 出口卡片 */
.gy_404_links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    text-align: left;
}
.gy_404_links a {
    display: block;
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid #eaeaeb;
    border-radius: .5rem;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.gy_404_links a:hover {
    transform: translateY(-4px);
    border-color: #133690;
    box-shadow: 0 12px 28px rgba(19, 54, 144, .12);
}
.gy_404_links h3 {
    margin-bottom: .5rem;
    font-size: 1.0625rem;
    color: #133690;
}
.gy_404_links p {
    font-size: .8125rem;
    line-height: 1.7;
    color: #6b7280;
}

/* 直联方式 */
.gy_404_contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eaeaeb;
    font-size: .9375rem;
}
.gy_404_contact p {
    color: #6b7280;
}
.gy_404_contact a {
    color: #133690;
    font-weight: 600;
}
.gy_404_contact a:hover {
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .gy_404_links {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .gy_404 .gy_404_box .code {
        font-size: 5rem;
        margin-bottom: -1.125rem;
    }
    .gy_404 .gy_404_box .h2 {
        font-size: 1.5rem;
    }
    .gy_404 .gy_404_box .lead {
        margin-bottom: 2rem;
        font-size: .9375rem;
    }
    .gy_404_search {
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
    }
    .gy_404_search input,
    .gy_404_search button {
        flex: 1 1 100%;
        height: 3rem;
    }
    .gy_404_search button {
        justify-content: center;
    }
    .gy_404_links {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    .gy_404_links a {
        padding: 1.25rem;
    }
    .gy_404_contact {
        flex-direction: column;
        gap: .5rem;
    }
}

/* ==========================================================================
   16. 中文字重与技术支持区块（2026-09-24，狗哥反馈「字太细没质感」+
       「技术支持两张图是歪的」）
   ========================================================================== */

/* 16.1 页头公司名 / 二级导航 tab 加粗
   中文能不能变粗由 i18n.css 的 @font-face 声明决定（font-weight 必须是 400，
   见该文件头部注释）；这里只负责把要求提到 600，浏览器即会合成伪粗体。
   只动这两处 —— 狗哥圈的是联系类页面的二级导航与页头公司名，别全站铺开。 */
#pc_header .logo a p {
    font-weight: 600;
}
.n_nav ul a {
    font-weight: 600;
}

/* 16.2 技术支持区块（technical.html / service__media.html 的 .n_support）
   style.css 原设计是三列网格 + 第 2 张下移 70px 做交错效果，但页面里只放了
   两张卡 —— 错位就成了「歪的」。这里取消交错、统一图片比例，配合 HTML 里
   补上的第三张卡，恢复原设计的整齐三列。 */
.n_support ul li:nth-child(2) {
    margin-top: 0;
}
.n_support ul li .img {
    aspect-ratio: 4 / 3;   /* 原来只有 max-height，两张图比例不同就一高一低 */
    overflow: hidden;
}
.n_support ul li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 16.3 页头下拉面板底纹（2026-09-24，狗哥反馈「白底太素」）
   .ej_box 是「关于我们」这类小面板，.ej_pro 是产品中心大面板 —— 两个都
   原本纯白，这里给同样的浅蓝底纹：中心保持白（正文可读性不受影响），
   四角晕一层品牌蓝的极浅色调，像纸的暗角。 */
#pc_header .ej_box,
#pc_header .ej_pro {
    background-color: #fff;
    /* 狗哥提供的齿轮组素材（已刷成品牌蓝 7% 透明度），只露右上角一小部分 */
    background-image: url("/static/style/webn/images/gear_corner.png");
    background-repeat: no-repeat;
    background-position: right -90px top -90px;
    background-size: 300px auto;
    box-shadow: 0 18px 40px rgba(13, 42, 107, .16), 0 4px 12px rgba(13, 42, 107, .08);
}


/* 16.4 首页关于我们区块的数字条目（2026-09-24，狗哥反馈） */
/* 右侧说明文字原本 Inter-Light + opacity .6，蓝底上发灰；改纯白 + 600 */
.s_about .top .right li h6 {
    opacity: 1;
    color: #fff;
    font-weight: 600;
}
/* 文字相对大数字垂直居中（原为顶对齐） */
.s_about .top .right li {
    align-items: center;
}

/* ==========================================================================
   17. 产品图容器统一（2026-09-24，狗哥：去掉灰蓝渐变背景图，白底 +
   图片放大居中 + 细框线）
   原站把 n_pro_img_bg.jpg（灰蓝渐变）铺在 4 类产品图容器上，显得脏；
   产品原图本身是干净的白底渲染图，白底 + 细线即可。
   ========================================================================== */

/* 17.1 四类容器：白底、细框线、圆角 */
.s_pro .swiper a .img,
.n_field_box .hz .right .n_tjcp .ntjcp a .img,
#pro_list li a .img,
.n_pro_hz1 .hz .left .img {
    background: #fff;
    border: 1px solid #ccd2dc;
    border-radius: 4px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* 悬停：边框转品牌蓝 + 轻微抬升，呼应全站 hover 语言 */
.s_pro .swiper a:hover .img,
.n_field_box .hz .right .n_tjcp .ntjcp a:hover .img,
#pro_list li a:hover .img,
.n_pro_hz1 .hz .left:hover .img {
    border-color: #133690;
    box-shadow: 0 10px 24px rgba(19, 54, 144, .10);
    transform: translateY(-3px);
}

/* 17.2 图片放大：80% -> 92%，白底下机器更显眼 */
.s_pro .swiper a .img img,
.n_field_box .hz .right .n_tjcp .ntjcp a .img img,
#pro_list li a .img img,
.n_pro_hz1 .hz .left .img img {
    max-width: 100%;
    max-height: 100%;
}

/* 17.3 修图片偏左（2026-09-24 二轮）：<picture> 是 .img（flex 容器）的
   直接子元素，自身宽 100%，img 在它内部默认左对齐 —— 所以外层怎么
   justify-content:center 都没用，机器永远贴左。把 picture 也变成
   flex 居中层，img 才真正落在框的正中。 */
.s_pro .swiper a .img picture,
.n_field_box .hz .right .n_tjcp .ntjcp a .img picture,
#pro_list li a .img picture,
.n_pro_hz1 .hz .left .img picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 17.4 产品轮播左右切换按钮（2026-09-24，狗哥：加按钮可手动切换）。
   悬浮在轮播两侧、图片带垂直居中；样式沿用新闻轮播 .jt 的圆形按钮语言。 */
.s_pro .w1600 {
    position: relative;
}
.s_pro .pro_ctl .jt {
    position: absolute;
    top: 10.125rem;              /* 图片带高 20.3125rem 的一半，视觉对准图心 */
    transform: translateY(-50%);
    z-index: 5;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #d9dee7;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(13, 42, 107, .10);
    color: #133690;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all .3s ease;
    user-select: none;
}
.s_pro .pro_ctl .jt.prev { left: -1.625rem; }
.s_pro .pro_ctl .jt.next { right: -1.625rem; }
.s_pro .pro_ctl .jt.next .iconfont {
    display: inline-block;
    transform: scaleX(-1);
}
.s_pro .pro_ctl .jt:hover {
    background-color: #133690;
    border-color: #133690;
    color: #fff;
}
.s_pro .pro_ctl .jt.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}
.s_pro .pro_ctl .jt.swiper-button-disabled:hover {
    background-color: #fff;
    border-color: #d9dee7;
    color: #133690;
}
/* 视口装不下外悬量时收进来，否则箭头被屏幕边缘切一半 */
@media (max-width: 1690px) {
    .s_pro .pro_ctl .jt.prev { left: .5rem; }
    .s_pro .pro_ctl .jt.next { right: .5rem; }
}
@media (max-width: 768px) {
    .s_pro .pro_ctl .jt { width: 2.5rem; height: 2.5rem; }
    .s_pro .pro_ctl .jt.prev { left: .25rem; }
    .s_pro .pro_ctl .jt.next { right: .25rem; }
}

/* ==========================================================================
   18. 全球布局地图点位重校准（2026-09-24 狗哥：城市/国家位置不对；
       2026-09-28 二次修正：按狗哥截图箭头逐点标定）
   --------------------------------------------------------------------------
   底图 ywmap.png 是风格化点阵世界地图 —— 各洲比例不统一、整体比真实
   经纬度偏西偏移（东亚/欧洲尤其明显），按真实经纬度推坐标必然全错
   （实测等距圆柱/Mercator 全局拟合最高只有 43%/77% 命中，均为退化解）。
   唯一可靠方法：以底图自身海岸线目视校准，并用狗哥的箭头标注做基准。

   二次校准方法（2026-09-28）：程序化检测狗哥截图中的蓝色圆点中心，
   与 CSS 百分比做最小二乘拟合出截图地图矩形（13 点全部 <1px 命中，
   证明渲染层无偏移），再把红色箭头尖端换算成底图坐标作为目标位置。

   定位方式为「中心锚定」：translate(-50%,-50%) 后 top/left = 点中心，
   与视口无关；手机端 media.css 把 d1 大盒子缩成小盒子时也自动居中。
   ========================================================================== */
.n_map .ywmap .d { transform: translate(-50%, -50%); }
/* Xi'an（西安，大圆）—— 狗哥箭头指定 (1235,303) */
.n_map .ywmap .d1 { top: 40.95%; left: 74.62%; }
/* Vietnam —— 狗哥箭头指定 (1247,401) */
.n_map .ywmap .d2 { top: 54.19%; left: 75.35%; }
/* Thailand —— 依底图半岛 + 越南锚点推算 (1223,437) */
.n_map .ywmap .d3 { top: 59.05%; left: 73.90%; }
/* United Arab Emirates —— 三校：狗哥箭头尖 (1011,386)，风格化波斯湾缺口南岸
   （上轮 1128,392 其实坐在印度次大陆点阵里，故整体西移） */
.n_map .ywmap .d4 { top: 52.16%; left: 61.09%; }
/* Kazakhstan */
.n_map .ywmap .d5 { top: 30.41%; left: 67.07%; }
/* Turkey */
.n_map .ywmap .d6 { top: 37.84%; left: 62.24%; }
/* Indonesia（爪哇岛一带） */
.n_map .ywmap .d7 { top: 63.92%; left: 77.58%; }
/* Malaysia（马来半岛，半岛南下 (1227,465)） */
.n_map .ywmap .d8 { top: 62.84%; left: 74.14%; }
/* Mexico */
.n_map .ywmap .d9 { top: 52.70%; left: 22.96%; }
/* India —— 三校：次大陆半岛中部 (1115,395)（上轮 1175,392 已漂到孟加拉湾海面） */
.n_map .ywmap .d10 { top: 53.38%; left: 67.37%; }
/* Italy（亚平宁靴子西北端，狗哥箭头 ≈(786,290)） */
.n_map .ywmap .d11 { top: 41.22%; left: 48.64%; }
/* Germany —— 狗哥箭头指定 (832,228) */
.n_map .ywmap .d12 { top: 30.81%; left: 50.27%; }
/* Australia */
.n_map .ywmap .d13 { top: 75.68%; left: 82.06%; }

/* ==========================================================================
   19. 联系区内置地图（2026-09-28 狗哥：查看地图不用点按钮，直接内置）
   --------------------------------------------------------------------------
   四个带联系区的页面（global_layout / contact / contact_information /
   message）把「See on the Map」外跳按钮换成 Leaflet 内置地图（js/emap.js）。
   瓦片走高德栅格服务（免密钥、中文标注），坐标为 GCJ-02，见 emap.js 头注。
   Leaflet 本体在 css/leaflet.css 与 js/leaflet.js（1.9.4，本地文件）。

   19.1 一分为二改版（2026-09-28 狗哥：不要公司名，左=联系方式，右=地图）：
   联系区结构改为 left = h6 + .top(邮箱电话) + .line + 地址p，
   right = 整块地图。style.css 原样式挂在 .right .top / .right .map 下，
   内容挪进 left 后在此补齐同款（桌面端 769px+ 生效，移动端 media.css 兜底）。
   ========================================================================== */
.n_contact .hz { align-items: stretch; }   /* 让右栏地图与左栏等高 */
/* 左栏联系方式（原 right .top/.map p 的样式搬到 left） */
.n_contact .hz .left .top a {
    display: block;
    font-family: 'Inter-SemiBold';
    font-size: 1.5rem;
    line-height: 2.625rem;
    color: #133690;
}
.n_contact .hz .left .top a:hover { color: #082EA5; }
.n_contact .hz .left .line {
    width: 100%;
    height: 1px;
    background-color: #dadade;
    margin: 2.5rem 0;
}
.n_contact .hz .left > p {
    font-family: 'Inter-Medium';
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: #62666a;
}
/* 右栏地图占满整栏，与左栏等高（min-height 兜底窄屏） */
.n_contact .hz .right { display: flex; }
.n_contact .gy_emap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 380px;
    border: 1px solid #ccd2dc;
    border-radius: 6px;
    background: #eef1f6;
}
/* 品牌色别针（divIcon 画法，免图片依赖） */
.gy_pin i {
    display: block;
    width: 20px;
    height: 20px;
    background: #082EA5;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px rgba(8, 46, 165, .35);
}
/* 版权行弱化 */
.gy_emap .leaflet-control-attribution {
    font-size: 11px;
    background: rgba(255, 255, 255, .8);
}
@media (max-width: 768px) {
    .n_contact .gy_emap { min-height: 260px; }
}

/* --- copy3 20260928: 数字格横排 + 愿景/价值观排版 --- */
.n_company li{display:flex;align-items:center;gap:1.25rem;}
.n_company li h6{order:2;margin-bottom:0;}
.n_company li .txt{order:1;}
.n_culture ul li .txt .ar_article .vision_txt{font-size:1.75rem;line-height:1.6;font-weight:600;max-width:100%;}
.n_culture ul li{min-height:31rem;}
.n_culture ul li .txt h2{margin-bottom:.75rem;}
.n_culture ul li .txt .ar_article{max-width:92%;margin-bottom:.75rem;}
.n_culture .v_item{margin-bottom:.75rem;}
.n_culture .v_item:last-child{margin-bottom:0;}
.n_culture .v_item h4{font-family:'Inter-SemiBold','Noto Sans SC',sans-serif;font-weight:700;font-size:.9375rem;line-height:1.3;color:#fff;}
.n_culture .v_item h4 span{display:block;}
.n_culture .v_item p{margin-top:.2rem;font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.85);}

/* ===== copy4 20260928 愿景卡对齐 + 风采矩形 ===== */
.n_culture ul li .txt{height:100%;}
.n_culture ul li .img{height:100%;}
.n_culture ul li .img img{width:100%;height:100%;object-fit:cover;}
.n_staff .swiper-slide:nth-child(odd) .img:first-child,
.n_staff .swiper-slide:nth-child(even) .img:last-child{grid-column:auto;}
.n_staff .swiper-slide .img{height:14.5rem;overflow:hidden;}
.n_staff .swiper-slide .img img{width:100%;height:100%;object-fit:cover;}

/* 16.5 页头下拉图片等高撑满（2026-09-29，狗哥反馈：应用领域下拉列表 6 项
   把面板撑高后，右侧图仍按自然比例矮矮一条顶在上面，下方大片留白。
   改法：图随面板拉伸等高 + object-fit:cover 裁切；min-height 保底，
   避免「新闻动态」这种 2 项矮列表把图压成扁条。 */
#pc_header .ej_box { align-items: stretch; }
#pc_header .ej_box .t2_img .img { height: 100%; }
#pc_header .ej_box .t2_img img {
    width: 100%;
    height: 100%;
    min-height: 14.5rem;
    object-fit: cover;
}

/* 16.6 首页第 2 屏 Banner 中英双版切换（2026-09-29）
   狗哥提供了 EN / CN 两张成品 Banner（3840×2880），背景图随站内语言切换：
   英文态用 EN 版（COMPLETE RANGE），中文态用 CN 版（种类齐全·价格优势·售后良好）。
   i18n.js 会在 <html> 上设 lang 属性，这里用属性选择器切 picture 显隐。
   左侧原有文字块保留，图片仅作背景辅助展示。 */
#banner .slide-photo .pic-zh { display: none; }
html[lang="zh-CN"] #banner .slide-photo .pic-en { display: none; }
html[lang="zh-CN"] #banner .slide-photo .pic-zh { display: block; }

/* 16.7 第 2 屏 Banner 压暗（2026-09-29）：狗哥定位「图片只是辅助展示」，
   原遮罩中段太透，Banner 自带的大字与左侧文案打架。第 2 屏单独加深，
   让 Banner 大字退成隐约背景纹理，前景文字层级优先。 */
#banner .slide-photo.slide-dim .mask {
    background:
        linear-gradient(90deg,
            rgba(6, 18, 52, .97) 0%,
            rgba(9, 26, 74, .88) 45%,
            rgba(10, 30, 84, .45) 78%,
            rgba(8, 24, 68, .58) 100%),
        linear-gradient(180deg,
            rgba(6, 18, 52, .62) 0%,
            rgba(6, 18, 52, .28) 40%,
            rgba(6, 18, 52, 0) 68%);
}

/* ==========================================================================
   17. 转化提升改造（2026-10-22，狗哥三条 P0：表单字段 / 短链 / 首屏参数）
   ========================================================================== */

/* 17.1 询盘表单补国家下拉（与 input 同一套下划线观感，箭头自绘）
   原生 select 在深色底上默认是白底下拉，文字继承 #fff 会看不见，所以
   option 显式给深蓝字 + 白底。未选状态用 :invalid 压成半透明占位色。 */
.n_message .inp-sel { position: relative; }
.n_message select {
    font-family: 'Inter-Medium'; font-size: 1.25rem; line-height: 1.5;
    color: #fff; width: 100%; padding: 3.125rem 1.6rem 1.5625rem 0;
    border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2);
    background: transparent; cursor: pointer; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.n_message select:invalid { color: rgba(255, 255, 255, .68); }
.n_message select option { color: #0A1F5C; background: #fff; font-size: 1rem; }
.n_message .inp-sel::after {
    content: ''; position: absolute; right: .5rem; bottom: 1.95rem;
    width: .5rem; height: .5rem; border-right: 1.5px solid rgba(255, 255, 255, .65);
    border-bottom: 1.5px solid rgba(255, 255, 255, .65);
    transform: rotate(45deg); pointer-events: none;
}

/* 17.2 产品详情页首屏「关键参数滑卡」
   位置在 n_pro_hz1 里、产品图与简介之下，整宽一行；一屏内能扫完 8 个
   最关键的规格，判断这台机能不能干自己的活。数据取自本页参数表，无编造。 */
.gy_specs { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid #E3EAF4; }
.gy_specs_hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.15rem; }
.gy_specs_hd h3 { font-family: 'Inter-SemiBold'; font-size: 1.1875rem; line-height: 1.2; color: #0A1F5C; letter-spacing: -.01em; }
.gy_specs_hd p { font-family: 'Inter-Regular'; font-size: .8125rem; line-height: 1.4; color: #6B7A92; margin-top: .35rem; }
.gy_specs_cta {
    display: inline-flex; align-items: center; gap: .55rem; flex: none;
    height: 2.875rem; padding: 0 1.5rem; border-radius: 1.5rem;
    background: #0A1F5C; color: #fff; font-family: 'Inter-Medium'; font-size: .9375rem;
    transition: background .25s ease, transform .25s ease;
}
.gy_specs_cta:hover { background: #0337ED; transform: translateY(-1px); }
.gy_specs_cta i { font-size: .8125rem; transition: transform .25s ease; }
.gy_specs_cta:hover i { transform: translate(2px, -2px); }

.gy_specs_track { --n: 8; --gap: .75rem; display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: .6rem; scrollbar-width: thin; }
.gy_specs_track::-webkit-scrollbar { height: 3px; }
.gy_specs_track::-webkit-scrollbar-thumb { background: #C8D6E8; border-radius: 3px; }
.gy_specs_track::-webkit-scrollbar-track { background: #EEF3FA; }
.gy_spec {
    flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
    min-width: 8.5rem; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 6.75rem; padding: 1.05rem 1rem 1.15rem;
    background: linear-gradient(180deg, #F8FBFF 0%, #EDF4FC 100%);
    border: 1px solid #E2EAF5; border-radius: .5rem; position: relative;
}
.gy_spec::before { content: ''; position: absolute; left: 1rem; top: 1.05rem; width: 1.5rem; height: 2px; background: #22A7DC; }
.gy_spec .k {
    display: block; padding-top: 1rem;
    font-family: 'Inter-Medium'; font-size: .6875rem; line-height: 1.35;
    letter-spacing: .05em; text-transform: uppercase; color: #6B7A92;
}
.gy_spec .v {
    display: block; margin-top: .6rem;
    font-family: 'Inter-Bold'; font-size: 1.5rem; line-height: 1.1; color: #0A1F5C; white-space: nowrap;
}
.gy_spec .v em { font-style: normal; font-family: 'Inter-Medium'; font-size: .8125rem; color: #46536B; margin-left: .18rem; }
.gy_spec .v-s { font-size: 1.0625rem; line-height: 1.3; white-space: normal; }

@media (max-width: 1599px) { .gy_specs_track { --n: 6; } }
@media (max-width: 1280px) { .gy_specs_track { --n: 4; } }
@media (max-width: 768px) {
    .gy_specs { margin-top: 2rem; padding-top: 1.35rem; }
    .gy_specs_hd { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .gy_specs_hd h3 { font-size: 1.0625rem; }
    .gy_specs_cta { width: 100%; justify-content: center; height: 2.75rem; }
    .gy_specs_track { --n: 2.15; --gap: .65rem; }
    .gy_spec { min-width: 0; min-height: 6.25rem; padding: .95rem .85rem 1rem; }
    .gy_spec::before { left: .85rem; top: .95rem; }
    .gy_spec .k { font-size: .625rem; padding-top: .9rem; }
    .gy_spec .v { font-size: 1.25rem; }
    .gy_spec .v-s { font-size: .9375rem; }
}

/* 17.4 移动端表单：select 与 input 同一套内边距（media.css 无版本号，
   改它容易被 CDN 缓存住，所以移动端覆盖写在这里） */
@media (max-width: 768px) {
    .n_message select { font-size: 1rem; padding: 1.25rem 1.4rem 1.25rem 0; }
    .n_message .inp-sel::after { bottom: 1.6rem; right: .35rem; }
}

/* 17.5 产品详情页第一屏压缩（2026-10-22）
   狗哥要求「打开产品页一眼看到关键参数」。实测原版：#n_banner 占 525px，
   参数卡被顶到 1088px 以下，1000px 视口首屏看不见。
   做法：产品页 banner 加 .pro_banner 压到 240px（只是「产品中心」标题条，
   不用占半屏），首屏区上下留白收紧，手机端产品图限高。
   其他页面的 #n_banner 不受影响（只认 .pro_banner）。 */
#n_banner.pro_banner { height: 15rem; }
#n_banner.pro_banner .box h2 { font-size: 2.5rem; margin-bottom: .9rem; }
#n_banner.pro_banner .box p { font-size: 1rem; }
#n_banner.pro_banner + .mbx .hz { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.n_pro_hz1 { padding-top: 3rem; }

@media (max-width: 768px) {
    /* 手机端这块 banner 只有「产品中心」四个字，下面是同一张分类图 + 蓝色
       菜单条（m_n_nav 已经写着 CNC Lathe），留着只会把参数卡挤出首屏；
       直接隐藏，信息不丢，首屏直接进产品图与关键参数。
       banner 一撤，m_n_nav 会顶到 0 被 fixed 头部（76px）盖住，这里补回来。 */
    #n_banner.pro_banner { display: none; }
    body.page-pro #m_n_nav { margin-top: 4.75rem; }
    .n_pro_hz1 .hz .left .img { height: 14.5rem; }
    .n_pro_hz1 { padding-top: 1.5rem; padding-bottom: 2.5rem; }
    .n_pro_hz1 .hz { gap: 2rem; }
    .n_pro_hz1 .hz .left .img { height: 15.5rem; }
    .n_pro_hz1 .hz .left .pagination { top: calc(100% + .9rem); }
    .n_pro_hz1 .hz .txt h2 { font-size: 1.75rem; }
    .n_pro_hz1 .hz .txt .line { margin: .85rem 0; }
    .n_pro_hz1 .hz .txt .ms { font-size: .9375rem; line-height: 1.6rem; }
}

/* ==========================================================================
   18. 首页首屏标题改 h1（2026-10-27）
   首页此前没有 h1，首屏主标题是 h2，等于把页面主题最强的位置让出去了。
   这里把首屏那张 slide 的标题改成 h1，样式与原来的 h2 完全一致（同一套
   字号行高字体），视觉零变化，只补语义。
   ========================================================================== */
#banner .hz .txt h1 {
    font-family: 'Inter-Medium';
    font-size: 3.625rem;
    line-height: 4.375rem;
}
@media (max-width: 768px) {
    #banner .hz .txt h1 { font-size: 2rem; line-height: 1.5; }
}