/* ========================================
   城市电力官网样式
   修改这里可以整体换风格
   ======================================== */

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f7fa;
    color: #004888;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   顶部导航（三行分离版：浅灰 / 白 / 蓝）
   ======================================== */

/* --- 第一行：欢迎 / 工具（浅灰底，深色字） --- */
.header-top {
    background: #f0f2f5;
    color: var(--text-sub);
    font-size: 13px;
    line-height: 20px;
    height: 34px;          /* 固定高度，避免子元素/行高异常撑高灰条 */
    box-sizing: border-box;
    padding: 0;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
}
.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    width: 100%;
    height: 100%;
}
.top-welcome { overflow: hidden; text-overflow: ellipsis; }
.top-tools { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }
.top-tools a {
    color: var(--text-sub);
    text-decoration: none;
    padding: 0 8px;
    transition: color 0.2s;
}
.top-tools a:hover { color: var(--primary); }
.top-tools .sep { opacity: 0.3; }
.top-tools .disabled { opacity: 0.5; cursor: default; }

/* --- 第二行：LOGO + 搜索（白底，container 限宽） --- */
.header {
    background: #ffffff;
    color: var(--text);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,80,151,0.08);
}
.header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    gap: 20px;
}
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex: 1;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo-img {
    height: 48px;
    width: auto;
    display: block;
}
.logo-fallback {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
}
.logo-accent { color: var(--accent); }

/* 搜索框（白底上用浅灰输入框+蓝色按钮） */
.search-form {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s, background 0.2s;
    width: 320px;
    max-width: 45%;
}
.search-form:focus-within {
    background: #ffffff;
    border-color: var(--primary);
}
.search-form input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 9px 16px;
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.search-form input::placeholder { color: var(--text-light); }
.search-form button {
    background: var(--primary);
    border: 0;
    padding: 9px 22px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.search-form button:hover { background: var(--primary-deep); }

/* --- 第三行：导航栏（蓝底，全宽，与轮播对齐） --- */
.nav {
    background: linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 100%);
    width: 100%;
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.nav-menu {
    display: flex;
    gap: 0;
    list-style: none;
    flex-wrap: wrap;
}
.nav-menu > li {
    position: relative;
}
.nav-menu > li > a {
    display: inline-block;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 15px;
    padding: 12px 22px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(255,255,255,0.08);
}
.nav-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--primary-deep);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border-radius: 0 0 8px 8px;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s;
    z-index: 10;
}
.nav-menu .dropdown:hover .dropdown-menu,
.nav-menu .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-menu .dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.nav-menu .dropdown-menu li a:hover {
    color: var(--accent);
    background: rgba(255,255,255,0.1);
    padding-left: 26px;
}

/* 移动端汉堡 */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
}
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s;
}
.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.product-card.empty-card {
    visibility: hidden;
    pointer-events: none;
}

.float-contact {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.float-btn {
    position: relative;
    width: 50px;
    height: 50px;
    background: #005097;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    overflow: visible;
}

.float-btn {
    border: 0;
    padding: 0;
}

.float-btn:hover {
    background: #0058a6;
    transform: scale(1.05);
}

.float-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: white;
    display: block;
}

