@charset "utf-8";
/* =====================================================================
   layout.css —— 版面优化层
   必须加载在 main.css / drop.css / bootstrap.css 之后
   作用：
     1. 统一全站栅格宽度（原来有 1000 / 1100 / 1200 三种，现统一为 1200）
     2. 修复 float + margin:auto 无法居中、定高容器被内容撑破等溢出问题
     3. 补齐移动端响应式（原有 viewport 但无断点）
   ===================================================================== */

/* =========================== 0. 设计变量 =========================== */
:root {
    --hl-container: 1200px;
    --hl-gap: 24px;
    --hl-brand: #bf0010;
    --hl-accent: #ff6600;
    --hl-blue: #004ba3;
    --hl-blue-deep: #003a9b;
    --hl-navy: #333a54;
    --hl-navy-deep: #22273b;
    --hl-line: #e3e6ea;
    --hl-radius: 8px;
    --hl-shadow: 0 2px 14px rgba(0, 0, 0, .07);
    --hl-ease: .25s ease;
}

/* ======================= 1. 基础：盒模型 / 流体媒体 ======================= */
html { -webkit-text-size-adjust: 100%; }

img,
video { max-width: 100%; }

/* 允许长.token/长文本换行，避免撑破定宽容器 */
.divcleft,
.divContentDiv,
.produca,
.newsleft,
.dizhi { overflow-wrap: break-word; word-wrap: break-word; }

/* ======================= 2. 容器栅格统一 + 居中修正 ======================= */
/* 原样式里 .boxcontext 同时写了 float:left 与 margin:0 auto，
   float 元素的 auto 外边距会被解析为 0，导致整块内容贴左不居中 —— 这里统一修正 */
.content,
.content3,
.contentMEUN,
.boxcont,
.boxcontent,
.boxcontext,
.index_cjwt,
.index_cjwt1,
.div_pn_tc,
.content_pn,
.parter_li {
    width: 100% !important;
    max-width: var(--hl-container) !important;
    box-sizing: border-box;
}

.boxcont,
.boxcontent,
.boxcontext,
.content_pn,
.parter_li,
.index_cjwt,
.index_cjwt1,
.div_pn_tc {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* iframe 默认是 inline 元素，margin:auto 不生效 —— 改为 block 才能真正居中 */
.parter_li { display: block; border: 0; }

/* 统一左右安全边距 */
.content,
.contentMEUN,
.boxcont,
.boxcontent,
.boxcontext,
.index_cjwt,
.index_cjwt1,
.div_pn_tc,
.content_pn {
    padding-left: 16px;
    padding-right: 16px;
}

/* ============================= 3. 顶部通栏 ============================= */
.header_top { padding: 6px 0; background: var(--hl-navy-deep); }

.header_top .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.top_left {
    float: none;
    font-size: 14px;
    line-height: 24px;
}

.top_leftdizhi,
.top_leftdizhi p { font-size: 14px; line-height: 24px; }

.right_login {
    float: none;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 200px;
    flex: 0 1 auto;
    background-position: left center;
}

.header_tel {
    float: none;
    width: auto;
    font-size: 19px;
    line-height: 30px;
    white-space: nowrap;
}

/* ========================= 4. Logo + 主导航 ========================= */
.container_ban {
    height: auto;
    min-height: 110px;
    background-repeat: repeat;
}

.contentMEUN {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 110px;
}

.logo {
    float: none;
    flex: 0 0 auto;
    width: auto;
    max-width: 320px;
    margin-top: 0;
    line-height: 0;
}

.logo img {
    display: block;
    max-height: 78px;
    width: auto;
    height: auto;
}

.div_mennu {
    float: none;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#nav.nav_navbar {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#nav.nav_navbar > li { position: relative; float: none; }

#nav.nav_navbar > li > a {
    float: none;
    display: block;
    padding: 42px 20px;
    white-space: nowrap;
    transition: color var(--hl-ease);
}

/* 原 drop.css 把二级菜单绝对定位写死 top:150px，页头高度一变就错位。
   改成相对 li 定位，页头高度怎么变都贴着导航栏下方 */
#nav.nav_navbar > li > ul {
    top: 100% !important;
    left: 0;
    min-width: 200px;
    margin-top: 0;
    padding-left: 0;
    background: #fff;
    border: 1px solid var(--hl-line) !important;
    border-top: 2px solid var(--hl-brand) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

#nav.nav_navbar > li > ul > li { float: none; border-bottom: 1px dashed #eee; }
#nav.nav_navbar > li > ul > li:last-child { border-bottom: 0; }

/* ============================ 5. 首页：发货五步骤 ============================ */
/* 原 .ddli 宽 995px，而内部 h3(200) + 5×li(156) = 1180px，长期溢出 */
.dicvfw { display: block; }

.ddli {
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 80px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: var(--hl-radius);
}

.ddlih3 {
    float: none;
    flex: 0 0 auto;
    width: auto;
    padding: 0 4px;
    white-space: nowrap;
}

.ddli ul {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ddli ul li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 4px;
}

.ddli ul li img { float: none; height: 48px; width: auto; }

.ddli ul li span {
    float: none;
    width: auto;
    margin-left: 0;
    padding: 0;
    line-height: 1.4;
}

/* 原规则是 .ddli ul li a:hover 但 li 内根本没有 a，属无效且会造成跳动的死规则 */
.ddli ul li a:hover { clear: none; padding: 0; background: transparent; color: inherit; }

/* ======================= 6. 首页：登录 / 查价 / 轨迹 三栏 ======================= */
/* 原卡片外层 height:200px，内层 .div_login / .trackborder2 却有 240~290px，
   内容长期溢出容器；改为等高伸缩卡片 */
.divboxtx {
    float: none;
    height: auto !important;
    min-height: 0;
    padding: 28px 0;
    background: #fff;
}

.divboxtx > .boxcont {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--hl-gap);
}

