/* ============================================================
   global.css —— 由 _css_consolidate.php 从各主模板内联 <style> 收拢生成
   各文件样式按源文件分段拼接，未做去重（保证零丢失）。
   ============================================================ */

/* ===== index.htm ===== */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  
  /* ========== 顶部栏 ========== */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; 
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .logo-mark {
    width: 42px;
    height: 42px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .logo-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .logo-text h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.1;
    color: var(--logo-navy);
  }
  .logo-text span {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-lighter);
    font-weight: 600;
    margin-top: 1px;
  }
  
  /* ========== 导航（桌面端） ========== */
  .topbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    padding: 28px 16px;
    color: var(--text);
    font-weight: 500;
    transition: color 0.2s;
  }
  .nav-item > a .caret {
    font-size: 10px;
    color: var(--text-lighter);
    transition: transform 0.25s, color 0.25s;
  }
  .nav-item:hover > a,
  .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret {
    transform: rotate(180deg);
    color: var(--blue);
  }
  .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* 无子栏目时隐藏空下拉框 */
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block;
    padding: 10px 22px;
    font-size: 15px;
    color: var(--text-light);
    white-space: nowrap;
    transition: all 0.2s;
    position: relative;
  }
  .dropdown a:hover {
    background: var(--blue-pale);
    color: var(--blue);
    padding-left: 28px;
  }
  .dropdown a::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .dropdown a:hover::before { opacity: 1; }
  
  /* ========== 顶部右侧（桌面端） ========== */
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
  }
  .nav-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
    border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: all 0.25s;
  }
  .nav-contact:hover .ico {
    background: var(--blue-dark);
    transform: scale(1.06);
  }
  .nav-contact .txt strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.2;
    letter-spacing: 0.5px;
    transition: color 0.25s;
  }
  .nav-contact .txt span {
    font-size: 14px;
    color: var(--text-light);
    letter-spacing: 0.5px;
  }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    width: 180px;
    transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--text);
    width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang {
    font-size: 15px;
    color: var(--text-light);
    font-weight: 500;
    transition: color 0.2s;
  }
  .lang:hover { color: var(--blue); }
  /* ========== 移动端专属按钮组 ========== */
  .mobile-header-actions {
    display: none;
    align-items: center;
    gap: 16px;
  }
  .mobile-btn {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon {
    color: var(--blue);
    display: flex;
    align-items: center;
  }
  /* ========== 移动端抽屉与浮层 ========== */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }
  
  .product-drawer {
    position: fixed;
    top: 0; right: -100%;
    width: 85%; max-width: 360px;
    height: 100vh;
    background: var(--white);
    z-index: 2000;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }
  
  .menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: var(--white);
    z-index: 3000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px;
  }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }
  /* ========== 抽屉内部样式 ========== */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }
  
  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }
  
  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue);
    border-left-color: var(--blue);
    padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }
  /* ========== 主体布局（桌面端） ========== */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr 380px;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }
  
  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  
  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue);
    border-left-color: var(--blue);
    padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }
  /* 中间主内容 */
  .main-content {
    display: flex; flex-direction: column;
    gap: clamp(28px, 2.5vw, 40px); min-width: 0;
  }
  /* 1. 外层容器：去除固定高度，让其自适应 */
.banner {
  position: relative; 
  overflow: hidden;
  border-radius: 8px; 
  width: 100%;
  /* 注意：千万不要写 height 或 min-height */
  /* 不要用 grid 布局 */
}

/* 2. 轮播图容器：相对定位，靠图片撑开高度 */
.banner-slide-wrap {
  position: relative; 
  width: 100%; 
}

/* 3. 幻灯片隐藏和显示 */
.banner-slide {
  display: none; /* 未激活的隐藏，不占位 */
  width: 100%;
}

.banner-slide.active { 
  display: block; /* 激活的显示，撑开高度 */
}

/* 4. 链接块占满 */
.banner-slide a {
  display: block;
  width: 100%;
}

/* 5. 核心图片设置：宽度100%，高度自动 */
.banner-slide img { 
  width: 100%; 
  height: auto; /* 【关键】高度自动，保证图片原比例，绝对不会被裁切 */
  display: block;
}

/* --- 轮播圆点样式 (保持原样或使用下面这个) --- */
.banner-dots {
  position: absolute; 
  bottom: 24px; 
  left: 50%; 
  transform: translateX(-50%); /* 居中显示 */
  display: flex; 
  gap: 10px; 
  z-index: 3;
}

.banner-dots span {
  width: 24px; 
  height: 3px; 
  background: rgba(255,255,255,0.5); /* 稍微加深一点防止在白色背景上看不清 */
  transition: all 0.3s; 
  cursor: pointer;
}

.banner-dots span.active { 
  background: #fff; /* 或改成深色 */
  width: 40px; 
}
  /* 品牌条 */
  .brand-strip {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .brand-strip .arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); display: flex;
    align-items: center; justify-content: center;
    color: var(--text-light); cursor: pointer; flex-shrink: 0;
    transition: all 0.2s;
  }
  .brand-strip .arrow:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }
  .brand-logos {
    display: flex; flex: 1; justify-content: space-between; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  }
  .brand-logos::-webkit-scrollbar { display: none; }
  
  .brand-logo-item {
    text-align: center;
    flex-shrink: 0;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
  }
  .brand-logo-item:hover {
    background: var(--blue-pale);
  }
  .brand-logo-item .mark {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: 1px;
    transition: color 0.3s;
  }
  .brand-logo-item .name {
    font-size: 13px;
    color: var(--text-lighter);
    letter-spacing: 0.5px;
    transition: color 0.3s;
  }
  .brand-logo-item:hover .mark,
  .brand-logo-item:hover .name {
    color: var(--blue);
  }
  .section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-bottom: 16px; border-bottom: 2px solid var(--navy); margin-bottom: 24px;
  }
  .section-head h3 { font-size: 26px; font-weight: 800; color: var(--navy); }
  .section-head .more { font-size: 14px; color: var(--text-light); }
  
  /* ========== 产品网格 ========== */
  .product-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    flex: 1; align-content: start;
  }
  .product-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 6px; padding: 18px; text-align: center;
    position: relative; display: flex; flex-direction: column;
    cursor: pointer; transition: all 0.3s ease;
  }
  .product-card:hover {
    border-color: var(--blue);
    box-shadow: 0 16px 32px rgba(232,68,31,0.15);
    transform: translateY(-6px);
  }
  .product-card:hover .img { background: var(--blue-pale); }
  .product-card .new-tag {
    position: absolute; top: 0; left: 18px;
    background: var(--blue); color: var(--white);
    font-size: 11px; padding: 4px 10px; font-weight: 700;
  }
  .product-card .img {
    height: 140px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; background: var(--bg); border-radius: 4px; transition: background 0.3s ease;
  }
  .product-card .img .ph {
    width: 58px; height: 58px; border: 1px dashed var(--text-lighter);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-lighter);
  }
  .product-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
  .product-card h4 a { color: var(--navy); }
  .product-card .card-meta { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
  .product-card .card-meta .brand,
  .product-card .card-meta .model { font-size: 15px; color: var(--text); line-height: 1.4; }
  .product-card .card-meta .brand { font-weight: 600; }
  /* 右侧栏 */
  .right-col {
    align-self: start; position: sticky; top: 128px;
    display: flex; flex-direction: column; gap: 28px;
  }
  .right-block {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 6px; padding: 24px;
  }
  .right-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
  }
  .right-head h3 { font-size: 18px; font-weight: 800; color: var(--navy); }
  .right-head .more { font-size: 13px; color: var(--text-lighter); }
  
  .expo-item { margin-bottom: 24px; cursor: pointer; transition: all 0.2s; }
  .expo-item:last-child { margin-bottom: 0; }
  .expo-item .thumb {
    height: 116px; border-radius: 8px;
    background: linear-gradient(135deg, #0a3a6b 0%, #1a5a9c 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75); font-size: 17px; font-weight: 600;
    letter-spacing: 4px; margin-bottom: 14px;
    position: relative; overflow: hidden; transition: all 0.3s;
  }
  .expo-item .expo-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
  }
  .expo-item .title { font-size: 16px; font-weight: 800; color: var(--navy); transition: color 0.2s; line-height: 1.4; }
  .expo-item:hover .title { color: var(--blue); }
  .expo-item .date-tag {
    background: #eaf2fb; color: #1a5a9c; font-size: 14px;
    font-weight: 700; padding: 4px 12px; border-radius: 4px;
    flex-shrink: 0; transition: all 0.2s;
  }
  .expo-item .addr { font-size: 14px; color: var(--text-light); }
  
  .news-list { display: flex; flex-direction: column; gap: 14px; }
  .news-card {
    display: flex; gap: 14px; padding: 16px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--white); cursor: pointer; transition: all 0.3s ease;
  }
  .news-card:hover {
    background: var(--blue); border-color: var(--blue);
    box-shadow: 0 10px 24px rgba(232,68,31,0.25); transform: translateY(-2px);
  }
  .news-card:hover .card-date,
  .news-card:hover .card-title,
  .news-card:hover .card-footer { color: var(--white); }
  .news-card:hover .card-thumb { background: rgba(255,255,255,0.18); color: var(--white); }
  
  .news-card .card-thumb {
    width: 96px; height: 96px; flex-shrink: 0; border-radius: 6px;
    background: linear-gradient(135deg, #3a1a10, #6b2e1a);
    color: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 800; letter-spacing: 4px; transition: all 0.3s;
  }
  .news-card .card-thumb.red { background: linear-gradient(135deg, #c8102e, #8a0a1e); }
  .news-card .card-date { font-size: 13px; color: var(--text-lighter); margin-bottom: 6px; transition: color 0.3s; }
  .news-card .card-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; transition: color 0.3s; }
  .news-card .card-footer { font-size: 13px; color: var(--text-light); transition: color 0.3s; }
  
  .rights-item { padding-bottom: 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
  .rights-item:last-child { padding-bottom: 0; border-bottom: none; }
  .rights-item .thumb { height: 104px; background: var(--bg); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: var(--text-lighter); font-size: 13px; letter-spacing: 2px; }
  .rights-item .date { font-size: 13px; color: var(--blue); font-weight: 700; margin-bottom: 6px; }
  .rights-item .title { font-size: 15px; line-height: 1.6; color: var(--text); transition: color 0.2s; }
  .rights-item:hover .title { color: var(--blue); }
  
  /* Footer */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }
  /* ========== 响应式：移动端适配 (max-width: 960px) ========== */
  @media (max-width: 960px) {
    .topbar {
      position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    
    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }
    .sidebar { display: none; }
    
    .banner { grid-template-columns: 1fr; min-height: 200px; border-radius: 6px; }
    .banner-left { padding: 24px; }
    .banner-tag { font-size: 10px; padding: 4px 10px; margin-bottom: 12px; }
    .banner-left h2 { font-size: 32px; letter-spacing: 4px; }
    .banner-left p { font-size: 13px; margin-bottom: 16px; }
    .banner-cta { font-size: 13px; padding: 10px 20px; }
    .banner-right { display: none; }
    
    .brand-strip { display: none; }
    
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card { padding: 12px; }
    .product-card .new-tag { left: 12px; font-size: 10px; padding: 3px 8px; }
    .product-card .img { height: 100px; margin-bottom: 10px; }
    .product-card .img .ph { width: 44px; height: 44px; font-size: 10px; }
    .product-card h4 { font-size: 14px; margin-bottom: 6px; }
    .product-card .card-meta .brand,
    .product-card .card-meta .model { font-size: 12px; }
    
    .right-col { flex-direction: column; position: static; gap: 16px; }
    .right-block { padding: 16px; }
    .right-head h3 { font-size: 16px; }
    .news-card { padding: 12px; gap: 10px; }
    .news-card .card-thumb { width: 70px; height: 70px; font-size: 16px; }
    
    .expo-block { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .expo-block .right-head { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 0; }
    .expo-item { margin-bottom: 0; }
    .expo-item .thumb { height: 80px; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
    .expo-item .expo-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; }
    .expo-item .title {
      font-size: 13px; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .expo-item .date-tag { font-size: 11px; padding: 2px 8px; }
    .expo-item .addr {
      font-size: 11px;
      display: -webkit-box; -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    
    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
  }
  /* ========== 极窄屏适配 (max-width: 520px) ========== */
  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }
    .logo-text span { font-size: 9px; letter-spacing:0.1px; }
    .banner-left h2 { font-size: 28px; }
    
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card { padding: 8px; }
    .product-card .img { height: 80px; margin-bottom: 8px; }
    .product-card .img .ph { width: 36px; height: 36px; font-size: 9px; }
    .product-card h4 { font-size: 13px; margin-bottom: 4px; line-height: 1.3; }
    .product-card .card-meta .brand,
    .product-card .card-meta .model { font-size: 11px; }

    .news-card .card-thumb { width: 60px; height: 60px; font-size: 14px; }
    
    .expo-block { gap: 8px; }
    .expo-item .thumb { height: 65px; font-size: 12px; }
    .expo-item .title { font-size: 12px; }
    .expo-item .date-tag { font-size: 10px; padding: 1px 6px; }
  }


/* ===== banner.htm ===== */

	.swiper-slide {
		max-height: 500px;
	}

	.swiper-slide img {
		height: 100%;
		object-fit: cover;
	}


/* ===== lists_article.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  
  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; 
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }
  
  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }
  
  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box form { display: flex; align-items: center; gap: 8px; width: 100%; }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }
  
  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }
  
  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }
  
  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }
  
  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }
  
  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  
  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 主内容区（新闻资讯） ================= */
  .main-content { min-width: 0; }
  
  .page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    padding-bottom: 16px;
    border-bottom: 2px solid var(--navy);
    margin-bottom: 30px;
  }

  /* ================= 新闻网格（修改为每行 4 个） ================= */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 桌面端 4 列 */
    gap: 20px; /* 间距稍微缩小以适应 4 列 */
  }

  /* 新闻卡片 */
  .news-card {
    background: var(--bg);
    border-radius: 8px;
    padding: 16px; /* 内边距减小 */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    color: inherit;
  }
  .news-card:hover {
    background: var(--white);
    border-color: var(--blue-pale);
    box-shadow: 0 10px 24px rgba(232,68,31,0.08);
    transform: translateY(-4px);
  }

  /* 日期 */
  .news-card .news-date {
    font-size: 13px; /* 字号减小 */
    color: var(--blue);
    margin-bottom: 8px;
    font-weight: 500;
  }

  /* 标题 */
  .news-card .news-title {
    font-size: 15px; /* 字号减小 */
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 12px;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-card:hover .news-title {
    color: var(--blue);
  }

  /* 图片区域 */
  .news-card .news-img {
    width: 100%;
    height: 120px; /* 图片高度减小 */
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .news-card .news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .news-card:hover .news-img img {
    transform: scale(1.05);
  }
  .news-card .news-img .ph {
    color: var(--text-lighter);
    font-size: 12px;
    letter-spacing: 2px;
  }

  /* 查看详情 */
  .news-card .view-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px; /* 字号减小 */
    color: var(--text-lighter);
    margin-top: auto;
    transition: color 0.2s;
  }
  .news-card .view-detail .plus {
    font-size: 14px;
    line-height: 1;
    font-weight: 300;
    transition: transform 0.2s;
  }
  .news-card:hover .view-detail {
    color: var(--blue);
  }
  .news-card:hover .view-detail .plus {
    transform: rotate(90deg);
  }

  /* 分页 */
  .pagination {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-top: 40px;
  }
  .pagination a, .pagination span, .pagination em {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; color: var(--text-light); transition: all 0.2s;
  }
  .pagination a:hover { border-color: var(--blue); color: var(--blue); }
  .pagination .active, .pagination .on, .pagination em {
    background: var(--blue); border-color: var(--blue); color: #fff;
  }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  /* 中等屏幕（如 1280px 以下）：4列太挤，降级为3列 */
  @media (max-width: 1280px) {
    .news-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .news-card { padding: 18px; }
    .news-card .news-date { font-size: 14px; }
    .news-card .news-title { font-size: 16px; }
    .news-card .news-img { height: 140px; }
    .news-card .view-detail { font-size: 13px; }
  }

  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }
    
    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }
    
    .sidebar { display: none; }

    .page-title { font-size: 20px; padding-bottom: 12px; margin-bottom: 20px; }

    /* 移动端依然保持 2 列 */
    .news-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .news-card { padding: 16px; }
    .news-card .news-date { font-size: 12px; margin-bottom: 8px; }
    .news-card .news-title { font-size: 14px; margin-bottom: 12px; line-height: 1.4; }
    .news-card .news-img { height: 110px; margin-bottom: 12px; }
    .news-card .view-detail { font-size: 12px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }
    
    /* 极小屏幕下依然保持 2 列，进一步缩小 */
    .news-grid { gap: 8px; }
    .news-card { padding: 12px; }
    .news-card .news-date { font-size: 11px; margin-bottom: 6px; }
    .news-card .news-title { font-size: 13px; margin-bottom: 8px; }
    .news-card .news-img { height: 90px; margin-bottom: 8px; }
    .news-card .view-detail { font-size: 11px; }
    .news-card .view-detail .plus { font-size: 14px; }
  }