.float-content {
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    min-width: 180px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* 桌面端：悬停整个组件时显示卡片 */
@media (min-width: 769px) {
    .float-contact:hover .float-content {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* 移动端点击后显示（JS 加 .open） */
.float-content.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 关闭按钮：仅移动端弹层显示 */
.float-close {
    display: none;
    position: absolute;
    top: 6px;
    right: 10px;
    border: 0;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}

.qr-code img {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
    /* 允许手机长按图片呼出"保存/识别二维码"系统菜单 */
    -webkit-touch-callout: default;
    pointer-events: auto;
}

.qr-code .qr-tip {
    margin: 8px 0 5px;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}
.qr-code .qr-tip-wx {
    color: #07c160;
    font-weight: 600;
}

.wechat-row {
    margin-top: 8px;
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.wx-copy-btn {
    border: 1px solid #005097;
    background: #fff;
    color: #005097;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
}
.wx-copy-btn:active { background: #eaf3fb; }

.open-wx-btn, .save-qr-btn {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #005097;
    text-decoration: none;
}
.open-wx-btn { color: #07c160; font-weight: 600; }

.phone-number {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.phone-number a {
    font-size: 16px;
    font-weight: bold;
    color: #005097;
    text-decoration: none;
}

.phone-number a:hover {
    text-decoration: underline;
}

/* 复制成功提示 */
.copy-toast {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 70px;
    text-align: center;
    pointer-events: none;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.copy-toast.show { opacity: 1; }
.copy-toast::before {
    content: attr(data-text);
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 22px;
    white-space: nowrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 平时圆钮固定在右下（无 transform，避免成为内部 fixed/合成层的包含块） */
    .float-contact {
        right: 15px;
        top: auto;
        bottom: 110px;
        transform: none;
    }

    /* 打开后：容器自身变为全屏半透明遮罩 + flex 居中布局。
       面板用普通文档流布局，position:static、零 transform，
       这样安卓各内核（华为/小米/OPPO）都能正常弹出图片"长按保存/识别"系统菜单 */
    .float-contact.open {
        inset: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10000;
        background: rgba(15, 23, 42, 0.55);
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    /* 打开状态下圆钮保持在右下角原位置，再点一次可关闭 */
    .float-contact.open .float-btn {
        position: absolute;
        right: 15px;
        bottom: 110px;
        z-index: 2;
    }

    .float-content {
        display: none;           /* 关闭时彻底脱离布局，不能用 visibility:hidden（仍占位会撑偏圆钮） */
        position: static;         /* 覆盖桌面端的 absolute */
        transform: none !important;  /* 关键：不用合成层，保证长按菜单 */
        -webkit-transform: none !important;
        pointer-events: auto;
        width: 280px;
        max-width: calc(100vw - 40px);
        min-width: 0;
        margin: 0;
        padding: 22px 18px 18px;
        border-radius: 16px;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1;
    }
    /* 打开状态：显示为 flex item（外层容器负责居中） */
    .float-contact.open .float-content {
        display: block;
    }
    .float-close { display: block; }

    .qr-code img {
        width: 190px;
        height: 190px;
    }
    .qr-img-link {
        display: inline-block;
        -webkit-touch-callout: default;   /* iOS 长按菜单 */
        line-height: 0;
    }
    .qr-code .qr-tip { font-size: 13px; margin-top: 10px; }
    .wechat-row { font-size: 14px; margin-top: 10px; }
    .wx-copy-btn { font-size: 13px; padding: 3px 12px; }

    .phone-number { margin-top: 12px; }
    .phone-number a { font-size: 17px; }

    .open-wx-btn { font-size: 13px; margin-top: 10px; }
}
/* 搜索框 */
.search-form {
    display: flex;
    gap: 10px;
}

.search-form input {
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    width: 200px;
    font-size: 14px;
    outline: none;
}

.search-form button {
    padding: 10px 20px;
    background: #005097;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-form button:hover {
    background: #0058a6;
    transform: translateY(-2px);
}

/* ========================================
   主体内容
   ======================================== */
.main {
    min-height: 500px;
}

/* 页面标题 */
.page-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #005097;
    display: inline-block;
}

/* 文章卡片列表 */
.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.article-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.article-card-content {
    padding: 25px;
}

.article-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.article-card h3 a {
    color: #004888;
    text-decoration: none;
    transition: color 0.3s;
}

.article-card h3 a:hover {
    color: #005097;
}

.article-meta {
    color: #888;
    font-size: 13px;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.article-summary {
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.read-more {
    color: #005097;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
}

.read-more:hover {
    margin-left: 5px;
}
/* 列表页两列布局 */
.list-layout {
    display: flex;
    gap: 30px;
}

.list-main {
    flex: 3;
}

.list-sidebar {
    flex: 1;
}

/* 侧边栏卡片 */
.sidebar-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #005097;
    display: inline-block;
}

/* 热门列表 */
.hot-list {
    list-style: none;
    padding: 0;
}

.hot-list li {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

.hot-list li:last-child {
    border-bottom: none;
}

.hot-list a {
    color: #004888;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    display: block;
}

.hot-list a:hover {
    color: #005097;
}

.hot-date {
    font-size: 12px;
    color: #999;
    display: block;
    margin-top: 4px;
}

/* 热门标签 */
.hot-words {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hot-tag {
    background: #f0f2f5;
    color: #004888;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
}

.hot-tag:hover {
    background: #005097;
    color: white;
}
/* 产品卡片链接样式 */
.product-card-link .product-card-link a {
    text-decoration: none;
    display: block;

}

.product-card-link:hover .product-card {
    transform: translateY(-5px);
}

/* 案例卡片链接样式 */
.case-card-link {
    text-decoration: none;
    display: block;
}

.case-card-link:hover .case-card {
    transform: translateY(-5px);
}
/* 响应式 */
@media (max-width: 768px) {
    .list-layout {
        flex-direction: column;
    }
    
    .list-sidebar {
        margin-top: 20px;
    }
}
/* 简单列表样式 */
.simple-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.simple-list-item {
    display: flex;
    margin: 10px 30px;
    gap: 15px;           /* 图片和内容的间距，原来是20px，改小 */
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.simple-list-item:hover {
    background: #f9f9f9;
}

.simple-list-item a {
    color: #004888;
    text-decoration: none;
    font-size: 16px;
    flex: 1;
}

.simple-list-item a:hover {
    color: #005097;
}

.simple-list-date {
    color: #888;
    font-size: 13px;
}

/* 产品中心网格图片 */
.product-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* 等比例缩放到容器内，完整显示图片 */
}

/* 列表页小图 */
.simple-list-image {
    width: 100px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple-list-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* 等比例缩放到容器内 */
}

/* 如果需要图片铺满裁剪（推荐产品展示用） */
.product-image.cover img {
    object-fit: cover;  /* 铺满容器，可能裁剪 */
}

/* 详情页内容中的图片 */
.detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 文章详情页 */
.article-detail {
    background: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.article-detail h1 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #004888;
}

.article-detail .meta {
    color: #888;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.article-detail .content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.article-detail .content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 单页内容样式 */
.page-content {
    width: auto;
    max-width: 1000px;
    min-height: 500px;
    margin: 20px;
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.page-content h1 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #004888;
    padding-bottom: 15px;
    border-bottom: 3px solid #005097;
    display: inline-block;
}

.page-content .content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-top: 30px;
}

.page-content .content p {
    margin-bottom: 15px;
}

.page-content .content h2 {
    font-size: 24px;
    margin: 30px 0 15px;
    color: #004888;
}

.page-content .content h3 {
    font-size: 20px;
    margin: 25px 0 10px;
    color: #004888;
}

.page-content .content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ====== 富文本内容区表格统一样式（文章/产品/单页） ====== */
.content-wrapper table,
.detail-content table,
.page-content .content table {
    border-collapse: collapse;
    margin: 18px 0;
    width: auto;
    max-width: 100%;
}
.content-wrapper table td{
    padding: 10px 14px;
    vertical-align: top;
    line-height: 1.7;
}
.content-wrapper table th,
.detail-content table td,
.detail-content table th,
.page-content .content table td,
.page-content .content table th {
    border: 1px solid #d0d5dd;
    padding: 10px 14px;
    vertical-align: top;
    line-height: 1.7;
}
.content-wrapper table th,
.detail-content table th,
.page-content .content table th {
    background: #f5f7fa;
    font-weight: 600;
    color: #1f2937;
}
.content-wrapper table p,
.detail-content table p,
.page-content .content table p {
    margin: 4px 0;
}

/* 响应式 */
@media (max-width: 768px) {
    .page-content {
        padding: 25px;
    }
    
    .page-content h1 {
        font-size: 24px;
    }
}
.sitemap-link {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.sitemap-link a {
    margin: 0 10px;
    color: #666;
    text-decoration: none;
}
.sitemap-link a:hover {
    color: #005097;
}
/* 搜索页 */
.search-box {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.search-box input {
    padding: 12px 20px;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 40px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
}

.search-box input:focus {
    border-color: #005097;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.1);
}

.search-box button {
    padding: 12px 25px;
    background: #005097;
    color: white;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.3s;
}

.search-box button:hover {
    background: #0058a6;
}

.search-result {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.col{
    
    text-align: left;
    font-size: 12px;
    color: #bbbaba;text-align: left;
}
.col a{
    color: #bbbaba;text-align: left;
}
/* ========================================
   首页额外样式
   ======================================== */
.hero {
    background: linear-gradient(135deg, #004888 0%, #004888 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.hero .btn {
    background: #005097;
    color: white;
    padding: 12px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s;
}

.hero .btn:hover {
    background: #0058a6;
    transform: translateY(-2px);
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #005097;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.product-grid a,
.product-card a,
.product-card-link {
    text-decoration: none;
}
.product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card a:hover {
    text-decoration: none;
}
.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    text-align: center;
    padding: 0;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.product-card h3 {
    text-decoration: none;
    font-size: 20px;
    margin: 15px 15px 10px;
    color: #004888;
}

.product-card h3 a {
    text-decoration: none;
    color: #004888;
}

.product-card p {
    color: #666;
    font-size: 14px;
    margin: 0 15px 20px;
    padding: 0 10px;
}

/* 核心产品卡片特殊样式 */
section .product-grid .product-card img {
    width: 100%;
    height: 180px;
    object-fit: contain; /* 完整显示产品图，不裁切 */
    padding: 8px;
    background: #fff;
    display: block;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.case-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.case-card:hover {
    transform: translateY(-5px);
}

.case-card-content {
    padding: 20px;
}

.case-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.case-card h3 a {
    color: #004888;
    text-decoration: none;
}

.qualities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.quality-item {
    text-align: center;
    width: 150px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    font-weight: 500;
}

/* 列表页样式 */
.list-header {
    background: linear-gradient(135deg, #004888 0%, #004888 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
}

.list-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.product-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.product-item:hover {
    transform: translateY(-5px);
}

.product-item h3 {
    margin-bottom: 10px;
}

.product-item .meta {
    color: #005097;
    font-size: 14px;
    margin-bottom: 10px;
}

.case-list .case-item {
    background: white;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid #005097;
}

/* 详情页样式 */
.detail-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.detail-title {
    font-size: 32px;
    margin-bottom: 20px;
}

.detail-meta {
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.detail-content {
    line-height: 1.8;
    font-size: 16px;
}

.detail-content h2, .detail-content h3 {
    margin: 30px 0 15px;
}
.detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.detail-content th, .detail-content td {
    border: 1px solid #ddd;
    padding: 8px;
}

.contact-bar {
    background: #f8fafc;
    padding: 30px;
    margin-top: 40px;
    border-radius: 12px;
    text-align: center;
}

.contact-bar .btn {
    background: #005097;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}
.contact-bar .btn:hover {
    background: #0058a6;
}
.seo-qa-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 30px;
    margin-top: 40px;
}
.seo-qa-section h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #004888;
}
.qa-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 20px;
}
.qa-question {
    font-weight: 600;
    color: #004888;
    margin-bottom: 10px;
    font-size: 16px;
}
.qa-answer {
    color: #555;
    line-height: 1.7;
    padding-left: 20px;
    border-left: 3px solid #005097;
}
/* ========================================
   产品中心专用样式
   ======================================== */

/* 产品横幅 */
.product-hero {
    background: linear-gradient(135deg, #004888 0%, #004888 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
}

.product-hero h1 {
    font-size: 42px;
    margin-bottom: 15px;
}

.product-hero p {
    font-size: 18px;
    opacity: 0.9;
}

/* 分类筛选按钮 */
.product-filter {
    margin-bottom: 30px;
    text-align: center;
}

.filter-btn {
    display: inline-block;
    padding: 8px 20px;
    margin: 0 5px 10px;
    background: #f0f2f5;
    color: #475569;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: #005097;
    color: white;
}

/* 产品网格 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* 产品卡片 */
.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* 产品图片区域 */
.product-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* 默认图片占位 */
.product-image .no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #004888, #004888);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 48px;
}

/* 热销标签 */
.product-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #005097;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
}

/* 产品信息 */
.product-info {
    padding: 20px;
    text-align: center;
}

.product-info h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.product-info h3 a {
    color: #004888;
    text-decoration: none;
    transition: color 0.3s;
}

.product-info h3 a:hover {
    color: #005097;
}

.product-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 13px;
    color: #999;
}

.product-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 产品按钮 */
.product-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 25px;
    background: transparent;
    border: 2px solid #005097;
    color: #005097;
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s;
}

.product-btn:hover {
    background: #005097;
    color: white;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 60px;
    background: white;
    border-radius: 16px;
}

.empty-state .icon {
    font-size: 64px;
    margin-bottom: 20px;
}

/* 响应式 */
@media (max-width: 768px) {
    .product-hero {
        padding: 40px 0;
    }
    .product-hero h1 {
        font-size: 28px;
    }
    .product-hero p {
        font-size: 14px;
    }
    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .product-image {
        height: 200px;
    }
}

/* ========================================
   底部
   ======================================== */
.footer { background: var(--primary-deep);
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    font-size: 14px;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
    text-align: left;
}

.footer-links .col {
    flex: 1;
    min-width: 150px;
}

.footer-links h4 {
    margin-bottom: 15px;
    font-size: 18px;
    color: white;
}

.footer-links a {
    display: block;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-links a:hover {
    color: #005097;
}
/* 下拉菜单样式 */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.3s;
    padding: 8px 0;
    display: block;
}

.nav-menu a:hover {
    color: #005097;
}

/* 下拉菜单 */
.dropdown-menu { background: var(--primary-deep);
    min-width: 180px;
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 200;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* 有子菜单的导航项显示下拉箭头 */
.nav-menu > li.dropdown > a::after {
    content: '▾';
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.8;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    padding: 8px 20px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: #005097;
    color: white;
}

/* ========================================
   响应式设计
   ======================================== */
/* 顶部灰条：仅在很窄的屏（≤640px）才上下堆叠；小笔记本/平板仍用单行细条 */
@media (max-width: 640px) {
    .header-top {
        height: auto;
        padding: 6px 0;
        display: block;
    }
    .header-top-inner {
        flex-direction: column;
        gap: 2px;
        height: auto;
    }
}

@media (max-width: 768px) {
    .header-inner {
        flex-wrap: wrap;
    }
    /* 关键修复：允许 header-main 换行，否则 width:100% 的搜索框和 logo 同排会把页面撑出横向滚动 */
    .header-main {
        flex-wrap: wrap;
        min-width: 0;
    }
    .search-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 10px;
        order: 3;
    }
    .logo-img {
        max-width: 70vw;
        object-fit: contain;
    }
    .mobile-menu-btn {
        display: flex;
        background: #005097;        /* 金色背景，白色背景上清晰可见 */
        border-radius: 6px;
    }
    .mobile-menu-btn span { background: #fff; }
    .nav {
        display: none;
        width: 100%;
        background: linear-gradient(135deg, #0b1c40 0%, #123a7a 55%, #004888 100%);  /* 深蓝底，与金色文字对比清晰 */
    }
    .nav.active { display: block; }
    .nav-menu {
        flex-direction: column;
        gap: 0;
    }
    .nav-menu > li > a {
        display: block;
        padding: 14px 18px;
        border-bottom: 1px solid rgba(13, 123, 138,0.25);
        color: #fff;
        font-size: 15px;
    }
    .nav-menu > li > a:hover,
    .nav-menu > li.active > a {
        color: #0058a6;            /* 金色高亮 */
        background: rgba(13, 123, 138,0.12);
    }
    /* 二级菜单：默认隐藏，展开时才显示 */
    .nav-menu .dropdown-menu {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0;
        background: rgba(0,0,0,0.22);
    }
    .nav-menu .dropdown.open > .dropdown-menu {
        display: block;
    }
    .nav-menu .dropdown-menu li a {
        display: block;
        padding: 11px 18px 11px 38px;
        color: #e8e8e8;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 14px;
    }
    .nav-menu .dropdown-menu li a:hover {
        color: #0058a6;
        background: rgba(13, 123, 138,0.1);
    }
    /* 有子菜单的顶级项右侧箭头指示 */
    .nav-menu > li.dropdown > a::after {
        content: '▾';
        float: right;
        color: #005097;
        transition: transform 0.25s;
    }
    .nav-menu > li.dropdown.open > a::after {
        transform: rotate(180deg);
    }
    
    .hero h1 {
        font-size: 32px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .article-list,
    .product-grid,
    .case-grid,
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .article-detail, .page-content, .detail-container {
        padding: 25px;
    }
    
    .article-detail h1, .detail-title {
        font-size: 24px;
    }
    
    .search-box input {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .simple-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .footer-links {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links .col {
        text-align: center;
    }

    .footer-links .col-sub {
        display: none;
    }
}

/* ========================================
   主题变量 + 新组件（2026-09 重做版）
   ======================================== */
:root {
    /* ===== LOGO 品牌色（蓝+金）===== */
    --primary: #005097;          /* 主色 - LOGO 蓝 */
    --primary-deep: #004888;     /* 深蓝 - 主色-10% */
    --primary-light: #0058a6;    /* 浅蓝 - 主色+10% */
    --accent: #dfaf1f;          /* 辅色 - LOGO 金 */
    --accent-deep: #c89e1c;     /* 深金 - 辅色-10% */
    --accent-light: #f5c122;    /* 浅金 - 辅色+10% */
    --text: #1a2332;            /* 正文深灰 */
    --text-sub: #4a5a6a;        /* 次要文字 */
    --text-light: #7a8a9a;      /* 浅文字 */
    --bg: #ffffff;
    --bg-alt: #f5f8fc;          /* 浅蓝灰背景 */
    --border: #d8e2ec;          /* 蓝调边框 */
    --shadow-sm: 0 2px 8px rgba(0,80,151,0.06);
    --shadow-md: 0 8px 24px rgba(0,80,151,0.10);
    --shadow-lg: 0 20px 48px rgba(0,80,151,0.14);
}

/* ---------- 首页轮播 Hero ---------- */
.hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 560px;
}
.carousel-track {
    display: flex;
    height: 100%;
    /* width 与每张 slide 的 flex-basis 由 JS 根据 slide 数量动态设置，支持任意张数 */
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: var(--text);
    position: relative;
}
/* 轮播装饰图案：右上角电气符号，提升每张幻灯片的视觉丰富度 */
.carousel-slide .slide-deco {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
}
.carousel-slide .slide-deco svg { width: 100%; height: 100%; }
.carousel-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.carousel-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding-right: 40px;
}
.carousel-tag {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid rgba(0,88,166,0.4);
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 18px;
    color: var(--primary);
    background: rgba(255,255,255,0.5);
}
.carousel-content h1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--text);
    text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}
.carousel-content p {
    font-size: 17px;
    color: var(--text-sub);
    margin-bottom: 30px;
    line-height: 1.6;
}
.carousel-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.carousel-dots {
    position: absolute;
    bottom: 28px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 10;
}
.carousel-dots button {
    width: 32px; height: 4px;
    padding: 0; border: 0;
    font-size: 0; /* 防止按钮内文字漏出形成黑点 */
    border-radius: 2px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.3s, width 0.3s;
}
.carousel-dots button.active { background: var(--accent); width: 48px; }

.carousel-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.3);
    color: white; font-size: 24px; line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}
.carousel-arrow:hover { background: rgba(255,255,255,0.3); }
.carousel-arrow.prev { left: 24px; }
.carousel-arrow.next { right: 24px; }

/* ---------- 内页过渡 Hero ---------- */
.inner-hero {
    padding: 40px 0;
    min-height: 280px;
    display: flex;
    align-items: center;
    /* 默认渐变（兜底，有 background-image 时被覆盖） */
    background: linear-gradient(120deg, #004888 0%, #005097 55%, #0058a6 100%);
    color: white;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.inner-hero[style*="background-image"] {
    background-color: #004888;
    background-size: cover;
    background-position: center;
}
.inner-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,80,151,0.85) 0%, rgba(0,88,166,0.70) 100%);
    pointer-events: none;
}
.inner-hero::before {
    content: '';
    position: absolute;
    top: -60%; right: -20%;
    width: 60%; height: 240%;
    background: radial-gradient(circle, rgba(42,168,184,0.20) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}
.inner-hero .container { position: relative; z-index: 2; }
.inner-hero h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.inner-hero .breadcrumb {
    font-size: 14px;
    opacity: 0.85;
}
.inner-hero .breadcrumb a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}
.inner-hero .breadcrumb a:hover { color: var(--accent); }
.inner-hero .breadcrumb span.sep { margin: 0 8px; opacity: 0.6; }
.inner-hero .hero-sub {
    font-size: 16px;
    opacity: 0.9;
    margin-top: 8px;
}

/* ---------- 统一分区组件 ---------- */
.section { padding: 60px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; margin-bottom: 40px; }
.section-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -10px;
    transform: translateX(-50%);
    width: 48px; height: 3px;
    background: var(--accent);
    border-radius: 2px;
}
.section-sub { color: var(--text-sub); font-size: 15px; margin-top: 20px; }

/* ---------- 按钮样式 ---------- */
.btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: var(--accent);
    color: var(--primary-deep);
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 16px rgba(13, 123, 138,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 123, 138,0.45); color: var(--primary-deep); text-decoration: none; }
.btn-ghost {
    display: inline-block;
    padding: 11px 26px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.25s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); color: white; text-decoration: none; }
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s;
}
.btn-outline:hover { background: var(--primary); color: white; text-decoration: none; }

/* ---------- 产品卡片新样式 ---------- */
.product-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    background: var(--bg-alt);
    overflow: hidden;
}
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.product-img-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 42px; font-weight: 700;
}

/* ---------- 案例卡片 ---------- */
.case-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: block;
    color: inherit;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none; }
.case-img {
    width: 100%; height: 220px;
    background-size: cover;
    background-position: center;
}
.case-info { padding: 20px; }
.case-info h3 {
    font-size: 17px; font-weight: 600;
    color: var(--text); margin-bottom: 8px;
    line-height: 1.4;
}
.case-info p { color: var(--text-sub); font-size: 14px; line-height: 1.6; }

/* ---------- 公司简介条 ---------- */
.intro-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 36px 0;
}
.intro-bar-inner {
    display: flex;
    gap: 60px;
    align-items: center;
    flex-wrap: wrap;
}
.intro-text { flex: 1; min-width: 300px; }
.intro-text h2 {
    font-size: 26px;
    color: var(--primary-deep);
    margin-bottom: 10px;
    font-weight: 700;
}
.intro-text p {
    color: var(--text-sub);
    font-size: 15px;
    line-height: 1.7;
}
.intro-stats {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}
.stat-item { text-align: center; }
.stat-num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.stat-label {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 4px;
    display: block;
}

/* ---------- 产品分类入口 ---------- */
.cat-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}
.cat-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    transition: all 0.25s;
}
.cat-entry:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(0,88,166,0.12);
    transform: translateY(-2px);
}
.cat-entry-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cat-entry-info h3 {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 2px;
    font-weight: 600;
}
.cat-entry-info span {
    font-size: 12px;
    color: var(--primary);
}

/* ---------- 精选产品 ---------- */
.featured-products { margin-top: 10px; }
.section-sub-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.section-sub-head > span {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-deep);
    position: relative;
    padding-left: 12px;
}
.section-sub-head > span::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 16px;
    background: var(--accent);
    border-radius: 2px;
}
.more-link {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}
.more-link:hover { color: var(--accent); }