.div_boxlogin,
.div_boxlogin1,
.div_price,
.div_boxlogints {
    float: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
    min-width: 280px;
    max-width: 380px;
    width: auto;
    height: auto;
    margin: 0;
}

.divrtop {
    float: none;
    width: 100%;
    height: auto;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hl-blue);
    border-top-left-radius: var(--hl-radius);
    border-top-right-radius: var(--hl-radius);
}

.boximg,
.boximg1,
.boximg3 { padding: 6px 10px; text-align: center; }

/* 这三个是每张卡片的内容区，等高铁而论：min-height 保证三卡视觉高度一致 */
.div_login,
.trackborder,
.trackborder2 {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 240px;
    float: none;
}

/* .div_pricebt 是 .trackborder 的内层，不能再给 min-height，否则高度翻倍 */
.div_pricebt { box-sizing: border-box; width: 100%; height: auto; float: none; }

.div_login,
.trackborder,
.trackborder2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    border: 1px solid #d4d4d4;
    border-top: 0;
    border-bottom-left-radius: var(--hl-radius);
    border-bottom-right-radius: var(--hl-radius);
    transition: border-color var(--hl-ease), box-shadow var(--hl-ease);
}

.div_login:hover,
.trackborder:hover,
.trackborder2:hover { border-color: #999; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }

/* ---------- 按钮统一沉底：三张卡内容高度不同（登录有忘记密码行、
   查价有体积行、轨迹有 17track 图），用 margin-top:auto 把
   各自的按钮行压到卡片底部，三卡按钮落在同一水平线上 ---------- */

/* 登录卡：ul 撑满剩余高度，按钮行沉底 */
.div_login ul {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.div_login ul li {
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
}

.div_login ul li:last-child {
    margin-top: auto;
    /* 会员登陆 + 用户注册 并排一行 */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
}

.div_login ul li:last-child .div_input {
    flex: 1 1 0;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* 查价卡：.div_pricebt > form > ul 三层依次撑满，按钮行沉底 */
.trackborder .div_pricebt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.trackborder .div_pricebt > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.trackborder .div_pricebt ul {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.trackborder .div_pricebt ul li {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.trackborder .div_pricebt ul li:last-child {
    margin-top: auto;
    padding-top: 14px;
}

/* 轨迹卡：form 撑满，按钮行沉底；17track 图保持在按钮上方 */
.trackborder2 > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.trackborder2 .divtrack {
    float: none;
    margin-top: 2px;
}

.trackborder2 .div_input_f {
    float: none;
    width: 100%;
    margin: 14px 0 0;
    margin-top: auto;
}

.track_tex1 {
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    margin: 0 0 12px;
    resize: vertical;
}

.div_input_l,
.weight {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

.divtij {
    box-sizing: border-box;
    width: 72px;
    max-width: 30%;
    text-align: center;
    text-indent: 0;
}

/* 三卡按钮统一观感：同高、同字号，横向铺满/居中 */
.input_tp,
.div_login .div_input {
    box-sizing: border-box;
    min-height: 42px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 1.4;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    background: var(--hl-navy);
    color: #fff;
    font-weight: 500;
    transition: background var(--hl-ease);
}

.input_tp:hover,
.div_login .div_input:hover { background: var(--hl-brand); }

.input_tp {
    float: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 240px;
}

/* ======================== 7. 首页：新闻 + 图片/产品 ======================== */
.divbox1 {
    float: none;
    height: auto !important;
    padding: 32px 0;
    background: var(--hl-navy);
}

.divbox1 > .boxcont {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--hl-gap);
}

.newsleft {
    float: none;
    flex: 1 1 520px;
    width: auto;
    min-width: 0;
    margin-right: 0;
    padding: 0;
}

.newsright {
    float: none;
    flex: 1 1 420px;
    width: auto;
    min-width: 0;
    height: auto;
}

.img_thumbns {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--hl-radius);
}

.prudcusli { height: auto; padding: 0; }
.prudcusli ul { display: block; padding: 0; margin: 0; list-style: none; }

/* 新闻列表容器 */
.divnewsl { float: none; width: 100%; }

.divnewsl ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.div_rebtds {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.div_rebtds img { float: none; padding: 0 6px 0 0; vertical-align: middle; }

.date_right {
    float: none;
    flex: 0 0 auto;
    width: auto;
    padding-left: 8px;
    white-space: nowrap;
}

/* ============================ 8. 首页：合作伙伴 ============================ */
.in_partner {
    float: none;
    height: auto !important;
    padding: 28px 0 0;
}

.content_pn {
    height: auto !important;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
}

.content_pn > #aboutus { margin-bottom: 10px; }

.parter_li {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px;
}

/* ============================ 9. 副页两栏版面 ============================ */
/* .divcright/.divcleft 都是 float:left（侧栏 280 + 内容 720）。
   原先靠父级 min-height:500px 掩盖浮动塌陷；定高放开后父级高度归零、
   白底随之消失，body 的深色背景透出来（Products 等目录页整页露黑）。
   用 clearfix 包含浮动：无论侧栏和内容谁更高，白色容器都能正确撑开 */
.divbox::after,
.boxcontent::after,
.boxcontext::after {
    content: "";
    display: table;
    clear: both;
}

/* 两栏栅格（Content.aspx 新增的 .cn-two-col 包裹层）
   DOM 里主内容在前，视觉保持「左导航 / 右正文」，用 order 控制 */
.cn-two-col {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--hl-gap);
    width: 100%;
    box-sizing: border-box;
}

.cn-two-col > .divcleft {
    float: none;
    order: 2;
    flex: 1 1 660px;
    min-width: 0;
    width: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 24px 20px;
}

.cn-two-col > .divcright {
    float: none;
    order: 1;
    flex: 0 0 300px;
    width: auto;
    min-height: 0;
    margin-bottom: 0;
}

/* Products 等目录的母版是 .boxcontext > (.divcright + .divcleft) 直排结构
   （与 Content.aspx 的 .cn-two-col 包裹不同，故用直接子级选择器区分，互不影响）。

   分两层实现：
   1) 基础方案（所有浏览器）：保留浮动 + 百分比宽度， clearfix 撑开父容器；
   2) 增强方案（支持 :has 的浏览器）：flex 等高、定宽侧栏。
   注意：float:none / flex 等属性必须挂在各自的作用域下——
   之前无条件写 float:none 而把 flex 挂在 :has 上，
   不支持 :has 的浏览器会丢浮动又拿不到 flex，两栏退化成上下堆叠。 */
.boxcontext > .divcright {
    float: left;
    width: 25%;
    min-height: 0;
    margin-bottom: 0;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.boxcontext > .divcleft {
    float: left;
    width: 75%;
    min-width: 0;
    min-height: 0;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.boxcontext:has(> .divcleft) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}

.boxcontext:has(> .divcleft) > .divcright {
    float: none;
    flex: 0 0 280px;
    width: auto;
}

.boxcontext:has(> .divcleft) > .divcleft {
    float: none;
    flex: 1 1 660px;
    width: auto;
}

/* 侧栏里的 bootstrap 列还原为普通块，避免栅格内边距挤压 280px 侧栏 */
.boxcontext > .divcright > .col-md-12 {
    float: none;
    width: 100%;
    padding: 0;
    min-height: 0;
}

/* 面包屑（首页>>）原为 float:left; width:630px，改自适应 */
.div_vv .title2 { float: none; width: auto; }

/* 分页条与产品栅格留出间距 */
.product_3 .pager { margin-top: 8px; }

.divContentDiv {
    float: none;
    width: 100% !important;
    margin: 0;
    min-height: 0;
}

/* .div_vv / .product_1 原先硬编码宽度 690px 与 94%，
   容器统一放宽到 1200 后右侧会留出大片空白，改为自适应 */
.div_vv,
.product_1 {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0 24px;
}

/* ======================= 9.2 产品列表卡片 ======================= */
/* 原实现：col-md-3（一行4个）+ 224x70 定宽图，图片被压扁且撑破栅格。
   现改为一行 3 个的等比卡片，缩略图由 Files.aspx 的 cut 参数居中裁成 4:3。
   卡片放在 .product-card 内层，栅格列只负责留间距，两者互不干扰 */
.product_3 { padding-left: 0; }

.product_3 .titlename { float: none; width: auto; display: block; margin-bottom: 12px; }

.product_3 .img-wrap { margin-bottom: 24px; }

.product_3 .product-card {
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-radius);
    overflow: hidden;
    box-shadow: var(--hl-shadow);
    transition: box-shadow var(--hl-ease), transform var(--hl-ease);
}

.product_3 .product-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
    transform: translateY(-3px);
}

/* 图片：统一 4:3 比例，超出部分由浏览器居中裁切，绝不拉伸变形 */
.product_3 .Productimg {
    float: none;
    display: block;
    height: auto;
    line-height: 0;
    overflow: hidden;
    background: #f2f4f7;
}

.product_3 .Productimg img,
.product_3 img.product-thumb {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0;
    transition: transform .35s ease;
}

/* main.css 的 .img-wrap:hover img 会补一条 4px 白边，这里一并清掉 */
.product_3 .img-wrap img,
.product_3 .img-wrap:hover img {
    border: 0;
    opacity: 1;
}

.product_3 .product-card:hover .Productimg img { transform: scale(1.05); }

/* 标题条 */
.product_3 .div_titlep {
    box-sizing: border-box;
    margin: 0;
    padding: 11px 12px 12px;
    background: #fff;
    border-top: 1px solid var(--hl-line);
    text-align: center;
}

.product_3 .div_titlep a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hl-navy);
}

.product_3 .div_titlep a:hover { color: var(--hl-brand); }

@media (max-width: 767px) {
    .product_3 .img-wrap { margin-bottom: 14px; }
    .product_3 .div_titlep { padding: 9px 8px 10px; }
    .product_3 .div_titlep a { font-size: 13px; }
}

/* 副页正文标题行 */
.div_vvcenter {
    float: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.dtitlename { float: none; padding: 8px 0; }
.dtitlenamemore { float: none; margin-top: 0; }

/* 侧栏：分类标题 + 列表 */
.divtitle86 { float: none; width: 100%; }

/* 原 .product_11 为 content-box，width:100% + padding:0 15px 会撑出 30px 溢出容器 */
.product_11 { float: none; box-sizing: border-box; width: 100%; }
.product_11 ul { padding: 0; margin: 0; list-style: none; }

.product_11 ul li {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 4px 0;
}

.divtitle86name { float: none; box-sizing: border-box; width: 100%; }

/* 侧栏追踪表单 */
.lefttrack {
    float: none;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 16px;
    border-radius: var(--hl-radius);
    overflow: hidden;
}

.lefttracktextarea {
    box-sizing: border-box;
    width: calc(100% - 30px);
    margin: 15px;
    height: 100px;
}

.lefttrackinput {
    float: none;
    display: block;
    width: calc(100% - 30px);
    margin: 10px 15px 0;
    border-radius: 4px;
    cursor: pointer;
}

/* 副页通栏广告图 */
.divcebanner {
    float: none;
    width: 100%;
    height: auto;
    max-height: 400px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 24px;
}

.divcebanner img { width: 100%; height: auto; max-height: 400px; object-fit: cover; }

/* ======================================================================
   9.1 首页 Banner 轮播（配套 JS/hl-banner.js，替代原先失效的 slick 方案）
   ====================================================================== */
.div_banner_h { float: none; }

.hl-banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--hl-navy);
    touch-action: pan-y;               /* 保留移动端纵向滚动 */
    -webkit-user-select: none;
    user-select: none;
}

