:root {
    --primary-color-dark: #004d40;
    --primary-color: #00796b;
    --primary-color-light: #e8f5e9;
    --accent-color: #ffb300;
    --text-color-dark: #333;
    --text-color-light: #666;
    --background-gradient: linear-gradient(135deg, #e0f2f7 0%, #ffffff 100%);
    --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * 确保 html 和 body 占满全屏，
 * 并防止因细微误差导致的水平滚动条。
 */
html, body {
    width: 100%;
    overflow-x: hidden;
}


/* 引入 Google Fonts - 优雅的衬线和无衬线字体 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Lato:wght@300;400;700&display=swap');

/* ======================================================= */
/* ==   全局页面布局 (最终修正版 - Flexbox Body)        == */
/* ======================================================= */

/* ======================================================= */
/* ==   全局页面布局 (最终整合版)                     == */
/* ======================================================= */

html {
    height: 100%;
}

body {
    /* --- 布局核心 --- */
    display: flex;
    flex-direction: column;
    min-height: 100%;
    
    /* --- 基础样式 --- */
    margin: 0;
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: #444;
    background-color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header, .site-footer {
    flex-shrink: 0; /* 防止头部和新版脚部被压缩 */
}

/* ======================================================= */
/* ==         【最终版】Main 区域布局 (已整合)           == */
/* ======================================================= */

/* ======================================================= */
/* ==   【最终方案】产品中心页完整样式 (复制此块全部内容)   == */
/* ======================================================= */

/* --- 1. 基础布局设置 --- */
/* 确保当产品页激活时，body和main能够撑满全屏 */
main.full-height-content {
    height: 100vh;      /* 高度占满整个屏幕 */
    max-width: none;    /* 解除任何可能的最大宽度限制 */
    margin: 0;          /* 移除所有外边距 */
    padding: 0;         /* 移除所有内边距 */
    display: flex;      /* 使用flex布局 */
    flex-direction: column;
}

/* --- 3. 面板容器样式 --- */
/* 让面板容器填满 main 区域 */
.category-panels-container {
    flex-grow: 1; /* 关键：让容器"成长"以填满父元素 main 的所有空间 */
    display: flex;
    width: 100%;
}

/* --- 4. 单个面板样式 (新增了黑色遮罩) --- */
.category-panel {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: flex 0.6s ease; /* 动画效果 */
}

/* 新增：为每个面板添加一个半透明的黑色遮罩层 */
.category-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 调整这里的透明度来控制明暗 */
    z-index: 1;
    transition: background-color 0.4s ease;
}

.category-panel:hover::before {
    background-color: rgba(0, 0, 0, 0.2); /* 鼠标悬停时，遮罩变亮 */
}


/* --- 5. 面板内的文字内容样式 --- */
.panel-content {
    position: relative;
    z-index: 2; /* 确保文字在遮罩层之上 */
    text-align: center;
    padding: 20px;
    opacity: 0.8; /* 文字默认稍微透明 */
    transform: translateY(10px); /* 文字默认稍微下移 */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.category-panel:hover .panel-content {
    opacity: 1; /* 鼠标悬停时，文字完全显示 */
    transform: translateY(0); /* 文字恢复原位 */
}

.panel-content h2 {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.panel-content p {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 6. 交互效果：鼠标悬停时，当前面板变宽 --- */
.category-panels-container:hover .category-panel:hover {
    flex: 1; /* 悬停的面板占据更多空间 */
}
/* ================== 全局样式和重置 ================== */
/* 容器和通用布局 */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: #00796b; /* 品牌主色 */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #004d40; /* 品牌主色-深 */
}

.button {
    display: inline-block;
    background: #00796b;
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: none;
}

.button:hover {
    background: #004d40;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* ================== 头部导航栏 ================== */
header {
    background-color: #0F5E54; /* <-- 修改为此颜色，这是图片中的深绿色 */
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    top: 0;
    z-index: 1000;
}

header nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav a {
    color: white;
    margin: 0 10px;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 500;
    position: relative; /* 保持 position 以便其他可能依赖它的样式 */
}

/* 新的悬停效果：背景变色，取代下划线 */
header nav a:hover, 
header nav a.active {
    background-color: #00796b; /* 品牌主色 */
    transform: translateY(-2px);
}

/* ============================================= */
/* ==   【新增修正】确保 Hero Section 全宽显示   == */
/* ============================================= */
.hero-section.section {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    
    /* 关键：覆盖 .section 的居中和卡片样式 */
    max-width: none;     /* 移除最大宽度限制 */
    border-radius: 0;    /* 移除圆角 */
    box-shadow: none;      /* 移除阴影 */
}

/* ============================================= */
/* ==       【最终版】Hero Section 样式         == */
/* ============================================= */

.hero-section {
    min-height: 90vh;
    display: flex;
    flex-direction: column; /* 让内容垂直排列 */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 80px 20px;
    background: 
        linear-gradient(rgba(0, 25, 20, 0.6), rgba(0, 25, 20, 0.6)), 
        url('/images/hero-bg.jpg') no-repeat center center;
    background-size: cover;
}

/* 修正全宽显示问题 */
.hero-section.section {
    margin: 0;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

/* 2. 内容容器 */
.hero-content {
    /* hero-content 现在只是一个逻辑容器，无需额外样式 */
}

/* 3. 主标题 H1 (卓越品质...) */
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
}

/* 5. "了解更多产品"按钮 */
.hero-section .button {
    background: #00796b; /* 使用更亮的品牌绿色 */
    font-size: 1rem;
    padding: 15px 35px;
}
.hero-section .button:hover {
    background: #004d40; /* 鼠标悬停时变为深色 */
    transform: translateY(-2px);
}

/* --- 1. 首页 Hero Section 内的统计卡样式 --- */
/* 我们添加了 .hero-section 作为限定条件 */
.hero-section .stats-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 80px;
    flex-wrap: wrap;
}

.hero-section .stat-item {
    background: transparent; /* 强制透明背景 */
    box-shadow: none;        /* 强制移除阴影 */
    border: none;            /* 强制移除边框 */
    text-align: center;
    color: #fff;
    padding: 20px;
    min-width: 200px;
}

.hero-section .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.hero-section .stat-unit {
    font-size: 1.5rem;
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-section .stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
}

/* ================== 模块化排版 ================== */
.section {
    padding: 80px 0; /* <--- 只保留上下的内边距，左右为 0 */
    /* 其他属性保持不变 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin: 40px auto;
}
/* 将它修改为下面这样 */
.product-section, 
.product-center-section {
    background-color: #fff;
    /* ↓↓↓ 这是唯一的修改：将 '../' 改成了 '/' ↓↓↓ */
    background-image: url('/images/products-bg.jpg'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.65);
    background-blend-mode: overlay;
}
.news-section {
    background-color: #f8f9fa;
}

/* 产品和新闻网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0;
    list-style: none;
}
.card {
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s ease;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-10px);
}

/* 产品预览样式 */
.product-preview h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #2c3e50;
}
.product-preview p {
    color: #666;
}

/* ======================================================= */
/* ==  【修正】首页新闻卡片样式 - 添加作用域限定      == */
/* ======================================================= */
/* 只在首页的 .news-section 或 .card-grid 内才应用这些样式 */
.card-grid .news-item,
.news-section .news-item:not(.news-list .news-item) {
    text-align: left;
}
.card-grid .news-item h3,
.news-section .news-item:not(.news-list .news-item) h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-top: 0;
}
.card-grid .news-item p,
.news-section .news-item:not(.news-list .news-item) p {
    color: #666;
}
.card-grid .news-item a,
.news-section .news-item:not(.news-list .news-item) a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.card-grid .news-item a:hover,
.news-section .news-item:not(.news-list .news-item) a:hover {
    color: #0056b3;
}

.news-date {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

/* ================== 联系表单 ================== */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}
.contact-form .form-group {
    display: flex;
    flex-direction: column;
}
.contact-form label {
    font-weight: 700;
    margin-bottom: 8px;
    color: #555;
}
.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #00796b; /* 品牌主色 */
    box-shadow: 0 0 8px rgba(0, 121, 107, 0.3); /* 绿色辉光 */
    outline: none;
}
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-form .button {
    align-self: flex-start;
}

/* 联系表单专用提交按钮 */
.submit-button {
    background-color: var(--primary-color-dark);
    color: white;
    padding: 15px 35px;
    border: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.submit-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ================== 响应式设计 ================== */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    header nav {
        flex-direction: column;
        align-items: stretch;
    }
    header nav a {
        margin: 10px 0;
        text-align: center;
    }
    .main-heading {
        font-size: 2rem;
    }
    .sub-heading {
        font-size: 1rem;
    }
    .stats-container {
        flex-direction: column;
        gap: 20px;
    }
    .card-grid {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 40px 10px;
    }
}


/* 标题容器 */
.section-header {
    margin-bottom: 50px;
    max-width: 1200px; /* 宽度与 container 保持一致 */
    display: flex;
    flex-direction: column; /* 确保主副标题垂直堆叠 */
    align-items: flex-start;   /* 强制所有内容左对齐 */
}

/* 主标题的统一样式 (例如: "产品中心") */
.section-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    padding: 0;
    text-align: left;
}

/* 副标题的统一样式 (例如: "PRODUCT CENTER") */
.section-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 0 15px 0;
    position: relative;
    text-align: left;
}