.product-model {
    font-size: 12px;
    color: var(--text-light);
    display: block;
    margin-bottom: 6px;
}

/* ---------- 核心优势 ---------- */
.advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.advantage-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s;
}
.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.adv-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    color: white;
    font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.advantage-card h3 {
    font-size: 17px;
    color: var(--primary-deep);
    margin-bottom: 10px;
    font-weight: 700;
}
.advantage-card p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.7;
}

/* ---------- 最新动态 ---------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.news-card {
    display: flex;
    gap: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.25s;
}
.news-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.news-date {
    width: 70px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid var(--border);
    padding-right: 18px;
}
.news-date .day {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}
.news-date .month {
    font-size: 12px;
    color: var(--text-light);
}
.news-info h4 {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.4;
}
.news-info p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-center { text-align: center; }

/* ---------- CTA 引导条 ---------- */
.cta-bar {
    background: linear-gradient(120deg, var(--primary-deep) 0%, var(--primary) 100%);
    padding: 40px 0;
    color: white;
    margin-top: 40px;
}
.cta-inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.cta-text h3 { font-size: 22px; margin-bottom: 6px; }
.cta-text p { opacity: 0.85; font-size: 14px; }
.cta-links { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 产品列表页（左右布局） ---------- */
.product-list-body {
    background: #f5f7fa;
    padding: 48px 0 60px;
    min-height: 60vh;
}
.product-layout {
    display: flex;
    gap: 32px;
}
.product-sidebar {
    width: 260px;
    flex-shrink: 0;
}
.product-main {
    flex: 1;
    min-width: 0;
}

/* 侧边栏块 */
.sidebar-block {
    background: #ffffff;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.sidebar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.sidebar-title::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 24px; height: 2px;
    background: var(--accent);
}
.sidebar-cats {
    list-style: none;
    padding: 0; margin: 0;
}
.sidebar-cats li {
    margin-bottom: 4px;
}
.sidebar-cats a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}
.sidebar-cats a:hover {
    background: #f0f4fb;
    color: var(--primary);
}
.sidebar-cats li.active a {
    background: var(--primary);
    color: white;
    font-weight: 600;
}
.cat-count {
    font-size: 12px;
    background: #f0f2f5;
    padding: 2px 10px;
    border-radius: 12px;
    color: var(--text-sub);
}
.sidebar-cats li.active .cat-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* ===== 侧边栏嵌套子分类 ===== */
.sidebar-cats li .sidebar-sub {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 12px;
    border-left: 2px solid #e8ecf0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.sidebar-cats li.open .sidebar-sub,
.sidebar-cats li:hover .sidebar-sub {
    max-height: 500px;
}
.sidebar-cats li .sidebar-sub li {
    margin-bottom: 2px;
}
.sidebar-cats li .sidebar-sub a {
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-sub);
    border-radius: 0 4px 4px 0;
}
.sidebar-cats li .sidebar-sub a:hover {
    background: #f0f4fb;
    color: var(--primary);
}
.sidebar-cats li .sidebar-sub li.active a {
    background: #e8f0f8;
    color: var(--primary);
    font-weight: 600;
}
.sidebar-cats li .sidebar-sub .cat-count {
    font-size: 11px;
    padding: 1px 8px;
}
.sidebar-cats li .has-children {
    position: relative;
}
.sidebar-cats li .has-children::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    opacity: 0.5;
}
.sidebar-cats li.active > .has-children::after,
.sidebar-cats li.open > .has-children::after {
    transform: translateY(-40%) rotate(-135deg);
}
/* END 侧边栏嵌套子分类 */

