/* --- 1. 全局变量 (Light Theme) --- */
:root {
    --primary-red: #fb3a4a;
    --primary-color: #fb3a4a;
    --secondary-color: #333;
	--light-gray: #f8f9fa;
    --primary-hover: #d92e3c;
    --text-dark: #2c3e50;
    --text-body: #555555;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
}
html {
    scroll-behavior: smooth; /* 点击锚点平滑滚动，用户体验加分 */
}
/* --- 全局重置：确保全屏显示 --- */

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-body);
    background-color: var(--bg-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;
    color: var(--text-dark);
    text-transform: uppercase;
}

a { text-decoration: none; color: inherit; }

/* 通用标题样式 (仿 Vertex) */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.section-header .separator {
    width: 60px;
    height: 4px;
    background: var(--primary-red);
    margin: 0 auto;
}
/* 按钮样式 */
        .btn-liming {
            background-color: var(--primary-red);
            color: #fff;
            padding: 10px 20px;
            border-radius: 0; /* 工业风棱角分明 */
            text-transform: uppercase;
            font-weight: 600;
            transition: all 0.3s;
            border: 1px solid var(--primary-red);
        }
        .btn-liming:hover {
            background-color: #e02a3a; /* 略深的红色 */
            color: #fff;
			border-color: #e02a3a;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(251, 58, 74, 0.4);
        }


/* --- 2. 导航栏 (智能变色) --- */
.navbar {
    padding: 10px 0;/* 上下太小的话，下拉菜单有间隙，光跑 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 1030; /* 确保导航栏在最上层 */
	backdrop-filter: blur(0px);
}

/* --- 导航栏 Logo 切换 CSS 最终版 --- */

/* 滚动后的导航栏样式 */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9) !important; /* 浅色主题 */
    padding: 10px 0; /* 压缩垂直空间 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-bottom: none;
	backdrop-filter: blur(10px); /* 磨砂玻璃 */
}

/* 导航栏 Logo 容器：固定高度，避免切换时跳动 */
.navbar-brand {
    position: relative;
    height: 54px; /* 默认高度 */
}

/* 所有 Logo 的通用样式：启用绝对定位和过渡 */
.logo {
    height: 54px; /* 默认高度 */
    transition: all 0.3s ease;
    position: absolute; /* 关键：让两个 Logo 重叠 */
    top: 0;
    left: 0;
}

/* 浅色 Logo (默认显示，适用于透明导航栏) */
.logo-light {
    opacity: 1;
}

/* 深色 Logo (默认隐藏) */
.logo-dark {
    opacity: 0;
}

/* 滚动状态下的 Logo 尺寸和切换逻辑 */
.navbar.scrolled .logo {
    height: 45px; /* 滚动后 Logo 变小 */
}

.navbar.scrolled .logo-light {
    opacity: 0; /* 滚动后隐藏浅色 Logo */
}

.navbar.scrolled .logo-dark {
    opacity: 1; /* 滚动后显示深色 Logo */
}


/* 移除下拉箭头 */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* 默认状态下（背景透明时）图标为白色 */
.navbar-toggler i {
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

/* 当导航栏滚动变白后，图标变黑 */
.navbar.scrolled .navbar-toggler i {
    color: var(--text-dark);
}

/* --- 关键修正：移动端逻辑 --- */
@media (max-width: 991.98px) {
    /* 在移动端，如果导航栏背景是强制白色的，那么图标必须是黑色的 */
    .navbar .navbar-toggler i {
        color: var(--text-dark); /* 或者是你喜欢的任何深色 */
    }
    
    /* 如果你希望展开菜单后按钮变红也可以这样写 */
    .navbar-toggler:focus {
        box-shadow: none;
    }
}

/* 初始文字颜色（白色） */
.nav-link {
    /* 关键修改 1A：初始状态文字为白色 */
    color: #fff !important; 
    font-weight: 500;
    margin: 0 10px;
    font-size: 1.05rem;
    
    /* 关键修改 2A：为胶囊悬浮效果添加过渡动画 */
    transition: color 0.3s, background-color 0.3s, border-radius 0.3s;
    position: relative; 
    padding: 10px 15px !important; /* 增加内边距来制作胶囊的“体积” */
    border-radius: 5px; /* 默认状态的轻微圆角 */
}

/* 滚动后文字颜色（黑色） - 通过 JS 动态设置颜色，CSS 负责悬停效果 */
.navbar.scrolled .nav-link {
    color: var(--text-dark) !important;
}

/* 关键修改 2B：导航栏悬浮胶囊效果 (适用于主导航项) */
.nav-link:hover {
    color: #fff !important; /* 悬浮时文字变白 */
    background-color: var(--primary-red); /* 悬浮时背景填充红色 */
    border-radius: 50px; /* 变成胶囊形状 */
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-link:hover::before {
    width: 20px;
}

/* 关键修改 1C：当导航栏滚动后，悬浮效果保持胶囊形状和红色，文字白色 */
.navbar.scrolled .nav-link:hover {
    color: #fff !important;
    background-color: var(--primary-red);
    border-radius: 50px;
}

/* 移除下划线动画 (因为使用了胶囊填充，下划线可能干扰效果) */
.nav-link::after {
    display: none; /* 移除下划线 */
	content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-red);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}


/* 下拉菜单项目 - 胶囊形式悬停效果 (保持不变) */
.dropdown-item {
    border-radius: 50px;
    margin: 5px 0px;
    transition: all 0.3s;
    color: var(--text-dark);
}

.dropdown-item:hover {
    background-color: var(--primary-red);
    color: #fff;
}


/* --- 悬停打开下拉菜单 CSS 规则 --- */
@media (min-width: 992px) {

/* 1. Mega Menu 容器样式：确保全屏宽度和位置修正 */
.mega-menu-panel {
    /* 核心修正 1: 宽度强制为视口全宽 */
    width: 100vw !important; 
    height: auto !important; 
    position: fixed !important; 
    top: 60px; /* <--- 关键修正点：这里需要根据您导航栏的实际高度来调整 */
               /* 如果您的导航栏高度是 60px，就设置 60px。请根据实际情况调整。 */
    left: 0 !important; /* 对齐左边缘 */
    transform: none !important; /* 取消 transform: translateX(-50%)，因为 left: 0 已经对齐左边缘 */
    margin-top: 0 !important; /* 确保没有额外的顶部外边距 */
    padding: 30px 0;
    border: none;
    border-radius: 0; 
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    background-color: #fff; 
    z-index: 1050; 
	
	
}
/* 2. 悬停打开逻辑 (保留不变，但需要确保定位正确) */

    .dropdown-menu {
        transition: all 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0); /* 移除 transform 动画，避免与 fixed 冲突 */
        
        /* 确保 Mega Menu 始终在导航栏下方 */
        top: 60px; /* 再次确保 top 值与导航栏高度一致 */
    }

    /* 悬停时显示 Mega Menu */
    .dropdown-hover:hover .dropdown-menu {
        display: block; 
        opacity: 1; 
        visibility: visible;
    }
	/* 巨型菜单进场 */
.dropdown-hover:hover .mega-menu-panel {
    display: block;
    animation: menuFadeUp 0.4s forwards;
}

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

/* 内部列阶梯出现 */
.mega-menu-panel .row > div {
    opacity: 0;
    transform: translateY(10px);
}

.dropdown-hover:hover .mega-menu-panel .row > div:nth-child(1) { animation: itemAppear 0.4s forwards 0.1s; }
.dropdown-hover:hover .mega-menu-panel .row > div:nth-child(2) { animation: itemAppear 0.4s forwards 0.2s; }
.dropdown-hover:hover .mega-menu-panel .row > div:nth-child(3) { animation: itemAppear 0.4s forwards 0.3s; }
.dropdown-hover:hover .mega-menu-panel .row > div:nth-child(4) { animation: itemAppear 0.4s forwards 0.4s; }


@keyframes itemAppear {
    to { opacity: 1; transform: translateY(0); }
}
}

/* --- 导航栏拥挤优化 CSS (针对 992px 到 1200px 之间的宽度) --- */

/* 定义一个媒体查询范围，覆盖中等和大型屏幕之间的拥挤区域 */
@media (min-width: 992px) and (max-width: 1250px) {
    
    /* 1. 减少导航链接之间的水平间距 */
    /* 目标元素：ul.navbar-nav 下的 li.nav-item */
    .navbar-nav .nav-item {
        margin-right: 5px !important; /* 减小右侧外边距 */
        margin-left: 5px !important;  /* 减小左侧外边距 */
    }

    /* 2. 减少链接 a.nav-link 内部的填充 */
    /* 目标元素：链接本身 */
    .navbar-nav .nav-link {
        padding-left: 8px !important; /* 减小左右内边距 */
        padding-right: 8px !important;
        font-size: 0.95rem; /* 稍微减小字体大小，有助于收紧空间 */
    }
    
    /* 3. 优化 "GET QUOTE" 按钮 */
    .navbar-nav .btn-liming {
        padding-left: 15px !important; /* 减小按钮的左右内边距 */
        padding-right: 15px !important;
        font-size: 0.9rem; /* 减小按钮字体 */
    }

    /* 4. 优化 "GET QUOTE" 按钮的 li 容器 */
    .navbar-nav .nav-item.ms-3 {
        margin-left: 10px !important; /* 减小按钮左侧的外边距 */
    }
    
    /* 5. 优化搜索按钮的 li 容器 */
    .navbar-nav .search-btn {
         /* 如果搜索按钮 li 也有 ms-3 类，则应用相同的优化 */
        margin-left: 5px !important; 
    }
}

/* --- Mega Menu 兼容性修正 --- */
.nav-item.dropdown-hover {
    position: relative; 
}

/* 3. Mega Menu 内部列样式 */
.mega-menu-col {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* 4. 新增：图片容器样式 */
.menu-col-image {
	border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    height: 100px; /* 固定高度，保持整齐 */
}

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

.menu-col-image:hover img {
    transform: scale(1.1); /* 可选：悬停放大效果 */
}

/* 5. 标题和链接样式 (微调) */
.mega-menu-col .menu-col-title {
font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
}

.mega-menu-col .dropdown-item {
    font-size: 0.95rem;
    padding: 5px 0px 5px 5px;
    color: #666; 
    transition: color 0.2s, background-color 0.2s;
}

.mega-menu-col .dropdown-item:hover {
    color: var(--primary-red); 
    background-color: #f8f9fa;
}

/* 确保 Products 文本在悬停时没有默认的 dropdown-toggle 样式 */
.nav-item.dropdown-hover > .nav-link {
    padding-right: 0.5rem; 
}
/* --- 按钮样式优化 --- */
.btn-nav-quote {
    border-radius: 50px; /* 恢复圆角胶囊 */
    position: relative;
    overflow: hidden;
    background: var(--primary-red);
    border: none;
    color: white;
    padding: 10px 25px;
    font-weight: 700;
}
.btn-nav-quote::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: all 0.6s;
}
.btn-nav-quote:hover {
background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(251, 58, 74, 0.3);
    color: #fff !important;
}
.btn-nav-quote:hover::before {
    left: 150%;
}

/* 搜索按钮 */
.search-trigger-btn {
    color: #fff;
    background: var(--primary-red);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    cursor: pointer;
}
.navbar.scrolled .search-trigger-btn {
    color: #fff;
}

.search-trigger-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}

/* --- 移动端适配补丁 --- */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item.ms-lg-3, 
    .navbar-nav .nav-item.ms-lg-2 {
        margin-left: 0 !important;
        margin-top: 15px;
        text-align: center;
        width: 100%;
    }

    .btn-nav-quote {
        width: 80%; /* 移动端按钮稍微宽一点方便点击 */
        padding: 12px;
    }

    .search-trigger-btn {
        background: var(--primary-hover); /* 移动端菜单展开背景通常是白色的 */
        margin: 10px auto;
    }
}

@media (max-width: 991px) {
    .navbar {
        background: #fff !important; /* 移动端导航必须是白色 */
        padding: 10px 0;
    }
    .logo-light { display: none; }
    .logo-dark { display: block; opacity: 1; }
    
    .nav-link {
        color: #333 !important;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .mega-menu-panel {
        box-shadow: none;
        padding: 10px 20px;
        border-top: none;
    }
    
    .menu-col-image {
        display: none; /* 移动端隐藏菜单图片，节省空间 */
    }
}

/* --- 3. 全屏搜索界面 (Overlay Search) --- */
#fullscreenSearch {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用深色半透明背景配合毛玻璃效果 */
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* 确保在最顶层 */
    
    /* 初始隐藏状态，配合 JS 的 fadeIn */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#fullscreenSearch.open {
opacity: 1;
    visibility: visible;
}

.search-content {
width: 100%;
    max-width: 800px;
    padding: 20px;
    transform: scale(0.9); /* 初始缩小，配合动画 */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#fullscreenSearch.open .search-content {
    transform: scale(1);
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 3rem; /* 足够大气 */
    font-family: 'Oswald', sans-serif;
    padding: 15px 0;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
}

/* 输入框占位符颜色 */
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

/* 下方的提示文字 */
.search-content .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.search-input:focus {
    border-bottom-color: var(--primary-red);
}

.search-close {
position: absolute;
    top: 40px;
    right: 50px;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
}

.search-close:hover {
    color: var(--primary-red);
    transform: rotate(90deg);
}

/* 适配手机端 */
@media (max-width: 767px) {
    .search-input {
        font-size: 1.8rem;
    }
    .search-close {
        top: 20px;
        right: 25px;
        font-size: 2rem;
    }
}

/* --- 4. Hero Banner --- */
#heroCarousel { height: 85vh; width: 100%; }
#heroCarousel .carousel-item { height: 85vh; background-size: cover; background-position: center; }
.carousel-overlay {
    background: rgba(0,0,0,0.5); 
    height: 100%;
    display: flex;
    align-items: center;
}
.hero-title {
    font-size: 3.5rem;
    color: #fff;
    font-weight: 700;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.hero-desc {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}


/* --- 5. 产品卡片 (Hot Products) (修改) --- */
.product-card {
background-color: #fff;
    /* 1. 移除边框，使用轻微的阴影代替 */
    border: none; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 初始轻微阴影 */
    border-radius: 6px;
    padding: 20px;
    text-align: left;
    height: 100%;
    /* 启用过渡，让所有变化更平滑 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-bottom: 3px solid transparent; /* 预留底部红色线条 */
}

/* 炫酷悬浮效果：抬升并增加更明显的阴影 */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-bottom: 3px solid var(--primary-red); /* 悬停出现品牌色 */
}

.product-img-box {
    background-color: #f8f8f8;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}

/* 图片悬浮放大效果保持不变 */
.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.5s ease;
}

.product-card:hover .product-img-box img {
    transform: scale(1.08); /* 稍微放大得更多 */
}

.product-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    /* 新增：设置过渡，准备做悬浮文字效果 */
    transition: color 0.3s ease; 
}
/* 悬浮时标题变色 */
.product-card:hover .product-title {
    color: var(--primary-red); /* 悬浮时标题变为红色 */
}

/* 移除 Read More 链接的红色下划线 */
.product-card a.text-danger {
    text-decoration: none; /* 移除下划线 */
    position: relative;
    /* 启用过渡，用于悬浮下划线动画 */
    transition: all 0.3s ease; 
    padding-bottom: 2px;
}

/* 悬浮链接效果：动态下划线（更现代的动画效果） */
.product-card a.text-danger:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--primary-red); /* 红色下划线 */
    transition: width 0.4s ease; /* 宽度动画 */
}

.product-card a.text-danger:hover:after {
    width: 100%; /* 悬浮时下划线从左到右出现 */
    left: 0;
    right: auto;
}



/* --- 6. 关于我们 (About) --- */
.about-section { background-color: #fff; }
.about-img-container {
    position: relative;
    padding: 20px;
}
.about-img-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100px; height: 100px;
    border-top: 5px solid var(--primary-red);
    border-left: 5px solid var(--primary-red);
    z-index: 1;
}

/* --- 7. 案例 (Cases) --- */
.cases-section { background-color: var(--bg-light); }
.case-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 30px;
}
.case-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s;
}
.case-overlay {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    transition: all 0.3s;
}
.case-card:hover .case-img { transform: scale(1.1); }
.case-card:hover .case-overlay { bottom: 0; }