/* 为所有副标题添加双色下划线 */
.section-subtitle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: #00796b; /* 品牌主色 */
}

/* 响应式：手机端将所有标题居中 */
@media (max-width: 768px) {
    .section-header {
        align-items: center; /* 在手机上让标题块居中 */
    }
}
/* ======================================================= */
/* ==   产品中心板块特定样式                           == */
/* ======================================================= */

.product-center-section {
    padding: 80px 0;
}

/* 主体两栏布局 (左导航 + 右内容) */
.product-center-body {
    display: flex;
    gap: 40px;
}

/* 左侧导航栏 */
.product-nav {
    flex: 0 0 200px;
    border-right: 1px solid #ddd;
}

.product-nav .nav-link {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
}

.product-nav .nav-link:hover {
    background-color: #e8f5e9; /* 品牌主色-浅 */
    color: #004d40; /* 品牌主色-深 */
}

.product-nav .nav-link.active {
    background-color: #00796b; /* 品牌主色 */
    color: #fff;
    font-weight: bold;
}
.product-nav .nav-link.active::after {
    content: '›';
    position: absolute;
    right: 15px;
    font-size: 1.5rem;
}


/* 右侧产品展示区 */
.product-display {
    flex: 1;
}

.product-pane {
    display: none;
    animation: fadeIn 0.6s;
}

