@charset "utf-8";
/* ==========================================================================
   theme-refresh.css  ——  59 站前台统一美化层
   --------------------------------------------------------------------------
   加载顺序（必须放在最后）：
       css/bootstrap.min.css
       css/main.css                （首页设计系统：.home-area* / .divgsyj / .our-header）
       Themes/Default/main.css     （栏目页组件：.title8 / .img_3 / .pager / .footer-area）
       css/fontawesome-all.min.css
       css/theme-refresh.css       ← 本文件，必须最后加载

   本文件做四件事：
     1. 中和 Themes/Default/main.css 里的旧主题全局规则
        （body 12px/#555、a #555 会把新版设计降级，靠"同优先级后加载"覆盖回来）
     2. 修复 css/main.css 中因多次拼接产生的固定 height / 背景拉伸问题
     3. 统一全站的间距节奏、卡片、圆角、阴影、悬停与过渡
     4. 补上代码中在用了但从来没有定义的类
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
    --brand:        #e00000;   /* 品牌红（沿用原站主色） */
    --brand-dark:   #b30000;
    --brand-soft:   rgba(224, 0, 0, .08);
    --ink:          #191919;   /* 主文字 */
    --ink-2:        #424242;
    --muted:        #6b7280;
    --line:         #e5e7eb;
    --line-soft:    #f0f2f5;
    --surface:      #ffffff;
    --surface-2:    #f4f6f8;
    --navy:         #162342;

    --radius:       10px;
    --radius-sm:    6px;
    --radius-lg:    16px;

    --shadow-1:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-2:     0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
    --shadow-3:     0 12px 28px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);

    --gap:          24px;
    --section-y:    56px;

    --ease:         cubic-bezier(.4, 0, .2, 1);
    --dur:          .28s;

    /* 原站引用的 Poppins / luma 字体文件在工程里并不存在（46 处 404），
       这里改用一套中英文都稳妥的现代系统字体栈。 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "微软雅黑", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. 中和旧主题全局 + 重建基础排版
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--surface);
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a:hover,
a:focus { color: var(--brand); text-decoration: none; }

p { font-size: inherit; line-height: inherit; letter-spacing: normal; }

label { font-weight: 500; color: var(--ink-2); }

address { font-size: inherit; line-height: inherit; color: var(--muted); font-style: normal; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
h5, h6 { font-size: 1rem; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* 键盘焦点可见性（无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* 统一盒模型 */
*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   3. 修复 css/main.css 的固定高度与背景拉伸
      （同一选择器在 14763 行的拼接文件里定义过多次，此处统一收敛）
   -------------------------------------------------------------------------- */
.divgsyj,
.home-area2,
.home-area3,
.home-area4,
.home-area5,
.home-area6,
.homenews {
    float: none;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;      /* 原来是 100% 100%，会把背景图拉变形 */
}

.divgsyj { min-height: 175px; padding-top: 40px; padding-bottom: 40px; }

/* 区块之间不要紧挨着，避免出现"贴边"的廉价感 */
.home-area  + .home-area,
.home-area  + .home-area2,
.home-area2 + .home-area3,
.home-area3 + .home-area4,
.home-area4 + .home-area5,
.home-area5 + .home-area6,
.home-area6 + .homenews { border-top: 1px solid var(--line-soft); }

/* 内容容器 */
.container { max-width: 1200px; }
.container01 { max-width: 1200px; padding-right: 15px; padding-left: 15px; }

/* --------------------------------------------------------------------------
   4. 区块标题（首页 .our-header / 副页 .title8 .divtitlename 统一观感）
   -------------------------------------------------------------------------- */
.our-header {
    border-bottom: 0;
    padding: 0 0 18px;
    margin-bottom: 32px;
    text-align: center;
}
.our-header h3.titles1,
.our-header h1.titles1 {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 14px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    color: var(--ink);
}
/* 标题下方的红色短横线装饰（沿用 .divmpt hr 的红色） */
.our-header h3.titles1::after,
.our-header h1.titles1::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
    transform: translateX(-50%);
}
.our-header hr,
.divmpt hr { display: none; }   /* 已有 ::after 装饰，避免双横线 */

/* 副页面包屑标题条 */
.title8 {
    height: auto;
    min-height: 44px;
    margin: 0 0 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    line-height: 1.6;
}
.title8 .more { float: right; font-size: 13px; color: var(--muted); }
.title8 .more a { color: var(--muted); }
.title8 .more a:hover { color: var(--brand); }
.title8 .titlename,
.title8 .divtitlename {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}
.title8 .divtitlename a { color: var(--ink); }
.title8 .divtitlename a:hover { color: var(--brand); }

.divtitlename a { color: inherit; }

/* --------------------------------------------------------------------------
   5. 卡片 / 网格通用观感
   -------------------------------------------------------------------------- */
.box-margin-top,
.box-margin-top-2 { margin-top: 0; }

/* 侧栏卡片 */
.col-md-3 > .row > .box-margin-top,
.col-md-3 .box-margin-top {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 16px 18px;
    margin-bottom: var(--gap);
    overflow: hidden;
}

/* ---------------------------- 相册 ------------------------------------- */
.img_3 { padding: 0; }
.img_3.row,
.img_3 .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.img_3 .img-wrap {
    padding: 0 10px;
    margin-bottom: var(--gap);
}
/* 代码里写死了 style="width:135px;height:117px"，必须用 !important 才能改自适应 */
.img_3 .img-wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 135 / 117;
    object-fit: cover;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.img_3 .img-wrap a { display: block; overflow: hidden; border-radius: var(--radius); }