.case-title { color: #fff; font-size: 1.2rem; margin-bottom: 5px; }
.case-loc { color: var(--primary-red); font-weight: bold; font-size: 0.9rem; }

/* --- 8. 解决方案 (Solutions) --- */
/* ================================================================
   OUR SOLUTIONS 模块 - 全设备响应式汇总 (已优化合并)
   ================================================================ */

/* --- A. 基础通用样式 (所有屏幕共用) --- */
.solution-card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* 统一圆角 */
    background: #000;
}

.solution-card-wrapper img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9; /* 强制统一比例，解决高矮不一导致的变形 */
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 强制文字截断：解决描述文字过长挤压容器的问题 */
.solution-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4; /* 默认最多4行 */
}

/* --- B. 响应式断点合并 --- */

/* 1. 桌面大屏优化 (1200px 以上) */
@media (min-width: 1200px) {
    .solution-content-overlay {
        padding: 40px !important;
    }
    .solution-title {
        font-size: 1.75rem !important;
    }
}

/* 2. 平板与笔记本 (768px - 1199px) */
@media (max-width: 1199px) {
    .solution-title {
        font-size: 1.4rem !important;
    }
    .solution-description {
        font-size: 0.9rem !important;
        -webkit-line-clamp: 3; /* 屏幕变窄，减少行数防止溢出 */
    }
    .solution-content-overlay {
        padding: 20px !important;
    }
}

/* 3. 手机端整体优化 (小于 768px) */
@media (max-width: 767px) {
    /* 解决最核心的变形问题：将两列强制改为单列 */
    .solution-card-list .grid-item {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .section-header h2 {
        font-size: 1.8rem !important;
    }

    .solution-title {
        font-size: 1.25rem !important;
        margin-bottom: 8px !important;
    }

    .solution-description {
        -webkit-line-clamp: 2; /* 手机端只留2行最精简的描述 */
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* 手机端由于没有鼠标 hover，让遮罩层背景一直保持可见 */
    .solution-content-overlay {
        background: rgba(0, 0, 0, 0.5); 
        padding: 15px !important;
    }
}

/* 4. 极小屏幕微调 (小于 480px) */
@media (max-width: 479px) {
    .solution-title {
        font-size: 1.1rem !important;
    }
    .btn-more-rounded {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
    }
}
.solutions-grid-section {
    padding-top: 0 !important;
    /* 核心修正：解决模块与下一个模块的间距问题 */
    padding-bottom: 45px !important; /* 增加底部间距，例如 80px */
    overflow: hidden; 
}

/* 核心技巧：强制全屏拉伸 */
.solution-card-list {
    /* 这是一个强制拉伸元素到视口宽度的技巧 */
    width: 100vw; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0; /* 消除 li 之间的垂直空隙 */
}

/* 确保 row 容器强制全宽 */
.solution-card-list.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------------------------------- */
/* LI 卡片项 (.grid-item) 样式 (间隙和边距) */
/* ---------------------------------- */

.grid-item {
    font-size: initial; 
    padding: 0 !important; /* 清除 Bootstrap col 的 padding */
    position: relative;
    box-sizing: border-box;
}

/* 桌面端：设置左右两侧的间隙 */
@media (min-width: 768px) {
    /* 左侧卡片 (Metal Ore / Green Building) */
    .grid-item-left {
        padding-right: 5px !important; /* 右侧留出卡片间隙的一半 (10px 总间隙) */
        padding-left: 0px !important; /* 左侧留出页面的 20px 边距 */
    }

    /* 右侧卡片 (Construction / Industrial Waste) */
    .grid-item-right {
        padding-left: 5px !important; /* 左侧留出卡片间隙的一半 (10px 总间隙) */
        padding-right: 0px !important; /* 右侧留出页面的 20px 边距 */
    }
    
    /* 垂直间隙 (在 li 底部增加 10px 间距) */
    .grid-item {
        margin-bottom: 10px; 
    }
    /* 清除最后一行的底部间距 */
    .solution-card-list > .grid-item:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
}


/* ---------------------------------- */
/* 卡片内容区 (保持不变) */
/* ---------------------------------- */

.solution-card-wrapper {
    height: 60vh; 
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px; 
    transition: all 0.4s ease;
}

.solution-card-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.solution-card-wrapper:hover img {
    transform: scale(1.05);
}

/* ---------------------------------- */
/* 文字和按钮样式 (保持不变) */
/* ---------------------------------- */

.solution-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 50px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    background: rgba(0, 0, 0, 0.6); 
    transition: background 0.4s ease;
}

.solution-card-wrapper:hover .solution-content-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.solution-title {
    font-size: 3.5rem; 
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.solution-description {
    font-size: 1.05rem;
    color: #f0f0f0; 
    line-height: 1.7;
    margin-bottom: 30px; 
    max-width: 80%;
}

.solution-more-link-container {
    margin-top: 20px;
}

.btn-more-rounded {
    text-decoration: none;
    display: inline-block;
    border-radius: 50px; 
    padding: 12px 35px;
    font-weight: 700;
    background-color: var(--primary-red, #dc3545); 
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-more-rounded:hover {
    background-color: #ff3333;
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.5); 
    transform: translateY(-3px) scale(1.05); 
}

/* ---------------------------------- */
/* 媒体查询 (保持不变)              */
/* ---------------------------------- */
@media (max-width: 767.98px) {
    .grid-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .solution-card-wrapper {
        height: 350px; 
        margin-bottom: 15px; 
    }
    
    .solution-content-overlay {
        padding: 30px;
    }
    
    .solution-title {
        font-size: 2rem; 
    }
}


/* --- 9. CTA Section (保持暗色，做视觉强调) --- */
.cta-section {
    background: linear-gradient(rgba(17, 17, 17, 0.4), rgba(17, 17, 17, 0.4)), url('images/index/customized-solution.jpg');
    background-attachment: fixed;
    background-size: cover;
    color: #fff;
    padding: 80px 0;
}
.cta-section h2{color:#fff;}
.cta-section p{color:#fff;}

/* --- 10. 新闻 (News) --- */
/* --- News Section 优化 --- */

#news .news-item {
    background: #fff;
    border-radius: 8px; /* 适度的圆角，工业感中带点现代 */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    height: 100%;
    border-bottom: 3px solid transparent; /* 预设底部边框 */
}

/* 鼠标悬停卡片时的效果 */
#news .news-item:hover {
    transform: translateY(-10px); /* 卡片整体上移 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    border-bottom: 1px solid var(--primary-red); /* 悬停时显现品牌红 */
}

/* 图片容器：用于裁剪缩放效果 */
#news .news-item .img-wrapper {
    overflow: hidden;
    position: relative;
}

#news .news-item img {
    transition: transform 0.6s ease;
    object-fit: cover;
    height: 240px; /* 固定高度保持对齐 */
}

/* 鼠标悬停图片缩放 */
#news .news-item:hover img {
    transform: scale(1.1);
}

/* 日期标签优化 */
.news-date {
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--primary-red);
    color: #fff;
    padding: 8px 15px;
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 2;
    transition: padding 0.3s ease;
}

#news .news-item:hover .news-date {
    padding-left: 25px; /* 悬停时日期标签轻微伸长，增加动感 */
}

/* 标题样式优化 */
.news-title {
    color: #333;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.news-title:hover {
    color: var(--primary-red); /* 悬停颜色切换 */
}

.news-content {
    padding: 25px;
    background: #fff;
}
.news-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#news .news-item:hover .news-content::after {
    opacity: 1;
    transform: translateX(5px);
}

/* --- 11. 页脚 (Footer) --- */

/* --- Footer 深度优化 --- */
#contact {
background: #0f0f0f; /* 稍微加深底色，让透出的线条感更明显 */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    position: relative;
    overflow: hidden; /* 防止背景图溢出 */
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* 添加背景图伪元素 */
#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 请在此处替换你的破碎机蓝图或产线图路径 */
    background-image: url('images/banner/footer_bg_10.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 核心控制：超低透明度 */
    opacity: 0.3; 
    
    /* 混合模式：luminosity 可以让图片呈现黑白线条质感，融入背景 */
    mix-blend-mode: luminosity; 
    /* 确保背景层在文字下方 */
    z-index: -1; 
    pointer-events: none;
}

/* 增加一层微弱的渐变阴影，让背景更有深度感 */
#contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 0%, #0f0f0f 90%);
    z-index: -1;
    pointer-events: none;
}
.oswald-font { font-family: 'Oswald', sans-serif; letter-spacing: 1px; }
.footer-brand {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
}

.footer-title {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    position: relative;
    display: inline-block; /* 配合横线动画 */
    padding-bottom: 8px;
}

/* 标题下方的红色小横线装饰 */
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px; /* 初始宽度缩短 */
    height: 3px;
    background: var(--primary-red);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 悬停整组时横线拉长，增加动感 */
.row:hover .footer-title::after {
    width: 50px;
}

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

.footer-links a {
    color: rgba(255,255,255,0.6);
    transition: 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--primary-red);
    transform: translateX(5px); /* 悬停微移效果 */
}
/* 联系方式图标微动效 */
.contact-info i {
    transition: 0.3s;
}
.contact-info p:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px var(--primary-red)); /* 增加红色发光感 */
}

/* 社交按钮美化 */
.social-btn {
display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    border-radius: 4px;
    margin-right: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-btn:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.4); /* 增加红色外发光 */
}

.blog-link {
    text-decoration: none;
    color: rgba(255,255,255,0.8);
    transition: 0.3s;
    display: block;
}

.blog-link:hover {
    color: var(--primary-red);
}
/* 博客链接悬停增强 */
.blog-link i {
    transition: transform 0.3s ease;
}
.blog-link:hover i {
    transform: translateX(3px);
}
/* 更加动感的日期样式 */
.blog-date {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    /* 日期使用淡淡的颜色，增加层次 */
    color: rgba(255, 255, 255, 0.4) !important; 
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
/* 悬停时日期亮起 */
.blog-link:hover .blog-date {
    color: var(--primary-red) !important;
    transform: translateX(2px);
}


.footer-bottom { 
background: linear-gradient(to bottom, #111, #000); /* 渐变让过渡更平滑 */
    border-top: 1px solid rgba(255,255,255,0.05) !important;
	}
.footer-bottom small {
    color: rgba(255,255,255,0.3);
}

/* 移动端间距修正 */
@media (max-width: 991px) {
    .footer-title { margin-top: 20px; }
    .footer-section { text-align: left; }
}




/* --- 12. 滚动动画 --- */
/* 基础类 */
.reveal {
    opacity: 0;
    /* 建议将 1.0s 改为 1.5s，让滑行过程更优雅、更慢 */
    transition: all 1.5s cubic-bezier(0.2, 1, 0.3, 1); 
    will-change: transform, opacity;
}
.reveal.active { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; }

/* 方向类 */
.reveal-up { transform: translateY(50px); }
.reveal-down { transform: translateY(-50px); }
.reveal-left { transform: translateX(-80px); }
.reveal-right { transform: translateX(80px); }
.reveal-zoom { transform: scale(0.9); }

/* 阶梯延迟类 */
/* 间距 0.3s：适合大多数 3-4 列的布局 */
.stagger-1 { transition-delay: 0.2s; } /* 第一个元素稍微等一下再出，更有仪式感 */
.stagger-2 { transition-delay: 0.5s; }
.stagger-3 { transition-delay: 0.8s; }
.stagger-4 { transition-delay: 1.1s; }


/* --- 13. 产品轮播图样式 (最终完美复刻 break-day.com) --- */

/* 1. 轮播图容器基础设置及定位修复 */
#productCarousel {
    position: relative; 
    padding: 0; 
    margin-top: 30px; 
    
    /* 核心技巧：使用负边距抵消父容器 .container 的 padding (通常为 15px) */
    /* 这使得轮播图内容可以扩展到屏幕边缘，从而让箭头有空间外露 */
    margin-left: -15px; 
    margin-right: -15px; 
    
    overflow: visible; /* 允许箭头部分超出轮播图边界 */
}

/* 抵消 row 在负 margin 容器内可能产生的额外负 margin */
#productCarousel .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. 产品卡片样式 (模拟 break-day.com 的简洁卡片) */


/* 3. 箭头定位和样式：实现贴边半出效果 */

#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next {
    position: absolute; 
    top: 50%;           
    transform: translateY(-50%); /* 垂直居中 */
    
    width: 40px;
    height: 40px;
    background-color: #fff; /* 白色背景 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，更立体 */
    border-radius: 50%;
    opacity: 1; 
    z-index: 999; /* 确保不被遮盖 */
    transition: all 0.3s;
    filter: none; 
}

/* 左箭头：定位在 #productCarousel 的左边缘，并向左推出自身宽度的一半 */
#productCarousel .carousel-control-prev {
    left: 0; 
    transform: translate(-50%, -50%); /* 向左推 50% */
}

/* 右箭头：定位在 #productCarousel 的右边缘，并向右推出自身宽度的一半 */
#productCarousel .carousel-control-next {
    right: 0; 
    transform: translate(50%, -50%); /* 向右推 50% */
}

/* 箭头图标的颜色 */
#productCarousel .carousel-control-prev-icon,
#productCarousel .carousel-control-next-icon {
    filter: invert(0.2); /* 深灰色图标 */
    width: 25px; 
    height: 25px;
}

/* 悬浮时效果 */
#productCarousel .carousel-control-prev:hover,
#productCarousel .carousel-control-next:hover {
    background-color: var(--primary-red);
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.4); 
}
#productCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#productCarousel .carousel-control-next:hover .carousel-control-next-icon {
    filter: invert(1); /* 悬浮时图标变白色 */
}

/* 移动端兼容性调整 */
@media (max-width: 992px) {
    /* 移除负边距，让轮播图回到容器内 */
    #productCarousel {
        margin-left: 0;
        margin-right: 0;
    }

    /* 箭头不再半出，而是紧贴左右边缘 */
    #productCarousel .carousel-control-prev {
        left: 5px; 
        transform: translateY(-50%); 
    }
    #productCarousel .carousel-control-next {
        right: 5px; 
        transform: translateY(-50%); 
    }
    /* 移动端箭头背景可以透明一些 */
    #productCarousel .carousel-control-prev,
    #productCarousel .carousel-control-next {
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
    }
}



/* --- 14. 导航栏移动端修复 --- */