.product-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 产品卡片网格 */
.product-display .card-grid {
    display: grid;
    /* 【核心修正】明确指定为4列，每列均分空间 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
}

/* 单个产品卡片 */
.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.product-card .card-image {
    padding: 20px;
    background-color: #fff;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-card .card-body {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-card .card-body h3 {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
}

/* --- 【重要】响应式布局调整 --- */

/* 平板设备 (例如宽度小于 1200px) */
@media (max-width: 1200px) {
    .product-display .card-grid {
        /* 在平板上变为3列 */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 小型平板或大型手机 (例如宽度小于 992px) */
@media (max-width: 992px) {
    /* --- 页面整体布局的调整 --- */
    .product-center-body {
        flex-direction: column;
    }
    .product-nav {
        display: flex;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 2px solid #007bff;
        flex-basis: auto;
    }
    .product-nav .nav-link {
        border-bottom: none;
        flex-grow: 1;
        text-align: center;
    }
    .product-nav .nav-link.active::after {
        content: '';
    }

    /* --- 产品网格内部的调整 --- */
    .product-display .card-grid {
        /* 在更小的设备上变为2列 */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机设备 (例如宽度小于 768px) */
@media (max-width: 768px) {
    .product-display .card-grid {
        /* 在手机上变为单列 */
        grid-template-columns: 1fr;
    }
}


/* ======================================================= */
/* ==   【最终确认版】新闻中心板块样式 (Target Style)    == */
/* ======================================================= */

/* 1. 整体区域调整：确保背景铺满全屏 */
.news-center-section {
    padding: 100px 0; /* 设置上下内边距 */
    background-color: #f7f8fa; /* 设置目标图中的浅灰色背景 */
    
    /* 覆盖通用 .section 的卡片样式，确保全宽 */
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 2. 整体布局 (左侧控制区 + 右侧滑块) */
.news-center-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* 左侧固定250px, 右侧占据剩余空间 */
    gap: 60px; /* 加大左右间距 */
    align-items: start; /* 从顶部对齐 */
}

/* 3. 左侧控制区样式 (已修正为目标图样式) */
.news-controls .section-header {
    margin-bottom: 40px;
    text-align: left; /* 确保标题在左侧 */
}

.news-controls .section-header .section-title {
    font-size: 2.2rem; /* 对应 "NEWS CENTER" */
    font-weight: 700;
    color: #333;
}

.news-controls .section-header .section-subtitle {
    font-size: 2rem;  /* 对应 "新闻中心" */
    font-weight: 300;
    color: #888;
    margin: 0;
}

.news-controls .section-header .section-subtitle::after {
    left: 0;
    transform: none; /* 取消居中 */
    bottom: -15px;
    background: #00796b;
}

/* 筛选按钮 ("企业新闻", "行业新闻") */
.news-filters {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 50px;
}

.filter-btn {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #666;
    padding: 8px 15px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn:hover {
    color: #004d40;
    background-color: #e8f5e9;
}

.filter-btn.active {
    color: #004d40;
    font-weight: bold;
    background-color: #e8f5e9;
    border-left-color: #00796b;
}

/* 翻页控制器 */
.news-pagination {
    display: flex;
    align-items: center;
    gap: 20px;
}
.swiper-button-prev,
.swiper-button-next {
    position: static;
    background: none;
    border: none;
    width: auto;
    height: auto;
    margin: 0;
    color: #aaa;
    transition: color 0.3s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #333;
}
.swiper-button-prev::after,
.swiper-button-next::after {
    content: '—';
    font-size: 1.5rem;
    font-weight: bold;
}
.swiper-pagination-fraction {
    font-size: 1.2rem;
    color: #333;
}

/* 4. 右侧滑动区域和卡片样式 */
.news-slider-wrapper {
    overflow: hidden;
}

/* 新闻卡片 (article.news-card) (已修正) */
.news-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 添加了默认的阴影 */
    border: 1px solid #e9e9e9;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}
.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}
.news-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.news-card-image {
    height: 200px;
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-card-content {
    padding: 25px;
    flex-grow: 1; /* 让内容区填满剩余空间 */
}
.news-card-content .news-date {
    font-size: 0.85rem;
    color: #999;
}
.news-card-content .news-title {
    font-size: 1.15rem;
    margin: 10px 0;
    color: #333;
    font-weight: bold;
}
.news-card-content .news-excerpt {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
    line-height: 1.7;
}
/* "了解更多" 链接 */
.news-card-content .read-more {
    font-size: 0.9rem;
    color: #00796b; /* 使用我们的主题绿色 */
    font-weight: bold;
    text-transform: uppercase;
}

/* 5. 响应式调整 */
@media (max-width: 992px) {
    .news-center-layout {
        grid-template-columns: 1fr; /* 在平板和手机上变为单列布局 */
        gap: 40px;
    }
    .news-controls {
        /* 在单列时，让标题和筛选按钮水平排列 */
        display: flex; 
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .news-filters {
        flex-direction: row; /* 筛选按钮改回水平排列 */
        margin-bottom: 0;
    }
    .news-pagination {
        display: none; /* 在移动端可以考虑隐藏翻页，让用户直接滑动 */
    }
}


/* ======================================================= */
/* ==   "联系我们"板块样式                           == */
/* ======================================================= */

.contact-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* 建议设置一个底色 */

    /* --- ↓↓↓ 新增的纯CSS斑点背景代码 ↓↓↓ --- */
    background-image: radial-gradient(#dcdcdc 1px, transparent 1px);
    background-size: 16px 16px;
    /* --- ↑↑↑ 新增代码结束 ↑↑↑ --- */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 800px;
    margin: 0;
}
.contact-item {
    display: flex;
    align-items: center;
}
.contact-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #555;
    width: 45px;
    text-align: center;
}
.contact-info {
    font-size: 1rem;
    color: #555;
    text-align: left;
}
.contact-info .info-label {
    font-weight: 600; 
    color: #333;
}
.contact-info p {
    margin: 0;
    display: inline;
}

@media (max-width: 768px) {
    .contact-info {
        text-align: center;
    }
    .contact-grid {
        margin: 0 auto;
    }
    .contact-item {
       flex-direction: column;
       gap: 10px;
    }
}


/* ======================================================= */
/* ==   【最终版】整合后的页脚样式 (V3.0)           == */
/* ======================================================= */

.site-footer {
    background-color: #2c3e50; /* 统一使用您想要的深蓝灰色背景 */
    color: #bdc3c7;
    padding: 60px 0 30px 0;
    font-size: 0.9rem;
    line-height: 1.8;
    flex-shrink: 0; /* 防止在粘性页脚布局中被压缩 */
    margin-top: 0; /* 确保没有多余的上边距 */
}

/* 移除 main > section:last-child 的下边距，防止空白 */
main > section:last-child {
    margin-bottom: 0;
}

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

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 40px;
    flex-wrap: nowrap;
}

.footer-links {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
}

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

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-column a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-aside {
    display: flex;
    align-items: flex-start;
    gap: 30px; /* 加大logo和二维码间距 */
    flex-shrink: 0;
}

.footer-logo img {
    max-width: 150px; /* 调整logo大小以适应布局 */
    height: auto;
}

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

.footer-qr img {
    width: 120px; /* 调整二维码大小 */
    height: 120px;
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    display: block;
}

.footer-qr p {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #bdc3c7;
}

.footer-divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 0.85rem;
    color: #95a5a6;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom a {
    color: #95a5a6;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #ffffff;
}

/* --- 响应式调整 --- */
@media (max-width: 992px) {
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
    }
    .footer-links {
        justify-content: center;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }
    .footer-bottom .legal-links {
        margin-left: 0;
        margin-top: 10px;
    }
    .footer-bottom a {
        margin: 0 10px;
    }
}

    /* V V V 在这里添加下面的新规则 V V V */
    .footer-aside {
        flex-direction: column; /* 将 logo 和二维码垂直堆叠 */
        gap: 20px;            /* 调整它们之间的垂直间距 */
    }
}
    .legal-links {
        margin-top: 10px;
    }
}

/* 单个面板的通用样式 */
.category-panel {
    flex: 1; /* 默认均分宽度 */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    transition: flex 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); /* 平滑的伸缩动画 */
}

