/* ==================== 全局样式重置 ==================== */
/* 清除所有元素的默认margin和padding，设置box-sizing为border-box */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素动态字体大小，配合 responsive.js 实现跨分辨率自适应 */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    display: none;
}

/* 北欧清新风：全站图片柔和滤镜 */
img {
    filter: saturate(0.9) brightness(1.04) contrast(0.96);
    transition: filter 0.4s ease;
}
.product-card:hover img,
.project-card:hover img,
.service-card:hover img,
.news-image:hover img,
.product-images img:hover,
.product-detail-images img:hover,
.tab-content img:hover,
.carousel-item:hover img {
    filter: saturate(1) brightness(1) contrast(1);
}

/* ==================== 全局字体设置 ==================== */
/* 使用 clamp() 实现流体排版，字体大小随视口平滑缩放 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #2d4a36;
    background-color: #f5f9f6;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
}

/* 文本首行缩进 */
p {
    text-indent: 2em;
}

/* 标题默认字号和颜色 */
h1 {
    font-size: 20px;
    color: #fff;
}

h2 {
    font-size: 18px;
    color: #fff;
}

/* 新闻标题样式 */
.news-item h3 a {
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

.news-item h3 a:hover {
    color: #4a7d57 !important;
    text-shadow: 0 0 5px rgba(107, 163, 119, 0.5) !important;
    transform: translateY(-2px) !important;
    display: inline-block !important;
}

.news-detail h2,
.news-detail .detail-content h1 {
    color: #2d4a36 !important;
}

h3 {
    font-size: 16px;
    color: #2d4a36;
}

/* ==================== 容器样式 ==================== */
/* 页面内容容器的宽度和居中样式，支持超宽屏 */
.container {
    width: 100%;
    max-width: min(100%, 1400px);
    margin: 0 auto;
    padding: 0 clamp(16px, 2vw, 100px);
}

/* 中等屏幕及以上 */
@media (min-width: 768px) {
    .container {
        padding: 0 clamp(20px, 3vw, 60px);
    }
}

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        padding: 0 clamp(30px, 4vw, 80px);
    }
}

/* 超大屏幕 */
@media (min-width: 1600px) {
    .container {
        padding: 0 clamp(40px, 5vw, 120px);
    }
}

/* 超宽屏支持 (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
        padding: 0 clamp(60px, 6vw, 160px);
    }
}

/* ==================== 导航栏样式 ==================== */
/* 顶部导航栏的容器样式 */
.navbar {
    background: #4a7d57;
    color: #fff;
    padding: clamp(10px, 1vw, 20px) 0;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.2), inset 0 0 30px rgba(74, 125, 87, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(74, 125, 87, 0.3);
}

/* 导航栏内部容器使用flex布局 */
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==================== Logo样式 ==================== */
/* Logo容器使用flex布局，logo图标和文字水平排列 */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    min-width: 0;
}

.logo-text {
    position: relative;
    height: 50px;
    min-width: 390px;
    max-width: 390px;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

/* Logo图片尺寸 */
.logo-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(168, 216, 185, 0.6));
    animation: logoGlow 2s ease-in-out infinite alternate;
}

/* Logo文字样式 */
.logo-text h1 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: clamp(16px, 1.5vw, 28px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.logo-text p {
    position: absolute;
    top: 32px;
    left: 0;
    font-size: clamp(11px, 0.9vw, 16px);
    opacity: 0.95;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    text-indent: 0;
}

/* Logo响应式：移动端改为自然流式排列，公司名可换行完整显示，英文名显示在下方 */
@media (max-width: 768px) {
    .logo {
        flex-shrink: 1;
    }
    .logo-text {
        min-width: 0;
        max-width: 100%;
        height: auto;
        white-space: normal;
        overflow: visible;
    }
    .logo-text h1 {
        position: static;
        font-size: 15px;
        line-height: 1.3;
        white-space: normal;
    }
    .logo-text p {
        position: static;
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .logo {
        gap: 10px;
    }
    .logo-text h1 {
        font-size: 14px;
    }
    .logo-text p {
        font-size: 9px;
    }
}

/* ==================== 导航菜单 ==================== */
/* 导航菜单列表样式 */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: visible;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    padding-left: 90px;
}

/* 导航菜单链接样式 */
.nav-menu li {
    position: relative;
    perspective: 1000px;
    flex-shrink: 0;
}

.nav-menu li a {
    color: #eaf5ee;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 7px 16px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* "更多"下拉菜单项 */
.nav-more-wrapper {
    position: relative;
    flex-shrink: 0;
}

.nav-more-wrapper > a {
    cursor: pointer;
}

.nav-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #4a7d57;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 6px;
    margin: 0;
    min-width: 130px;
    display: none;
    z-index: 1002;
    border: 1px solid rgba(255, 255, 255, 0.2);
    list-style: none;
}

/* 悬停/键盘聚焦/触屏点击(.open)均可展开"更多"下拉 */
.nav-more-wrapper:hover .nav-more-dropdown,
.nav-more-wrapper.open .nav-more-dropdown,
.nav-more-wrapper:focus-within .nav-more-dropdown {
    display: block;
}

/* 填补触发器与面板之间的间隙，避免鼠标下移时菜单消失 */
.nav-more-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nav-more-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
    perspective: none;
}

.nav-more-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 20px;
    min-width: 80px;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 500;
    color: #eaf5ee;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-bottom: 6px;
}

.nav-more-dropdown li:last-child a {
    margin-bottom: 0;
}

.nav-more-dropdown li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* 栏目分类下拉（产品中心/工程案例/服务与支持） */
.nav-has-dropdown {
    position: relative;
}

/* 下拉箭头 */
.nav-has-dropdown > a .nav-caret {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.nav-has-dropdown:hover > a .nav-caret,
.nav-has-dropdown.open > a .nav-caret,
.nav-has-dropdown:focus-within > a .nav-caret {
    transform: rotate(180deg);
}

/* 触控/点击展开热区，覆盖在箭头位置，不影响主按钮跳转 */
.nav-caret-hit {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
}

/* 分类下拉面板 */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #4a7d57;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 6px;
    margin: 0;
    list-style: none;
    min-width: 150px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1002;
}

/* 填补触发器与面板之间的间隙，避免鼠标下移时菜单消失 */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* hover 为主通道，.open / focus-within 为触控与键盘兜底 */
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
    display: flex;
}

.nav-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
    perspective: none;
    flex-shrink: 0;
}

/* 下拉内分类按钮：与主导航按钮同款胶囊样式 */
.nav-dropdown li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* 栏目被折叠进"更多"后，子分类在更多面板内静态展开 */
.nav-more-dropdown .nav-has-dropdown > a .nav-caret,
.nav-more-dropdown .nav-caret-hit,
.nav-more-dropdown .nav-dropdown::before {
    display: none;
}

.nav-more-dropdown .nav-has-dropdown .nav-dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 2px;
    margin: 2px 0 6px;
}