/* 媒体查询：仅在小屏幕尺寸（如小于 992px 的设备，即 Bootstrap 的 md 尺寸以下）应用 */
@media (max-width: 991.98px) {
    
    .navbar-collapse.collapse.show {
        background-color: #fff; 
        /* 核心修改：增加左右内边距，确保内容不贴边 */
        padding: 10px 30px; /* 垂直 10px，左右 30px，提供充足的左右空间 */
        z-index: 1050; 
        border: 1px solid rgba(0, 0, 0, 0.1); 
        border-radius: 4px;
        width: 100%;
        position: absolute;
        top: 100%; 
        left: 0;
    }
    
    /* 确保展开的菜单项清晰可见 */
    .navbar-collapse.collapse.show .nav-link {
        color: #333 !important; 
        padding: 10px 20px; /* 垂直间距增加到 10px，增加上下留白 */
    }
    .navbar-collapse.collapse.show .nav-link:hover {
    color: #fff !important; /* 悬浮时文字变白 */
    background-color: var(--primary-red); /* 悬浮时背景填充红色 */
    border-radius: 50px; /* 变成胶囊形状 */
}
    
    /* 移除最后一个菜单项的分隔线 */
    .navbar-collapse.collapse.show .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

 /* 分页样式 */
 /* 分页样式 */
        .list-pagination {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }
       .list-pagination .page-item {
            color: var(--primary-color);
            border: none;
			margin: 0 5px;
			width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }   
        .list-pagination .page-item .page-link {
            color: var(--primary-color);
            border: none;
            border-radius: 50%;
            height: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .list-pagination .page-item.active .page-link {
            background: var(--primary-color);
            color: #fff;
        }
        
        .list-pagination .page-item .page-link:hover {
            background: rgba(251, 58, 74, 0.1);
        }


/* ========================================================= */
/* --- 5. ABOUT 页面专属样式 (基于 Tab 结构) --- */
/* ========================================================= */

/* --- 5.1 Hero Banner (保持不变，确保与导航栏对齐) --- */
.ab-page-hero {
    padding-top: 200px; 
    padding-bottom: 200px;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/about/about-us-banner.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.ab-hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

/* --- 新的面包屑容器样式 (liming-breadcrumb) --- */


.breadcrumb-item a.breadcrumb-link {
    color: #fff;
    /* 保持您之前使用的链接样式 */
}
.breadcrumb-item.active {
    color: var(--primary-red); /* 激活项使用红色 */
    font-weight: 500;
}

/* 面包屑导航样式优化 */
.liming-breadcrumb {
    margin-top: 50px;
}

.liming-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item, 
.breadcrumb-item a {
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}

.breadcrumb-item a:hover {
    color: var(--primary-red) !important;
    text-decoration: none;
}

/* 当前活动页面的面包屑：显示为淡灰色或白色，不带下划线 */
.breadcrumb-item.active {
    color: #fff !important;
    max-width: 400px; /* 防止标题过长导致换行太难看 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

/* 自定义分隔符颜色 */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
    content: "/";
}

/* 移动端调整 */
@media (max-width: 575.98px) {
    .liming-breadcrumb .breadcrumb-item {
        font-size: 0.9rem; /* 减小字体以适应小屏 */
    }
}


/* --- 5.2 Tab 导航和内容区样式 --- */

.ab-tab-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Tab 导航 (Pills Style) 样式定制 */
.ab-pills-nav .nav-link {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-dark) !important; /* 默认文字颜色 */
    padding: 10px 25px;
    border-radius: 50px;
    /* 核心修改：添加边框使其在白色背景上可见 */
    border: 1px solid #dcdcdc; 
    transition: all 0.3s;
    margin: 0 10px; 
    background-color: #fff; /* 确保导航项本身背景是白色 */
}

/* 非激活链接的悬停状态 */
.ab-pills-nav .nav-link:hover {
    color: var(--primary-red) !important;
    border-color: var(--primary-red);
}

/* 激活状态 */
.ab-pills-nav .nav-link.active {
    background-color: var(--primary-red);
    color: #fff !important;
    border-color: var(--primary-red);
    /* 激活状态下取消阴影，保持简洁 */
    box-shadow: none; 
}
/* Tab 内容区基础样式 */
.tab-content {
    /* 增加顶部间距，将内容与导航分开 */
    padding-top: 20px; 
}

/* Tab 内容面板样式 (让内容区更明显) */
.tab-content .tab-pane {
    padding: 30px; /* 增加内部填充 */
    /* 增加一个非常浅的背景色或边框，与页面背景隔离 */
    background-color: #ffffff; 
    border: 1px solid #f0f0f0; 
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); /* 轻微阴影 */
}

/* Tab 内容区的标题和图片 */
.ab-content-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.ab-panel-img {
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 核心数据项样式 (用于 COMPANY OVERVIEW Tab) */
.ab-data-item {
    text-align: center;
    padding: 15px;
    background: var(--bg-light);
    border-left: 3px solid var(--primary-red);
}
.ab-data-num {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 5px;
}

/* R&D INNOVATION 列表样式 */
.ab-rd-list li, .ab-team-list li {
    font-size: 1.05rem;
    color: var(--text-body);
    margin-bottom: 10px;
}
.ab-rd-list li strong, .ab-team-list li strong {
    color: var(--text-dark);
}

/* MANUFACTURING BASE 卡片样式 */
.ab-facility-card {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    height: 100%;
    transition: all 0.3s;
}
.ab-facility-card:hover {
    border-color: var(--primary-red);
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.1);
}
.ab-facility-icon {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 15px;
}
.ab-facility-card h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

/* 针对小屏幕（手机端）的优化 */
@media (max-width: 768px) {
    .ab-pills-nav {
        flex-direction: column; /* 强制垂直排列 */
        align-items: center;    /* 整体居中 */
        width: 100%;
    }

    .ab-pills-nav .nav-item {
        width: 100%;            /* li 宽度占满 */
        margin-bottom: 10px;    /* 每个选项之间的间距 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ab-pills-nav .nav-link {
        width: 100%;            /* 按钮宽度占满 */
        text-align: center;     /* 文字强制居中 */
        display: block;
        padding: 12px 20px;     /* 增加点击区域高度 */
    }
}

/* 移动端响应式调整 */
@media (max-width: 767.98px) {
    .ab-pills-nav .nav-link {
        margin: 5px; /* 减小移动端导航项间距 */
    }
    .ab-pills-nav {
        flex-direction: column; /* 垂直堆叠导航项 */
        align-items: stretch;
    }
    .ab-content-title {
        font-size: 1.8rem;
    }
}


/* ========================================================= */
/* --- 6. CONTACT 页面专属样式 (contact.html) --- */
/* ========================================================= */

/* --- 6.1 联系信息卡片 (ct-info-section) --- */

.ct-info-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff;
}

.ct-info-card {
    background-color: var(--bg-light); /* 浅灰色背景 */
    padding: 30px;
    border-radius: 6px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

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

.ct-icon {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 15px;
}

.ct-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

.ct-text {
    font-size: 0.95rem;
    color: var(--text-body);
    margin-bottom: 10px;
}

.ct-link {
    display: inline-block;
    color: var(--primary-red);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.ct-link:hover {
    text-decoration: underline;
}

/* --- 6.2 核心联系表单区域 (ct-form-section) --- */

.ct-form-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--bg-light);
}


/* ========================================================= */
/* --- 7. SOLUTIONS 页面专属样式 (solutions.html) --- */
/* ========================================================= */

/* --- 7.1 Solutions Hero Banner 样式 (sl-hero-banner) --- */
.sl-hero-banner {
    padding-top: 150px; 
    padding-bottom: 80px;
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('images/banner/solution-banner.jpg');
    background-size: cover;
    background-position: center 30%; 
    color: #fff;
    text-align: center;
}

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

.sl-hero-cta {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
}


/* ========================================================= */
/* --- 7.2 核心业务流程 (sl-process-section) - 炫酷升级版 --- */
/* ========================================================= */

.sl-flow-upgrade {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 步骤容器 */
.sl-process-flow {
    justify-content: center;
    align-items: stretch; /* 确保所有步骤卡片高度一致 */
}

.sl-process-step {
    position: relative;
    padding: 30px 20px 20px 20px;
    text-align: center;
    border-radius: 10px;
    background: var(--bg-white); /* 白色背景 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border-bottom: 5px solid var(--primary-red); /* 底部强调线 */
    height: 100%; /* 保持列高 */
    display: flex;
    flex-direction: column;
}

.sl-process-step:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

/* 图标圆圈容器 */
.sl-icon-circle {
    /* 提升图标，使其部分溢出卡片 */
    position: absolute;
    top: -30px; 
    left: 50%;
    transform: translateX(-50%);
    
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.5); /* 红色阴影 */
    border: 5px solid var(--bg-light); /* 浅色边框，使其在背景上突出 */
    z-index: 2;
}

.sl-process-step h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 30px; /* 为图标留出空间 */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.sl-process-step p {
    font-size: 0.9rem;
    color: var(--text-body);
    flex-grow: 1;
}

/* --- 流程连接线 (sl-process-connector) --- */

.sl-process-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 1; /* 确保连接线在图标下方 */
}

.sl-connector-line {
    width: 100%;
    height: 4px; /* 线条粗细 */
    background: var(--primary-red);
    position: relative;
}

/* 箭头的渲染 */
.sl-connector-line::after {
    content: '\f054'; /* FontAwesome: fa-chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-red);
    font-size: 1.5rem;
    background-color: var(--bg-light);
    padding: 0 5px; /* 增加填充，让箭头看起来更立体 */
}

/* 流程图底部的按钮 */
.sl-flow-btn {
    padding: 10px 30px;
    margin-top: 30px;
	border-radius: 10px;
}

/* 移动端修复 */
@media (max-width: 991.98px) {
    /* 移动端隐藏连接线 */
    .sl-process-connector {
        display: none !important;
    }
    .sl-process-step {
        /* 移动端恢复正常定位，取消图标溢出效果 */
        top: 0;
        margin-top: 40px; 
        padding-top: 40px;
    }
    .sl-icon-circle {
        top: -30px;
    }
}


/* --- 7.3 应用领域卡片 (大图视觉) --- */

.sl-application-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 最大的两个卡片样式 (col-lg-6) */
.sl-solution-large-card {
    display: block;
    position: relative;
    overflow: hidden;
    height: 350px; /* 固定高度 */
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
}

.sl-solution-large-card:hover {
    transform: translateY(-5px);
	border: 2px solid var(--primary-red);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sl-large-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sl-solution-large-card:hover .sl-large-card-img {
    transform: scale(1.08);
}

.sl-large-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)); /* 渐变叠加层 */
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}

.sl-large-card-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}
.sl-large-card-text {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}
.sl-large-card-more {
    font-weight: 600;
    color: var(--primary-red);
}

/* 中等尺寸卡片样式 (col-lg-4) */
.sl-solution-medium-card {
    display: block;
    position: relative;
    overflow: hidden;
    height: 250px; 
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.sl-solution-medium-card:hover {
    transform: translateY(-5px);
	border: 1px solid var(--primary-red);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sl-medium-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sl-medium-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 统一半透明黑色叠加 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px;
}

.sl-medium-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}
.sl-medium-card-more {
    font-weight: 500;
    color: var(--primary-red);
}

/* --- 针对新的 Mobile Crushing 卡片的强调样式 --- */
.sl-mobile-card:hover {
    /* 悬停时添加一个精致的边框，以强调该卡片 */
	transform: translateY(-5px);
    border: 1px solid var(--primary-red);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.sl-cta-card {
    /* 确保不再使用纯色背景，而是使用图片背景 */
    background-color: transparent !important;
    box-shadow: none !important;
}
.sl-cta-card .sl-medium-card-overlay {
    /* 确保不再是纯色覆盖层，而是半透明黑色覆盖层 */
    background: rgba(0, 0, 0, 0.5) !important; 
    justify-content: center;
}


/* --- 7.4 工程能力与全球支持 (sl-engineering-section) --- */
.sl-engineering-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.sl-engineering-img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.sl-engineering-list li {
    font-size: 1.05rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 500;
}


/* 媒体查询 */
@media (max-width: 991.98px) {
    .sl-solution-large-card {
        height: 250px;
    }
    .sl-large-card-title {
        font-size: 1.5rem;
    }
}
@media (max-width: 767.98px) {
    .sl-process-arrow {
        display: none !important;
    }
    .sl-solution-medium-card {
        height: 200px;
    }
    .sl-cta-card {
        height: 200px; /* 确保移动端高度一致 */
    }
}


/* ========================================================= */
/* --- 7.5 成功项目案例 (sl-case-study-section) --- */
/* ========================================================= */

.sl-case-study-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--bg-white); /* 确保背景是白色 */
}

/* --- 最大的特色案例卡片 (sl-case-featured-card) --- */

.sl-case-featured-card {
    display: block;
    position: relative;
    height: 100%; /* 确保高度填充 col-lg-6 容器 */
    min-height: 500px; /* 设定最小高度以确保大气 */
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sl-case-featured-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.sl-case-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sl-case-featured-card:hover .sl-case-img {
    transform: scale(1.05);
}

.sl-case-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 强烈的渐变，突出底部文字 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.0) 100%); 
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}

.sl-case-tag {
    background-color: var(--primary-red);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start; /* 标签居左 */
    margin-bottom: 10px;
}

.sl-case-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.sl-case-meta {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.sl-case-meta span {
    margin-right: 20px;
}
.sl-case-meta i {
    color: var(--primary-red);
    margin-right: 5px;
}

.sl-case-read-more {
    font-weight: 600;
    color: var(--primary-red);
    margin-top: 10px;
}
.sl-case-featured-card:hover .sl-case-read-more {
    color: #fff; /* 悬停时颜色变白 */
}


/* --- 列表案例卡片 (sl-case-list-item) --- */

.sl-case-list-item {
    display: flex;
    align-items: center;
    background-color: var(--bg-light);
    border-radius: 8px;
    overflow: hidden;
    height: 150px; /* 固定高度 */
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s, background-color 0.3s;
}

.sl-case-list-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.sl-list-img {
    width: 40%;
    height: 100%;
    object-fit: cover;
}

.sl-list-body {
    width: 60%;
    padding: 15px 20px;
}

.sl-list-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    transition: color 0.3s;
}
.sl-case-list-item:hover .sl-list-title {
    color: var(--primary-red);
}

.sl-list-meta {
    font-size: 0.9rem;
    color: var(--text-body);
    margin-bottom: 0;
}

.sl-view-all-btn {
	border-radius: 10px;
	padding: 12px 35px; /* 稍微放大，使其更突出 */
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}



/* 媒体查询 */
@media (max-width: 991.98px) {
    .sl-case-featured-card {
        min-height: 400px;
    }
}
@media (max-width: 767.98px) {
    .sl-case-featured-card {
        min-height: 300px;
    }
    .sl-case-title {
        font-size: 1.5rem;
    }
    .sl-case-list-item {
        height: 120px; /* 移动端减小高度 */
    }
    .sl-list-title {
        font-size: 1rem;
    }
    .sl-list-body {
        padding: 10px;
    }
}


/* ========================================================= */
/* --- 8. case SINGLE 页面专属样式 (case-single.html) --- */
/* ========================================================= */

/* --- 8.1 Hero Banner (增强) --- */
.sl-single-hero {
    padding-top: 150px; 
    padding-bottom: 70px; /* 增加底部空间 */
    /* 强烈的深色背景，突出标题 */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.5)), url('images/banner/banner-case-single.jpg'); 
    background-size: cover;
    background-position: center bottom; 
    color: #fff;
    text-align: left;
}
.sl-single-title {
    font-size: 3.5rem; /* 更大的标题 */
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 增加文字渲染感 */
	color:#fff;
}
.sl-meta-badge {
    background-color: var(--primary-red); 
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 18px;
    margin-right: 15px;
    border-radius: 50px; /* 药丸形状 */
}

/* --- 8.2 内容模块通用样式 (全宽) --- */
.sl-single-module {
    padding: 30px 0;
}
.sl-module-title {
    font-size: 2.5rem; /* 更大的模块标题 */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
    text-align: center; /* 模块标题居中 */
}
.sl-module-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* 增加下划线宽度 */
    height: 4px;
    background-color:var(--primary-red);
    border-radius: 2px;
}

.sl-single-content .lead {

    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 40px;
}
.sl-image-shadow {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* 增强阴影，增加大气感 */
}


/* --- 8.3 增强版规格卡片 (sl-specs-enhanced) --- */
.sl-specs-enhanced {
    background: linear-gradient(to right, #f8f9fa, #fff);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
}
.sl-spec-item {
    text-align: center;
    border-right: 1px dashed #ddd; /* 分隔线 */
}
.sl-specs-enhanced .col-md-3:last-child .sl-spec-item {
    border-right: none;
}

.sl-spec-icon {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 10px;
}
.sl-spec-key {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.sl-spec-value {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-body);
}

/* --- 8.4 工艺流程图 (Graphic Narration) --- */
.sl-process-module {
    background-color: var(--bg-light); /* 流程模块使用浅背景突出 */
    padding: 60px 10px;
}
.sl-process-narrative-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.sl-process-narrative-list li {
    padding: 10px 0;
    border-bottom: 1px dotted #ccc;
    font-size: 1.05rem;
    color: var(--text-dark);
}
.sl-process-narrative-list li:last-child {
    border-bottom: none;
}
.sl-process-narrative-list i {
    color: var(--primary-red);
    margin-right: 10px;
}
.sl-diagram-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 5px solid var(--bg-white); /* 给图表加白边框，增强视觉边界 */
}


/* --- 8.5 核心设备清单 (全宽卡片) --- */
.sl-equipment-full {
    padding-top: 60px;
}
.sl-equip-full-card {
    display: block;
    text-decoration: none;
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}
.sl-equip-full-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    border: 3px solid var(--primary-red); /* 悬停红边框，强渲染 */
}
.sl-equip-full-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.sl-equip-full-body {
    padding: 15px;
    text-align: center;
}
.sl-equip-full-body h6 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
}
.sl-equip-full-body p {
    font-size: 0.9rem;
    color: var(--primary-red);
    margin-bottom: 0;
}
.sl-lg-btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
}
/* 确保 btn-liming 存在且为红色 */
.btn-liming {
    background-color: var(--primary-red);
    color: #fff;
    border: 1px solid var(--primary-red);
    transition: all 0.3s ease;
}
.btn-liming:hover {
    background-color: #e02a3a; 
    border-color: #e02a3a;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(251, 58, 74, 0.4);
}