/* ===== lists_single_contact.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }

  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }

  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box form { display: flex; align-items: center; gap: 8px; width: 100%; }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }

  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }

  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }

  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }

  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }

  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* 右侧主内容区（联系我们） */
  .main-content { min-width: 0; }
  .page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    padding-bottom: 16px;
    border-bottom: 2px solid var(--navy);
    margin-bottom: 40px;
  }

  /* ========== 常见问题（FAQ）手风琴 ========== */
  .faq-list { margin-top: 4px; }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-question {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; font-size: 17px; font-weight: 600; color: var(--text);
    cursor: pointer; transition: color 0.2s; gap: 20px;
  }
  .faq-question:hover { color: var(--blue); }
  .faq-item.open .faq-question { color: var(--blue); }
  .faq-icon {
    font-size: 24px; font-weight: 300; color: var(--text-lighter);
    line-height: 1; transition: transform 0.3s; flex-shrink: 0;
  }
  .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--blue); }
  .faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: var(--bg); border-radius: 0;
  }
  .faq-item.open .faq-answer {
    max-height: 2000px; padding: 20px 24px; border-radius: 6px; margin-bottom: 10px;
  }
  .faq-answer p { font-size: 15px; color: var(--text); line-height: 1.9; margin-bottom: 12px; }
  .faq-answer p:last-child { margin-bottom: 0; }
  .faq-answer .highlight { color: var(--blue); font-weight: 700; }

  @media (max-width: 960px) {
    .faq-question { font-size: 15px; padding: 16px 0; }
    .faq-answer p { font-size: 14px; }
    .faq-item.open .faq-answer { padding: 16px; }
  }

  /* ========== 应用案例（案例网格） ========== */
  .case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .case-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: all 0.3s ease; cursor: pointer; color: inherit; text-decoration: none;
  }
  .case-card:hover { border-color: var(--blue); box-shadow: 0 12px 24px rgba(232,68,31,0.12); transform: translateY(-4px); }
  .case-card .case-img { width: 100%; height: 180px; background: var(--bg); overflow: hidden; position: relative; }
  .case-card .case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .case-card:hover .case-img img { transform: scale(1.05); }
  .case-card .case-img .ph {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: var(--text-lighter); font-size: 14px; padding: 0 16px; text-align: center;
  }
  .case-card .case-info { padding: 16px; display: flex; flex-direction: column; flex: 1; }
  .case-card .case-title {
    font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.5;
    margin-bottom: 16px; transition: color 0.2s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .case-card:hover .case-title { color: var(--blue); }
  .case-card .view-detail {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px;
    color: var(--text-lighter); margin-top: auto; transition: color 0.2s;
  }
  .case-card .view-detail .plus { font-size: 16px; line-height: 1; font-weight: 300; transition: transform 0.2s; }
  .case-card:hover .view-detail { color: var(--blue); }
  .case-card:hover .view-detail .plus { transform: rotate(90deg); }

  @media (max-width: 1280px) {
    .case-grid { grid-template-columns: repeat(3, 1fr); }
    .case-card .case-img { height: 160px; }
    .case-card .case-title { font-size: 14px; }
  }
  @media (max-width: 960px) {
    .case-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .case-card .case-img { height: 120px; }
    .case-card .case-info { padding: 12px; }
    .case-card .case-title { font-size: 14px; margin-bottom: 12px; }
    .case-card .view-detail { font-size: 12px; }
  }
  @media (max-width: 520px) {
    .case-grid { gap: 8px; }
    .case-card .case-img { height: 100px; }
    .case-card .case-info { padding: 10px; }
    .case-card .case-title { font-size: 13px; margin-bottom: 8px; }
    .case-card .view-detail { font-size: 11px; }
    .case-card .view-detail .plus { font-size: 14px; }
  }

  .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
  }

  /* 联系信息 */
  .contact-info { display: flex; flex-direction: column; gap: 24px; }
  .info-item { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .info-item:last-child { border-bottom: none; padding-bottom: 0; }
  .info-item .label { font-size: 14px; color: var(--text-light); margin-bottom: 8px; }
  .info-item .value {
    font-size: 18px; font-weight: 600; color: var(--navy); line-height: 1.6;
  }
  .info-item .value a { transition: color 0.2s; }
  .info-item .value a:hover { color: var(--blue); }

  .qr-box { margin-top: 10px; }
  .qr-box .ph {
    width: 120px; height: 120px;
    background: var(--bg); border: 1px dashed var(--text-lighter);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    color: var(--text-lighter); font-size: 12px; letter-spacing: 2px;
  }
  .qr-box img {
    width: 120px; height: 120px; object-fit: contain;
    border: 1px solid var(--border); border-radius: 4px; padding: 4px; background: var(--white);
  }

  /* 在线留言表单 */
  .contact-form-wrapper {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px;
  }
  .contact-form-wrapper h3 {
    font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 24px;
  }
  .form-group { margin-bottom: 20px; }
  .form-group label {
    display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; font-weight: 500;
  }
  .form-group input,
  .form-group textarea {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 15px; font-family: inherit; color: var(--text);
    background: var(--bg); transition: all 0.2s; outline: none;
  }
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--blue); background: var(--white);
    box-shadow: 0 0 0 3px var(--blue-pale);
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder { color: var(--text-lighter); }
  .form-group textarea { min-height: 140px; resize: vertical; }

  .submit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue); color: var(--white);
    padding: 12px 40px; border: none; border-radius: 6px;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, transform 0.2s; font-family: inherit; width: 100%;
  }
  .submit-btn:hover { background: var(--blue-dark); transform: translateY(-2px); }
  .submit-btn:active { transform: translateY(0); }

  /* ajax toast */
  .cf-toast {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: rgba(22, 33, 58, .92); color: #fff;
    padding: 18px 32px; border-radius: 12px;
    font-size: 15px; font-weight: 500; line-height: 1.5;
    max-width: 86vw; text-align: center; z-index: 9999;
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
    pointer-events: none; box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
  }
  .cf-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .empty-tip { color: var(--text-lighter); font-size: 15px; }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }

    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }

    .sidebar { display: none; }

    .page-title { font-size: 20px; padding-bottom: 12px; margin-bottom: 24px; }

    .contact-wrapper { grid-template-columns: 1fr; gap: 32px; }
    .contact-form-wrapper { padding: 24px; }
    .contact-form-wrapper h3 { font-size: 18px; }
    .info-item .value { font-size: 16px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }
    .contact-form-wrapper { padding: 20px; }
  }


/* ===== lists_single_about.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }

  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }

  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box form { display: flex; align-items: center; gap: 8px; width: 100%; }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }

  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }

  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式（品牌/功能） ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }

  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }

  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }

  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* 中间主内容 */
  .main-content { display: flex; flex-direction: column; gap: clamp(28px, 2.5vw, 40px); min-width: 0; }

  /* 页面 Banner */
  .page-banner {
    background: linear-gradient(135deg, #0a3a6b 0%, #1a5a9c 100%);
    border-radius: 8px; padding: clamp(40px, 5vw, 64px);
    position: relative; overflow: hidden; color: var(--white);
    text-align: center;
  }
  .page-banner h2 {
    font-size: clamp(28px, 3vw, 40px); font-weight: 700;
    letter-spacing: 4px; margin-bottom: 12px; position: relative; z-index: 2;
  }
  .page-banner p {
    font-size: 15px; color: rgba(255,255,255,0.75);
    letter-spacing: 1px; position: relative; z-index: 2;
  }
  .page-banner::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(74,144,196,0.5), transparent 70%);
  }

  /* 公司简介 */
  .about-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  }
  .about-text h3 {
    font-size: 26px; font-weight: 800; color: var(--navy);
    margin-bottom: 20px; line-height: 1.4;
  }
  .about-text .about-body {
    font-size: 15px; color: var(--text-light); line-height: 1.9;
  }
  .about-text .about-body p { margin-bottom: 16px; }
  .about-text .about-body strong { color: var(--navy); }
  .about-text .about-body img { max-width: 100%; height: auto; }
  .about-text .about-body a { color: var(--blue); text-decoration: underline; }
  .about-img {
    border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, #eaf2fb, #d4e4f7);
    height: 320px; display: flex; align-items: center; justify-content: center;
    color: var(--navy-light); font-size: 16px; letter-spacing: 4px; font-weight: 600;
    border: 1px solid var(--border);
  }
  .about-img img { width: 100%; height: 100%; object-fit: cover; }
  .empty-tip { color: var(--text-lighter); font-size: 15px; }

  /* 核心优势 */
  .advantage-section { background: var(--bg); border-radius: 8px; padding: 40px; }
  .section-title { text-align: center; margin-bottom: 36px; }
  .section-title h3 {
    font-size: 26px; font-weight: 800; color: var(--navy);
    display: inline-block; padding-bottom: 12px; border-bottom: 3px solid var(--blue);
  }
  .advantage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .advantage-card {
    background: var(--white); border-radius: 8px; padding: 28px 20px;
    text-align: center; border: 1px solid var(--border);
    transition: all 0.3s ease;
  }
  .advantage-card:hover {
    border-color: var(--blue); box-shadow: 0 12px 24px rgba(232,68,31,0.1);
    transform: translateY(-4px);
  }
  .advantage-card .icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--blue-pale); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 16px;
  }
  .advantage-card h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
  .advantage-card p { font-size: 13px; color: var(--text-light); }

  /* 发展历程 */
  .history-section { padding: 0 10px; }
  .timeline { position: relative; padding-left: 28px; }
  .timeline::before {
    content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
    width: 2px; background: var(--border);
  }
  .timeline-item { position: relative; margin-bottom: 32px; }
  .timeline-item:last-child { margin-bottom: 0; }
  .timeline-item::before {
    content: ""; position: absolute; left: -24px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--blue); border: 2px solid var(--white);
    box-shadow: 0 0 0 3px var(--blue-pale);
  }
  .timeline-item .year {
    font-size: 18px; font-weight: 800; color: var(--blue); margin-bottom: 6px;
  }
  .timeline-item .desc {
    font-size: 15px; color: var(--text); font-weight: 500; line-height: 1.6;
  }

  /* 企业文化 */
  .culture-section { background: var(--navy); border-radius: 8px; padding: 48px; color: var(--white); }
  .culture-section .section-title h3 { color: var(--white); border-bottom-color: var(--navy-light); }
  .culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 20px; }
  .culture-card { text-align: center; }
  .culture-card h4 {
    font-size: 18px; font-weight: 700; color: var(--navy-light); margin-bottom: 12px;
    letter-spacing: 2px;
  }
  .culture-card p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.8; }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }

    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }

    .sidebar { display: none; }

    .page-banner { padding: 32px 24px; border-radius: 6px; }
    .page-banner h2 { font-size: 24px; }

    .about-section { grid-template-columns: 1fr; gap: 24px; }
    .about-text h3 { font-size: 20px; }
    .about-img { height: 200px; }

    .advantage-section { padding: 24px; border-radius: 6px; }
    .advantage-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .advantage-card { padding: 20px 12px; }
    .advantage-card .icon { width: 44px; height: 44px; font-size: 20px; margin-bottom: 12px; }

    .history-section { padding: 0; }
    .timeline { padding-left: 20px; }
    .timeline-item::before { left: -16px; width: 10px; height: 10px; }
    .timeline-item .year { font-size: 16px; }
    .timeline-item .desc { font-size: 14px; }

    .culture-section { padding: 32px 24px; border-radius: 6px; }
    .culture-grid { grid-template-columns: 1fr; gap: 24px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }

    .page-banner h2 { font-size: 20px; letter-spacing: 2px; }
    .advantage-grid { grid-template-columns: 1fr; }
    .section-title h3 { font-size: 20px; }
  }