.img_3 .img-wrap a:hover img {
    transform: scale(1.05);
    box-shadow: var(--shadow-3);
}
.img_3 .img-wrap p {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img_3 .img-wrap p a { color: var(--ink-2); }
.img_3 .img-wrap p a:hover { color: var(--brand); }

/* ---------------------------- 产品 ------------------------------------- */
.ds_ul {
    min-height: 0;
    padding-bottom: 0;
    margin-bottom: var(--gap);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds_ul:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.ds_img img,
.ds_hoverimg img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.ds_ul_t,
.ds_hover h3,
.ds_hoverh3 {
    padding: 12px 14px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds_ul:hover .ds_ul_t,
.ds_ul:hover .ds_hoverh3 { color: var(--brand); }
.img_none, .img_nonete {
    background: var(--surface-2);
    color: var(--muted);
    border-radius: var(--radius);
}

/* ---------------------------- 下载 ------------------------------------- */
.dashed-line {
    border-bottom: 1px solid var(--line-soft);
    margin: 0;
    padding: 16px 4px;
    transition: background var(--dur) var(--ease);
}
.dashed-line:hover { background: var(--surface-2); }
.dashed-line:last-child { border-bottom: 0; }

/* ---------------------------- 招聘（表格） ----------------------------- */
.table { margin-bottom: 0; background: var(--surface); }
.table > thead > tr > th {
    border-bottom: 2px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}
.table > tbody > tr > td,
.table > tbody > tr > th { border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--surface-2); }
.bottom_border { border-bottom: 1px solid var(--line-soft); }
.text-info { color: var(--brand) !important; }

/* ---------------------------- 留言 ------------------------------------- */
.message {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease);
}
.message:hover { box-shadow: var(--shadow-2); }
.comment_reply {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 14px;
    color: var(--ink-2);
}
.text-red { color: var(--brand) !important; }

/* --------------------------------------------------------------------------
   6. 首页：业务五宫格（.DIVFELF）
      真实 DOM：.home-area6 > .container > .row > .DIVFELF ×5
                   > .col-md-20.divBUSINESS > .zhegnzhibox
                       > .heading > (.zhegnzhiboxt + h3)
                       > .zhegnzhiboxnr

      这块错位的根因在 css/main.css 的历史规则，必须逐条覆盖，否则会重现
      「标题与正文并排压叠、正文溢出到卡片外」：
        .divBUSINESS   { float:left }
        .zhegnzhibox   { float:left; width:100%; height:300px }  固定高
        .zhegnzhiboxt  { float:left; width:100%; font-size:80px } 80px 装饰大字
        .zhegnzhiboxnr { float:left; width:60% }                  正文上浮到标题旁
   -------------------------------------------------------------------------- */
.home-area6 .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;          /* 5 张卡等高 */
    margin: 0 -10px;
}
.home-area6 .row > .DIVFELF {
    display: flex;
    float: none;
    flex: 1 1 20%;
    max-width: 20%;
    padding: 0 10px;
}
.home-area6 .row > .DIVFELF > .divBUSINESS {
    display: flex;
    flex-direction: column;
    float: none;
    width: 100%;
}

.zhegnzhibox {
    display: flex;
    flex-direction: column;
    float: none;
    flex: 1 1 auto;
    width: 100%;
    height: auto;                  /* 覆盖 height:300px，改由内容决定 */
    min-height: 0;
    padding: 26px 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.zhegnzhibox:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 0, 0, .22);
    box-shadow: var(--shadow-3);
}

/* .heading 必须是 flex 列：否则 .zhegnzhiboxt 作为块级元素会被撑成整行宽
   （之前那条横贯卡片的粉色长条就是这么来的） */
.zhegnzhibox .heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    float: none;
    width: 100%;
    margin: 0;
}

/* 序号 01 / 02 …：本卡的主视觉。
   原规则是 font-size:80px 的装饰大字，改成大号红色数字 + 下方短红条 */
.zhegnzhiboxt {
    display: block;
    float: none;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    color: var(--brand);
    background: none;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zhegnzhiboxt::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    background: currentColor;
}
.zhegnzhiboxt:empty { display: none; }   /* Tag 为空时不留空块 */

.zhegnzhibox .heading h3 {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--ink);
}

/* 关键：撤销 float:left + width:60%，正文改为标题下方的正常文档流 */
.zhegnzhiboxnr {
    float: none;
    width: 100%;
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--ink-2);
    text-align: left;
    text-indent: 0;
    letter-spacing: 0;
    word-break: break-word;
    overflow: hidden;
    /* 正文是多段 <p>，-webkit-line-clamp 对块级子元素不生效，
       改用 max-height 兜住行数。取 9 行：现有文案最长约 10 行，只裁掉一行，
       既不会把某张卡撑得过高，也不会大段截断正文 */
    max-height: calc(1.85em * 9);
}
.zhegnzhiboxnr p {
    margin: 0 0 6px;
    font-size: inherit;
    line-height: inherit;
    text-indent: 0;
}
.zhegnzhiboxnr p:last-child { margin-bottom: 0; }
.zhegnzhiboxnr img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.zhegnzhiboxnr i,
.zhegnzhiboxnr .fa {
    color: var(--brand);
    margin-right: 6px;
}