/* 面板内的文字内容 */
.panel-content {
    position: relative; /* 确保文字在遮罩层之上 */
    z-index: 2;
    text-align: center;
    padding: 20px;
    transition: transform 0.5s ease;
}

.panel-content h2 {
    font-size: 2rem;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.panel-content p {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* --- 关键：在这里为每个面板设置背景图片 --- */
/* 请将下面的图片路径替换为您自己的图片 */
.panel-agri {
    background-image: url('../images/agri-bg.jpg');
}
.panel-water {
    background-image: url('../images/water-bg.jpg');
}
.panel-industrial {
    background-image: url('../images/industrial-bg.jpg');
}
.panel-pipeline {
    background-image: url('../images/pipeline-bg.jpg');
}
.panel-sewage {
    background-image: url('../images/sewage-bg.jpg');
}

/* 响应式调整：手机上垂直堆叠 */
@media (max-width: 768px) {
    .category-panels-container {
        flex-direction: column; /* 改为垂直排列 */
    }
    .category-panels-container:hover .category-panel:hover,
    .category-panels-container:hover .category-panel:not(:hover) {
        flex: 1; /* 在手机上禁用伸缩效果，保持均分 */
    }
}

/* === 修复产品页面白边问题的最终代码 === */
.full-height-content + footer {
    margin-top: 0;
}

/* ======================================================= */
/* ==   产品中心页 - "大元"同款全屏沉浸式布局         == */
/* ======================================================= */

/* --- 第1步：隐藏这个页面的页脚 --- */
/* 当 main 元素拥有 .full-height-content 这个我们之前加的类时，
   就把它后面的 .site-footer 彻底隐藏掉。*/
main.full-height-content + .site-footer {
    display: none;
}

/* --- 第2步：让内容区占满整个屏幕 --- */
/* 强制 main 元素的高度等于浏览器窗口的100% */
main.full-height-content {
    height: 100vh; 
    padding: 0; /* 移除内边距，确保能完全贴边 */
    max-width: none; /* 覆盖通用的 max-width，解除宽度限制 */
    margin: 0;       /* 覆盖通用的 margin，取消居中和外边距 */
}

/* ======================================================= */
/* ==   "大元"风格 - 产品列表页全新样式                 == */
/* ======================================================= */

/* 1. 顶部 Hero Banner 样式 */
.product-hero-banner {
    padding: 180px 0;
    text-align: center;
    color: #fff;
    /* 请将这里的背景图换成您自己的高清大图 */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/20201031154818117.jpg');
    background-size: cover;
    background-position: center;
}
.product-hero-banner h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
}
.product-hero-banner p {
    font-size: 1.5rem;
    margin: 10px 0 0 0;
    position: relative;
    display: inline-block;
}
/* 标题下的小橙线 */
.product-hero-banner p::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #f39c12; 
}

/* 2. 二级导航栏和面包屑样式 */
.product-subnav-bar {
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
}
.subnav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.subnav-links a {
    color: #555;
    text-decoration: none;
    padding: 20px 15px;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}
.subnav-links a:hover {
    color: #007bff;
}
.subnav-links a.active {
    color: #007bff;
    font-weight: bold;
}
.subnav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 关键：紧贴在父容器的 border-bottom 上方 */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #007bff;
}
/* 面包屑导航样式 */
.breadcrumbs {
    font-size: 0.9rem;
    color: #888;
}
.breadcrumbs a {
    color: #888;
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: #555;
}
.breadcrumbs span {
    color: #333; /* 当前页面名称颜色更深 */
}

/* 3. 产品展示区域样式 */
.product-listing-section {
    padding: 80px 0;
    background-color: #f0f2f5; 
}

.product-pane .card-grid, .product-grid {
    display: grid;
    /* 【核心修正】明确指定为4列，每列均分空间 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
}
.product-card-item {
    background-color: #fff;
    border: 1px solid #e9e9e9;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* 核心修改：添加下面这行代码来实现圆角 */
    border-radius: 18px; 
}
.product-card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.product-card-link {
    text-decoration: none;
}
.product-card-image {
    background-color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 360px; /* 固定图片区域高度 */
}
.product-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-card-title {
    padding: 20px;
    text-align: center;
    border-top: 1px solid #e9e9e9;
}
.product-card-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

/* ======================================================= */
/* ==   新闻中心 - 轮播图箭头样式修正                 == */
/* ======================================================= */

/* 1. 为轮播图的直接父容器创建定位上下文 */
.news-slider-wrapper {
    position: relative;
}

/* 2. 移除旧的、静态的箭头样式 */
/* 我们将原有的规则覆盖掉，让箭头不再是 static 定位 */
.news-center-section .swiper-button-prev,
.news-center-section .swiper-button-next {
    position: absolute; /* 关键：改为绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精准垂直居中 */
    
    /* 借用您之前截图中的箭头样式 */
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    width: 50px;
    height: 50px;
    margin: 0; /* 移除外边距 */
    border-radius: 50%;
    border: none; /* 移除边框 */
    transition: background-color 0.3s ease;
}

/* 鼠标悬停效果 */
.news-center-section .swiper-button-prev:hover,
.news-center-section .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 调整箭头图标大小 */
.news-center-section .swiper-button-prev::after,
.news-center-section .swiper-button-next::after {
    font-size: 1.2rem;
}

/* 3. 为左右箭头设置具体位置 */
.news-center-section .swiper-button-prev {
    left: 20px; /* 距离左边20px */
}