/* 轨道：即便 JS 未执行，各 slide 也会横向排开并只露出第一张，不至堆叠 */
.hl-banner__track {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.hl-banner__slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
}

.hl-banner__link { display: block; line-height: 0; }

/* 统一各 slide 高度，避免图片比例不一致时轨道出现空隙 */
.hl-banner__img {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 400px);
    object-fit: cover;
    -webkit-user-drag: none;
}

/* ---------- 左右箭头 ---------- */
.hl-banner__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font: 700 24px/44px "Microsoft Yahei", "微软雅黑", sans-serif;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .25s ease, background .25s ease;
}

.hl-banner:hover .hl-banner__arrow,
.hl-banner__arrow:focus-visible { opacity: 1; }
.hl-banner__arrow:hover { background: rgba(0, 0, 0, .6); }
.hl-banner__arrow--prev { left: 16px; }
.hl-banner__arrow--next { right: 16px; }

/* ---------- 圆点导航 ---------- */
.hl-banner__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.hl-banner__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.hl-banner__dot.is-active { width: 28px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .hl-banner__track { transition: none; }
}

/* =============================== 10. 页脚 =============================== */
.footer {
    float: none;
    height: auto !important;
    min-height: 0;
    margin-top: 32px;
    padding: 28px 0;
    background: var(--hl-navy);
}