/* ===== lists_single.htm ===== */

		.nd-grid {
			grid-template-columns: minmax(0, 1fr) 0;
		}
	

/* ===== lists_search.htm ===== */

		/* search results: empty state */
		.search-empty {
			grid-column: 1 / -1;
			text-align: center;
			padding: 70px 24px;
			background: #fff;
			border: 1px dashed var(--line-2);
			border-radius: var(--radius);
		}

		.search-empty-icon {
			width: 88px;
			height: 88px;
			margin: 0 auto 24px;
			display: grid;
			place-items: center;
			border-radius: 50%;
			background: var(--blue-tint-2);
			color: var(--blue);
		}

		.search-empty h3 {
			font-size: 24px;
			font-weight: 700;
			color: var(--ink);
			margin: 0 0 10px;
		}

		.search-empty .search-empty-kw {
			color: var(--ink);
			font-size: 15px;
			margin: 0 0 6px;
		}

		.search-empty .search-empty-tip {
			color: var(--muted);
			font-size: 14px;
			line-height: 1.6;
			margin: 0;
		}

		.search-retry {
			display: none;
			max-width: 460px;
			margin: 32px auto 0;
		}

		.search-retry.show {
			display: block;
		}

		.search-retry form {
			display: flex;
			align-items: center;
			border: 1px solid var(--line-2);
			border-radius: 10px;
			overflow: hidden;
			background: #fff;
			transition: .18s;
		}

		.search-retry form:focus-within {
			border-color: var(--blue);
		}

		.search-retry input {
			flex: 1;
			min-width: 0;
			height: 46px;
			border: 0;
			padding: 0 16px;
			font-size: 14px;
			outline: 0;
			color: var(--ink);
			background: transparent;
			font-family: var(--font);
		}

		.search-retry button {
			width: 46px;
			height: 46px;
			border: 0;
			background: var(--blue);
			color: #fff;
			cursor: pointer;
			display: grid;
			place-items: center;
			flex: 0 0 auto;
			transition: .18s;
		}

		.search-retry button:hover {
			background: var(--blue-ink);
		}
	

/* ===== view_video.htm ===== */

    /* ===================== News Detail Page ===================== */
    .news-detail {
      background: #f8f8f8;
      padding: 40px 0 96px;
    }

    /* breadcrumb (same as products-detail) */
    .news-detail .crumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13.5px;
      color: var(--muted-2);
      margin-bottom: 28px;
    }

    .news-detail .crumb a {
      color: var(--muted-2);
      transition: .18s;
    }

    .news-detail .crumb a:hover {
      color: var(--blue);
    }

    .news-detail .crumb .sep {
      color: var(--line-2);
    }

    .news-detail .crumb .cur {
      color: var(--ink);
      font-weight: 600;
    }

    /* main grid */
    .nd-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 44px;
      align-items: start;
    }

    /* article card */
    .nd-article {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .nd-head {
      padding: 38px 44px 22px;
    }

    .nd-cat {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 6px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 16px;
      transition: .18s;
    }

    .nd-cat:hover {
      background: var(--blue-ink);
      color: #fff;
    }

    .nd-head h1 {
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.18;
      margin-bottom: 18px;
      letter-spacing: -.02em;
    }

    .nd-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      color: var(--muted-2);
      font-size: 14px;
    }

    .nd-meta .m {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .nd-meta .m svg {
      width: 14px;
      height: 14px;
      color: var(--blue);
    }

    .nd-cover {
      padding: 0 44px 28px;
    }

    .nd-cover img {
      width: 100%;
      border-radius: 12px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
    }

    .nd-body {
      padding: 6px 44px 36px;
      font-size: 16.5px;
      line-height: 1.85;
      color: var(--ink);
    }

    .nd-body p {
      margin-bottom: 22px;
      color: #333;
    }

    .nd-body p.lead {
      font-size: 18.5px;
      color: var(--ink);
      font-weight: 500;
    }

    .nd-body h2 {
      font-size: clamp(22px, 2.4vw, 28px);
      margin: 36px 0 16px;
      letter-spacing: -.02em;
    }

    .nd-body h3 {
      font-size: 20px;
      margin: 30px 0 12px;
      letter-spacing: -.01em;
    }

    .nd-body ul,
    .nd-body ol {
      padding-left: 22px;
      margin-bottom: 24px;
    }

    .nd-body ul li,
    .nd-body ol li {
      margin-bottom: 8px;
      color: #333;
    }

    .nd-body ul li {
      list-style: disc;
    }

    .nd-body ol li {
      list-style: decimal;
    }

    .nd-body blockquote {
      border-left: 4px solid var(--blue);
      background: var(--blue-tint-2);
      padding: 20px 26px;
      margin: 30px 0;
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: var(--muted);
    }

    .nd-body blockquote p {
      margin: 0;
    }

    .nd-body blockquote cite {
      display: block;
      margin-top: 10px;
      font-size: 14px;
      font-style: normal;
      color: var(--muted-2);
    }

    .nd-body figure {
      margin: 28px 0;
    }

    .nd-body figure img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }

    .nd-body figure figcaption {
      font-size: 13.5px;
      color: var(--muted-2);
      text-align: center;
      margin-top: 10px;
    }

    .nd-body a {
      color: var(--blue-ink);
      border-bottom: 1px solid var(--blue-tint);
      transition: .18s;
    }

    .nd-body a:hover {
      color: var(--blue);
      border-color: var(--blue);
    }

    .nd-body code {
      background: var(--blue-tint-2);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 14px;
      font-family: 'SFMono-Regular', Consolas, monospace;
      color: var(--blue-ink);
    }

    .nd-tags {
      padding: 0 44px 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nd-tags .t {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 13.5px;
      transition: .18s;
    }

    .nd-tags .t:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* prev/next */
    .nd-prevnext {
      border-top: 1px solid var(--line);
      padding: 20px 44px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .nd-prevnext .pn {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: .18s;
    }

    .nd-prevnext .pn:hover {
      border-color: var(--blue);
      background: var(--blue-tint-2);
    }

    .nd-prevnext .pn .k {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    .nd-prevnext .pn .v {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }

    .nd-prevnext .pn.next {
      text-align: right;
      align-items: flex-end;
    }

    .nd-prevnext .pn.disabled {
      opacity: .55;
      pointer-events: none;
      cursor: default;
    }

    .empty-tip {
      grid-column: 1 / -1;
      color: var(--muted);
      text-align: center;
      padding: 30px 0;
    }

    /* sidebar */
    .nd-side {
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: sticky;
      top: 150px;
    }

    .nd-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 26px;
    }

    .nd-card.search {
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }

    .nd-card h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--line-2);
      position: relative;
    }

    .nd-card h4::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 36px;
      height: 2px;
      background: var(--blue);
    }

    /* sidebar search */
    .nd-card.search {
      padding: 18px;
    }

    .nd-card.search form {
      display: flex;
      align-items: center;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      overflow: hidden;
      transition: .18s;
    }

    .nd-card.search form:focus-within {
      border-color: var(--blue);
    }

    .nd-card.search input {
      flex: 1;
      min-width: 0;
      height: 42px;
      border: 0;
      padding: 0 14px;
      font-size: 14px;
      outline: 0;
      font-family: var(--font);
      color: var(--ink);
      background: transparent;
    }

    .nd-card.search button {
      width: 42px;
      height: 42px;
      border: 0;
      background: var(--blue);
      color: #fff;
      border-radius: 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      transition: .18s;
    }

    .nd-card.search button:hover {
      background: var(--blue-ink);
    }

    /* recent posts */
    .recent-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .recent-list li a {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .recent-list .thumb {
      flex: 0 0 72px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--blue-tint-2);
    }

    .recent-list .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .recent-list .info {
      flex: 1;
      min-width: 0;
    }

    .recent-list .info .t {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: .18s;
    }

    .recent-list li a:hover .t {
      color: var(--blue);
    }

    .recent-list .info .d {
      font-size: 12px;
      color: var(--muted-2);
    }

    /* categories */
    .cat-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .cat-list li {
      border-bottom: 1px solid var(--line);
    }

    .cat-list li:last-child {
      border-bottom: 0;
    }

    .cat-list li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      color: var(--ink);
      font-size: 14.5px;
      transition: .18s;
    }

    .cat-list li a:hover {
      color: var(--blue);
      padding-left: 6px;
    }

    .cat-list li .c {
      font-size: 12.5px;
      color: var(--muted-2);
      background: var(--blue-tint-2);
      padding: 2px 10px;
      border-radius: 999px;
      transition: .18s;
    }

    .cat-list li a:hover .c {
      background: var(--blue-tint);
      color: var(--blue-ink);
    }

    /* tag cloud */
    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag-cloud a {
      display: inline-block;
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--muted);
      font-size: 13px;
      transition: .18s;
    }

    .tag-cloud a:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* related */
    .nd-related {
      padding: 90px 0 110px;
      background: #f8fafc;
    }

    .nd-related .section-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 48px;
    }

    .nd-related .section-head .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--blue);
      margin-bottom: 12px;
    }

    .nd-related .section-head h2 {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      line-height: 1.15;
      color: var(--ink);
      letter-spacing: -.02em;
    }

    .nd-related .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .nd-related .post-card {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(27, 24, 34, .06);
      transition: transform .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .nd-related .post-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 46px -16px rgba(47, 109, 240, .25);
    }

    .nd-related .post-card .thumb {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      display: block;
      background: var(--blue-tint-2);
    }

    .nd-related .post-card .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }

    .nd-related .post-card:hover .thumb img {
      transform: scale(1.06);
    }

    .nd-related .post-card .body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    .nd-related .post-card .meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--muted-2);
    }

    .nd-related .post-card .meta .cat {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--blue-tint);
      color: var(--blue);
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .nd-related .post-card h3 {
      font-size: 18px;
      line-height: 1.35;
      margin-bottom: 12px;
      font-family: var(--font);
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .nd-related .post-card h3 a {
      color: var(--ink);
      transition: .18s;
    }

    .nd-related .post-card h3 a:hover {
      color: var(--blue);
    }

    .nd-related .post-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 18px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nd-related .post-card .read-more {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      text-decoration: none;
      transition: .18s;
    }

    .nd-related .post-card .read-more::after {
      content: '\2192';
      transition: transform .2s ease;
    }

    .nd-related .post-card:hover .read-more::after {
      transform: translateX(4px);
    }

    /* responsive */
    @media (max-width: 1020px) {
      .nd-grid {
        grid-template-columns: 1fr;
      }

      .nd-side {
        position: static;
      }

      .nd-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }

      .nd-related .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
      }
    }

    @media (max-width: 720px) {
      .nd-side {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .news-detail {
        padding: 24px 0 56px;
      }

      .nd-head {
        padding: 26px 22px 18px;
      }

      .nd-cover {
        padding: 0 22px 22px;
      }

      .nd-body {
        padding: 4px 22px 28px;
        font-size: 15.5px;
      }

      .nd-body p.lead {
        font-size: 17px;
      }

      .nd-tags {
        padding: 0 22px 22px;
      }

      .nd-prevnext {
        padding: 18px 22px;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .nd-prevnext .pn.next {
        text-align: left;
        align-items: flex-start;
      }

      .nd-card {
        padding: 20px 22px;
      }

      .nd-related {
        padding: 56px 0 64px;
      }

      .nd-related .related-grid {
        grid-template-columns: 1fr;
      }

      .nd-related .section-head {
        margin-bottom: 32px;
      }

      .nd-related .post-card .body {
        padding: 20px;
      }
    }
  

/* ===== lists_product_brand.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; 
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }

  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* 无子栏目时隐藏空下拉框 */
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }

  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }

  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }

  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }

  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }

  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }

  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  .sidebar .brand-list a.active {
    color: var(--blue); font-weight: 700;
    background: var(--blue-pale);
  }

  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 主内容区 ================= */
  .main-content { display: flex; flex-direction: column; gap: clamp(28px, 2.5vw, 40px); min-width: 0; }

  /* 面包屑 */
  .breadcrumb { font-size: 14px; color: var(--text-lighter); }
  .breadcrumb a { color: var(--text-light); }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb span.sep { margin: 0 8px; }

  /* 品牌视角：品牌头部 */
  .brand-hero {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
    padding: 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .brand-hero .bh-logo {
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; padding: 20px;
  }
  .brand-hero .bh-logo img { max-height: 100%; object-fit: contain; }
  .brand-hero .bh-logo-ph {
    font-size: 48px; font-weight: 900; color: var(--blue);
    letter-spacing: 4px; font-family: "Helvetica Neue", Arial, sans-serif;
  }
  .brand-hero .bh-info h2 { font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
  .brand-hero .bh-meta { font-size: 15px; color: var(--text-light); margin-bottom: 14px; font-weight: 500; }
  .brand-hero .bh-intro { font-size: 14px; color: var(--text-light); line-height: 1.8; }

  /* 品牌筛选条（分类视角） */
  .brand-chip-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .brand-chip {
    flex-shrink: 0;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .brand-chip:hover { border-color: var(--blue); color: var(--blue); }
  .brand-chip.active { background: var(--blue); border-color: var(--blue); color: var(--white); }
  .chips-empty { font-size: 14px; color: var(--text-lighter); }

  /* 系列筛选 */
  .series-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  .series-filter .label {
    color: var(--text-light);
    font-weight: 500;
  }
  .series-filter .item {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    color: var(--text);
    transition: all 0.2s;
  }
  .series-filter .item:hover {
    color: var(--blue);
  }
  .series-filter .item.active {
    background: var(--blue-pale);
    color: var(--blue);
    font-weight: 700;
  }

  /* ================= 产品网格（每行 6 个） ================= */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 桌面端每行 6 个 */
    gap: 16px; /* 间距稍微缩小以适应 6 列 */
    flex: 0 0 auto; /* 不拉伸填满剩余高度，避免产品少时下方出现大片空白 */
  }
  .product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px; /* 内边距减小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .product-card:hover {
    border-color: var(--blue);
    box-shadow: 0 10px 20px rgba(232,68,31,0.12);
    transform: translateY(-4px);
  }
  .product-card .img {
    width: 100%;
    height: 130px; /* 图片高度减小 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #fff !important;
    border-radius: 6px;
    overflow: hidden;
  }
  .product-card .img img {
    max-height: 100%;
    object-fit: contain;
  }
  .product-card .img .ph {
    width: 50px;
    height: 50px;
    border: 1px dashed var(--text-lighter);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-lighter);
    letter-spacing: 1px;
  }
  .product-card h4 {
    font-size: 14px; /* 标题字号减小 */
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .product-card .meta {
    font-size: 11px; /* 型号等字号减小 */
    color: var(--text-light);
    line-height: 1.5;
  }
  .product-card .meta span {
    display: block;
  }

  /* 页面空状态或提示 */
  .empty-tip {
    padding: 60px 0;
    text-align: center;
    color: var(--text-lighter);
    font-size: 15px;
    background: var(--bg);
    border-radius: 8px;
  }

  /* ================= 分页 ================= */
  .pagination {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 8px; margin-top: 40px;
  }
  .pagination a, .pagination span, .pagination info {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--white); color: var(--text);
    font-size: 14px; font-weight: 200; text-decoration: none;
    transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
  }
  .pagination a:hover { border-color: var(--blue); color: var(--blue); }
  .pagination .page_curr { background: var(--blue); border-color: var(--blue); color: #fff; pointer-events: none; }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  /* 中等屏幕：6列可能太挤，降级为4列 */
  @media (max-width: 1280px) {
    .product-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .product-card { padding: 18px; }
    .product-card .img { height: 150px; }
    .product-card h4 { font-size: 15px; }
    .product-card .meta { font-size: 12px; }
  }

  /* 移动端 */
  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }

    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }

    .sidebar { display: none; }

    .brand-hero {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }
    .brand-hero .bh-logo { height: 100px; padding: 10px; }
    .brand-hero .bh-logo-ph { font-size: 36px; }
    .brand-hero .bh-info h2 { font-size: 22px; }

    .series-filter {
      flex-wrap: wrap;
      gap: 12px;
      padding-bottom: 16px;
    }
    .series-filter .item { padding: 4px 10px; font-size: 14px; }

    /* 移动端依然保持两列 */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card { padding: 12px; }
    .product-card .img { height: 100px; margin-bottom: 10px; }
    .product-card .img .ph { width: 44px; height: 44px; font-size: 10px; }
    .product-card h4 { font-size: 14px; margin-bottom: 6px; }
    .product-card .meta { font-size: 11px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }

    .product-grid { gap: 8px; }
    .product-card { padding: 8px; }
    .product-card .img { height: 80px; margin-bottom: 8px; }
    .product-card .img .ph { width: 36px; height: 36px; font-size: 9px; }
    .product-card h4 { font-size: 13px; }
    .product-card .meta { font-size: 10px; }
  }