/* 首页左右图文块（通用兜底；公司愿景三宫格在下方单独重排） */
.divleft h3 { font-size: 1.4rem; margin-bottom: 12px; }
.divleft span { color: var(--ink-2); line-height: 1.9; }
.divabimg { border-radius: var(--radius); box-shadow: var(--shadow-2); }

/* --------------------------------------------------------------------------
   6b. 首页：公司愿景三宫格（.divgsyj > .container01 > .gsyj ×3）
       真实 DOM（Default.aspx.cs 的 CreateAboutyj1 生成，共 3 份）：
         .divgsyj > .container01 > .gsyj[.divrtborder|.divlfborder] > div#yuanjingN
             > .divright > img.divabimg        图标
             > .divleft  > h3 + span           标题 + 描述

       css/main.css 里的历史规则是排版错乱的全部原因：
         .divgsyj { height:450px; background:url(yjb.png); background-size:100% 100% }
                   → 1800px 宽的位图被纵向拉伸，变成横贯页面的灰带
         .gsyj    { float:left; width:33.33%; height:80%; padding:40px 20px 10px }
         .divright{ float:left; width:70px;  height:80% }
         .divleft { float:left; width:80% }
                   → 70px + 80% > 100%，.divleft 有时换行、有时与图标并排，
                     于是三块内容高低不齐、图标时上时下
         .divrtborder { border-right:1px solid #ccc }  → 那两条竖分割线
   -------------------------------------------------------------------------- */
/* 去掉 yjb.png 位图背景（它被拉伸后就是那条横贯页面的灰带）。
   区块改回白底，不再让整条灰色色带压在页面上。 */
.divgsyj {
    background: var(--surface);
    background-image: none;
    padding: var(--section-y) 0;
}

.divgsyj .container01 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;              /* 三张卡等高 */
    max-width: 1170px;                 /* 与 bootstrap .container 对齐；横排排版需要更宽的文字栏 */
    margin: 0 auto;
    padding: 0 15px;
}

.divgsyj .gsyj {
    display: flex;
    flex: 1 1 0;
    float: none;
    width: auto;
    height: auto;                      /* 覆盖 height:80% */
    min-width: 0;
    padding: 0 12px;
    border: 0;                         /* 去掉 .divrtborder 的竖线 */
}
.divgsyj .gsyj:first-child { padding-left: 0; }
.divgsyj .gsyj:last-child { padding-right: 0; }

/* #yuanjingN 由 runat="server" 输出，没有 class，只能按 id 前缀选中。
   卡片内部做左右结构：左图标 / 右文字。 */
.divgsyj .gsyj > div[id^="yuanjing"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;               /* 左图标 + 右文字 */
    align-items: flex-start;           /* 三张卡的标题基线保持一致 */
    width: 100%;
    padding: 26px 24px;
    text-align: left;
    background: var(--surface-2);      /* 白底区块 + 浅灰卡，层次清楚又不压重 */
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.divgsyj .gsyj > div[id^="yuanjing"]:hover {
    transform: translateY(-4px);
    background: var(--surface);
    border-color: rgba(224, 0, 0, .18);
    box-shadow: var(--shadow-2);
}

/* 图标：固定在左侧。flex:0 0 保证它不会被右侧文字挤压变窄 */
.divgsyj .divright {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0 18px 0 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);   /* 白圆压在浅灰卡上，加一道细边才立得住 */
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
    transition: box-shadow var(--dur) var(--ease);
}
/* 图标本身是淡黄绿色线稿，悬停时不要改成品牌红底，会打架 */
.divgsyj .gsyj > div[id^="yuanjing"]:hover .divright {
    box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
}
.divgsyj .divabimg {
    float: none;
    width: 34px;
    height: 34px;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;                  /* 撤销全站 .divabimg 的阴影，图标不该有白框 */
}