/* --- 8.6 项目技术优势 (sl-tech-adv) --- */
.sl-tech-adv {
    background-color: var(--bg-light); 
    padding: 80px 0;
}
.sl-adv-box {
    background: var(--bg-white);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-bottom: 4px solid var(--primary-red); /* 红色底部强调线 */
    height: 100%;
}
.sl-adv-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.sl-adv-icon {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 15px;
}
.sl-adv-box h5 {
    font-weight: 700;
    color: var(--text-dark);
}


/* --- 8.7 相关案例 & CTA (sl-cases-cta-module) --- */
.sl-cases-cta-module {
    background-color: var(--text-dark); /* 强烈的深色背景 */
    color: #fff;
   padding: 100px 0 80px 0; /* 增加上下内边距，更显大气 */
}
.btn-cta-main {
    background-color: var(--primary-red);
    color: #fff;
    border: 2px solid var(--primary-red);
    font-weight: 700;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-cta-main:hover {
    background-color: #e02a3a;
    border-color: #e02a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251, 58, 74, 0.6);
}

.sl-case-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}



/* 案例卡片样式 (继承并优化) */
.sl-related-overlay {
    /* 确保悬浮层背景渐变存在，以提供足够对比度 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    transition: background 0.3s ease;
}

.sl-case-cta {
    box-shadow: none;
}
.sl-case-cta .sl-related-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); 
}
.sl-case-cta:hover {
    transform: scale(1.05);
}

.sl-related-overlay h6 {
    color: #fff; /* 核心修复：明确设置为白色 */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    transition: color 0.3s;
}
/* 确保悬停时变色效果（如果需要） */
.sl-case-cta:hover .sl-related-overlay h6 {
    color: var(--primary-red);
}


/* 查看所有案例 CTA */
/* --- 修复相关案例卡片的高度和对齐问题 --- */

/* 定义所有卡片容器的高度，确保它们在同一行上对齐 */
.sl-related-case-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-decoration: none;
    /* 核心：为卡片设置一个固定或最小高度 */
    height: 220px;

}

/* 确保图片严格占据图片卡片的全部空间 */
.sl-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

/* 确保查看所有案例的 CTA 盒子占据全部空间并保持居中 */
.sl-all-cases-cta {
    background-color: var(--bg-white);
    display: flex;
    flex-direction: column; /* 让内容垂直居中 */
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* 关键：继承 sl-related-case-card 的高度 */
    border: 3px solid var(--primary-red);
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.sl-all-icon {
    font-size: 3rem; 
    color: var(--primary-red);
    margin-bottom: 10px;
}
.sl-all-cases-content p {
    font-weight: 600;
    font-size: 1.1rem;
}


.sl-all-cases-cta:hover {
    background-color: var(--primary-red);
    box-shadow: 0 0 20px rgba(251, 58, 74, 0.7);
    transform: scale(1.05);
}
.sl-all-cases-content {
    color: var(--text-dark);
    transition: color 0.3s;
}
.sl-all-cases-cta:hover .sl-all-cases-content {
    color: #fff;
}

.sl-all-cases-cta:hover .sl-all-icon {
    color: #fff;
}


/* 媒体查询 (适配移动端) */
@media (max-width: 767.98px) {
    .sl-single-title {
        font-size: 2.5rem;
    }
    .sl-specs-enhanced .col-md-3 {
        border-right: none !important;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 15px;
    }
    .sl-specs-enhanced .col-md-3:last-child {
        border-bottom: none;
    }
    .sl-module-title {
        font-size: 2rem;
    }
}

/* ========================================================= */
/* --- 8.9 替代版面样式：双栏图文分离布局 (sl-two-col-visual) --- */
/* ========================================================= */

.sl-two-col-visual {
    padding: 20px 0;
    align-items: center; /* 确保图片和文字在垂直方向上居中对齐 */
}

/* 图片框架样式 */
.sl-visual-frame {
    /* 强烈的视觉效果：凸显图片，使其更具工业感 */
    border: 5px solid var(--bg-light); 
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* 显著的阴影 */
    transition: all 0.3s ease;
}
.sl-visual-frame:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    transform: scale(1.01);
}

.sl-visual-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 文字描述区域样式 */
.sl-visual-description {
    background-color: #fff;
    border-left: 3px solid var(--primary-red); /* 强调线 */
    padding: 30px !important;
border-radius: 0 4px 4px 0; /* 仅右侧有圆角，左侧贴合边框 */
}
.sl-visual-description h4 {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

/* 引用样式 */
.sl-visual-description .blockquote {
    font-style: italic;
    color: var(--text-dark);
    border-left: 3px solid #ddd;
    padding-left: 15px;
    margin: 20px 0;
}
.sl-visual-description .blockquote-footer {
color: var(--primary-red); /* 确保文字是红色，突出作者/来源 */
    font-style: normal;
    background-color: transparent; /* 核心：确保背景透明，消除黑色方框 */
    display: block; /* 确保它独占一行 */
    padding: 0;
    margin-top: 5px !important;
}

/* 图注文字样式 */
/* --- 优化图注文字 (sl-visual-caption-text) --- */
.sl-visual-caption-text {
    font-size: 0.95rem;
    color: var(--text-body);
    font-weight: 500; /* 略微加粗，突出信息 */
    margin-top: 15px !important;
    padding-top: 10px;
    border-top: 1px dashed #eee; /* 用虚线与正文内容分离 */
}
.sl-visual-caption-text i {
    color: var(--primary-red);
}

/* 移动端适配：取消左右布局，图片在上，文字在下 */
@media (max-width: 991.98px) {
    .sl-two-col-visual {
        align-items: flex-start;
    }
    .sl-visual-description {
        border-left: none;
        border-top: 5px solid var(--primary-red); /* 移动端改为顶部强调线 */
        padding: 20px !important;
    }
}



/* ========================================================= */
/* --- 15. SOLUTIONS SINGLE (MODERN INDUSTRIAL REDESIGN - LIMING) --- */
/* --- 专为 Liming 网站集成优化，已移除重复的全局变量和字体定义 --- */
/* ========================================================= */

/* 新增自定义变量 (不与全局冲突) */
:root {
    --primary-liming-dark: #1e2833; /* 核心暗色调 */
    --bg-light-gray-liming: #f5f7fa; /* 浅灰背景 */
}

/* --- 通用模块与标题 --- */
.solution-module-split,
.solution-module-timeline,
.solution-module {
    padding: 80px 0;
}
.module-title-centered {
    /* H2 字体已继承全局 Oswald, 仅保留定位和间距 */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}
.module-title-centered::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    /* 统一使用全局红色 */
    background-color: var(--primary-red);
}

/* --- 15.1 Dynamic Hero Section (高对比度与数据前瞻) --- */
.liming-hero-dynamic {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('images/banner/banner-case.webp'); 
    background-size: cover;
    background-position: center bottom;
    padding: 180px 0 100px 0;
    color: #fff;
}
.hero-main-title {
    /* 字体已继承全局 Oswald, 仅保留行高 */
    line-height: 1.15;
    margin-bottom: 20px;
	color: #fff;
}
.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}
.btn-hero-liming {
    /* 统一使用全局红色 */
    background-color: var(--primary-red);
    color: #fff;
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: background-color 0.3s;
}
.btn-hero-liming:hover {
    /* 统一使用全局悬停红色 */
    background-color: var(--primary-hover);
}
.btn-outline-light-liming {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 12px 30px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-outline-light-liming:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.hero-visual-data {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.data-module-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    min-height: 250px;
    display: flex;
    flex-direction: column;
}
/* 新增的图表样式，确保在卡片中居中显示 */
.data-module-card .data-chart-img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border-radius: 4px;
    /* 如果图表是白色背景，可以加一点边框让它融入暗色卡片 */
    border: 1px solid rgba(255, 255, 255, 0.2); 
}

/* --- 15.2 Standards & Core Benefits (Split Layout) --- */
.bg-light-gray-liming {
    background-color: var(--bg-light-gray-liming);
}
.standards-left-panel {
    padding-right: 40px;
}
.standards-right-panel {
    padding-left: 40px;
    border-left: 1px solid #ddd;
}
.standard-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.standard-list li {
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
    font-weight: 500;
}
.comparison-visual-box {
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    min-height: 300px; 
    border: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.comparison-visual-box .particle-shape-img {
    max-width: 90%;
    height: auto;
    border: 1px solid #eee; /* 轻微边框，使其在白色背景下有区分度 */
    border-radius: 4px;
    /* 覆盖占位符的最小高度 */
    min-height: auto; 
    margin-bottom: 15px;
}

/* --- 15.3 Process Flow (Vertical Timeline) --- */
.flow-dark-bg {
    background-color: var(--primary-liming-dark);
}
.flow-dark-bg .module-title-centered::after {
    background-color: var(--primary-red); /* 暗背景下的红线 */
}
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
/* 时间线主轴 */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 0;
    position: relative;
    width: 50%;
}
.timeline-item:nth-child(even) {
    left: 50%; 
    padding-left: 40px;
}
.timeline-item:nth-child(odd) {
    padding-right: 40px; 
}
.timeline-item::after {
    content: "";
    clear: both;
    display: table;
}

.timeline-content {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.content-left {
    float: right;
}
.content-right {
    float: left;
}
.timeline-content::after {
    content: '';
    position: absolute;
    top: 25px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}
.content-left::after {
    border-right-color: rgba(255, 255, 255, 0.1);
    left: -20px; 
}
.content-right::after {
    border-left-color: rgba(255, 255, 255, 0.1);
    right: -20px; 
}

/* 时间线圆点 */
.timeline-dot {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: -20px;
    top: 20px;
    z-index: 100;
    /* 统一使用全局红色 */
    background-color: var(--primary-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 4px solid var(--primary-liming-dark);
}
.timeline-item:nth-child(even) .timeline-dot {
    left: -20px;
}
.timeline-item:nth-child(odd) .timeline-dot {
    right: -20px;
}
.bg-dark-liming {
    background-color: var(--primary-liming-dark) !important;
}
.text-dark-liming {
    color: var(--primary-red) !important;
}
.step-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    /* 统一使用全局红色 */
    color: var(--primary-red);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-top: 10px;
    font-weight: 500;
}
@media (max-width: 768px) {
    .timeline-container::after {
        left: 31px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item:nth-child(even) {
        left: 0%;
        padding-left: 70px;
    }
    .timeline-dot {
        left: 11px;
        right: auto;
    }
    .content-right::after, .content-left::after {
        border-right-color: transparent;
        border-left-color: rgba(255, 255, 255, 0.1);
        left: 50px;
        right: auto;
    }
}

/* 1. 优化 Step Tag 样式：让背景文字更柔和，以便链接颜色突出 */
.step-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    /* 调整文字颜色为浅灰，避免与红色链接冲突 */
    color: rgba(255, 255, 255, 0.8); 
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-top: 10px;
    font-weight: 400; /* 略微降低权重 */
}

/* 2. 新增 Step Link 样式：高亮显示设备名称 */
.step-link {
    /* 使用全局主红色，确保高亮 */
    color: var(--primary-red); 
    font-weight: 700; /* 加粗 */
    text-decoration: none; /* 默认不带下划线 */
    transition: color 0.3s, text-decoration 0.3s;
}

.step-link:hover {
    /* 悬停时颜色变深，并出现下划线 */
    color: var(--primary-hover); 
    text-decoration: underline;
}

/* 3. 核心技术（LM-VSI）的特殊处理 */
.step-tag.bg-danger {
    /* 确保整个标签背景是红色 */
    background-color: var(--primary-red) !important;
}
.step-tag.bg-danger .step-link.text-white {
    /* 在红色背景上，链接文字必须是白色 */
    color: #fff !important; 
    text-decoration: underline;
}
.step-tag.bg-danger .step-link.text-white:hover {
    /* 悬停时颜色略变灰白 */
    color: #eee !important;
}

/* --- 15.4 Equipment Showcase (静态卡片悬停渲染优化) --- */

.equipment-static-card {
    display: block;
    text-decoration: none;
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    /* 调整卡片最小高度以容纳更大的图片 */
    min-height: 430px; 
    position: relative; 
    border-bottom: 3px solid transparent; 
}

/* 悬停抬升效果 */
.equipment-static-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-bottom-color: var(--primary-red); 
}

.static-card-img {
    width: 100%;
    /* 核心修改：增加图片显示高度 */
    height: 280px; 
    object-fit: contain; 
    padding: 20px; /* 略微增加边距 */
    background-color: var(--bg-light-gray-liming); 
    transition: all 0.4s ease;
}
.equipment-static-card:hover .static-card-img {
    opacity: 0.2; /* 悬停时图片变淡，让 overlay 内容突出 */
}

.static-card-body {
    padding: 15px;
    text-align: center;
    position: relative;
    z-index: 10;
    transition: all 0.4s ease;
}
.static-card-body h5 {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

/* 悬停覆盖层 (Overlay) 样式 */
.static-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    opacity: 0; /* 默认隐藏 */
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 20;
}

/* 悬停时显示 Overlay */
.equipment-static-card:hover .static-card-overlay {
    opacity: 1;
    visibility: visible;
}

.static-card-overlay h6 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.static-card-overlay p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}
.tech-highlight {
    font-weight: 700;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* 覆盖层背景色继承 */
.static-card-overlay.bg-danger {
    background-color: var(--primary-red) !important;
}
.static-card-overlay.bg-dark-liming {
    background-color: var(--primary-liming-dark) !important;
}
.static-card-overlay.bg-primary-liming {
    background-color: #337ab7 !important;
}
.static-card-overlay .tech-highlight.text-danger {
    /* 特别处理：深色背景下高亮使用主红色 */
    color: var(--primary-red) !important; 
    border-top: 1px solid rgba(200, 0, 0, 0.5);
}


/* --- 15.5 Expert Tips & Cases --- */
.insight-box-liming-rendered {
    background: var(--bg-white);
    padding: 30px; /* 增加内边距 */
    border-radius: 8px;
    /* 增加更柔和的阴影 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* 移除左侧实线，改为底部强调线 */
    border-bottom: 3px solid transparent; 
    height: 100%;
    transition: all 0.3s ease;
    text-align: center; /* 文本居中 */
}
.insight-box-liming-rendered:hover {
    transform: translateY(-5px);
    /* 悬停时添加红色辉光和底部红线 */
    box-shadow: 0 10px 25px rgba(251, 58, 74, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid var(--primary-red);
}
.insight-box-liming-rendered i {
    font-size: 2.5rem; /* 增大图标 */
    margin-bottom: 15px;
    /* 移除 text-danger 类，让图标颜色由下面的 CSS 控制 */
    color: var(--primary-red);
}
.insight-box-liming-rendered h5 {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.2rem; /* 增大标题 */
}
.insight-box-liming-rendered p {
    color: var(--text-body);
}

/* 案例研究按钮优化 */
.btn-case-render {
    /* 增加按钮视觉重量 */
    padding: 15px 40px; 
    font-size: 1.1rem;
    border-radius: 4px;
}
.btn-case-render:hover {
    background-color: #444;
}
.insight-box-liming i {
    font-size: 2rem;
    margin-bottom: 15px;
}
.btn-dark-liming {
    background-color: var(--primary-liming-dark);
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.btn-dark-liming:hover {
    background-color: #444;
}

/* 案例卡片容器样式 */
.case-study-promo-box {
    display: block; /* 使整个卡片可点击 */
    text-align: center;
    background-color: var(--bg-white);
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent; /* 默认无色底线 */
    height: 100%;
}

/* 悬停渲染效果 */
.case-study-promo-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* 悬停时出现红色底线，增加强调 */
    border-bottom-color: var(--primary-red);
}

.case-study-promo-box .case-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.case-study-promo-box .case-subtext {
    font-size: 0.9rem;
    /* 使用主红色突出 TPH 和地点信息 */
    color: var(--primary-red); 
    margin-bottom: 20px;
    font-weight: 500;
}

/* 优化卡片内按钮的显示，使其更紧凑 */
.btn-case-render-small {
    /* 缩小按钮 */
    padding: 8px 20px !important; 
    font-size: 0.9rem !important;
    background-color: var(--primary-liming-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: background-color 0.3s;
}
.btn-case-render-small:hover {
    /* 悬停时从深色变红色 */
    background-color: var(--primary-red) !important; 
}




/* --- 15.6 Final CTA (Full Screen Dark Impact) --- */
.cta-final-liming-dark {
    padding: 100px 0;
    /* RGBA 中的最后一个数值控制透明度。这里设置为 0.4，即 40% 的透明度。 */
    /* 如果想更亮，可以把 0.4 改为 0.3 或 0.2。 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
        url('images/index/customized-solution.jpg');
        
    /* 确保图片覆盖整个区域 */
    background-size: cover; 
    background-position: center;
}
.cta-final-title-liming {
    font-size: 3rem;
    font-weight: 700;
    /* 字体已继承全局 Oswald */
    color: #fff;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
}
.lead-white {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem;
}
.btn-cta-xl-liming {
    /* 按钮使用全局红 */
    background-color: var(--primary-red);
    color: #fff;
    font-weight: 700;
    padding: 18px 60px;
    font-size: 1.4rem;
    border-radius: 4px;
    transition: all 0.3s;
    border: 2px solid var(--primary-red);
    text-transform: uppercase;
}
.btn-cta-xl-liming:hover {
    /* 悬停使用全局悬停红 */
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}


.case-hero-liming-dark {
    padding: 180px 0px 150px;
    /* 使用深色调背景，突出专业和沉稳 */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/banner/banner-case.webp'); 
    background-size: cover;
    background-position: center;
}
.hero-title-heavy {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 2px;
}
.lead-white {
    font-size: 1.2rem;
    max-width: 800px;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.85);
}

/* 20.2 Key Statistics / Milestones (核心数据) */
.milestone-item {
    padding: 30px 15px;
    /* 悬浮轻微抬升效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.milestone-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.milestone-number {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-red) !important; /* 数字用红色高亮 */
    margin-bottom: 5px;
}
.milestone-text {
    font-weight: 500;
    color: var(--text-dark);
    text-transform: uppercase;
}



/* 20.4 Highlight Case (精选案例渲染模块) */
.highlight-case-block {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 整体柔和阴影 */
    overflow: hidden;
}
.highlight-case-visual img {
    /* 悬浮放大效果 */
    transition: transform 0.5s ease;
}
.highlight-case-block:hover .highlight-case-visual img {
    transform: scale(1.05); 
}
.highlight-case-content {
    padding: 30px;
    background-color: var(--bg-white);
    /* 增加左侧红线强调 */
    border-left: 5px solid var(--primary-red);
}
.highlight-tag {
    display: inline-block;
    background-color: var(--primary-red);
    color: #fff;
    padding: 5px 12px;
    margin-bottom: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 3px;
}
.case-details-list li {
    font-size: 1rem;
    line-height: 2.2;
    border-bottom: 1px dotted #eee;
}
.btn-red-liming-heavy {
    background-color: var(--primary-red);
    color: #fff;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.btn-red-liming-heavy:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.4);
}

/* 20.5 Why Choose Liming (价值主张) */
.why-case-box {
    padding: 25px;
    border-radius: 8px;
    background-color: var(--bg-light-gray-liming);
    height: 100%;
    /* 悬浮抬升和边框变红 */
    border-bottom: 3px solid transparent; 
    transition: all 0.3s ease;
}
.why-case-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--primary-red);
}
.icon-red-liming {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 15px;
}
.why-case-box h5 {
    font-weight: 700;
}
.case-card-liming-new {
    display: block;
    background-color: var(--bg-white);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* 确保同一行卡片高度一致 */
    color: inherit; /* 继承颜色 */
    text-decoration: none; /* 移除下划线 */
}