/* ===== view_solution.htm ===== */

    /* ===================== News Detail Page ===================== */
    .news-detail {
      background: #f8f8f8;
      padding: 40px 0 96px;
    }

    /* breadcrumb (same as products-detail) */
    .news-detail .crumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13.5px;
      color: var(--muted-2);
      margin-bottom: 28px;
    }

    .news-detail .crumb a {
      color: var(--muted-2);
      transition: .18s;
    }

    .news-detail .crumb a:hover {
      color: var(--blue);
    }

    .news-detail .crumb .sep {
      color: var(--line-2);
    }

    .news-detail .crumb .cur {
      color: var(--ink);
      font-weight: 600;
    }

    /* main grid */
    .nd-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 44px;
      align-items: start;
    }

    /* article card */
    .nd-article {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .nd-head {
      padding: 38px 44px 22px;
    }

    .nd-cat {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 6px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 16px;
      transition: .18s;
    }

    .nd-cat:hover {
      background: var(--blue-ink);
      color: #fff;
    }

    .nd-head h1 {
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.18;
      margin-bottom: 18px;
      letter-spacing: -.02em;
    }

    .nd-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      color: var(--muted-2);
      font-size: 14px;
    }

    .nd-meta .m {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .nd-meta .m svg {
      width: 14px;
      height: 14px;
      color: var(--blue);
    }

    .nd-cover {
      padding: 0 44px 28px;
    }

    .nd-cover img {
      width: 100%;
      border-radius: 12px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
    }

    .nd-body {
      padding: 6px 44px 36px;
      font-size: 16.5px;
      line-height: 1.85;
      color: var(--ink);
    }

    .nd-body p {
      margin-bottom: 22px;
      color: #333;
    }

    .nd-body p.lead {
      font-size: 18.5px;
      color: var(--ink);
      font-weight: 500;
    }

    .nd-body h2 {
      font-size: clamp(22px, 2.4vw, 28px);
      margin: 36px 0 16px;
      letter-spacing: -.02em;
    }

    .nd-body h3 {
      font-size: 20px;
      margin: 30px 0 12px;
      letter-spacing: -.01em;
    }

    .nd-body ul,
    .nd-body ol {
      padding-left: 22px;
      margin-bottom: 24px;
    }

    .nd-body ul li,
    .nd-body ol li {
      margin-bottom: 8px;
      color: #333;
    }

    .nd-body ul li {
      list-style: disc;
    }

    .nd-body ol li {
      list-style: decimal;
    }

    .nd-body blockquote {
      border-left: 4px solid var(--blue);
      background: var(--blue-tint-2);
      padding: 20px 26px;
      margin: 30px 0;
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: var(--muted);
    }

    .nd-body blockquote p {
      margin: 0;
    }

    .nd-body blockquote cite {
      display: block;
      margin-top: 10px;
      font-size: 14px;
      font-style: normal;
      color: var(--muted-2);
    }

    .nd-body figure {
      margin: 28px 0;
    }

    .nd-body figure img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }

    .nd-body figure figcaption {
      font-size: 13.5px;
      color: var(--muted-2);
      text-align: center;
      margin-top: 10px;
    }

    .nd-body a {
      color: var(--blue-ink);
      border-bottom: 1px solid var(--blue-tint);
      transition: .18s;
    }

    .nd-body a:hover {
      color: var(--blue);
      border-color: var(--blue);
    }

    .nd-body code {
      background: var(--blue-tint-2);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 14px;
      font-family: 'SFMono-Regular', Consolas, monospace;
      color: var(--blue-ink);
    }

    .nd-tags {
      padding: 0 44px 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nd-tags .t {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 13.5px;
      transition: .18s;
    }

    .nd-tags .t:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* prev/next */
    .nd-prevnext {
      border-top: 1px solid var(--line);
      padding: 20px 44px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .nd-prevnext .pn {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: .18s;
    }

    .nd-prevnext .pn:hover {
      border-color: var(--blue);
      background: var(--blue-tint-2);
    }

    .nd-prevnext .pn .k {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    .nd-prevnext .pn .v {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }

    .nd-prevnext .pn.next {
      text-align: right;
      align-items: flex-end;
    }

    .nd-prevnext .pn.disabled {
      opacity: .55;
      pointer-events: none;
      cursor: default;
    }

    .empty-tip {
      grid-column: 1 / -1;
      color: var(--muted);
      text-align: center;
      padding: 30px 0;
    }

    /* sidebar */
    .nd-side {
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: sticky;
      top: 150px;
    }

    .nd-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 26px;
    }

    .nd-card.search {
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }

    .nd-card h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--line-2);
      position: relative;
    }

    .nd-card h4::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 36px;
      height: 2px;
      background: var(--blue);
    }

    /* sidebar search */
    .nd-card.search {
      padding: 18px;
    }

    .nd-card.search form {
      display: flex;
      align-items: center;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      overflow: hidden;
      transition: .18s;
    }

    .nd-card.search form:focus-within {
      border-color: var(--blue);
    }

    .nd-card.search input {
      flex: 1;
      min-width: 0;
      height: 42px;
      border: 0;
      padding: 0 14px;
      font-size: 14px;
      outline: 0;
      font-family: var(--font);
      color: var(--ink);
      background: transparent;
    }

    .nd-card.search button {
      width: 42px;
      height: 42px;
      border: 0;
      background: var(--blue);
      color: #fff;
      border-radius: 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      transition: .18s;
    }

    .nd-card.search button:hover {
      background: var(--blue-ink);
    }

    /* recent posts */
    .recent-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .recent-list li a {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .recent-list .thumb {
      flex: 0 0 72px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--blue-tint-2);
    }

    .recent-list .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .recent-list .info {
      flex: 1;
      min-width: 0;
    }

    .recent-list .info .t {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: .18s;
    }

    .recent-list li a:hover .t {
      color: var(--blue);
    }

    .recent-list .info .d {
      font-size: 12px;
      color: var(--muted-2);
    }

    /* categories */
    .cat-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .cat-list li {
      border-bottom: 1px solid var(--line);
    }

    .cat-list li:last-child {
      border-bottom: 0;
    }

    .cat-list li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      color: var(--ink);
      font-size: 14.5px;
      transition: .18s;
    }

    .cat-list li a:hover {
      color: var(--blue);
      padding-left: 6px;
    }

    .cat-list li .c {
      font-size: 12.5px;
      color: var(--muted-2);
      background: var(--blue-tint-2);
      padding: 2px 10px;
      border-radius: 999px;
      transition: .18s;
    }

    .cat-list li a:hover .c {
      background: var(--blue-tint);
      color: var(--blue-ink);
    }

    /* tag cloud */
    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag-cloud a {
      display: inline-block;
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--muted);
      font-size: 13px;
      transition: .18s;
    }

    .tag-cloud a:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* related */
    .nd-related {
      padding: 90px 0 110px;
      background: #f8fafc;
    }

    .nd-related .section-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 48px;
    }

    .nd-related .section-head .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--blue);
      margin-bottom: 12px;
    }

    .nd-related .section-head h2 {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      line-height: 1.15;
      color: var(--ink);
      letter-spacing: -.02em;
    }

    .nd-related .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .nd-related .post-card {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(27, 24, 34, .06);
      transition: transform .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .nd-related .post-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 46px -16px rgba(47, 109, 240, .25);
    }

    .nd-related .post-card .thumb {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      display: block;
      background: var(--blue-tint-2);
    }

    .nd-related .post-card .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }

    .nd-related .post-card:hover .thumb img {
      transform: scale(1.06);
    }

    .nd-related .post-card .body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    .nd-related .post-card .meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--muted-2);
    }

    .nd-related .post-card .meta .cat {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--blue-tint);
      color: var(--blue);
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .nd-related .post-card h3 {
      font-size: 18px;
      line-height: 1.35;
      margin-bottom: 12px;
      font-family: var(--font);
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .nd-related .post-card h3 a {
      color: var(--ink);
      transition: .18s;
    }

    .nd-related .post-card h3 a:hover {
      color: var(--blue);
    }

    .nd-related .post-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 18px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nd-related .post-card .read-more {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      text-decoration: none;
      transition: .18s;
    }

    .nd-related .post-card .read-more::after {
      content: '\2192';
      transition: transform .2s ease;
    }

    .nd-related .post-card:hover .read-more::after {
      transform: translateX(4px);
    }

    /* responsive */
    @media (max-width: 1020px) {
      .nd-grid {
        grid-template-columns: 1fr;
      }

      .nd-side {
        position: static;
      }

      .nd-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }

      .nd-related .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
      }
    }

    @media (max-width: 720px) {
      .nd-side {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .news-detail {
        padding: 24px 0 56px;
      }

      .nd-head {
        padding: 26px 22px 18px;
      }

      .nd-cover {
        padding: 0 22px 22px;
      }

      .nd-body {
        padding: 4px 22px 28px;
        font-size: 15.5px;
      }

      .nd-body p.lead {
        font-size: 17px;
      }

      .nd-tags {
        padding: 0 22px 22px;
      }

      .nd-prevnext {
        padding: 18px 22px;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .nd-prevnext .pn.next {
        text-align: left;
        align-items: flex-start;
      }

      .nd-card {
        padding: 20px 22px;
      }

      .nd-related {
        padding: 56px 0 64px;
      }

      .nd-related .related-grid {
        grid-template-columns: 1fr;
      }

      .nd-related .section-head {
        margin-bottom: 32px;
      }

      .nd-related .post-card .body {
        padding: 20px;
      }
    }
  

/* ===== lists_product.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; 
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }

  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* 无子栏目时隐藏空下拉框 */
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }

  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }

  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }

  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }

  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }

  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }

  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  .sidebar .brand-list a.active {
    color: var(--blue); font-weight: 700;
    background: var(--blue-pale);
  }

  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 280px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 主内容区 ================= */
  .main-content { display: flex; flex-direction: column; gap: clamp(28px, 2.5vw, 40px); min-width: 0; }

  /* 品牌/栏目头部 */
  .brand-header {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }
  .brand-header .brand-logo-box {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    padding: 20px;
  }
  .brand-header .brand-logo-box img {
    max-height: 100%;
    object-fit: contain;
  }
  .brand-header .brand-logo-placeholder {
    font-size: 40px;
    font-weight: 900;
    color: var(--blue);
    letter-spacing: 4px;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  .brand-header .brand-info h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .brand-header .brand-info .origin {
    font-size: 15px;
    color: var(--text-light);
    margin-bottom: 16px;
    font-weight: 500;
  }
  .brand-header .brand-info .desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.8;
  }

  /* 品牌筛选条（分类视角） */
  .brand-chip-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .brand-chip {
    flex-shrink: 0;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .brand-chip:hover { border-color: var(--blue); color: var(--blue); }
  .brand-chip.active { background: var(--blue); border-color: var(--blue); color: var(--white); }
  .chips-empty { font-size: 14px; color: var(--text-lighter); }

  /* 系列筛选 */
  .series-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
  }
  .series-filter .label {
    color: var(--text-light);
    font-weight: 500;
  }
  .series-filter .item {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    color: var(--text);
    transition: all 0.2s;
  }
  .series-filter .item:hover {
    color: var(--blue);
  }
  .series-filter .item.active {
    background: var(--blue-pale);
    color: var(--blue);
    font-weight: 700;
  }

  /* ================= 产品网格（每行 4 个） ================= */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 桌面端每行 6 个 */
    gap: 16px; /* 间距稍微缩小以适应 6 列 */
  }
  .product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px; /* 内边距减小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .product-card:hover {
    border-color: var(--blue);
    box-shadow: 0 10px 20px rgba(232,68,31,0.12);
    transform: translateY(-4px);
  }
  .product-card .img {
    width: 100%;
    height: 200px; /* 图片高度减小 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
  }
  .product-card .img img {
    max-height: 100%;
    object-fit: contain;
  }
  .product-card .img .ph {
    width: 50px;
    height: 50px;
    border: 1px dashed var(--text-lighter);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-lighter);
    letter-spacing: 1px;
  }
  .product-card h4 {
    font-size: 14px; /* 标题字号减小 */
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .product-card .meta {
    font-size: 11px; /* 型号等字号减小 */
    color: var(--text-light);
    line-height: 1.5;
  }
  .product-card .meta span {
    display: block;
  }

  /* 页面空状态或提示 */
  .empty-tip {
    padding: 60px 0;
    text-align: center;
    color: var(--text-lighter);
    font-size: 15px;
    background: var(--bg);
    border-radius: 8px;
  }

  /* ================= 分页 ================= */
  .pagination {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 8px; margin-top: 40px;
  }
  .pagination a, .pagination span, .pagination info {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--white); color: var(--text);
    font-size: 14px; font-weight: 200; text-decoration: none;
    transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
  }
  .pagination a:hover { border-color: var(--blue); color: var(--blue); }
  .pagination .page_curr { background: var(--blue); border-color: var(--blue); color: #fff; pointer-events: none; }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  /* 中等屏幕：6列可能太挤，降级为4列 */
  @media (max-width: 1280px) {
    .product-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .product-card { padding: 18px; }
    .product-card .img { height: 150px; }
    .product-card h4 { font-size: 15px; }
    .product-card .meta { font-size: 12px; }
  }

  /* 移动端 */
  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }

    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }

    .sidebar { display: none; }

    .brand-header {
      grid-template-columns: 1fr;
      gap: 20px;
      padding-bottom: 24px;
    }
    .brand-header .brand-logo-box {
      height: 100px;
      padding: 10px;
    }
    .brand-header .brand-logo-placeholder { font-size: 32px; }
    .brand-header .brand-info h2 { font-size: 22px; }
    .brand-header .brand-info .desc { font-size: 13px; }

    .series-filter {
      flex-wrap: wrap;
      gap: 12px;
      padding-bottom: 16px;
    }
    .series-filter .item { padding: 4px 10px; font-size: 14px; }

    /* 移动端依然保持两列 */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card { padding: 12px; }
    .product-card .img { height: 100px; margin-bottom: 10px; }
    .product-card .img .ph { width: 44px; height: 44px; font-size: 10px; }
    .product-card h4 { font-size: 14px; margin-bottom: 6px; }
    .product-card .meta { font-size: 11px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }

    .product-grid { gap: 8px; }
    .product-card { padding: 8px; }
    .product-card .img { height: 80px; margin-bottom: 8px; }
    .product-card .img .ph { width: 36px; height: 36px; font-size: 9px; }
    .product-card h4 { font-size: 13px; }
    .product-card .meta { font-size: 10px; }
  }