/* 文字列：撤销 float:left + width:80%，改为图标右侧的 flex 子项 */
.divgsyj .divleft {
    display: block;
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;                      /* 允许在窄栏里正常换行而不撑破卡片 */
}
.divgsyj .divleft h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--ink);
}
.divgsyj .divleft span {
    display: block;
    float: none;
    width: 100%;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7. 首页：合作伙伴滚动区（.section-parter 原先完全未定义）
   -------------------------------------------------------------------------- */
.section-parter { padding: var(--section-y) 0; background: var(--surface); }
.section-parter.oxh { overflow: hidden; }
.ThisCompanyName-section-top {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .02em;
}
.ThisCompanyName-bottom-border {
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: var(--brand);
}
.blank30 { height: 30px; clear: both; }
.bx_wrap { position: relative; margin-top: 26px; overflow: hidden; }
.bx_container { width: 100%; }

/* 左右箭头：Themes/Default/main.css 用 ../images/icon_arrow_*.gif，
   这两个文件在工程里并不存在，所以箭头一直是"透明不可见"的；
   同时原规则把 left 写成死的 75px / 647px，宽屏下会飘到内容中间。
   这里改成 CSS 绘制的箭头，并按容器左右边缘定位。 */
.bx_wrap a.prev,
.bx_wrap a.next {
    background-image: none;
    background-color: rgba(25, 25, 25, .06);
    border-radius: var(--radius-sm);
    left: auto;
    right: auto;
    transition: background-color var(--dur) var(--ease);
}
.bx_wrap a.prev { left: 0; }
.bx_wrap a.next { right: 0; }
.bx_wrap a.prev:hover,
.bx_wrap a.next:hover { background-color: var(--brand); }
.bx_wrap a.prev::before,
.bx_wrap a.next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    text-indent: 0;
    border-left: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: translate(-60%, -50%) rotate(45deg);
    transition: border-color var(--dur) var(--ease);
}
.bx_wrap a.next::before { transform: translate(-40%, -50%) rotate(-135deg); }
.bx_wrap a.prev:hover::before,
.bx_wrap a.next:hover::before { border-color: #fff; }
.bx_container ul { list-style: none; margin: 0; padding: 0; }
.bx_container ul li,
.bx_container > ul > div {
    display: inline-block;
    vertical-align: middle;
    margin: 0 14px;
}
.bx_container img {
    max-height: 64px;
    width: auto;
    opacity: 1;
    transition: transform var(--dur) var(--ease);
}
.bx_container img:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   8. 首页：在线留言（.footer-area / .contactly / .divlym）

      这块原先整个是 Themes/Default/liuyanbj.png 一张「合成图」：蓝色渐变底、
      白色圆角面板、右侧卡车，全都画在图里。表单只能靠
        .contactly { width:800px; margin-left:15%; margin-top:11% }
      硬塞进白板的左侧空白区 —— 这就是「标题和输入框对不齐、验证码挤成一团、
      提交按钮孤零零挂在左下角、卡车被拉伸裁切」的根源。任何布局调整都只能
      在图里对位置，换个屏宽就错位。

      现改为真实布局：
        .footer-area  蓝色渐变底（取样自原图 #0090D4 / #0197D4）
        .container    白色圆角卡片（overflow:hidden 让卡车贴右缘裁切）
        .contactly    左列表单
        .lym-truck    右列卡车
   -------------------------------------------------------------------------- */
.footer-area {
    float: none;
    width: 100%;
    min-height: 0;
    padding: var(--section-y) 24px;     /* 左右留白，卡片两侧始终能露出一线蓝 */
    background: linear-gradient(118deg, #0a99d6 0%, #008cce 48%, #0082c8 100%);
    border-top: 0;
}

.footer-area .container {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    column-gap: 40px;
    width: auto;
    max-width: 1140px;
    margin: 0 auto;
    padding: 44px 56px;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(3, 61, 96, .18);
    overflow: hidden;                  /* 卡车贴右缘，硬切处正好被卡片边缘收住 */
}

/* 关键修复：bootstrap.min.css 给 .container 加了清除浮动伪元素
     .container:before,.container:after{ content:" "; display:table }
   容器一旦变成 grid，这两个伪元素就成了货真价实的网格单元：
     ::before 占掉第 1 行第 1 列 → 表单被挤到第 2 列
     .lym-truck 掉到第 2 行     → 卡车跑到左下方
   卡片随之被撑成竖版。必须先关掉它们。 */
.footer-area .container::before,
.footer-area .container::after {
    content: none;
    display: none;
}

/* 左列：表单。
   选择器提到 .footer-area .contactly 这一级，确保压住旧主题的
     .contactly{ width:800px; float:left; margin-left:15% }
   —— 800px 的表单会溢出到卡片外被 overflow:hidden 裁掉，后半段正是
   「联系方式」「验证码」两格，表现就是它们凭空消失。 */
.footer-area .contactly {
    grid-column: 1;
    float: none;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;                        /* 卡片内边距统一由 .container 给 */
}
.footer-area .contactly .divlym { float: none; width: 100%; }

/* 标题改为与输入框左对齐，红线同样左对齐 */
.contactly .divlym h3 {
    margin: 0 0 28px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}
.contactly .divlym h3 span {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}
.contactly .divlym h3 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand);
}