.index_cjwt { display: block; padding-top: 0; padding-bottom: 0; }

.index_cjwtm {
    float: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hl-gap);
    justify-content: space-between;
}

/* 栏目行：禁止换行 + 等分，避免空占位把真实栏目挤到第二行
   （空 .div_footerli 由 :empty 隐藏，见下方规则） */
.index_cjwtmt {
    float: none;
    flex: 1 1 640px;
    width: auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: flex-start;
    align-content: flex-start;
}

.index_cjwtmtl,
.div_footerli {
    float: none;
    flex: 1 1 0;          /* 等分剩余空间，宽度随栏目数自适应 */
    width: auto;
    min-width: 0;
    height: auto;
    overflow: visible;
}

/* 服务端栏目（News1/News2/News4）无数据时输出空 div，
   仍会占据 flex 空间造成错位，直接移出布局 */
.div_footerli:empty { display: none; }

.index_cjwtmtl ul { padding: 0; margin: 0; list-style: none; }

.index_cjwtmtl ul li {
    box-sizing: border-box;
    width: 100%;
    line-height: 22px;
}

.footer_logo {
    float: none;
    flex: 0 0 300px;
    width: auto;
    padding-top: 0;
    text-align: center;
}

.footer_logo img {
    float: none;
    width: 150px;
    height: 150px;
    margin: 8px auto 0;
}