.news-center-section .swiper-button-next {
    right: 20px; /* 距离右边20px */
}

/* 4. (可选) 将原来的箭头从文字流中隐藏 */
.news-pagination {
    text-align: center; /* 让页码居中 */
}
/* 直接隐藏掉原位置的箭头容器，因为我们已经用绝对定位重新创建了它们 */
.news-pagination .swiper-button-prev,
.news-pagination .swiper-button-next {
    display: none;
}

        /* 加载动画 */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }
        
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #2c3e50;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 文本居中工具类 */
        .text-center {
            text-align: center;
        }
        
        /* 浅色背景工具类 */
        .bg-light {
            background-color: #f8f9fa !important;
        }
        
        /* 产品卡片悬停效果增强 */
        .product-preview:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        }
        
        /* 数字动画样式 */
        .stat-number {
            font-size: 2.8rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 5px;
            display: block;
        }

        /* --- 新增：自动轮播样式 --- */
        
        /* 轮播视口：隐藏超出部分 */
        .scenario-carousel {
            overflow: hidden;
            position: relative;
        }

        /* 轮播容器：使用flex布局，并应用动画 */
        .slides-container {
            display: flex;
            /* 动画: 名称 时长 速度曲线 无限循环 */
            /* 5个场景，每个场景展示5秒，总时长25秒 */
            animation: auto-slide 25s linear infinite;
        }
        
        /* 轮播项（每个场景） */
        .scenario-pane {
            flex: 0 0 100%; /* 每个项占据100%宽度，不收缩不放大 */
            width: 100%;
            box-sizing: border-box; /* 确保 padding 不会影响宽度计算 */
        }
        
        /* 鼠标悬停时暂停动画 */
        .scenario-carousel:hover .slides-container {
            animation-play-state: paused;
        }
        
        /* 定义轮播动画关键帧 */
        @keyframes auto-slide {
            /* 共有5个场景，动画分为5个阶段 */
            0%, 20% { transform: translateX(0%); }      /* 第1个场景 */
            25%, 40% { transform: translateX(-100%); }  /* 第2个场景 */
            45%, 60% { transform: translateX(-200%); }  /* 第3个场景 */
            65%, 80% { transform: translateX(-300%); }  /* 第4个场景 */
            85%, 100% { transform: translateX(-400%); } /* 第5个场景 */
        }
        
        .stats-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stats-section .stat-item {
    background-color: #fff; /* 白色背景 */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-section .stat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.stats-section .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #007bff; /* 蓝色数字 */
}

.stats-section .stat-unit {
    font-size: 1.5rem;
    margin-left: 5px;
    color: #555;
}

.stats-section .stat-label {
    font-size: 1.1rem;
    color: #666;
    margin-top: 10px;
}

/* --- 3. 响应式布局 (同时对两种卡片生效) --- */
@media (max-width: 992px) {
    .hero-section .stat-item,
    .stats-section .stat-item {
        flex-basis: calc(50% - 30px); /* 在 flex 布局中占两列 */
    }
}

@media (max-width: 576px) {
    .hero-section .stat-item,
    .stats-section .stat-item {
        flex-basis: 100%; /* 在 flex 布局中占一列 */
    }
    
    .hero-section .stat-number,
    .stats-section .stat-number {
        font-size: 2.2rem;
    }
}
        

footer {
    background: #2c3e50;
    color: #bbb;
    text-align: center;
    padding: 40px 20px;
    font-size: 0.9rem;
    margin-top: 40px;
}

/* ============================================= */
/* ==     【新增修正】移除页脚上方的空白      == */
/* ============================================= */

/*
 * 选中 <main> 元素里的最后一个 <section> 版块,
 * 并强制移除它的下外边距。
 */
main > section:last-child {
    margin-bottom: 0;
}

/*
 * 同时，也确保页脚本身没有任何上外边距,
 * 以防有其他规则干扰。
 */
.site-footer {
    margin-top: 0;
}

/* ======================================================= */
/* ==   【新增】统一设置产品、新闻、联系我们版块的高度    == */
/* ======================================================= */

.product-center-section,
.news-center-section,
.contact-section {
    /* 设置最小高度为屏幕高度的一半 */
    min-height: 60vh;

    /* 覆盖通用的 .section 样式，设置更大的上下内边距 */
    padding: 100px 0;
}

/* ======================================================= */
/* ==   【新增】产品中心页面全屏高度布局修正   == */
/* ======================================================= */

/* 4. 让图片面板容器填满 main 区域 */
.category-panels-container {
    flex-grow: 1; /* 让这个容器也"成长"来填满 main */
    display: flex; /* 确保内部的 a 标签是横向排列的 */
}

/* 5. (可选) 确保 header 和 footer 不会被压缩 */
header, .site-footer {
    flex-shrink: 0;
}

/* ================== 头部导航栏 ================== */
header {
    background-color: #004d40; /* 品牌主色-深 */
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* 导航项之间的间距 */
}

header nav a {
    color: white;
    margin: 0 10px;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 500;
    position: relative;
}

/* 新的悬停效果：背景变色，取代下划线 */
header nav a:hover, 
header nav a.active {
    background-color: #00796b; /* 品牌主色 */
    transform: translateY(-2px);
    color: white; /* 确保激活/悬停时文字颜色不变 */
}
/* ================== 全局重置和基础样式 ================== */
body, h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

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

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #0056b3;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Hero Banner --- */
.hero-banner {
    background-color: #f4f4f4;
    text-align: center;
    padding: 100px 20px;
    background-image: url('/images/banner.png'); /* 建议添加一个背景图 */
    background-size: cover;
    background-position: center;
    color: #fff; /* 如果有背景图，文字建议用白色 */
}

.hero-content {

}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.9;
}

/* --- 通用 Section 样式 --- */
.stats-section, .about-intro-section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.section-divider {
    width: 80px;
    height: 4px;
    background-color: #007bff;
    margin: 0 auto;
    border-radius: 2px;
}

/* --- 实力概览 (Stats Section) --- */


/* --- 公司介绍 (About Intro Section) --- */
.about-intro-section {
    background-color: #f9f9f9;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image-column img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.subsection-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.subsection-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #007bff;
}