/* 表单：两列栅格。原来靠 bootstrap 的 col-md-6 浮动列，6 列挤在 800px 里 */
.divlym form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    margin: 0;
}
.divlym form > .has-padding {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
/* 验证码：输入框 + 图片排在同一行。
   这里绝不能用 :nth-child()——<form runat="server"> 会在最前面自动注入
   __VIEWSTATE / __EVENTVALIDATION 两个隐藏 input，子元素序号整体后移，
   之前「走货需求」抢到提交按钮的 grid-column、整行撑满就是这么来的。 */
.divlym form > .has-padding:has(img) {
    display: flex;
    align-items: center;
    gap: 10px;
}
.divlym form > .has-padding:has(img) .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
.divlym form > .has-padding:has(img) a {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
/* 提交按钮独占一行：用 :last-child，与隐藏域数量无关 */
.divlym form > .has-padding:last-child {
    grid-column: 1 / -1;
    padding-top: 4px;
}
.divlym form > .has-padding:last-child .btn-contactus {
    min-width: 168px;
}

/* 右列：卡车（已抠成透明底，白底不再糊在卡片上）。
   margin-right 负值抵消 .container 的内边距，让卡车贴住卡片右缘。 */
.lym-truck {
    grid-column: 2;
    margin: 0 -56px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.lym-truck img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 320px;                 /* 限高，卡片不会被图撑高 */
    height: auto;
    object-fit: contain;
    object-position: right center;
}

.has-padding { padding: 0 8px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   9. 表单控件（.txtinput-required 原先未定义）
   -------------------------------------------------------------------------- */
.form-control,
.txtinput-required {
    display: block;
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus,
.txtinput-required:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: 0;
}
.form-control::placeholder,
.txtinput-required::placeholder { color: #9ca3af; }
textarea.form-control { height: auto; min-height: 120px; }

/* 验证码那一行：输入框 + 换一张图片 */
.has-paging,
.has-padding:has(img) { display: flex; align-items: center; gap: 10px; }
.has-padding img {
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   10. 按钮（.btn-contactus / .btn-loading2 原先未定义）
   -------------------------------------------------------------------------- */
.btn-contactus,
.btn-loading2 {
    display: inline-block;
    height: 44px;
    padding: 0 34px;
    font-size: 15px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.btn-contactus:hover,
.btn-loading2:hover {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(224, 0, 0, .28);
}
.btn-contactus:active,
.btn-loading2:active { transform: translateY(0); }

.btn-black {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    border-radius: 999px;
}
.btn-black:hover { background: #0f1a33; border-color: #0f1a33; color: #fff; }

.btn-link { color: var(--brand); border-radius: var(--radius-sm); }
.btn-link:hover { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   11. 分页（副页 .pager 原先是 height:30px 的紧凑条）
   -------------------------------------------------------------------------- */
.pager {
    height: auto;
    line-height: normal;
    margin: 32px 0 0;
    padding: 0;
    text-align: center;
    letter-spacing: 0;
}
.pager a,
.pager span,
.pager input {
    display: inline-block;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    margin: 0 3px;
    line-height: 36px;
    font-size: 14px;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: all var(--dur) var(--ease);
}
.pager a:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}
.pager .current,
.pager span[style*="bold"],
.pager > span:not([style]) {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. 详情页正文
   -------------------------------------------------------------------------- */
.article-content,
.detail-content,
.content-body {
    font-size: 15px;
    line-height: 1.95;
    color: var(--ink-2);
}
.article-content img,
.detail-content img,
.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 12px 0;
}
.article-content table,
.detail-content table { max-width: 100%; }

/* 日期 / 元信息 */
.date { color: var(--muted); font-size: 13px; }
.pull-right .date { white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. 通用工具类
   -------------------------------------------------------------------------- */
.divmpt,
.divmpt2 {
    float: none;
    min-height: 0;
    height: auto;
    margin-bottom: var(--gap);
}
.titlename { font-weight: 600; color: var(--ink); }

/* 让所有卡片型容器里的图片不变形 */
.box-margin-top img,
.ds_img img,
.img-wrap img { object-fit: cover; }

/* --------------------------------------------------------------------------
   13b. 全站页脚（#footer —— Controls/BottomNav.ascx / BottomNav1.ascx）

        DOM：
          #footer
            > .container
              > .divft3
                > .footerrt              logo
                > .footermd              > .footlx（联系方式富文本）
                                         + ul.footerNav（当前为空）
                > .footerweixin.footerlf > #weixin > ul > li > img（二维码）
            > .footercopy-text > .divcopyright

        Themes/Default/main.css 里的老规则是排版失衡的根源：
          .footerrt { float:left; width:25%; margin-left:10% }
          .footermd { float:left; width:40% }
          .footerlf { float:left; width:25% }
            → 10% + 25% + 40% + 25% = 100%：logo 被那 10% 的 margin 整体推歪，
              三栏又各自从顶部起排，基线永远对不齐
          .divft3 { min-height:180px; border-bottom:1px solid #fff }
            → 固定高度把版权行顶得很远，纯白 1px 线条也太刺眼
          .divcopyright { width:1000px; font-size:9px }
            → 固定宽度窄屏会溢出，9px 又小到看不清
          .footerweixin img { width:150px; height:160px }
            → 二维码被拉成非正方形，放大镜一扫就失败
   -------------------------------------------------------------------------- */
#footer {
    float: none;
    width: 100%;
    padding: 52px 0 0;
    background: #162342;
    color: #fff;
    z-index: 2;
}
#footer .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 三栏栅格 + 统一垂直居中，取代 float + 百分比宽度。
   第一列用 auto：列宽跟随 logo 实际尺寸，不再撑出大片空白 */
.divft3 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 48px;
    width: 100%;
    min-height: 0;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* 第一栏：logo */
.footerrt {
    float: none;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.footerrt img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 92px;
    object-fit: contain;
}

/* 第二栏：联系方式。富文本里的 <p> 已被 SafeSummary 剥掉，
   换行靠 <br>，所以行距只能由 line-height 给出 */
.footermd {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;                        /* 旧主题窄屏下给它加过 padding:20px */
}
.footlx {
    float: none;
    width: 100%;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 2.15;
    letter-spacing: .01em;
    word-break: break-word;
}
.footlx p { margin: 0; }
.footlx a { color: inherit; text-decoration: none; }
.footlx a:hover { color: #fff; text-decoration: underline; }

/* 导航列表当前是空的（Nav.InnerHtml 被注释掉），不要让它占位 */
ul.footerNav { margin: 0; padding: 0; list-style: none; }
ul.footerNav:empty { display: none; }
ul.footerNav li { display: inline-block; margin: 0 16px 0 0; }
ul.footerNav a { color: rgba(255, 255, 255, .78); }

/* 第三栏：二维码。必须正方形，否则扫不出来 */
.footerweixin,
.footerweixin.footerlf {
    float: none;
    width: auto;
    margin: 0;
}
.footerweixin ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footerweixin li {
    margin: 0;
    padding: 0;
    line-height: 0;
    list-style: none;
}
.footerweixin img {
    display: block;
    float: none;
    width: 124px;
    height: 124px;
    padding: 8px;                      /* 白边由 padding 给，不再用硬黑框 */
    margin: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.footerweixin img:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .36);
}
.footerweixin-cap {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
    text-align: center;
    letter-spacing: .04em;
}

/* 版权条：整幅铺底，与上方内容拉开层次 */
.footercopy-text {
    float: none;
    width: 100%;
    margin: 0;
    padding: 18px 0 22px;
    background: rgba(0, 0, 0, .18);
}
.divcopyright {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    font-size: 12.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   13c. 头部与移动端菜单（汉堡按钮 + 右侧抽屉菜单）

        DOM（Main.master + Controls/TopNav.ascx.cs 动态生成）：
          #header > .header-container
            > #smile-logo                     （内含 <img>）
            > #Nav  → <button class="hamburger unactive hamburger-menu is-closed">
                         <span class="hamb-top"></span>
                         <span class="hamb-middle"></span>
                         <span class="hamb-bottom"></span>
                       </button>
                     + <ul id="nav" class="main-menu"> … </ul>
            > #Yuming                         （空容器）
          .menu-responsive                   （同一份 TopNav 的第二个实例）
            > .close-icon + 又一份 #Nav
          .overlay-menu

        原始缺陷：
          css/main.css 的 .hamburger{ display:none } 没有任何断点把它放出来，
          #header .main-menu（width:900px）也没有在窄屏隐藏 ——
          于是手机上既看不到汉堡键，又把整条桌面菜单硬塞进头部。
   -------------------------------------------------------------------------- */

/* 汉堡按钮：三根横条，展开时旋转成 X */
#header .hamburger {
    display: none;                     /* 只在 ≤991px 由下方断点显示 */
    width: 44px;
    height: 44px;
    right: 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur) var(--ease);
}
#header .hamburger:hover { background: var(--brand-soft); }

#header .hamburger span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .18s linear;
}
#header .hamburger .hamb-top    { top: 15px; }
#header .hamburger .hamb-middle { top: 21px; }
#header .hamburger .hamb-bottom { top: 27px; }

/* 撤掉 css/main.css 里 hover 时第一根条的上移，否则会和 X 变换打架 */
#header .hamburger:hover span:first-child { transform: none; }

/* 展开态：上下两条交叉成 X，中间一条淡出 */
body.nav-open #header .hamburger .hamb-top    { transform: translateY(6px) rotate(45deg); }
body.nav-open #header .hamburger .hamb-middle { opacity: 0; transform: scaleX(.3); }
body.nav-open #header .hamburger .hamb-bottom { transform: translateY(-6px) rotate(-45deg); }

/* ---- 头部「登录」按钮 ----
   由 Controls/Yuming.ascx 输出：<ul class="menu-attached"><li class="link-lang"><a>登录</a></li></ul>
   css/main.css 里它是 padding:1px 7px !important 的紧贴小方块、文字还是 #000，
   挤在 logo 右边很难看。这里做成正常的红色胶囊按钮。 */
#header .menu-attached {
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header .menu-attached > li {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
}
#header .menu-attached > li.link-lang {
    padding: 0 !important;             /* 压掉 main.css 的 padding:1px 7px !important */
    background: var(--brand);
    border-radius: 8px;
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
#header .menu-attached > li.link-lang:hover {
    background: var(--brand-dark);
    box-shadow: 0 6px 16px rgba(224, 0, 0, .28);
}
#header .menu-attached > li.link-lang > a {
    display: block;
    float: none;
    margin: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .04em;
    color: #fff;
    text-decoration: none;
}
#header .menu-attached > li.link-lang > a:hover {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991px) {
    /* ---- 头部：不再固定 180px / 80px，改为统一的 64px ---- */
    #header,
    .sticky #header {
        height: 64px;
        min-height: 64px;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
    }
    /* 头部改成三段固定位置：logo 靠左，登录与汉堡键钉在右侧。
       这里刻意不用 flex 排序 + 自动外边距 —— 旧主题给 .main-menu 的
       width:900px / flex-grow:1 在窄屏会撑出一大片空白，
       用绝对定位把两侧元素钉死，完全不依赖容器宽度分配。 */
    #header .header-container {
        position: relative;
        height: 64px;
        padding-left: 16px;
        padding-right: 60px;           /* 给右侧汉堡键留出位置 */
        gap: 0;
    }
    #header #smile-logo,
    .sticky #header #smile-logo {
        max-width: 170px;
        margin: 0;
    }
    #header #smile-logo img { display: block; max-height: 38px; width: auto; }

    /* 桌面菜单让位，汉堡键出场 */
    #header .main-menu { display: none !important; }

    /* 头部里的两个 div：TopNav 容器（放汉堡键）与 Yuming 容器（放登录），
       都钉在右侧、垂直居中，宽度按内容收缩 */
    #header .header-container > div {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: auto;
        min-width: 0;
    }
    #header .header-container > div:last-of-type { right: 56px; }   /* 登录 */
    #header .header-container > div:first-of-type { right: 6px; }   /* 汉堡键 */

    #header .hamburger {
        display: block;
        position: relative;            /* 从 absolute 改回参与文档流，
                                          但仍需 relative 作为三根横条的定位基准 */
        top: auto;
        bottom: auto;
        right: auto;
        margin: 0;
    }

    /* 窄屏下登录按钮收紧一点 */
    #header .menu-attached > li.link-lang > a {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* ---- 抽屉菜单：从右侧滑入，头部保持可见 ---- */
    .menu-responsive {
        display: block;                /* 覆盖 css/main.css 的 display:none */
        position: fixed;
        top: 64px;                     /* 紧贴头部下沿 */
        right: 0;
        bottom: 0;
        left: auto;
        width: 86vw;
        max-width: 340px;
        height: auto;
        z-index: 60;
        padding: 0 0 28px;
        background: var(--surface);
        box-shadow: -16px 0 44px rgba(9, 20, 38, .22);
        transform: translateX(100%);
        visibility: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform .34s var(--ease), visibility .34s var(--ease);
    }
    body.nav-open .menu-responsive {
        transform: translateX(0);
        visibility: visible;
    }

    /* 抽屉里那份 TopNav 会再输出一个汉堡键，去掉 */
    .menu-responsive .hamburger { display: none !important; }

    /* ---- 遮罩：只盖住头部以下的区域，头部与汉堡键仍可点击 ---- */
    .overlay-menu {
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 55;
        background: rgba(9, 20, 38, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s var(--ease), visibility .3s var(--ease);
    }
    body.nav-open .overlay-menu { opacity: 1; visibility: visible; }
    body.nav-open { overflow: hidden; }          /* 展开时锁定页面滚动 */

    /* ---- 关闭按钮 ----
       css/main.css 把它放在 left:-60px（面板外面），这里挪回面板内右上角。
       另外工程里并没有 fonts/material-icons 这个目录（@font-face 指向 404），
       .material-icons 会退化成普通字体，把 "close" 显示成英文单词，
       所以把文字设为 font-size:0 隐藏，改用两条伪元素画叉。 */
    .menu-responsive .close-icon {
        position: absolute;
        left: auto;
        right: 14px;
        top: 14px;
        display: block;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border-radius: 50%;
        color: var(--ink-2);
        font-size: 0;
        line-height: 1;
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .menu-responsive .close-icon:hover {
        background: var(--brand-soft);
        color: var(--brand);
    }
    .menu-responsive .close-icon::before,
    .menu-responsive .close-icon::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        left: 11px;
        right: 11px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .menu-responsive .close-icon::before { transform: rotate(45deg); }
    .menu-responsive .close-icon::after  { transform: rotate(-45deg); }

    /* ---- 菜单列表 ---- */
    .menu-responsive .main-menu {
        padding: 56px 0 0;
        margin: 0;
        list-style: none;
        text-align: left;
    }
    .menu-responsive .main-menu > li {
        display: block;
        margin: 0;
        border-bottom: 1px solid var(--line-soft);
    }
    .menu-responsive .main-menu > li > a {
        display: block;
        padding: 15px 22px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--navy);
        text-decoration: none;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .menu-responsive .main-menu > li > a:hover,
    .menu-responsive .main-menu > li.active > a {
        color: var(--brand);
        background: var(--brand-soft);
    }
    /* 二级菜单。
       Themes/Default/main.css 里有给桌面 hover 下拉用的
         #nav li ul { display:none; position:absolute; top:55px; ... }
       这是 id 选择器（1,0,2），优先级高过类选择器；而抽屉里那份 <ul>
       同样带 id="nav"，于是二级菜单被一起 display:none 掉 ——
       「公司介绍 / 联系我们 / 员工招聘 / 客服中心 / 隐私条款」这 5 个页面
       在手机上就永远点不到。抽屉里没有 hover，必须改回常驻的静态块。 */
    .menu-responsive #nav > li > ul,
    .menu-responsive .main-menu > li > ul {
        display: block !important;     /* 压掉 #nav li ul{display:none} */
        position: static !important;   /* 压掉 #nav li ul{position:absolute;top:55px} */
        top: auto;
        width: auto;
        min-width: 0;
        z-index: auto;
        margin: 0;
        padding: 4px 0 10px;
        list-style: none;
        border: 0;
        background: var(--surface-2);
    }
    .menu-responsive #nav > li > ul > li,
    .menu-responsive .main-menu > li > ul > li {
        float: none;
        border-bottom: 1px solid rgba(22, 35, 66, .06);
        list-style: none;
    }
    .menu-responsive #nav > li > ul > li:last-child,
    .menu-responsive .main-menu > li > ul > li:last-child { border-bottom: 0; }
    .menu-responsive #nav > li > ul > li > a,
    .menu-responsive .main-menu > li > ul > li > a {
        display: block;
        padding: 11px 22px 11px 38px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink-2);
        text-decoration: none;
    }
    .menu-responsive #nav > li > ul > li > a:hover,
    .menu-responsive .main-menu > li > ul > li > a:hover {
        color: var(--brand);
        background: rgba(224, 0, 0, .05);
    }
}