/* ===== view_product.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }

  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }

  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box form { display: flex; align-items: center; gap: 8px; width: 100%; }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }

  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }

  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }

  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }

  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }

  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 主内容区（产品详情） ================= */
  .main-content { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); min-width: 0; }

  /* 面包屑 */
  .breadcrumb {
    font-size: 14px;
    color: var(--text-lighter);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb .separator { color: var(--text-lighter); }
  .breadcrumb .current { color: var(--text); font-weight: 500; }

  /* 产品详情上半部分：图库 + 信息 */
  .product-detail-top {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px;
    align-items: start;
  }

  /* 图库 */
  .product-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .gallery-main {
    position: relative;
    width: 100%;
    height: 320px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .gallery-main.zoomable { cursor: zoom-in; }
  .gallery-zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0aa;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .gallery-main:hover .gallery-zoom { opacity: 1; }
  .gallery-main .ph {
    font-size: 14px;
    color: var(--text-lighter);
    letter-spacing: 2px;
  }
  .gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
  }
  .gallery-thumb {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s;
  }
  .gallery-thumb:hover { border-color: var(--blue-light); }
  .gallery-thumb.active { border-color: var(--blue); }
  .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .gallery-thumb .ph {
    font-size: 10px;
    color: var(--text-lighter);
  }

  /* 产品信息 */
  .product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .product-info h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
  }
  .product-brand-box {
    width: 280px;
    height: 140px;
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
  }
  .product-brand-box .brand-logo-placeholder {
    font-size: 22px;
    font-weight: 900;
    color: var(--blue);
    letter-spacing: 2px;
  }
  .product-brand-box .brand-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .product-info .product-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
    color: var(--text);
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .product-info .product-meta .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .product-info .product-meta .meta-label {
    color: var(--text-light);
    min-width: 60px;
    font-weight: 500;
  }
  .product-info .product-meta .meta-value {
    color: var(--text);
    font-weight: 600;
  }

  /* 产品 Tab 栏 */
  .product-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    margin-top: 10px;
    padding-bottom: 0;
  }
  .product-tabs {
    display: flex;
    gap: 32px;
  }
  .product-tab {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-lighter);
    padding-bottom: 14px;
    position: relative;
    cursor: pointer;
    transition: color 0.2s;
  }
  .product-tab:hover { color: var(--navy); }
  .product-tab.active { color: var(--navy); }
  .product-tab.active::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 3px;
    background: var(--blue);
  }
  .btn-pdf {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--blue);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-pdf:hover { background: var(--blue-dark); }

  /* 产品 Tab 内容 */
  .product-tab-content {
    display: none;
    padding: 16px 0;
    font-size: 15px;
    color: var(--text);
    line-height: 1.9;
  }
  .product-tab-content.active { display: block; }
  .product-tab-content .content-block {
    margin-bottom: 28px;
  }
  .product-tab-content .content-block h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
  }
  .product-tab-content ul {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .product-tab-content ul li {
    list-style-type: disc;
    color: var(--text);
  }
  .product-tab-content ul li::marker {
    color: var(--text-light);
  }
  .product-tab-content .pd-body-content img { max-width: 100%; height: auto; }
  .product-tab-content .pd-body-content a { color: var(--blue); text-decoration: underline; }
  .empty-tip { color: var(--text-lighter); font-size: 15px; }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  @media (max-width: 1280px) {
    .product-detail-top {
      grid-template-columns: 360px 1fr;
      gap: 28px;
    }
    .gallery-main { height: 260px; }
  }

  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }

    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }

    .sidebar { display: none; }

    .product-detail-top {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }
    .gallery-main { height: 220px; }
    .product-info h1 { font-size: 20px; }
    .product-brand-box { width: 120px; height: 60px; }
    .product-brand-box .brand-logo-placeholder { font-size: 18px; }

    .product-tabs-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .product-tabs { gap: 20px; }
    .product-tab { font-size: 16px; }
    .btn-pdf { width: 100%; justify-content: center; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }

    .gallery-main { height: 160px; }
    .gallery-thumb { width: 56px; height: 56px; }
    .product-info h1 { font-size: 18px; }
    .product-info .product-meta { font-size: 14px; }
  }