/* 侧边栏搜索 */
.sidebar-search { display: flex; flex-direction: column; gap: 10px; }
.sidebar-search input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.sidebar-search input:focus { border-color: var(--primary); }
.sidebar-search button {
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.sidebar-search button:hover { background: var(--primary-deep); }

/* 侧边栏联系 */
.sidebar-contact {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
    color: white;
    text-align: center;
}
.sidebar-contact .sidebar-title { color: white; border-color: rgba(255,255,255,0.2); }
.sidebar-contact .sidebar-title::before { background: var(--accent); }
.sidebar-contact p { font-size: 13px; opacity: 0.85; margin-bottom: 12px; }
.sidebar-phone {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 14px;
}
.sidebar-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--accent);
    color: var(--primary-deep);
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.sidebar-btn:hover { opacity: 0.9; }

/* 结果栏 */
.result-bar {
    background: white;
    padding: 16px 24px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--text-sub);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.result-bar strong { color: var(--primary); font-weight: 700; font-size: 16px; }
.result-kw { color: var(--primary-deep); }
.result-clear { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 13px; }
.result-clear:hover { text-decoration: underline; }

/* 产品专业列表（左图右文） */
.product-list-pro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

/* ===== 产品卡片网格（新） ===== */
.prod-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}
.prod-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}
.prod-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 28px rgba(0,80,151,0.12);
    transform: translateY(-4px);
}
.prod-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f8fc;
    position: relative;
}
.prod-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s;
}
.prod-card:hover .prod-card-img img { transform: scale(1.06); }
.prod-card-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
    background: linear-gradient(135deg, #f5f8fc 0%, #e8f0f8 100%);
}
.prod-card-info {
    padding: 14px 16px 16px;
    text-align: center;
}
.prod-card-model {
    display: inline-block;
    font-size: 11px;
    font-family: 'Consolas', monospace;
    color: var(--accent-deep);
    background: #fef9ed;
    padding: 1px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.prod-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.prod-card:hover .prod-card-title { color: var(--primary); }
.prod-card-cat {
    display: inline-block;
    font-size: 11px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    padding-top: 8px;
    width: 100%;
}
@media (max-width: 768px) {
    .prod-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .prod-card-info { padding: 10px 12px 12px; }
    .prod-card-title { font-size: 13px; min-height: 36px; }
}
@media (max-width: 480px) {
    .prod-card-grid { grid-template-columns: 1fr; }
}
.prod-row {
    display: flex;
    gap: 24px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.3s;
}
.prod-row:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 24px rgba(0,88,166,0.08);
    transform: translateY(-2px);
}
.prod-row-img {
    flex-shrink: 0;
    width: 260px;
    height: 180px;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eef1f5;
}
.prod-row-img img {
    width: 100%; height: 100%;
    object-fit: cover;        /* 填满外框，带背景的产品图灰色背景自然撑满 */
    object-position: center;
    transition: transform 0.4s;
}
.prod-row:hover .prod-row-img img { transform: scale(1.05); }
.prod-row-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-deep);
    letter-spacing: 2px;
}
.prod-row-info {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.prod-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.prod-row-head .prod-cat-tag { margin-bottom: 0; }
.prod-row-head .prod-title { margin-bottom: 0; }
.prod-model-inline {
    font-size: 12px;
    color: var(--text-light);
    font-family: 'Consolas', monospace;
    background: #f5f7fa;
    padding: 2px 10px;
    border-radius: 4px;
}
.prod-row-desc {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.7;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-row-foot {
    display: flex;
    gap: 10px;
}

.prod-cat-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 10px;
    background: #eef3fb;
    color: var(--primary);
    border-radius: 10px;
    width: fit-content;
}
.prod-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.prod-title a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.prod-title a:hover { color: var(--primary); }

.btn-primary-sm {
    flex: 1;
    text-align: center;
    padding: 8px 14px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}
.btn-primary-sm:hover { background: var(--primary-deep); }
.btn-outline-sm {
    flex: 1;
    text-align: center;
    padding: 8px 14px;
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-outline-sm:hover { background: var(--primary); color: white; }

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px 0 0;
}
.page-btn {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-weight: 600;
}

/* ---------- 列表页通用 ---------- */
.list-body {
    background: #f5f7fa;
    padding: 48px 0 60px;
    min-height: 60vh;
}

/* ---------- 工程案例卡片 ---------- */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.case-card-pro {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.case-card-pro:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,88,166,0.12);
    border-color: var(--primary);
}
.case-pro-img {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.case-pro-img::after {
    content: '查看案例 ›';
    position: absolute;
    inset: 0;
    background: rgba(0,80,151,0.55);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.25s;
}
.case-card-pro:hover .case-pro-img::after { opacity: 1; }
.case-pro-info {
    padding: 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.case-pro-info h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 10px;
    line-height: 1.4;
}
.case-card-pro:hover .case-pro-info h3 { color: var(--primary); }
.case-pro-info p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.case-pro-date {
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* ---------- 文章列表新样式 ---------- */
.article-layout {
    display: flex;
    gap: 28px;
}
.article-main { flex: 1; min-width: 0; }
.article-sidebar { width: 280px; flex-shrink: 0; }
.article-list-pro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-row {
    display: flex;
    gap: 20px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 16px;
    text-decoration: none;
    transition: all 0.25s;
}
.article-row:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,88,166,0.08);
    transform: translateX(4px);
}
.article-row-img {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    border-radius: 8px;
    background-size: contain; /* 完整显示缩略图，不裁切 */
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border: 1px solid #eef1f5;
}
.article-row-info { flex: 1; min-width: 0; }
.article-row-info h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.4;
}
.article-row:hover .article-row-info h3 { color: var(--primary); }
.article-row-info p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-row-date {
    font-size: 12px;
    color: var(--text-light);
}