/* --------------------------------------------------------------------------
   14. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    :root { --section-y: 48px; }
    .home-area6 .row > .DIVFELF { flex-basis: 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 991px) {
    :root { --section-y: 40px; --gap: 18px; }
    .container, .container01 {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
    body { font-size: 15px; }
    /* 平板：图片与媒体不超出栏宽 */
    img, video, iframe, embed { max-width: 100%; }

    /* 副页：内容区与侧栏改为上下堆叠，侧栏不再被 col-md-pull 影响 */
    [class*="col-md-pull"],
    [class*="col-md-push"] { right: auto; left: auto; }

    .home-area6 .row > .DIVFELF { flex-basis: 50%; max-width: 50%; }
    .img_3 .img-wrap { flex-basis: 33.3333%; max-width: 33.3333%; }

    .title8 { margin-bottom: 16px; }
    .contactly .divlym h3 { font-size: 1.5rem; }

    /* 在线留言：卡片改上下堆叠，卡车整幅挪到表单下方 */
    .footer-area .container {
        grid-template-columns: 1fr;
        row-gap: 24px;
        padding: 32px 28px;
    }
    /* 单列时必须清掉显式列号，否则会生成隐式第 2 列，又变回左右并排 */
    .footer-area .contactly,
    .lym-truck { grid-column: auto; }
    .lym-truck {
        margin: 0 -28px;
        justify-content: center;
    }
    .lym-truck img { width: auto; max-width: 100%; max-height: 220px; }

    /* 愿景三宫格：平板下收窄内边距与图标，仍保持三列横排 */
    .divgsyj .gsyj { padding: 0 8px; }
    .divgsyj .gsyj > div[id^="yuanjing"] { padding: 22px 18px; }
    .divgsyj .divright {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        margin: 0 14px 0 0;
    }
    .divgsyj .divabimg { width: 30px; height: 30px; }

    /* 页脚：三栏改上下堆叠并居中 */
    .divft3 {
        grid-template-columns: 1fr;
        justify-items: center;
        column-gap: 0;
        row-gap: 28px;
        text-align: center;
    }
    .footlx { text-align: center; }
}