/* 导航菜单链接悬停和激活状态 */
.nav-menu li a:hover,
.nav-menu li a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* 导航菜单链接下划线动画效果 */
.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

/* 悬停时显示下划线 */
.nav-menu li a:hover::after,
.nav-menu li a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* 导航按钮发光效果 */
.nav-menu li a::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(168, 216, 185, 0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-menu li a:hover::before,
.nav-menu li a.active::before {
    opacity: 1;
}

/* 导航按钮全息效果 */
.nav-menu li a span {
    position: relative;
    z-index: 1;
    display: inline-block;
}

/* 导航按钮点击效果 */
.nav-menu li a:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(168, 216, 185, 0.6);
}

/* Logo发光动画 */
@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(168, 216, 185, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(168, 216, 185, 0.7));
    }
}

/* 发光动画 */
@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* ==================== 移动端汉堡菜单 ==================== */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
    border-radius: 5px;
    background: rgba(10, 10, 30, 0.8);
    border: 1px solid rgba(168, 216, 185, 0.2);
    box-shadow: 0 0 10px rgba(168, 216, 185, 0.1);
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, #a8d8b9, #4a7d57);
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(168, 216, 185, 0.8);
}

/* 汉堡菜单激活状态 */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: linear-gradient(90deg, #4a7d57, #a8d8b9);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
    background: linear-gradient(90deg, #4a7d57, #a8d8b9);
}

/* 移动端导航菜单样式 */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: linear-gradient(135deg, #4a7d57, #3d6b4d);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        transition: right 0.3s ease;
        z-index: 1000;
        box-shadow: -5px 0 20px rgba(168, 216, 185, 0.2);
        border-left: 1px solid rgba(168, 216, 185, 0.3);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .hamburger {
        display: flex;
    }

    /* 移动端分类下拉：静态内嵌，点击箭头展开 */
    .nav-menu .nav-has-dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-menu .nav-dropdown {
        position: static;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-width: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 10px;
    }

    .nav-menu .nav-dropdown::before {
        display: none;
    }

    .nav-menu .nav-has-dropdown.open .nav-dropdown {
        display: flex;
    }

    .nav-menu .nav-dropdown li a {
        width: auto;
        min-width: 150px;
        font-size: 12px;
        padding: 6px 18px;
    }

    /* 移动端使用主按钮"首次点按展开、再次点按跳转"，隐藏独立箭头热区 */
    .nav-menu .nav-caret-hit {
        display: none;
    }
}

/* 轮播图样式 */
.carousel {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-item.active {
    opacity: 1;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 30px;
}

.carousel-caption h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.carousel-caption p {
    font-size: 16px;
    max-width: 800px;
}

/* 轮播指示器 */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background-color: #fff;
    transform: scale(1.2);
}

/* 页面标题 */
.page-header {
    background-color: #4a7d57 !important;
    color: #fff;
    min-height: 200px !important;
    padding: 60px 0 !important;
    text-align: center;
    box-sizing: border-box;
}

.page-header .container {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    text-align: center;
}

.page-header h1 {
    font-size: clamp(20px, 2.5vw, 36px);
    margin: 0 0 12px 0;
    text-align: center;
    width: 100%;
}

.page-header p {
    font-size: clamp(14px, 1.2vw, 18px);
    opacity: 0.95;
    margin: 0;
    text-align: center;
    width: 100%;
}

/* 按钮样式 */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #548c62 0%, #4a7d57 50%, #3f6c4a 100%);
    color: #fff;
    padding: clamp(8px, 0.8vw, 12px) clamp(16px, 1.5vw, 24px);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    text-align: center !important;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow:
        0 4px 6px rgba(45, 74, 54, 0.25),
        0 2px 4px rgba(45, 74, 54, 0.15),
        0 0 14px rgba(168, 216, 185, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 新闻详情页返回按钮样式 */
.news-detail .btn {
    min-height: 40px;
    height: 40px;
    padding: 0 28px;
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
}

/* 产品详情页返回按钮样式 */
.product-detail .btn {
    min-height: 40px;
    height: 40px;
    padding: 0 28px;
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center !important;
}

.btn:hover {
    background: linear-gradient(180deg, #5c986b 0%, #4d825a 50%, #41704c 100%);
    transform: translateY(-3px);
    box-shadow:
        0 8px 14px rgba(45, 74, 54, 0.32),
        0 4px 8px rgba(45, 74, 54, 0.2),
        0 0 28px rgba(168, 216, 185, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn:active {
    background: linear-gradient(180deg, #3f6c4a 0%, #3a6544 50%, #355e3f 100%);
    transform: translateY(1px);
    box-shadow:
        0 2px 4px rgba(45, 74, 54, 0.25),
        0 1px 2px rgba(45, 74, 54, 0.18),
        0 0 10px rgba(168, 216, 185, 0.3),
        inset 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease;
}

/* 按钮发光效果 */
.btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(168, 216, 185, 0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn:hover::before {
    opacity: 1;
}

.more-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 200px;
    margin: 30px auto 0;
}

/* 公司简介 */
.company-intro {
    padding: clamp(30px, 4vw, 80px) 0;
    background-color: #fff;
    border-bottom: 1px solid #4a7d57;
    text-align: center;
}

.company-intro .container {
    max-width: min(100%, 1400px);
}

.company-intro h2 {
    font-size: clamp(20px, 2vw, 32px);
    margin-bottom: clamp(20px, 3vw, 40px);
    color: #2d4a36;
    text-align: center;
}

.company-intro p {
    font-size: 14px;
    margin: 0 0 16px;
    color: #2d4a36;
    text-align: left;
    line-height: 1.6;
}

/* 产品展示 */
.product-showcase {
    display: none;
    padding: 60px 0;
    background-color: #fff;
    border-bottom: 1px solid #4a7d57;
}
.product-showcase.visible {
    display: block;
}

.product-showcase h2 {
    font-size: 28px;
    margin-bottom: 40px;
    color: #2d4a36;
    text-align: center;
}

/* 产品轮播包装器（包含轮播+按钮） */
.product-carousel-wrapper {
    margin-bottom: 20px;
}

/* 产品轮播容器 - 已改为 grid 布局，移除轮播相关属性 */
.product-carousel-container {
    position: relative;
    height: auto;
}

/* 产品轮播包装器内的"查看更多产品"按钮 */
.product-carousel-wrapper .more-btn {
    display: block;
    margin: 15px auto 0;
    text-align: center;
}

/* 产品轮播 - 已改为 grid 布局，display:block 让内部 grid 占满宽度 */
.product-carousel {
    display: block;
    position: relative;
}

/* 产品网格 - 产品中心页面 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
    align-items: stretch;
}

/* 小屏幕单列 */
@media (max-width: 767px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* 中等屏幕显示3列 */
@media (min-width: 768px) and (max-width: 1199px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏幕显示4列 */
@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 首页产品轮播网格 - 与工程案例保持一致的 grid 布局 */
.product-grid.home-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 30px;
}

/* 响应式断点 - 与工程案例一致 */
@media (max-width: 1199px) {
    .product-grid.home-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid.home-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-grid.home-product-grid {
        grid-template-columns: 1fr;
    }
}

/* 首页产品卡片 - 由 grid 控制宽度，移除 flex 相关属性 */
.home-product-grid .product-card {
    min-width: 0;
}

/* 产品卡片 - 产品中心页面 */
.product-card {
    background: #f5f9f6;
    border: 1px solid #d4e5d8;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
}

.product-card:hover {
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.2);
}

/* 产品卡片悬停效果 */

/* 产品图片样式 - 恢复原始固定高度+裁剪填充 */
.product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
    background: #f5f8f6;
    display: block;
}

/* 产品标题样式 */
.product-card h3 {
    font-size: 18px;
    margin: 15px;
    color: #2d4a36;
    flex-shrink: 0;
}

/* 产品描述样式 */
.product-card p {
    font-size: 14px;
    margin: 0 15px 15px;
    color: #2d4a36;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 4;
    -moz-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

/* 产品卡片中的按钮样式 */
.product-card .btn {
    flex-shrink: 0;
}

/* ==================== 服务与支持预览 ==================== */
.services-preview {
    padding: clamp(30px, 4vw, 80px) 0;
    background-color: #fff;
    border-bottom: 1px solid #4a7d57;
    display: none;
}

.services-preview.visible {
    display: block;
}

.services-preview h2 {
    font-size: clamp(20px, 2vw, 32px);
    margin-bottom: clamp(20px, 3vw, 40px);
    color: #2d4a36;
    text-align: center;
}

/* 服务轮播容器 - 已改为 grid 布局，移除轮播相关属性 */
.services-carousel-container {
    position: relative;
    margin-bottom: 20px;
    height: auto;
}

.services-carousel {
    display: block;
    position: relative;
}

/* 服务与支持网格 - 与工程案例保持一致的 grid 布局 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 30px;
}

/* 响应式断点 - 与工程案例一致 */
@media (max-width: 1199px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

.service-preview-card {
    background: #f5f9f6;
    border: 1px solid #d4e5d8;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
}

.service-preview-card:hover {
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.2);
}

/* 服务卡片图片区域 - 与产品卡片img等高 */
.service-card-img {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #eaf5ee, #d4e5d8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-card-icon {
    font-size: 72px;
    line-height: 1;
}

/* 服务卡片标题 - 与产品卡片h3一致 */
.service-preview-card h3 {
    font-size: 18px;
    margin: 15px;
    color: #2d4a36;
    flex-shrink: 0;
}

/* 服务卡片描述 - 与产品卡片p一致 */
.service-preview-card p {
    font-size: 14px;
    margin: 0 15px;
    color: #2d4a36;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

/* 服务卡片按钮 - 与产品卡片.btn一致 */
.service-preview-card .btn {
    flex-shrink: 0;
}

.services-preview .more-btn {
    display: block;
    margin: 0 auto;
}

/* ==================== 新闻资讯 ====================
/* 新闻资讯区块样式 */
.news-section {
    padding: 60px 0;
    background-color: #fff;
    border-bottom: 1px solid #4a7d57;
}

/* 新闻资讯标题样式 */
.news-section h2 {
    font-size: 28px;
    margin-bottom: 40px;
    color: #2d4a36;
    text-align: center;
}

/* ==================== 新闻列表 ====================
/* 新闻列表容器样式 */
.news-list {
    margin: 0 auto 30px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* 企业简介内容容器 - 宽度与.news-list严格保持一致 */
#intro-content {
    margin: 0 auto 30px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0;
}

/* 防御性规则：企业简介内部任何元素都撑满全宽，防止后台注入内联样式wrapper导致变窄 */
#intro-content,
#intro-content > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 子段落保持正常排版（仅撑满，不做其他样式覆盖） */
#intro-content p {
    width: 100% !important;
    max-width: 100% !important;
}

/* 新闻项样式 */
.news-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

/* 最后一个新闻项的特殊样式（移除底部边框） */
.news-item:last-child {
    border-bottom: none;
}



/* 新闻日期样式 */
.news-date {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
}

/* 新闻详情页样式 */
.news-detail {
    padding: 60px 0;
    background-color: #f5f9f6;
}

.news-detail .detail-content {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.news-detail h2,
.news-detail .detail-content h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2d4a36 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-shadow: 0 0 5px rgba(74, 125, 87, 0.5) !important;
}

.news-detail .news-date {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
}

.news-title-center {
    text-align: center !important;
}

.news-detail .detail-content h2.news-title-center {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

.news-detail .news-content {
    font-size: 16px;
    line-height: 1.8;
    color: #2d4a36;
    margin-bottom: 30px;
}

.news-detail .news-content p {
    margin-bottom: 20px;
    text-align: justify;
    text-indent: 2em;
}

.news-detail .news-image {
    margin: 30px 0;
    text-align: center;
    width: 100%;
}

.news-detail .news-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-detail .news-share {
    margin: 40px 0;
    padding: 20px;
    background-color: #eaf5ee;
    border-radius: 8px;
}

.news-detail .news-share h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #2d4a36;
}

.news-detail .share-buttons {
    display: flex;
    gap: 15px;
}

.news-detail .share-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f0f0f0;
    color: #2d4a36;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.news-detail .share-btn:hover {
    background-color: #e0e0e0;
    color: #2d4a36;
}

.news-detail .news-nav {
    text-align: center;
    margin-top: 30px;
}

/* 新闻内容摘要样式 */
.news-item p {
    font-size: 14px;
    color: #2d4a36;
    text-indent: 2em;
}

/* ==================== 页脚 ====================
/* 页脚容器样式 */
.footer {
    background-color: #4a7d57;
    color: #fff;
    padding: 60px 0 30px;
}

/* 页脚内容网格布局 */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

/* 大屏幕保持3列 */
@media (min-width: 1200px) {
    .footer-content {
        grid-template-columns: 40% 30% 30%;
    }
}

/* 中等屏幕2列 */
@media (min-width: 768px) and (max-width: 1199px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 页脚信息区块标题样式 */
.footer-info h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #fff;
    text-align: left;
}

/* 页脚信息区块文本样式 */
.footer-info p {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.95;
    text-align: left;
    text-indent: 0;
}

/* 页脚链接区块标题样式 */
.footer-links h4 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
    text-align: left;
}

/* 页脚链接列表样式 */
.footer-links ul {
    list-style: none;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
}

/* 页脚链接列表项样式 */
.footer-links ul li {
    margin-bottom: 5px;
}

/* 页脚链接样式 */
.footer-links ul li a {
    color: #fff;
    text-decoration: none;
    opacity: 0.95;
    line-height: 1.2 !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    display: block !important;
    height: auto !important;
    min-height: 18px !important;
    transition: opacity 0.3s ease;
}

/* 页脚链接悬停效果 */
.footer-links ul li a:hover {
    opacity: 1;
}

/* 页脚底部版权信息样式 */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    opacity: 1;
}

.footer-bottom a {
    color: #fff;
    opacity: 1;
}

/* ==================== 联系我们 ====================
/* 联系我们区块样式 */
.contact-section {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 联系我们内容网格布局 */
.contact-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* 联系信息和表单标题样式 */
.contact-info h2,
.contact-form h2 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #2d4a36;
}

/* 联系信息列表样式 */
.contact-info ul {
    list-style: none;
}

/* 联系信息列表项样式 */
.contact-info ul li {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

/* 联系信息标签样式 */
.contact-info ul li strong {
    color: #2d4a36;
    margin-bottom: 5px;
}

/* ==================== 公司位置地图 ==================== */
/* 地图区块整体样式 */
.map-section {
    padding: 40px 0 60px;
    background-color: #f5f9f6;
}

/* 地图区块标题样式 */
.map-section h2 {
    font-size: 24px;
    margin-bottom: 24px;
    color: #2d4a36;
    text-align: center;
}

/* 地图容器样式 */
.map-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(45, 74, 54, 0.1);
    background: #fff;
    min-height: 360px;
}

/* 地图嵌入元素响应式适配 */
.map-container iframe,
.map-container embed {
    width: 100% !important;
    height: 450px !important;
    max-width: 100% !important;
    border: 0;
    display: block;
}

/* 移动端地图高度调整 */
@media (max-width: 768px) {
    .map-container iframe,
    .map-container embed {
        height: 320px !important;
    }
}

/* ==================== 联系表单 ====================
/* 联系表单样式 */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 表单组样式 */
.form-group {
    display: flex;
    flex-direction: column;
}

/* 表单标签样式 */
.form-group label {
    margin-bottom: 5px;
    font-weight: 500;
    color: #2d4a36;
}

/* 表单输入字段样式 */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #2d4a36;
}

/* 文本输入框下拉功能 */
input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #4a7d57 50%),
                      linear-gradient(135deg, #4a7d57 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
                        calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="text"]:hover {
    background-color: #eaf5ee;
}

input[type="text"]:focus {
    outline: none;
    border-color: #4a7d57;
    box-shadow: 0 0 0 2px rgba(74, 125, 87, 0.1);
    background-image: linear-gradient(45deg, transparent 50%, #4a7d57 50%),
                      linear-gradient(135deg, #4a7d57 50%, transparent 50%);
}

/* 下拉菜单样式 */
.text-input-dropdown {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

/* 下拉选项样式 */
.dropdown-option {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 下拉选项悬停效果 */
.dropdown-option:hover {
    background-color: #f0f0f0;
    color: #2d4a36;
}

/* 表单输入字段聚焦效果 */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4a7d57;
    box-shadow: 0 0 0 2px rgba(74, 125, 87, 0.1);
}

/* ==================== 企业简介 ====================
/* 企业简介区块样式 */
.about-section {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 企业简介内容样式 */
.about-content {
    margin-bottom: 50px;
}

/* 企业简介标题样式 */
.about-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #2d4a36;
    text-align: left;
    padding-bottom: 15px;
    border-bottom: 2px solid #4a7d57;
}

/* 企业简介文本样式 */
.about-content p {
    font-size: 16px;
    margin-bottom: 15px;
    color: #2d4a36;
    text-indent: 2em;
}

/* ==================== 时间线 ====================
/* 时间线容器样式 */
.timeline {
    list-style: none;
    position: relative;
    padding-left: 30px;
}

/* 时间线垂直线样式 */
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #4a7d57;
}

/* 时间线项目样式 */
.timeline li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 20px;
}

/* 时间线项目圆点样式 */
.timeline li::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #4a7d57;
}

/* 时间线年份样式 */
.timeline .year {
    font-weight: 700;
    color: #2d4a36;
    margin-bottom: 5px;
    display: block;
}

/* ==================== 企业文化 ====================
/* 企业文化网格布局 */
.culture-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* 企业文化项目样式 */
.culture-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* 企业文化项目内容样式 */
.culture-item p {
    text-indent: 2em;
}

/* 企业文化项目标题样式 */
.culture-item h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #2d4a36;
}

/* ==================== 荣誉资质 ====================
/* 荣誉资质网格布局 - 每行固定4个 */
.certifications {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 荣誉资质项目样式 */
.cert-item {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 荣誉资质图片包装层 */
.cert-item .cert-image-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f5f8f6;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* 荣誉资质图片 */
.cert-item .cert-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

/* 荣誉资质项目标题 - 固定在底部 */
.cert-item h3 {
    font-size: 16px;
    color: #2d4a36;
    flex-shrink: 0;
    margin-top: auto;
}

/* 图片加载失败时的占位图样式 */
.cert-item .cert-image.broken {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f0ea 0%, #c8ddd0 100%);
    position: relative;
}

.cert-item .cert-image.broken::before {
    content: '📋';
    font-size: 60px;
    opacity: 0.5;
    position: absolute;
}

.cert-item .cert-image.broken::after {
    content: attr(data-name);
    position: absolute;
    bottom: 15px;
    left: 10px;
    right: 10px;
    text-align: center;
    font-size: 14px;
    color: #5a7a63;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.7);
    padding: 6px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* 无图片时的占位样式 */
.cert-item.no-image::before {
    content: '📋';
    font-size: 60px;
    opacity: 0.4;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.cert-item.no-image {
    background: linear-gradient(135deg, #f0f5f2 0%, #e0ece4 100%);
}

/* 荣誉资质项目标题样式 */
.cert-item h3 {
    font-size: 16px;
    color: #2d4a36;
    flex-shrink: 0;
}

/* 响应式：小屏幕每行2个 */
@media (max-width: 768px) {
    .certifications {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 响应式：超小屏幕每行1个 */
@media (max-width: 480px) {
    .certifications {
        grid-template-columns: 1fr;
    }
}

/* ==================== 产品详情 ====================
/* 产品详情区块样式 */
.product-showcase {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 产品头部样式 */
.product-header {
    margin-bottom: 30px;
}

.product-header h1 {
    font-size: 32px;
    color: #2d4a36;
    margin-bottom: 10px;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
}

/* 产品代码样式 */
.product-code {
    font-size: 16px;
    color: #2d4a36;
    margin-bottom: 20px;
}

/* 产品内容布局 */
.product-content {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

/* 左侧产品侧边栏 */
.product-sidebar {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-width: 0;
}

/* 产品详情响应式布局 */
@media (max-width: 992px) {
    .product-content {
        flex-direction: column;
    }
    
    .product-sidebar {
        width: 100%;
        order: 2;
    }
    
    .product-main {
        order: 1;
    }
}

@media (max-width: 768px) {
    .product-header h1 {
        font-size: 24px;
    }
}

/* 右侧产品主内容 */
.product-main {
    flex: 2;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 0;
}

/* 产品图片样式 */
.product-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: contain;
    margin-bottom: 20px;
}

/* 多图片展示样式 */
.product-images {
    position: relative;
}

.product-images .main-image {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-images .thumbnail-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
}

.product-images .thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.product-images .thumbnail:hover {
    border-color: #4a7d57;
    transform: scale(1.05);
}

.product-images .thumbnail.active {
    border-color: #4a7d57;
    box-shadow: 0 0 0 2px rgba(74, 125, 87, 0.3);
}

/* 产品详情标签页图片样式 */
.product-detail-images {
    margin-bottom: 20px;
}

.product-detail-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 标签页内容中的图片样式 */
.tab-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 产品描述和规格区块样式 */
.product-description,
.product-specs {
    margin-bottom: 25px;
}

/* 产品描述和规格标题样式 */
.product-description h3,
.product-specs h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #2d4a36;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* 产品描述内容 */
.product-description p {
    font-size: 14px;
    line-height: 1.6;
    color: #2d4a36;
    text-indent: 2em;
}

/* 产品规格列表样式 */
.product-specs ul {
    list-style: none;
}

/* 产品规格列表项样式 */
.product-specs ul li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    color: #2d4a36;
}

/* 产品规格列表项前面的圆点样式 */
.product-specs ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #2d4a36;
    font-weight: bold;
}

/* 产品按钮容器 */
.product-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* 标签页容器样式 */
.detail-tabs {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* ==================== 详情标签页 ====================
/* 详情标签页容器样式 */
.detail-tabs {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 标签按钮容器样式 */
.tab-buttons {
    display: flex;
    background-color: #f5f9f6;
    border-bottom: 1px solid #ddd;
}

/* 标签按钮样式 */
.tab-btn {
    padding: 20px 40px;
    border: none;
    background: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    color: #2d4a36;
}

/* 标签按钮悬停和激活状态 */
.tab-btn:hover,
.tab-btn.active {
    color: #2d4a36;
    border-bottom-color: #4a7d57;
    background-color: #fff;
}

/* 标签内容样式 */
.tab-content {
    padding: 30px;
}

/* 标签面板样式（默认隐藏） */
.tab-pane {
    display: none;
}

/* 激活的标签面板样式（显示） */
.tab-pane.active {
    display: block;
    overflow: hidden; /* 隐式创建 BFC，清除内部 float 溢出 */
}

/* 清除浮动（防止 float:left/right 图片溢出容器，内容显示不完整） */
.tab-pane.active::after {
    content: '';
    display: table;
    clear: both;
}

/* 案例详情内容字体 */
.product-detail .tab-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

.product-detail .tab-content p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 标签面板标题样式 */
.tab-pane h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #2d4a36;
}

/* 标签面板段落样式 */
    .tab-pane p {
        margin-bottom: 15px;
        color: #2d4a36;
        text-indent: 0;
        white-space: normal;
    }
    
    /* 标签面板中的文本颜色 */
    .tab-pane * {
        color: #2d4a36 !important;
    }

/* ==================== 新闻详情 ====================
/* 新闻详情区块样式 */
.news-detail {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 新闻标题样式 */
.detail-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #2d4a36;
}

/* 新闻日期样式 */
.news-date {
    font-size: 14px;
    color: #999;
    margin-bottom: 30px;
}

/* 新闻内容样式 */
.news-content {
    margin-bottom: 30px;
}

/* 新闻内容段落样式 */
.news-content p {
    margin-bottom: 15px;
    line-height: 1.8;
    color: #2d4a36;
    text-indent: 2em;
}

/* 新闻分享区块样式 */
.news-share {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

/* 新闻分享标题样式 */
.news-share h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #2d4a36;
}

/* 分享按钮容器样式 */
.share-buttons {
    display: flex;
    gap: 10px;
}

/* 分享按钮样式 - 浅色立体按钮 */
.share-btn {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9f6 50%, #ecf4ee 100%);
    color: #2d4a36;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px solid #cfe0d4;
    box-shadow:
        0 3px 5px rgba(45, 74, 54, 0.12),
        0 1px 3px rgba(45, 74, 54, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 分享按钮悬停效果 - 切换为主题立体按钮 */
.share-btn:hover {
    background: linear-gradient(180deg, #5c986b 0%, #4d825a 50%, #41704c 100%);
    color: #fff;
    border-color: #3f6c4a;
    transform: translateY(-3px);
    box-shadow:
        0 8px 14px rgba(45, 74, 54, 0.32),
        0 4px 8px rgba(45, 74, 54, 0.2),
        0 0 28px rgba(168, 216, 185, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 分享按钮按下效果 */
.share-btn:active {
    background: linear-gradient(180deg, #3f6c4a 0%, #3a6544 50%, #355e3f 100%);
    color: #fff;
    transform: translateY(1px);
    box-shadow:
        0 2px 4px rgba(45, 74, 54, 0.25),
        0 1px 2px rgba(45, 74, 54, 0.18),
        inset 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease;
}

/* 新闻导航样式（上一篇/下一篇） */
.news-nav {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
}

/* 上一篇/下一篇链接样式 */
.prev-news,
.next-news {
    color: #2d4a36;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

/* 上一篇/下一篇链接悬停效果 */
.prev-news:hover,
.next-news:hover {
    color: #4a7d57;
}

/* ==================== 分页 ====================
/* 分页容器样式 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

/* 分页链接样式 */
.pagination a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #2d4a36;
    transition: all 0.3s ease;
}

/* 分页链接悬停和激活状态 */
.pagination a:hover,
.pagination a.active {
    background-color: #4a7d57;
    color: #fff;
    border-color: #4a7d57;
}

/* ==================== 响应式设计 ====================
/* 平板设备样式（768px及以下） */
@media (max-width: 768px) {
    /* 导航栏 */
    .navbar .container {
        flex-direction: row;
        align-items: center;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: #4a7d57;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right 0.3s ease;
        z-index: 1000;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .hamburger {
        display: flex;
    }

    /* 轮播图 */
    .carousel {
        height: 250px;
    }

    .carousel-caption h2 {
        font-size: 20px;
    }

    .carousel-caption p {
        font-size: 14px;
    }

    /* 产品网格 */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 页面标题 */
    .page-header h1 {
        font-size: 24px;
    }

    .page-header p {
        font-size: 16px;
    }

    /* 联系内容 */
    .contact-content {
        gap: 30px;
    }

    /* 详情内容 */
    .detail-content {
        gap: 30px;
    }
    
    /* 新闻详情 */
    .news-detail .detail-content {
        padding: 20px;
    }
    
    .news-detail h2 {
        font-size: 24px;
    }
    
    /* 标签按钮 */
    .tab-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* 标签内容 */
    .tab-content {
        padding: 20px;
    }
}

/* 平板设备产品中心样式（768px及以下） */
@media (max-width: 768px) {
    /* 产品中心 */
    .products-content {
        flex-direction: column;
    }
    
    .category-menu {
        width: 100%;
        order: 1;
    }
    
    .category-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .category-item {
        margin-bottom: 0;
        /* 与"服务分类"移动端一致：一行2个 */
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        font-size: 13px;
    }

    .product-main {
        order: 2;
    }
}

/* 移动设备样式（480px及以下） */
@media (max-width: 480px) {
    /* 导航菜单 */
    .nav-menu {
        width: 100%;
    }
    
    /* 产品网格 */
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* 分类项与"服务分类"移动端一致：单列排列 */
    .category-item {
        flex: 0 0 100%;
        max-width: 100%;
        font-size: 12px;
    }

    /* 轮播图 */
    .carousel {
        height: 200px;
    }

    .carousel-caption h2 {
        font-size: 18px;
    }

    .carousel-caption p {
        font-size: 12px;
    }

    /* 页脚内容 */
    .footer-content {
        gap: 30px;
    }
    
    /* 公司简介 */
    .company-intro h2 {
        font-size: 24px;
    }

    /* 服务与支持 */
    .services-preview h2 {
        font-size: 24px;
    }

    /* 工程案例预览 */
    .projects-preview h2 {
        font-size: 24px;
    }

    /* 产品展示 */
    .product-showcase h2 {
        font-size: 24px;
    }
    
    /* 新闻资讯 */
    .news-section h2 {
        font-size: 24px;
    }
    
    /* 联系我们 */
    .contact-info h2,
    .contact-form h2 {
        font-size: 20px;
    }
    
    /* 企业简介 */
    .about-content h2 {
        font-size: 20px;
    }
    
    /* 产品详情 */
    .product-info h2 {
        font-size: 16px;
        color: #2d4a36;
    }
    
    /* 新闻详情 */
    .news-detail h2 {
        font-size: 20px;
    }
    
    /* 详情内容 */
    .news-detail .detail-content {
        padding: 15px;
    }
    
    /* 标签按钮 */
    .tab-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    /* 标签内容 */
    .tab-content {
        padding: 15px;
    }
    
    /* 产品内容布局 */
    .product-content {
        flex-direction: column;
    }
    
    /* 左侧产品侧边栏 */
    .product-sidebar {
        width: 100%;
        order: 2;
    }
    
    /* 右侧产品主内容 */
    .product-main {
        order: 1;
    }
    
    /* 产品按钮容器 */
    .product-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==================== 科技感效果 ====================
/* 渐变背景 */
.page-header {
    background: linear-gradient(135deg, #4a7d57, #3d6b4d);
}

/* 卡片悬浮效果 */
.product-card,
.culture-item,
.cert-item {
    position: relative;
    overflow: hidden;
}

/* 卡片发光效果伪元素 */
.product-card::before,
.culture-item::before,
.cert-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    opacity: 0;
}

/* 卡片悬停时显示发光效果 */
.product-card:hover::before,
.culture-item:hover::before,
.cert-item:hover::before {
    opacity: 1;
}

/* 卡片发光动画 */
@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* 按钮发光效果 */
.btn {
    position: relative;
    overflow: hidden;
}

/* 按钮发光效果伪元素 */
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

/* 按钮悬停时显示发光效果 */
.btn:hover::after {
    animation: ripple 1s ease-out;
}

/* 按钮发光动画 */
@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* 导航栏滚动效果 */
.navbar {
    transition: all 0.3s ease;
}

/* 导航栏滚动时的样式 */
.navbar.scrolled {
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==================== 产品中心样式 ==================== */
/* 产品中心区块样式 */
.products-section {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 产品中心内容布局 */
.products-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 当前分类标题样式 */
#current-category {
    color: #2d4a36;
}

/* 分类菜单样式 */
.category-menu {
    background-color: #f5f9f6;
    padding: 20px;
    border-radius: 4px;
}

/* 分类菜单标题样式 */
.category-menu h3 {
    margin-bottom: 20px;
    color: #2d4a36;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 分类菜单列表样式 */
.category-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* 分类菜单项样式 */
.category-item {
    padding: 10px 16px;
    border: 1px solid #d4e5d8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d4a36;
    flex: 0 0 calc(10% - 14.4px);
    text-align: center;
    background: #eaf5ee;
    box-sizing: border-box;
}

/* 分类菜单项悬停效果 */
.category-item:hover {
    background: #4a7d57;
    color: #fff;
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.3);
}

/* 分类菜单项激活状态 */
.category-item.active {
    background: #4a7d57;
    color: #fff;
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.3);
}

/* 产品主内容区域 */
.product-main {
    flex: 2;
    min-width: 0;
}

/* 产品主内容标题样式 */
.product-main h3 {
    margin-bottom: 24px;
    color: #333333;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}



/* ==================== 工程案例样式 ==================== */
/* 工程案例内容布局 */
.projects-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 工程案例主内容区域 */
.project-main {
    flex: 1;
}

/* 工程案例主内容标题样式 */
.project-main h3 {
    margin-bottom: 24px;
    color: #2d4a36;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 工程案例网格样式 */
.project-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
    align-items: stretch;
}

/* 小屏幕单列 */
@media (max-width: 767px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* 中等屏幕显示3列 */
@media (min-width: 768px) and (max-width: 1199px) {
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 大屏幕显示4列 */
@media (min-width: 1200px) {
    .project-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 工程案例卡片样式 */
.project-card {
    background: #f5f9f6;
    border: 1px solid #d4e5d8;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 工程案例卡片悬停效果 */
.project-card:hover {
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.2);
}

/* 工程案例卡片图片样式 - 恢复原始16:9比例+裁剪填充 */
.project-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f8f6;
    display: block;
}

/* 工程案例卡片标题样式 */
.project-card h3 {
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #2d4a36;
    letter-spacing: 0.5px;
    border-top: 1px solid #d4e5d8;
    white-space: normal;
    word-wrap: break-word;
    margin: 0;
    flex-shrink: 0;
}

.project-card h3 a {
    color: #2d4a36;
    text-decoration: none;
}

/* 工程案例卡片描述样式 */
.project-card p {
    font-size: 14px;
    margin: 0 15px 15px;
    color: #2d4a36;
    flex: 1 1 auto;
    max-height: 105px; /* 5行 * 21px行高 */
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* 为工程案例卡片描述添加渐变效果，使截断更加自然 */
.project-card p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, white, transparent);
}

/* 工程案例卡片中的按钮样式 - 固定底部对齐 */
.project-card .btn {
    margin: 0 auto;
    font-size: 14px;
    padding: 8px 16px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    flex-shrink: 0;
}

/* 卡片内容区 - flex column 布局 */
.project-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 卡片底部区域 - 固定在卡片底部 */
.project-card-footer {
    margin-top: auto;
    padding: 0 0 15px;
}

/* 平板设备工程案例样式（768px及以下） */
@media (max-width: 768px) {
    /* 工程案例 */
    .projects-content {
        flex-direction: column;
    }
    
    .category-menu {
        width: 100%;
        order: 1;
    }
    
    .category-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .category-item {
        margin-bottom: 0;
        /* 与"服务分类"移动端一致：一行2个 */
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        font-size: 13px;
    }

    .project-main {
        order: 2;
    }
    
    /* 工程案例网格 */
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 移动设备工程案例样式（480px及以下） */
@media (max-width: 480px) {
    /* 分类项与"服务分类"移动端一致：单列排列 */
    .category-item {
        flex: 0 0 100%;
        max-width: 100%;
        font-size: 12px;
    }

    /* 工程案例网格 */
    .project-grid {
        grid-template-columns: 1fr;
    }
}

/* 产品卡片图片样式 - 恢复原始固定高度+裁剪填充 */
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f8f6;
    display: block;
}

/* 产品卡片内容样式 */
.product-card h3 {
    padding: 20px 20px 10px;
    margin: 0;
    font-size: 18px;
    color: #2d4a36;
    flex-shrink: 0;
}

/* 产品卡片描述样式 */
.product-card p {
    padding: 0 20px 20px;
    margin: 0;
    color: #2d4a36;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-height: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 4;
    -moz-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

/* 产品卡片按钮样式 - 布局专用，颜色/阴影/立体效果继承基础.btn */
.product-card .btn {
    margin: 0 auto 20px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: min(190px, 100%);
    padding: 10px;
    flex-shrink: 0;
}

/* 服务卡片按钮样式 - 布局专用，颜色/阴影/立体效果继承基础.btn */
.service-preview-card .btn {
    margin: 0 auto 20px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: min(190px, 100%);
    padding: 10px;
    flex-shrink: 0;
}

/* 加载更多按钮容器 */
.load-more {
    text-align: center;
    margin-top: 30px;
}

/* 加载更多按钮样式 - 布局专用，颜色/阴影/立体效果继承基础.btn */
.load-more .btn {
    padding: 10px 30px;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* ==================== 工程案例样式 ==================== */
/* 首页工程案例预览区块 */
.projects-preview {
    padding: clamp(30px, 4vw, 80px) 0;
    background-color: #fff;
    border-bottom: 1px solid #4a7d57;
    display: none;
}

.projects-preview.visible {
    display: block;
}

.projects-preview h2 {
    font-size: clamp(20px, 2vw, 32px);
    margin-bottom: clamp(20px, 3vw, 40px);
    color: #2d4a36;
    text-align: center;
}

.projects-preview .project-grid {
    margin-bottom: 30px;
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1199px) {
    .projects-preview .project-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .projects-preview .project-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .projects-preview .project-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 工程案例区块样式 */
.projects-section {
    padding: 60px 0;
    background-color: #f5f9f6;
}

/* 工程案例内容样式 */
.projects-content {
    margin-bottom: 50px;
}



/* 服务与支持样式 */
/* 服务与支持区块样式 */
.support-section {
    padding: 60px 0 120px;
}

/* 服务侧边栏样式 - 水平排列 */
.support-sidebar {
    width: 100%;
    background-color: #eaf5ee;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.support-sidebar h3 {
    color: #2d4a36;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* 服务分类列表 - 水平排列 */
.support-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 服务分类项 */
.support-sidebar .category-item {
    flex: 0 0 calc(20% - 8px);
    max-width: calc(20% - 8px);
    padding: 10px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    color: #2d4a36;
    border: 1px solid #d4e5d8;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
}

/* 服务分类响应式 */
@media (max-width: 1200px) {
    .support-sidebar .category-item {
        flex: 0 0 calc(25% - 7.5px);
        max-width: calc(25% - 7.5px);
    }
}

@media (max-width: 992px) {
    .support-sidebar .category-item {
        flex: 0 0 calc(33.33% - 6.67px);
        max-width: calc(33.33% - 6.67px);
    }
}

@media (max-width: 768px) {
    .support-sidebar .category-item {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .support-sidebar .category-item {
        flex: 0 0 100%;
        max-width: 100%;
        font-size: 12px;
    }
}

.support-sidebar .category-item:hover {
    background: #4a7d57;
    color: #fff;
    border-color: #4a7d57;
    box-shadow: 0 0 15px rgba(74, 125, 87, 0.3);
}

.support-sidebar .category-item.active {
    background: #4a7d57;
    color: #fff;
    border-color: #4a7d57;
    box-shadow: 0 0 15px rgba(74, 125, 87, 0.3);
}

/* 服务内容容器样式 */
.support-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 服务主内容样式 */
.support-main {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 当前分类标题样式 */
#current-category {
    color: #2d4a36;
}

/* 服务主内容标题样式 */
.support-main h3 {
    margin-bottom: 24px;
    color: #2d4a36;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 服务项目列表容器样式 */
.service-list-container {
    margin-bottom: 60px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d4e5d8;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

/* 服务项目列表 */
.service-list {
    width: 100%;
}

/* 服务列表项 */
.service-list-item {
    display: flex !important;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eaf5ee;
    transition: background-color 0.2s;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.service-list-item:hover {
    background-color: #eaf5ee;
}

.service-list-item:last-child {
    border-bottom: none;
}

/* 文件图标 */
.service-list-item .file-icon {
    margin-right: 8px;
    font-size: 16px;
}

/* 服务名称 */
.service-list-item .service-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-list-item .service-name a {
    color: #2d4a36;
    text-decoration: none;
}

.service-list-item .service-name a:hover {
    color: #4a7d57;
    text-decoration: underline;
}

/* 服务时间 */
.service-list-item .service-time {
    width: 160px;
    min-width: 160px;
    text-align: right !important;
    white-space: nowrap;
    color: #666;
    font-size: 14px;
    flex-shrink: 0;
    margin-left: auto;
}



/* 服务卡片样式 */
.service-card {
    background: #f5f9f6;
    border: 1px solid #d4e5d8;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 服务卡片悬停效果 */
.service-card:hover {
    border-color: #4a7d57;
    box-shadow: 0 0 20px rgba(74, 125, 87, 0.2);
}

/* 服务卡片标题样式 */
.service-card h3 {
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #2d4a36;
    letter-spacing: 0.5px;
    border-top: 1px solid #d4e5d8;
    white-space: normal;
    word-wrap: break-word;
    margin: 0;
    flex-shrink: 0;
}

.service-card h3 a {
    color: #2d4a36;
    text-decoration: none;
}

/* 服务详情页返回按钮样式 */
.back-link {
    display: inline-block;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
}

/* 服务卡片描述样式 */
.service-card p {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #2d4a36;
    margin: 0 0 20px 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
}

.service-card .btn {
    margin-top: auto;
    margin-bottom: 16px;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    flex-shrink: 0;
}

/* ==================== 加载动画 ==================== 
/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.company-intro,
.product-showcase,
.news-section,
.about-section,
.contact-section,
.product-detail,
.news-detail {
    animation: fadeIn 0.8s ease-out;
}
/* ==================== 图片预览样式 ==================== */
.image-preview-small {
    display: block;
    margin-top: 10px;
    min-height: 50px;
    padding: 10px;
    background-color: #eaf5ee;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.image-preview-small img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #eee;
    margin: 5px;
}

/* 新闻标题样式 - 优先级最高 */
.news-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
}

/* 新闻标题链接样式 - 优先级最高 */
.news-item h3 a {
    color: #2d4a36 !important;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(74, 125, 87, 0.5);
    font-weight: 700;
    display: inline-block;
}

/* 新闻标题链接悬停效果 - 优先级最高 */
.news-item h3 a:hover {
    color: #4a7d57;
    text-shadow: 0 0 10px rgba(107, 163, 119, 0.8);
    transform: translateY(-2px);
    display: inline-block;
}

/* 新闻详情页标题样式 - 优先级最高 */
.news-detail h2,
.news-detail .detail-content h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2d4a36 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-shadow: 0 0 5px rgba(74, 125, 87, 0.5) !important;
}

/* ==================== 内联样式迁移类 ==================== */

/* 文件上传隐藏 */
.hidden-file-input {
    display: none;
}

/* 错误消息样式 */
.error-message {
    display: none;
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 15px;
}

/* 成功消息样式 */
.success-message {
    display: none;
    color: #27ae60;
    font-size: 14px;
    margin-bottom: 15px;
}

/* 按钮间距 */
.btn-margin-left {
    margin-left: 10px;
}

/* 提示文字样式 */
.hint-text {
    color: #666;
    font-size: 13px;
    margin-bottom: 20px;
}

/* Logo预览图片 */
.logo-preview-img {
    max-width: 200px;
    max-height: 100px;
}

/* 必填标记 */
.required-mark {
    color: red;
}

/* 模态框隐藏 */
.modal-hidden {
    display: none;
}

/* 表单组宽度 - 小 */
.form-group-small {
    flex: 1;
}

/* 表单组宽度 - 大 */
.form-group-large {
    flex: 2;
}

/* 图标类型标签 */
.icon-type-tab {
    font-weight: bold;
}

/* 颜色输入框 */
.color-input-text {
    width: 120px;
}

/* 表单行 */
.form-row-left {
    justify-content: flex-start;
}

/* 表单标签 */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

/* 标签间距 - 上移 */
.label-offset-top {
    margin-top: -15px;
}

/* 颜色输入组间距 */
.color-input-group-spacing {
    margin-top: 24px;
}

/* 输入间距 */
.input-spacing {
    margin-top: 10px;
}

/* 按钮间距 - 上 */
.btn-spacing-top {
    margin-top: 20px;
}

/* 图片预览容器 */
.image-preview-container {
    max-width: 100px;
    max-height: 100px;
}

/* 文件输入框 */
.file-input-style {
    padding: 8px;
}

/* emoji输入框 */
.emoji-input {
    width: 200px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 空状态提示 */
.empty-state {
    color: #666;
    text-align: center;
    padding: 20px;
}

/* 导航图标样式 */
.nav-icon-img {
    max-width: 20px;
    max-height: 20px;
    vertical-align: middle;
    margin-right: 5px;
    filter: drop-shadow(0 0 5px rgba(168, 216, 185, 0.8));
}

/* 导航emoji图标样式 */
.nav-icon-emoji {
    display: inline-block;
    margin-right: 5px;
    filter: drop-shadow(0 0 5px rgba(168, 216, 185, 0.8));
}

/* 服务项目表格样式覆盖 */
.container .support-content .support-main #service-items {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 服务详情页样式 */
.service-detail {
    padding: 60px 0;
}

.service-detail-content {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.service-detail h1 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #2d4a36;
    font-weight: 600;
}

/* 详情页主体：左图右文档 flex 布局 */
.detail-body {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.detail-image-side {
    flex: 0 0 50%;
    max-width: 50%;
}

.detail-image-side img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.detail-doc-side {
    flex: 1 1 auto;
    min-width: 0;
}

/* 只有文档没有图片时，文档占满宽度 */
.detail-body > .detail-doc-side:only-child {
    flex: 1 1 100%;
}

/* 移动端：图片和文档上下堆叠 */
@media (max-width: 768px) {
    .detail-body {
        flex-direction: column;
        gap: 20px;
    }
    .detail-image-side {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
}

.service-detail-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-detail-section {
    margin-top: 40px;
}

.service-detail-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #2d4a36;
    border-bottom: 2px solid #4a7d57;
    padding-bottom: 10px;
    font-weight: 600;
}

.service-detail-section p,
.service-detail-section div {
    line-height: 1.8;
    margin-bottom: 15px;
    color: #2d4a36;
    font-size: 16px;
}

.pdf-document {
    margin-top: 20px;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 8px;
}

.pdf-document h3 {
    margin-bottom: 15px;
    color: #2d4a36;
    font-size: 18px;
    font-weight: 600;
}

.pdf-link {
    display: inline-block;
    padding: 10px 20px;
    background: #4a7d57;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
}

.pdf-link:hover {
    background: #3d6b4d;
    box-shadow: 0 0 15px rgba(74, 125, 87, 0.3);
}

.back-link {
    display: inline-block;
    margin-top: 60px;
    padding: 14px 32px;
    background: transparent;
    color: #2d4a36;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid #4a7d57;
    border-radius: 4px;
}

.back-link:hover {
    background: #4a7d57;
    color: #fff;
}

/* ==================== 响应式增强：跨分辨率自适应 ==================== */
/* 以下规则配合 responsive.js 实现流体排版和间距自适应 */

/* 流体标题：h1-h6 */
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); }
h3 { font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.5rem); }
h4 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }

/* 流体区块间距 */
.section { padding: clamp(30px, 4vw, 80px) 0; }
.section-header { margin-bottom: clamp(20px, 3vw, 50px); }

/* 流体卡片间距 */
.card-grid { gap: clamp(15px, 2vw, 30px); }

/* 流体内边距 */
.card, .service-card, .product-card, .news-card {
    padding: clamp(15px, 2vw, 30px);
}

/* 响应式表格容器 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 响应式图片 */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 响应式嵌入内容 */
.embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 超宽屏优化 (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .navbar .container {
        max-width: 1600px;
    }
    
    .page-header h1 {
        font-size: clamp(36px, 2.5vw, 48px);
    }
    
    .product-showcase h2,
    .news-section h2,
    .company-intro h2,
    .services-preview h2,
    .projects-preview h2 {
        font-size: clamp(32px, 2.2vw, 42px);
    }
}

/* 4K 超高清屏 (2560px+) */
@media (min-width: 2560px) {
    html {
        font-size: 18px;
    }
    
    .container {
        max-width: 1800px;
    }
    
    .page-header h1 {
        font-size: clamp(48px, 2vw, 64px);
    }
}

/* 打印样式优化 */
@media print {
    .navbar, .footer, .no-print {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}

/* 尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}