.case-card-liming-new:hover {
    transform: translateY(-5px); /* 向上浮动效果 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    color: var(--text-dark); /* 悬停时文本颜色加深 */
}

/* 图片容器 */
.case-card-image-wrap {
    overflow: hidden;
    height: 220px; /* 统一图片高度 */
}

.case-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片覆盖容器 */
    transition: transform 0.5s ease;
}

/* 悬停时图片放大 */
.case-card-liming-new:hover .case-card-image-wrap img {
    transform: scale(1.08);
}

/* 详情内容区 */
.case-card-content {
    min-height: 130px; /* 确保内容区高度有保障 */
}

.case-title-new {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 5px;
}

.case-location-new {
    font-size: 0.95rem;
}

/* 案例标签样式 */
.case-tags-new .tag-render {
    display: inline-block;
    background-color: #e9ecef; /* 浅灰色背景 */
    color: var(--text-body);
    font-size: 0.75rem;
    padding: 3px 8px;
    margin-right: 5px;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
}



/* --- 16. Media Center (media.html) 样式 --- */

/* 16.0 媒体中心 Hero Banner 样式 (保留不变) */
.liming-media-hero {
    min-height: 350px; 
    padding: 150px 0px;
    display: flex;
    align-items: center;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
        url('images/banner/banner-news.jpg'); /* 确保图片存在 */
    background-size: cover; 
    background-position: center;
    position: relative;
    z-index: 1;
}


/* --- 16.1 增强型标签切换栏 (Grand Tab Style) --- */
.liming-media-tabs-grand {
    padding: 30px 0; /* 增加垂直内边距，让 Tab 看起来更大 */
    display: flex;
    justify-content: center;
    background-color: var(--bg-white);
    border-bottom: 1px solid #eee;
}

.liming-media-tab-grand {
    font-family: 'Oswald', sans-serif; /* 使用更粗犷的字体 */
    font-size: 1.3rem; /* 字体加大 */
    font-weight: 700;
    padding: 15px 35px; /* 增加内边距，让按钮看起来更宽 */
    margin: 0 15px; /* 增加间距 */
    color: var(--text-dark);
    border-radius: 50px; /* 圆角设计 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    letter-spacing: 1px;
    position: relative;
}

/* 悬停效果：背景色和轻微阴影 */
.liming-media-tab-grand:hover {
    color: var(--primary-red);
    background-color: #f7f7f7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 激活状态：更强的炫酷效果 */
.liming-media-tab-grand.active {
    color: var(--bg-white); 
    background-color: var(--primary-red); 
    box-shadow: 0 6px 20px rgba(251, 58, 74, 0.6); /* 强化阴影效果 */
}
.liming-media-tab-grand.active:hover {
    background-color: var(--primary-hover);
    color: var(--bg-white);
}

/* --- 16.2 两列新闻卡片样式 (Dual Column Style) --- */
/* --- 头条新闻 (Featured News) 特殊样式 --- */
.liming-news-featured {
    background: #fff;
    border: none;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.liming-news-featured:hover {
    box-shadow: 0 30px 60px rgba(0,0,0,0.15) !important;
    transform: translateY(-5px);
}

/* 布局控制 */
.featured-link-overlay {
    display: flex;
    text-decoration: none;
    color: inherit;
}

/* 图片部分 - 占据 50% 或更多 */
.featured-img-wrap {
    flex: 0 0 55%; /* 电脑端图片占55%宽度 */
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease; /* 超长平滑缩放 */
}

.liming-news-featured:hover .featured-img-wrap img {
    transform: scale(1.08);
}

/* 内容部分 */
.featured-content-wrap {
    background-color: #fff;
	position: relative;
    border-left: 3px solid var(--primary-red); /* 侧边红线渲染 */
}

.featured-title-heavy {
    font-size: 2.2rem; /* 大标题 */
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.liming-news-featured:hover .featured-title-heavy {
    color: var(--primary-red);
}

.featured-excerpt {
    color: #666;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
}
/* 响应式调整：平板和手机端改为上下堆叠 */
@media (max-width: 991px) {
    .featured-link-overlay {
        flex-direction: column;
    }
    .featured-img-wrap {
        flex: 0 0 100%;
        min-height: 250px;
    }
    .featured-title-heavy {
        font-size: 1.8rem;
    }
    .featured-content-wrap {
        border-left: none;
        border-top: 5px solid var(--primary-red);
    }
}

/* 1. 图片外层包裹容器 - 负责控制比例和溢出 */
.liming-news-img-wrap-dual {
    position: relative;
    width: 100%;
    height: 300px; /* 您可以根据需要调整高度，300-350比较大气 */
    overflow: hidden; /* 必须，为了配合悬停放大效果 */

}

/* 2. 真正的图片标签样式 */
.liming-news-img-wrap-dual img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心：确保图片填满容器且不变形 */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block;
}

/* 3. 悬停时的放大效果 */
.liming-news-card-dual:hover .liming-news-img-wrap-dual img {
    transform: scale(1.1);
}

/* 鼠标悬停时：标题变色并稍微右移 */
.liming-news-card-dual:hover .liming-news-title-dual,
.liming-news-featured:hover .featured-title-heavy {
    color: var(--primary-red);
    transform: translateX(8px); /* 灵动的位移效果 */
}


/* 5. 卡片基础结构优化 */
.liming-news-card-dual {
    background-color: #fff;

    transition: all 0.3s ease;
}

.liming-news-card-dual:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

/* 标题和元数据保持简洁 */
.liming-news-title-dual {
font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    margin-top: 5px;
    color: var(--text-dark); /* 默认深色 */
    
    /* 核心：添加平滑过渡动画 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-block; /* 为了让下划线动画宽度适应文字 */
}

/* --- 鼠标悬浮在【整个卡片】上时，标题的变化 --- */
.liming-news-card-dual:hover .liming-news-title-dual {
    color: var(--primary-red); /* 悬浮时变成品牌红 */
    transform: translateX(5px); /* 标题轻微向右移动，增加灵动感 */
}

/* --- 可选：增加一个炫酷的下划线展开效果 --- */
.liming-news-title-dual::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--primary-red);
    transition: width 0.3s ease;
}

.liming-news-card-dual:hover .liming-news-title-dual::after {
    width: 100%; /* 悬浮时下划线从左向右展开 */
}
.liming-news-meta-dual {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .liming-news-img-wrap-dual {
        height: 220px; /* 手机端降低高度 */
    }
}


/* 移动端适配 */
@media (max-width: 991.98px) {
    /* 移动端变为单列 */
    .col-lg-6 {
        width: 100%;
    }
    .liming-news-img-dual {
        height: 200px;
    }
    .liming-news-title-dual {
        font-size: 1.3rem;
    }
    /* 缩小 Tab 切换栏大小 */
    .liming-media-tab-grand {
        font-size: 1.1rem;
        padding: 10px 20px;
        margin: 5px;
    }
    .liming-media-tabs-grand {
        padding: 20px 0;
    }
}


/* --- News Detail 专用样式 --- */

/* 1. 全屏 Hero 样式 (参照您提供的 ab-page-hero 格式) */
.news-detail-hero {
    padding: 200px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                      url('images/banner/banner-news.jpg'); /* 这里放您的背景图 */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.news-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}



/* 2. 文章正文样式 */
.article-title {
    font-size: 2.2rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-dark);
}

.entry-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}

/* 正文 A 标签链接渲染 */
.entry-content a {
    color: var(--primary-red);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(251, 58, 74, 0.3);
    transition: all 0.3s ease;
}

.entry-content a:hover {
    color: var(--primary-hover);
    border-bottom-color: var(--primary-red);
}

/* 3. WordPress 图片块居中渲染 (核心) */
.wp-block-image {
    margin: 40px 0;
    width: 100%;
    display: block;
}

.wp-block-image figure.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* 确保内容在容器内居中 */
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.wp-block-image figcaption {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
}
/* --- 针对 entry-content 内部图片的炫酷动感渲染 --- */

.entry-content .wp-block-image {
    margin: 4rem 0;
    perspective: 1000px; /* 为 3D 效果准备 */
}

.entry-content .wp-block-image figure {
    position: relative;
    display: table;
    margin: 0 auto;
    overflow: hidden; /* 必须，为了切掉溢出的光效 */
    border-radius: 8px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 图片基础样式 */
.entry-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    filter: brightness(0.95); /* 默认稍微暗一点，增加质感 */
}

/* 动感效果：伪元素实现光泽流过动画 */
.entry-content .wp-block-image figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    z-index: 1;
    transition: none;
}

/* --- 悬停 (Hover) 状态的动感组合 --- */
.entry-content .wp-block-image figure:hover {
    transform: translateY(-10px) rotateX(2deg); /* 向上浮动并带有轻微 3D 仰角 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); /* 阴影变深变大 */
}

.entry-content .wp-block-image figure:hover img {
    transform: scale(1.05); /* 图片微量放大 */
    filter: brightness(1); /* 恢复亮度 */
}

/* 悬停时触发光效流过 */
.entry-content .wp-block-image figure:hover::before {
    left: 150%;
    transition: all 0.8s ease;
}

/* 图片说明文字 (Figcaption) 的动感细节 */
.entry-content .wp-block-image figcaption {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #888;
    font-style: italic;
    text-align: center;
    transition: color 0.3s ease;
}

.entry-content .wp-block-image figure:hover figcaption {
    color: var(--primary-red); /* 悬停时文字变色提示 */
}

/* 装饰性红线 - 增加品牌感 */
.entry-content .wp-block-image figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--primary-red);
    transition: width 0.5s ease;
    z-index: 2;
}

.entry-content .wp-block-image figure:hover::after {
    width: 100%; /* 悬停时底部滑出红线 */
}
/* 响应式调整 */
@media (max-width: 768px) {
    .news-hero-title { font-size: 2rem; }
    .news-detail-hero { padding: 120px 0 60px 0; }
    .article-title { font-size: 1.6rem; }
}


/* --- SBM 核心变量 --- */
:root {
    --sbm-gray: #f2f6ff;
    --primary-red: #fb3a4a;
    --text-dark: #222222;
	--sbm-transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 1. 左侧大头条：黑色透明背景修正 --- */
.sbm-main-featured {
    position: relative;
    height: 100%;
}

.featured-img-container {
	width: 100%;
    height: 400px; /* 或者改为 aspect-ratio: 16 / 9; */
    overflow: hidden;
    background: #000;
}

.featured-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85; /* 略微降低透明度，让底色黑色透出来，增加厚重感 */
    transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
}

/* 重点修改：黑色透明渲染背景块 */
.featured-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; 
    z-index: 2;
}

.featured-title-overlay h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    text-transform: none;
    font-weight: 400;
	padding:10px 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 给文字加点阴影，更清晰 */
	background: rgba(0, 0, 0, 0.5);
}

.sbm-main-featured:hover img {
    transform: scale(1.05);
    opacity: 1; /* 鼠标悬浮时图片变亮 */
}