/* 热门排名 */
.hot-list { list-style: none; padding: 0; margin: 0; }
.hot-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f5;
}
.hot-list li:last-child { border-bottom: none; }
.hot-list a {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hot-list a:hover { color: var(--primary); }
.hot-rank {
    width: 22px; height: 22px;
    border-radius: 4px;
    background: #eef3fb;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hot-rank.top {
    background: var(--primary);
    color: white;
}

/* ---------- 下载列表 ---------- */
.download-list h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-deep);
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    position: relative;
}
.download-list h3::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 36px; height: 2px;
    background: var(--accent);
}
.download-list > h3:first-child { margin-top: 0; }
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}
.download-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    transition: all 0.25s;
}
.download-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,88,166,0.08);
    transform: translateY(-2px);
}
.dl-icon {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    color: white;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dl-info { flex: 1; min-width: 0; }
.dl-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.4;
}
.download-item:hover .dl-info h4 { color: var(--primary); }
.dl-info p {
    font-size: 12px;
    color: var(--text-light);
}
.dl-btn {
    padding: 6px 16px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.download-item:hover .dl-btn { background: var(--primary-deep); }

/* ---------- 统一面包屑（内容区左上角） ---------- */
.breadcrumb-top {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 20px;
    line-height: 1.6;
}
.breadcrumb-top a { color: var(--text-sub); text-decoration: none; transition: color 0.2s; }
.breadcrumb-top a:hover { color: var(--primary); }
.breadcrumb-top .sep { margin: 0 8px; color: #c2c8d1; }

/* 通用单页内容与面包屑间距 */
.page-wrapper > .container { padding-top: 24px; }

/* ---------- 工程案例：左侧可折叠分类树 ---------- */
.case-sidebar .sidebar-block > .sidebar-cats { margin-bottom: 6px; }
.case-tree-group { margin-bottom: 4px; }
.case-tree-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: background 0.2s, color 0.2s;
}
.case-tree-group > summary::-webkit-details-marker { display: none; }
.case-tree-group > summary:hover { background: #f0f4fb; color: var(--primary); }
.case-tree-group > summary.case-group-active { background: var(--primary); color: #fff; }
.case-tree-group > summary.case-group-active .cat-count { background: rgba(255,255,255,0.25); color: #fff; }
.case-group-name { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.case-tree-group > summary::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 2px solid #9aa3af;
    border-bottom: 2px solid #9aa3af;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.case-tree-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.case-tree-group > summary:hover::after { border-color: var(--primary); }
.case-tree-group > summary.case-group-active::after { border-color: #fff; }
.case-sub-cats {
    list-style: none;
    margin: 2px 0 6px 18px;
    padding: 4px 0 4px 12px;
    border-left: 1px dashed var(--border);
}
.case-sub-cats a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-sub);
    text-decoration: none;
    transition: all 0.2s;
}
.case-sub-cats a:hover { background: #f0f4fb; color: var(--primary); }
.case-sub-cats li.active a { background: #eaf0fb; color: var(--primary); font-weight: 600; }
.case-sub-cats li.active .cat-count { background: var(--primary); color: #fff; }

/* 资讯新闻左栏子栏目 */
.news-layout { display: flex; gap: 28px; }
.news-tree-group { margin-bottom: 0; }
.news-tree-group > summary.news-group-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    transition: background 0.2s;
}
.news-tree-group > summary.news-group-head::-webkit-details-marker { display: none; }
.news-tree-group > summary.news-group-head::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.news-tree-group[open] > summary.news-group-head::after { transform: rotate(-135deg) translateY(-2px); }
.news-group-title { display: flex; align-items: center; gap: 6px; }
.news-group-head .cat-count { background: rgba(255,255,255,0.25); color: #fff; }
.news-sub-cats {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px 0 0;
}
.news-sub-cats li { margin-bottom: 3px; }
.news-sub-cats a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s;
}
.news-sub-cats a:hover { background: #f0f4fb; color: var(--primary); }
.news-sub-cats li.active a { background: var(--primary); color: #fff; font-weight: 600; }
.news-sub-cats li.active .cat-count { background: rgba(255,255,255,0.25); color: #fff; }

/* 案例筛选条件标签 */
.case-filter-tags { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf0fb;
    color: var(--primary);
    font-size: 12px;
    padding: 3px 6px 3px 12px;
    border-radius: 12px;
}
.chip-x {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.chip-x:hover { color: #d4392f; }

/* 案例卡片行业/地区标签 */
.case-pro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.case-tag {
    font-size: 11px;
    color: var(--primary);
    background: #eef3fb;
    border-radius: 4px;
    padding: 2px 8px;
}

/* 下载中心右栏单列条目 */
.download-list .dl-list-item { margin-bottom: 12px; }
.download-list .dl-list-item:last-child { margin-bottom: 0; }

/* ---------- 移动端优化 ---------- */
@media (max-width: 768px) {
    .hero-carousel { height: 420px; }
    .carousel-content { max-width: 100%; padding-right: 0; }
    .carousel-content h1 { font-size: 28px; }
    .carousel-content p { font-size: 15px; }
    .carousel-slide .slide-deco { display: none; } /* 移动端隐藏装饰图，避免遮挡文字 */
    .carousel-arrow { width: 36px; height: 36px; font-size: 18px; }
    .carousel-arrow.prev { left: 10px; }
    .carousel-arrow.next { right: 10px; }
    .inner-hero { padding: 24px 0; min-height: 190px; }
    .inner-hero h1 { font-size: 26px; }
    .section { padding: 40px 0; }
    .section-title { font-size: 24px; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-links { justify-content: center; }
    .product-img-wrap { height: 160px; }
    .case-img { height: 180px; }

    /* 首页新版块移动端 */
    .intro-bar-inner { flex-direction: column; gap: 24px; text-align: center; }
    .intro-stats { gap: 20px; width: 100%; justify-content: center; }
    .stat-num { font-size: 22px; }
    .cat-entry-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .advantage-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .news-grid { grid-template-columns: 1fr; }
    .news-card { padding: 14px; gap: 12px; }
    .news-date { width: 56px; padding-right: 12px; }
    .news-date .day { font-size: 22px; }

    /* 产品列表移动端 */
    .product-layout { flex-direction: column; gap: 20px; }
    .product-sidebar { width: 100%; }
    .sidebar-cats { display: flex; flex-wrap: wrap; gap: 6px; }
    .sidebar-cats li { margin: 0; }
    .sidebar-cats a { padding: 6px 14px; font-size: 13px; }
    .cat-count { display: none; }
    .prod-row { flex-direction: column; gap: 0; }
    .prod-row-img { width: 100%; height: 220px; background: #f0f0f0; } /* 高度加大+浅灰底，避免 cover 裁切产品主体 */
    .prod-row-img img { object-fit: contain; }                    /* 手机端完整显示产品，灰底与产品图背景融合 */
    .prod-row-img video { object-fit: contain; background: #000; } /* 手机端视频完整显示，黑底 */
    .prod-row-info { padding: 16px; }
    .prod-row-head { gap: 8px; }
    .prod-row-desc { -webkit-line-clamp: 3; }

    /* 案例卡片 */
    .case-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .case-pro-img { height: 150px; }
    .case-pro-info { padding: 14px; }
    .case-pro-info h3 { font-size: 15px; }

    /* 文章列表 */
    .article-layout { flex-direction: column; gap: 20px; }
    .article-sidebar { width: 100%; }
    .article-row { flex-direction: column; gap: 12px; }
    .article-row-img { width: 100%; height: 160px; }

    /* 下载列表 */
    .download-grid { grid-template-columns: 1fr; }

    /* 案例分类树：移动端保持纵向列表 */
    .case-sidebar .sidebar-cats { display: block; }
    .case-tree-group > summary { padding: 10px 12px; }
    .case-sub-cats { margin-left: 12px; padding-left: 10px; }
    .breadcrumb-top { margin-bottom: 14px; }
}

/* ---------- 产品详情：统一媒体画廊（单图 / 多图 / 视频切换） ---------- */
.pd-media-viewport {
    position: relative;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8ecef;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
}
.pd-media-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
}
.pd-media-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}
.pd-media-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 填满容器，带背景的产品图灰色背景自然撑满，无两侧留白 */
    object-position: center;
    display: block;
    background: #fff;
}
.pd-media-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
/* 视频懒加载占位：封面图 + 播放钮，激活幻灯片时才替换为真 video */
.pd-media-video-lazy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    cursor: pointer;
}
.pd-media-video-lazy img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0.92;
}
.pd-video-lazy-play {
    position: absolute;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(0,80,151,0.72);
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    transition: transform 0.2s, background 0.2s;
}
.pd-media-video-lazy:hover .pd-video-lazy-play {
    transform: scale(1.08);
    background: #004888;
}
.pd-media-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(0,80,151,0.08);
    background: rgba(255,255,255,0.88);
    color: #004888;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,80,151,0.15);
    transition: background 0.2s, transform 0.2s;
}
.pd-media-arrow:hover { background: #fff; }
.pd-media-prev { left: 14px; }
.pd-media-next { right: 14px; }
.pd-media-counter {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 3;
    background: rgba(0,80,151,0.68);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 11px;
    pointer-events: none;
}
.pd-media-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.pd-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #f1f5f9;
    transition: border-color 0.2s;
}
.pd-thumb:hover { border-color: #9ec0ef; }
.pd-thumb.is-active { border-color: #004888; }
.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pd-thumb-video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #004888 0%, #004888 100%);
}
.pd-thumb-video img { opacity: 0.8; }
.pd-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.pd-media-viewport:focus { outline: none; }

@media (max-width: 768px) {
    .pd-media-viewport { height: 300px; }
    .pd-media-arrow { width: 36px; height: 36px; }
    .pd-thumb { flex-basis: 64px; width: 64px; height: 64px; }
}
/* ===== 浦笃自动化首页新样式 ===== */

/* Hero 首屏 */
.hero {
    position: relative;
    min-height: 480px;
    background: linear-gradient(135deg, #004888 0%, #005097 50%, #0058a6 100%);
    overflow: hidden;
    color: #fff;
    padding: 60px 0;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 60px;
}
.hero-content { flex: 1; z-index: 2; }
.hero-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.hero-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}
.hero-title-accent { color: #dfaf1f; font-weight: 700; }
.hero-sub {
    font-size: 16px;
    opacity: 0.92;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 560px;
}
.hero-cta { display: flex; gap: 16px; }
.hero-visual {
    flex: 0 0 320px;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
}
.hero-circle-1 { width: 300px; height: 300px; top: 10px; left: 10px; animation: spin 30s linear infinite; }
.hero-circle-2 { width: 220px; height: 220px; top: 50px; left: 50px; animation: spin 20s linear infinite reverse; border-color: rgba(223,175,31,0.35); }
.hero-circle-3 { width: 140px; height: 140px; top: 90px; left: 90px; animation: spin 15s linear infinite; border-color: rgba(223,175,31,0.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-icon { width: 160px; height: 160px; position: relative; z-index: 2; }

/* 通用 Section */
.section { padding: 70px 0; }
.section-header { text-align: center; margin-bottom: 50px; position: relative; }
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a2332;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 3px;
    background: #005097;
    border-radius: 2px;
}
.section-sub { color: #6b7c80; font-size: 16px; }
.section-more {
    position: absolute;
    top: 0; right: 0;
    font-size: 14px;
    color: #005097;
    text-decoration: none;
    font-weight: 500;
    padding: 6px 0;
    display: inline-block;
}
.section-more:hover { text-decoration: underline; color: #004888; }

/* 产品矩阵 */
.section-products { background: #fff; }
.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.product-card {
    background: #fff;
    border: 1px solid #e8ecee;
    border-radius: 10px;
    padding: 28px 22px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: #005097;
    box-shadow: 0 8px 24px rgba(0,88,166,0.15);
    transform: translateY(-4px);
}
.product-card-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #005097, #0058a6);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
}
.product-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1a2332;
    margin-bottom: 12px;
}
.product-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex: 1;
}
.product-card-list li {
    font-size: 13px;
    color: #6b7c80;
    padding: 3px 0;
    padding-left: 14px;
    position: relative;
}
.product-card-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #005097;
}
.product-card-arrow {
    font-size: 13px;
    color: #005097;
    font-weight: 500;
}

/* 解决方案 */
.section-solutions { background: #f5f8fc; }
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.solution-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,80,151,0.08);
    border: 1px solid #eef3f9;
}
.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0,80,151,0.18);
    border-color: #005097;
}
.solution-card-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: #fff;
    position: relative;
}
.solution-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm20 20h20v20H20V20z' fill='none' fill-rule='evenodd' fill-opacity='0.12'/%3E%3C/svg%3E");
    pointer-events: none;
}
.solution-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1a2332;
    padding: 18px 20px 8px;
}
.solution-card p {
    font-size: 14px;
    color: #6b7c80;
    padding: 0 20px 20px;
    line-height: 1.7;
}

/* 服务承诺 */
.section-services { background: #fff; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.service-item { text-align: center; }
.service-icon {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, #005097, #0058a6);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin: 0 auto 16px;
}
.service-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a2332;
    margin-bottom: 8px;
}
.service-item p { color: #6b7c80; font-size: 14px; }

/* CTA 区域 */
.section-cta {
    background: linear-gradient(135deg, #004888 0%, #005097 100%);
    color: #fff;
    padding: 60px 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.cta-text h2 { font-size: 28px; margin-bottom: 8px; color: #fff; }
.cta-text p { opacity: 0.9; font-size: 15px; }
.cta-buttons { display: flex; gap: 16px; }

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.btn-primary {
    background: #fff;
    color: #005097;
}
.btn-primary:hover {
    background: #b8e8ef;
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
}
.btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}
.btn-lg { padding: 16px 36px; font-size: 16px; }

/* 移动端适配 */
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .solutions-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .hero { padding: 50px 0; min-height: auto; }
    .hero-inner { flex-direction: column-reverse; gap: 30px; }
    .hero-visual { flex: none; width: 220px; height: 220px; }
    .hero-circle-1 { width: 200px; height: 200px; top: 10px; left: 10px; }
    .hero-circle-2 { width: 140px; height: 140px; top: 40px; left: 40px; }
    .hero-circle-3 { width: 80px; height: 80px; top: 70px; left: 70px; }
    .hero-icon { width: 110px; height: 110px; }
    .hero-title { font-size: 30px; }
    .section { padding: 50px 0; }
    .section-header { margin-bottom: 36px; padding-bottom: 40px; }
    .section-more { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); }
    .section-title { font-size: 24px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cta-inner { flex-direction: column; text-align: center; }
    .cta-buttons { flex-direction: column; width: 100%; }
    .hero-cta { flex-direction: column; }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
    .solutions-grid { grid-template-columns: 1fr; }
}

/* ===== 首页推荐产品区块 ===== */
.section-featured { background: #f5f8fc; }
.section-featured .prod-card-grid { margin-bottom: 0; }
.section-featured .featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.prod-card-badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    background: linear-gradient(135deg, #dfaf1f, #c89e1c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(200,158,28,0.4);
}
@media (max-width: 1024px) {
    .section-featured .featured-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .section-featured .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ========================================
   全站移动端兜底：禁止横向滚动 + 内容图片等比缩放
   ======================================== */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
/* 详情内容区图片：等比缩放 + 点击可放大（配合 lightbox.js） */
.detail-content img,
.content-wrapper img,
.article-detail .content img,
.page-content img {
    height: auto;
    cursor: zoom-in;
}
/* 表格在窄屏下可横向滑动，不撑破页面 */
.detail-content table, .content-wrapper table { overflow-x: auto; }

/* ========================================
   图片灯箱（lightbox.js）
   ======================================== */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10, 20, 35, 0.92);
    display: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.lightbox-overlay.show { display: block; }
.lightbox-overlay .lb-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.lightbox-overlay .lb-img {
    transition: transform 0.08s linear;
    will-change: transform;
}
.lightbox-overlay .lb-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.16); color: #fff;
    font-size: 18px; cursor: pointer;
}
.lightbox-overlay .lb-bar {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.14); border-radius: 24px;
    padding: 8px 14px; z-index: 2;
}
.lightbox-overlay .lb-btn {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.2); color: #fff;
    font-size: 17px; cursor: pointer;
}
.lightbox-overlay .lb-btn:active { background: rgba(255,255,255,0.35); }
.lightbox-overlay .lb-pct {
    color: #fff; font-size: 13px; min-width: 44px; text-align: center;
}
@media (max-width: 768px) {
    .lightbox-overlay .lb-btn { width: 42px; height: 42px; }  /* 手指点击更舒适 */
    .lightbox-overlay .lb-close { width: 44px; height: 44px; }
}