@media (max-width: 767px) {
    :root { --section-y: 32px; }
    body { font-size: 14px; }

    /* 手机：收紧两侧留白，并杜绝横向滚动 */
    .container, .container01 {
        padding-left: 16px;
        padding-right: 16px;
    }
    html, body { overflow-x: hidden; }
    a, button, input, textarea, .btn { -webkit-tap-highlight-color: transparent; }

    /* 触控目标不小于 44px */
    .btn-contactus, .btn-loading2 { min-height: 46px; }
    .title8 .more,
    .more a { display: inline-block; min-height: 44px; line-height: 44px; }

    /* 首页导航第一项带 class="hidden-xs"（bootstrap 在 <768px 隐藏它），
       抽屉菜单里必须放出来，否则手机上"首页"这一项会凭空消失 */
    .menu-responsive .main-menu > li > a.hidden-xs { display: block !important; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    .our-header h3.titles1,
    .our-header h1.titles1,
    .ThisCompanyName-section-top,
    .contactly .divlym h3 { font-size: 1.35rem; }

    .home-area6 .row { margin: 0; }
    .home-area6 .row > .DIVFELF {
        flex-basis: 100%;
        max-width: 100%;
        padding: 0;
        margin-bottom: 16px;
    }
    /* 单列时不必强撑高度，避免卡片下方出现大片空白 */
    .zhegnzhibox { min-height: 0; padding: 18px 16px; }
    .zhegnzhiboxnr { -webkit-line-clamp: 4; }
    .img_3.row, .img_3 .row { margin: 0; }
    .img_3 .img-wrap { flex-basis: 50%; max-width: 50%; padding: 0 8px; margin-bottom: 16px; }

    .col-md-3 .box-margin-top { margin-bottom: 16px; }
    .has-padding { padding: 0; margin-bottom: 12px; }
    .btn-contactus, .btn-loading2 { width: 100%; padding: 0 16px; }
    .title8 .more { float: none; display: block; margin-top: 6px; }

    /* 在线留言：手机单列，去掉装饰卡车，让表单占满 */
    .footer-area { padding-left: 12px; padding-right: 12px; }
    .footer-area .container { padding: 26px 20px; border-radius: 14px; }
    .divlym form { grid-template-columns: 1fr; gap: 14px; }
    .divlym form > .has-padding:last-child { padding-top: 2px; }
    .lym-truck { display: none; }

    /* 愿景三宫格：手机改单列，仍保持左图标 + 右文字 */
    .divgsyj .gsyj { flex: 1 1 100%; max-width: 100%; padding: 0; }
    .divgsyj .gsyj + .gsyj { margin-top: 16px; }
    .divgsyj .gsyj > div[id^="yuanjing"] { padding: 22px 20px; }

    /* 页脚：手机端改为单列居中，收紧间距 */
    #footer { padding-top: 36px; }
    #footer .container { padding: 0 18px; }
    .divft3 {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 24px;
        padding-bottom: 28px;
    }
    .footerrt { min-width: 0; }
    .footerrt img { max-height: 64px; }
    .footlx { font-size: 13px; line-height: 2; }
    .footerweixin img { width: 104px; height: 104px; padding: 6px; border-radius: 10px; }
    .footerweixin-cap { font-size: 12px; margin-top: 8px; }
    .divcopyright { padding: 0 18px; font-size: 11.5px; }
}

/* --------------------------------------------------------------------------
   15. 动效偏好：尊重系统的"减少动态效果"设置
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}