/* ===== view_download.htm ===== */

    /* ===================== News Detail Page ===================== */
    .news-detail {
      background: #f8f8f8;
      padding: 40px 0 96px;
    }

    /* breadcrumb (same as products-detail) */
    .news-detail .crumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13.5px;
      color: var(--muted-2);
      margin-bottom: 28px;
    }

    .news-detail .crumb a {
      color: var(--muted-2);
      transition: .18s;
    }

    .news-detail .crumb a:hover {
      color: var(--blue);
    }

    .news-detail .crumb .sep {
      color: var(--line-2);
    }

    .news-detail .crumb .cur {
      color: var(--ink);
      font-weight: 600;
    }

    /* main grid */
    .nd-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 44px;
      align-items: start;
    }

    /* article card */
    .nd-article {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
    }

    .nd-head {
      padding: 38px 44px 22px;
    }

    .nd-cat {
      display: inline-block;
      background: var(--blue);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 6px;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 16px;
      transition: .18s;
    }

    .nd-cat:hover {
      background: var(--blue-ink);
      color: #fff;
    }

    .nd-head h1 {
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.18;
      margin-bottom: 18px;
      letter-spacing: -.02em;
    }

    .nd-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      color: var(--muted-2);
      font-size: 14px;
    }

    .nd-meta .m {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .nd-meta .m svg {
      width: 14px;
      height: 14px;
      color: var(--blue);
    }

    .nd-cover {
      padding: 0 44px 28px;
    }

    .nd-cover img {
      width: 100%;
      border-radius: 12px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
    }

    .nd-body {
      padding: 6px 44px 36px;
      font-size: 16.5px;
      line-height: 1.85;
      color: var(--ink);
    }

    .nd-body p {
      margin-bottom: 22px;
      color: #333;
    }

    .nd-body p.lead {
      font-size: 18.5px;
      color: var(--ink);
      font-weight: 500;
    }

    .nd-body h2 {
      font-size: clamp(22px, 2.4vw, 28px);
      margin: 36px 0 16px;
      letter-spacing: -.02em;
    }

    .nd-body h3 {
      font-size: 20px;
      margin: 30px 0 12px;
      letter-spacing: -.01em;
    }

    .nd-body ul,
    .nd-body ol {
      padding-left: 22px;
      margin-bottom: 24px;
    }

    .nd-body ul li,
    .nd-body ol li {
      margin-bottom: 8px;
      color: #333;
    }

    .nd-body ul li {
      list-style: disc;
    }

    .nd-body ol li {
      list-style: decimal;
    }

    .nd-body blockquote {
      border-left: 4px solid var(--blue);
      background: var(--blue-tint-2);
      padding: 20px 26px;
      margin: 30px 0;
      border-radius: 0 12px 12px 0;
      font-style: italic;
      color: var(--muted);
    }

    .nd-body blockquote p {
      margin: 0;
    }

    .nd-body blockquote cite {
      display: block;
      margin-top: 10px;
      font-size: 14px;
      font-style: normal;
      color: var(--muted-2);
    }

    .nd-body figure {
      margin: 28px 0;
    }

    .nd-body figure img {
      width: 100%;
      border-radius: 12px;
      display: block;
    }

    .nd-body figure figcaption {
      font-size: 13.5px;
      color: var(--muted-2);
      text-align: center;
      margin-top: 10px;
    }

    .nd-body a {
      color: var(--blue-ink);
      border-bottom: 1px solid var(--blue-tint);
      transition: .18s;
    }

    .nd-body a:hover {
      color: var(--blue);
      border-color: var(--blue);
    }

    .nd-body code {
      background: var(--blue-tint-2);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 14px;
      font-family: 'SFMono-Regular', Consolas, monospace;
      color: var(--blue-ink);
    }

    .nd-tags {
      padding: 0 44px 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .nd-tags .t {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 13.5px;
      transition: .18s;
    }

    .nd-tags .t:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* prev/next */
    .nd-prevnext {
      border-top: 1px solid var(--line);
      padding: 20px 44px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .nd-prevnext .pn {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: .18s;
    }

    .nd-prevnext .pn:hover {
      border-color: var(--blue);
      background: var(--blue-tint-2);
    }

    .nd-prevnext .pn .k {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    .nd-prevnext .pn .v {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }

    .nd-prevnext .pn.next {
      text-align: right;
      align-items: flex-end;
    }

    .nd-prevnext .pn.disabled {
      opacity: .55;
      pointer-events: none;
      cursor: default;
    }

    .empty-tip {
      grid-column: 1 / -1;
      color: var(--muted);
      text-align: center;
      padding: 30px 0;
    }

    /* sidebar */
    .nd-side {
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: sticky;
      top: 150px;
    }

    .nd-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 26px;
    }

    .nd-card.search {
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }

    .nd-card h4 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--line-2);
      position: relative;
    }

    .nd-card h4::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 36px;
      height: 2px;
      background: var(--blue);
    }

    /* sidebar search */
    .nd-card.search {
      padding: 18px;
    }

    .nd-card.search form {
      display: flex;
      align-items: center;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      overflow: hidden;
      transition: .18s;
    }

    .nd-card.search form:focus-within {
      border-color: var(--blue);
    }

    .nd-card.search input {
      flex: 1;
      min-width: 0;
      height: 42px;
      border: 0;
      padding: 0 14px;
      font-size: 14px;
      outline: 0;
      font-family: var(--font);
      color: var(--ink);
      background: transparent;
    }

    .nd-card.search button {
      width: 42px;
      height: 42px;
      border: 0;
      background: var(--blue);
      color: #fff;
      border-radius: 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      transition: .18s;
    }

    .nd-card.search button:hover {
      background: var(--blue-ink);
    }

    /* recent posts */
    .recent-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .recent-list li a {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .recent-list .thumb {
      flex: 0 0 72px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--blue-tint-2);
    }

    .recent-list .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .recent-list .info {
      flex: 1;
      min-width: 0;
    }

    .recent-list .info .t {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: .18s;
    }

    .recent-list li a:hover .t {
      color: var(--blue);
    }

    .recent-list .info .d {
      font-size: 12px;
      color: var(--muted-2);
    }

    /* categories */
    .cat-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .cat-list li {
      border-bottom: 1px solid var(--line);
    }

    .cat-list li:last-child {
      border-bottom: 0;
    }

    .cat-list li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 0;
      color: var(--ink);
      font-size: 14.5px;
      transition: .18s;
    }

    .cat-list li a:hover {
      color: var(--blue);
      padding-left: 6px;
    }

    .cat-list li .c {
      font-size: 12.5px;
      color: var(--muted-2);
      background: var(--blue-tint-2);
      padding: 2px 10px;
      border-radius: 999px;
      transition: .18s;
    }

    .cat-list li a:hover .c {
      background: var(--blue-tint);
      color: var(--blue-ink);
    }

    /* tag cloud */
    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag-cloud a {
      display: inline-block;
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--muted);
      font-size: 13px;
      transition: .18s;
    }

    .tag-cloud a:hover {
      border-color: var(--blue);
      color: var(--blue-ink);
      background: var(--blue-tint);
    }

    /* related */
    .nd-related {
      padding: 90px 0 110px;
      background: #f8fafc;
    }

    .nd-related .section-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 48px;
    }

    .nd-related .section-head .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--blue);
      margin-bottom: 12px;
    }

    .nd-related .section-head h2 {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      line-height: 1.15;
      color: var(--ink);
      letter-spacing: -.02em;
    }

    .nd-related .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .nd-related .post-card {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(27, 24, 34, .06);
      transition: transform .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .nd-related .post-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 46px -16px rgba(47, 109, 240, .25);
    }

    .nd-related .post-card .thumb {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      display: block;
      background: var(--blue-tint-2);
    }

    .nd-related .post-card .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s ease;
    }

    .nd-related .post-card:hover .thumb img {
      transform: scale(1.06);
    }

    .nd-related .post-card .body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    .nd-related .post-card .meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--muted-2);
    }

    .nd-related .post-card .meta .cat {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--blue-tint);
      color: var(--blue);
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .nd-related .post-card h3 {
      font-size: 18px;
      line-height: 1.35;
      margin-bottom: 12px;
      font-family: var(--font);
      font-weight: 700;
      letter-spacing: -.01em;
    }

    .nd-related .post-card h3 a {
      color: var(--ink);
      transition: .18s;
    }

    .nd-related .post-card h3 a:hover {
      color: var(--blue);
    }

    .nd-related .post-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 18px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .nd-related .post-card .read-more {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue);
      text-decoration: none;
      transition: .18s;
    }

    .nd-related .post-card .read-more::after {
      content: '\2192';
      transition: transform .2s ease;
    }

    .nd-related .post-card:hover .read-more::after {
      transform: translateX(4px);
    }

    /* responsive */
    @media (max-width: 1020px) {
      .nd-grid {
        grid-template-columns: 1fr;
      }

      .nd-side {
        position: static;
      }

      .nd-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }

      .nd-related .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
      }
    }

    @media (max-width: 720px) {
      .nd-side {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .news-detail {
        padding: 24px 0 56px;
      }

      .nd-head {
        padding: 26px 22px 18px;
      }

      .nd-cover {
        padding: 0 22px 22px;
      }

      .nd-body {
        padding: 4px 22px 28px;
        font-size: 15.5px;
      }

      .nd-body p.lead {
        font-size: 17px;
      }

      .nd-tags {
        padding: 0 22px 22px;
      }

      .nd-prevnext {
        padding: 18px 22px;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .nd-prevnext .pn.next {
        text-align: left;
        align-items: flex-start;
      }

      .nd-card {
        padding: 20px 22px;
      }

      .nd-related {
        padding: 56px 0 64px;
      }

      .nd-related .related-grid {
        grid-template-columns: 1fr;
      }

      .nd-related .section-head {
        margin-bottom: 32px;
      }

      .nd-related .post-card .body {
        padding: 20px;
      }
    }
  

/* ===== view_article.htm ===== */

  /* ================= 全局变量与基础样式 ================= */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --blue: #e8441f;
    --blue-dark: #c93615;
    --blue-light: #ff6b45;
    --blue-pale: #fdeee9;
    --navy: #072a44;
    --navy-light: #4a90c4;
    --logo-navy: #0a2d5e;
    --text: #1a2332;
    --text-light: #5a6b7d;
    --text-lighter: #9aa8b5;
    --border: #e4eaf0;
    --bg: #f7f9fc;
    --white: #ffffff;
    --pad-x: clamp(24px, 3vw, 64px);
  }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  
  /* ================= 顶部栏 ================= */
  .topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky; 
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    width: 100%;
  }
  .topbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    height: 88px;
    gap: 24px;
  }
  .logo { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .logo-mark {
    width: 42px; height: 42px;
    background: transparent; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-mark img{ width:100%; height:100%; object-fit:contain; }
  .logo-text h1 {
    font-size: 20px; font-weight: 600; letter-spacing: 2px;
    line-height: 1.1; color: var(--logo-navy);
  }
  .logo-text span {
    display: block; font-size: 11px; letter-spacing: 1px;
    color: var(--text-lighter); font-weight: 600; margin-top: 1px;
  }
  
  /* 导航 */
  .topbar-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; padding: 28px 16px;
    color: var(--text); font-weight: 500; transition: color 0.2s;
  }
  .nav-item > a .caret { font-size: 10px; color: var(--text-lighter); transition: transform 0.25s, color 0.25s; }
  .nav-item:hover > a, .nav-item.active > a { color: var(--blue); }
  .nav-item:hover > a .caret { transform: rotate(180deg); color: var(--blue); }
  .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px; background: var(--white);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 12px 32px rgba(232,68,31,0.15);
    padding: 8px 0; opacity: 0; visibility: hidden;
    transition: all 0.25s ease; z-index: 200;
  }
  .nav-item:hover .dropdown {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item .dropdown:empty { display: none; }
  .dropdown a {
    display: block; padding: 10px 22px; font-size: 15px;
    color: var(--text-light); white-space: nowrap;
    transition: all 0.2s; position: relative;
  }
  .dropdown a:hover { background: var(--blue-pale); color: var(--blue); padding-left: 28px; }
  
  /* 顶部右侧 */
  .topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .nav-contact {
    display: flex; align-items: center; gap: 10px;
    padding-right: 20px; border-right: 1px solid var(--border);
    transition: all 0.25s;
  }
  .nav-contact .ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blue); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0; transition: all 0.25s;
  }
  .nav-contact:hover .ico { background: var(--blue-dark); transform: scale(1.06); }
  .nav-contact .txt strong {
    display: block; font-size: 22px; font-weight: 800;
    color: var(--blue); line-height: 1.2; letter-spacing: 0.5px; transition: color 0.25s;
  }
  .nav-contact .txt span { font-size: 14px; color: var(--text-light); letter-spacing: 0.5px; }
  .nav-contact:hover .txt strong { color: var(--blue-dark); }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border); padding: 6px 0;
    width: 180px; transition: border-color 0.2s;
  }
  .search-box:focus-within { border-bottom-color: var(--blue); }
  .search-box form { display: flex; align-items: center; gap: 8px; width: 100%; }
  .search-box input {
    border: none; outline: none; background: transparent;
    font-size: 15px; color: var(--text); width: 100%;
  }
  .search-box input::placeholder { color: var(--text-lighter); }
  .search-box .icon { color: var(--text-lighter); font-size: 16px; }
  .lang { font-size: 15px; color: var(--text-light); font-weight: 500; transition: color 0.2s; }
  .lang:hover { color: var(--blue); }

  /* ================= 移动端专属按钮 ================= */
  .mobile-header-actions { display: none; align-items: center; gap: 16px; }
  .mobile-btn {
    font-size: 15px; font-weight: 600; color: var(--text);
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .mobile-btn .icon { font-size: 20px; }
  .mobile-phone-icon { color: var(--blue); display: flex; align-items: center; }

  /* ================= 移动端抽屉与浮层 ================= */
  .drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .drawer-backdrop.active { opacity: 1; pointer-events: auto; }
  
  .product-drawer {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 360px; height: 100vh;
    background: var(--white); z-index: 2000;
    transition: right 0.3s ease; overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .product-drawer.active { right: 0; }
  
  .menu-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background: var(--white);
    z-index: 3000; transform: translateY(-100%);
    transition: transform 0.3s ease; overflow-y: auto; padding: 20px;
  }
  .menu-overlay.active { transform: translateY(0); }
  .menu-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 24px; color: var(--text);
    background: none; border: none; cursor: pointer; line-height: 1;
  }
  .menu-search {
    margin-top: 40px; margin-bottom: 30px;
    background: #f5f5f5; border-radius: 20px;
    padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  }
  .menu-search input {
    border: none; background: transparent; outline: none;
    width: 100%; font-size: 15px; color: var(--text);
  }
  .menu-item {
    padding: 18px 0; border-bottom: 1px solid var(--border);
    font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  }
  .menu-item .plus { font-size: 20px; color: var(--text-light); transition: transform 0.3s; }
  .menu-item.open .plus { transform: rotate(45deg); }
  .menu-sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 16px; }
  .menu-item.open + .menu-sub { max-height: 300px; padding-bottom: 12px; }
  .menu-sub a { display: block; padding: 10px 0; font-size: 15px; color: var(--text-light); }

  /* ================= 抽屉内部样式 ================= */
  .product-drawer .side-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    margin-bottom: 24px; padding-top: 16px;
  }
  .product-drawer .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .product-drawer .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .product-drawer .side-tab.active { color: var(--navy); }
  .product-drawer .side-tab.active::after { width: 40%; }
  .product-drawer .side-panel { display: none; padding: 0 20px; }
  .product-drawer .side-panel.active { display: block; }
  
  .product-drawer .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .product-drawer .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .product-drawer .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; font-weight: 500;
  }
  .product-drawer .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .product-drawer .brand-list { display: flex; flex-direction: column; }
  
  .product-drawer .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: none; margin-bottom: 4px; border-radius: 6px; transition: all 0.2s;
  }
  .product-drawer .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }

  .product-drawer .cat-group { border-bottom: 1px solid var(--border); }
  .product-drawer .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
    transition: color 0.2s;
  }
  .product-drawer .cat-head:hover { color: var(--blue); }
  .product-drawer .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .product-drawer .cat-head:hover .arrow { color: var(--blue); }
  .product-drawer .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .product-drawer .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .product-drawer .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .product-drawer .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .product-drawer .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .product-drawer .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 页面主体布局 ================= */
  .layout {
    flex: 1; width: 100%;
    display: grid; grid-template-columns: 250px 1fr;
    gap: clamp(24px, 2.5vw, 48px);
    padding: clamp(28px, 2.5vw, 48px) var(--pad-x);
    align-items: stretch;
  }

  /* 左侧边栏 */
  .sidebar { align-self: start; position: sticky; top: 128px; }
  .sidebar .side-tabs {
    display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
  .sidebar .side-tab {
    flex: 1; text-align: center; padding: 0 0 14px;
    font-size: 17px; font-weight: 600; color: var(--text-lighter);
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; position: relative;
  }
  .sidebar .side-tab::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 0; height: 2px; background: var(--navy);
    transform: translateX(-50%); transition: width 0.3s;
  }
  .sidebar .side-tab.active { color: var(--navy); }
  .sidebar .side-tab.active::after { width: 40%; }
  .sidebar .side-panel { display: none; }
  .sidebar .side-panel.active { display: block; }
  .sidebar .alpha-title {
    font-size: 12px; letter-spacing: 2px; color: var(--text-lighter);
    text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
  }
  .sidebar .alpha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-bottom: 32px;
  }
  .sidebar .alpha a {
    font-size: 14px; color: var(--text-light); text-align: center;
    padding: 8px 0; border-radius: 4px; transition: all 0.2s; font-weight: 500;
  }
  .sidebar .alpha a.active {
    background: var(--blue); color: var(--white); font-weight: 700;
  }
  .sidebar .brand-list { display: flex; flex-direction: column; }
  
  .sidebar .brand-list a {
    padding: 12px 12px; font-size: 15px; color: var(--text);
    transition: all 0.2s; display: flex; align-items: center;
    justify-content: space-between; border-bottom: none;
    margin-bottom: 4px; border-radius: 6px;
  }
  .sidebar .brand-list a:hover {
    background: var(--blue-pale); color: var(--blue);
  }
  
  .sidebar .cat-group { border-bottom: 1px solid var(--border); }
  .sidebar .cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; font-size: 15px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: color 0.2s;
  }
  .sidebar .cat-head:hover { color: var(--blue); }
  .sidebar .cat-head .arrow {
    font-size: 11px; color: var(--text-lighter); transition: transform 0.25s, color 0.2s;
  }
  .sidebar .cat-head:hover .arrow { color: var(--blue); }
  .sidebar .cat-group.open .cat-head .arrow { transform: rotate(90deg); color: var(--blue); }
  .sidebar .cat-sub {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 12px;
  }
  .sidebar .cat-group.open .cat-sub { max-height: 800px; padding-bottom: 12px; }
  .sidebar .cat-sub a {
    display: block; padding: 8px 0 8px 14px; font-size: 14px;
    color: var(--text-light); border-left: 2px solid var(--border);
    transition: all 0.2s;
  }
  .sidebar .cat-sub a:hover {
    color: var(--blue); border-left-color: var(--blue); padding-left: 18px;
  }
  .sidebar .cat-sub a.active {
    color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  }

  /* ================= 主内容区（文章详情） ================= */
  .main-content { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); min-width: 0; }

  /* 面包屑 */
  .breadcrumb {
    font-size: 14px;
    color: var(--text-lighter);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb .separator { color: var(--text-lighter); }
  .breadcrumb .current { color: var(--text); font-weight: 500; }

  /* 文章详情标题与信息 */
  .expo-detail-header {
    text-align: center;
    margin-bottom: 12px;
  }
  .expo-detail-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.4;
  }
  .expo-detail-header .date {
    font-size: 16px;
    color: var(--blue);
    font-weight: 600;
  }

  /* 文章详情信息列表 */
  .expo-detail-info {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 20px;
    line-height: 2;
  }
  .expo-detail-info .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .expo-detail-info .info-label {
    color: var(--text-light);
    min-width: 80px;
  }
  .expo-detail-info .booth-highlight {
    background: var(--blue);
    color: var(--white);
    padding: 2px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
  }
  .expo-detail-info .booth-highlight .prefix {
    font-weight: 400;
    opacity: 0.9;
    margin-right: 4px;
  }

  /* 文章详情正文 */
  .expo-detail-content {
    font-size: 15px;
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 24px;
  }
  .expo-detail-content p {
    margin-bottom: 16px;
  }
  .expo-detail-content img { max-width: 100%; height: auto; border-radius: 6px; }

  /* 文章详情图片 */
  .expo-detail-image {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .expo-detail-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .expo-detail-image .ph {
    padding: 80px 20px;
    color: var(--text-lighter);
    font-size: 14px;
    letter-spacing: 2px;
  }

  /* 分页导航 */
  .expo-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
  }
  .expo-pagination a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--text-light);
    transition: color 0.2s;
  }
  .expo-pagination a:hover {
    color: var(--blue);
  }
  .expo-pagination .back-btn {
    color: var(--text-lighter);
  }
  .expo-pagination .back-btn:hover {
    color: var(--navy);
  }

  /* 相关推荐 */
  .related-section {
    margin-top: 10px;
  }
  .related-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--navy);
  }

  /* ================= 推荐网格（每行 4 个） ================= */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* 推荐卡片 */
  .expo-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
  }
  .expo-card:hover {
    border-color: var(--blue);
    box-shadow: 0 12px 24px rgba(232,68,31,0.12);
    transform: translateY(-4px);
  }
  .expo-card .img-box {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #eaf2fb, #d4e4f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-light);
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    overflow: hidden;
  }
  .expo-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .expo-card .expo-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .expo-card .expo-date {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
  }
  .expo-card .expo-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
  }
  .expo-card:hover .expo-name { color: var(--blue); }
  .expo-card .expo-addr,
  .expo-card .expo-booth {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 4px;
    line-height: 1.5;
  }
  .expo-card .view-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-lighter);
    margin-top: auto;
    padding-top: 12px;
    transition: color 0.2s;
  }
  .expo-card .view-detail .plus {
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
    transition: transform 0.2s;
  }
  .expo-card:hover .view-detail { color: var(--blue); }
  .expo-card:hover .view-detail .plus { transform: rotate(90deg); }

  /* ================= 底部 Footer ================= */
  .footer {
    background: var(--navy); color: rgba(255,255,255,0.75);
    margin-top: auto; flex-shrink: 0; position: relative; width: 100%;
  }
  .footer-inner { padding: 64px var(--pad-x) 0; }
  .footer-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: clamp(32px, 4vw, 80px); padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .footer-brand .logo { margin-bottom: 20px; gap: 6px; }
  .footer-brand .logo-text h1 { color: var(--white); font-size: 20px; }
  .footer-brand .logo-text span { color: rgba(255,255,255,0.6); }
  .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 360px; }
  .footer-col h4 { font-size: 16px; color: var(--white); margin-bottom: 24px; padding-bottom: 12px; position: relative; }
  .footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--navy-light); }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .footer-col ul a { font-size: 15px; color: rgba(255,255,255,0.6); transition: all 0.2s; }
  .footer-col ul a:hover { color: var(--white); padding-left: 6px; }
  .footer-contact li { font-size: 15px; color: rgba(255,255,255,0.6); display: flex; gap: 12px; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0; font-size: 14px; color: rgba(255,255,255,0.45);
  }

  /* ================= 响应式 ================= */
  @media (max-width: 1280px) {
    .related-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 960px) {
    .topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .layout {
      padding-top: 76px; grid-template-columns: 1fr;
      padding-left: 16px; padding-right: 16px; padding-bottom: 16px; gap: 20px;
    }
    .topbar-inner { height: 60px; padding: 0 16px; gap: 12px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-text h1 { font-size: 16px; letter-spacing: 1px; }
    .logo-text span { display: none; }
    
    .mobile-header-actions { display: flex; }
    .topbar-nav, .topbar-right, .nav-contact, .search-box, .lang { display: none; }
    
    .sidebar { display: none; }

    .expo-detail-header h1 { font-size: 20px; }
    .expo-detail-header .date { font-size: 14px; }
    .expo-detail-info { font-size: 14px; }
    .expo-detail-info .booth-highlight { font-size: 14px; padding: 2px 8px; }
    .expo-detail-content { font-size: 14px; }

    .expo-pagination { padding: 16px 0; margin-bottom: 24px; }
    .expo-pagination a { font-size: 13px; }

    .related-title { font-size: 18px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .expo-card .img-box { height: 110px; }
    .expo-card .expo-info { padding: 12px; }
    .expo-card .expo-name { font-size: 14px; margin-bottom: 8px; }
    .expo-card .expo-date,
    .expo-card .expo-addr,
    .expo-card .expo-booth { font-size: 11px; }
    .expo-card .view-detail { font-size: 11px; padding-top: 8px; }

    .footer-col-nav, .footer-col-cat { display: none; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .footer-brand .logo-text h1 { font-size: 16px; }
    .footer-brand .logo-text span { display: none; }
  }

  @media (max-width: 520px) {
    .topbar-inner { height: 56px; }
    .layout { padding-top: 72px; }
    .logo-text h1 { font-size: 14px; }
    
    .expo-detail-header h1 { font-size: 18px; }
    .expo-detail-header .date { font-size: 13px; }
    .expo-detail-info { font-size: 13px; line-height: 1.8; }
    .expo-detail-info .booth-highlight { font-size: 13px; padding: 1px 6px; }
    .expo-detail-content { font-size: 13px; }
    .expo-detail-image .ph { padding: 40px 10px; }

    .expo-pagination a { font-size: 12px; }

    .related-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .expo-card .img-box { height: 90px; }
    .expo-card .expo-info { padding: 8px; }
    .expo-card .expo-date { font-size: 10px; margin-bottom: 4px; }
    .expo-card .expo-name { font-size: 13px; margin-bottom: 6px; line-height: 1.3; }
    .expo-card .expo-addr,
    .expo-card .expo-booth { font-size: 10px; margin-bottom: 2px; }
    .expo-card .view-detail { font-size: 10px; padding-top: 6px; }
    .expo-card .view-detail .plus { font-size: 14px; }
  }


/* ===== lists_solution.htm ===== */

		/* product list page: pagination */
		#our-products .pagination {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 8px;
			margin-top: 48px;
		}

		#our-products .pagination a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 40px;
			height: 40px;
			padding: 0 14px;
			border: 1px solid var(--line-2);
			border-radius: var(--radius);
			background: var(--paper);
			color: var(--ink);
			font-size: 14px;
			font-weight: 200;
			text-decoration: none;
			transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
		}

		#our-products .pagination a:hover {
			border-color: var(--blue);
			color: var(--blue);
			box-shadow: 0 8px 20px -12px rgba(49, 130, 255, .45);
		}

		#our-products .pagination a.page_curr {
			background: var(--blue);
			border-color: var(--blue);
			color: #fff;
			pointer-events: none;
		}

		/* tabs are links now */
		#our-products .tabs li a {
			display: block;
			color: inherit;
			text-decoration: none;
		}

		#our-products .empty-tip {
			grid-column: 1 / -1;
			text-align: center;
			color: var(--muted);
			padding: 60px 20px;
			font-size: 15px;
		}

		/* ===== Solution list: 4-column image-text cards ===== */
		#our-products .sol-list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
		}

		#our-products .sol {
			display: flex;
			flex-direction: column;
			padding: 0;
			overflow: hidden;
			border: 1px solid var(--line);
			border-radius: 16px;
			background: #fff;
			box-shadow: 0 2px 10px rgba(20, 30, 60, .05);
			transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
		}

		#our-products .sol:hover {
			transform: translateY(-6px);
			box-shadow: 0 18px 40px -18px rgba(49, 130, 255, .4);
			border-color: rgba(49, 130, 255, .4);
		}

		#our-products .sol .media {
			position: relative;
			display: block;
			flex: 0 0 auto;
			width: 100%;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			border-radius: 0;
			background: #eef2f8;
		}

		#our-products .sol .media img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			padding: 0;
			object-fit: cover;
			filter: none;
			transition: transform .5s ease;
		}

		#our-products .sol:hover .media img {
			transform: scale(1.07);
		}

		#our-products .sol .media::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(31, 79, 184, 0) 45%, rgba(31, 79, 184, .5) 100%);
			opacity: 0;
			transition: opacity .35s ease;
			z-index: 1;
		}

		#our-products .sol:hover .media::after {
			opacity: 1;
		}

		#our-products .sol .num {
			position: absolute;
			top: 12px;
			left: 12px;
			z-index: 2;
			font-family: var(--display);
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .08em;
			color: #fff;
			background: rgba(31, 79, 184, .92);
			border-radius: 8px;
			padding: 5px 10px;
		}

		#our-products .sol .sol-body {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding: 16px 18px 20px;
			color: var(--ink);
            width: 100%;
		}

		#our-products .sol .sol-body .meta {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin: 0 0 10px;
			font-size: 12px;
			letter-spacing: .05em;
			text-transform: uppercase;
			color: var(--blue);
			font-weight: 700;
		}

		#our-products .sol .sol-body .meta .date {
			color: var(--muted);
			font-weight: 400;
			text-transform: none;
			letter-spacing: 0;
			white-space: nowrap;
		}

		#our-products .sol .sol-body h3 {
			color: var(--ink);
			font-size: 18px;
			font-weight: 700;
			line-height: 1.4;
			margin: 0 0 12px;
			padding: 0;
			text-align: left;
			background: none;
			transition: color .2s ease;
		}

		#our-products .sol:hover .sol-body h3 {
			color: var(--blue);
		}

		#our-products .sol .sol-body p {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin: 0 0 18px;
			color: var(--muted);
			font-size: 13px;
			line-height: 1.7;
		}

		#our-products .sol .sol-body .more {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			margin-top: auto;
			color: var(--blue);
			font-size: 14px;
			font-weight: 700;
			letter-spacing: .02em;
		}

		#our-products .sol .sol-body .more svg {
			width: 16px;
			height: 16px;
			transition: transform .25s ease;
		}

		#our-products .sol:hover .sol-body .more svg {
			transform: translateX(4px);
		}

		#our-products .sol .placeholder {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #eef5ff 0%, #dbeafe 100%);
		}

		#our-products .sol .placeholder svg {
			width: 56px;
			height: 56px;
			color: #7aaaff;
		}

		/* solution page: header + tabs redesign */
		#our-products .head {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 24px;
			margin-bottom: 40px;
		}

		#our-products .head .section-head h2 {
			font-size: clamp(28px, 4vw, 40px);
			margin: 0 0 8px;
		}

		#our-products .head .section-head p {
			font-size: 16px;
			color: var(--muted);
		}

		#our-products .tabs-wrap {
			width: 100%;
		}

		#our-products .tabs {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			padding-bottom: 4px;
		}

		#our-products .tabs::-webkit-scrollbar {
			display: none;
		}

		#our-products .tabs li {
			flex: 0 0 auto;
			list-style: none;
			line-height: 44px;
			padding: 0 22px;
			white-space: nowrap;
			background: #fff;
			border: 1px solid #e0e4eb;
			border-radius: 23px;
			font-size: 14px;
			color: var(--ink);
			transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
		}

		#our-products .tabs li a {
			display: block;
			color: inherit;
			text-decoration: none;
		}

		#our-products .tabs li:hover {
			border-color: var(--blue);
			color: var(--blue);
			box-shadow: 0 6px 16px -8px rgba(49, 130, 255, .35);
		}

		#our-products .tabs li.active {
			background: var(--blue);
			border-color: var(--blue);
			color: #fff;
		}

		@media (max-width: 1200px) {
			#our-products .sol-list {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		@media (max-width: 980px) {
			#our-products .sol-list {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 620px) {
			#our-products .sol-list {
				grid-template-columns: 1fr;
			}
		}
	