/* 二维码容器原为 float:left + margin-left:120px 硬编码居中，改为真正居中 */
.footer_logo .weixin {
    float: none;
    width: auto;
    height: auto;
    margin: 8px auto 0;
    text-align: center;
}

.copy_right2 {
    float: none;
    width: 100%;
    padding: 12px 0;
    line-height: 1.8;
}

/* =============================== 11. 响应式 =============================== */

/* ---------- ≤ 1199px：容器进入流体区，收紧间距 ---------- */
@media (max-width: 1199px) {
    :root { --hl-gap: 18px; }

    #nav.nav_navbar > li > a { padding: 42px 14px; font-size: 16px; }

    .cn-two-col > .divcleft { padding-left: 20px; padding-right: 20px; }
}

/* ---------- ≤ 991px：纵向堆叠 ---------- */
@media (max-width: 991px) {
    /* 头部：logo 与导航分行 */
    .contentMEUN {
        flex-wrap: wrap;
        justify-content: center;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo { max-width: 260px; margin-bottom: 6px; }
    .logo img { max-height: 62px; }

    .div_mennu { flex-basis: 100%; justify-content: center; }

    #nav.nav_navbar { justify-content: center; }
    #nav.nav_navbar > li > a { padding: 14px 12px; font-size: 15px; background: none; }

    /* 二级菜单在小屏改为静态展开，避免 :hover 在触屏上不可用 */
    #nav.nav_navbar > li > ul {
        position: static !important;
        display: none;
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none;
    }

    #nav.nav_navbar > li:hover > ul { display: block; }

    /* 三张功能卡纵向铺开 */
    .divboxtx > .boxcont { flex-direction: column; align-items: center; }

    .div_boxlogin,
    .div_boxlogin1,
    .div_price,
    .div_boxlogints {
        flex: 1 1 auto;
        width: 100%;
        max-width: 520px;
    }

    /* 五步骤换行显示 */
    .ddli { flex-wrap: wrap; justify-content: center; }
    .ddlih3 { flex-basis: 100%; text-align: center; padding: 4px 0; }
    .ddli ul { flex-wrap: wrap; justify-content: center; }
    .ddli ul li { flex: 0 1 33.33%; }

    /* 首页新闻区堆叠 */
    .divbox1 > .boxcont { flex-direction: column; }
    .newsleft,
    .newsright { flex: 1 1 auto; width: 100%; }

    /* Banner 触屏滑动为主，箭头常显便于点按 */
    .hl-banner__arrow { opacity: 1; width: 38px; height: 38px; font-size: 20px; line-height: 38px; }
    .hl-banner__arrow--prev { left: 10px; }
    .hl-banner__arrow--next { right: 10px; }

    /* 副页：主内容在上，侧栏在下 */
    .cn-two-col { flex-direction: column; }
    .cn-two-col > .divcleft { order: 1; flex: 1 1 auto; }
    .cn-two-col > .divcright { order: 2; flex: 0 0 auto; width: 100%; }

    /* Products 等母版的直排两栏改上下堆叠 */
    /* 基础方案：窄屏取消浮动，按 DOM 顺序堆叠（侧栏在上） */
    .boxcontext > .divcright,
    .boxcontext > .divcleft { float: none; width: 100%; }
    /* 增强方案：主内容在上，侧栏在下 */
    .boxcontext:has(> .divcleft) { flex-direction: column; }
    .boxcontext:has(> .divcleft) > .divcleft { order: 1; flex: 1 1 auto; padding-bottom: 12px; }
    .boxcontext:has(> .divcleft) > .divcright { order: 2; flex: 0 0 auto; width: 100%; padding-bottom: 0; }

    /* 页脚堆叠 */
    .index_cjwtm { flex-direction: column; }
    .index_cjwtmt { flex: 1 1 auto; width: 100%; flex-wrap: wrap; }
    .index_cjwtmtl,
    .div_footerli { flex: 0 1 30%; }
    .footer_logo { flex: 1 1 auto; width: 100%; }

    .divcebanner,
    .divcebanner img { max-height: 260px; }
}