/* --- 2. 右侧简化列表 --- */
.sbm-side-list-container { background: var(--sbm-gray); }
.sbm-side-pure-list li a {
    display: flex; align-items: center; padding: 15px 15px;
    border-bottom: 1px solid #e8e8e8; transition: 0.4s; text-decoration: none;
}
.side-number { font-size: 1.4rem; color: #bbb; font-weight: 700; margin-right: 20px; }
.side-title { font-size: 0.95rem; font-weight: 500; color: #333; }
.sbm-side-pure-list li a:hover { background: #fff; padding-left: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.sbm-side-pure-list li a:hover .side-number, 
.sbm-side-pure-list li a:hover .side-title { color: var(--primary-red); }

/* --- 3. 最新文章：动感美化 --- */
.sbm-news-row-item {
    background: var(--sbm-gray);
    transition: all 0.5s ease;
    border-left: 0 solid var(--primary-red);
}

.sbm-news-row-item:hover {
    background: #eeeeee;
    border-left: 6px solid var(--primary-red);
    transform: translateX(10px);
}
.news-thumb-box {
    width: 100%;
    aspect-ratio: 4 / 3; /* 让列表图也保持一致比例 */
    overflow: hidden;
}
.news-thumb-box img {
    transition: 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sbm-news-row-item:hover .news-thumb-box img {
    transform: scale(1.1);
    filter: brightness(1.1); /* 悬浮时图片增亮 */
}

.sbm-link-btn {
    font-weight: 700; color: var(--text-dark);
    border-bottom: 2px solid var(--primary-red);
    transition: 0.3s;
}

.sbm-link-btn:hover {
    color: var(--primary-red);
    padding-left: 5px;
}

/* --- 自适应处理 --- */
@media (max-width: 991px) {
    .featured-img-container { height: 350px; }
    .sbm-news-row-item:hover { transform: none; }
}


/* --- 轮播整体间距 --- */
/* --- 解决竖排问题：确保 Row 在 Carousel 里的弹性布局 --- */
.carousel-item .row {
    display: flex;
    flex-wrap: wrap; /* 手机端允许换行(1行2个) */
}

@media (min-width: 768px) {
    .carousel-item .row {
        display: flex !important;
        flex-wrap: nowrap !important; /* 强制不换行 */
    }
	.carousel-item .col-md-3 {
        flex: 0 0 25%; /* 强制每张卡片占 25% 宽度 */
        max-width: 25%;
    }
}

/* --- SBM 风格指示器 (3个按钮) --- */
.sbm-pill-indicators {
    position: relative; /* 脱离图片绝对定位 */
    margin-top: 40px;
    bottom: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.sbm-pill-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px;  /* 默认是小圆点 */
    height: 12px;
    padding: 0;
    margin-right: 8px;
    margin-left: 8px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--primary-red); /* 默认灰色 */
    background-clip: padding-box;
    border: none;
    border-radius: 50%; /* 圆形 */
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 重点：激活状态变为长条状 (SBM风格) */
.sbm-pill-indicators .active {
    width: 40px; /* 激活时长度拉长 */
    background-color: var(--primary-red); /* 变为红色 */
    border-radius: 6px; /* 变为圆角长条 */
}

/* --- 卡片细节美化 --- */
.sbm-topic-card {
    background: #fff;
    padding: 15px;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    height: 100%;
}

.sbm-topic-card .topic-img {
width: 100%;
    /* 核心代码：强制 4:3 比例 (400x300) */
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    background-color: #f0f0f0; /* 图片未加载时的占位色 */
}

.sbm-topic-card .topic-img img {
    width: 100%;
    height: 100%;
    /* 核心代码：自动剪裁，图片居中填充，不拉伸 */
    object-fit: cover; 
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.sbm-topic-card h6 {
    color: #333;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
	padding-top:10px;
}

/* 悬停动感 */
.sbm-topic-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.sbm-topic-card:hover img {
    transform: scale(1.1);
}

.sbm-topic-card:hover h6 {
    color: var(--primary-red);
}



/* --- 文章详情页全屏渲染方案 --- */
/* --- Blog Banner (Hero Section) --- */
.blog-page-hero {
    position: relative;
    /* 替换为你选定的背景图片地址 */
    background-image: url('images/banner/banner_blog.webp'); 
background-size: cover;
    background-position: center;
   
    padding: 220px 0px;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

/* 黑色渐变遮罩：确保文字在任何图片下都清晰 */
.blog-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用渐变遮罩，底部稍深，更有层次感 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* 确保容器内容在遮罩层之上 */
.blog-page-hero .container {
    position: relative;
    z-index: 2;
}

/* 标题样式：Oswald 字体 + 红色修饰线 */
.blog-hero-title {
font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    z-index: 2;
    /* 加入文字阴影增强可读性 */
    text-shadow: 2px 4px 10px rgba(0,0,0,0.3);
	color:#fff;
}

/* 标题下方的装饰短红线 */
.blog-hero-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--primary-red);
    box-shadow: 0 2px 10px rgba(251, 58, 74, 0.5);
}



/* 响应式调整 */
@media (max-width: 768px) {
    .blog-page-hero {
        padding: 80px 0 50px;
    }
    .ab-hero-title {
        font-size: 2rem;
    }
    .breadcrumb-item.active {
        max-width: 200px;
    }
}

.blog-single-section {
    padding: 80px 0;
    background-color: #fff;
}

.blog-single-header {
    text-align: center;
    margin-bottom: 50px;
}

.blog-single-title {
    font-size: 3.2rem; /* 加大标题 */
    font-weight: 800;
    color: #222;
    line-height: 1.2;
    margin: 20px 0;
    text-transform: none; /* 保持自然大小写 */
}

.blog-single-meta {
    color: var(--primary-red);
    font-weight: 600;
    letter-spacing: 1px;
}



/* --- 正文内容渲染 --- */
.blog-single-content {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #444;
}
.blog-single-content h2 {
            
            font-size: 2rem;
            font-weight: 700;
            margin: 50px 0 30px;
            color: var(--secondary-color);
            position: relative;
            padding-bottom: 15px;
}
        
.blog-single-content h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 2px;
}
        
.blog-single-content h3 {
            font-size: 1.6rem;
            font-weight: 600;
            margin: 40px 0 25px;
            color: var(--secondary-color);
}
.blog-single-intro {
    font-size: 1.35rem;
    color: #666;
    font-weight: 300;
    padding: 30px;
    background: rgba(251, 58, 74, 0.05); /* 淡淡的主题红 */
    border-radius: 0 8px 8px 0;
    margin-bottom: 40px;
}
.blog-single-content a {
    color: var(--primary-red);
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--primary-red), var(--primary-red));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px; /* 初始下划线长度为0 */
    transition: background-size 0.3s;
}

.blog-single-content a:hover {
    background-size: 100% 2px; /* 悬浮时下划线从左向右展开 */
    color: var(--primary-red);
}


/* --- 博客文章目录 (Table of Contents) 完整样式 --- */
.toc-static-box {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 25px !important;
    margin: 30px 0px !important;/* margin: 30px auto!important;这是设置宽度后，居中*/
    max-width: 100%;/* 如果需要设置宽度，可以修改成，数字随便写600px !important;*/
    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
    font-family: 'Roboto', sans-serif !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.toc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

.toc-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.toc-title i { color: var(--primary-red) !important; margin-right: 12px !important; }

.toc-toggle {
    font-size: 0.8rem !important;
    color: var(--primary-red) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* 列表条目 */
#toc-content ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.toc-h2-item {  padding: 8px 0 !important; }
.toc-h2-item:last-child {
    border-bottom: none;
}
.toc-h2-wrapper { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.toc-h2-wrapper::before {
    content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--primary-red); margin-right: 10px;
}
.toc-h2-item a {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1.0rem;
    text-decoration: none;
    transition: color 0.3s;
    flex: 1;
}
.toc-h2-item a:hover {
    color: var(--primary-red);
}
.toc-h2-wrapper a { color: #333 !important; font-weight: 600 !important; text-decoration: none !important; flex: 1; }
.toc-h3-list { margin-left: 25px !important; overflow: hidden !important; max-height: 0; transition: max-height 0.4s ease; }
.toc-h2-item.active .toc-h3-list { max-height: 1000px !important; padding: 5px 0 !important; }

.has-sub-icon {
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #999;
    transition: all 0.3s ease;
    margin-left: 10px;
}
.has-sub-icon:hover {
    background: var(--primary-red);
    color: #ffffff;
}
.toc-h2-item.active .has-sub-icon {
    transform: rotate(180deg);
    background: #eee;
    color: var(--text-dark);
}
/* H3 单个条目样式 */
.toc-h3-item {
    padding: 6px 0;
    position: relative;
    padding-left: 15px;
}

/* H3 前面的连接线装饰 */
.toc-h3-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: #ddd;
}

.toc-h3-item a {
    color: #666 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
	
}

.toc-h3-item a:hover {
    color: var(--primary-red) !important;

}
/* --- 2. 核心：悬浮模式 (极致锁定防变形) --- */
@media (min-width: 992px) {
    /* 收缩态：强制锁定为 48px 正方形 */
    .toc-static-box.sticky-active {
        position: fixed !important;
        top: 150px !important;
        right: 0 !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;   /* 彻底取消 Padding */
        margin: 0 !important;
        overflow: hidden !important; 
        background: var(--primary-red) !important;
        z-index: 99999 !important;
        border-radius: 10px 0 0 10px !important;
        border: none !important;
        box-shadow: -2px 5px 15px rgba(0,0,0,0.2) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 展开态：鼠标移入 */
    .toc-static-box.sticky-active:hover {
        width: 350px !important;
        height: auto !important;
        max-height: 80vh !important;
        padding: 20px !important; /* 展开时恢复 Padding */
        background: #ffffff !important;
        border: 1px solid #ddd !important;
        overflow-y: auto !important;
    }

    /* 内部元素显隐逻辑：通过 :not(:hover) 确保收缩时内容彻底不占位 */
    .toc-static-box.sticky-active:not(:hover) .toc-title span,
    .toc-static-box.sticky-active:not(:hover) .toc-toggle,
    .toc-static-box.sticky-active:not(:hover) #toc-content {
        display: none !important;
    }

    /* 悬浮头部的图标对齐 */
    .toc-static-box.sticky-active .toc-header {
        height: 48px !important; /* 收缩时与容器同高 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important; /* 图标居中 */
        border: none !important;
    }

    .toc-static-box.sticky-active:hover .toc-header {
        height: auto !important;
        justify-content: space-between !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .toc-static-box.sticky-active .toc-title i { color: #fff !important; margin: 0 !important; font-size: 1.2rem !important; }
    .toc-static-box.sticky-active:hover .toc-title i { color: var(--primary-red) !important; margin-right: 10px !important; }
    
    /* 解决 Hide All 逻辑在悬浮下的冲突 */
    .toc-static-box.sticky-active:hover #toc-content.toc-hide { display: none !important; }
}

/* 锚点跳转修正 */
:target::before { content: ""; display: block; height: 100px; margin: -100px 0 0; }
.toc-hide { display: none !important; }


/* 当屏幕宽度小于 992px（即手机和平板）时，完全隐藏目录盒子 */
@media (max-width: 991px) {
    .toc-static-box {
        display: none !important;
    }
}




/* --- 博客作者 Styles --- */
/* --- Author Bio V2: Consultation Edition --- */
.author-bio-card-v2 {
    position: relative;
    background: #ffffff;
    border: 1px solid #eee;
    padding: 35px 40px;
    margin: 60px 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}

/* 背景水印 */
.bio-bg-watermark {
    position: absolute;
    right: -15px;
    bottom: -10px;
    font-size: 7rem;
    font-weight: 900;
    color: #f9f9f9;
    z-index: 1;
    font-family: 'Oswald', sans-serif;
    pointer-events: none;
}

.bio-inner {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 35px;
}

/* 头像部分 */
.bio-avatar-wrapper {
    flex: 0 0 130px;
    text-align: center;
}

.avatar-ring {
    width: 120px;
    height: 120px;
    padding: 4px;
    background: linear-gradient(135deg, #fb3a4a 0%, #a31d28 100%);
    border-radius: 50%;
    margin-bottom: 12px;
}

.avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.expert-status {
    font-size: 0.65rem;
    font-weight: 700;
    color: #28a745;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 内容部分 */
.bio-content {
    flex: 1;
}

.bio-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bio-label {
    font-size: 0.7rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* 方案3：咨询按钮美化 */
.bio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fb3a4a;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(251, 58, 74, 0.2);
}

.bio-btn:hover {
    background: #222;
    transform: translateX(3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #fff !important;
}

.bio-btn i {
    font-size: 0.65rem;
    transition: transform 0.3s;
}

.bio-btn:hover i {
    transform: translateX(3px);
}

.bio-name {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #222 !important;
    margin: 0 0 5px 0 !important;
    font-family: 'Oswald', sans-serif;
}

.bio-experience {
    font-size: 0.85rem;
    color: #fb3a4a;
    font-weight: 600;
    margin-bottom: 15px;
}

.bio-divider {
    width: 40px;
    height: 3px;
    background: #fb3a4a;
    margin-bottom: 18px;
}

.bio-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .author-bio-card-v2 {
        padding: 30px 20px;
    }
    .bio-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .bio-meta {
        flex-direction: column;
        gap: 15px;
    }
    .bio-divider {
        margin: 15px auto;
    }
}


/* 列表样式：常规实心点 */
.blog-single-content ul.wp-block-list {
   padding-left: 2rem;
    margin: 1.5rem 0;
}

.blog-single-content ul.wp-block-list li {
    list-style-type: disc; /* 实心圆点 */
    margin-bottom: 12px;
}

.blog-single-content ol {
    padding-left: 25px;
    margin: 25px 0;
}

.blog-single-content ol li {
    margin-bottom: 12px;
}

/* 图片处理：适配 WP 原生结构 */
.wp-block-image {
    margin: 50px 0;
    text-align: center;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 15px 45px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

.wp-block-image:hover img {
    transform: scale(1.01); /* 微弱动感 */
}

/* --- 表格样式：th 主题红 & 悬浮变色 --- */
.wp-block-table {
    margin: 40px 0;
    width: 100%;
    overflow-x: auto;
	border-collapse: collapse;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th {
    background-color: var(--primary-red); /* 主题红背景 */
    color: #fff;
    padding: 15px;
    text-align: center;
    border: 1px solid var(--primary-red);
}

.wp-block-table td {
    padding: 12px;
    border: 1px solid #eee;
    text-align: center;
    transition: background 0.3s ease;
}

/* 鼠标悬浮表格行：背景淡红 */
.wp-block-table tr:hover td {
    background-color: rgba(251, 58, 74, 0.05); /* 主题红的超淡透明色 */
    color: var(--primary-red);
}

/* --- 博客详情页底部：标签与分享区域 --- */
/* 标签和分享 */
        .blog-single-footer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--light-gray);
            border-bottom: 1px solid var(--light-gray);
        }
        
        .blog-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        
        .blog-tags span {
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .blog-tags a {
            background: rgba(251, 58, 74, 0.1);
            color: var(--primary-color);
            padding: 6px 15px;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .blog-tags a:hover {
            background: var(--primary-color);
            color: white;
        }
        
        .blog-share {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .blog-share span {
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .blog-share a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-color);
            transition: all 0.3s ease;
        }
        
        .blog-share a:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-5px);
        }
        
/* --- 强化版 WordPress 图片说明居中逻辑 --- */

/* 1. 强制覆盖内联的 display 属性 */
.wp-block-image figcaption {
    display: block !important; /* 必须加 !important 才能覆盖内联样式 */
    text-align: center !important; /* 强制文字居中 */
    
    /* 以下是美化样式，建议保留 */
    width: 100% !important; 
    margin: 10px auto 0 !important;
    font-family: 'Roboto', sans-serif;
    color: #666;
    font-size: 0.9rem;
}

/* 2. 确保父容器 figure 的对齐逻辑正确 */
figure.aligncenter {
    display: flex !important; /* 改用 flex 布局更容易实现内部元素整体居中 */
    flex-direction: column;
    align-items: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. 针对居中图片的说明，确保没有多余的偏移 */
figure.aligncenter figcaption {
    max-width: 800px; /* 限制最大宽度，防止长句子撑满全屏 */
}



/* --- 相关阅读区域基础 --- */
.blog-related-section {
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid #eee;
}

.blog-related-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #222;
}

/* 网格系统 */
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 电脑端 3 列 */
    gap: 20px;
}

/* 卡片外壳 */
.blog-related-card {
    border-bottom: 1px solid #eee; /* 列表感：底部加线 */
    transition: all 0.3s ease;
}

/* 核心：全卡片链接 */
.blog-related-main-link {
    display: block;
    text-decoration: none !important;
    padding: 15px 0; /* 增加点击区域间距 */
    color: inherit;
}

/* --- 图片容器：初始状态隐藏 --- */
.blog-related-img-box {
    max-height: 0; /* 高度为0 */
    opacity: 0;    /* 透明度为0 */
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 顺滑的展开曲线 */
    margin-bottom: 0;
}

.blog-related-img-box img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

/* 标题样式 */
.blog-related-title-card {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #444;
    margin: 0;
    transition: color 0.3s ease;
    position: relative;
    padding-left: 20px; /* 为左侧小图标留位 */
}

/* 模拟 Zenith 的列表圆点或箭头 */
.blog-related-title-card::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #ccc;
    transition: color 0.3s ease;
}

/* --- 悬浮交互 (Hover & Active) --- */

/* 1. 标题变色 */
.blog-related-card:hover .blog-related-title-card {
    color: var(--primary-red);
}
.blog-related-card:hover .blog-related-title-card::before {
    color: var(--primary-red);
}

/* 2. 图片展开显示 */
.blog-related-card:hover .blog-related-img-box {
    max-height: 300px; /* 展开后的预估最大高度 */
    opacity: 1;
    margin-bottom: 15px; /* 展开后与文字保持间距 */
}

/* 3. 卡片背景微变（可选，增强反馈） */
.blog-related-card:hover {
    border-bottom-color: var(--primary-red);
}

/* --- 响应式适配 --- */

/* 平板端：两列 */
@media (max-width: 991px) {
    .blog-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机端：一列 (满足您的一行一个要求) */
@media (max-width: 767px) {
    .blog-related-grid {
        grid-template-columns: 1fr;
    }
    
    /* 手机端可以默认让图片显示，或者保持悬浮触发（点击触发） */
    .blog-related-title-card {
        font-size: 1.05rem;
    }
}

/* 响应式适配：手机端标签和分享垂直排列 */
@media (max-width: 768px) {
    .blog-single-footer {
       flex-direction: column; /* 在平板和手机上直接垂直排列 */
        align-items: flex-start;
    }
    .blog-share {
       margin-left: 0; /* 手机端如果空间极小，允许它靠左对齐，更符合阅读习惯 */
        width: 100%;    /* 占满全宽 */
        justify-content: flex-start;
        border-top: 1px dashed var(--light-gray); /* 增加一个微妙的分割线 */
        padding-top: 15px;
    }
}



/* --- 产品列表页专用样式 --- */
/* --- 1. Product Hero - 沉浸式首屏 --- */
.product-hero-premium {
    height: 80vh;
    min-height: 600px;
    background: url('images/banner/banner_product.jpg') center/cover no-repeat fixed;
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
}
/* 当屏幕宽度小于 768px 时（手机端） */
@media (max-width: 768px) {
    .product-hero-premium {
        height: 60vh;      /* 手机上占 60% 高度即可 */
        min-height: 400px; /* 手机上的最小高度降到 400px */
    }
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(70deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.hero-tag {
    color: var(--primary-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 20px;
}

.hero-main-title {
    font-size: 4rem;
    line-height: 0.9;
    font-weight: 800;
    margin-bottom: 30px;
}

.hero-main-title span {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}

/* --- 2. Category Block - 大厂水印感 --- */
.category-block {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.bg-dark-industrial {
    background-color: #111;
    color: #fff;

}

.bg-dark-industrial .cat-title { color: #fff; }

.category-watermark {
    position: absolute;
    font-family: 'Oswald', sans-serif;
    font-size: 15vw;
    font-weight: 900;
    color: rgba(255,255,255,0.03);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}

.category-watermark.text-light {
    color: rgba(0,0,0,0.03);
}

.cat-header {
    display: flex;
    align-items: flex-start; /* 或者 center，取决于您的设计 */
    margin-bottom: 25px;
}

.cat-number {
    display: inline-block;
    font-family: 'Oswald', 'Arial Black', sans-serif; /* 建议使用这种硬朗的工业风字体 */
    font-size: 3rem;           /* 根据需要调整大小 */
    font-weight: 900;
    font-style: italic;        /* 关键：倾斜增加动感 */
    line-height: 1;
    margin-right: 15px;
    position: relative;
    
    /* 颜色基调：白色文字 */
    color: #ffffff;
    
    /* 核心样式：模拟图片中的双层效果 */
    /* 第一层：红色描边/背景投影 */
    /* 第二层：深色阴影增加立体感 */
    text-shadow: 
        2px 2px 0px #ff3b3b,  /* 红色偏移阴影 */
        4px 4px 0px rgba(0, 0, 0, 0.2); /* 浅灰色立体阴影 */
        
    /* 动感微调：稍微降低一点不透明度或增加渐变感 */
    background: linear-gradient(to bottom, #ffffff 40%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 入场动画：让它更有“动感” */
    animation: numberSlideIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 简单的入场动画：从左侧滑入并带有透明度变化 */
@keyframes numberSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px) skewX(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg);
    }
}

.cat-title {
    font-size: 3rem;
    margin-bottom: 15px;
}
.cat-header-text {
    display: flex;
    flex-direction: column;
}

/* --- 3. Product Card Premium - 核心特效 --- */
.product-card-premium {
    position: relative;
    background: #1a1a1a;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 1;
}

.light-variant { background: #fff; border: 1px solid #eee; }

.pc-image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.pc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* 悬浮黑色/红色遮罩 */
.pc-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(251, 58, 74, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
    transform: translateY(100%);
}

.pc-specs {
    text-align: center;
    color: #fff;
}

.spec-item { margin-bottom: 20px; }
.spec-item span { display: block; font-size: 0.7rem; opacity: 0.8; letter-spacing: 2px; }
.spec-item strong { display: block; font-size: 1.4rem; font-family: 'Oswald'; }

/* 内容区 */
.pc-content {
    padding: 30px;
}

.pc-content h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: inherit;
    transition: 0.3s;
}

.pc-link {
    font-weight: 700;
    color: var(--primary-red);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.pc-link i { margin-left: 10px; transition: 0.3s; }

/* --- 悬浮动画触发 --- */
.product-card-premium:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.product-card-premium:hover .pc-image-wrapper img {
    transform: scale(1.1);
}

.product-card-premium:hover .pc-overlay {
    opacity: 1;
    transform: translateY(0);
}

.product-card-premium:hover h3 {
    color: var(--primary-red);
}

.product-card-premium:hover .pc-link i {
    transform: translateX(10px);
}

/* 移动端适配 */
@media (max-width: 992px) {
    .hero-main-title { font-size: 3.5rem; }
    .cat-title { font-size: 2.2rem; }
}



/* --- 侧边锚点导航 --- */
/* --- 侧边连线进度条容器 --- */
.side-nav-container {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
   z-index: 9999 !important; /* 层级设高一点 */
    display: none; /* 默认隐藏 */
}
/* 显式定义在大屏幕下的显示 */
@media (min-width: 992px) {
    .side-nav-container {
        display: block !important; 
    }
}
/* 垂直轨道 */
.side-nav-track {
    position: absolute;
    right: 5px; /* 对齐圆点中心 */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.1); /* 浅色底线 */
    z-index: 1;
}

/* 红色进度填充线 */
.side-nav-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%; /* 初始高度为0 */
    background: var(--primary-red);
    box-shadow: 0 0 8px rgba(251, 58, 74, 0.4);
    transition: height 0.1s ease;
}

/* 导航列表 */
.side-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2; /* 确保点在平滑线之上 */
}

.side-nav-list li {
    margin: 40px 0; /* 增大间距，方便显示连线 */
}

.anchor-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none !important;
}

/* 分类名称 */
.anchor-name {
font-family: 'Oswald', sans-serif;
    font-size: 1.1rem; /* 从 0.75rem 调大到 1.1rem */
    font-weight: 600; /* 加粗 */
    text-transform: uppercase;
    letter-spacing: 1px; /* 增加字母间距，提升高级感 */
    color: #333;
    margin-right: 25px; /* 增加与点的距离 */
    opacity: 0;
    transform: translateX(20px); /* 初始位移稍微远一点，滑入感更强 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* 优化遮罩：使用淡入背景或直接去掉背景，取决于视觉偏好 */
    background: rgba(255, 255, 255, 0.9); 
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 锚点小圆点 */
.anchor-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 50%;
    transition: all 0.3s ease;
}


/* 激活与悬停状态 */
.anchor-link:hover .anchor-name,
.anchor-link.active .anchor-name {
    opacity: 1;
    transform: translateX(0);
    color: var(--text-dark);
}

.anchor-link.active .anchor-dot {
    background: var(--primary-red) !important;
    box-shadow: 0 0 0 4px rgba(251, 58, 74, 0.2), 
                0 0 12px rgba(251, 58, 74, 0.6);
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0px rgba(251, 58, 74, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(251, 58, 74, 0); }
    100% { box-shadow: 0 0 0 0px rgba(251, 58, 74, 0); }
}

.anchor-link:hover .anchor-dot {
    background: var(--primary-red);
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(251, 58, 74, 0.4);
}






/* 背景为深色时的兼容 */
.bg-dark-industrial ~ .side-nav-container .side-nav-track {
    background: rgba(255, 255, 255, 0.1);
}
.bg-dark-industrial ~ .side-nav-container .anchor-name {
    background: rgba(0, 0, 0, 0.6); /* 深色背景下使用半透明黑 */
    color: #fff;
}

/* --- 移除旧的 expert-cta 样式，替换为以下 --- */

.product-footer-cta {
    padding: 100px 0;
    background: #111; /* 纯黑/深灰背景，增加厚重感 */
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* 装饰性水印：再次呼应品牌 */
.product-footer-cta::before {
    content: 'LIMING';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    z-index: 0;
}

.cta-inner-content {
    position: relative;
    z-index: 1;
}

.cta-visual-icon {
    font-size: 3.5rem;
    color: var(--primary-red);
    margin-bottom: 30px;
    opacity: 0.8;
}

.cta-display-title {
    font-size: 3rem;
    color: #fff !important;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.cta-subtitle {
    font-size: 1.2rem;
    color: #888;
    max-width: 700px;
    margin: 0 auto 50px;
}

/* 核心参数/特色 */
.cta-features {
    margin-bottom: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 40px 0;
}

.f-item strong {
    display: block;
    font-size: 2.5rem;
    font-family: 'Oswald';
    color: var(--primary-red);
}

.f-item span {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 1px;
}

/* 按钮组 */
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-cta-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-cta-outline:hover {
    background: #fff;
    color: #111;
}

.btn-cta-solid {
    background: var(--primary-red);
    color: #fff;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    border: 2px solid var(--primary-red);
}

.btn-cta-solid:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 10px 20px rgba(251, 58, 74, 0.3);
    color: #fff;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .cta-display-title { font-size: 2rem; }
    .f-item strong { font-size: 1.8rem; }
}


/* --- 快捷导航：深色半透明/磨砂玻璃版 --- */
.category-quick-nav {
    position: relative;
    z-index: 100;
	background: #111;
	padding: 0 15px;  /* 增加左右边距，防止手机端贴边 */
}

.quick-nav-wrapper {
background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    flex-wrap: nowrap; /* 默认不换行，保持一行 */
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.q-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
	min-width: 0; /* 防止内容撑破布局 */
	justify-content: center; /* 居中对齐 */
    padding: 25px 15px;
    text-decoration: none !important;
    /* 文字改为白色 */
    color: #ffffff; 
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.q-nav-item:last-child {
    border-right: none;
}

/* 图标部分：调整透明度 */
.q-icon {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.3); 
    margin-right: 20px;
    transition: 0.3s;
	filter: drop-shadow(0 0 5px rgba(251, 58, 74, 0.5));
}

/* 文字部分 */
.q-title {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.q-text small {
    display: block;
    color: rgba(255, 255, 255, 0.5); /* 次要文字半透明 */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}

/* --- 悬浮与激活效果 --- */


/* 悬浮时背景微亮 */
.q-nav-item:hover, .q-nav-item.active {
    background-color: rgba(0, 0, 0, 0.3) !important; /* 或者透明 transparent */
    border-bottom: none; /* 确保没有奇怪的底边 */
}

.q-nav-item:hover .q-icon, .q-nav-item.active .q-icon {
    color: var(--primary-red);
    transform: scale(1.1);
}

.q-nav-item:hover .q-title, .q-nav-item.active .q-title {
    color: #fff;
}

/* 激活状态的指示条：红色发光感 */
.q-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--primary-red);
    box-shadow: 0 0 15px rgba(251, 58, 74, 0.6);
    transition: width 0.4s ease;
}

.q-nav-item:hover::after, .q-nav-item.active::after {
    width: 100%;
}


/* 中等屏幕 (平板, 992px以下): 缩减间距 */
@media (max-width: 991px) {
    .q-nav-item {
        padding: 20px 10px;
    }
    .q-icon {
        font-size: 1.5rem; /* 调小图标 */
        margin-right: 10px;
    }
    .q-title {
        font-size: 0.9rem; /* 调小文字 */
    }
	.category-quick-nav { margin-top: 0; padding: 0 15px 30px; }
}

/* 小屏幕 (手机, 768px以下): 变成 2x2 布局 */
@media (max-width: 768px) {
    .category-quick-nav {
        margin-top: -30px; /* 手机端减小压盖深度 */
    }
    .quick-nav-wrapper {
        flex-wrap: wrap; /* 允许换行 */
    }
    .q-nav-item {
        flex: 0 0 50%; /* 每个占一半宽度，形成2x2 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        justify-content: flex-start; /* 手机端左对齐 */
        padding: 15px 20px;
    }
    /* 去掉第2和第4个的右边框（因为它们在右侧） */
    .q-nav-item:nth-child(2n) {
        border-right: none;
    }
    /* 去掉最后两个的底边框 */
    .q-nav-item:nth-last-child(1),
    .q-nav-item:nth-last-child(2) {
        border-bottom: none;
    }
}

/* 超小屏幕 (极小手机, 480px以下): 隐藏副标题以节省空间 */
@media (max-width: 480px) {
    .q-text small {
        display: none; /* 隐藏小字，只留主标题 */
    }
    .q-title {
        font-size: 0.85rem;
    }
}



/* ---产品详细页面 --- */
/* --- 1. Banner --- */
.pd-banner {
    height: 480px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
}
.pd-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 核心修改：使用渐变遮罩，底部稍暗，确保文字与背景分离 */
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}
.pd-banner-content {
    position: relative;
    z-index: 5;
}

.pd-banner-h1 {
    font-size: 3.8rem;
    font-weight: 800;
	padding:20px 0px 40px 0px;
    text-transform: uppercase;
    /* 增加微弱文字阴影，进一步提升清晰度 */
    text-shadow: 2px 4px 10px rgba(0,0,0,0.5);
	color:#fff;
	text-align:center;
}

/* --- 2. Gallery & Quick Specs (核心点) --- */
.pd-gallery-container {
    position: relative;
    padding: 10px;
}
.pd-quick-specs {
position: absolute;
    top: -30px; /* 稍微往上提一点 */
    right: 30px;
    background: var(--primary-red);
    color: #fff;
    padding: 25px 40px; /* 增加内边距 */
    display: flex;
    gap: 40px;
    z-index: 10;
    box-shadow: 0 15px 35px rgba(251, 58, 74, 0.4);
    transform: skewX(-10deg);
}
.spec-node { transform: skewX(10deg); } /* 文字矫正 */
.spec-label { display: block; font-size: 1rem; text-transform: uppercase; opacity: 0.9; margin-bottom: 5px;font-weight:bold; }
.spec-value { display: block; font-family: 'Oswald'; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.spec-value small { font-size: 0.8rem; margin-left: 5px; }
.spec-divider { width: 1px; background: rgba(255,255,255,0.3); }

.pd-main-img { 
    border: 1px solid #f0f0f0;
    padding: 15px; /* 图片边框内部留白 */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
	background: #f0f0f0 linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite;
}
@keyframes loading-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pd-thumb-nav { display: flex; gap: 12px; margin-top: 20px; }
.pd-thumb-nav img {
    width: 100px; height: 75px; object-fit: cover;
    cursor: pointer; border: 2px solid #ddd;
    transition: 0.3s;
}
.pd-thumb-nav img.active { border-color: var(--primary-red); transform: translateY(-5px); }

/* --- 3. Info Content --- */
.pd-main-intro {
    padding: 80px 0; /* 核心修改：大幅增加上下 Padding，增加呼吸感 */
    background-color: #fff;
}

.pd-section-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 35px;
    position: relative;
}
.pd-section-title::after {
    content: ''; position: absolute; left: 0; bottom: -10px; width: 50px; height: 4px; background: var(--primary-red);
}
.pd-application-box {
display: flex;
    flex-direction: column;
    gap: 20px; /* 两个条目之间的间距 */
    margin-top: 20px;
}
.app-item { 
    display: flex;
    align-items: flex-start; /* 如果标签很多换行，建议顶部对齐；如果只有一行，用 center */
    gap: 15px; /* 图标和文字之间的间距 */
	}
.app-item:last-child {
    margin-bottom: 0;
}

/* 图标圆形底色 */
.app-icon {
    width: 45px;
    height: 45px;
    background-color: rgba(230, 0, 18, 0.1); /* 品牌红的浅色背景 */
    color: var(--primary-red); /* 品牌红 */
    border-radius: 50%; /* 圆形 */
    /* 核心居中代码 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.2rem;
    flex-shrink: 0; /* 防止图标被文字挤压变形 */
    transition: all 0.3s ease;
}

/* 悬停效果：增加一点动态感 */
.app-item:hover .app-icon {
    background-color: var(--primary-red);
    color: #fff;
    transform: scale(1.1);
}
.app-info {
    flex-grow: 1;
}
.app-info strong {
display: block;
    margin-bottom: 5px;
    color: #333;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
	
}
/* 微型标签样式 */
.app-tags {
  display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-tags span {
    display: inline-block;
    background: #eee;
    color: #666;
    padding: 3px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}


/* --- GET THE PRICE NOW 按钮美化 (倾斜动感版) --- */
.btn-pd-quote-v2 {
    display: inline-block;
    background: var(--primary-red);
    color: #fff;
    padding: 18px 45px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 30px;
    position: relative;
    transform: skewX(-15deg); /* 倾斜效果，呼应 Banner */
    box-shadow: 0 10px 20px rgba(251, 58, 74, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-pd-quote-v2 span {
    display: block;
    transform: skewX(15deg); /* 文字纠正 */
}

.btn-pd-quote-v2:hover {
    background: #222;
    color: #fff;
    transform: skewX(-15deg) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.btn-pd-quote-v2 i {
    transition: transform 0.3s ease;
}

.btn-pd-quote-v2:hover i {
    transform: rotate(15deg) scale(1.2);
}

.btn-pd-quote {
    background: var(--primary-red);
    color: #fff;
    padding: 18px 45px;
    font-family: 'Oswald';
    font-size: 1.1rem;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
}
.btn-pd-quote:hover { background: #333; transform: scale(1.05); color: #fff; }

/* --- 4. Performance Card V2 (动感模块) --- */
.pd-perf-card-v2 {
background: #1a1a1a; /* 深色背景更显工业感 */
    padding: 45px 35px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}
.pd-perf-card-v2:hover {
transform: translateY(-10px);
    border-color: var(--primary-red);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.perf-icon {
    font-size: 2.8rem;
    color: var(--primary-red);
    margin-bottom: 25px;
    transition: all 0.4s ease;
    display: inline-block;
    /* 给图标增加一点金属质感的倒影或发光 */
    filter: drop-shadow(0 0 5px rgba(251, 58, 74, 0.2));
}
.pd-perf-card-v2:hover .perf-icon {
    transform: scale(1.1) rotate(5deg); /* 悬浮时图标微动 */
    filter: drop-shadow(0 0 15px rgba(251, 58, 74, 0.6)); /* 发光增强 */
}

.pd-perf-card-v2 h4 {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pd-perf-card-v2 p {
    color: #999;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
/* 卡片角落的装饰装饰（炫酷动感细节） */
.pd-perf-card-v2::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--primary-red);
    opacity: 0.05;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.pd-perf-card-v2:hover::after {
    transform: scale(3);
    opacity: 0.1;
}

/* --- 5. Related Blog (大图+黑色透明) --- */
.pd-blog-card {
    display: block;
    text-decoration: none;
    overflow: hidden;
    position: relative;
    border-radius: 4px; /* 轻微圆角 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.blog-img {
height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 丝滑缩放 */
}
/* 悬停时图片轻微放大并带有灰度变化 */
.pd-blog-card:hover .blog-img {
    transform: scale(1.1);
}
.blog-info {
    position: relative;
    width: 100%;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
    backdrop-filter: blur(10px);    /* 关键：毛玻璃磨砂效果 */
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
    transition: all 0.4s ease;
}
.pd-blog-card:hover .blog-info {
    background: var(--primary-red);
    transform: translateY(0);
}

.blog-info h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    text-transform: none; /* 保持自然大小写，更有设计感 */
    transition: all 0.4s ease;
	}
/* 动态红色边框线 - 增加动感 */
.blog-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* 初始宽度为0 */
    height: 4px;
    background: var(--primary-red);
    transition: width 0.4s ease;
}
.pd-blog-card:hover .blog-info { 
background: rgba(251, 58, 74, 0.9); /* 悬停时背景变为品牌红（带透明度） */
    padding-bottom: 45px; /* 向上提拉的动感 */ 
}
.pd-blog-card:hover .blog-info::before {
    width: 100%; /* 红线瞬间刷满 */
}
.pd-blog-card:hover h3 {
    transform: translateY(-5px); /* 文字轻微上浮 */
    letter-spacing: 0.5px;      /* 字母间距轻微拉伸 */
}

/* --- Responsive Adaptability --- */
@media (max-width: 991px) {
    .pd-quick-specs { position: relative; top: 0; right: 0; margin-bottom: 30px; transform: none; justify-content: space-around; }
    .spec-node { transform: none; }
    .pd-banner-h1 { font-size: 2.5rem; }
	.pd-banner { height: 350px; }
    .pd-main-intro { padding: 60px 0; } /* 移动端间距缩小，防止过长 */
}
/* 响应式调整 */
@media (max-width: 768px) {
    .blog-img { height: 300px; }
    .blog-info { padding: 25px 20px; }
}

/* --- Custom Solution 红色浮窗风格 --- */
.pd-custom-solution-wrapper {
    position: relative;
    padding: 10px;
    z-index: 10;
}

.pd-custom-box {
    background: #111; /* 深色背景基底 */
    padding: 50px;
    position: relative;
    border-left: 8px solid var(--primary-red);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    /* 整体轻微倾斜，呼应 Banner 风格 */
    transform: skewX(-5deg); 
    transition: all 0.4s ease;
}

/* 内部内容反向倾斜，确保文字正立 */
.pd-custom-box .row {
    transform: skewX(5deg);
}

.cs-content h4 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.cs-content p {
    color: #bbb;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* 红色动感倾斜按钮 */
.btn-red-skew {
    display: inline-block;
    background: var(--primary-red);
    color: #fff;
    padding: 18px 40px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    box-shadow: 0 10px 25px rgba(251, 58, 74, 0.4);
    /* 按钮本身的强烈倾斜 */
    transform: skewX(-15deg); 
    transition: all 0.3s ease;
}

.btn-red-skew span {
    display: block;
    transform: skewX(15deg); /* 文字反向矫正 */
}

.btn-red-skew:hover {
    background: #fff;
    color: var(--primary-red);
    transform: skewX(-15deg) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* 悬停时盒子整体效果 */
.pd-custom-box:hover {
    background: #000;
    border-left-width: 15px; /* 红色边框加粗 */
}

/* 响应式调整 */
@media (max-width: 991px) {
    .pd-custom-box {
        transform: none; /* 手机端取消倾斜，防止布局错位 */
        padding: 40px 25px;
        text-align: center;
    }
    .pd-custom-box .row {
        transform: none;
    }
    .btn-red-skew {
        transform: none;
        margin-top: 10px;
    }
    .btn-red-skew span {
        transform: none;
    }
}


/* --- 移动端悬浮底栏高级化定制 --- */
.mobile-sticky-cta {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(30px); /* 初始位置下移 30px */
    width: 92%;
    max-width: 500px;
    z-index: 9999;
    
    /* 核心：初始不可见 */
    opacity: 0;
    visibility: hidden;
    
    /* 丝滑过渡：支持透明度、位置和可见性的平滑切换 */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-sticky-cta.show-cta {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* 回到原位 */
}

.cta-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.85); /* 半透明白 */
    backdrop-filter: blur(15px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(15px);
    border-radius: 50px; /* 圆角胶囊形状 */
    padding: 8px 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 12px 5px;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.cta-item:active {
    transform: scale(0.92);
    background: rgba(0,0,0,0.05);
}
.cta-icon {
    font-size: 1.2rem;
    margin-right: 8px;
}

.cta-text {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* WhatsApp 样式 */
.btn-whatsapp {
    color: #25D366;
}
.btn-whatsapp:active {
    background: rgba(37, 211, 102, 0.1);
}

/* Get Price 红色样式 */
.btn-inquiry {
    background: var(--primary-red);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.btn-inquiry:active {
    transform: scale(0.95);
    background: var(--primary-hover);
}

/* 分割线 */
.cta-divider {
    width: 1px;
    height: 25px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 10px;
}

/* 吸引注意力的红色跳动小点 */
.cta-badge-dot {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse-white 2s infinite;
}
.btn-inquiry .cta-icon i {
    display: inline-block;
    animation: icon-attention 3s infinite;
}
@keyframes icon-attention {
    0%, 90% { transform: rotate(0); }
    92% { transform: rotate(15deg); }
    94% { transform: rotate(-15deg); }
    96% { transform: rotate(10deg); }
    98% { transform: rotate(-10deg); }
    100% { transform: rotate(0); }
}
@keyframes pulse-white {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 适配移动端内边距，防止页面最后的内容被遮挡 */
@media (max-width: 991px) {
    body {
        padding-bottom: 100px !important;
    }
	.contact-btn {
        display: none !important;
    }
}

/* 404 炫酷特制样式 */
 /* --- 404 炫酷浅色版 --- */
.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    background: #f8f9fa; /* 浅灰色背景，与网页一致 */
    position: relative;
    overflow: hidden;
}

/* 背景巨大的淡色文字装饰 */
.bg-glitch-text {
    position: absolute;
    font-size: 25vw;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: rgba(0,0,0,0.03);
    z-index: 0;
    pointer-events: none;
}

.error-box {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
}

/* 404 数字：保留动感，但使用深色调 */
/* --- 404 页面专项样式 (无 Body Class 版本) --- */

.error-page-wrapper {
background-color: #f8f9fa; /* 原本在 body 上的 bg-light 现在在这里 */
    min-height: 100vh;
    width: 100%;
}


.error-container {
padding: 100px 20px 100px; /* 增加顶部 padding 给导航栏留位置 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 保持之前的 404 数字动感 */
.glitch-fixed {
    font-size: clamp(6rem, 15vw, 12rem); /* 响应式字体大小 */
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    line-height: 1;
    text-shadow: 2px 0 var(--primary-red), -2px 0 var(--text-dark);
    animation: glitch-mild 2s infinite linear alternate-reverse;
}

@keyframes glitch-mild {
    0% { transform: translate(0); }
    33% { transform: translate(-3px, 1px); }
    66% { transform: translate(3px, -1px); }
    100% { transform: translate(0); }
}

.bg-glitch-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: rgba(0,0,0,0.03);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

.error-box {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.red-line {
    width: 50px;
    height: 4px;
    background: var(--primary-red);
    margin: 20px auto;
}

/* 推荐产品卡片微调 */
.product-mini-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 增加弹性动感 */
}

.product-mini-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-red);
    box-shadow: 0 10px 25px rgba(251, 58, 74, 0.1);
    color: var(--primary-red);
}

.product-mini-card i {
    font-size: 2rem;
    color: var(--primary-red);
    margin-bottom: 15px;
    transition: 0.3s;
}
.product-mini-card span {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 悬浮时的炫酷效果 */
.product-mini-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-red);
    box-shadow: 0 15px 35px rgba(251, 58, 74, 0.15);
    color: var(--primary-red);
}

/* 图标跳动动画 */
.product-mini-card:hover i {
    transform: scale(1.2) rotate(5deg);
    color: var(--primary-red);
}

@media (max-width: 768px) {
    .product-mini-card { padding: 20px 10px; }
    .product-mini-card i { font-size: 1.5rem; }
}

/* 商务通 */
.contact-btn {
    position: fixed;
    /* 默认大屏幕位置：左下角 */
    bottom: 30px;
    left: 10px; 
    right: auto; /* 重置之前的 right: 30px */
    
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 2000; /* 确保在所有元素（包括导航条）之上 */
    box-shadow: 0 5px 15px rgba(251, 58, 74, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse 2s infinite;
}

.contact-btn:hover {
    transform: scale(1.1);
    color: #fff;
    background: var(--primary-hover); /* 增加悬停深色反馈 */
}
/* --- 响应式位置切换 --- */
/* 2. 只有在大屏幕下才显示 */
@media (max-width: 992px) {
    .contact-btn {
        display: none !important; /* 大于 992px 时恢复显示 */
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 58, 74, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(251, 58, 74, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(251, 58, 74, 0);
    }
}

.contact-modal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-modal .modal-content {
    border-radius: 15px;
    border: none;
    overflow: hidden;
}

.contact-modal .modal-title {
    color: var(--primary-color);
    font-weight: 700;
}

.contact-option {
    display: block;
    padding: 15px;
    border: 1px solid #f0f0f0;
    background: #fdfdfd;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
    transition: all 0.3s ease;
}


.contact-option:hover {
    background: rgba(251, 58, 74, 0.05);
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

.contact-option i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.contact-option:hover i {
    transform: scale(1.2);
}

.contact-option h5 {
    font-weight: 700;
    margin-bottom: 5px;
}


/* 案例详情页 - 流程描述列表增强 */
.case_flow ul {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
    padding-left: 20px;
}

.case_flow ul li {
    position: relative;
    margin-bottom: 15px;
    line-height: 1.6;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee; /* 项目间的虚线分割 */
}

.case_flow ul li:last-child {
    border-bottom: none;
}

/* 针对阶段标题（如 Primary Stage）进行加粗颜色处理 */
.case_flow ul li strong, 
.case_flow ul li b {
    color: var(--text-dark);
    display: block; /* 让标题独占一行，更有层次感 */
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* 自定义勾选图标或圆点 */
.case_flow ul li::before {
    content: "\f054"; /* FontAwesome 箭头 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -20px;
    color: var(--primary-red);
    font-size: 0.8rem;
    background: #fff;
    padding: 5px;
}


/* Solutions-single案例卡片容器 */
.case-card-visual {
    position: relative;
    display: block;
    height: 300px; /* 或者您之前设定的高度 */
    overflow: hidden;
    border-radius: 8px; /* 根据您的设计调整 */
}

/* 核心图片样式：模拟 background-size: cover 效果 */
.case-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：确保图片裁剪填充而不拉伸 */
    transition: transform 0.5s ease; /* 增加缩放动画效果 */
}

/* 悬停时图片略微放大 */
.case-card-visual:hover .case-card-img {
    transform: scale(1.1);
}
.case-location{color:#fff;}
/* 确保遮罩层依然浮在图片上方 */
.case-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 黑色半透明遮罩 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    z-index: 2;
}
/* 基础样式确认 */
.case-btn-red {
    transition: all 0.3s ease; /* 让颜色变化平滑 */
    border: 1px solid transparent;
}

/* 鼠标悬浮 (Hover) 状态 */
.case-btn-red:hover {
    background-color: var(--primary-red) !important; /* 换成网站主色红色 */
    border-color: var(--primary-red) !important;
    color: #ffffff !important; /* 文字变白色，确保对比度 */
    transform: translateY(-2px); /* 悬浮时微向上浮动，增加交互感 */
    box-shadow: 0 4px 12px rgba(251, 58, 74, 0.3); /* 增加红色调的阴影 */
}

/* 鼠标点击 (Active) 状态 */
.case-btn-red:active {
    background-color: var(--primary-hover) !important; /* 换成更深一点的红色反馈 */
    transform: translateY(0); /* 点击时下压 */
}

/* 确保图标颜色也同步变化 */
.case-btn-red:hover i {
    color: #ffffff !important;
}
.case-card-visual:hover .case-btn-red {
    background-color: var(--primary-red) !important;
    color: #fff !important;
}

/* Solutions-single下方专家视角 */
/* --- Expert Insight 工业风格重构 --- */

.expert-insight-wrapper {
    padding: 20px 0;
}

.expert-card {
    background: #fff;
    border-radius: 6px; /* 适度的工业圆角 */
    padding: 45px 40px;
    position: relative;
    overflow: hidden;
    /* 核心：左侧红色强边框，呼应品牌 */
    border-left: 6px solid var(--primary-red);
    /* 核心：深邃阴影，制造悬浮感，不再是平面的色块 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停微动效 */
.expert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* 背景巨大水印 - 增加设计层次感 */
.quote-watermark {
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 8rem;
    color: rgba(0, 0, 0, 0.03); /* 极淡的黑色 */
    pointer-events: none; /* 不影响文字选择 */
    font-family: 'Font Awesome 6 Free';
}

/* 左侧图标圆圈 */
.expert-icon-circle {
    width: 60px;
    height: 60px;
    background-color: rgba(251, 58, 74, 0.08); /* 品牌红的淡色背景 */
    color: var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto;
}

/* 标题样式 */
.expert-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-dark);
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* 标题下的小短线装饰 */
.expert-divider {
    width: 40px;
    height: 3px;
    background-color: var(--primary-red);
    margin-bottom: 20px;
}

/* 正文样式 */
.expert-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 0;
    font-style: italic; /* 引用语保持斜体 */
}

/* 强调数字的样式 */
.text-highlight {
    color: var(--primary-red);
    font-weight: 700;
    border-bottom: 1px dashed rgba(251, 58, 74, 0.4); /* 虚线强调 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .expert-card {
        padding: 30px 20px;
        text-align: center; /* 手机端居中对齐 */
    }
    
    .expert-icon-circle {
        margin-bottom: 20px;
    }
    
    .expert-divider {
        margin: 0 auto 20px auto; /* 手机端短线居中 */
    }
    
    .expert-content.ps-md-3 {
        padding-left: 0 !important;
    }
    
    .quote-watermark {
        font-size: 5rem;
        right: 10px;
        top: 10px;
    }
}