/* ===== lists_single_solution.htm ===== */

		/* ===================== Solution Single Page ===================== */

		/* ---- S1 hero ---- */
		.sol-hero {
			padding: 72px 0 64px;
		}

		.sol-hero .hero-grid {
			display: grid;
			grid-template-columns: 1.05fr 1fr;
			gap: clamp(36px, 6vw, 90px);
			align-items: center;
		}

		.sol-hero .eyebrow {
			display: inline-block;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--muted-2);
			margin-bottom: 14px;
		}

		.sol-hero h1 {
			font-size: clamp(28px, 3.8vw, 46px);
			line-height: 1.15;
			letter-spacing: -.02em;
			font-weight: 800;
			color: var(--ink);
			margin: 0 0 26px;
		}

		.sol-hero .lead {
			color: var(--muted-2);
			font-size: clamp(15px, 1.4vw, 16.5px);
			line-height: 1.85;
			margin: 0 0 34px;
			max-width: 560px;
		}

		.sol-hero .lead p {
			margin: 0 0 12px;
		}

		.sol-hero .lead p a {
			text-decoration: underline;
			color: #0573f0;
		}

		.btn-dark {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			background: #111;
			color: #fff;
			font-size: 15px;
			font-weight: 700;
			font-family: var(--font);
			padding: 15px 34px;
			border-radius: 6px;
			text-decoration: none;
			transition: .22s ease;
			border: 0;
			cursor: pointer;
		}

		.btn-dark:hover {
			background: var(--blue);
			transform: translateY(-2px);
			box-shadow: 0 14px 30px -14px rgba(49, 130, 255, .55);
		}

		.btn-dark svg {
			width: 16px;
			height: 16px;
		}

		.sol-hero .media {
			border-radius: 14px;
			overflow: hidden;
			background: #fff;
		}

		.sol-hero .media img {
			width: 100%;
			display: block;
			object-fit: contain;
			max-height: 480px;
		}

		/* ---- S2 recommended products ---- */
		.sol-products {
			padding: 40px 0 72px;
		}

		.sol-products .grid-4 {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 22px;
		}

		.sol-products .p-card {
			display: block;
			background: #fff;
			border: 1px solid #ececec;
			border-radius: 10px;
			overflow: hidden;
			text-decoration: none;
			transition: .22s ease;
		}

		.sol-products .p-card:hover {
			border-color: #ddd;
			box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .25);
			transform: translateY(-4px);
		}

		.sol-products .p-card .thumb {
			background: #fff;
			border-bottom: 1px solid #f2f2f2;
		}

		.sol-products .p-card .thumb img {
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: contain;
			display: block;
			padding: 22px;
			box-sizing: border-box;
			transition: transform .3s ease;
		}

		.sol-products .p-card:hover .thumb img {
			transform: scale(1.04);
		}

		.sol-products .p-card .body {
			padding: 14px 16px 18px;
		}

		.sol-products .p-card .stars {
			display: flex;
			gap: 2px;
			margin-bottom: 8px;
		}

		.sol-products .p-card .stars svg {
			width: 15px;
			height: 15px;
			color: #f5a623;
		}

		.sol-products .p-card .stars svg.off {
			color: #ddd;
		}

		.sol-products .p-card h3 {
			font-size: 15px;
			font-weight: 600;
			line-height: 1.5;
			color: var(--ink);
			margin: 0 0 10px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.sol-products .p-card .price {
			display: flex;
			align-items: baseline;
			gap: 8px;
			font-size: 14.5px;
		}

		.sol-products .p-card .price .now {
			color: var(--ink);
			font-weight: 700;
		}

		.sol-products .p-card .price .was {
			color: #a0a4ad;
			text-decoration: line-through;
			font-size: 13.5px;
		}

		/* ---- S3 article content ---- */
		.sol-article {
			padding: 40px 0 72px;
		}

		.sol-article .article {
			color: var(--muted-2);
			font-size: 16px;
			line-height: 1.9;
		}

		.sol-article .article p {
			margin: 0 0 18px;
		}

		.sol-article .article strong,
		.sol-article .article b {
			color: var(--ink);
			font-weight: 700;
		}

		.sol-article .article a {
			color: var(--blue);
			text-decoration: underline;
			text-underline-offset: 2px;
		}

		.sol-article .article h1,
		.sol-article .article h2,
		.sol-article .article h3 {
			color: var(--ink);
			letter-spacing: -.01em;
			line-height: 1.25;
			margin: 40px 0 20px;
		}

		.sol-article .article h1 {
			font-size: clamp(28px, 3.4vw, 40px);
		}

		.sol-article .article h2 {
			font-size: clamp(24px, 3vw, 34px);
		}

		.sol-article .article h3 {
			font-size: clamp(19px, 2vw, 24px);
		}

		.sol-article .article ul,
		.sol-article .article ol {
			margin: 0 0 18px;
			padding-left: 22px;
		}

		.sol-article .article li {
			margin-bottom: 8px;
		}

		.sol-article .article img {
			max-width: 100%;
			height: auto;
			border-radius: 10px;
		}

		.sol-article .article table {
			width: 100%;
			border-collapse: collapse;
			margin: 26px 0;
			font-size: 14.5px;
		}

		.sol-article .article table th,
		.sol-article .article table td {
			border: 1px solid #e8e8e8;
			padding: 13px 16px;
			text-align: left;
			vertical-align: top;
			line-height: 1.6;
		}

		.sol-article .article table th {
			background: #f8f9fb;
			color: var(--ink);
			font-weight: 700;
			text-align: center;
		}

		/* ---- S4 inquiry form ---- */
		.sol-form-sec {
			padding: 56px 0 88px;
		}

		.sol-form-sec .form-card {
			max-width: 980px;
			margin: 0 auto;
		}

		.sol-form .f-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 18px 26px;
		}

		.sol-form .field {
			margin-bottom: 18px;
		}

		.sol-form label {
			display: block;
			font-size: 14.5px;
			font-weight: 700;
			color: var(--ink);
			margin-bottom: 8px;
		}

		.sol-form label .req {
			color: #e5484d;
			font-size: 12.5px;
			font-weight: 600;
			margin-left: 4px;
		}

		.sol-form input,
		.sol-form select,
		.sol-form textarea {
			width: 100%;
			border: 1px solid #e3e3e3;
			border-radius: 4px;
			padding: 12px 14px;
			font-size: 14.5px;
			font-family: var(--font);
			color: var(--ink);
			background: #fff;
			outline: 0;
			transition: .18s;
		}

		.sol-form input:focus,
		.sol-form select:focus,
		.sol-form textarea:focus {
			border-color: var(--blue);
			box-shadow: 0 0 0 3px rgba(49, 130, 255, .12);
		}

		.sol-form textarea {
			min-height: 150px;
			resize: vertical;
			line-height: 1.6;
		}

		.sol-form .btn-submit {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			background: var(--blue);
			color: #fff;
			font-size: 15px;
			font-weight: 700;
			font-family: var(--font);
			white-space: nowrap;
			min-width: 220px;
			padding: 14px 44px;
			border-radius: 10px;
			border: 0;
			cursor: pointer;
			transition: .2s;
		}

		.sol-form .btn-submit svg {
			width: 17px;
			height: 17px;
			flex: 0 0 auto;
		}

		.sol-form .btn-submit:hover {
			background: var(--blue-ink);
		}

		/* ajax toast */
		.cf-toast {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(0.92);
			background: rgba(22, 33, 58, .92);
			color: #fff;
			padding: 18px 32px;
			border-radius: 12px;
			font-size: 15px;
			font-weight: 500;
			line-height: 1.5;
			max-width: 86vw;
			text-align: center;
			z-index: 9999;
			opacity: 0;
			transition: opacity .25s ease, transform .25s ease;
			pointer-events: none;
			box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .35);
			backdrop-filter: blur(6px);
		}

		.cf-toast.show {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

		#contactForm {
			scroll-margin-top: 140px;
		}

		/* responsive */
		@media (max-width: 1020px) {
			.sol-hero .hero-grid {
				grid-template-columns: 1fr;
			}

			.sol-hero .media img {
				max-height: 360px;
			}

			.sol-products .grid-4 {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 620px) {
			.sol-hero {
				padding: 48px 0 40px;
			}

			.sol-products .grid-4 {
				grid-template-columns: 1fr;
			}

			.sol-form .f-row {
				grid-template-columns: 1fr;
				gap: 0;
			}

			.sol-form-sec {
				padding: 36px 0 64px;
			}
		}
	

/* ===== lists_single_oem.htm ===== */

        /* ============ OEM page: 4 sections ============ */
        .oem-sec {
            padding: 96px 0;
        }

        .oem-sec.alt {
            background: var(--blue-tint-2);
        }

        /* S1 hero */
        .oem-hero {
            padding: 88px 0 72px;
        }

        .oem-hero .oem-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: clamp(36px, 6vw, 96px);
            align-items: center;
        }

        .oem-hero h1 {
            font-size: clamp(24px, 3vw, 36px);
            line-height: 1.18;
            letter-spacing: -.02em;
            margin: 22px 0 0;
            font-weight: 700;
        }

        .oem-hero h1 .hl {
            color: var(--blue);
        }

        /* OEM 页内统一二级标题尺寸与一级标题保持一致 */
        #oem-why .section-head h2 {
            color: var(--ink);
            font-size: clamp(24px, 3vw, 36px);
            font-weight: 700;
            line-height: 1.18;
            letter-spacing: -.02em;
        }

        .oem-hero .oem-copy p {
            color: var(--muted);
            font-size: clamp(15.5px, 1.3vw, 17.5px);
            line-height: 1.85;
            margin: 0;
        }

        .oem-hero .oem-copy p+p {
            margin-top: 18px;
        }

        .oem-hero .oem-copy strong {
            color: var(--blue-ink);
        }

        .oem-hero .oem-copy .oem-cta {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .oem-hero .oem-copy .oem-cta .btn {
            margin: 0;
        }

        .oem-hero .oem-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
        }

        .oem-hero .oem-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--blue-ink);
            background: var(--blue-tint);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 8px 16px;
        }

        .oem-hero .oem-tags span::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--blue);
        }

        /* S2 why choose us */
        .oem-why {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
        }

        .oem-why .wcard {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 34px 28px;
            transition: .25s ease;
        }

        .oem-why .wcard:hover {
            border-color: var(--blue);
            box-shadow: 0 18px 40px -24px rgba(49, 130, 255, .45);
            transform: translateY(-4px);
        }

        .oem-why .wcard .icon {
            width: 64px;
            height: 64px;
            display: grid;
            place-items: center;
            background: var(--blue-tint);
            border-radius: 16px;
            margin-bottom: 22px;
        }

        .oem-why .wcard .icon img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .oem-empty {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--muted);
            padding: 40px 20px;
            margin: 0;
        }

        .oem-why .wcard h3 {
            font-size: 20px;
            margin-bottom: 12px;
        }

        .oem-why .wcard p {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.7;
            margin: 0;
        }

        /* S3 alternating rows */
        .oem-rows {
            display: flex;
            flex-direction: column;
            gap: 72px;
        }

        .oem-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(32px, 5vw, 80px);
            align-items: center;
        }

        .oem-row .media {
            border-radius: 16px;
            overflow: hidden;
            background: var(--blue-tint-2);
        }

        .oem-row .media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 4/3;
            display: block;
            transition: transform .5s ease;
        }

        .oem-row .media:hover img {
            transform: scale(1.04);
        }

        .oem-row .txt .k {
            display: inline-block;
            font-family: var(--display);
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--blue-ink);
            margin-bottom: 16px;
        }

        .oem-row .txt h3 {
            font-size: clamp(24px, 2.8vw, 34px);
            margin-bottom: 16px;
            line-height: 150%;
        }

        .oem-row .txt p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.8;
            margin: 0;
        }

        .oem-row .txt ul {
            list-style: none;
            padding: 0;
            margin: 18px 0 0;
            display: grid;
            gap: 10px;
        }

        .oem-row .txt ul li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: var(--muted-3);
            font-size: 15px;
        }

        .oem-row .txt ul li::before {
            content: "";
            flex: 0 0 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--blue);
            margin-top: 8px;
        }

        .oem-row.flip .media {
            order: 2;
        }

        .oem-row.flip .txt {
            order: 1;
        }

        /* S4 form */
        .oem-form-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: clamp(32px, 5vw, 80px);
            align-items: start;
        }

        .oem-form-grid .info h3 {
            font-size: clamp(24px, 3vw, 32px);
            margin-bottom: 18px;
        }

        .oem-form-grid .info p {
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 26px;
        }

        .oem-form-grid .info .contact-line {
            display: flex;
            gap: 14px;
            align-items: center;
            color: var(--ink);
            font-size: 15.5px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--line-2);
        }

        .oem-form-grid .info .contact-line svg {
            flex: 0 0 auto;
            color: var(--blue);
        }

        .oem-form {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 24px 60px -40px rgba(27, 24, 34, .25);
        }

        .oem-form .f-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .oem-form .field {
            margin-bottom: 18px;
        }

        .oem-form label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--ink);
        }

        .oem-form label .req {
            color: #e5484d;
            font-weight: 700;
        }

        .oem-form input,
        .oem-form select,
        .oem-form textarea {
            width: 100%;
            border: 1px solid var(--line-2);
            border-radius: 10px;
            padding: 13px 16px;
            font-size: 15px;
            font-family: var(--font);
            color: var(--ink);
            background: #fff;
            outline: none;
            transition: .18s;
        }

        .oem-form input:focus,
        .oem-form select:focus,
        .oem-form textarea:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(49, 130, 255, .12);
        }

        .oem-form textarea {
            min-height: 130px;
            resize: vertical;
        }

        .oem-form .btn {
            margin-top: 6px;
            width: 100%;
            justify-content: center;
            padding: 15px 26px;
            font-size: 16px;
        }

        /* 锚点定位表单时留出 sticky 页头高度 */
        #contactForm {
            scroll-margin-top: 140px;
        }

        /* ajax toast */
        .cf-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.92);
            background: rgba(22, 33, 58, .92);
            color: #fff;
            padding: 18px 32px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.5;
            max-width: 86vw;
            text-align: center;
            z-index: 9999;
            opacity: 0;
            transition: opacity .25s ease, transform .25s ease;
            pointer-events: none;
            box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .35);
            backdrop-filter: blur(6px);
        }

        .cf-toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        @media (max-width: 980px) {

            .oem-hero .oem-grid,
            .oem-form-grid {
                grid-template-columns: 1fr;
            }

            .oem-why {
                grid-template-columns: repeat(2, 1fr);
            }

            .oem-row {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .oem-row.flip .media {
                order: 1;
            }

            .oem-row.flip .txt {
                order: 2;
            }

            .oem-sec {
                padding: 64px 0;
            }
        }

        @media (max-width: 620px) {
            .oem-why {
                grid-template-columns: 1fr;
            }

            .oem-form .f-row {
                grid-template-columns: 1fr;
            }

            .oem-form {
                padding: 26px 20px;
            }

            .oem-rows {
                gap: 48px;
            }
        }
    


/* ===== 统一移动端导航（header.htm 的 burger 触发 #menu.open） ===== */
.burger { display: none; }
@media (max-width: 980px) {
  /* 移动端保留右上角容器以显示 burger，隐藏其它元素 */
  .topbar-right { display: flex !important; align-items: center; }
  .topbar-right .nav-contact,
  .topbar-right .search-box,
  .topbar-right .lang { display: none; }
  /* 桌面导航折叠为汉堡菜单 */
  .topbar-nav { display: none; }
  .topbar-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); padding: 8px var(--pad-x);
    box-shadow: 0 16px 30px rgba(7,42,68,.14); z-index: 999;
  }
  .topbar-nav .nav-item { width: 100%; }
  .topbar-nav .nav-item > a { padding: 12px 0; }
  .topbar-nav .dropdown {
    position: static; box-shadow: none; opacity: 1; visibility: visible;
    transform: none; display: block; padding-left: 14px;
  }
  .burger { display: inline-flex; }
}

.product-card .brand { font-size: 14px; color: var(--text-lighter); margin-top: auto; }

/* ===== 内页侧栏品牌列表：当前品牌高亮（产品详情页默认按所在字母组筛选） ===== */
.sidebar .brand-list a.current,
.product-drawer .brand-list a.current {
  background: var(--blue-pale); color: var(--blue); font-weight: 700;
}