.about-text-column p {
    margin-bottom: 20px;
    color: #555;
}

/* ======================================================= */
/* ==   【最终优化版】页脚样式 (修正PC端垂直排列问题)   == */
/* ======================================================= */

.site-footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 60px 40px 30px 40px; /* 增加了左右内边距 */
    font-size: 0.9rem;
    line-height: 1.8;
    flex-shrink: 0;
    margin-top: 40px; /* 确保与上方内容有间距 */
}

/* --- 1. 页脚主体区域 --- */
.footer-main {
    max-width: 1200px; /* 限制最大宽度，使其居中 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 40px;
}

/* --- 2. 左侧链接区域 --- */
.footer-links {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
}

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

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #ffffff;
}

/* --- 3. 右侧 Logo 和二维码区域 --- */
.footer-aside {
    display: flex;
    /* 【核心修正 ①】明确指定PC端为水平排列 */
    flex-direction: row; 
    align-items: flex-start; /* 改为顶部对齐，视觉效果更好 */
    gap: 30px;
    flex-shrink: 0; /* 防止被压缩 */
}

.footer-logo img {
    max-width: 200px; /* 调整Logo大小 */
    height: auto;
}

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

.footer-qr img {
    width: 200px; /* 调整二维码大小 */
    height: 200px;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    display: block;
}

.footer-qr p {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #bdc3c7;
}

/* --- 4. 分割线 --- */
.footer-divider {
    max-width: 1200px;
    margin: 0 auto;
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- 5. 底部版权信息 --- */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    font-size: 0.85rem;
    color: #95a5a6;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom a {
    color: #95a5a6;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #ffffff;
}

/* --- 6. 响应式设计 --- */
/* 平板设备 (宽度小于 992px) */
@media (max-width: 992px) {
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
    }
    .footer-links {
        justify-content: center;
    }
}

/* 手机设备 (宽度小于 768px) */
@media (max-width: 768px) {
    /* 【核心修正 ②】只在手机端，将 .footer-aside 改为垂直排列 */
    .footer-aside {
        flex-direction: column;
        align-items: center; /* 居中对齐 */
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
    }
    .footer-bottom .legal-links {
        margin-left: 0;
        margin-top: 10px;
    }
    .footer-bottom a {
        margin: 0 10px;
    }
}

/* ======================================================= */
/* ==   【最终修复】移除页脚上方的空白区域 (V5.2)       == */
/* ======================================================= */

/*
 * 这段代码的意思是：
 * "找到 <main> 区域里的最后一个 <section> 版块，
 * 并强制将它的下外边距（margin-bottom）设置为 0。"
 */
main > section:last-child {
    margin-bottom: 0 !important;
}

/*
 * 同时，也确保页脚本身没有任何上外边距，
 * 以防止有其他规则干扰。
 */
.site-footer {
    margin-top: 0 !important;
}

/* ======================================================= */
/* ==   【V6.0】从 style-Q.css 整合的专属页面样式       == */
/* ======================================================= */

/* --- 1. 企业文化 & 发展历程页面 - 交错布局样式 --- */
.culture-container {
    max-width: 1200px; /* 调整宽度以适应整体布局 */
    margin: 50px auto;
    padding: 0 20px; /* 确保在移动端有边距 */
}
.culture-section {
    position: relative;
    width: 100%;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
}
.image-wrapper {
    width: 65%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
}
.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-card {
    position: absolute;
    width: 45%;
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 10;
}
.culture-section .card-right { right: 0; }
.culture-section:nth-child(even) { justify-content: flex-end; }
.culture-section:nth-child(even) .text-card { left: 0; }
.text-card .icon {
    font-size: 28px;
    color: #00796b; /* 使用品牌色 */
    margin-bottom: 20px;
}
.text-card h2 {
    font-size: 1.8rem; /* 调整标题大小 */
    color: #333;
    margin: 0 0 15px 0;
}
.text-card p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
}

/* --- 2. 发展历程页面 - 交互式时间轴样式 --- */
.interactive-timeline-wrapper {
    padding: 60px 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}
.interactive-timeline {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 400px;
    align-items: center;
}
.timeline-nav {
    flex: 0 0 200px;
    padding-right: 40px;
}
.timeline-nav ul {
    list-style: none;
    text-align: right;
    position: relative;
    border-right: 2px solid #e0e0e0;
}
.timeline-nav li {
    font-size: 1.2rem;
    font-weight: 500;
    color: #999;
    padding: 20px 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}