/* ---------- ≤ 767px：手机端 ---------- */
@media (max-width: 767px) {
    :root { --hl-gap: 14px; }

    /* 顶部通栏改为两行 */
    .header_top .content { justify-content: center; text-align: center; }
    .top_left { flex-basis: 100%; text-align: center; font-size: 13px; }
    .right_login { justify-content: center; min-width: 0; }
    .header_tel { font-size: 17px; }

    /* 导航横向滚动，避免换行把页头顶变形 */
    .div_mennu { overflow: hidden; }

    #nav.nav_navbar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #nav.nav_navbar > li > a { padding: 12px 10px; font-size: 14px; }

    /* 步骤改为两列 */
    .ddli ul li { flex: 0 1 50%; }
    .ddli ul li img { height: 40px; }

    /* 表单元素全宽 */
    .div_input_l,
    .weight,
    .track_tex1,
    .lefttracktextarea { width: 100%; }

    .divtij { width: 30%; max-width: none; }

    .input_tp,
    .lefttrackinput { max-width: none; padding: 10px 20px; }

    .divboxtx,
    .divbox1 { padding-left: 0; padding-right: 0; }

    /* 手机端以滑动操作为主，隐藏箭头，圆点缩小 */
    .hl-banner__arrow { display: none; }
    .hl-banner__img { height: clamp(150px, 42vw, 240px); }
    .hl-banner__dot { width: 8px; height: 8px; }
    .hl-banner__dot.is-active { width: 22px; }
    .hl-banner__dots { bottom: 10px; }

    .div_boxlogin,
    .div_boxlogin1,
    .div_price,
    .div_boxlogints { max-width: none; }

    .div_login,
    .trackborder,
    .trackborder2,
    .div_pricebt { min-height: 0; }

    .newsleft,
    .newsright { padding: 0; }

    /* 列表日期换行到下方，避免挤压标题 */
    .divnewsl ul li { flex-wrap: wrap; }
    .date_right { width: 100%; text-align: left; padding-left: 0; }

    .cn-two-col > .divcleft { padding: 18px 16px; }
    .cn-two-col > .divcright { padding: 0 4px; }

    .boxcontext > .divcleft { padding: 12px 0 4px; }
    .boxcontext > .divcright { padding: 0; }

    .index_cjwtmtl,
    .div_footerli { flex: 0 1 45%; }

    .index_cjwtmtl ul li { width: 100%; }
}