.timeline-nav li:hover { color: #333; }
.timeline-nav li.active {
    font-size: 1.8rem;
    font-weight: bold;
    color: #004d40; /* 使用品牌深色 */
}
.timeline-nav li.active::before {
    content: '›';
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #00796b; /* 使用品牌色 */
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-content {
    flex: 1;
    position: relative;
    padding-left: 60px;
    min-height: 250px;
}
.content-panel {
    position: absolute;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精准垂直居中 */
    left: 60px;
    width: calc(100% - 60px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.content-panel.active {
    opacity: 1;
    visibility: visible;
}
.content-panel h2 { /* 确保这里是h2，而不是h1 */
    font-size: 4rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 20px;
}
.content-panel p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    max-width: 500px;
}

/* --- 3. 发展历程页面 - 卡片式承诺模块样式 --- */
.strength-commitment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 80px 0;
}
.strength-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    border-left: 5px solid #00796b;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.strength-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.strength-item:nth-child(2) { border-left-color: #3498db; }
.strength-item:nth-child(3) { border-left-color: #9b59b6; }
.strength-item .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.strength-item .item-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background-color: rgba(0, 121, 107, 0.1);
    color: #00796b;
}
.strength-item:nth-child(2) .item-icon { background-color: rgba(52, 152, 219, 0.1); color: #3498db; }
.strength-item:nth-child(3) .item-icon { background-color: rgba(155, 89, 182, 0.1); color: #9b59b6; }
.strength-item .card-header h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.strength-item .card-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}
.strength-item .card-features { list-style: none; }
.strength-item .card-features li { display: flex; align-items: flex-start; margin-bottom: 10px; }
.strength-item .card-features li svg { flex-shrink: 0; margin-right: 10px; margin-top: 4px; color: #00796b; }
.strength-item:nth-child(2) .card-features li svg { color: #3498db; }
.strength-item:nth-child(3) .card-features li svg { color: #9b59b6; }

/* --- 4. 网站地图页面样式 --- */
.sitemap-page {
    padding: 60px 0;
    background-color: #f8f9fa; /* 柔和的背景色 */
}

/* --- 卡片网格布局 --- */
.sitemap-grid {
    display: grid;
    /* 关键的响应式布局：自动适应屏幕宽度，每列最小320px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; /* 卡片之间的间距 */
}

/* --- 单个卡片样式 --- */
.sitemap-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    border-left: 5px solid #1abc9c; /* 默认主题色 */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sitemap-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px B30px rgba(0, 0, 0, 0.1);
}

/* --- 为不同卡片设置不同的强调色 --- */
.sitemap-card:nth-child(2) { border-left-color: #3498db; }
.sitemap-card:nth-child(3) { border-left-color: #e67e22; }
.sitemap-card:nth-child(4) { border-left-color: #9b59b6; }
.sitemap-card:nth-child(5) { border-left-color: #34495e; }
.sitemap-card:nth-child(6) { border-left-color: #e74c3c; }


/* --- 卡片头部 (图标和标题) --- */
.sitemap-card .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.sitemap-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    color: #1abc9c; /* 默认图标颜色 */
    background-color: rgba(26, 188, 156, 0.1); /* 默认图标背景色 */
}
/* 匹配不同卡片的颜色 */
.sitemap-card:nth-child(2) .card-icon { color: #3498db; background-color: rgba(52, 152, 219, 0.1); }
.sitemap-card:nth-child(3) .card-icon { color: #e67e22; background-color: rgba(230, 126, 34, 0.1); }
.sitemap-card:nth-child(4) .card-icon { color: #9b59b6; background-color: rgba(155, 89, 182, 0.1); }
.sitemap-card:nth-child(5) .card-icon { color: #34495e; background-color: rgba(52, 73, 94, 0.1); }
.sitemap-card:nth-child(6) .card-icon { color: #e74c3c; background-color: rgba(231, 76, 60, 0.1); }

.sitemap-card .card-icon i {
    font-size: 1.5rem; /* Font Awesome图标的大小 */
}

.sitemap-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.sitemap-card h2 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}
.sitemap-card h2 a:hover {
    color: #007bff;
}

/* --- 卡片内的列表 --- */
.sitemap-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sitemap-list li {
    padding: 8px 0;
}

.sitemap-list li a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: block;
}

.sitemap-list li a:hover {
    color: #007bff;
    transform: translateX(5px); /* 鼠标悬停时轻微右移 */
}

/* 列表项前面的小箭头 */
.sitemap-list li a::before {
    content: '›';
    margin-right: 10px;
    font-weight: bold;
    color: #999;
}

.sitemap-card .card-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
}
/* ... (sitemap card的其他颜色和样式) ... */

/* --- 5. 响应式调整 --- */
@media (max-width: 768px) {
    .culture-section { display: block; margin-bottom: 30px; }
    .image-wrapper { width: 100%; margin-bottom: -40px; height: 250px; }
    .text-card { position: relative; width: 100%; padding: 30px; }
    .interactive-timeline { flex-direction: column; align-items: stretch; }
    .timeline-nav { margin-bottom: 30px; }
    .timeline-nav ul { display: flex; justify-content: center; border-right: none; border-bottom: 2px solid #e0e0e0; }
    .timeline-nav li.active::before { top: auto; bottom: -11px; left: 50%; transform: translateX(-50%); }
    .timeline-content { padding-left: 0; text-align: center; }
    .content-panel { position: relative; left: auto; display: none; }
    .content-panel.active { display: block; }
    .strength-commitment-grid { grid-template-columns: 1fr; }
}


/* ======================================================= */
/* ======================================================= */
/* ==   【重点修正】新闻列表页样式 - 使用作用域限定   == */
/* ======================================================= */
/* ======================================================= */

/* --- 新闻列表容器样式 --- */
.news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

/* --- 新闻列表项样式（保持.news-item命名，使用作用域限定）--- */
.news-list .news-item {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-list .news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    border-color: transparent;
}

.news-list .news-item .card-link {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 20px;
}

.news-list .news-item .news-image {
    width: 280px;
    flex-shrink: 0;
}

.news-list .news-item .news-image img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.news-list .news-item .news-text h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.news-list .news-item .news-text .news-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.news-list .news-item .news-text p {
    font-size: 15px;
    color: #555;
}

/* ======================================== */
/* ==      新闻详情页 Article 样式       == */
/* ======================================== */

/* 文章主体容器 */
.article-container {
    max-width: 800px; /* 设置文章最佳阅读宽度 */
    margin: 0 auto;
    padding: 60px 20px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* 文章标题 */
.news-article h1 {
    font-size: 2.2rem;
    line-height: 1.4;
    color: #222;
    margin-bottom: 15px;
}

/* 文章元信息（日期、作者、来源） */
.news-article .news-meta {
    display: flex;
    gap: 20px; /* 增加各项之间的间距 */
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* 文章主图 */
.news-article .article-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* 文章正文内容 */
.article-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
}

.article-content p strong {
    color: #000;
}

/* ======================================== */
/* ==   新闻详情页 - 文章底部导航样式  == */
/* ======================================== */

/* 文章结尾的容器 */
.article-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* "返回列表"按钮的容器（用于居中） */
.return-link-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

/* "返回列表"按钮的样式 */
.return-link-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #ccc;
    color: #555;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.return-link-btn:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
    color: #333;
}

/* "上一篇/下一篇"导航的容器 */
.article-pagination {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
}

.article-pagination a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.article-pagination a:hover {
    border-bottom-color: #333;
}

/* 响应式：新闻列表在手机端调整 */
@media (max-width: 768px) {
    .news-list .news-item .card-link {
        flex-direction: column;
    }
    .news-list .news-item .news-image {
        width: 100%;
        height: 200px;
    }
}

/* ==========================================================================
   Page Header Section (新增)
   ========================================================================== */
.page-header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to right, #e8f5e9, #c8e6c9);
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.page-header h1 {
    font-size: 2.8em;
    color: var(--primary-color-dark);
    margin-bottom: 15px;
}

.page-header p {
    font-size: 1.1em;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

/* ==========================================================================
   Service Page Styles (新增)
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.service-item {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid var(--primary-color);
}

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-hover-shadow);
}

/* ==========================================================================
   Contact Page Styles (新增)
   ========================================================================== */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    margin-bottom: 50px;
}

.contact-info, .contact-form-section {
    padding: 20px;
}

.contact-info h2 {
    font-size: 2em;
    color: var(--primary-color-dark);
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--primary-color-light);
    padding-bottom: 10px;
}

.contact-info p {
    color: var(--text-color-light);
    margin-bottom: 30px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    color: var(--text-color-dark);
}

.contact-info-list i {
    font-size: 1.5em;
    color: var(--primary-color);
    margin-right: 20px;
    margin-top: 5px;
    width: 30px;
    text-align: center;
}

.contact-info-list .info-text strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.contact-form-section h2 {
    font-size: 2em;
    color: var(--primary-color-dark);
    margin-top: 0;
    margin-bottom: 30px;
}

.map-section {
    text-align: center;
    margin-bottom: 50px;
}

.map-section h2 {
    font-size: 2.5em;
    color: var(--primary-color-dark);
    margin-bottom: 30px;
}

#map-placeholder {
    width: 100%;
    height: 450px;
    background-color: #e9e9e9;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 1.2em;
    border: 1px solid #ddd;
}

/* ==========================================================================
   Success Message Modal (新增)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 450px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-overlay.show .modal-content {
    transform: scale(1);
}

.modal-icon {
    font-size: 4em;
    color: #00796b;
    margin-bottom: 20px;
}

.modal-content h2 {
    color: #333;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content p {
    color: #666;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
}

.modal-close-btn {
    background-color: #00796b;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.modal-close-btn:hover {
    background-color: #004d40;
    transform: translateY(-2px);
}

/* 联系页面响应式 */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
}

/* ==========================================================================
   产品页面专用样式 - 从 style-product.css 整合
   ========================================================================== */

/* --- 1. 产品列表页专用样式 (使用作用域限定) --- */
.page-product-list .product-hero-banner {
    padding: 180px 0;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/20201031154818117.jpg');
    background-size: cover;
    background-position: center;
}

.page-product-list .product-hero-banner h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
}

.page-product-list .product-hero-banner p {
    font-size: 1.5rem;
    margin: 10px 0 0 0;
    position: relative;
    display: inline-block;
}

.page-product-list .product-hero-banner p::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #f39c12; 
}

.page-product-list .product-subnav-bar {
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 20px;
}

.page-product-list .subnav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    max-width: 1200px; 
    width: 100%;
    margin: 0 auto;
}

.page-product-list .subnav-links a {
    color: #555;
    text-decoration: none;
    padding: 20px 15px;
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease;
}

.page-product-list .subnav-links a:hover {
    color: #007bff;
}

.page-product-list .subnav-links a.active {
    color: #007bff;
    font-weight: bold;
}

.page-product-list .subnav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #007bff;
}

/* --- 2. 产品详情页专用样式 (使用作用域限定) --- */
.page-product-detail .product-subnav-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #e9e9e9;
    padding: 0 20px;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

.page-product-detail .subnav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
}

.page-product-detail .product-top-section,
.page-product-detail .product-tabs-section {
    max-width: 1600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.page-product-detail .product-top-section {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 左侧图片区 */
.page-product-detail .product-gallery {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex: 0 0 45%; 
    box-sizing: border-box;
}

.page-product-detail .main-image {
    margin-bottom: 15px;
}

.page-product-detail .main-image img {
    width: 100%;
    max-height: 500px;
    height: auto; 
    display: block; 
    object-fit: contain;
    margin: 0 auto;
}

/* 缩略图样式 */
.page-product-detail .thumbnail-images {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.page-product-detail .thumb {
    width: 80px;
    height: 80px;
    border: 2px solid #26a69a;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s;
}

.page-product-detail .thumb.active {
    border-color: #d9000d;
}

.page-product-detail .thumb:hover {
    border-color: #999;
}

.page-product-detail .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右侧文字介绍区 */
.page-product-detail .product-info {
    flex: 1;
    padding: 20px;
}

.page-product-detail .product-title {
    font-size: 28px;
    margin-top: 0;
}

.page-product-detail .info-block h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.page-product-detail .info-block p,
.page-product-detail .info-block ul {
    font-size: 15px;
    line-height: 1.9;
    color: #555;
}

.page-product-detail .info-block ul {
    padding-left: 20px;
}

.page-product-detail .info-block:not(:first-child) {
    margin-top: 40px;
}

.page-product-detail .back-button {
    display: inline-block;
    background-color: transparent;
    border: 1px solid #0056b3;
    color: #0056b3;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.page-product-detail .back-button:hover {
    background-color: #0056b3;
    color: #ffffff;
}

/* Tab切换区域 */
.page-product-detail .product-tabs-section {
    margin: 40px auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.page-product-detail .tab-nav {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 30px;
    display: flex;
}

.page-product-detail .tab-content {
    display: none;
    font-size: 15px;
    line-height: 1.9;
    color: #444;
}

.page-product-detail .tab-content.active {
    display: block;
}

.page-product-detail .tab-content ol {
    padding-left: 20px;
}

.page-product-detail .tab-link {
    background-color: transparent;
    border: none;
    color: #555;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 0;
    margin-right: 40px;
    border-radius: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-product-detail .tab-link:hover {
    color: #004D40;
}

.page-product-detail .tab-link.active {
    background-color: #004D40;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* --- 3. 参数表格样式 (通用) --- */
.param-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

.param-table th,
.param-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    white-space: nowrap;
}

.param-table thead {
    background-color: #f7f7f7;
    font-weight: bold;
}

.param-table tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}