:root {
    --black-bg: #312f35;
    --red: #c90101;
    --deep-red: #820004;
    --gray: #e0e0e0;
    --gray-bg: #f5f5f5;
    --max-width: 1440px;
    --green: #015927;
    --light-black: #333333;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    min-height: 100vh;
    font-family: "Poppins", sans-serif, serif;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #000000;
}

.main {
    max-width: 1920px;
    margin: 0 auto;
}

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

.tc {
    text-align: center;
}

.header-top {
    background-color: var(--black-bg);
    height: 30px;
}

.wrapper {
    width: 95%;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.hide {
    display: none !important;
}

/* ============================================================
   全局与顶部联系栏 (.header-top)
   ============================================================ */
.header-top {
    z-index: 99999;
    position: relative;
}

.header-contact {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    gap: 25px;
}

.header-contact a { color: white; text-decoration: none; transition: color 0.3s; }
.header-contact a:hover { color: var(--red); }

.header-contact .email {
    position: relative;
    padding-left: 25px;
    background: url("images/icon/top_email.webp") no-repeat left center;
    background-size: 16px;
}

.header-contact .tel {
    position: relative;
    padding-left: 25px;
    background: url("images/icon/top_tel.webp") no-repeat left center;
    background-size: 16px;
}

/* 中间的白色分割线 */
.header-contact .email:after {
    content: "";
    height: 12px;
    width: 1px;
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.4);
}

/* 搜索框动画优化 */
.header-contact .search {
    display: flex;
    align-items: center;
    position: relative;
}

.header-contact .search input {
    width: 90px; /* 初始宽度微调，显示 Placeholder */
    height: 26px;
    line-height: 26px;
    border-radius: 25px;
    padding: 0 30px;
    background: #333 url("images/icon/top_search.webp") no-repeat 10px center;
    background-size: 14px;
    border: 1px solid #444;
    color: #fff;
    font-size: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.header-contact .search input:focus { outline: none; background-color: #000; border-color: var(--red); cursor: text; }
.header-contact .search .close { display: none; }

.header-contact .search.open input { width: 220px; }
.header-contact .search.open .close {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url("images/icon/top_Cancel.webp") no-repeat center center;
    background-size: 10px;
}

/* ============================================================
   PC 主导航基础样式 (PC Nav)
   ============================================================ */
.mobile-nav { display: none; }
.pc-nav { display: block; }

.header-nav-row.pc-nav {
    position: relative;
    z-index: 99998;
    height: 90px; /* 固定高度，防止页面抖动 */
}

.header-nav {
    width: 100%;
    height: 90px;
    transition: all 0.3s ease;
}

.header-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-nav .h-logo img {
    max-height: 45px;
    transition: all 0.3s ease;
}

.header-nav .h-nav { flex-grow: 1; }

.header-nav .main-nav > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 35px;
    height: 100%;
    margin: 0;
    padding-right: 30px;
    position: relative;
}

/* 导航和按钮之间的分割线 */
.header-nav .main-nav > ul:after {
    content: "";
    height: 20px;
    width: 1px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: rgba(150, 150, 150, 0.3);
}

.header-nav .menu-item { position: relative; list-style: none; }
.header-nav .menu-item > a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 90px;
    display: block;
    position: relative;
    transition: color 0.3s;
}

/* 一级菜单底部悬浮红线动画修复 */
.header-nav .menu-item > a::after {
    content: "";
    position: absolute;
    bottom: 25px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--red);
    transition: width 0.3s ease;
}

.header-nav .menu-item:hover > a::after { width: 100%; }
.header-nav .menu-item:hover > a { color: var(--red) !important; }

/* 二级下拉菜单 (Sub-menu) */
.header-nav .sub-menu {
    position: absolute;
    top: 90px;
    left: -20px;
    background: #fff;
    min-width: 240px;
    list-style: none;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border-top: 3px solid var(--red); /* 顶部红边增加大厂感 */
}

.header-nav .menu-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-nav .sub-menu li { border-bottom: 1px solid #f5f5f5; }
.header-nav .sub-menu li:last-child { border-bottom: none; }

.header-nav .sub-menu li a {
    display: block;
    padding: 12px 25px;
    font-size: 14px;
    color: #444 !important;
    line-height: 1.5 !important;
}

.header-nav .sub-menu li a:hover {
    background: #f9f9f9;
    color: var(--red) !important;
    padding-left: 30px; /* 悬浮时文字微微右移 */
}

/* Get Price 按钮 */
.header-nav .h-get-price { padding-left: 30px; }
.header-nav .h-get-price input {
    border: none;
    background-color: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 30px;
    padding: 0 25px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s;
}
.header-nav .h-get-price input:hover { background-color: var(--green); }
.header-nav .sub-menu .menu-item > a::after {
    display: none !important;
}

/* ============================================================
   1. 大屏 ( > 1200px )：覆盖在视频上，透明底，白色字体
   ============================================================ */
@media (min-width: 1200px) {
    .header-nav-row.pc-nav {
        position: absolute; /* 绝对定位覆盖在幻灯片上方 */
        left: 0;
        width: 100%;
    }
    
    .header-nav {
        background-color: rgba(0, 0, 0, 0.15); /* 微微的透明黑底，增加文字可读性 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .header-nav .menu-item > a { color: #ffffff; }
    
    /* 魔法：用 filter 将黑色的 Logo 图片反转成白色，无需修改 HTML */
    .header-nav .h-logo img { filter: brightness(0) invert(1); }

    /* --- 下拉悬浮状态 (Sticky) 覆盖大屏透明设置 --- */
    .header-nav.header-nav-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        animation: headerSlideDown 0.4s ease forwards;
        border-bottom: none;
    }
    
    .header-nav-fixed .header-nav { background-color: transparent; border-bottom: none; }
    .header-nav-fixed .menu-item > a { color: #333333; }
    .header-nav-fixed .h-logo img { filter: none; } /* 恢复 Logo 原本的黑色 */

/* ============================================================
   【精准修复区】仅针对“无 Banner 的页面”（如产品详情页）强制白底黑字
   ============================================================ */
/* 仅让产品详情页退出沉浸式，变为传统的相对定位 */
body.single-product .header-nav-row.pc-nav {
    position: relative !important; 
    background-color: #ffffff !important; 
}

/* 强制产品详情页的导航栏为白底 */
body.single-product .header-nav {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    border-bottom: none !important;
}

/* 强制产品详情页的文字为黑字 */
body.single-product .header-nav .menu-item > a {
    color: #333333 !important; 
}

/* 取消白色滤镜，恢复彩色原标 */
body.single-product .header-nav .h-logo img {
    filter: none !important; 
}

/* 悬停状态保持品牌红 */
body.single-product .header-nav .menu-item:hover > a {
    color: var(--red) !important; 
}
}
/* ============================================================
   2. 中屏 ( 769px - 1199px )：在幻灯片上方，白底，黑色字体
   ============================================================ */
@media (max-width: 1199px) and (min-width: 769px) {
    .header-nav-row.pc-nav {
        position: relative; /* 不覆盖幻灯片，正常流布局 */
    }
    
    .header-nav { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .header-nav .menu-item > a { color: #333333; }
    .header-nav .h-logo img { filter: none; } /* 黑色 Logo */

    /* 中屏下拉悬浮 */
    .header-nav.header-nav-fixed {
        position: fixed;
        top: 0; left: 0; width: 100%;
        background-color: #ffffff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        animation: headerSlideDown 0.4s ease forwards;
    }
}

/* 悬浮动画 */
@keyframes headerSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ============================================================
   3. 移动端 ( ≤ 768px )：隐藏 PC 导航，启用移动端折叠菜单
   ============================================================ */
@media (max-width: 768px) {
    .header-top { display: none; } /* 手机端隐藏顶部联系栏 */
    .pc-nav { display: none !important; }
    .mobile-nav { display: block; position: relative; z-index: 99999; }

    .mobile-nav .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: relative;
        z-index: 10;
    }

    .mobile-nav .h-logo img { max-height: 35px; }

/* ============================================================
       优化：更精致的移动端汉堡按钮
       ============================================================ */
    .menu-button {
        width: 26px;
        height: 20px;
        position: relative;
        cursor: pointer;
        display: block;
        right: 1.5rem;
    }
    
    .menu-button .bar {
        width: 100%;
        background-color: #333;
        border-radius: 2px; /* 增加圆角，更显精致 */
        position: absolute;
        left: 0;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* 升级弹性动画 */
    }
    
    .menu-button .bar:nth-child(1) { top: 0; }
    .menu-button .bar:nth-child(2) { top: 8px; }
    .menu-button .bar:nth-child(3) { top: 16px; }

    /* 点击变为 X 的状态 */
    .menu-button.active .bar:nth-child(1) { transform: rotate(45deg); top: 9px; }
    .menu-button.active .bar:nth-child(2) { opacity: 0; transform: translateX(10px); /* 中间线条向右滑出消失 */ }
    .menu-button.active .bar:nth-child(3) { transform: rotate(-45deg); top: 9px; }
    
    /* 移动端下拉列表 */
    .mobile-nav-list {
        display: none; /* 默认隐藏，JS 控制 */
        background-color: #fff;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 0;
    }

    .mobile-nav-list ul { margin: 0; padding: 0; list-style: none; }
    .mobile-nav-list li { border-bottom: 1px solid #f0f0f0; }
    .mobile-nav-list a:hover { color: var(--red); background-color: #fcfcfc; }
}






.index-banner {
    max-width: 1920px;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.index-banner .swiper-container, .index-banner .swiper-wrapper, .index-banner .swiper-slide {
    width: 100%;
    height: 100%;
}

.index-banner .img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.index-banner .img-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.index-banner .intro {
    width: 85%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5;
}

.index-banner .intro .text {
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.index-banner .intro .s-text {
    font-weight: 300;
    align-self: flex-start;
    background: linear-gradient(to right, rgba(201, 1, 1, 0.8) 0%, rgba(201, 1, 1, 0) 90%);
}

.index-banner .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 40px;
    height: 2px;
    display: inline-block;
    border-radius: 0;
    background: white;
    opacity: 0.5;
    margin: 0 12px;
    transition: 0.5s;
}

.index-banner .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 80px;
    background: #e84127;
    opacity: 1;
}

.index-banner .swiper-prev, .index-banner .swiper-next {
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

.index-banner .swiper-prev { left: 0; cursor: url("images/icon/index_banner_prev.webp"), pointer;}
.index-banner .swiper-next { right: 0; cursor: url("images/icon/index_banner_next.webp"), pointer;}

.index-industry-section .right-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* 关键：强制子元素垂直居中 */
    gap: 15px; /* 控制按钮和 Logo 之间的间距 */
}

@media (min-width: 1441px) {
    .index-banner { height: 870px; }
    .index-banner .intro .text { font-size: 52px; margin-bottom: 1.5rem; }
    .index-banner .intro .s-text { font-size: 24px; line-height: 1.8; padding: 1rem 2.5rem; }
    .index-banner video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
}

@media (max-width: 1440px) and (min-width: 1200px) {
    .index-banner { height: 700px; margin-top: -95px; }
    .index-banner .intro .text { font-size: 42px; margin-bottom: 1.2rem; }
    .index-banner .intro .s-text { font-size: 20px; line-height: 1.6; padding: 0.8rem 2rem; }
    .index-banner video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .index-banner { height: 500px; margin-top: 0; }
    .index-banner .slide-pc-only { display: none !important; }
    .index-banner video { display: none; }
    .index-banner .intro { width: 90%; text-align: center; }
    .index-banner .intro .text { font-size: 34px; margin-bottom: 1rem; }
    .index-banner .intro .s-text { font-size: 18px; align-self: center; padding: 0.6rem 1.5rem; background: rgba(201, 1, 1, 0.8); }
}

@media (max-width: 768px) {
    .index-banner { height: 450px; margin-top: 0; }
    .index-banner .slide-pc-only { display: none !important; }
    .index-banner video { display: none; }
    .index-banner .intro { width: 92%; text-align: center; }
    .index-banner .intro .text { font-size: 26px; margin-bottom: 0.8rem; letter-spacing: 1px; }
    .index-banner .intro .s-text { font-size: 14px; align-self: center; padding: 0.5rem 1rem; line-height: 1.5; background: rgba(201, 1, 1, 0.8); }
    .index-banner .swiper-prev, .index-banner .swiper-next { display: none; }
    .index-banner .swiper-pagination-bullets .swiper-pagination-bullet { width: 20px; margin: 0 5px; }
    .index-banner .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 40px; }
}

.index-about-section {
    padding: 80px 0;
    background-color: #fff;
}

.index-about {
    justify-content: space-between;
    align-items: flex-start;
}

.common-title .title {
    font-size: 22px;
    color: #333;
    font-weight: bold;
}

.common-title .title-line {
    margin: 15px 0 25px;
}

.common-title .title-line span:first-child {
    width: 60px;
    height: 4px;
    background-color: var(--red);
}

.common-title .title-line span:last-child {
    width: 0;
    height: 0;
    border-top: 4px solid var(--red);
    border-right: 4px solid transparent;
}

.index-about .intro {
    color: #666;
    line-height: 1.8;
    font-size: 16px;
    text-align: justify;
}

.index-about .intro mark {
    color: var(--red);
    background: none;
    font-weight: bold;
}

.count-row {
    margin: 40px 0;
    padding: 30px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
}

.count-num {
    font-size: 46px;
    color: var(--red);
    font-weight: bold;
    line-height: 1;
}

.count-row sub {
    color: var(--red);
    font-size: 22px;
    bottom: 0.2em;
    margin-left: 2px;
}

.count-title {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
}

.count-box .text {
    position: relative;
    padding-right: 20px;
}

.count-box .text .count-line {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: #eee;
}

.index-about .btn-row {
    align-items: center;
    gap: 15px;
}

.btn-common {
    border: 1px solid #333;
    color: #333;
    border-radius: 30px;
    padding: 6px 20px;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
}

.btn-common:hover {
    background-color: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 5px 15px rgba(232, 65, 39, 0.3);
}

.btn-logo {
    width: 28px;
    height: 24px;
    background: url("./images/icon/logo_more_grey.webp") no-repeat left center;
    background-size: contain;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: grayscale(100%);
    opacity: 0.6;
}

.btn-common:hover + .btn-logo {
    transform: rotateY(360deg);
    filter: grayscale(0%);
    opacity: 1;
    background: url("./images/icon/logo_more.webp") no-repeat left center;
    background-size: contain;
}

.index-about .about-images {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.index-about .about-images img {
    width: 100%;
    border-radius: 4px;
    transition: all 0.5s ease;
}

.about-d {
    height: 100px;
    background: url("./images/index_gif01.webp") no-repeat center top;
    margin-top: 40px;
}

/* 解决 Swiper 渐变重叠问题 */
.index-banner .swiper-slide {
    transition-property: opacity;
}

/* 初始状态设置 */
.index-banner .swiper-slide img {
    transform: scale(1);
    will-change: transform;
}

/* 兼容 Object-fit，防止黑边 */
.index-banner .swiper-slide .img, 
.index-banner .swiper-slide .img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.index-banner .swiper-slide img, 
.index-banner .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (min-width: 1441px) {
    .index-about .about-text { width: 48%; }
    .index-about .about-images { width: 48%; }
    .index-about .about-images img { height: 500px; object-fit: cover; }
}

@media (max-width: 1440px) and (min-width: 1200px) {
    .index-about .about-text { width: 48%; }
    .index-about .about-images { width: 48%; }
    .index-about .about-images img { height: 420px; object-fit: cover; }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .index-about { flex-direction: column; gap: 40px; }
    .index-about .about-text, .index-about .about-images { width: 100%; }
    .index-about .about-images img { height: 450px; object-fit: cover; }
    .count-row { justify-content: flex-start; flex-wrap: wrap; gap: 30px 0; }
    .count-box { width: 50%; }
    .count-box .text .count-line { display: none; }
}

@media (max-width: 768px) {
    .index-about-section { padding: 50px 20px; }
    .index-about { flex-direction: column; gap: 35px; }
    .index-about .about-text, .index-about .about-images { width: 100%; }
    .common-title .title { font-size: 26px; text-align: center; margin-left: 25px;}
    .common-title .title-line { justify-content: center; }
    .index-about .intro { font-size: 15px; }
    .count-row { flex-wrap: wrap; justify-content: center; gap: 25px 0; }
    .count-box { width: 50%; text-align: center; }
    .count-box .text { padding-right: 0; }
    .count-box .text .count-line { display: none; }
    .btn-row { justify-content: center; }
    .index-about .about-images img { height: 300px; object-fit: cover; }
    .about-d { display: none; }
}


.index-products-section, .index-products-section * {
    box-sizing: border-box;
}

.index-products-section {
    background-color: #f7f8fa;
    padding: 60px 0;
    overflow: hidden;
    width: 100%;
}

.index-products-section .wrapper {
    max-width: 1440px;
    margin: 0 auto;
}

.index-products-section .common-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.index-products-section .right-btn {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}

.index-products-section .products {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.index-products-section .products .item {
    background-color: white;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.index-products-section .products .item-expand {
    flex: 1.8;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.index-products-section .products .item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    position: absolute;
    left: 40px;
    top: 73px;
    z-index: 10;
    transition: background-color 0.3s;
}

.index-products-section .products .item-expand .dot {
    background-color: var(--red);
}

.index-products-section .products .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.index-products-section .products .header .tl {
    font-size: 22px;
    font-weight: bold;
}

.index-products-section .products .header .tl a {
    color: #333;
}

.index-products-section .products .header .tr {
    display: flex;
    gap: 20px;
    opacity: 0;
    font-size: 14px;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.index-products-section .products .item-expand .header .tr {
    opacity: 1;
}

.index-products-section .products .header .tr .more a {
    color: #888;
}

.index-products-section .products .header .tr .inquiry {
    color: var(--red);
    cursor: pointer;
    font-weight: bold;
}

.index-products-section .products .intro {
    display: flex;
    align-items: stretch;
    gap: 0;
    transition: gap 0.4s ease;
    height: 100%;
}

.index-products-section .products .item-expand .intro {
    gap: 20px;
}

.index-products-section .products .intro img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.index-products-section .products .item-expand .intro img {
    width: 45%;
}

.index-products-section .products .intro .text {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}

.index-products-section .products .item-expand .intro .text {
    width: 55%;
    opacity: 1;
    white-space: normal;
}

.index-products-section .products .intro .title {
    position: relative;
    padding-left: 15px;
    display: flex;
}

.index-products-section .products .intro .title::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ddd;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s;
}

.index-products-section .products .intro .title a {
    color: #555;
    font-size: 15px;
    transition: color 0.3s;
    line-height: 1.4;
}

.index-products-section .products .intro .title a:hover {
    color: var(--red);
}

.index-products-section .products .intro .title a:hover::before {
    background-color: var(--red);
}

.index-products-section .products .dash-line {
    display: none;
}

.index-services {
    margin: 40px auto 0;
    background: url("./images/index_service_background.webp") no-repeat center center;
    background-size: cover;
    border-radius: 8px;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.index-services .sl {
    display: flex;
    gap: 40px;
}

.index-services .sl .item {
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.index-services .sl .item img {
    height: 50px;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.index-services .sl .item:hover img {
    transform: translateY(-5px);
}

.index-services .sr {
    display: flex;
    gap: 20px;
}

.index-services .sr .btn-1 a, .index-services .sr .btn-2 a {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 15px;
    text-align: center;
}

.index-services .sr .btn-1 a {
    background-color: white;
    color: var(--red);
    box-shadow: 0 4px 15px rgba(255,255,255,0.3);
}

.index-services .sr .btn-1 a:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

.index-services .sr .btn-2 a {
    border: 2px solid white;
    color: white;
}

.index-services .sr .btn-2 a:hover {
    background-color: white;
    color: var(--red);
}

@media (min-width: 1200px) {
    .index-products-section .products {
        flex-wrap: nowrap;
    }
    .index-products-section .products .item,
    .index-products-section .products .item-expand {
        height: 380px; 
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .index-products-section > .wrapper:first-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .index-products-section .common-header {
        width: 100%;
    }
    .index-products-section .products {
        display: contents;
    }
    .index-products-section .products .item,
    .index-products-section .products .item-expand {
        width: calc(50% - 10px);
        flex: none;
        margin-bottom: 20px;
        height: 380px;
    }
    .index-products-section .products .item-expand {
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }
    .index-products-section .products .item .header .tr {
        opacity: 1;
    }
    .index-products-section .products .intro {
        gap: 15px;
    }
    .index-products-section .products .item .intro .text {
        width: 55%;
        opacity: 1;
        display: flex;
        white-space: normal;
    }
    .index-products-section .products .item .intro img {
        width: 45%;
    }
    .index-products-section .products .item .dot {
        background-color: var(--red);
    }
    .index-services {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .index-products-section {
        padding: 40px 0;
    }
    .index-products-section .products {
        flex-direction: column;
        gap: 20px;
    }
    .index-products-section .products .item,
    .index-products-section .products .item-expand {
        width: 100%;
        padding: 20px;
        flex: none;
    }
    .index-products-section .products .header .tl {
        font-size: 18px;
    }
    .index-products-section .products .item .header .tr {
        opacity: 1;
    }
    .index-products-section .products .intro {
        flex-direction: column;
        gap: 15px;
    }
    .index-products-section .products .item .intro img,
    .index-products-section .products .item-expand .intro img {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    .index-products-section .products .item .intro .text {
        width: 100%;
        opacity: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        white-space: normal;
    }
    .index-products-section .products .intro .title {
        padding-left: 12px;
    }
    .index-products-section .products .intro .title a {
        font-size: 13px;
    }
    .index-products-section .products .item .dot {
        display: none;
    }
    .index-services {
        flex-direction: column;
        padding: 30px 15px;
        gap: 25px;
        margin-top: 30px;
    }
    .index-services .sl {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px 0;
        width: 100%;
    }
    .index-services .sl .item {
        width: 48%;
        margin: 0;
        font-size: 14px;
    }
    .index-services .sl .item img {
        height: 40px;
    }
    .index-services .sr .btn-1, .index-services .sr .btn-2 {
        text-align: center;
    }
    .index-services .sr .btn-1 a, .index-services .sr .btn-2 a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 20px;
        font-size: 13px;
        white-space: nowrap;
    }
}




.index-factory-section * { box-sizing: border-box; }

.index-factory-section {
    position: relative;
    width: 100%;
    padding: 30px 0 0 0;
    overflow: hidden;
    background-color: #f7f8fa; 
}

.index-factory-section .img-box {
    position: relative;
    width: 100%;
}

.index-factory-section .bg-images {
    position: relative;
    width: 100%;
    min-height: 700px; 
    background-color: #000;
}

.index-factory-section .bg-images .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.index-factory-section .bg-images .img.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.index-factory-section .bg-images .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.index-factory-section .img-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
    z-index: 3;
    pointer-events: none;
}

.index-factory-section .wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1440px;
    height: 100%;
    z-index: 5;
    color: white;
}

.index-factory-section .factory-content {
    display: flex;
    height: 100%;
}

.index-factory-section .left-nav {
    width: 320px;
    border-right: 1px solid rgba(255,255,255,0.2);
    position: relative;
    display: flex;
    flex-direction: column;
}

.index-factory-section .text-header {
    padding-top: 80px;
    padding-right: 20px;
}

.index-factory-section .text-header .title {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.index-factory-section .text-header .intro {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

.index-factory-section .tab-list {
    margin-top: auto; 
    width: 100%;
    padding-bottom: 50px;
}

.index-factory-section .tab-list .item {
    display: flex;
    align-items: center;
    height: 60px;
    font-size: 16px;
    cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-left: 40px; 
    position: relative;
    transition: all 0.3s;
    background: url("images/icon/index_factory_green.webp") no-repeat 12px center;
}

.index-factory-section .tab-list .item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.index-factory-section .tab-list .item.active {
    background-image: url("images/icon/index_factory_red.webp"), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(255, 0, 0, 0.6) 100%);
    background-repeat: no-repeat, no-repeat !important;
    background-position: 12px center, left center !important;
    background-size: auto, 100% 100% !important;
    font-weight: bold;
    color: #fff;
}

.index-factory-section .tab-list .item.active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 12px;
    height: 11px;
    background: url("images/icon/index_factory_Arrow.webp") no-repeat center center;
}

.index-factory-section .right-info {
    flex-grow: 1;
    position: relative;
}

.index-factory-section .info-panels {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
}

.index-factory-section .rb {
    display: none;
    align-items: stretch;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
    animation: fadeInPanel 0.5s ease;
}

.index-factory-section .rb.active {
    display: flex;
}

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

.index-factory-section .rb .text {
    flex-grow: 1;
    padding-left: 30px;
    padding-right: 40px;
}

.index-factory-section .rb .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

.index-factory-section .rb .intro {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

.index-factory-section .rb .btn-wrap {
    display: flex;
    align-items: center;
}

.index-factory-section .rb button {
    padding: 12px 30px;
    background-color: var(--red);
    border: none;
    border-radius: 30px 0 0 30px; 
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.index-factory-section .rb button:hover {
    background-color: var(--green);
}

@media (max-width: 1199px) and (min-width: 769px) {
    .index-factory-section .bg-images { min-height: 400px; }
    .index-factory-section .img-box::before { display: none; }

    .index-factory-section .wrapper {
        position: relative;
        left: 0;
        transform: none;
        padding: 0;
    }

    .index-factory-section .factory-content {
        flex-direction: column;
        height: auto;
    }

    .index-factory-section .left-nav {
        width: 100%;
        border-right: none;
    }

    .index-factory-section .text-header { 
        padding: 40px 20px; 
        text-align: center; 
        background: #fff; 
        color: #333; 
    }
    
    .index-factory-section .text-header .intro { color: #666; }
    
    .index-factory-section .tab-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        padding: 20px;
        background: #f7f8fa;
    }

    .index-factory-section .tab-list .item {
        border: 1px solid #ddd;
        border-radius: 6px;
        justify-content: center;
        padding-left: 0;
        background: #fff;
        color: #333;
    }
    
    .index-factory-section .tab-list .item:last-child { border-bottom: 1px solid #ddd; }
    .index-factory-section .tab-list .item::before { display: none; } 

    .index-factory-section .tab-list .item.active {
        background: var(--red) !important;
        border-color: var(--red);
        color: #fff !important;
    }

    .index-factory-section .info-panels {
        position: relative;
        bottom: 0;
        background: #fff;
        padding: 30px;
        margin: 0 20px 30px;
        border-radius: 8px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    
    .index-factory-section .rb { border-top: none; padding-top: 0; }
    .index-factory-section .rb .text { padding-left: 0; }
    .index-factory-section .rb .title { color: #333; }
    .index-factory-section .rb .intro { color: #666; }
    .index-factory-section .rb button { border-radius: 30px; }
}

@media (max-width: 768px) {
    .index-factory-section .img-box {
        display: flex;
        flex-direction: column;
    }
    
    .index-factory-section .wrapper {
        position: relative;
        left: 0;
        transform: none;
        padding: 0;
        order: 1 !important; 
        background-color: #fff; 
    }

    .index-factory-section .bg-images { 
        min-height: 250px; 
        order: 2 !important; 
        margin-top: 15px; 
    } 

    .index-factory-section .img-box::before { display: none; }

    .index-factory-section .factory-content {
        flex-direction: column;
        height: auto;
    }

    .index-factory-section .left-nav { width: 100%; border-right: none; }

    .index-factory-section .text-header { 
        padding: 30px 20px 20px; 
        text-align: center; 
        background: #fff;
        color: #333;
    }
    .index-factory-section .text-header .title { font-size: 26px; }
    .index-factory-section .text-header .intro { color: #666; }

    .index-factory-section .tab-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 20px;
        background: #fff; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    .index-factory-section .tab-list::-webkit-scrollbar { display: none; } 

    .index-factory-section .tab-list .item {
        flex: 0 0 auto;
        white-space: nowrap;
        height: 36px;
        padding: 0 18px;
        border: 1px solid #ddd;
        border-radius: 20px;
        margin-right: 10px;
        font-size: 14px;
        background: #fff;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .index-factory-section .tab-list .item::before { display: none; }

    .index-factory-section .tab-list .item.active {
        background: var(--red) !important;
        border-color: var(--red) !important;
        color: #fff !important;
    }
    .index-factory-section .tab-list .item.active::after { display: none !important; }

    .index-factory-section .info-panels {
        position: relative;
        bottom: 0;
        background: #f7f8fa; 
        padding: 25px 20px;
        margin: 0; 
    }
    
    .index-factory-section .rb.active {
        flex-direction: column;
        gap: 15px;
    }
    
    .index-factory-section .rb { border-top: none; padding-top: 0; }
    .index-factory-section .rb .text { padding: 0; text-align: center; }
    .index-factory-section .rb .title { font-size: 20px; color: #333; margin-bottom: 5px; }
    .index-factory-section .rb .intro { font-size: 14px; color: #666; }
    
    .index-factory-section .rb .btn-wrap { justify-content: center; margin-top: 15px; }
    .index-factory-section .rb button { border-radius: 30px; width: 100%; justify-content: center; }
}







/* ============================================================
   基础与 PC 大屏样式 (> 1200px)
   ============================================================ */
.index-industry-section {
    padding: 100px 0;
    background-color: #fff;
    box-sizing: border-box;
}

.index-industry-section * { box-sizing: border-box; }

.index-industry-section .wrapper {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

.index-industry-section .list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 30px;
}

/* ============================================================
   行业应用模块 - 头部样式重构 (标题右侧紧贴对齐 + 移动端隐藏按钮)
   ============================================================ */

/* 1. 提升整个头部的层级，避免任何遮挡 */
.index-industry-section .common-header {
    position: relative;
    z-index: 25; 
    width: 100%;
}

/* 2. 标题与按钮组合容器 (让它们同行靠左对齐) */
.title-and-btn-group {
    display: flex;
    justify-content: flex-start; /* 统统靠左站 */
    align-items: flex-start; /* 顶部对齐 */
    gap: 160px; /* 标题块和按钮块之间的间距 */
}

/* 3. 标题组合容器内部排列 */
.index-industry-section .left-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

/* 4. 按钮与 Logo 的容器 */
.header-action-wrap {
    display: flex;
    align-items: center; /* 按钮文字和 Logo 垂直居中 */
    gap: 12px;
    margin-top: 10px; /* 微调下移，对齐 <h2> 汉字的视觉顶部 */
}

/* ============================================================
   响应式适配：移动端 (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .index-industry-section .common-header {
        justify-content: center; /* 手机端整体居中 */
    }
    
    .title-and-btn-group {
        justify-content: center; 
        width: 100%;
    }
    
    .index-industry-section .common-title .title-line {
        justify-content: center; /* 红线居中 */
    }

    /* 手机端直接隐藏按钮区域，保持界面清爽 */
    .header-action-wrap {
        display: none !important; 
    }
}

@media (max-width: 1399px) and (min-width: 769px) {
   .title-and-btn-group {
    gap: 80px;
}
}


/* 左侧文字区 */
.index-industry-section .left-intro {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.index-industry-section .xzk-intro {
    background-color: #f7f8fa;
    border-radius: 0 40px 40px 0;
    padding: 25px 30px;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
    margin-bottom: 30px;
}

.index-industry-section .xzk-intro b {
    color: var(--red);
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.index-industry-section .industry-text-panels {
    position: relative;
    flex-grow: 1;
}

.index-industry-section .industry-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 0 60px 60px 0;
    padding: 35px 30px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.4s ease;
}

.index-industry-section .industry-intro.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.index-industry-section .industry-intro .title {
    color: var(--red);
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.index-industry-section .industry-intro .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--red);
}

.index-industry-section .industry-intro .text {
    line-height: 1.8;
    color: #666;
    font-size: 15px;
}

/* 右侧图片区 */
.index-industry-section .right-img-panels {
    width: 55%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.index-industry-section .right-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

.index-industry-section .right-img.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.index-industry-section .right-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 底部图标导航栏 */
.index-industry-section .industry-icon {
    position: absolute;
    bottom: 30px;
    left: 15px; /* 对齐 content */
    background-color: white;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    overflow: hidden;
    z-index: 10;
}

.index-industry-section .industry-icon .item {
    text-align: center;
    width: 150px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
}

.index-industry-section .industry-icon .item img {
    height: 40px;
    margin-bottom: 12px;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.index-industry-section .industry-icon .item .icon-white {
    position: absolute;
    top: 32px; /* 居中微调 */
    opacity: 0;
}

.index-industry-section .industry-icon .item .caption {
    font-size: 14px;
    z-index: 2;
    position: relative;
}

/* 激活与悬停状态 */
.index-industry-section .industry-icon .item.active,
.index-industry-section .industry-icon .item:hover {
    color: white;
}

.index-industry-section .industry-icon .item.active .icon-grey,
.index-industry-section .industry-icon .item:hover .icon-grey {
    opacity: 0;
}

.index-industry-section .industry-icon .item.active .icon-white,
.index-industry-section .industry-icon .item:hover .icon-white {
    opacity: 1;
}

/* 背景红色滑块效果 */
.index-industry-section .industry-icon .item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    transition: height 0.3s ease-out;
    background-color: var(--red);
    z-index: 1;
}

.index-industry-section .industry-icon .item.active::before,
.index-industry-section .industry-icon .item:hover::before {
    height: 100%;
}

/* 分割线 */
.index-industry-section .industry-icon .item::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 40%;
    top: 30%;
    right: 0;
    background-color: #eaeaea;
    z-index: 3;
}

.index-industry-section .industry-icon .item:last-child::after,
.index-industry-section .industry-icon .item.active::after,
.index-industry-section .industry-icon .item:hover::after {
    display: none;
}

/* ============================================================
   修复 PC 大屏（> 1200px）图片区塌陷的问题
   ============================================================ */
@media (min-width: 1200px) {
    .index-industry-section .list {
        min-height: 500px; /* 给整个图文列表区一个保底高度 */
    }
    
    .index-industry-section .industry-text-panels {
        min-height: 380px; /* 确保左侧文字区有足够空间，防止挤压 */
    }

    .index-industry-section .right-img-panels {
        position: absolute;
        top: 0;
        right: 0;
        width: 55%;
        height: 100%; /* 让右侧图片区和左侧文字区等高 */
        min-height: 500px; /* 强制大图高度，展现大厂气势 */
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* 确保悬浮图标的绝对定位不会受到影响 */
    .index-industry-section .industry-icon {
        position: absolute;
        bottom: 30px;
        left: 15px; 
        z-index: 10;
    }
}

/* ============================================================
   响应式适配：平板与笔记本 (769px - 1199px)
   ============================================================ */
@media (max-width: 1199px) and (min-width: 769px) {
    .index-industry-section { padding: 60px 0; }

    .index-industry-section .left-intro,
    .index-industry-section .right-img-panels {
        width: 100%;
    }

    /* 恢复正常的文档流高度，防止 absolute 坍塌 */
    .index-industry-section .industry-text-panels {
        position: relative;
        min-height: 160px; /* 给文字区一个保底高度 */
    }

    .index-industry-section .right-img-panels {
        height: 400px; /* 给图片区固定高度 */
    }

    /* 核心修复：解除底部悬浮图标的绝对定位，变为普通的块级元素 */
    .index-industry-section .industry-icon {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 30px;
        flex-wrap: wrap; /* 允许折行 */
        border-radius: 8px;
    }

    .index-industry-section .industry-icon .item {
        width: 33.333%; /* 每行 3 个 */
        border-bottom: 1px solid #eaeaea;
    }
    
    .index-industry-section .industry-icon .item:nth-child(3n)::after {
        display: none; /* 每行最后一个去掉竖线 */
    }
}

/* ============================================================
   响应式适配：移动端 (≤ 768px) - 极限压缩与 3x2 网格
   ============================================================ */
@media (max-width: 768px) {
    .index-industry-section { padding: 30px 0; } /* 移动端整体上下再压缩 */
    .index-industry-section .left-intro,
    .index-industry-section .right-img-panels {
        width: 100%;
    }

    .index-industry-section .xzk-intro {
        border-radius: 8px;
        padding: 15px; /* 压缩内边距 */
        font-size: 13px;
        margin-bottom: 15px;
    }

    .index-industry-section .industry-intro {
        border-radius: 8px;
        padding: 20px 15px;
        transform: translateY(10px); 
    }
    
    .index-industry-section .industry-intro.active {
        transform: translateY(0);
    }

    .index-industry-section .industry-text-panels {
        min-height: 180px; /* 压缩文字区保底高度 */
    }

    .index-industry-section .right-img-panels {
        height: 200px; /* 大幅压缩图片高度，为下方腾出空间 */
        border-radius: 8px;
    }

    /* 移动端图标区：改为 3x2 网格 */
    .index-industry-section .industry-icon {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: 15px;
        border: none;
        box-shadow: none;
        background: transparent;
        
        /* 核心：CSS Grid 网格布局 */
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 强制等分 3 列 */
        gap: 10px; /* 图标之间的空隙 */
    }

    .index-industry-section .industry-icon .item {
        width: 100%; /* 撑满网格单元 */
        height: 85px; /* 压缩单个图标高度 */
        border: 1px solid #eaeaea;
        border-radius: 6px;
        background: #fff;
        margin-right: 0; /* 清除横向滑动的残留外边距 */
    }

    .index-industry-section .industry-icon .item::after { display: none; }
    
    /* 极限微调图标与文字大小，防止在狭小网格中爆行 */
    .index-industry-section .industry-icon .item img { height: 26px; margin-bottom: 6px; }
    .index-industry-section .industry-icon .item .icon-white { top: 18px; }
    .index-industry-section .industry-icon .item .caption { 
        font-size: 12px; /* 缩小字号 */
        padding: 0 2px;
        line-height: 1.2;
    }
}



/* ============================================================
   首页 - 应用案例板块 (图层分离终极对齐方案)
   ============================================================ */
.index-case { background: url("images/index_cases_background.webp"); padding-top: 2rem; }
.index-case * { box-sizing: border-box; }


.index-case .header { display: flex; justify-content: space-between; align-items: center; }
.index-case .right-btn { display: flex; align-items: center; gap: 10px; }
.index-case .logo-list { display: flex !important; gap: 1rem; margin-top: 1rem; width: 100%; }
.pagination-icons .swiper-pagination-bullet { display: flex !important; align-items: center; justify-content: center; background-color: white; padding: 1rem 0 !important; flex-grow: 1; height: 100px; max-width: calc(100% / 7); position: relative; border-radius: 0; opacity: 1; cursor: pointer; }
.pagination-icons .swiper-pagination-bullet img { filter: grayscale(1) opacity(0.6); max-width: 100%; height: auto; display: block; }
.pagination-icons .swiper-pagination-bullet-active img, .pagination-icons .swiper-pagination-bullet:hover img { filter: grayscale(0); opacity: 1; }
.index-case .logo-list .swiper-pagination-bullet-active::before { position: absolute; content: ""; width: 100%; height: 3px; background-color: var(--red); top: 0; left: 0; }
.index-case .green-line { height: 4px; background-color: var(--green); }


.index-case .banner { position: relative; width: 100%; }
.index-case .swiper-slide { 
    position: relative; 
    min-height: 600px;
}

.index-case .slide-bg-img { 
    position: absolute; inset: 0; width: 100%; height: 100%; 
    object-fit: cover; z-index: 1; 
}

.index-case .slide-red-bg {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 50%; 
    background-color: rgba(130, 0, 4, 0.85);
    z-index: 2;
}

.index-case .slide-content-container {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 40px 0;
}

.index-case .text {
    width: 50%; 
    padding-right: 40px; 
}

/* --- 文字排版样式 --- */
.index-case .text .title { color: white; font-size: 1.8rem; font-weight: bold; position: relative; margin-bottom: 2.5rem; }
.index-case .text .title::after { content: ""; position: absolute; height: 4px; width: 60px; bottom: -1rem; left: 0; background: #ffffff; }

.index-case .text .item-list { color: white; display: flex; flex-wrap: wrap; gap: 1.5rem 0; margin-bottom: 2.5rem; }
.index-case .text .item { width: 50%; box-sizing: border-box; padding-left: 45px; font-size: 14px; }
.index-case .text .item .label { opacity: 0.8; }
.index-case .text .item b { font-size: 16px; display: block; margin-top: 5px; }

.index-case .text .loc-icon { background: url("images/icon/index_cases_location.webp") no-repeat left top 2px; background-size: 32px; }
.index-case .text .time-icon { background: url("images/icon/index_cases_time.webp") no-repeat left top 2px; background-size: 32px; }
.index-case .text .type-icon { background: url("images/icon/index_cases_type.webp") no-repeat left top 2px; background-size: 32px; }
.index-case .text .brick-icon { background: url("images/icon/index_cases_Procurement.webp") no-repeat left top 2px; background-size: 32px; }

/* 客户评价卡片 */
.feedback-text-card { background: #ffffff; border-radius: 6px; margin-bottom: 2.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.15); overflow: hidden; }
.feedback-text-card .header { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid #eaeaea; }
.feedback-text-card .h-title { background: var(--green); color: white; font-size: 15px; font-weight: bold; padding: 12px 25px; display: flex; align-items: center; }
.feedback-text-card .customer-info { display: flex; align-items: center; gap: 15px; padding-right: 25px; }
.feedback-text-card .name { text-align: right; line-height: 1.4; }
.feedback-text-card .name b { font-size: 15px; color: #111; }
.feedback-text-card .name span { font-size: 13px; color: var(--red); }
.feedback-text-card .customer-info img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.feedback-text-card .feedback-text { padding: 15px; font-size: 15px; color: #444; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* 按钮 */
.index-case .text .btn { background-color: white; padding: 10px 0; width: 160px; text-align: center; border-radius: 20px; transition: 0.3s ease; }
.index-case .text .btn a { color: var(--red); text-decoration: none; font-weight: bold; font-size: 15px; }
.index-case .text .btn:hover { background-color: #111; }
.index-case .text .btn:hover a { color: white; }


/* ================== 中屏幕防溢出 (保证红墙永远包得住文字) ================== */
@media (max-width: 1300px) {
    .index-case .slide-red-bg { width: 60%; } /* 中屏幕加宽红墙 */
    .index-case .text { width: 60%; } /* 文字也相应占用大一点的 wrapper 比例 */
}
@media (max-width: 992px) {
    .index-case .slide-red-bg { width: 65%; } 
    .index-case .text { width: 70%; padding-right: 20px;}
}


/* ================== 移动端 (极简上下拼接法) ================== */
@media (max-width: 768px) {
    .index-case { padding-top: 1rem; }
    .index-case .header { flex-direction: column; gap: 15px; align-items: center; }
    .index-case .right-btn { display: none !important;}
    
    .index-case .logo-list { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 15px; width: 100%; gap: 8px; }
    .pagination-icons .swiper-pagination-bullet img { height: 180%; }
    .index-case .logo-list::-webkit-scrollbar { display: none; }
    .pagination-icons .swiper-pagination-bullet { flex: 0 0 auto !important; width: 120px !important; max-width: 120px !important; height: 60px !important; padding: 5px; }

    /* 手机端取消叠加，变成上下结构！这是最不容易出错的写法 */
    .index-case .swiper-slide { display: flex; flex-direction: column; min-height: auto; }
    
    /* 图在上 */
    .index-case .slide-bg-img { position: relative; height: 220px; z-index: 1; }
    
    /* 手机端不需要独立的红墙，把它藏掉 */
    .index-case .slide-red-bg { display: none; }
    
    /* 文字内容区直接做成红色方块在下面 */
    .index-case .slide-content-container { background: rgba(185, 21, 27, 0.9); padding: 30px 30px; }
    .index-case .text { width: 100%; padding-right: 0; }
    
    .index-case .text .title { margin-top: 0; font-size: 1.3rem; }
    .index-case .text .item-list { margin-top: 15px; gap: 10px 0; margin-bottom: 1.5rem;}
    .index-case .text .item { padding-left: 30px; font-size: 12px; }
    .index-case .text .item b { font-size: 13px; margin-top: 2px; }
    .index-case .text .item:nth-child(1), .index-case .text .item:nth-child(2), .index-case .text .item:nth-child(3), .index-case .text .item:nth-child(4) { background-size: 20px !important; background-position: left top !important; }

    .index-case .text .btn { width: auto; display: inline-block; padding: 8px 30px; }
    
    /* ⚡️ 移动端强制隐藏客户评价 */
    .feedback-text-card { display: none !important; }
}


/* ============================================================
   新闻与视频模块 - 基础布局
   ============================================================ */
.index-news-videos {
    padding: 80px 0;
    background-color: #fff; 
}

.index-news-videos * { box-sizing: border-box; }

.index-news-videos .wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 核心布局：左右分栏 */
.index-news-videos .flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.index-news-videos .news-column {
    width: 65%; 
}

.index-news-videos .video-column {
    width: 32%; 
}

/* 统一头部样式调整 */
.index-news-videos .common-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
}
.index-news-videos .right-btn {
    align-items: center;
    gap: 10px;
}

/* ============================================================
   左侧：新闻中心排版 (加固防错位)
   ============================================================ */
.index-news {
    display: grid;
    grid-template-columns: 42% 1fr; 
    gap: 0 40px; 
    align-items: start;
}

/* 头条新闻 */
.index-news .top-news {
    grid-column: 1; 
    grid-row: 1 / 5; /* 强制占据左侧 4 行空间 */
    display: flex;
    flex-direction: column;
}

.index-news .top-news .img-box {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

.index-news .top-news .img-box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.index-news .top-news:hover .img-box img {
    transform: scale(1.05); 
}

.index-news .top-news .title a {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 最多两行 */
    overflow: hidden;
}

.index-news .top-news:hover .title a { color: var(--red); }

.index-news .top-news .intro {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 10px 0 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.index-news .top-news .view {
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #eee;
    padding-top: 15px;
    margin-top: auto;
}

.index-news .top-news .date { font-size: 13px; color: #999; }
.index-news .top-news .read-more { font-size: 13px; color: var(--red); font-weight: bold; text-decoration: none;}

/* 右侧列表新闻 */
.index-news .list-news {
    grid-column: 2; 
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2;
    gap: 15px;
    width: 100%;
    min-width: 0; /* 防止子元素撑开 Grid */
    transition: all 0.3s ease;
}

.index-news .list-news:nth-child(2) { padding-top: 0; }
.index-news .list-news:last-child { border-bottom: none; }

.index-news .list-news .date-box {
    flex-shrink: 0; 
    background-color: #f7f8fa;
    padding: 8px;
    text-align: center;
    border-radius: 4px;
    min-width: 70px;
    transition: background-color 0.3s;
}

.index-news .list-news:hover .date-box { 
    background-color: var(--red); 
    color: white; 
}

.index-news .list-news .date-box .day { font-size: 24px; font-weight: bold; display: block; line-height: 1; }
.index-news .list-news .date-box .year-month { font-size: 12px; display: block; margin-top: 5px; color: inherit; opacity: 0.8;}

.index-news .list-news .title-box {
    flex-grow: 1;
    min-width: 0; 
}

.index-news .list-news .title-box a {
    font-size: 15px;
    color: #333;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis; /* 省略号 */
    width: 100%;
}

.index-news .list-news:hover .title-box a {
    color: var(--red);
    transform: translateX(5px);
    transition: all 0.3s;
}

/* ============================================================
   右侧：视频中心排版
   ============================================================ */
.index-videos {
    display: flex; /* 确保垂直排列生效 */
    flex-direction: column;
    gap: 25px;
}

.index-videos .item {
    width: 100%;
}

.index-videos .item .img {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.index-videos .item .img img {
    width: 100%;
    height: 180px; 
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.index-videos .item:hover .img img { transform: scale(1.05); }

/* 视频悬浮遮罩层 */
.index-videos .item .img::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 1;
    transition: background 0.3s;
}

.index-videos .item:hover .img::before { background: rgba(0,0,0,0.1); }

/* 原版播放小三角恢复 */
.index-videos .item .img::after {
    content: "";
    position: absolute;
    width: 50px; 
    height: 50px;
    background: url("images/icon/index_video.webp") no-repeat center center;
    background-size: contain;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s;
}

.index-videos .item:hover .img::after { transform: translate(-50%, -50%) scale(1.1); }

.index-videos .item .title a {
    font-size: 15px;
    color: #333;
    font-weight: bold;
    text-align: center;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index-videos .item:hover .title a { color: var(--red); }


/* ============================================================
   响应式适配：平板与小尺寸笔记本 (769px - 1199px)
   ============================================================ */
@media (max-width: 1199px) and (min-width: 769px) {
    .index-news-videos .flex-layout {
        flex-direction: column; 
    }
    .index-news-videos .news-column,
    .index-news-videos .video-column {
        width: 100%;
    }
    
    .index-videos { flex-direction: row; }
    .index-videos .item { width: 50%; }
}


/* ============================================================
   响应式适配：移动端 (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .index-news-videos { padding: 30px 0; }
    
    .index-news-videos .flex-layout {
        flex-direction: column;
        gap: 30px;
    }
    
    .index-news-videos .news-column,
    .index-news-videos .video-column { width: 100%; }

    .index-news-videos .common-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .index-news-videos .right-btn { display: none; } 

    .index-news {
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .index-news .top-news {
        grid-column: 1;
        grid-row: auto; 
    }
    
    .index-news .list-news {
        grid-column: 1; 
    }

    .index-news .top-news .img-box img { height: 180px; }
    
    .index-news .list-news { padding: 12px 0; gap: 15px; }
    .index-news .list-news .date-box { min-width: 60px; padding: 8px; }
    .index-news .list-news .date-box .day { font-size: 20px; }
    .index-news .list-news .date-box .year-month { font-size: 11px; }
    .index-videos { flex-direction: column; gap: 20px; }
    .index-videos .item .img img { height: 200px; }
}



/* ============================================================
   页脚 (Footer) - 基础与大屏样式 (PC > 1200px)
   ============================================================ */
footer {
    margin-top: 3rem;
    background-color: #262726;
    border-top: 5px solid var(--red);
    font-family: inherit;
}

footer * { box-sizing: border-box; }

footer a, .footer-copyright {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer .wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- 顶部 Logo 区 --- */
.footer-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 0;
}

.footer-logo img {
    max-height: 65px; /* 大气饱满的大屏 Logo */
    width: 100%;
}

/* --- 主体内容区 --- */
.footer-body {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 3rem 0 4rem;
}

.footer-body-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; 
}

/* --- 左侧：链接列 --- */
.footer-links {
    display: flex;
    gap: 3rem;
    position: relative;
    flex-shrink: 0;
}

/* 链接区分割线 */
.footer-links::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: -8rem; 
    width: 1px;
    height: 80%;
    background-color: #333;
}

.footer-products, .footer-aboutUs {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--red);
}

.footer-links .item {
    margin-bottom: 6px; /* 紧凑精致的行间距 */
}

.footer-links a, .footer-contact .item {
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1.4;
}

.footer-links a:hover, .footer-contact a:hover {
    color: var(--red);
}

/* --- 中间：联系方式列 --- */
.footer-contact {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    max-width: 450px;
}

.footer-hotline {
    margin-bottom: 1.5rem;
    color: #aaa;
    font-size: 14px;
}

.footer-contact b {
    display: block;
    font-size: 26px;
    color: white;
    margin-top: 5px;
}

.footer-contact .item {
    margin-bottom: 8px;
}

.footer-contact .item a { color: #aaaaaa; }

/* 社交图标动效 */
.footer-contact .item.icons {
    display: flex;
    gap: 22px;
    margin-top: 1.5rem;
}

.footer-contact .item.icons > div {
    width: 32px;
    height: 32px;
    position: relative;
    background-size: contain !important;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.footer-contact .item.icons > div:hover {
    transform: translateY(-3px); 
}

.footer-contact .item.icons > div a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    overflow: hidden;
}

/* 社交图标背景图 */
.footer-contact .email { background: url("images/icon/bottom_email_white.webp") no-repeat center; }
.footer-contact .email:hover { background: url("images/icon/bottom_email.webp") no-repeat center; }
.footer-contact .wechat { background: url("images/icon/bottom_weixin_white.webp") no-repeat center; }
.footer-contact .wechat:hover { background: url("images/icon/bottom_weixin.webp") no-repeat center; }
.footer-contact .weishipin { background: url("http://www.xzkgroup.cn/wp-content/uploads/2026/05/1779264383-b4eb23df44c2779.webp") no-repeat center; }
.footer-contact .weishipin:hover { background: url("http://www.xzkgroup.cn/wp-content/uploads/2026/05/1779264383-5b6ef1c8734d14f.webp") no-repeat center; }
.footer-contact .douyin { background: url("http://www.xzkgroup.cn/wp-content/uploads/2026/05/1779264779-7ab8b5affc83f6e.webp") no-repeat center; }
.footer-contact .douyin:hover { background: url("http://www.xzkgroup.cn/wp-content/uploads/2026/05/1779264779-653a4ad61a51dea.webp") no-repeat center; }

/* 微信二维码悬浮 */
.footer-contact .wechat .wechat-qrcode, .footer-contact .weishipin .wechat-qrcode, .footer-contact .douyin .wechat-qrcode {
    display: none;
    position: absolute;
    top: -110px; 
    left: 50%;
    width: 90px;
    height: 90px;
    z-index: 99;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.footer-contact .wechat .wechat-qrcode img, .footer-contact .weishipin .wechat-qrcode img, .footer-contact .douyin .wechat-qrcode img {
    width: 100%;
    height: 100%;
}

.footer-contact .wechat:hover .wechat-qrcode, .footer-contact .weishipin:hover .wechat-qrcode, .footer-contact .douyin:hover .wechat-qrcode { display: block; }

/* --- 右侧：在线表单区 --- */
.footer-consultation {
    display: flex;
    flex-direction: column;
    width: 320px; /* 锁定表单容器宽度，防挤压变形 */
    flex-shrink: 0;
}

/* 1. 强行压制外部容器的 flex 横排 */
.footer-consultation.flex {
    flex-direction: column !important;
}

/* 2. 强行压制 CF7 内部的 <div class="flex form"> 和 form 标签 */
.footer-consultation .flex,
.footer-consultation form, 
.footer-consultation .wpcf7 form {
    display: flex !important;
    flex-direction: column !important; /* 核心：无论谁带有 flex，在这里必须垂直排！ */
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap !important;
}

/* 3. 清除 CF7 自动生成的 p 标签带来的干扰 */
.footer-consultation .wpcf7 p {
    margin: 0; 
    padding: 0; 
    width: 100%;
    display: block !important;
}

.footer-consultation .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* 4. 输入框样式强制接管 */
.footer-consultation input:not([type=submit]), 
.footer-consultation textarea {
    width: 100% !important;
    background-color: #333;
    border: 1px solid #444;
    padding: 10px;
    color: white;
    font-family: inherit;
    font-size: 13px;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s;
    display: block; /* 防止被 flex 影响变为行内元素 */
}

.footer-consultation textarea:focus, 
.footer-consultation input:focus {
    outline: none;
    border-color: var(--red); 
}

.footer-consultation textarea {
    height: 80px;
    resize: none;
}

.footer-consultation input[type=submit] {
    border: none;
    background-color: var(--red);
    color: white;
    font-weight: bold;
    border-radius: 4px;
    padding: 12px 0;
    cursor: pointer;
    width: 100% !important;
    transition: background-color 0.3s;
}

.footer-consultation input[type=submit]:hover {
    background-color: var(--green); 
}

.footer-consultation .wpcf7-response-output {
    margin-top: 10px !important;
    color: white;
    font-size: 12px;
}

/* ============================================================
   底部中文版权与备案信息
   ============================================================ */
.footer-copyright {
    padding: 15px 0;
    font-size: 13px;
    font-weight: 300;
    background-color: #1a1b1a; 
    border-top: 1px solid #2a2b2a;
}

.footer-copyright .wrapper {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-copyright .copyright-text {
    color: #777;
}

.footer-copyright .beian-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.footer-copyright .beian-info a {
    color: #888;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.footer-copyright .beian-info a svg path {
    transition: fill 0.3s ease;
}

.footer-copyright .beian-info a:hover {
    color: var(--red);
}

.footer-copyright .beian-info a:hover svg path {
    fill: var(--red);
}

.footer-copyright .beian-info .line {
    color: #444; 
    font-size: 12px;
}


/* ============================================================
   响应式适配：平板 (Tablet) (769px - 1199px)
   ============================================================ */
@media (max-width: 1199px) and (min-width: 769px) {
    .footer-body-flex {
        flex-wrap: wrap; 
        gap: 50px 20px;
    }

    .footer-links { width: 45%; justify-content: space-between; }
    .footer-contact { width: 45%; max-width: none; }
    .footer-consultation { width: 100%; max-width: 500px; }
    
    .footer-links::after { display: none; }
}

/* ============================================================
   响应式适配：手机 (Mobile) (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .footer-logo {
        flex-direction: column; 
        gap: 20px;
        padding: 2rem 0;
    }
    
    .footer-logo img { max-height: 40px; }

    .footer-body { padding: 2rem 0; }

    .footer-body-flex {
        flex-direction: column; 
        gap: 40px;
    }

    .footer-links {
        width: 100%;
        flex-direction: column; 
        gap: 30px;
    }
    
    .footer-links::after { display: none; }
    .footer-contact { width: 100%; max-width: none; }
    .footer-consultation { width: 100%; }

    /* 微信二维码手机端向下弹出 */
    .footer-contact .wechat .wechat-qrcode { top: 40px; }
    
    /* 手机端版权区文字允许换行居中 */
    .footer-copyright .beian-info { flex-direction: column; gap: 8px; }
    .footer-copyright .beian-info .line { display: none; }
}

/* ============================================================
   弹窗背景层
   ============================================================ */
.index-contact-popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex; 
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.index-contact-popup-bg.hide {
    opacity: 0;
    visibility: hidden;
}

/* ============================================================
   大屏弹窗主体结构
   ============================================================ */
.index-contact-popup {
    width: 1100px;
    max-width: 95%; 
    max-height: 90vh; 
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    position: relative;
    overflow: hidden; 
}

/* 左侧：信息引导区 (高级深色质感) */
.index-contact-popup .contact-left {
    background-color: #1a1a1a; 
    color: #fff;
    padding: 50px 40px;
    width: 45%;
    display: flex;
    flex-direction: column;
}

.index-contact-popup .contact-left .title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
}

.index-contact-popup .contact-left .title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--red);
}

.index-contact-popup .text-1 {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-top: 20px;
}

.index-contact-popup .text-2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.index-contact-popup .text-2 li {
    font-size: 14px;
    line-height: 1.6;
    color: #aaa;
    margin-bottom: 10px;
}

.index-contact-popup .text-3 {
    margin-top: auto; 
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
}

.index-contact-popup .text-3 .label {
    font-size: 12px;
    color: #888;
}

.index-contact-popup .text-3 a, 
.index-contact-popup .text-3 b {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin-top: 5px;
    transition: color 0.3s;
}

.index-contact-popup .text-3 a:hover { color: var(--red); }

.index-contact-popup .text-4 {
    margin-top: 25px;
    display: flex;
    gap: 30px;
}

.index-contact-popup .text-4 .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.index-contact-popup .text-4 img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background: #fff;
    padding: 3px;
}

/* 右侧：表单填写区 */
.index-contact-popup .contact-right {
    padding: 50px 40px;
    width: 55%;
    background-color: #fff;
    overflow-y: auto; 
}

.index-contact-popup .contact-right .title {
    font-size: 28px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
}

.index-contact-popup .contact-right .tip {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* ============================================================
   强固 CF7 表单布局 (绝对不挤压、不丢按钮)
   ============================================================ */
.popup-form-wrapper form,
.popup-form-wrapper .wpcf7 form {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
    width: 100%;
}

    .index-contact-popup .contact-right .form .item {
        margin-bottom: 0.5rem;
    }


/* 恢复 P 标签的正常文档流，干掉导致错位的黑科技 */
.popup-form-wrapper .wpcf7 p {
    margin: 0 !important; 
    padding: 0 !important;
    width: 100% !important;
    display: block !important; 
}

.popup-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 输入框统一风格 */
.popup-form-wrapper input:not([type=submit]), 
.popup-form-wrapper textarea {
    width: 100% !important;
    background-color: #f5f6f8;
    border: 1px solid #e1e3e6;
    padding: 14px 18px;
    font-size: 14px;
    color: #333;
    border-radius: 6px;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.popup-form-wrapper textarea {
    height: 100px;
    resize: none;
}

.popup-form-wrapper input:not([type=submit]):focus, 
.popup-form-wrapper textarea:focus {
    border-color: var(--red);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); 
}

/* 提交按钮强制显示 */
.popup-form-wrapper input[type=submit] {
    display: block !important;
    width: 100% !important;
    background-color: var(--red);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    padding: 16px 0;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.popup-form-wrapper input[type=submit]:hover {
    background-color: var(--green);
}

.popup-form-wrapper .wpcf7-response-output {
    margin-top: 10px !important;
    font-size: 13px;
}

/* ============================================================
   极其优雅的悬浮关闭按钮
   ============================================================ */
.index-contact-popup .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-contact-popup .close-btn::before, 
.index-contact-popup .close-btn::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: #666;
    border-radius: 2px;
    transition: background 0.3s;
}

.index-contact-popup .close-btn::before { transform: rotate(45deg); }
.index-contact-popup .close-btn::after { transform: rotate(-45deg); }

.index-contact-popup .close-btn:hover {
    background: var(--red);
    transform: rotate(90deg); 
}

.index-contact-popup .close-btn:hover::before,
.index-contact-popup .close-btn:hover::after {
    background: #fff;
}

/* ============================================================
   移动端 (≤ 768px)：只留表单，极致简化
   ============================================================ */
@media (max-width: 768px) {
    .index-contact-popup {
        width: 90%;
        max-height: 85vh;
        border-radius: 10px;
    }

    .index-contact-popup .contact-left {
        display: none; 
    }

    .index-contact-popup .contact-right {
        width: 100%;
        padding: 30px 20px;
    }

    .index-contact-popup .contact-right .title { font-size: 24px; }
    .index-contact-popup .contact-right .tip { margin-bottom: 20px; }

    .index-contact-popup .close-btn {
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
    }
    .index-contact-popup .close-btn::before, 
    .index-contact-popup .close-btn::after { width: 14px; }
}


/* media 检测 */

@media (max-width: 1100px) {
    .wrapper {
        width: 95%;
    }
}


/* ============================================================
   0. 全局与基础样式
   ============================================================ */
.products-body, .products-detail-body, .page-template-pages { background-color: var(--gray-bg); }
.text-center { text-align: center; }
.justify-center { justify-content: center; }
.hide { display: none !important; } /* 确保隐藏类绝对生效 */

/* ============================================================
   1. 顶部 Banner 区域
   ============================================================ */
.product-banner { position: relative; width: 100%; display: flex; flex-direction: column; }
.product-banner > img { width: 100%; display: block; object-fit: cover; }
.product-banner .banner-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; }
.product-banner h1 { font-size: 66px; color: white; font-family: "DIN", "微软雅黑", sans-serif; margin-top: 3rem; }
.product-banner h2 { font-size: 40px; color: white; opacity: 0.3; }
.product-banner button { border: none; font-size: 20px; background: var(--green); padding: 0.5rem 2rem; margin-top: 2rem; cursor: pointer; border-radius: 30px; transition: background 0.3s; }
.product-banner button a { color: white; text-decoration: none; display: block; }
.product-banner button:hover { background: var(--red); }

/* 面包屑 */
.breadcrumb { border-bottom: 1px solid #dcdcdc; line-height: 60px; background: #fff; }
.breadcrumb-content { background: url("images/icon/home_grey.webp") no-repeat left center; padding-left: 30px; color: #999; }
.breadcrumb-content a { color: #999; text-decoration: none; transition: 0.3s; }
.breadcrumb-content a:hover { color: var(--red); }
.breadcrumb-content span { color: black; font-weight: bold; }

/* ============================================================
   2. 产品主体与左侧边栏 (原版保留 350px 宽度)
   ============================================================ */
.product-content { padding: 2rem 0; }
.product-content .product-main { gap: 2rem; display: flex; align-items: flex-start; }

.product-left { flex: 0 0 350px; position: sticky; top: 100px; box-sizing: border-box; }
.product-left .fixed-box { display: flex; flex-direction: column; gap: 2rem; }
.product-left .category, .product-left .contact { background-color: white; padding: 25px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.product-left .category .title { font-size: 22px; font-weight: bold; }
.product-left .category-list { display: flex; flex-direction: column; margin-top: 1.5rem; gap: 5px; }

.product-left .category-item { line-height: 2.5; padding-left: 15px; position: relative; cursor: pointer; transition: all 0.3s; border-radius: 4px; }
.product-left .category-item a { color: var(--light-black); text-decoration: none; display: block; }
.product-left .category-item::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background-color: var(--red); position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.product-left .category-item:hover, .product-left .category-item.active { background-color: var(--red); padding-left: 20px; color: #ffffff;}
.product-left .category-item:hover::before, .product-left .category-item.active::before { display: none; }
.product-left .category-item:hover a, .product-left .category-item.active a { color: white; font-weight: bold; }

.product-left .contact-list { display: flex; flex-direction: column; color: var(--light-black); }
.product-left .contact-list .item { border-bottom: 1px solid #dcdcdc; padding: 1rem 0; line-height: 1.8; }

/* ============================================================
   3. 右侧产品列表区域与网格
   ============================================================ */
.product-content .product-right { flex-grow: 1; display: flex; flex-direction: column; gap: 40px; min-width: 0; }

.product-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 30px 20px; width: 100%; padding-bottom: 30px; border-bottom: 1px dashed #ddd; align-items: start; }
.product-list:last-child { border-bottom: none; }

/* 分类介绍横跨整行 */
.category-intro { grid-column: 1 / -1; display: grid; grid-template-columns: 40% 1fr; grid-gap: 30px; position: relative; padding-bottom: 20px; align-items: center; margin-bottom: 10px; }
.category-intro::after { content: ""; background: linear-gradient(to right, var(--green) 0%, rgba(1, 89, 18, 0.1) 70%, rgba(1, 89, 18, 0) 100%); position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; }
.product-category-img img { width: 100%; display: block; border-radius: 8px; }
.product-category-intro .title { font-size: 26px; font-weight: bold; margin-bottom: 15px; color: #333; }
.product-category-intro .text { color: #666; line-height: 1.8; font-size: 15px; }
.label-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.label-list span { border: 1px solid #eee; background: #fff; padding: 6px 15px; color: var(--red); font-size: 13px; border-radius: 4px; }

/* 单个产品 (保留你的原版精美样式：Grid 双排) */
.product-item { display: grid; grid-template-columns: auto auto; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); border-radius: 8px; overflow: hidden; transition: transform 0.3s; }
.product-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }

.product-item .product-img { grid-column: 1/span 2; border-bottom: 3px solid #abc8b8; position: relative; width: 100%; transition: border-color 0.3s; }
.product-item .product-img::before { content: ""; display: block; padding-top: 85.454545%; }
.product-item .product-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.5s ease; }
.product-item .product-img img:nth-child(2) { opacity: 0; }
.product-item:hover .product-img { border-bottom-color: var(--red); }

@media (min-width: 1200px) {
    .product-item:hover .product-img img:nth-child(2) { opacity: 1; }
    .product-item:hover .product-img img:nth-child(1) { opacity: 0; }
}

.product-item .product-title { grid-column: 1/span 2; color: black; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.7rem 0; border-bottom: 1px solid #dcdcdc; }
.product-item .product-title a { color: #333; font-weight: bold; font-size: 16px; text-decoration: none; transition: color 0.3s; }
.product-item .product-title a:hover { color: var(--red); }

.product-item .product-data { color: var(--light-black); padding: 1rem 0 1rem 1rem; font-size: 14px; font-weight: 300; border-right: 1px solid #dcdcdc; display: flex; flex-direction: column; box-sizing: border-box; }
.product-item .product-btn { display: flex; align-items: center; flex-direction: column; gap: 0.5rem; justify-content: center; margin: 0 0.5rem; }
.product-item .product-btn div { width: 80px; height: 24px; box-sizing: border-box; text-align: center; font-size: 14px; border-radius: 12px; cursor: pointer; transition: 0.3s; }
.product-item .product-btn .email { border: 1px solid #dcdcdc; }
.product-item .product-btn .inquiry { border: 1px solid var(--red); color: var(--red); }
.product-item .product-btn div:hover { background-color: var(--red); color: white; border-color: var(--red); }
.product-item .product-btn div a { color: inherit; text-decoration: none; display: block; }

/* ============================================================
   4. 关于新中科 (About XZK - 现代美化版)
   ============================================================ */
.about-xzk { margin: 40px auto; }
.about-xzk .modern-tabs { display: flex; justify-content: center; gap: 10px; position: relative; z-index: 2; }
.about-xzk .modern-tabs .item { background-color: #f0f2f5; color: #666; padding: 0 25px; height: 50px; border-radius: 8px 8px 0 0; display: flex; align-items: center; font-weight: bold; transition: all 0.3s; cursor: pointer; }
.about-xzk .modern-tabs .item:hover { background-color: #e2e8f0; color: #333; }
.about-xzk .modern-tabs .item.active { background-color: var(--red); color: white; box-shadow: 0 -5px 15px rgba(220, 38, 38, 0.2); }

.about-xzk .modern-card { background: white; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); padding: 0px 20px 0px 20px; border: 1px solid #f0f0f0; }

/* 巧妙排版修复：不加 !important，防止覆盖 .hide */
.about-xzk .tab-1:not(.hide), 
.about-xzk .tab-4:not(.hide), 
.about-xzk .tab-5:not(.hide) { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-xzk .tab > div { min-width: 0; } /* 防止 Swiper 撑爆页面 */

.about-xzk .text .title { font-size: 22px; font-weight: bold; color: #333; margin-bottom: 10px; }
.about-xzk .text .mt-20 { margin-top: 15px; }
.about-xzk .text .intro, .about-xzk .text .intro-2 { color: #555; line-height: 1.8; font-size: 15px; }

.about-xzk .intro-list { margin-top: 15px; }
.about-xzk .intro-list .list-item { padding: 10px 15px; background: #f9f9f9; margin-bottom: 8px; border-radius: 6px; font-size: 15px; color: #444; display: flex; align-items: center; }
.about-xzk .intro-list .list-item span { color: var(--red); margin-right: 10px; font-weight: bold; }

.about-xzk .tech-card { display: flex; gap: 15px; padding: 20px; background: #fdfdfd; border-left: 4px solid var(--red); margin-bottom: 20px; border-radius: 0 8px 8px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.about-xzk .tech-card .tech-icon { font-size: 24px; }
.about-xzk .tech-card .tech-desc { color: #555; line-height: 1.6; font-size: 15px; }
.about-xzk .tech-card .tech-desc strong { color: var(--red); }

.about-xzk .highlight-text { background: #f7f8fa; padding: 20px; border-radius: 8px; font-weight: bold; color: #333; }
.about-xzk .profile-card { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.about-xzk .profile-card .sub-title { font-weight: bold; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #eee; color: var(--red); }
.about-xzk .profile-card .profile-item { position: relative; padding-left: 15px; margin-bottom: 10px; line-height: 1.5; color: #666; font-size: 14px; }
.about-xzk .profile-card .profile-item::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 50%; position: absolute; left: 0; top: 7px; }

.about-xzk .structure-list .item { padding: 20px; border-radius: 8px; border: 1px solid transparent; transition: all 0.3s; }
.about-xzk .structure-list .item.active, .about-xzk .structure-list .item:hover { background: #fafafa; border-color: #eee; }
.about-xzk .structure-list .item .title { color: var(--red); font-size: 18px; margin-bottom: 5px; font-weight: bold;}

.about-xzk .honor-intro { font-size: 16px; line-height: 1.8; color: #555; }
.about-xzk .honor-tags { list-style: none; padding: 0; margin-top: 20px; }
.about-xzk .honor-tags li { display: inline-block; background: rgba(220,38,38,0.08); color: var(--red); padding: 8px 20px; border-radius: 30px; margin: 0 10px 10px 0; font-weight: bold; font-size: 14px; }

.about-xzk .img img { border-radius: 8px; width: 100%; display: block; object-fit: cover;}
.about-xzk .swiper-container { border-radius: 8px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1);}

/* ============================================================
   5. 底部留言模块 (Leave Message - 大厂质感与完美对齐)
   ============================================================ */
.leave-message { background: #f4f5f7; padding: 60px 0; }
.leave-message .title.text-center { text-align: center; font-size: 32px; color: #333; margin-bottom: 50px; font-weight: bold;}

.leave-message .feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 60px; }
.leave-message .feature-cards .card { background: white; padding: 35px 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); transition: all 0.3s; border-top: 4px solid transparent; }
.leave-message .feature-cards .card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-top-color: var(--red); }
.leave-message .feature-cards .card-title { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 15px; }
.leave-message .feature-cards .card-text { color: #666; font-size: 14px; line-height: 1.7; }

.modern-message-box { display: flex; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
.modern-message-box .contact { width: 45%; position: relative; }
.modern-message-box .contact .contact-bg { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; filter: brightness(0.7); }
.modern-message-box .overlay-container { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 50px; box-sizing: border-box; }

.modern-message-box .text-box { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px; }
.modern-message-box .text-box .title { font-size: 32px; font-weight: bold; color: white; margin-bottom: 30px; }

.modern-message-box .guide-text { color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.8; margin-bottom: 25px; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 8px; border-left: 3px solid var(--red); }
.modern-message-box .guide-text b { color: #fff; font-weight: bold; }

.modern-message-box .guide-buttons { display: flex; gap: 15px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.modern-message-box .guide-buttons .btn { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.modern-message-box .guide-buttons .btn-primary { background: var(--red); color: white; border: 1px solid var(--red); }
.modern-message-box .guide-buttons .btn-primary:hover { background: var(--green); border-color: var(--green); }
.modern-message-box .guide-buttons .btn-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.5); }
.modern-message-box .guide-buttons .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; }

/* 修复的排版：让联系方式冒号对齐 */
.modern-contact-list { display: flex; flex-direction: column; gap: 15px; }
.modern-contact-list .item { display: flex; align-items: flex-start; line-height: 1.5; font-size: 15px; }
.modern-contact-list .item strong { width: 75px; flex-shrink: 0; color: white; font-weight: bold; }
.modern-contact-list .item a, .modern-contact-list .item span { color: rgba(255, 255, 255, 0.9); text-decoration: none;}
.modern-contact-list .item a:hover { color: var(--red); }

/* 修复的排版：二维码横排变精巧 */
.modern-message-box .modern-qr { display: flex; flex-direction: row; gap: 20px; padding-top: 30px; align-items: center;}
.modern-message-box .modern-qr .item { display: flex; flex-direction: row; align-items: center; gap: 10px; color: white; font-size: 14px; font-weight: bold;}
.modern-message-box .modern-qr img { width: 70px; height: 70px; border-radius: 3px; background: #fff; padding: 2px; border: none;}

.modern-message-box .message { width: 55%; padding: 50px; background: #fff;}
.modern-message-box .message .title { font-size: 32px; font-weight: bold; color: #222; margin-bottom: 15px; }
.modern-message-box .message .tip { font-size: 15px; color: #666; line-height: 1.6; margin: 10px 15px;}

/* 修复：找回表单样式 */
.modern-form form, .modern-form .wpcf7 form { display: flex; flex-direction: column; gap: 20px; }
.modern-form .wpcf7-form-control-wrap { width: 100%; display: block; }
.modern-form input:not([type=submit]), .modern-form textarea { width: 100%; padding: 16px 20px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; font-size: 15px; color: #333; outline: none; box-sizing: border-box;}
.modern-form textarea { height: 120px; resize: none; }
.modern-form input:focus, .modern-form textarea:focus { border-color: var(--red); background: white; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.modern-form input[type=submit] { background: var(--red); color: white; font-size: 16px; font-weight: bold; padding: 16px 40px; border: none; border-radius: 8px; cursor: pointer; transition: 0.3s; align-self: flex-start; }
.modern-form input[type=submit]:hover { background: var(--green); }
.modern-form .wpcf7 p { margin: 0px 10px 10px; }




/* ============================================================
   6. 响应式系统 (Responsive Layout)
   ============================================================ */

/* 平板端 (769px - 1199px) */
@media (max-width: 1199px) {
    .product-content .product-main { flex-direction: column; }
    .product-left { flex: none; width: 100%; position: static; }
    .product-left .fixed-box { flex-direction: row; flex-wrap: wrap; }
    .product-left .category, .product-left .contact { flex: 1; min-width: 300px; }
    
    .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-item .product-img img:nth-child(2) { display: none !important; }

    .leave-message .feature-cards { grid-template-columns: repeat(2, 1fr); margin: 30px 30px;}
    .modern-message-box { flex-direction: column; margin: 0 30px;}
    .modern-message-box .contact, .modern-message-box .message { width: 100%; }
    .modern-message-box .message {padding: 0}
    .modern-message-box .message .title {margin-top: 40px;text-align: center;}
}

/* 手机端 (≤ 768px) */
@media (max-width: 768px) {
    /* Banner 手机优化版：图文分离防裁切 */
    .product-banner { height: auto; display: block; background: var(--red); }
    .product-banner > img { width: 100%; height: 200px; object-fit: cover; }
    .product-banner .banner-text { position: relative; background: transparent; padding: 25px 0px; text-align: center; display: block;}
    .product-banner h1 { font-size: 28px; margin-top: 0; margin-bottom: 10px; }
    .product-banner h2 { font-size: 16px; opacity: 0.8; }
    .product-banner button { margin-top: 15px; font-size: 15px; padding: 12px 30px; background: white; color: var(--red); }
    .product-banner button a { color: var(--red); }
    
    .product-left .fixed-box { flex-direction: column; }

    /* 分类隐藏大图，产品单列变易触卡片 */
    .category-intro { grid-template-columns: 1fr; gap: 10px; padding-bottom: 10px;}
    .product-category-img { display: none; }
    .product-category-intro .title { font-size: 22px; }
    
    .product-list { grid-template-columns: 1fr; gap: 15px; }
    
    .product-item { display: flex; flex-direction: column; }
    .product-item .product-img { border-bottom: none; }
    .product-item .product-title { border-bottom: 1px solid #f0f0f0; padding: 12px; }
    .product-item .product-data { border-right: none; border-bottom: 1px solid #f0f0f0; padding: 12px 15px; }
    .product-item .product-btn { flex-direction: row; padding: 15px; gap: 15px; }
    .product-item .product-btn div { flex: 1; height: 32px; line-height: 30px; font-size: 14px; border-radius: 18px; }

    /* About：横向滑动防挤压 */
    .about-xzk .modern-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 15px; }
    .about-xzk .modern-tabs::-webkit-scrollbar { display: none; }
    .about-xzk .modern-tabs .item { flex: 0 0 auto; }
    .about-xzk .modern-card { padding: 20px; border-radius: 0 8px 8px 8px; }
    .about-xzk .tab-3:not(.hide) { grid-template-columns: 1fr; }

    /* 底部留言表单手机版 */
    .leave-message { padding: 40px 0; }
    .leave-message .title.text-center { font-size: 24px; margin-bottom: 30px;}
    .leave-message .feature-cards { grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px;}
    .modern-message-box .overlay-container { padding: 30px 20px; }
    .modern-message-box .text-box .title { font-size: 26px; margin-bottom: 20px;}
    .modern-message-box .guide-buttons { flex-direction: column; gap: 15px; }
    .modern-message-box .modern-qr { flex-wrap: wrap; gap: 15px; }
    .modern-message-box .message { padding: 0 }
    .modern-message-box .message .title { font-size: 26px; margin-top: 50px;}
    .modern-form input[type=submit] { width: 100%; text-align: center; }
}

/* ============================================================
   细节优化 1：统一 Tab 切换高度，告别页面跳动
   ============================================================ */
.about-xzk .modern-card { 
    min-height: 420px;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
.about-xzk .tab:not(.hide) { 
    min-height: 400px; 
    align-items: center;
    padding: 0px 15px;
}

.about-xzk .profile-header { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    border-bottom: 1px dashed #eee; 
    padding-bottom: 20px; 
    margin-bottom: 20px; 
}
.about-xzk .profile-header .avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #f9f9f9; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.about-xzk .profile-header .name { 
    font-size: 22px; 
    font-weight: bold; 
    color: var(--red); 
    margin-bottom: 5px; 
}
.about-xzk .profile-header .sub-title { 
    font-weight: normal; 
    color: #666; 
    border-bottom: none; 
    padding-bottom: 0; 
    margin-bottom: 0; 
}
.about-xzk .mb-20 { margin-bottom: 15px; }

/* 右侧图片变为上下堆叠的网格，充满力量感 */
.about-xzk .rd-grid { 
    display: grid; 
    grid-template-rows: 1fr 1fr; 
    gap: 20px; 
    height: 100%; 
}
.about-xzk .rd-grid img { 
    height: 100% !important; 
    width: 100%; 
    object-fit: cover; 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

/* ============================================================
   细节优化 3：四大优势卡片 - 图标与标题同排
   ============================================================ */
.leave-message .feature-cards .card { 
    padding: 30px 25px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}
.leave-message .feature-cards .card-header { 
    display: flex; 
    align-items: center; 
    gap: 15px; /* 控制图标和标题的间距 */
}
.leave-message .feature-cards .card-icon img { 
    height: 13px; 
    margin-bottom: 0 !important; /* 清除原来的底部间距 */
    display: block;
}
.leave-message .feature-cards .card-title { 
    font-size: 18px; 
    font-weight: bold; 
    color: #222; 
    margin-bottom: 0 !important; /* 清除原来的底部间距 */
}
.leave-message .feature-cards .card-text { 
    color: #666; 
    font-size: 14px; 
    line-height: 1.7; 
    margin-top: 5px;
}

/* ============================================================
   细节优化：移动端防御
   ============================================================ */
@media (max-width: 768px) {
    .about-xzk .modern-card { min-height: auto; }
    .about-xzk .tab:not(.hide) { min-height: auto; }
    .about-xzk .tab-3:not(.hide) { grid-template-columns: 1fr !important; }
    
    /* 手机端科研图片变为左右并排，节约屏幕高度 */
    .about-xzk .rd-grid { 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: auto; 
        height: 150px; 
    }
}



/* ============================================================
   产品详情页 (PDP) 完整优化版 CSS
   ============================================================ */

/* --- 1. 强制产品详情页页头白底黑字彩标 --- */
body.single .header-nav-row.pc-nav,
body.single-product .header-nav-row.pc-nav { position: relative; background-color: #ffffff; z-index: 99998; }
body.single .header-nav, body.single-product .header-nav { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-bottom: none; }
body.single .header-nav .menu-item > a, body.single-product .header-nav .menu-item > a { color: #333333; }
body.single .header-nav .h-logo img, body.single-product .header-nav .h-logo img { filter: none; }
body.single .header-nav .menu-item:hover > a, body.single-product .header-nav .menu-item:hover > a { color: var(--red); }

/* --- 面包屑 --- */
.breadcrumb { border-bottom: 1px solid #dcdcdc; line-height: 60px; background: #fff; }
.breadcrumb-content { background: url("images/icon/home_grey.webp") no-repeat left center; padding-left: 30px; color: #999; }
.breadcrumb-content a { color: #999; text-decoration: none; transition: 0.3s; }
.breadcrumb-content a:hover { color: var(--red); }
.breadcrumb-content span { color: black; font-weight: bold; }

/* ============================================================
   产品第一屏：相册与核心信息区
   ============================================================ */
.product-summary { background-color: white; padding: 2rem 0; }
.product-summary .info { display: flex; gap: 40px; align-items: flex-start; }

/* 左侧相册区 */
.product-summary .info .img-video { width: 576px; flex-shrink: 0; }
.product-summary .big-img { border-radius: 6px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); overflow: hidden; margin-bottom: 15px; }
.product-summary .big-img img { width: 100%; display: block; }

.product-summary .thumb { display: flex; gap: 10px; justify-content: space-between; }
.product-summary .thumb-video { width: calc((576px - 46px) / 4); position: relative; flex-shrink: 0; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; transition: all 0.3s; }
.product-summary .thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }

.play-video { cursor: pointer; }
.play-video::after { content: ""; position: absolute; width: 41px; height: 41px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url("images/icon/pro_detail_video.webp") no-repeat; }

.product-summary .thumb-img { display: flex; box-sizing: border-box; max-width: var(--product-thumb-img-width); flex: 1; min-width: 0; }
.product-summary .thumb-img .swiper-container { width: 100%; }
.product-summary .thumb-img .item {border-radius: 4px; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; cursor: pointer; transition: all 0.3s; }
.product-summary .thumb-img .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-summary .thumb-img .swiper-container .swiper-slide-thumb-active { border-color: var(--red); }

.product-summary .thumb-nav { display: flex; justify-content: space-between; flex-direction: column; width: 40px; flex-shrink: 0; z-index: 5; box-sizing: border-box; gap: 5px; }
.product-summary .thumb-nav > div { height: calc(50% - 2.5px); width: 100%; cursor: pointer; border-radius: 4px; transition: 0.3s; }
.product-summary .thumb-nav .next { background: var(--gray-bg) url("images/icon/pro_detail_next_grey.webp") no-repeat center center; }
.product-summary .thumb-nav .next:hover { background: var(--red) url("images/icon/pro_detail_next_write.webp") no-repeat center center; }
.product-summary .thumb-nav .prev { background: var(--gray-bg) url("images/icon/pro_detail_prev_grey.webp") no-repeat center center; }
.product-summary .thumb-nav .prev:hover { background: var(--red) url("images/icon/pro_detail_prev_write.webp") no-repeat center center; }

/* 右侧信息区 */
.product-summary .text { flex-grow: 1; min-width: 0; }
.product-summary .text .category a { border: 1px solid #dbdbdb; border-radius: 4px; display: inline-block; padding: 4px 15px; font-size: 13px; color: var(--red); text-decoration: none; transition: 0.3s; }
.product-summary .text .category a:hover { background: var(--red); border-color: var(--red); color: white; }
.product-summary .text .title { font-size: 32px; font-weight: bold; margin: 15px 0 20px; line-height: 1.3; color: #222; }
.product-summary .text .intro { line-height: 1.8; font-size: 15px; }

/* 极简高级参数列表 */
.product-summary .text .params { border-top: 1px solid #eaeaea; margin: 25px 0; display: flex; flex-direction: column; }
.product-summary .text .params .item { display: flex; padding: 14px 5px; border-bottom: 1px solid #eaeaea; align-items: center; transition: background 0.3s; }
.product-summary .text .params .item:hover { background: #fbfbfb; }
.product-summary .text .params .item b { color: #888; font-weight: normal; font-size: 14px; width: 220px; flex-shrink: 0; margin-right: 10px; }
.product-summary .text .params .item span { color: #222; font-weight: 500; font-size: 15px; }

/* 现代化交互按钮组 */
.product-summary .text .btn-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-top: 35px; }
.product-summary .text .btn-list a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; box-sizing: border-box; }
.product-summary .text .btn-list a:nth-child(1) { background: var(--red); color: white; border: 1px solid var(--red); }
.product-summary .text .btn-list a:nth-child(1):hover { background: #c91818; border-color: #c91818; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(220,38,38,0.25); }
.product-summary .text .btn-list a:nth-child(2) { background: #222; color: white; border: 1px solid #222; }
.product-summary .text .btn-list a:nth-child(2):hover { background: var(--red); border-color: var(--red); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
.product-summary .text .btn-list a:nth-child(3) { background: #fff; color: #444; border: 1px solid #ddd; }
.product-summary .text .btn-list a:nth-child(3):hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.05); }


/* ============================================================
   产品详情页内容区 (导航、详情、参数、案例、相关产品)
   ============================================================ */
.product-detail-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1002; background-color: var(--gray-bg); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }
.product-detail-nav .wrapper { display: flex; height: 5rem; align-items: center; }
.product-detail-nav .title { color: black; font-weight: bold; position: relative; padding-right: 1.5rem; font-size: 18px; }
.product-detail-nav .title::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); height: 20px; width: 1px; background-color: #ccc; }
.product-detail-nav .nav-list { display: flex; justify-content: flex-end; flex-grow: 1; gap: 2.5rem; padding-right: 2rem; }
.product-detail-nav .nav-list .item { cursor: pointer; color: #555; transition: 0.3s; font-weight: 500; }
.product-detail-nav .nav-list .item:hover { color: var(--red); }
.product-detail-nav .get-price { background: var(--red); color: white; border: none; font-size: 14px; padding: 0 25px; height: 40px; border-radius: 20px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.product-detail-nav .get-price:hover { background: var(--green); }

.product-detail-content { padding-bottom: 3rem; }
.product-detail-content .common-title { margin: 3rem 0 2rem; }
.product-detail-content .common-title .title { color: #222; font-size: 26px; font-weight: bold; }

.product-detail-content .detail-box { color: #555; line-height: 1.8; font-size: 15px; }
.product-detail-content ol { display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; padding-inline-start: 40px; }
.product-detail-content ul { list-style-type: disc; margin: 1em 0; padding-left: 40px; }
.product-detail-content .detail-box table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.product-detail-content .detail-box table th { background: #f5f5f5; font-weight: bold; color: #333; }
.product-detail-content .detail-box table th, .product-detail-content .detail-box table td { border: 1px solid #ddd; padding: 12px 15px; text-align: left; }

/* 案例卡片网格 */
.product-application-case .case-list { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); grid-gap: 20px; }
.product-application-case .case-list .item { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
.product-application-case .case-list .item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.product-application-case .case-list img { width: 100%; display: block; object-fit: cover; }
.product-application-case .logo { margin: 20px 20px 10px; display: flex; justify-content: space-between; align-items: center; }
.product-application-case .logo img { height: 35px; width: auto; object-fit: contain; }
.product-application-case .logo a { color: #888; text-decoration: none; font-size: 13px; transition: 0.3s; }
.product-application-case .logo a:hover { color: var(--red); }
.product-application-case .case-list .title { padding: 0 20px; font-weight: bold; font-size: 18px; color: #222; margin-bottom: 15px; line-height: 1.4; }
.product-application-case .info-list { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 20px 20px; gap: 10px; }
.product-application-case .info-list .info-item { background-color: #f9f9f9; padding: 12px; border-radius: 6px; display: flex; flex-direction: column; font-size: 13px; color: #777; }
.product-application-case .info-list .info-item b { color: #333; font-size: 14px; margin-top: 5px; }

/* 相关产品 */
.product-related-products .product-list { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); grid-gap: 20px; }


/* ============================================================
   产品详描区 (古腾堡编辑器内容) - 终极排版美化
   ============================================================ */

/* 1. 基础文本与段落排版 (赋予高级呼吸感) */
.product-detail-content .detail-box {
    color: #444;
    font-size: 15px;
    line-height: 1.8;
    font-family: inherit;
}
.product-detail-content .detail-box p {
    margin-bottom: 20px;
    text-align: justify; /* 两端对齐，显得更加规整 */
}

/* 2. 正文内部的标题层级 (H3, H4) */
.product-detail-content .detail-box h3 {
    font-size: 22px;
    color: #222;
    font-weight: bold;
    margin: 35px 0 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea; /* H3 底部带淡分割线 */
}
.product-detail-content .detail-box h4 {
    font-size: 18px;
    color: #222;
    font-weight: bold;
    margin: 25px 0 15px;
    padding-left: 12px;
    border-left: 4px solid var(--red); /* H4 左侧带品牌红标线 */
}

/* 3. 无序列表 (ul) - 定制化品牌红圆点 */
.product-detail-content .detail-box ul {
    list-style: none; /* 移除默认黑点 */
    padding-left: 0;
    margin-bottom: 25px;
}
.product-detail-content .detail-box ul > li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
}
.product-detail-content .detail-box ul > li::before {
    content: "•";
    color: var(--red);
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -4px; /* 微调圆点垂直对齐 */
}

/* 4. 有序列表 (ol) - 高级定制圆形数字标 (重点美化) */
.product-detail-content .detail-box ol {
    list-style: none; /* 移除默认数字 */
    counter-reset: custom-counter; /* 开启自定义计数器 */
    padding-left: 0;
    margin-bottom: 25px;
}
.product-detail-content .detail-box ol > li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 16px;
    counter-increment: custom-counter; /* 计数器递增 */
    line-height: 1.7;
}
.product-detail-content .detail-box ol > li::before {
    content: counter(custom-counter); /* 输出数字 */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--red);
    font-weight: bold;
    font-size: 13px;
    background: rgba(220, 38, 38, 0.1); /* 浅红色精美圆底 */
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
}

/* ============================================================
   5. 表格排版 (Table) - 顶级工业白皮书风 (强制第一行加粗)
   ============================================================ */
.product-detail-content .detail-box .wp-block-table,
.product-detail-content .detail-box table {
    width: 100%;
    border-collapse: collapse; /* 使用 collapse 配合无竖线风格最完美 */
    margin: 30px 0;
    background: #fff;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04); /* 增加一点外围的立体悬浮感 */
    border-top: 3px solid var(--red); /* 顶部加上品牌红线，大厂 PDF 既视感 */
}

/* 【核心修复】强制第一行（无论 th 还是 td）加粗并加上背景色 */
.product-detail-content .detail-box table tr:first-child th,
.product-detail-content .detail-box table tr:first-child td {
    background-color: #f9f9f9 !important; /* 极浅的灰底色 */
    color: #111 !important; /* 几乎纯黑的文字 */
    font-weight: bold !important; /* 强制加粗！ */
    font-size: 15px;
    padding: 18px 20px;
    text-align: left;
    border-bottom: 2px solid #e5e5e5; /* 第一行底部加粗横线，稳住重心 */
    border-left: none; /* 去掉竖线 */
    border-right: none; /* 去掉竖线 */
    border-top: none;
}

/* 正文单元格：只保留横线，去掉竖线，极致干净 */
.product-detail-content .detail-box table th,
.product-detail-content .detail-box table td {
    color: #555;
    font-size: 14px;
    font-weight: 400;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0; /* 极淡的正文横线 */
    border-left: none; /* 去掉竖线，打破牢笼感 */
    border-right: none; /* 去掉竖线 */
    border-top: none;
    transition: background 0.3s ease, color 0.3s ease;
}

/* 移除最后一行的底边框，保持整洁 */
.product-detail-content .detail-box table tr:last-child td {
    border-bottom: none;
}

/* 斑马线：改为极微弱的纯白/微灰交替，拒绝花哨 */
.product-detail-content .detail-box table tr:nth-child(even) td {
    background-color: #fdfdfd;
}

/* 鼠标悬停：非常清爽的反馈 */
.product-detail-content .detail-box table tr:not(:first-child):hover td {
    background-color: rgba(220, 38, 38, 0.03); /* 极淡的品牌红底色 */
    color: #111; /* 鼠标放上去文字微微变深，提升专注度 */
}

/* ============================================================
   手机端防撑爆保护
   ============================================================ */
@media (max-width: 768px) {
    .product-detail-content .detail-box .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
        border-top: 3px solid var(--red);
        box-shadow: 0 3px 15px rgba(0,0,0,0.04);
    }
    .product-detail-content .detail-box table {
        min-width: 600px; /* 保证文字不被挤压，手机端滑动查看 */
        margin: 0;
        border-top: none;
        box-shadow: none;
    }
    .product-detail-content .detail-box table tr:first-child th,
    .product-detail-content .detail-box table tr:first-child td,
    .product-detail-content .detail-box table td {
        padding: 14px 15px; /* 手机端稍微收紧内边距 */
    }
}

/* ============================================================
   移动端自适应 (重点解决表格撑爆屏幕)
   ============================================================ */
@media (max-width: 768px) {
    /* 核心修复：允许表格在手机端横向滑动，绝不改变整个页面的宽度 */
    .product-detail-content .detail-box .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* 让 iOS 滑动更顺畅 */
        margin: 20px 0;
    }
    .product-detail-content .detail-box table {
        min-width: 600px; /* 强制表格最小宽度，促使出现滚动条而不是把字挤成一列 */
        margin: 0; /* 移除内部 margin，由外层包裹器控制 */
    }
    .product-detail-content .detail-box table th,
    .product-detail-content .detail-box table td {
        padding: 12px 15px; /* 手机端单元格内边距微调 */
    }
    
    .product-detail-content .detail-box h3 { font-size: 20px; }
    .product-detail-content .detail-box h4 { font-size: 17px; }
}




/* ============================================================
   移动端与平板端自适应 (Responsive Layout)
   ============================================================ */

/* 平板端 (769px - 1199px) */
@media (max-width: 1199px) {
    /* 解除相册死宽，采用比例分割 */
    .product-summary .info { flex-direction: row; align-items: flex-start; }
    .product-summary .info .img-video { width: 45%; }
    .product-summary .thumb .thumb-img { max-width: calc(100% - 134px - 40px) !important; }
    
    .product-detail-nav .nav-list { gap: 1.5rem; }
    .product-application-case .case-list { grid-template-columns: repeat(2, 1fr); }
    .product-related-products .product-list { grid-template-columns: repeat(3, 1fr); }
}

/* 手机端 (≤ 768px) */
@media (max-width: 768px) {
    /* 第一屏：上下堆叠，防挤压 */
    .product-summary .info { flex-direction: column; gap: 30px; }
    .product-summary .info .img-video { width: 100%; }
    
    /* 核心修复：手机端强制分配宽度，彻底解决变长条问题 */
    .product-summary .thumb { margin-top: 15px; justify-content: flex-start; gap: 2%; }
    .product-summary .thumb .thumb-video { width: 22% !important; margin-right: 0; }
    .product-summary .thumb .thumb-img { max-width: 76% !important; flex: none; }
    .product-summary .thumb .thumb-nav { display: none; } /* 手机端隐藏前进后退按钮，纯滑动 */
    
    .product-summary .text .title { font-size: 26px; }
    .product-summary .text .btn-list { grid-template-columns: 1fr; gap: 12px; margin-top: 25px; }
    
    /* 详情区内容留白 */
    .product-detail-content .detail-box table { display: block; overflow-x: auto; white-space: nowrap; } /* 防止表格撑破手机屏幕 */
    
    .product-application-case .case-list { grid-template-columns: 1fr; }
    .product-related-products .product-list { grid-template-columns: 1fr 1fr; gap: 15px; }
    
    /* 隐藏复杂的吸顶导航，节省手机屏幕空间 */
    .product-detail-nav { display: none !important; } 
}







/*****************  news *****************/
/* ============================================================
   新闻列表页 - 现代化重工企业风格
   ============================================================ */

.news-container {
    padding: 60px 0 100px;
    background-color: #f8f9fa; /* 浅灰底色，极好地衬托白色新闻卡片 */
}

/* ============================================================
   新闻列表页 Banner - 修复文字掉落及叠加层级
   ============================================================ */

/* 1. 外层容器：锁定高度并作为定位基准 */
.news-main-banner {
    position: relative;
    width: 100%;
    height: 600px; /* 锁定电脑端高度 */
    overflow: hidden;
    margin-top: 0 !important;
}

/* 2. 图片层：强制绝对定位，铺满底层 */
.news-main-banner > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* 放在第 1 层 */
}

/* 3. 暗化遮罩层：防止背景图太亮导致白字看不清 */
.news-main-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 40% 的黑色半透明遮罩 */
    z-index: 2; /* 放在第 2 层 */
}

/* 4. 文字层：相对定位，悬浮在最上层 */
.news-main-banner .banner-text {
    position: relative;
    z-index: 10; /* 放在最高层，确保不会被遮挡 */
    height: 100%;
    display: flex;
    align-items: center;
}

.news-main-banner .banner-content-box {
    width: 100%;
}

/* 5. 标题与文字样式排版 */
.news-main-banner .subtitle {
    color: var(--red);
    font-size: 14px;
    font-weight: bold;
    font-family: "DIN", sans-serif;
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.news-main-banner .title {
    color: #ffffff;
    font-size: 46px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.news-main-banner .text {
    color: #f0f0f0;
    font-size: 16px;
    letter-spacing: 1px;
}

/* ================== 移动端自适应 ================== */
@media (max-width: 768px) {
    .news-main-banner {
        height: 380px; /* 手机端适当降低高度 */
    }
    .news-main-banner .title {
        font-size: 32px;
    }
}



/* --- 1. 分类筛选胶囊条 (Filter Bar) --- */
.news-filter-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 10px 25px;
    font-size: 15px;
    font-weight: bold;
    color: #555;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.filter-btn:hover {
    color: var(--red);
    border-color: var(--red);
    transform: translateY(-2px);
}
.filter-btn.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 5px 15px rgba(201, 37, 43, 0.3);
}

/* --- 2. 新闻列表布局 --- */
.modern-news-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 单个新闻卡片 (图文横排) */
.news-list-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid #eaeaea;
    transition: all 0.4s ease;
}
.news-list-item:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transform: translateY(-4px);
    border-color: transparent;
}

/* 图片区 */
.news-img {
    width: 420px; /* 固定图片宽度 */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.news-list-item:hover .news-img img {
    transform: scale(1.05); /* 悬浮时图片微微放大，增加互动感 */
}

/* 内容区 */
.news-content {
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 元数据：日期与分类角标 */
.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.news-date {
    font-size: 14px;
    color: #888;
    font-family: "DIN", sans-serif;
}
.news-cat-badge {
    font-size: 13px;
}
.news-cat-badge a {
    color: var(--red);
    background: rgba(201, 37, 43, 0.08);
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}
.news-cat-badge a:hover {
    background: var(--red);
    color: #fff;
}

/* 标题 */
.news-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 1.4;
}
.news-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}
.news-title a:hover {
    color: var(--red);
}

/* 摘要 */
.news-excerpt {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 25px;
    /* 强力限制摘要为3行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部阅读更多 */
.news-action {
    margin-top: auto; /* 利用 flex 自动顶到卡片最底部 */
    border-top: 1px dashed #eaeaea;
    padding-top: 20px;
}
.btn-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.btn-readmore .arrow {
    color: var(--red);
    transition: transform 0.3s;
}
.btn-readmore:hover {
    color: var(--red);
}
.btn-readmore:hover .arrow {
    transform: translateX(5px); /* 悬浮时箭头向右微动 */
}

/* ================== 移动端自适应 ================== */
@media (max-width: 992px) {
    .news-list-item {
        flex-direction: column; /* 平板及以下，强制改为上下堆叠布局 */
    }
    .news-img {
        width: 100%;
        height: 280px; /* 限制图片高度 */
    }
    .news-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .news-container { padding: 40px 0 60px; }
    
    /* 手机端分类条支持横向滑动，防拥挤 */
    .news-filter-bar { 
        gap: 10px; 
        flex-wrap: nowrap;
        overflow-x: auto; 
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .filter-btn { 
        white-space: nowrap; 
        padding: 8px 18px; 
        font-size: 14px; 
    }
    
    .news-title { font-size: 18px; }
    .news-excerpt { -webkit-line-clamp: 2; /* 手机端屏幕小，摘要只留2行 */ }
    .news-img { height: 220px; }
}

/* ============================================================
   视频中心列表页 & 全局通用视频播放弹窗
   ============================================================ */

.video-center-container {
    padding: 60px 0 100px;
    background-color: #f8f9fa; /* 浅灰底色，凸显白色视频卡片 */
}

/* --- 1. 视频网格布局 --- */
.modern-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 独立视频卡片 */
.video-card-item {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #eaeaea;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.video-card-item:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transform: translateY(-6px);
    border-color: transparent;
}

/* 视频 16:9 封面区 */
.video-card-item .video-thumb-box {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111;
}
.video-card-item .video-thumb-box img.fitImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.video-card-item:hover .video-thumb-box img.fitImage {
    transform: scale(1.05); /* 悬浮深层放大 */
}

/* 悬浮暗化与播放按钮 */
.video-card-item .video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}
.video-card-item:hover .video-overlay {
    background: rgba(0, 0, 0, 0.5); /* 变暗以凸显按钮 */
}
.video-card-item .play-icon-wrapper {
    width: 60px;
    height: 60px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.8);
    opacity: 0.8;
}
.video-card-item .play-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.video-card-item:hover .play-icon-wrapper {
    transform: scale(1.1);
    opacity: 1;
}

/* 视频信息区 */
.video-card-item .video-info-box {
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.video-card-item .video-title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin: 0 0 15px 0;
    line-height: 1.5;
    transition: color 0.3s;
    /* 强制两行，超出省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card-item:hover .video-title {
    color: var(--red);
}
.video-card-item .video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    font-size: 13px;
    border-top: 1px dashed #eaeaea;
    padding-top: 15px;
}
.video-card-item .video-cat a {
    color: var(--red);
    text-decoration: none;
}
.video-card-item .video-date {
    color: #999;
    font-family: "DIN", sans-serif;
}

/* ================== 2. 全局通用剧场级播放弹窗 ================== */

/* 外层全屏遮罩 */
.global-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.global-video-modal.active {
    opacity: 1;
    visibility: visible;
}

/* 暗黑毛玻璃背景 */
.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85); /* 极深的黑色，实现剧场关灯效果 */
    backdrop-filter: blur(8px);
}

/* 核心播放器容器 */
.video-modal-content {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1100px;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.global-video-modal.active .video-modal-content {
    transform: scale(1);
}

/* 16:9 黄金比例占位（确保 iframe 完美响应式） */
.video-player-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例核心代码 */
    overflow: hidden;
    border-radius: 8px;
}
.video-player-container iframe,
.video-player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: #000;
}

/* 关闭按钮 */
.video-modal-close {
    position: absolute;
    top: -45px;
    right: -40px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.video-modal-close:hover {
    opacity: 1;
    color: var(--red);
    transform: rotate(90deg); /* 悬浮时带一点旋转微动效 */
}

/* ================== 移动端自适应 ================== */
@media (max-width: 992px) {
    .modern-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .modern-video-grid { grid-template-columns: 1fr; gap: 20px; }
    .video-modal-content { width: 95%; }
    /* 手机端关闭按钮移到播放器内部右上角，防止点不到 */
    .video-modal-close {
        top: -35px;
        right: 0;
        font-size: 35px;
    }
}


/* ============================================================
   新闻详情页 - 企业白皮书沉浸式阅读风格
   ============================================================ */

.news-detail-container {
    background-color: #ffffff;
    padding-bottom: 80px;
}

/* 核心阅读区定宽：收窄宽度，提升沉浸阅读体验 */
.read-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. 文章头部 (标题、元数据、导读摘要) --- */
.news-article-header {
    padding: 60px 0 30px;
    border-bottom: 1px solid #eaeaea;
}

.article-title {
    font-size: 32px;
    font-weight: 900;
    color: #111;
    line-height: 1.4;
    margin: 0 0 20px 0;
    text-align: center;
}

.article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.meta-date {
    font-size: 15px;
    color: #888;
    font-family: "DIN", sans-serif;
}
.meta-cat a {
    color: var(--red);
    background: rgba(201, 37, 43, 0.08);
    padding: 4px 15px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
}
.meta-cat a:hover {
    background: var(--red);
    color: #fff;
}

/* 导读卡片 */
.article-lead-box {
    background: #f8f9fa;
    border-left: 4px solid var(--red);
    padding: 20px 25px;
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    border-radius: 0 4px 4px 0;
}
.article-lead-box strong {
    color: var(--red);
    margin-right: 5px;
}

/* --- 2. 文章正文内容区 --- */
.news-article-content {
    padding: 40px 0;
    font-size: 16px;
    color: #333;
    line-height: 2; /* 增大行高，让长文阅读更轻松 */
}
.news-article-content p {
    margin-bottom: 20px;
    text-align: justify;
}
.news-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 20px 0;
}
/* 给正文里的小标题增加权重 */
.news-article-content h2, 
.news-article-content h3 {
    color: #111;
    margin: 30px 0 15px;
    font-weight: bold;
}

/* --- 3. 底部标签与翻页区 --- */
.news-article-footer {
    margin-top: 20px;
    padding-top: 40px;
    border-top: 1px dashed #eaeaea;
}

/* 分类标签组 */
.article-tags {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.tag-label {
    font-size: 14px;
    color: #888;
    font-weight: bold;
}
.tag-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.tag-item {
    font-size: 13px;
    color: #555;
    border: 1px solid #ddd;
    padding: 5px 15px;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.3s;
}
.tag-item:hover {
    color: var(--red);
    border-color: var(--red);
}

/* 上一篇/下一篇 左右双栏 */
.article-pagination-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.nav-prev, .nav-next {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid transparent;
}
.nav-prev:hover, .nav-next:hover {
    background: #fff;
    border-color: var(--red);
    box-shadow: 0 10px 20px rgba(201, 37, 43, 0.05);
}
.nav-next {
    text-align: right;
    align-items: flex-end;
}
.nav-hint {
    font-size: 13px;
    color: #999;
}
.nav-prev a, .nav-next a {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.3s;
    /* 防止标题过长换行难看 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav-prev a:hover, .nav-next a:hover {
    color: var(--red);
}
.nav-empty {
    font-size: 15px;
    color: #ccc;
    cursor: not-allowed;
}

/* ================== 移动端自适应 ================== */
@media (max-width: 768px) {
    .news-article-header { padding: 40px 0 20px; }
    .article-title { font-size: 24px; text-align: left; }
    .article-meta { justify-content: flex-start; }
    
    .article-pagination-nav {
        grid-template-columns: 1fr; /* 手机端上下排列 */
        gap: 15px;
    }
    .nav-next {
        text-align: left;
        align-items: flex-start;
    }
}


/*发展历程*/
/* ============================================================
   关于我们 - 顶级 Banner 视觉重构
   ============================================================ */
/* 左侧标题排版 (国际化杂志风) */
.single-banner .banner-left .subtitle {
    color: #ff9292;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-family: "DIN", sans-serif;
}

.single-banner .banner-left .title .light {
    font-weight: 300;
}

.single-banner .banner-left .title .bold {
    font-weight: 800;
    position: relative;
    display: inline-block;
}

/* 标题底部的精致红线装饰 */
.single-banner .banner-left .title .bold::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 4px;
    background-color: var(--red);
}

.single-banner .banner-left .text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.8;
    font-weight: 300;
}

/* 右侧操作区 */
.single-banner .banner-right {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 10px;
}

/* 在线支持按钮 (现代化悬浮感) */
.single-banner .banner-right .btn-online {
    background-color: white;
    color: #222;
    padding: 0 30px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.single-banner .banner-right .btn-online:hover {
    background-color: var(--red);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(220,38,38,0.3);
}

/* 视频播放按钮 (呼吸波纹动效) */
.single-banner .banner-right .video {
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: 0.3s;
}
.single-banner .banner-right .video:hover {
    color: var(--red);
}

.single-banner .banner-right .video-btn {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.5);
    transition: 0.3s;
}
.single-banner .banner-right .video:hover .video-btn {
    background: var(--red);
    border-color: var(--red);
}
.single-banner .banner-right .video-btn img {
    width: 26px;
}

/* 视频按钮高级呼吸光晕 */
.single-banner .banner-right .video-btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8);
    animation: videoPulse 2s linear infinite;
}
@keyframes videoPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}


/* ============================================================
   移动端与平板自适应
   ============================================================ */
@media (max-width: 1199px) {
    .single-banner .banner-content-box { align-items: flex-start; gap: 40px; padding-top: 20px; }
    .single-banner .banner-right { padding-bottom: 0; }
}

@media (max-width: 768px) {
    .single-banner .banner-left .title { font-size: 40px; }
    .single-banner .banner-left .text { font-size: 14px; }
    .single-banner .banner-right { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
    .single-banner .banner-right .btn-online { width: 100%; justify-content: center; }
}

/* ============================================================
   单页横向导航 (Sub Navigation) - 现代化大厂质感
   ============================================================ */

.modern-page-nav * { box-sizing: border-box; }
.modern-page-nav {
    background-color: #fff; /* 换成纯白更通透，摆脱沉闷的灰底 */
    border-bottom: 1px solid #eaeaea;
    position: relative;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); /* 极弱的阴影，增强浮动立体感 */
}

.modern-page-nav .wrapper {
    display: flex;
    height: 70px;
    align-items: center;
    gap: 30px;
    /* 核心：移动端横向滑动必备 */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
/* Chrome/Safari 隐藏滚动条，保持整洁 */
.modern-page-nav .wrapper::-webkit-scrollbar {
    display: none; 
}

.modern-page-nav .title {
    font-size: 18px;
    color: #111;
    font-weight: bold;
    position: relative;
    padding-right: 30px;
    white-space: nowrap; /* 强制不换行 */
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}
.modern-page-nav .title span {
    font-size: 12px;
    color: #999;
    font-weight: normal;
    font-family: "DIN", sans-serif;
    letter-spacing: 1px;
}

.modern-page-nav .title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background-color: #dcdcdc;
}

.modern-page-nav .nav-list {
    display: flex;
    height: 100%;
}

.modern-page-nav .nav-list .item {
    height: 100%;
    display: flex;
    position: relative;
}

/* 抛弃生硬的背景填满，采用高级的底部红线滑动动画 */
.modern-page-nav .nav-list .item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px; /* 刚好压住父级的边框 */
    width: 0;
    height: 3px;
    background-color: var(--red);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.modern-page-nav .nav-list .item:hover::after,
.modern-page-nav .nav-list .item.active::after {
    width: 100%; /* 悬浮或激活时，红线从中间向两端平滑展开 */
}

.modern-page-nav .nav-list .item a {
    color: #666;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    padding: 0 20px;
    height: 100%;
    align-items: center;
    white-space: nowrap; /* 确保链接文字绝对不换行 */
    text-decoration: none;
    transition: color 0.3s;
}

/* 悬浮和激活状态文字变红 */
.modern-page-nav .nav-list .item:hover a,
.modern-page-nav .nav-list .item.active a {
    color: var(--red);
}

/* ================== 移动端优化 ================== */
@media (max-width: 768px) {
    .modern-page-nav .wrapper {
        gap: 15px;
        padding: 0 15px; /* 两侧留出呼吸空间 */
    }
    .modern-page-nav .title {
        font-size: 16px;
        padding-right: 15px;
    }
    .modern-page-nav .title span {
        display: none; /* 手机端空间宝贵，隐藏英文副标题 */
    }
    .modern-page-nav .nav-list .item a {
        padding: 0 15px;
        font-size: 14px;
    }
}

/* ============================================================
   发展历程 (Timeline) - 大厂高级质感重构
   ============================================================ */
.modern-history-page { background-color: #f8f9fa; padding-bottom: 80px; }

.course-content {
    display: flex;
    align-items: flex-start; /* 重点：确保两边顶部对齐 */
    gap: 50px;
    padding-top: 50px;
}

/* ============================================================
   发展历程左侧导航 - 视觉找回与悬浮强制修复版
   ============================================================ */

/* 【核心修复】：强行清除 WordPress 主题可能存在的 overflow 限制，拯救 Sticky！ */
body, .page-container, .course-content {
    overflow: visible !important; 
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.course-content {
    display: flex;
    align-items: stretch; /* 必须是 stretch，让左侧容器和右侧内容一样高 */
    gap: 50px;
    padding-top: 50px;
}

.timeline {
    width: 300px; /* 恢复你原本宽裕的尺寸 */
    flex-shrink: 0;
    position: relative;
}

.timeline .sticky-box {
    position: -webkit-sticky !important; 
    position: sticky !important; 
    top: 100px; /* 下滚时距离浏览器顶部的悬浮安全距离 */
    padding-top: 90px; /* 给顶部的图标留出空间 */
    padding-bottom: 50px;
    align-self: flex-start;
}

/* 找回你原本的灵魂图标！ */
.timeline .sticky-box::before {
    content: "";
    position: absolute;
    right: 9px; /* 精准对齐线条 */
    top: 0;
    width: 79px;
    height: 79px;
    background: url("images/icon/Development history_list.webp") no-repeat center center;
    background-size: contain;
    z-index: 3;
    /* 【核心增加】：挂载 3 秒一个周期的平滑呼吸动画 */
    animation: historyIconBreathing 3s ease-in-out infinite;
}

/* 呼吸动效关键帧 (保持 translateX(50%) 的居中不变，仅改变缩放和光晕) */
@keyframes historyIconBreathing {
    0% {
        transform: translateX(50%) scale(1);
        filter: drop-shadow(0 0 0px rgba(220, 38, 38, 0));
    }
    50% {
        transform: translateX(50%) scale(1.08); /* 微微放大 8% */
        filter: drop-shadow(0 8px 20px rgba(220, 38, 38, 0.4)); /* 品牌红的高级边缘光晕 */
    }
    100% {
        transform: translateX(50%) scale(1);
        filter: drop-shadow(0 0 0px rgba(220, 38, 38, 0));
    }
}

/* 高级连接线 */
.timeline .timeline-track {
    position: absolute;
    right: 9px; /* 居中对齐圆点 */
    top: 80px; /* 从图标下方开始 */
    bottom: 0;
    width: 2px;
    background: #e9ecef;
    z-index: 1;
}

.timeline-item {
    text-align: right;
    padding: 25px 40px 25px 0; /* 增加右侧间距，不和圆点挤在一起 */
    font-size: 24px;
    color: #999;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "DIN", sans-serif;
    z-index: 2;
    line-height: 1;
}

/* 找回并优化状态圆点 */
.timeline-item .dot {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("images/icon/Development history_circle_gray.webp") no-repeat center center;
    background-size: cover;
    transition: all 0.3s ease;
    z-index: 2;
}

/* 激活状态 (高亮放大) */
.timeline-item:hover, .timeline-item.active {
    color: var(--red);
    font-size: 32px; /* 激活时字体变大，彰显层级 */
    font-weight: bold;
}
.timeline-item.active .dot {
    background: url("images/icon/Development history_circle_red.webp") no-repeat center center;
    background-size: cover;
    transform: translateY(-50%) scale(1.2); /* 激活时圆点微微放大 */
}

/* ============================================================
   移动端响应式 (变成顶部横向悬浮滑动菜单)
   ============================================================ */
@media (max-width: 991px) {
    .course-content { flex-direction: column; gap: 30px; padding-top: 20px;}
    
    .timeline { 
        width: 100%; 
        position: sticky !important; 
        top: 60px; 
        z-index: 99; 
        background: #f8f9fa; 
        padding: 10px 0;
        margin: 0 -15px; 
        width: calc(100% + 30px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    /* 移动端隐藏图标和线条 */
    .timeline .sticky-box::before, .timeline .timeline-track { display: none; }
    
    .timeline .sticky-box { 
        display: flex; 
        overflow-x: auto; 
        padding: 0 15px; 
        gap: 15px; 
        -webkit-overflow-scrolling: touch;
        top: 0;
    }
    .timeline .sticky-box::-webkit-scrollbar { display: none; } 
    
    .timeline-item { 
        text-align: center; 
        padding: 8px 15px; 
        font-size: 14px; 
        white-space: nowrap; 
        background: #fff; 
        border-radius: 20px; 
        border: 1px solid #dee2e6;
    }
    .timeline-item .dot { display: none; } 
    
    .timeline-item.active { 
        background: var(--red); 
        color: #fff; 
        border-color: var(--red); 
        font-size: 14px; 
    }
}

/* --- 右侧内容区 --- */
.timeline-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 60px;
    min-width: 0;
}

.timeline-text-group { position: relative; }

/* 阶段大标题 */
.group-header {
    font-size: 36px;
    font-weight: 900;
    color: #222;
    margin-bottom: 25px;
    font-family: "DIN", sans-serif;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 15px;
}
.group-header span {
    font-size: 16px;
    color: var(--red);
    font-weight: normal;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* 现代化卡片式时间轴内容 */
.timeline-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}
.mt-20 { margin-top: 20px; } /* 辅助类 */

.timeline-row {
    display: flex;
    gap: 30px;
    padding: 25px 0;
    border-bottom: 1px dashed #eaeaea;
}
.timeline-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.timeline-row:first-child {
    padding-top: 0;
}

.timeline-row .year {
    font-size: 24px;
    font-weight: bold;
    color: var(--red);
    font-family: "DIN", sans-serif;
    width: 60px; /* 固定年份宽度对齐 */
    flex-shrink: 0;
}

.timeline-row .desc {
    color: #444;
    font-size: 15px;
    line-height: 1.8;
}
.timeline-row .desc ul { margin: 0; padding-left: 20px; }
.timeline-row .desc li { margin-bottom: 8px; }

/* 图片美化 */
.timeline-img {
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.timeline-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}
.timeline-img:hover img {
    transform: scale(1.03);
}

/* ============================================================
   移动端响应式 (变成顶部横向悬浮滑动菜单)
   ============================================================ */
@media (max-width: 991px) {
    .course-content { flex-direction: column; gap: 30px; padding-top: 20px;}
    
    /* 左侧变顶部横向菜单 */
    .timeline { 
        width: 100%; 
        position: sticky; 
        top: 60px; /* 根据你移动端页头的高度调整 */
        z-index: 99; 
        background: #f8f9fa; 
        padding: 10px 0;
        margin: 0 -15px; /* 撑满屏幕边缘 */
        width: calc(100% + 30px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .timeline .sticky-box { 
        display: flex; 
        overflow-x: auto; 
        padding: 0 15px; 
        gap: 15px; 
        -webkit-overflow-scrolling: touch;
    }
    .timeline .sticky-box::-webkit-scrollbar { display: none; } /* 隐藏滚动条 */
    
    .timeline .timeline-track { display: none; } /* 隐藏连线 */
    
    .timeline-item { 
        text-align: center; 
        padding: 8px 15px; 
        font-size: 14px; 
        white-space: nowrap; 
        background: #fff; 
        border-radius: 20px; 
        border: 1px solid #dee2e6;
    }
    .timeline-item .dot { display: none; } /* 隐藏圆点 */
    
    .timeline-item.active { 
        background: var(--red); 
        color: #fff; 
        border-color: var(--red); 
        font-size: 14px; 
    }

    /* 右侧内容调整 */
    .timeline-text { width: 100%; gap: 40px; }
    .group-header { font-size: 28px; flex-direction: column; align-items: flex-start; gap: 5px; }
    .timeline-card { padding: 20px; }
    .timeline-row { flex-direction: column; gap: 10px; padding: 20px 0; }
    .timeline-row .year { font-size: 22px; }
}

/* ============================================================
   质量控制 (Quality Control) - 国际大厂风格防弹版
   ============================================================ */

/* 全局防撑破保护伞与通用类 */
.modern-quality-page * { box-sizing: border-box; }
.modern-quality-page { overflow: hidden; width: 100%; }
.modern-quality-page .wrapper { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 15px; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #f8f9fa; }
.quality-section { padding: 90px 0; }

/* 统一的高级模块标题体系 */
.modern-section-title { position: relative; margin-bottom: 60px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title .watermark { font-size: 70px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -25px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title .title { font-size: 34px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .subtitle { font-size: 14px; color: var(--red); font-weight: bold; font-family: "DIN", sans-serif; letter-spacing: 2px; margin-top: 5px; position: relative; z-index: 2;}
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0; }


/* ================== 1. 原材料严控标准 ================== */
.raw-material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.material-card { background: #fdfdfd; border: 1px solid #f0f0f0; border-top: 4px solid var(--red); border-radius: 8px; padding: 40px 30px; position: relative; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.02); }
.material-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(220,38,38,0.08); border-color: #ffe5e5; }
.material-card .icon-num { position: absolute; top: 20px; right: 20px; font-size: 60px; font-weight: 900; color: rgba(220,38,38,0.05); line-height: 1; font-family: "DIN", sans-serif; transition: 0.3s; }
.material-card:hover .icon-num { color: rgba(220,38,38,0.1); transform: scale(1.1); }
.material-card .item-title { font-size: 20px; font-weight: bold; color: #222; margin-bottom: 15px; position: relative; z-index: 2; }
.material-card .item-text { color: #555; font-size: 15px; line-height: 1.8; position: relative; z-index: 2; }

/* ================== 1.1 原材料严控标准 (高级轮播大图) ================== */
.hero-image-swiper { 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
    position: relative;
    background: #000; /* 加载时的深色底，防止闪白 */
}
.quality-material-swiper { 
    width: 100%; 
    height: auto; 
}
.quality-material-swiper .swiper-slide img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

/* 轮播图控件美化 (半透明与品牌红联动) */
.quality-material-swiper .swiper-pagination {
    bottom: 15px;
}
.quality-material-swiper .swiper-pagination-bullet { 
    background: #fff; 
    opacity: 0.6; 
    transition: all 0.3s ease; 
}
.quality-material-swiper .swiper-pagination-bullet-active { 
    background: var(--red); 
    opacity: 1; 
    width: 24px; /* 激活时变成高级的胶囊状 */
    border-radius: 6px; 
}

/* 左右切换箭头美化 */
.quality-material-swiper .swiper-button-next,
.quality-material-swiper .swiper-button-prev {
    color: #fff;
    background: rgba(0,0,0,0.3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: scale(0.8);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}
.quality-material-swiper .swiper-button-next:hover,
.quality-material-swiper .swiper-button-prev:hover {
    background: var(--red);
    transform: scale(1);
}
.quality-material-swiper .swiper-button-next::after,
.quality-material-swiper .swiper-button-prev::after {
    font-size: 18px; /* 缩小原生箭头尺寸，更显精致 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .quality-material-swiper .swiper-slide img { 
        aspect-ratio: 16/9; /* 手机端拉高一点比例，防止图片过扁 */
    }
    .quality-material-swiper .swiper-button-next,
    .quality-material-swiper .swiper-button-prev {
        display: none; /* 手机端隐藏左右箭头，直接用手指滑动，保持界面清爽 */
    }
}


/* ================== 2. 生产过程全流程管控 (交错布局) ================== */
.process-timeline { display: flex; flex-direction: column; gap: 80px; }

/* 独立的流程步骤 */
.process-step { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* 巧妙的交错顺序 */
.process-step.reverse .text-part { order: 2; }
.process-step.reverse .img-part { order: 1; }

/* 步骤文字排版 */
.process-step .text-part { position: relative; padding: 20px 0; }
.step-watermark { position: absolute; top: -30px; left: -20px; font-size: 120px; font-weight: 900; font-family: "DIN", sans-serif; color: rgba(0,0,0,0.04); line-height: 1; z-index: 1; user-select: none; }
.process-step .step-title { font-size: 26px; font-weight: bold; color: var(--red); margin-bottom: 25px; position: relative; z-index: 2; }

/* 高级定制列表 */
.process-step .step-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.process-step .step-list li { color: #444; font-size: 16px; line-height: 1.8; margin-bottom: 15px; position: relative; padding-left: 25px; }
.process-step .step-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.process-step .step-list li strong { color: #111; font-weight: bold; }

/* 步骤配图 */
.process-step .img-part { position: relative; }
.process-step .img-part::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); pointer-events: none; }
.process-step .img-part img { width: 100%; border-radius: 12px; box-shadow: 0 10px 35px rgba(0,0,0,0.06); display: block; transition: 0.4s ease; }
.process-step:hover .img-part img { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,0.1); }


/* ============================================================
   极致移动端响应式防爆设计
   ============================================================ */
@media (max-width: 1199px) {
    .raw-material-grid { gap: 20px; }
    .material-card { padding: 30px 20px; }
    .process-step { gap: 40px; }
}

@media (max-width: 768px) {
    .quality-section { padding: 60px 0; }
    .modern-section-title .watermark { font-size: 40px; top: -10px; width: 100%; text-align: center !important; left: 50% !important; transform: translateX(-50%) !important; }
    .modern-section-title .title { font-size: 26px; }

    /* 原材料板块折叠 */
    .raw-material-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
    .material-card { padding: 30px 25px; }

    /* 流程板块折叠 */
    .process-timeline { gap: 50px; }
    .process-step { grid-template-columns: 1fr; gap: 25px; }
    
    /* 强制移动端无论如何交错，图片永远在上方，文字在下方，符合手机阅读直觉 */
    .process-step .img-part { order: -1 !important; }
    .process-step .text-part { order: 2 !important; padding: 0; }
    
    .step-watermark { font-size: 80px; top: -20px; left: 0; }
    .process-step .step-title { font-size: 22px; margin-bottom: 15px; }
    .process-step .step-list li { font-size: 15px; }
}

/* ============================================================
   荣誉资质 (Honors & Qualifications) - 大厂白皮书风
   ============================================================ */

/* 基础架构 */
.modern-honor-page * { box-sizing: border-box; }
.modern-honor-page { overflow: hidden; width: 100%; background: #fff; }
.modern-honor-page .wrapper { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 15px; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #f8f9fa; }
.honor-section { padding: 90px 0; }

/* 统一的高级模块标题体系 (复用) */
.modern-section-title { position: relative; margin-bottom: 60px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title .watermark { font-size: 70px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -25px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title .title { font-size: 34px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .subtitle { font-size: 14px; color: var(--red); font-weight: bold; font-family: "DIN", sans-serif; letter-spacing: 2px; margin-top: 5px; position: relative; z-index: 2;}
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0; }


/* ================== 1. 标准制定表格 (白皮书风) ================== */
.standards-table-wrapper {
    width: 100%;
    overflow-x: auto; /* 移动端防爆，允许横向滑动 */
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-radius: 8px;
    background: #fff;
}
.modern-spec-table {
    width: 100%;
    min-width: 800px; /* 保证表格不被过度挤压 */
    border-collapse: collapse;
    text-align: center;
}
.modern-spec-table th {
    background-color: #b9151b; /* 对应原图的深红色表头 */
    color: #fff;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #c9252b;
}
.modern-spec-table td {
    padding: 20px;
    border: 1px solid #eaeaea;
    vertical-align: middle;
    transition: 0.3s;
}
.modern-spec-table tbody tr:hover td {
    background-color: #fffcfc; /* 鼠标悬停极淡的红底色 */
}
/* 单元格双语排版 */
.modern-spec-table td strong {
    display: block;
    font-size: 16px;
    color: #222;
    margin-bottom: 5px;
}
.modern-spec-table td span {
    display: block;
    font-size: 13px;
    color: #666;
    font-family: "DIN", sans-serif;
}
.modern-spec-table td.std-num {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    font-family: "DIN", sans-serif;
}


/* ================== 2. 证书画廊网格 (核心设计) ================== */
.cert-grid {
    display: grid;
    gap: 30px;
}

/* 横版布局 (3列) */
.horizontal-certs { grid-template-columns: repeat(3, 1fr); }
/* 竖版布局 (4列) */
.vertical-certs { grid-template-columns: repeat(4, 1fr); }
/* 专利可能很多，稍微紧凑一点，依然是4列，但可以通过缝隙区分 */
.patent-grid { gap: 20px 30px; }

/* 证书卡片 */
.cert-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cert-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(220,38,38,0.08);
    border-color: #ffe5e5;
}

/* 核心：占位符与图片容器 (强制比例) */
.cert-card .img-box {
    width: 100%;
    background: #f4f5f7; /* 高级灰占位色 */
    position: relative;
    border: 1px solid #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* 如果 img 标签里没有 src，给一个默认的相机/占位图标暗示 */
.cert-card .img-box::before {
    content: "Image Placeholder";
    color: #bbb;
    font-size: 12px;
    position: absolute;
    font-family: Arial, sans-serif;
    z-index: 1;
}


/* 证书真实图片 */
.cert-card .img-box img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满框且不变形 */
    background: #fff; /* 有图片时遮挡底部的占位符文字 */
    transition: 0.4s ease;
}
.cert-card:hover .img-box img {
    transform: scale(1.05); /* 悬浮图片微放大 */
}

/* 证书名称 */
.cert-card .cert-name {
    margin-top: 15px;
    font-size: 15px;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    width: 100%;
}


/* ================== 移动端响应式 ================== */
@media (max-width: 1199px) {
    .horizontal-certs { grid-template-columns: repeat(2, 1fr); }
    .vertical-certs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .honor-section { padding: 60px 0; }
    .modern-section-title .watermark { font-size: 40px; top: -10px; width: 100%; }
    .modern-section-title .title { font-size: 24px; }
    
    /* 移动端表格提示滑动 */
    .standards-table-wrapper { position: relative; }
    .standards-table-wrapper::after {
        content: "滑动查看完整表格 →";
        position: absolute;
        top: -30px;
        right: 0;
        font-size: 12px;
        color: #888;
    }

    /* 移动端卡片全变2列 */
    .horizontal-certs, .vertical-certs { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }
    .cert-card { padding: 10px; }
    .cert-card .cert-name { font-size: 13px; margin-top: 10px; }
}


/* ============================================================
   科研团队 (R&D Team) - 顶级专家与研发实力
   ============================================================ */

.modern-rd-page * { box-sizing: border-box; }
.modern-rd-page { overflow: hidden; width: 100%; background: #fff; }
.modern-rd-page .wrapper { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 15px; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #f8f9fa; }
.rd-section { padding: 90px 0; }

/* 统一高级模块标题 (复用) */
.modern-section-title { position: relative; margin-bottom: 60px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title .watermark { font-size: 70px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -25px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title .title { font-size: 34px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .subtitle { font-size: 14px; color: var(--red); font-weight: bold; font-family: "DIN", sans-serif; letter-spacing: 2px; margin-top: 5px; position: relative; z-index: 2;}
.modern-section-title .intro { font-size: 16px; color: #555; max-width: 800px; margin: 25px auto 0; line-height: 1.8; }
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0; }


/* ================== 1. 领军人物：石干教授 ================== */
.chief-scientist-box { display: grid; grid-template-columns: 350px 1fr; gap: 50px; align-items: flex-start; }

/* 左侧：肖像卡片 (高度压缩优化) */
.profile-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.06); border: 1px solid #eaeaea; }
/* 【核心修改】：将比例从 3/4 改为 1/1 正方形，大幅压缩高度 */
.profile-card .portrait { width: 100%; aspect-ratio: 1/1; background: #f0f0f0; position: relative; display: flex; align-items: center; justify-content: center; }
.profile-card .portrait::before { content: "Portrait Placeholder"; color: #aaa; position: absolute; font-size: 14px; }
.profile-card .portrait img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; background: #fff; }
/* 略微压缩内边距 */
.profile-card .titles { padding: 25px; border-top: 4px solid var(--red); }
.profile-card .name { font-size: 26px; font-weight: bold; color: #222; margin: 0 0 8px 0; display: flex; align-items: baseline; gap: 10px; }
.profile-card .name span { font-size: 13px; font-weight: normal; color: #fff; background: var(--red); padding: 3px 10px; border-radius: 4px; }
.profile-card .role { font-size: 14px; color: #555; font-weight: bold; margin-bottom: 15px; }
.profile-card .badges { list-style: none; padding: 0; margin: 0; border-top: 1px dashed #eaeaea; padding-top: 15px; }
.profile-card .badges li { font-size: 14px; color: #666; margin-bottom: 10px; position: relative; padding-left: 20px; line-height: 1.5; }
.profile-card .badges li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--red); font-size: 12px; }

/* 右侧：选项卡详情 */
.rd-tabs-nav { display: flex; gap: 30px; border-bottom: 2px solid #eaeaea; margin-bottom: 30px; }
.rd-tabs-nav .tab-btn { padding: 15px 0; font-size: 18px; font-weight: bold; color: #888; cursor: pointer; position: relative; transition: 0.3s; }
.rd-tabs-nav .tab-btn::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transition: 0.3s transform; transform-origin: left; }
.rd-tabs-nav .tab-btn:hover, .rd-tabs-nav .tab-btn.active { color: var(--red); }
.rd-tabs-nav .tab-btn.active::after { transform: scaleX(1); }

.tab-pane { display: none; animation: fadeInTab 0.4s ease forwards; }
.tab-pane.active { display: block; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Tab 内容排版 */
.tab-pane p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 15px; text-align: justify; }
.tab-pane h4 { font-size: 18px; color: #222; font-weight: bold; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px; }
.tab-pane h4::before { content: ""; display: block; width: 4px; height: 16px; background: var(--red); border-radius: 2px; }
.tab-pane .mt-20 { margin-top: 30px; }
.tab-pane ul { padding-left: 20px; margin-bottom: 20px; }
.tab-pane li { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 10px; }
.tab-pane li strong { color: var(--red); }
.paper-list li { list-style-type: decimal; }
.paper-list em { font-weight: bold; color: #222; font-style: normal; }


/* ================== 2. 研发团队网格 ================== */
.team-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.team-features-grid .feature-card { background: #fff; padding: 40px 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; transition: 0.3s; text-align: center; }
.team-features-grid .feature-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: var(--red); }
.team-features-grid .icon { height: 60px; margin-bottom: 20px; }
.team-features-grid .icon img { height: 100%; object-fit: contain; }
.team-features-grid h3 { font-size: 20px; font-weight: bold; color: #222; margin-bottom: 15px; }
.team-features-grid p { font-size: 15px; color: #666; line-height: 1.8; margin: 0; }

/* ============================================================
   实干教授个人简介 - 并排图片布局
   ============================================================ */

.professor-gallery {
    display: flex;
    /* 核心：gap 控制两图之间的间距 */
    gap: 20px; 
    margin-top: 30px;
    width: 100%;
    /* 核心：强制不换行，保证在小屏幕依然并排 */
    flex-wrap: nowrap; 
}

.professor-gallery .gallery-item {
    /* 核心：平分容器宽度 */
    flex: 1; 
    /* 核心：防止图片撑破父容器 */
    min-width: 0; 
}

.professor-gallery .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    /* 增加圆角和轻微阴影，符合新中科官网的商务质感 */
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 鼠标悬浮微动效，增加交互感 */
.professor-gallery .gallery-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(201, 37, 43, 0.15); /* 使用品牌红作为发光色 */
    border-color: var(--red);
}

/* ================== 响应式微调 ================== */
@media (max-width: 768px) {
    .professor-gallery {
        /* 在手机端缩小间距，防止画面太碎 */
        gap: 10px;
        margin-top: 20px;
    }
}
/* ================== 3. 实验室画廊网格 (9图矩阵版) ================== */
.lab-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 【核心修改】：改为自动行高，适应不断增加的图片 */
    grid-auto-rows: 220px; 
    gap: 20px;
}
.lab-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); cursor: pointer; }
.lab-item.large { grid-column: span 2; grid-row: span 2; } /* 大图占两行两列 */

.lab-item .img-box { width: 100%; height: 100%; background: #f0f0f0; position: relative; display: flex; align-items: center; justify-content: center; }
.lab-item .img-box::before { content: "Lab Photo"; color: #aaa; position: absolute; font-size: 14px; z-index: 1; }
.lab-item img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; transition: 0.5s ease; background: #fff; }
.lab-item:hover img { transform: scale(1.08); }

/* 底部文字遮罩 */
.lab-item .caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; padding: 30px 20px 15px; font-size: 14px; font-weight: bold; z-index: 3; transform: translateY(10px); opacity: 0.9; transition: 0.3s; }
.lab-item:hover .caption { transform: translateY(0); opacity: 1; color: var(--red); }
.lab-item.large .caption { font-size: 20px; padding: 40px 30px 25px; }

@media (max-width: 1199px) {
    .lab-gallery-grid { grid-auto-rows: 180px; }
}
@media (max-width: 768px) {
    /* 手机端变2列排列 */
    .lab-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .lab-item { height: 160px; }
    .lab-item.large { grid-column: span 2; grid-row: span 1; height: 220px; }
    .lab-item .caption { font-size: 12px; padding: 20px 10px 10px; transform: translateY(0); opacity: 1; }
}


/* ================== 移动端响应式 ================== */
@media (max-width: 1199px) {
    .chief-scientist-box { grid-template-columns: 300px 1fr; gap: 40px; }
    .lab-gallery-grid { grid-template-rows: repeat(2, 200px); }
}

@media (max-width: 768px) {
    .rd-section { padding: 60px 0; }
    .modern-section-title .watermark { font-size: 40px; top: -10px; width: 100%; }
    .modern-section-title .title { font-size: 24px; }
    
    /* 教授模块垂直堆叠 */
    .chief-scientist-box { grid-template-columns: 1fr; gap: 40px; }
    .profile-card { max-width: 400px; margin: 0 auto; }
    .rd-tabs-nav { overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
    
    /* 团队网格变单列 */
    .team-features-grid { grid-template-columns: 1fr; gap: 20px; }
    
    /* 画廊网格手机端处理 */
    .lab-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .lab-item { height: 180px; }
    .lab-item.large { grid-column: span 2; grid-row: span 1; height: 250px; }
    .lab-item .caption { font-size: 13px; padding: 20px 15px 10px; transform: translateY(0); opacity: 1; }
}




.end-to-end .item-text {
    color: var(--light-black);
}

.end-to-end-group {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    margin-top: 2rem;
    grid-gap: 2rem;
}

.end-to-end-group .sn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.end-to-end-group .num {
    color: #e9e9e9;
    font-size: 60px;
    font-weight: bold;
}

.end-to-end-group .line {
    box-sizing: border-box;
    flex-grow: 1;
    width: 1px;
    position: relative;
    border-right: 1px dashed #dcdcdc;
}

.end-to-end-group .line::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 19px;
    height: 19px;
    transform: translateX(50%);
    background: url("images/icon/Development history_circle_gray.webp");
}




.about-body .leave-message {
    margin-top: 0;
    background: linear-gradient(to bottom, var(--gray-bg) 0%, var(--gray-bg) 60%, transparent 60%, transparent 100%);
}

.index-contact-popup .contact-right .form .item5 {
    height: 8rem !important;
}

.index-contact-popup .contact-right .form .item p {
    height: 100%;
}

.index-contact-popup .contact-right .form .item:not(:last-child) span {
    height: 100%;
    width: 100%;
    display: inline-block;
}

.index-contact-popup .contact-right .form input, .index-contact-popup .contact-right .form textarea {
    font-size: 15px;
}


/* 悬停效果 */
.index-contact-popup .close-btn:hover {
    /*transform: scale(1.1);*/
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);*/
}

/* 激活效果 */
.index-contact-popup .close-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* products */

/* ============================================================
   关于我们 (Banner + 总览页) 完整终极版 CSS - V2 (完美平衡版)
   ============================================================ */

/* ================== 0. 关于我们 Banner ================== */
.single-banner .banner-text { display: flex; align-items: center; }
.single-banner .banner-content-box { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding-top: 40px; }
.single-banner .banner-left .title { font-size: 60px; color: white; line-height: 1.1; margin: 0 0 20px 0; }
.single-banner .banner-left .title .light { font-weight: 300; }
.single-banner .banner-left .title .bold { font-weight: 800; position: relative; display: inline-block; padding-right: 15px; }
.single-banner .banner-left .title .bold::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 4px; background-color: var(--red); }
.single-banner .banner-right .btn-online { background-color: white; color: #222; padding: 0 30px; height: 50px; border-radius: 25px; display: flex; align-items: center; font-weight: bold; font-size: 15px; cursor: pointer; text-decoration: none; transition: all 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.single-banner .banner-right .btn-online:hover { background-color: var(--red); color: white; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(220,38,38,0.3); }
.single-banner .banner-right .video { color: white; display: flex; align-items: center; gap: 15px; cursor: pointer; font-size: 15px; font-weight: 500; transition: 0.3s; }
.single-banner .banner-right .video:hover { color: var(--red); }
.single-banner .banner-right .video-btn { position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.2); border-radius: 50%; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.5); transition: 0.3s; }
.single-banner .banner-right .video:hover .video-btn { background: var(--red); border-color: var(--red); }
.single-banner .banner-right .video-btn img { width: 18px; margin-left: 3px; }
.single-banner .banner-right .video-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8); animation: videoPulse 2s linear infinite; }
@keyframes videoPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }

/* 全局模块间距与底色 */
.about-section { padding: 80px 0; background-color: #fff; }
.about-section:nth-child(even) { background-color: #f8f9fa; } 

/* 统一的高级模块标题系统 */
.modern-section-title { position: relative; margin-bottom: 40px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title .watermark { font-size: 60px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -20px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title .title { font-size: 32px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0 !important; }

/* ================== 1. 集团概况 ================== */
.xzk-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.xzk-row .intro { color: #555; line-height: 1.8; font-size: 16px; margin-bottom: 40px; text-align: justify; }
.about-count-box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.count-card { display: flex; align-items: center; gap: 15px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; transition: 0.3s; }
.count-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: #e8e8e8; }
.count-card .icon img { width: 45px; height: 45px; object-fit: contain; }
.count-card .num { font-size: 28px; font-weight: bold; color: #222; font-family: "DIN", sans-serif; line-height: 1; margin-bottom: 5px;}
.count-card .num sub { font-size: 14px; color: var(--red); font-weight: bold; }
.count-card .label { font-size: 14px; color: #666; }
.xzk-row .img img { border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); width: 100%; height: auto; }

/* ================== 2. 核心制造实力 ================== */
.modern-strengths-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; gap: 20px; }
.strength-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.highlight-card { background: #1a1a1a; color: white; padding: 40px 30px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; }
.highlight-card.red-bg { background: var(--red); }
.highlight-card h3 { font-size: 22px; font-weight: bold; margin-bottom: 15px; position: relative; padding-bottom: 15px; }
.highlight-card h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: rgba(255,255,255,0.3); }
.highlight-card.red-bg h3::after { background: #fff; }
.highlight-card p { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.8); }

/* ================== 3. 技术引领 ================== */
.leadership-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.leadership-cards .card { background: #fff; border-top: 3px solid var(--red); padding: 30px; border-radius: 0 0 8px 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }
.leadership-cards .num { font-size: 40px; font-weight: 900; color: #f0f0f0; margin-bottom: 15px; line-height: 1; font-family: "DIN", sans-serif; }
.leadership-cards .desc { color: #555; font-size: 15px; line-height: 1.8; }
.leadership-cards .desc b { color: var(--red); font-size: 18px; }
.leadership-cards .desc a { color: var(--red); text-decoration: underline; }

/* ================== 4. 研发天团 ================== */
.modern-rd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.modern-rd-grid > div { border-radius: 8px; overflow: hidden; }
.rd-img img { width: 100%; height: 100%; object-fit: cover; min-height: 250px; }
.rd-profile { background: #fdfdfd; padding: 40px 30px; border: 1px solid #eaeaea; }
.rd-profile .name { font-size: 24px; font-weight: bold; color: var(--red); margin-bottom: 5px; }
.rd-profile .role { font-size: 14px; color: #888; margin-bottom: 20px; font-weight: bold; }
.rd-profile .achievements { list-style: none; padding: 0; margin: 0; }
.rd-profile .achievements li { position: relative; padding-left: 15px; margin-bottom: 12px; color: #444; font-size: 14px; line-height: 1.6; }
.rd-profile .achievements li::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 50%; position: absolute; left: 0; top: 8px; }
.rd-text { background: #222; color: #fff; padding: 40px 30px; font-size: 16px; line-height: 1.8; display: flex; align-items: center; }

/* ================== 5. 集团架构 ================== */
.modern-org-chart { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.org-root { background: var(--red); color: white; font-size: 22px; font-weight: bold; padding: 15px 40px; border-radius: 30px; position: relative; z-index: 2; box-shadow: 0 10px 20px rgba(220,38,38,0.2); }
.org-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; margin-top: 40px; position: relative; }
.org-branches::before { content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 2px; height: 40px; background: #dcdcdc; }
.org-branches::after { content: ""; position: absolute; top: -2px; left: 16.66%; width: 66.66%; height: 2px; background: #dcdcdc; }
.branch-card { position: relative; border-radius: 8px; overflow: hidden; padding-top: 20px; }
.branch-card::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background: #dcdcdc; }
.branch-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 8px;}
.branch-card .overlay-title { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; padding: 20px; text-align: center; font-weight: bold; font-size: 15px; box-sizing: border-box; }

/* ================== 6. 荣誉与全球版图 ================== */
.about-honor-global .flex-layout { display: flex; gap: 60px; }
.honor-part { width: 35%; flex-shrink: 0; }
.global-part { flex: 1; }
.honor-content .cert-item { margin-bottom: 25px; }
.honor-content .cert-item h4 { font-size: 18px; color: #222; font-weight: bold; margin-bottom: 10px; }
.honor-content .cert-item p { color: #666; font-size: 14px; line-height: 1.6; }
.honor-img img { width: 100%; border-radius: 8px; margin-top: 20px; border: 1px solid #eaeaea;}
.global-part .intro { color: #555; font-size: 15px; line-height: 1.8; margin-bottom: 30px; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ind-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; }
.ind-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ind-card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); transition: 0.3s; }
.ind-card span { position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; color: white; font-weight: bold; font-size: 15px; z-index: 2; }
.ind-card:hover img { transform: scale(1.1); }
.ind-card:hover::after { background: rgba(220,38,38,0.6); } 

/* ============================================================
   移动端与平板自适应 (V2 极致防爆、完美平衡)
   ============================================================ */

/* 平板 (iPad 横屏/竖屏) */
@media (max-width: 1199px) {
    .single-banner .banner-right { padding-bottom: 0; }
    .xzk-row { grid-template-columns: 1fr; gap: 40px; }
    .modern-strengths-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .leadership-cards { grid-template-columns: repeat(2, 1fr); }
    .modern-rd-grid { grid-template-columns: repeat(2, 1fr); }
    .about-honor-global .flex-layout { flex-direction: column; gap: 50px; }
    .honor-part { width: 100%; }
}

/* 手机端 (居中、2x2对齐、图片平衡) */
@media (max-width: 768px) {
    /* Banner 强制居中 */
    .single-banner .banner-content-box { flex-direction: column; align-items: center; text-align: center; gap: 30px; padding-top: 20px; }
    .single-banner .banner-left .subtitle { text-align: center; }
    .single-banner .banner-left .title { font-size: 36px; text-align: center; }
    .single-banner .banner-left .title .bold::after { left: 50%; transform: translateX(-50%); width: 60px; }
    .single-banner .banner-left .text { font-size: 14px; text-align: center; }
    .single-banner .banner-right { flex-direction: column; align-items: center; gap: 20px; width: 100%; padding-bottom: 20px; }
    .single-banner .banner-right .btn-online { width: 100%; justify-content: center; }

    /* 统一强制模块标题居中 */
    .about-section { padding: 30px 15px; }
    .modern-section-title { text-align: center !important; }
    .modern-section-title .watermark { font-size: 36px; top: -10px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; }
    .modern-section-title .title { font-size: 26px; }
    .modern-section-title .title-line { margin: 15px auto 0 !important; }

    /* 数据块 2x2 排列 */
    .about-count-box { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .count-card { flex-direction: column; text-align: center; padding: 15px 10px; gap: 8px; }
    .count-card .icon img { width: 35px; height: 35px; }
    .count-card .num { font-size: 20px; }
    .count-card .num sub { font-size: 12px; }
    .count-card .label { font-size: 12px; }

    /* 【核心修复】：制造实力，解决图片非对称 Bug (Text1+2Img -> Text2+2Img) */
    .modern-strengths-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .modern-strengths-grid .highlight-card { grid-column: 1 / -1; padding: 25px 20px; min-height: auto; }
    .modern-strengths-grid .strength-img { min-height: 120px; }
    /* 利用 CSS Order 重组顺序 */
    .modern-strengths-grid > div:nth-child(1) { order: 1; } /* 文字1 */
    .modern-strengths-grid > div:nth-child(2) { order: 2; } /* 图片1 */
    .modern-strengths-grid > div:nth-child(3) { order: 3; } /* 图片2 */
    .modern-strengths-grid > div:nth-child(5) { order: 4; } /* 文字2 (强制前移) */
    .modern-strengths-grid > div:nth-child(4) { order: 5; } /* 图片3 (强制后移) */
    .modern-strengths-grid > div:nth-child(6) { order: 6; } /* 图片4 */

    /* 技术引领 */
    .leadership-cards { grid-template-columns: 1fr; gap: 15px; }
    .leadership-cards .card { padding: 20px; }

    /* 研发天团也同步优化：图片 1行2个 */
    .modern-rd-grid { grid-template-columns: repeat(1, 1fr); gap: 10px; }
    .modern-rd-grid .rd-profile, .modern-rd-grid .rd-text { grid-column: 1 / -1; padding: 25px 20px; }
    .modern-rd-grid .rd-img { min-height: 140px; }

    /* 集团架构干掉树状线 */
    .org-branches { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
    .org-branches::before, .org-branches::after, .branch-card::before { display: none; }
    .branch-card { padding-top: 0; }
    .org-root { font-size: 18px; padding: 12px 20px; text-align: center; }

    /* 行业图标 1行2个 */
    .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   联系我们页面 - 汉化与重工企业大厂排版 (无顶部浮窗版)
   ============================================================ */

/* ================== 1. 主体信息与表单分栏 ================== */
.contact-info-form-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* 全局浅灰底色 */
}
.split-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* 左侧企业信息略宽 */
    gap: 70px;
    align-items: flex-start;
}

/* --- 左侧：公司概况与联系矩阵 --- */
.company-name {
    font-size: 34px;
    font-weight: 900;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.3;
}
.company-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: justify;
}

/* 高密度联系列表 */
.contact-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-detail-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #dcdcdc;
}
.contact-detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.contact-detail-list .icon-wrap {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    flex-shrink: 0;
}
.contact-detail-list .icon-wrap img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.contact-detail-list .text-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-detail-list .label {
    font-size: 13px;
    color: #888;
}
.contact-detail-list .value {
    font-size: 16px;
    color: #222;
    font-weight: bold;
}
.contact-detail-list .value a {
    color: #222;
    text-decoration: none;
    transition: 0.3s;
}
.contact-detail-list .value a:hover {
    color: var(--red);
}
.contact-detail-list .value.highlight {
    font-size: 22px;
    color: var(--red);
    font-family: "DIN", sans-serif;
}

/* 微信二维码矩阵 */
.wechat-qr-matrix {
    display: flex;
    gap: 20px;
}
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #eaeaea;
}
.qr-item img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}
.qr-item span {
    font-size: 13px;
    font-weight: bold;
    color: #555;
}

/* --- 右侧：留言表单 (跟随滚动) --- */
.form-side {
    position: sticky;
    top: 100px; 
}
.form-wrapper {
    background: #ffffff;
    padding: 45px 40px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
.form-wrapper h3 {
    font-size: 24px;
    color: #111;
    margin: 0 0 15px 0;
    font-weight: bold;
}
.form-tip {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 表单重构 */
.cf7-container input:not([type=submit]), 
.cf7-container textarea {
    width: 100%;
    padding: 14px 15px;
    background: #f4f5f7; 
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    font-family: inherit;
    box-sizing: border-box;
}
.cf7-container input:focus, 
.cf7-container textarea:focus {
    background: #fff;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(201, 37, 43, 0.1);
}
.cf7-container textarea {
    height: 120px;
    resize: vertical;
}
.cf7-container input[type=submit] {
    width: 100%;
    background: #111; 
    color: #fff;
    padding: 16px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 5px;
}
.cf7-container input[type=submit]:hover {
    background: var(--red);
}

/* ================== 2. 采购流程与服务指南 ================== */
.contact-guide-section {
    padding: 80px 0;
    background: #ffffff;
}
.guide-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.6fr; /* 分配列宽 */
    gap: 30px;
}

/* 资料下载与常见问题卡片 */
.guide-card {
    background: #f8f9fa;
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
}
.guide-card h3 {
    font-size: 20px;
    color: #111;
    margin: 0 0 10px 0;
    font-weight: bold;
}
.guide-sub {
    font-size: 14px;
    color: #888;
    margin-bottom: 25px;
}
/* 丰富化的清单样式 */
.guide-rich-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.guide-rich-list li {
    font-size: 14px;
    color: #444;
    position: relative;
    padding-left: 20px;
    line-height: 1.5;
}
.guide-rich-list li::before {
    content: "•";
    color: var(--red);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}
.btn-guide-link {
    margin-top: auto; /* 自动顶到底部 */
    display: inline-block;
    color: var(--red);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}
.btn-guide-link .arrow {
    display: inline-block;
    transition: transform 0.3s;
}
.btn-guide-link:hover .arrow {
    transform: translateX(4px);
}

/* FAQ 独立反色样式 */
.faq-card {
    background: var(--red);
    border-color: var(--red);
}
.faq-card h3, .faq-card .guide-sub, .faq-card li {
    color: #ffffff;
}
.faq-card li::before {
    color: rgba(255,255,255,0.6);
}
.faq-card .btn-guide-link {
    color: #ffffff;
}

/* 采购流程卡片 */
.process-card {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.process-header {
    margin-bottom: 30px;
}
.process-header h3 {
    color: var(--red);
    font-size: 20px;
    margin: 0 0 5px 0;
}
.process-header p {
    font-weight: bold;
    color: #222;
    margin: 0;
}

/* 流程时间轴 */
.process-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.step-line {
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #f0f0f0;
}
.step-item {
    position: relative;
    padding-left: 35px;
}
.step-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 3px solid var(--red);
    border-radius: 50%;
    z-index: 2;
}
.step-name {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    margin-bottom: 5px;
}
.step-desc {
    font-size: 13px;
    color: #888;
}

/* ================== 3. 通栏百度地图容器 ================== */
.contact-full-map-section {
    width: 100%;
    background: #eaeaea; 
    line-height: 0; 
}
#mapContainer {
    width: 100%;
    height: 500px;
}

/* ================== 移动端自适应 ================== */
@media (max-width: 1199px) {
    .split-layout { gap: 40px; }
    .guide-grid { grid-template-columns: 1fr 1fr; }
    .process-card { grid-column: 1 / span 2; }
}

@media (max-width: 992px) {
    .split-layout { grid-template-columns: 1fr; }
    .form-side { position: relative; top: 0; }
}

@media (max-width: 768px) {
    .company-name { font-size: 28px; }
    .form-wrapper { padding: 30px 20px; }
    .guide-grid { grid-template-columns: 1fr; }
    .process-card { grid-column: 1; }
    .contact-full-map-section iframe { height: 350px; }
}


/* ============================================================
   下载中心页面 - 资料卡片与获客弹窗
   ============================================================ */

.download-center-section {
    padding: 60px 0;
    background-color: #f4f5f7;
}

/* 顶部信息条 */
.download-filter-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 15px;
}
.download-filter-info span {
    font-size: 20px;
    font-weight: 900;
    color: #111;
}
.download-filter-info p {
    font-size: 14px;
    color: var(--red);
    margin: 0;
}

/* 资料网格 */
.download-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 独立资料卡片 */
.download-card {
    background: #fff;
    border-radius: 8px;
    padding: 35px 30px;
    border: 1px solid #eaeaea;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
/* 卡片顶部的一丝红线，增加高级感 */
.download-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.download-card:hover::before {
    transform: scaleX(1); /* 悬浮时红线展开 */
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    font-family: "DIN", sans-serif;
}
.pdf-icon { background: linear-gradient(135deg, #e53935, #c62828); }
.ppt-icon { background: linear-gradient(135deg, #ff9800, #f57c00); }
.doc-icon { background: linear-gradient(135deg, #2196f3, #1565c0); }

/* 卡片文本内容 */
.card-info {
    flex-grow: 1;
}
.card-info h3 {
    font-size: 18px;
    font-weight: bold;
    color: #111;
    margin: 0 0 15px 0;
    line-height: 1.4;
    margin-top: 25px;
}
.card-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    border-top: 1px dashed #eaeaea;
    padding-top: 15px;
    margin-bottom: 25px;
}

/* 下载按钮 (诱饵开关) */
.btn-download {
    display: block;
    text-align: center;
    background: #f8f9fa;
    color: #333;
    padding: 12px 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: 0.3s;
}
.download-card:hover .btn-download {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ================== 获客弹窗 (Modal) 样式 ================== */
.dl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 默认隐藏，通过 JS 切换 class 控制显示 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.dl-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.dl-modal-box {
    background: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 8px;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.dl-modal-overlay.active .dl-modal-box {
    transform: translateY(0);
}

/* 关闭按钮 */
.dl-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}
.dl-close-btn:hover { color: var(--red); }

/* 弹窗头部 */
.dl-modal-header {
    text-align: center;
    margin-bottom: 30px;
}
.dl-modal-header h3 {
    font-size: 22px;
    color: #111;
    margin: 0 0 10px 0;
}
.dl-modal-header p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* 弹窗表单 */
.dl-form .form-group {
    margin-bottom: 15px;
}
.dl-form input {
    width: 100%;
    padding: 14px 15px;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}
.dl-form input:focus {
    background: #fff;
    border-color: var(--red);
}
.dl-form .btn-submit {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}
.dl-form .btn-submit:hover {
    background: #b9151b;
}

/* 隐私声明 */
.dl-security-tip {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin-top: 20px;
}

/* ================== 移动端自适应 ================== */
@media (max-width: 992px) {
    .download-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .download-filter-info { flex-direction: column; align-items: flex-start; gap: 10px; }
    .download-grid { grid-template-columns: 1fr; }
    .dl-modal-box { padding: 30px 20px; }
}

/* ============================================================
   下载中心弹窗表单 - CF7 适配优化
   ============================================================ */

/* 移除 CF7 默认生成的段落间距 */
.cf7-modal-wrapper .wpcf7 p {
    margin: 0;
}

/* 统一输入框样式 */
.cf7-modal-wrapper .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 14px 15px;
    background: #f4f5f7;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
    margin-bottom: 15px; /* 替代原来的 form-group 间距 */
    display: block;
}

/* 焦点状态 */
.cf7-modal-wrapper .wpcf7-form-control:focus {
    background: #fff;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(201, 37, 43, 0.1);
}

/* 提交按钮样式强制覆盖 */
.cf7-modal-wrapper .btn-submit {
    width: 100%;
    background: var(--red);
    color: #fff;
    border: none;
    padding: 16px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s ease;
    margin-top: 5px;
    display: block;
}

.cf7-modal-wrapper .btn-submit:hover {
    background: #b9151b;
    box-shadow: 0 5px 15px rgba(201, 37, 43, 0.3);
}

/* 成功发送后的提示语样式（中文版） */
.cf7-modal-wrapper .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 10px;
    font-size: 13px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #46b450; /* 发送成功的绿色边框 */
    color: #46b450;
}

/* ============================================================
   案例列表页 Banner - 终极修复版 (解决大小不一与溢出问题)
   ============================================================ */

/* 1. 强制左右分栏比例，确保不超出 wrapper 限制 */
.case-banner .banner-content-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    width: 100%; /* 锁定在 wrapper 内部 */
}

.case-banner .banner-left {
    flex: 1; /* 占据左侧剩余空间 */
    min-width: 0; /* 防止长文案撑破容器 */
}

/* 2. 锁定右侧网格容器宽度 */
.case-categories-grid {
    display: grid!important;
    grid-template-columns: repeat(3, 1fr); /* 严格 3 列 */
    gap: 12px; /* 间距微调 */
    width: 45%; /* 强制占用右侧 45% 的宽度 */
    max-width: 520px; /* 给一个物理最大宽度限制 */
    flex-shrink: 0; /* 禁止被左侧内容挤压 */
}

/* 3. 核心修复：锁定卡片大小一致 */
.cat-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    
    /* 关键属性：强制锁定高度或纵横比 */
    height: 110px; /* 直接给固定高度是最稳妥的对齐方案 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    padding: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    overflow: hidden; /* 防止溢出 */
}

.cat-item .icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 4. 强制文案单行或等高处理 */
.cat-item .caption {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    /* 如果文案太长，强制单行并显示省略号，确保不撑破高度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.cat-item:hover,
.cat-item.active {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
}

/* ============================================================
   移动端防爆：根据屏幕宽度自动调整
   ============================================================ */
@media (max-width: 1199px) {
.case-banner .banner-text {
        padding-top: 10px;
    }

.single-banner .banner-left .title {
    font-size: 30px;
}

    .cat-item {
        height: 60px;
    }
    .case-banner .banner-content-box {
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
    }
    .case-categories-grid {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .case-banner.single-banner {
        height: auto !important; 
    }
    .case-banner .banner-text {
        padding-bottom: 50px; /* 底部留出安全区，防止贴边 */
    }
    
    .case-categories-grid {
        gap: 10px;
    }
    .cat-item {
        height: 110px;
        padding: 10px 5px;
    }
    .cat-item .caption {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    /* 超窄屏手机：2 列排列，防止文字挤在一起 */
    .case-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.case-body {
    background-color: var(--gray-bg);
}

.case-container .case-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-gap: 2rem 1rem;
    margin: 5rem 0;
}

.case-container .case-list .item {
    background-color: white;
    padding-bottom: 2rem;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.case-container .case-list .item.img {
    width: 467px;
}

.case-container .case-list .item:hover {
    border: 1px solid var(--red);
}

.case-container .case-list img {
    max-width: 100%;
    display: block;
}


.case-container .case-list .title {
    padding-left: 1rem;
    line-height: 35px;
    margin-top: 1rem;
}

.case-container .info-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 2rem 1rem 1rem;
}

.case-container .info-list .info-item {
    height: 4rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 1rem;
}

.case-container .case-list .detail {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.case-container .case-list .detail a {
    color: var(--light-black);
    line-height: 25px;
}

.case-container .case-list .detail a:hover {
    color: var(--red);
}

.case-container .case-list .category {
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    display: inline-block;
    padding: 0 1rem;
    box-sizing: border-box;
    line-height: 25px;
    color: var(--red);
}

.case-partner {
    padding: 3rem 0;
    margin-top: 2rem;
    background-color: white;
    border-bottom: 3px solid #abc8b8;
}

.case-partner .title {
    color: var(--red);
    text-align: center;
    font-size: 30px;
}

.case-partner .intro {
    color: var(--light-black);
    text-align: center;
    margin-top: 1rem;
    line-height: 1.6;
    padding: 0 4rem;
}

.case-partner .logo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.7rem;
    margin-top: 1rem;
    justify-content: center;
}

/* ============================================================
   客户评价 (Customer Feedback) - 高级感重构版
   ============================================================ */

.modern-feedback-section {
    padding: 80px 0 100px;
    background-color: #f8f9fa; /* 浅灰底色，衬托白色的评价卡片 */
}

/* 移除原有的死高度，采用相对定位即可 */
.customer-feedback-box {
    position: relative;
    margin-top: 40px;
}

/* 核心修复：让 Swiper 内部的所有卡片等高，不再高高低低 */
.modern-feedback-section .swiper-container {
    padding-bottom: 20px; /* 给卡片底部的阴影留出空间 */
}
.modern-feedback-section .swiper-slide {
    height: auto; /* 让 Swiper 自动计算等高 */
}

/* 高级评价卡片样式 */
.feedback-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 文字和底部信息两端对齐 */
    position: relative;
    transition: 0.3s;
    height: 100%;
    z-index: 1;
}

.feedback-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-color: #dcdcdc;
}

/* 灵魂设计：背景巨大的浅色双引号 */
.feedback-card::before {
    content: "“";
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 120px;
    font-family: Georgia, serif;
    color: rgba(220, 38, 38, 0.05); /* 极浅的品牌红 */
    line-height: 1;
    z-index: -1;
}

/* 评价正文 */
.feedback-card .customer-text, 
.case-project-info .customer-text {
    color: #555;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic; /* 评价文字使用斜体，更具真实感 */
}

/* 客户信息区 (底部落款) */
.feedback-card .customer-info, 
.case-project-info .customer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px dashed #eaeaea;
    padding-top: 20px;
}

/* 头像强制圆形防畸变 */
.feedback-card .customer-info .avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f0f0f0;
}
.feedback-card .customer-info .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心：防止客户上传长方形图片变扁 */
    display: block;
}

.feedback-card .customer-info .name, 
.case-project-info .customer-info .name {
    font-weight: bold;
    color: #222;
    font-size: 16px;
}

.feedback-card .customer-info .job, 
.case-project-info .customer-info .job {
    color: var(--red);
    font-size: 13px;
    margin-top: 3px;
}

/* 现代化胶囊形分页器 */
.customer-feedback-box .swiper-pagination {
    bottom: -40px;
    width: 100%;
}
.customer-feedback-box .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 6px !important;
    background: #dcdcdc;
    opacity: 1;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.customer-feedback-box .swiper-pagination-bullet-active {
    background: var(--red);
    width: 30px; /* 激活状态拉长为胶囊形 */
}

/* ============================================================
   移动端响应式
   ============================================================ */
@media (max-width: 768px) {
    .modern-feedback-section { padding: 60px 0 80px; }
    .feedback-card { padding: 30px 20px; }
    .feedback-card::before { font-size: 80px; right: 10px; top: 10px; }
    .feedback-card .customer-text { font-size: 14px; }
}

/* ============================================================
   案例详情页 - 暗黑重工科技风 (高大上企业版)
   ============================================================ */

.premium-industrial-case * { box-sizing: border-box; }
.bg-gray { background-color: #f4f5f7; }

/* ================== 1. 暗黑首屏与双栏布局 ================== */
.industrial-hero-header {
    background: linear-gradient(135deg, #0b0c0f 0%, #1e2028 100%);
    padding: 120px 0 120px; 
    position: relative;
    border-bottom: 4px solid var(--red);
}
.industrial-hero-header::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px; opacity: 0.8; pointer-events: none;
}

.hero-split-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* 左边稍微宽一点 */
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* 左侧内容 */
.project-badge {
    display: inline-block; background: rgba(201, 37, 43, 0.15);
    color: var(--red); border: 1px solid rgba(201, 37, 43, 0.5);
    padding: 6px 16px; font-size: 13px; font-weight: bold;
    font-family: "DIN", sans-serif; letter-spacing: 2px;
    border-radius: 2px; margin-bottom: 20px;
}
.case-main-title {
    font-size: 44px; font-weight: 900; color: #ffffff;
    line-height: 1.25; margin: 0 0 25px 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.6);
}
.hero-main .case-excerpt {
    font-size: 16px; color: #a5aab8; line-height: 1.8; margin-bottom: 40px;
}

/* 按钮区 */
.action-area { display: flex; gap: 20px; }
.action-area a {
    padding: 15px 35px; font-size: 14px; font-weight: bold;
    font-family: "DIN", sans-serif; letter-spacing: 1px;
    border-radius: 4px; cursor: pointer; transition: 0.3s;
    text-decoration: none; display: inline-flex; align-items: center;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(201, 37, 43, 0.3); border: 1px solid var(--red); }
.btn-primary:hover { background: #b9151b; transform: translateY(-3px); box-shadow: 0 12px 25px rgba(201, 37, 43, 0.4); border-color: #b9151b; color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.btn-outline-light:hover { background: #fff; color: #111; transform: translateY(-3px); border-color: #fff; }

/* 右侧：反馈玻璃态卡片 (Glassmorphism) */
.feedback-dark-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--red); /* 顶部红线 */
    border-radius: 6px;
    padding: 35px 30px;
    backdrop-filter: blur(12px); /* 毛玻璃特效 */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.card-top-label {
    color: var(--red); font-size: 14px; font-weight: bold;
    font-family: "DIN", sans-serif; letter-spacing: 1px; margin-bottom: 25px;
}
.customer-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 20px; }
.customer-header .avatar { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.2); }
.customer-header .avatar img { width: 100%; height: 100%; object-fit: cover; }
.customer-header .name { font-size: 16px; font-weight: bold; color: #fff; }
.customer-header .job { font-size: 13px; color: #888; margin-top: 3px; font-family: "DIN", sans-serif; }
.customer-text { font-size: 15px; color: #bbb; line-height: 1.8; font-style: italic; position: relative; }
.customer-text::before { content: "“"; font-size: 50px; color: rgba(255,255,255,0.05); position: absolute; top: -15px; left: -10px; line-height: 1; font-family: Georgia, serif; }


/* ================== 2. 悬浮数据阵列 (加硬工业风) ================== */
.premium-dashboard-wrapper { padding-bottom: 80px; position: relative; }
.overlap-metrics-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-top: 50px; /* 向上突围 90px，与上方内容保持完美呼吸感 */
    position: relative; z-index: 20;
}
.metric-card {
    background: #ffffff;
    border-radius: 4px;
    padding: 25px 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
    transition: all 0.4s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border-left: 4px solid #eaeaea; /* 重工业切割边框 */
}
.metric-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
    border-left-color: var(--red); /* 悬浮时左边亮红 */
}
.metric-card .icon-box { 
    width: 45px; height: 45px; background: #f8f9fa; border-radius: 4px; 
    display: flex; align-items: center; justify-content: center; 
}
.metric-card .icon-box img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(100%); transition: 0.3s; }
.metric-card:hover .icon-box img { filter: grayscale(0%); } /* 悬浮时图标恢复彩色 */
.metric-card .data { width: 100%; }
.metric-card .label { display: block; font-size: 12px; color: #888; font-family: "DIN", sans-serif; letter-spacing: 1px; margin-bottom: 5px; }
.metric-card .value { display: block; font-size: 18px; color: #111; font-weight: 900; line-height: 1.3; }

/* 3. 全宽实景图 */
.full-width-visual { margin-top: 50px; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08); background: #e9ecef; }
.full-width-visual img { width: 100%; height: auto; display: block; }

.case-container .case-common-title {
    color: var(--red);
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 2rem;
}
/* ================== 移动端强制防贴边适配 ================== */
@media (max-width: 1199px) {
    .hero-split-layout { grid-template-columns: 1fr; gap: 40px; }
    .overlap-metrics-grid { grid-template-columns: repeat(2, 1fr); margin-top: -50px; }
}

@media (max-width: 768px) {
    .industrial-hero-header { padding: 80px 15px 80px; }
    .hero-split-layout { padding: 0 5px; }
    .case-main-title { font-size: 30px; }
    .premium-dashboard-wrapper { padding: 0 15px 60px; }
    .overlap-metrics-grid { margin-top: 20px; gap: 15px; }
    .metric-card { flex-direction: row; align-items: center; padding: 20px 5px; border-left: none; border-top: 4px solid #eaeaea; }
    .metric-card:hover { border-top-color: var(--red); border-left-color: transparent; }
}

.case-project-overview {
    padding: 3rem 0;
}

.case-project-overview .content {
    color: var(--light-black);
    line-height: 2;
    margin-top: 1rem;
}

.case-project-products .intro {
    color: var(--light-black);
    margin-top: 1rem;
}

.case-project-products .product-related-products {
    margin-top: 2rem;
}

.related-product-case {
    padding: 3rem 0;
}

.related-product-case .case-list {
    margin-top: 2rem;
}

/* ============================================================
   相关案例卡片列表 (Related Cases) - 高级工业风网格
   ============================================================ */

/* 控制外层列表为 3 列网格 */
.related-product-case .case-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- 卡片整体外壳 --- */
.modern-related-case-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    top: 0;
}
.modern-related-case-item:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
    top: -8px; /* 悬浮时整卡上浮 */
}

/* --- 1. 图片与角标区 --- */
.modern-related-case-item .case-img-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
}
.modern-related-case-item .case-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.modern-related-case-item:hover .case-img-box img {
    transform: scale(1.08); /* 悬浮图片深层放大 */
}

/* 分类角标 */
.case-category-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 2;
}
.case-category-badges .cat-badge {
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(201, 37, 43, 0.3);
}

/* --- 2. 内容区 --- */
.modern-related-case-item .case-content-box {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 保证底部对其 */
}

/* 标题 */
.modern-related-case-item .case-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}
.modern-related-case-item .case-title a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s;
    /* 强制最多两行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modern-related-case-item .case-title a:hover {
    color: var(--red);
}

/* --- 3. 参数数据网格 (核心设计) --- */
.modern-related-case-item .case-meta-grid {
    background: #f8f9fa; /* 高级灰底色 */
    border-radius: 6px;
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 10px;
    margin-bottom: 25px;
    border: 1px solid #f0f0f0;
}
.modern-related-case-item .meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.modern-related-case-item .m-label {
    font-size: 12px;
    color: #888;
}
.modern-related-case-item .m-value {
    font-size: 14px;
    color: #222;
    font-weight: bold;
    /* 防止参数过长撑破排版 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 4. 底部详情链接 --- */
.modern-related-case-item .case-footer {
    margin-top: auto; /* 始终顶在最下方 */
    padding-top: 15px;
    border-top: 1px solid #eaeaea;
    display: flex;
    justify-content: flex-end;
}
.modern-related-case-item .btn-read-more {
    color: var(--red);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
}
.modern-related-case-item .btn-read-more .arrow {
    transition: transform 0.3s;
}
.modern-related-case-item .btn-read-more:hover {
    color: #b9151b;
}
.modern-related-case-item .btn-read-more:hover .arrow {
    transform: translateX(4px); /* 悬浮时箭头向右微动 */
}

/* ================== 移动端防爆自适应 ================== */
@media (max-width: 1199px) {
    .related-product-case .case-list { gap: 20px; }
}

@media (max-width: 992px) {
    /* 平板端降级为 2 列 */
    .related-product-case .case-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* 手机端降级为单列 */
    .related-product-case .case-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .modern-related-case-item .case-content-box { padding: 20px 15px; }
}





/* ============================================================
   相关视频卡片列表 (Related Videos) - 影院级视听质感
   ============================================================ */

/* 1. 外层容器重构为标准网格 */
.related-product-video .video-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 2. 视频卡片主体 */
.modern-related-video-item {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid #eaeaea;
}
.modern-related-video-item:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transform: translateY(-6px);
    border-color: transparent;
}

/* 3. 视频封面区 (16:9 比例) */
.modern-related-video-item .video-thumb-box {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #111; /* 底色给深色，防止图片加载慢时刺眼 */
}
.modern-related-video-item .video-thumb-box img.fitImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}
.modern-related-video-item:hover .video-thumb-box img.fitImage {
    transform: scale(1.05); /* 悬浮时背景图微微放大 */
}

/* 4. 遮罩层与播放按钮特效 */
.modern-related-video-item .video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* 默认有一层极淡的暗化 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
}
.modern-related-video-item:hover .video-overlay {
    background: rgba(0, 0, 0, 0.5); /* 悬浮时变暗，凸显播放按钮 */
}

.modern-related-video-item .play-icon-wrapper {
    width: 56px;
    height: 56px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 带有一点弹性的动画 */
    transform: scale(0.9);
    opacity: 0.9;
}
.modern-related-video-item .play-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.modern-related-video-item:hover .play-icon-wrapper {
    transform: scale(1.1); /* 悬浮时播放按钮放大跳出 */
    opacity: 1;
}

/* 5. 视频标题区 */
.modern-related-video-item .video-info-box {
    padding: 20px;
    background: #fff;
}
.modern-related-video-item .video-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    line-height: 1.5;
    text-align: center; /* 保持原有的居中习惯，也可以改为 left */
    transition: color 0.3s;
    /* 强制限制为两行，超出显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modern-related-video-item:hover .video-title {
    color: var(--red); /* 悬浮时标题变品牌红 */
}

/* ================== 移动端防爆自适应 ================== */
@media (max-width: 1199px) {
    .related-product-video .video-list { gap: 20px; }
}

@media (max-width: 992px) {
    .related-product-video .video-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .related-product-video .video-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .modern-related-video-item .play-icon-wrapper {
        width: 48px;
        height: 48px;
    }
}

/* ============================================================
   社会责任 (Social Responsibility) - 国际大厂风格防弹版
   ============================================================ */

/* 全局防撑破保护伞 */
.modern-social-page * { box-sizing: border-box; }
.modern-social-page { background-color: #f8f9fa; overflow: hidden; width: 100%; }
.modern-social-page .wrapper { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 15px; }

.social-section { padding: 90px 0; }
.social-section:nth-child(even) { background-color: #fff; }

/* 统一高级模块标题 */
.modern-section-title { position: relative; margin-bottom: 50px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title.text-right { text-align: right; }
.modern-section-title .watermark { font-size: 70px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -25px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title.text-right .watermark { left: auto; right: 0; }
.modern-section-title .title { font-size: 34px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .title span { font-size: 16px; font-weight: normal; color: #888; margin-left: 15px; font-family: "DIN", sans-serif; letter-spacing: 1px;}
.modern-section-title .subtitle { font-size: 14px; color: var(--red); font-weight: bold; font-family: "DIN", sans-serif; letter-spacing: 2px; margin-top: 5px; position: relative; z-index: 2;}
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0; }
.modern-section-title .title-line.right { margin: 15px 0 0 auto; }

/* 深色背景下的浅色标题 */
.modern-section-title.light .title { color: #fff; }
.modern-section-title.light .watermark { color: rgba(255,255,255,0.05); }
.modern-section-title.light .intro { color: rgba(255,255,255,0.8); font-size: 16px; margin-top: 20px; }


/* ================== 1. 顶部视觉交错区 ================== */
.social-hero-section { position: relative; padding-bottom: 80px; }
.hero-img { width: 100%; height: 500px; position: relative; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-text-card { position: relative; background: #fff; width: 80%; max-width: 900px; margin: -300px auto 0; z-index: 10; padding: 60px; border-radius: 12px; box-shadow: 0 15px 50px rgba(0,0,0,0.08); text-align: center; }
.intro-box p { font-size: 16px; line-height: 1.8; text-align: justify; }
.intro-box p.highlight { font-size: 20px; font-weight: bold; color: var(--red); margin-top: 30px; margin-bottom: 0; }


/* ================== 2. 绿色承诺 (加入专属绿色覆盖) ================== */
.green-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.green-grid .text-cards { display: flex; flex-direction: column; gap: 20px; }
.green-grid .item { background: #fff; padding: 35px; border-radius: 8px; border-left: 4px solid var(--red); box-shadow: 0 5px 25px rgba(0,0,0,0.03); transition: 0.3s; }
.green-grid .item:hover { transform: translateX(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.green-grid .item-title { font-size: 20px; color: #222; font-weight: bold; margin-bottom: 10px; }
.green-grid .item-text { font-size: 15px; color: #666; line-height: 1.8; }
.green-grid .img-box img { width: 100%; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); display: block; }

/* 绿色承诺板块 - 强制变绿 */
.social-green .modern-section-title .title span { color: var(--green, #015729); }
.social-green .modern-section-title .title-line { background: var(--green, #015729); }
.social-green .green-grid .item { border-left-color: var(--green, #015729); }
.social-green .green-grid .item-title { color: var(--green, #015729); }


/* ================== 3 & 4. 左右分栏通用布局 ================== */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-layout.reverse .img-part { order: 2; }
.split-layout.reverse .text-part { order: 1; }
.split-layout .img-part img { width: 100%; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); aspect-ratio: 4/3; object-fit: cover; display: block; }

/* 数字列表风格 */
.list-item { display: flex; gap: 25px; margin-bottom: 40px; }
.list-item:last-child { margin-bottom: 0; }
.list-item .num { font-size: 40px; font-weight: 900; color: #e9ecef; line-height: 1; font-family: "DIN", sans-serif; transition: 0.3s; }
.list-item:hover .num { color: var(--red); }
.list-item .title { font-size: 22px; font-weight: bold; color: #222; margin-bottom: 10px; }
.list-item .intro { font-size: 15px; color: #666; line-height: 1.8; }

/* 高级悬停色块风格 */
.hover-blocks { display: flex; flex-direction: column; gap: 15px; }
.block-item { background: #fff; padding: 35px 40px; border-radius: 8px; border: 1px solid #f0f0f0; transition: all 0.4s ease; cursor: default; }
.block-item .title { font-size: 20px; font-weight: bold; color: var(--red); margin-bottom: 10px; transition: 0.4s; }
.block-item .intro { font-size: 15px; color: #555; line-height: 1.8; transition: 0.4s; }
.block-item:hover { background: var(--red); border-color: var(--red); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(220,38,38,0.2); }
.block-item:hover .title, .block-item:hover .intro { color: #fff; }


/* ================== 5. SDG 目标区块 ================== */
.social-footer-box { position: relative; padding: 100px 0; overflow: hidden; background: #000; }
.social-footer-box .bg-overlay { position: absolute; inset: 0; z-index: 1; }
.social-footer-box .bg-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(0, 20, 10, 0.85); }
.social-footer-box .bg-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.relative-z { position: relative; z-index: 2; }

.sdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.sdg-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 50px 30px; text-align: center; color: white; backdrop-filter: blur(5px); transition: 0.3s; }
.sdg-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); transform: translateY(-10px); }
.sdg-card .icon { margin-bottom: 25px; }
.sdg-card .icon img { height: 100%; width: auto; object-fit: contain; }
.sdg-card b { font-size: 30px; display: block; font-family: "DIN", sans-serif; margin-bottom: 10px; color: #fff; }
.sdg-card p { font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; }

/* 图标呼吸动效 */
.breathing-icon .icon img { animation: softBreathing 4s ease-in-out infinite; }
.breathing-icon.delay-1 .icon img { animation-delay: 1s; }
.breathing-icon.delay-2 .icon img { animation-delay: 2s; }
@keyframes softBreathing {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 5px 15px rgba(255,255,255,0.3)); }
}


/* ============================================================
   移动端响应式防爆设计
   ============================================================ */
@media (max-width: 1199px) {
    .green-grid, .split-layout { gap: 40px; }
    .hero-text-card { width: 90%; padding: 40px; }
    .sdg-grid { gap: 20px; }
}

@media (max-width: 768px) {
    .social-section { padding: 60px 0; }
    .modern-section-title .watermark { font-size: 40px; top: -10px; width: 100%; text-align: center !important; left: 50% !important; transform: translateX(-50%) !important; }
    .modern-section-title .title { font-size: 26px; }
    .modern-section-title .title span { display: block; margin: 5px 0 0 0; font-size: 14px; }
    .modern-section-title { text-align: center !important; }
    .modern-section-title .title-line { margin: 15px auto 0 !important; }

    /* Hero 卡片折叠 */
    .social-hero-section { padding-bottom: 40px; }
    .hero-img { height: 350px; }
    .hero-text-card { width: calc(100% - 30px); margin: -250px auto 0; padding: 30px 20px; }
    .intro-box p { text-align: left; text-align-last: auto; font-size: 15px; }
    .intro-box p.highlight { font-size: 18px; }

    /* 左右分栏变为上下堆叠 */
    .green-grid { grid-template-columns: 1fr; }
    .green-grid .img-box { order: -1; margin-bottom: 20px; }
    
    .split-layout { grid-template-columns: 1fr; }
    .split-layout.reverse .img-part { order: -1; margin-bottom: 20px; }
    .split-layout.reverse .text-part { order: 2; }
    
    .list-item { flex-direction: column; gap: 10px; margin-bottom: 30px; }
    .list-item .num { font-size: 30px; }

    .block-item { padding: 25px 20px; }

    /* SDG 折叠 */
    .social-footer-box { padding: 60px 0; }
    .sdg-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    .sdg-card { padding: 35px 20px; }
}

/* ============================================================
   服务体系 (Service System) - 国际大厂风格防弹版
   ============================================================ */
.modern-service-page * { box-sizing: border-box; }
.modern-service-page { background-color: #fff; }
.bg-gray { background-color: #f8f9fa; }

/* 统一的高级模块标题体系 */
.modern-section-title { position: relative; margin-bottom: 50px; }
.modern-section-title.text-center { text-align: center; }
.modern-section-title .watermark { font-size: 70px; font-weight: 900; font-family: "DIN", Arial, sans-serif; color: rgba(0,0,0,0.03); line-height: 1; letter-spacing: 2px; position: absolute; top: -25px; left: 0; z-index: 1; }
.modern-section-title.text-center .watermark { left: 50%; transform: translateX(-50%); }
.modern-section-title .title { font-size: 34px; font-weight: bold; color: #222; position: relative; z-index: 2; margin: 0; line-height: 1.4; }
.modern-section-title .subtitle { font-size: 14px; color: var(--red); font-weight: bold; font-family: "DIN", sans-serif; letter-spacing: 2px; margin-top: 5px; position: relative; z-index: 2;}
.modern-section-title .title-line { width: 50px; height: 4px; background: var(--red); margin-top: 15px; position: relative; z-index: 2; }
.modern-section-title .title-line.center { margin: 15px auto 0; }
.modern-section-title.light .title { color: #fff; }
.modern-section-title.light .watermark { color: rgba(255,255,255,0.05); }
.service-section { padding: 90px 0; }

/* ================== 1. 服务理念 ================== */
.philosophy-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: stretch; }
.philosophy-layout .intro-box { background: var(--green); color: #fff; padding: 30px; font-size: 16px; line-height: 1.8; border-radius: 8px; margin-top: 20px; box-shadow: 0 10px 30px rgba(1, 87, 41, 0.15); }
.core-values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-content: center; }
.core-values-grid .item { border: 1px solid #eaeaea; border-radius: 8px; padding: 25px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; transition: 0.3s; background: #fff; }
.core-values-grid .item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); border-color: var(--red); }
.core-values-grid .item .icon img { height: 40px; width: auto; object-fit: contain; }
.core-values-grid .item .title { font-size: 18px; color: var(--red); font-weight: bold; margin: 0; }
.core-values-grid .item .intro { color: #555; font-size: 14px; line-height: 1.6; }

/* ================== 2. 全生命周期流程 (Tabs) ================== */
.end-to-end { margin-top: 40px; }
.step-tracker { display: flex; justify-content: space-between; position: relative; max-width: 900px; margin: 0 auto; padding-bottom: 20px; }

/* 虚线：精准定位到数字下方 */
.step-tracker .line { position: absolute; top: 62px; left: 15%; width: 70%; height: 0; border-bottom: 2px dashed #dcdcdc; z-index: 1; }

.step-tracker .item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; cursor: pointer; flex: 1; }

/* 数字块：撑开底部空间留给圆点 */
.step-tracker .num { 
    font-size: 40px; 
    font-weight: 900; 
    color: #e9ecef; 
    font-family: "DIN", sans-serif; 
    line-height: 1; 
    position: relative; 
    transition: 0.3s; 
    background: #f8f9fa; /* 与父背景色一致，遮挡虚线 */
    padding: 0 15px; 
    margin-bottom: 35px; /* 给下方的圆点留出绝对空间 */
    display: inline-block;
}

/* 核心修复：状态圆点精准骑在虚线上 */
.step-tracker .num::after { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: -22px; /* 距离数字底部的固定距离 */
    width: 16px; 
    height: 16px; 
    transform: translate(-50%, 50%); /* 确保圆点的几何中心压在线上 */
    background: #dcdcdc; 
    border-radius: 50%; 
    border: 3px solid #f8f9fa; 
    transition: 0.3s; 
}

.step-tracker .text { text-align: center; font-size: 18px; font-weight: bold; color: #888; line-height: 1.4; transition: 0.3s; padding-top: 15px;}
.step-tracker .text span { font-size: 13px; font-weight: normal; color: #aaa; display: block; margin-top: 5px; }

/* Tab 激活状态 */
.step-tracker .item.active .num { color: var(--red); transform: scale(1.1); }
.step-tracker .item.active .num::after { background: var(--red); box-shadow: 0 0 0 4px rgba(220,38,38,0.15); }
.step-tracker .item.active .text { color: #222; }
.step-tracker .item.active .text span { color: var(--red); }

/* Tab 面板内容与动画 */
.step-info-box { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); margin-top: 20px; overflow: hidden; min-height: 400px; }
.step-info-box .item { display: flex; }
.step-info-box .img { width: 45%; }
.step-info-box .img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 400px;}
.step-info-box .text-list { width: 55%; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 25px; }
.step-info-box .text-item { position: relative; padding-bottom: 20px; border-bottom: 1px dashed #eaeaea; }
.step-info-box .text-item:last-child { border-bottom: none; padding-bottom: 0; }
.step-info-box .text-item .title { font-size: 18px; font-weight: bold; color: var(--red); margin-bottom: 8px; display: flex; align-items: center; }
.step-info-box .text-item .title::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); border-radius: 50%; margin-right: 10px; }
.step-info-box .text-item .intro { color: #555; font-size: 14px; line-height: 1.6; padding-left: 16px; }

.fade-in { animation: fadeIn 0.5s ease-in-out; }
.hide { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Tab 激活状态 */
.step-tracker .item.active .num { color: var(--red); transform: scale(1.1); }
.step-tracker .item.active .num::after { background: var(--red); box-shadow: 0 0 0 4px rgba(220,38,38,0.2); }
.step-tracker .item.active .text { color: #222; }
.step-tracker .item.active .text span { color: var(--red); }

/* Tab 面板内容 */
.step-info-box { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); margin-top: 40px; overflow: hidden; }
.step-info-box .item { display: flex; }
.step-info-box .img { width: 45%; }
.step-info-box .img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 400px;}
.step-info-box .text-list { width: 55%; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 25px; }
.step-info-box .text-item { position: relative; padding-bottom: 20px; border-bottom: 1px dashed #eaeaea; }
.step-info-box .text-item:last-child { border-bottom: none; padding-bottom: 0; }
.step-info-box .text-item .title { font-size: 18px; font-weight: bold; color: var(--red); margin-bottom: 8px; display: flex; align-items: center; }
.step-info-box .text-item .title::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); border-radius: 50%; margin-right: 10px; }
.step-info-box .text-item .intro { color: #555; font-size: 14px; line-height: 1.6; padding-left: 16px; }

/* 修复原版生硬切换，加入渐变动画 */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
.hide { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 快捷联系条 */
.service-contact-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 25px 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-top: 40px; border: 1px solid #f0f0f0; }
.contact-item { display: flex; align-items: center; gap: 15px; }
.contact-item .icon img { width: 35px; height: auto; }
.contact-item .text { display: flex; flex-direction: column; }
.contact-item .text span { font-size: 12px; color: #888; margin-bottom: 3px; }
.contact-item .text b, .contact-item .text b a { font-size: 16px; color: #222; text-decoration: none; }
.action-buttons { display: flex; gap: 15px; }
.btn-outline, .btn-solid { padding: 0 25px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.3s; text-decoration: none; }
.btn-outline { border: 1px solid var(--red); color: var(--red); background: transparent; }
.btn-outline:hover { background: rgba(220,38,38,0.05); }
.btn-solid { background: var(--red); color: #fff; border: 1px solid var(--red); box-shadow: 0 4px 15px rgba(220,38,38,0.2); }
.btn-solid:hover { background: #c91818; border-color: #c91818; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220,38,38,0.3); }

/* ================== 3. 核心增值服务模块 ================== */
.service-modules-box { position: relative; padding: 100px 0; overflow: hidden; background: #000; }
.service-modules-box .bg-overlay { position: absolute; inset: 0; z-index: 1; }
.service-modules-box .bg-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(1, 87, 41, 0.85); /* 品牌绿深色遮罩 */ }
.service-modules-box .bg-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.relative-z { position: relative; z-index: 2; }
.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.module-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 40px 30px; text-align: center; color: white; backdrop-filter: blur(5px); transition: 0.3s; display: flex; flex-direction: column; align-items: center; }
.module-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); transform: translateY(-10px); }
.module-card .icon { height: 70px; margin-bottom: 25px; }
.module-card .icon img { height: 100%; width: auto; object-fit: contain; }
.module-card .title { font-size: 22px; font-weight: bold; margin-bottom: 20px; color: #fff; }
.module-card .intro ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.module-card .intro li { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 10px; position: relative; padding-left: 15px; }
.module-card .intro li::before { content: ""; width: 5px; height: 5px; background: var(--red); border-radius: 50%; position: absolute; left: 0; top: 9px; }

/* ================== 4. 荣誉资质 (复用模块美化) ================== */
.about-honor { 
    background-color: #f8f9fa; /* 使用浅灰底色与上下白色模块区分 */
}
.honor-layout { 
    display: grid; 
    grid-template-columns: 1fr 1.2fr; 
    gap: 60px; 
    align-items: center; 
}
.honor-content { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
    margin-top: 30px; 
}
.honor-content .cert-item h4 { 
    font-size: 20px; 
    color: #222; 
    font-weight: bold; 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center; 
}
.honor-content .cert-item h4::before { 
    content: ""; 
    display: inline-block; 
    width: 4px; 
    height: 16px; 
    background: var(--red); 
    margin-right: 12px; 
    border-radius: 2px; 
}
.honor-content .cert-item p { 
    color: #555; 
    font-size: 15px; 
    line-height: 1.8; 
    margin: 0; 
}
.honor-img { 
    position: relative; 
}
.honor-img img { 
    width: 100%; 
    border-radius: 12px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
    display: block; 
}

/* ================== 荣誉资质：移动端响应式 ================== */
@media (max-width: 1199px) {
    .honor-layout { gap: 40px; }
}

@media (max-width: 768px) {
    .honor-layout { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    .honor-img { 
        order: -1; /* 手机端让荣誉墙图片排在文字上方，视觉更直观 */
        margin-bottom: 20px; 
    }
    .honor-content .cert-item h4 { 
        font-size: 18px; 
    }
}


/* ============================================================
   移动端响应式极致优化
   ============================================================ */
@media (max-width: 1199px) {
    .philosophy-layout { grid-template-columns: 1fr; gap: 40px; }
    .service-contact-bar { flex-direction: column; gap: 20px; align-items: stretch; }
    .action-buttons { justify-content: center; }
    .step-tracker .text { font-size: 15px; }
}

@media (max-width: 768px) {
    .service-section { padding: 60px 15px; }
    .modern-section-title .watermark { font-size: 40px; top: -10px; width: 100%; text-align: center !important; left: 50% !important; transform: translateX(-50%) !important; }
    .modern-section-title .title { font-size: 26px; }
    .modern-section-title { text-align: center !important; }
    .modern-section-title .title-line { margin: 15px auto 0 !important; }

    /* 理念网格单列 */
    .core-values-grid { grid-template-columns: 1fr; }

    /* 流程 Tab 折叠 */
    .step-tracker { padding-bottom: 30px; }
    .step-tracker .text { font-size: 14px; }
    .step-tracker .text span { display: none; /* 手机端隐藏小字，保证不挤 */ }
    
    .step-info-box .item { flex-direction: column; }
    .step-info-box .img { width: 100%; }
    .step-info-box .img img { min-height: 200px; height: 250px; }
    .step-info-box .text-list { width: 100%; padding: 30px 20px; gap: 20px;}

    .contact-item { flex-direction: column; text-align: center; }
    
    /* 核心模块折叠 */
    .modules-grid { grid-template-columns: 1fr; gap: 20px; }
    .module-card { padding: 30px 20px; }
}




.contact-buy .title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 2rem;
}

._404_text {
    font-size: 30px;
    font-weight: bold;
    margin-top: 2rem;
}

._404-icon {
    width: 200px;
}

.empty-data {
    margin-top: 2rem;
}

.pagination {
    margin-top: 2rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
}

/* ============================================================
   1. 侧边悬浮联系栏 - 外层整体容器
   ============================================================ */
#r-info {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 电话和返回顶部之间的清爽间隙 */
}

/* 红色联系方式主栏 */
#r-info .contact-bar {
    background: var(--red);
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

#r-info .Sin {
    position: relative;
}

/* ============================================================
   2. 触发按钮区域 (小巧精致化)
   ============================================================ */
#r-info .a {
    display: flex;
    width: 56px; 
    height: 56px; 
    flex-direction: column;
    cursor: pointer;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
    font-size: 12px;
    color: #fff;
    justify-content: flex-end; 
    padding-bottom: 8px;
    background-repeat: no-repeat;
    background-position: center 10px; 
    background-size: 20px; 
    text-decoration: none;
    transition: background-color 0.3s;
}

#r-info .Sin:last-child .a {
    border-bottom: none;
}

/* 悬停时按钮底色微弱加深 */
#r-info .Sin:hover .a {
    background-color: rgba(0, 0, 0, 0.1);
}

/* 图标替换 (请确保这里的图片路径与你网站对应) */
#r-info .s1 .a { background-image: url("/wp-content/themes/xzk/assets/images/icon/bottom_email_white.webp"); }
#r-info .s2 .a { background-image: url("/wp-content/themes/xzk/assets/images/icon/bottom_weixin_white.webp"); }
#r-info .s3 .a { background-image: url("/wp-content/uploads/2025/11/1762158932-7b95a2ac8713cd7.webp"); }

/* ============================================================
   3. 悬浮弹出的卡片区 (白底带阴影的高级气泡)
   ============================================================ */
#r-info .box {
    position: absolute;
    right: 70px; /* 弹出气泡距离侧边按钮的距离 */
    top: 50%;
    /* 初始状态：靠右偏移且透明，用于实现滑出动画 */
    transform: translateY(-50%) translateX(15px); 
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* 气泡右侧的指示小三角 */
#r-info .box::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}

/* 鼠标悬停，平滑滑出 */
#r-info .Sin:hover .box {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 纯文本类卡片 (邮箱、电话) */
#r-info .box.text-box {
    padding: 12px 18px;
    white-space: nowrap;
}

#r-info .box a {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
}

#r-info .box a:hover {
    color: var(--red);
}

/* 二维码类卡片 */
#r-info .box.qr-box {
    padding: 10px;
    text-align: center;
    min-width: 130px;
}

#r-info .Pic img {
    display: block;
    margin: 0 auto;
}

#r-info .box.qr-box p {
    color: #666;
    margin: 0;
    padding-top: 5px;
    font-size: 12px;
}

/* ============================================================
   4. 融入侧边栏体系的“返回顶部”按钮
   ============================================================ */
.back-to-top {
    position: relative !important; 
    bottom: auto !important;
    right: auto !important;
    width: 56px; 
    height: 56px; 
    border-radius: 8px 0 0 8px; 
    background: #333; /* 用深灰色区分，更显高级 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
}

/* 页面向下滚动后显示 */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* 悬停动画：向左轻微滑出，变红统一视觉 */
.back-to-top:hover {
    background-color: var(--red);
    transform: translateX(-3px); 
}

.back-to-top::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("/wp-content/uploads/2025/11/1762321850-67079354689de03.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.3s;
}

/* 悬停时箭头向上跳动 */
.back-to-top:hover::before {
    transform: translateY(-3px);
}

/* ============================================================
   5. 移动端 (≤ 768px) 特殊处理
   ============================================================ */
@media (max-width: 768px) {
    /* 手机端隐藏厚重的联系方式卡片 */
    #r-info .contact-bar {
        display: none;
    }
    
    /* 调整外层容器到底部右侧，仅展示返回顶部 */
    #r-info {
        top: auto;
        bottom: 20px;
        right: 15px;
        transform: none;
    }

    /* 手机端把返回顶部变回独立的小圆点 */
    .back-to-top {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
    }
    
    /* 取消移动端的 hover 偏移效果 */
    .back-to-top:hover {
        transform: none; 
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}

.fade-in {
    animation: fadeIn 0.8s ease-in;
}

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




.grid.grid-cols-1.md\:grid-cols-2.gap-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
    grid-row-gap: 2rem;
}

.border-b.border-gray-200.pb-4 {
    display: grid;
    gap: 1rem;
}


.product-contents .product-item, .product-related-products .product-item {
    grid-template-columns:  auto auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.product-contents .product-item .product-img, .product-related-products .product-item .product-img {
    border-bottom: 3px solid #abc8b8;
    position: relative;
    width: 100%;
}

.product-contents .product-item .product-img::before, .product-related-products .product-item .product-img::before {
    content: "";
    display: block;
    padding-top: 85.454545%;
}

.product-contents .product-item .product-img img, .product-related-products .product-item .product-img img {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.product-contents .product-item .product-img img:nth-child(2), .product-related-products .product-item .product-img img:nth-child(2) {
    opacity: 0;
}

.product-contents .product-item .product-img:hover img:nth-child(2), .product-related-products .product-item .product-img:hover img:nth-child(2) {
    opacity: 1;
}

.product-contents .product-item .product-img:hover img:nth-child(1), .product-related-products .product-item .product-img:hover img:nth-child(1) {
    opacity: 0;
}

.product-contents .product-item .product-title, .product-related-products .product-item .product-title {
    color: black;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.7rem 0;
    border-bottom: 1px solid #dcdcdc;
}

.product-contents .product-item .product-title a:hover, .product-related-products .product-item a:hover {
    color: var(--red);
    text-decoration: underline;
}

.productpage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding-bottom: 0.5rem;
}


.product-contents {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .product-specs {
            margin: 10px;
            color: #666;
        }
        .spec-item {
            display: inline-block;
            margin-right: 15px;
            padding: 2px 8px;
            background-color: #f0f0f0;
            border-radius: 4px;
            font-size: 14px;
        }
        .spec-item:last-child {
            margin-right: 0;
        }
        .core-characteristics {
            margin: 10px;
            color: #666;
        }
        .application-scenarios {
            margin: 10px;
            color: #666;
        }
        .inquiry-btn {
            display: inline-block;
            padding: 8px 15px;
            background-color: #e53e3e;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .inquiry-btn:hover {
            background-color: #cc0000;
        }

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

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



.feature-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.feature-item {
    background: #f5f5f5;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

.feature-item h3 {
    color: #333;
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 600;
}

.feature-item p {
    color: #666;
    line-height: 1.6;
    font-size: 14px;
}











/*====================================    以下是media兼容调整  ==================================================*/


/*  大屏幕微调整    */
@media (min-width: 1440px) {
    .wrapper {
        width: 1440px;
    }

    .header-nav .header-nav-container .main-nav > ul {
        gap: 35px;
        padding-right: 35px;
    }

    .index-about {
        margin-top: 3rem;
    }

    .index-about .intro {
        margin-top: 30px;
    }

    .count-row {
        margin-top: 60px;
        padding: 40px 0;
    }

    .count-row img {
        margin: 15px 20px 0px 0px;
    }

    .index-services .sl .item {
        margin: 30px 25px;
    }

    .index-services .sl .item img {
        height: 59px;
        width: auto;
    }

    .index-services .sr {
        font-size: 18px;
        gap: 20px;
    }

    .index-factory .left {
        width: 350px;
    }

    .index-factory .left .title {
        margin-top: 3rem;
    }

    .index-factory .left .intro {
        margin-top: 1.5rem;
        line-height: 1.5;
    }

    .index-factory .left .list .item {
        height: 4rem;
    }

    .index-factory .left .list .hover::after {
        top: 1.7rem;
        right: 2rem;
    }

    .index-factory .right .rb {
        height: 8rem;
    }

    .index-factory .right .rb.hide {
        display: none;
    }

    .index-factory .right .title {
        margin-top: 1rem;
        margin-left: 3rem;
    }

    .index-factory .right .intro {
        margin-left: 3rem;
        margin-top: 1rem;
        line-height: 1.5;
    }

    .index-factory .right .btn {
        margin-left: 4rem;
    }

    .index-industry {
        margin-top: 4rem;
    }

    .index-industry .list {
        margin-top: 3rem;
    }

    .index-industry .list .industry-intro .text {
        margin-top: 1rem;
    }

    .index-industry .industry-icon .item {
        width: 11rem;
        height: 9rem;
    }

    .index-industry .industry-icon .item img {
        top: 2rem;
    }

    .index-industry .industry-icon .item .caption {
        top: 7rem;
    }



    .index-news .item img {
        margin-bottom: 1rem;
    }

    .index-news .item a {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.6;
    }

    .index-news .intro {
        font-size: 15px;
    }

    .index-news .view {
        width: 80%;
    }

    .index-news .view .btn {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 30px;
    }

    .index-news .view .date {
        font-size: 16px;
    }

    .index-videos .item .title {
        font-weight: 600;
    }

    .contact-way-icon .qrcode-icon-box {
        width: 75%;
    }

    /*footer*/

    .footer-logo {
        padding: 2.2rem 0;
    }

    .footer-links {
        gap: 4rem;
    }

    .footer-title {
        padding: 1rem 0;
    }

    .footer-links .item {
        padding: 0.2rem 0;
    }

    .footer-links a, .footer-contact {
        font-size: 15px;
    }

    .footer-contact b {
        padding-top: 10px
    }

    .footer-contact .item {
        padding: 0.2rem 0;
    }

    .footer-consultation {
        width: 23%;
    }

    .index-contact-popup {
        width: 1250px;
    }

    .index-contact-popup .text-1 {
        font-size: 20px;
    }

    .index-contact-popup .text-2 {
        line-height: 1.8;
        color: #333333;
    }

    .index-contact-popup .text-3 span {
        line-height: 2rem;
    }

    .index-contact-popup .contact-right .form {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .index-contact-popup .contact-right .form .item5 {
        height: 8rem !important;
    }

    .index-contact-popup .contact-right .form input, .index-contact-popup .contact-right .form textarea {
        font-size: 15px;
    }


    /* 悬停效果 */
    .index-contact-popup .close-btn:hover {
        /*transform: scale(1.1);*/
        /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);*/
    }

    /* 激活效果 */
    .index-contact-popup .close-btn:active {
        transform: scale(0.95);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* products */
    .product-banner .banner-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
    }

    .product-banner h1 {
        margin-top: 0rem;
    }

    .product-content .product-right .product-item .product-data, .product-related-products .product-item .product-data {
        line-height: 1.2rem;
    }

    .about-xzk .tabs-content .tab-1 .title {
        margin-top: 1rem;
    }

    .about-xzk .tabs-content .tab-1 .intro {
        line-height: 1.8;
    }

    .about-xzk .tabs-content .tab-1 .intro-2 .item, .about-xzk .tabs-content .tab-3 .intro .item {
        line-height: 1.8rem;
    }

    .about-xzk .tabs-content .tab-2 .text {
        line-height: 1.8rem;
    }

    .about-xzk .tabs-content .tab-3 .item-4 {
        padding: 2rem 0 2rem 2rem;
    }

    .about-xzk .tabs-content .tab-4 .text .item {
        border-bottom: 1px dashed #dbdbdb;
    }

    .about-xzk .tabs-content .tab-4 .text .intro {
        line-height: 1.8rem;
        margin-top: 0.5rem;
    }

    .about-xzk .tabs-content .tab-5 .text .title {
        color: var(--red);
        font-size: 42px;
        line-height: 1.6;
    }

    .leave-message .title {
        color: var(--red);
    }

    .leave-message .intro .item-title {
        padding-left: 40px;
    }

    .leave-message .intro .item-text {
        color: var(--light-black);
        padding-left: 40px;
        margin-top: 1rem;
        line-height: 1.6;
    }

    .message-box {
        margin-top: 1rem;
    }

    .message-box .contact .text-box .text {
        font-size: 17px;
    }

    .message-box .message .form {
        grid-gap: 1.5rem 1.5rem;
    }

    .message-box .message .form input, .message-box .message .form textarea {
        font-size: 15px;
    }

    .message-box .message .form button {
        font-size: 16px;
        font-weight: 600;
    }


    /*产品详情*/
    .product-summary {
        padding: 3rem 0;
    }

    .product-summary .text .btn-list a {
        padding: 0 1.8rem;
        height: 45px;
        line-height: 45px;
        font-size: 17px;
    }

    .product-detail-content .detail-box {
        line-height: 2;
    }

    .product-application-case .logo {
        margin: 1rem 1rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .core-strengths-show .text .li {
        margin-top: 1rem;
        line-height: 1.6;
        font-size: 16px;
    }

}

/*  大屏调整结束    */


/*  手机端调整    */
@media (max-width: 768px) {
    .wrapper {
        width: 100%;
    }

    .main {
        padding: 0 1rem;
        /*overflow: hidden;*/
    }

    .flex {
        display: flex;
        flex-wrap: wrap;
    }

    /*  首页手机端调整    */
    .header-top {
        display: none;
    }

    .header-contact {

    }

    .header-contact .search {
        display: none;
    }

    .header-nav .h-get-price, .product-detail-nav .get-price-box {
        display: none;
    }

    .index-contact-popup {
        width: 450px;
        top: 7rem;
    }

    .index-contact-popup .contact-left {
        display: none;
    }

    .header-nav-row {
        height: auto;
    }

    .pc-nav {
        display: none;
    }

    .mobile-nav-list {
        display: none;
        background-color: white;
        position: fixed;
        width: calc(100% - 1rem);
        padding: 1rem 0;
        box-sizing: border-box;
    }

    .header-nav-fixed {
        width: auto;
    }

    .mobile-nav .wrapper {
        position: relative;
    }

    .mobile-nav .wrapper .h-logo {
        margin-left: 0.5rem;
        width: 130px;
    }

    .header-nav .header-nav-container .h-nav .main-nav > ul:after {
        width: 0;
    }

    .header-nav .header-nav-container .main-nav > ul {
        font-size: 16px;
        gap: 0;
        padding: 0 10px;
        justify-content: space-between;
    }

    .home .header-nav .header-nav-container .main-nav .nav-list .menu-item a {
        color: black;
    }

    .menu-button .bar:nth-of-type(3) {
        margin-bottom: 0px;
    }

    .bar {
        position: relative;
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: var(--light-black);
        border-radius: 10px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .cross .bar:nth-of-type(1) {
        -webkit-transform: translateY(15px) rotate(-45deg);
        -ms-transform: translateY(15px) rotate(-45deg);
        transform: translateY(8px) rotate(-45deg);
    }

    .cross .bar:nth-of-type(2) {
        opacity: 0;
    }

    .cross .bar:nth-of-type(3) {
        -webkit-transform: translateY(-15px) rotate(45deg);
        -ms-transform: translateY(-15px) rotate(45deg);
        transform: translateY(-8px) rotate(45deg);
    }

    .cross:hover .bar:nth-of-type(1) {
        -webkit-transform: translateY(13.5px) rotate(-40.5deg);
        -ms-transform: translateY(13.5px) rotate(-40.5deg);
        transform: translateY(8px) rotate(-45deg);
    }

    .cross:hover .bar:nth-of-type(2) {
        opacity: 0.1;
    }

    .cross:hover .bar:nth-of-type(3) {
        -webkit-transform: translateY(-13.5px) rotate(40.5deg);
        -ms-transform: translateY(-13.5px) rotate(40.5deg);
        transform: translateY(-8px) rotate(45deg);
    }


    .menu-item-has-children::after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-left: 8px;
        font-size: 1em;
        position: absolute;
        right: 1rem;
        top: 0;
    }

    .menu-item-has-children.menu-open::after {
        transform: rotate(180deg);
    }

    .mobile-nav-list .h-nav .nav-list {
        flex-direction: column;
        padding-left: 1rem;
        font-size: 18px;
        font-weight: 500;
    }

    .mobile-nav-list .h-nav .nav-list li {
        line-height: 48px;
        position: relative;
    }

    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding: 10px 0;
    }

    .sub-menu a {
        margin-left: 1rem;
        font-size: 16px;
    }

    .mobile-nav-list .nav-list > li.menu-open .sub-menu {
        display: flex;
        flex-direction: column;
    }




    .count-box.flex {
        -ms-flex: 1;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: initial;
        -ms-flex: initial;
        flex: initial;
        width: auto;
        padding: 5px 5px;
        justify-content: center;
    }

    .count-box .text .count-line {
        display: none;
    }

    .count-row .wrapper.flex {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
    }

    .count-row img {
        height: 40px;
    }

    .count-num {
        font-size: 24px;
    }

    .count-title {
        font-size: 12px;
    }

    .about-d {
        height: 76px;
    }

    .index-products {
        background-color: #ffffff;
        padding: 3rem 0;
    }

    .index-products .products .item {
        padding: 15px 5px;
        width: 100%;
    }

    .index-products .products .header {
        padding: 0 0 1rem 0;
    }

    .index-products .products .header .tl {
        font-size: 16px;
    }

    .index-products .products .intro {
        margin-top: 0;
    }

    .index-products .products .intro .title::after {
        left: 0;
        right: unset;
        top: 50%;
        transform: translateY(-50%);
    }

    .index-products .products .header .tr {
        display: none;
    }

    .index-products .products .intro img {
        width: calc(50% - 10px);
        height: auto;
    }

    .index-products .products .intro .text {
        padding-top: 0;
        width: calc(50% - 10px);
        display: block;
    }

    .index-products .products .intro .title {
        padding-right: 0;
        padding-left: 1rem;
        font-size: 14px;
        justify-content: flex-start;
    }

    .index-products .products .item .dot {
        display: none;
    }

    .index-products .products .dash-line {
        display: none;
    }

    .index-services.flex.wrapper {
        padding: 10px 0;
    }

    .index-services .sl .item {
        margin: 10px 0px;
        font-size: 12px;
        width: calc(25% - 10px);
    }

    .index-services .sr {
        gap: 20px;
        margin-top: 10px;
        font-size: 13px;
    }

    .index-services .sr .btn-1 {
        padding: 10px 10px;
        border-radius: 3px;
    }

    .index-services .sr .btn-2 {
        padding: 10px 10px;
        border-radius: 3px;
    }

    .index-services .sl.flex {
        display: flex;
        justify-content: center;
    }

    .index-services .sl .item img {
        height: 45px;
    }

    .index-factory {
        display: none;
    }

    .index-industry .list {
        margin-top: 0.5rem;
    }

    .index-industry .list .xzk-intro {
        display: none;
    }

    .index-industry .list .industry-intro {
        display: none;
    }

    .index-industry .industry-icon {
        position: unset;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .index-industry .industry-icon .item {
        width: auto;
        padding: 0;
    }

    .index-industry .industry-icon .item .caption {
        width: auto;
        padding: 0;
        font-size: 13px;
    }



    .index-news-videos .wrapper {
        grid-template-columns: 1fr;
        gap: 1rem 0;
    }

    .index-news-videos .item2 {
        display: none;
    }

    .index-news .item-1::after {
        height: 2px;
    }


    .index-news {
        grid-template-columns: none;
    }

    .index-news .item {
        min-height: auto;
    }

    .index-news .intro {
        display: none;
    }

    .index-news .view {
        bottom: 0;
    }

    .index-news .view .btn {
        display: none;
    }

    .index-videos {

    }

    .index-videos .item {
        width: 100%;
        box-sizing: border-box;
    }

    /* products */
    .product-banner button {
        display: none;
    }


    .product-left {
        display: none;
    }

    .product-content .product-right .product-list {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        grid-gap: .5rem;
    }

    .product-content .product-right .category-intro {
        grid-column: 1 / span 2;
    }

    .product-content .product-right .product-category-intro .title {
        font-size: 18px;
    }

    .product-content .product-right .product-category-img {
        display: none;
    }

    .product-content .product-right .product-item, .product-related-products .product-item {
        display: block;
    }

    .product-content .product-right .product-item .product-data, .product-related-products .product-item .product-data {
        padding: 0.5rem 0 0.5rem 1rem;
        border-right: none;
    }

    .product-content .product-right .product-item .product-btn, .product-related-products .product-item .product-btn {
        display: flex;
        margin: 0 0 0.5rem;
        justify-content: center;
        flex-direction: row;
    }

    .about-xzk.wrapper {
        display: none;
    }

    .leave-message .title {
        font-size: 22px;
        padding: 0 1rem;
        text-align: center;
    }

    .leave-message .intro {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1rem;
    }

/* ============================================================
   细节优化 2：中小屏幕强制左右留白 (防贴边)
   ============================================================ */
@media (max-width: 1199px) {
    /* 平板端：给留言板整体增加左右安全距离 */
    .modern-message-box {
        margin-left: 20px !important;
        margin-right: 20px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 768px) {
    /* 手机端：给留言板和关于新中科的内容区增加留白 */
    .modern-message-box {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
    
    .about-xzk .modern-card {
        margin-left: 15px !important;
        margin-right: 15px !important;
        /* 因为挤出了 margin，需要将原本右下的圆角补全 */
        border-radius: 8px !important; 
    }
}

    /* products detail */
    .breadcrumb-content {
        background: none;
        padding-left: 10px;
        line-height: 1.8;
        font-size: 12px;
    }

    .product-summary .thumb .thumb-video {
        width: 20%;
    }

    .product-summary .text .title {
        font-size: 22px;
    }

    .product-summary .text .params {
        margin: 1rem 0;
        gap: 0.5rem;
    }

    .product-summary .text .btn-list {
        margin-top: 0;
    }

    .product-summary .text .btn-list a {
        padding: 0 0.5rem;
    }

    .product-detail-nav {
        display: none;
    }

    .product-detail-content .detail-box {
        line-height: 1.6;
    }

    .product-detail-content ol {
        padding-inline-start: 20px;
    }

    .product-detail-content ul {
        padding-left: 0;
    }

    .product-application-case .case-list {
        display: block;
    }

    .product-related-products .product-list {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .leave-message {
        margin-top: 0rem;
    }

    /* about移动端 */
    .single-banner .wrapper {
        display: block;
    }

    .single-banner .banner-right {
        display: none;
    }

    .single-banner .text {
        text-align: center;
        margin: 0 0.5rem;
    }

    .single-page-nav {
        display: none;
    }

    .about-container .xzk-row {
        padding: 2rem 0;
        display: block;
    }

    .xzk-row .text {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .about-count-box {
        margin-top: 1rem;
        grid-row-gap: 1rem;
    }

    .core-strengths-show {
        display: block;
    }

    .core-strengths-show .item-left {
        grid-gap: 0.5rem 0.5rem;
        width: 100%;
    }

    .core-strengths-show .item-right {
        gap: 0;
        width: 100%;
    }

    .core-strengths-show .item-right .row {
        margin-top: 0.5rem;
    }

    .core-strengths-show .item-right .item-1 {
        width: 100%;
    }

    .core-strengths-show .item-right .item-2 {
        display: none;
    }


    .about-leadership-list .item-list {
        display: block;
    }

    .about-leadership-list .item-list .item:not(:last-child)::after {
        display: none;
    }

    .about-leadership-list .item-blank {
        display: none;
    }

    .about-rd .about-team {
        grid-template-columns: none;
    }

    .about-rd .about-team .item-2 {
        display: none;
    }

    .about-rd .about-team .item-3 {
        display: none;
    }

    .about-rd .about-team .item-6 {
        display: none;
    }

    .about-group-structure-list .item-list .company-title {
        font-size: 12px;
    }

    .about-honor .wrapper {
        display: block;
    }

    .about-honor .text {
        width: 100%;
    }

    .about-honor .text .title {
        font-size: 18px;
    }

    .about-global-reach .wrapper {
        display: block;
    }

    .about-global-reach .text {
        width: 100%;
    }

    .about-global-reach .img-box {
        width: 100%;
    }

    /* 发展历程 */
    .timeline {
        display: none;
    }

    .timeline-text {
        max-width: 100%;
    }

    /* quality */
    .quality-list {
        display: block;
    }

    .quality-list .item {
        padding: 0;
        margin-bottom: 1rem;
    }

    .quality-list .item:not(:last-child)::after {
        display: none;
    }

    .end-to-end-group {
        display: block;
    }

    .end-to-end-group .sn {
        display: none;
    }

    .end-to-end .item-text {
        margin-bottom: 1rem;
    }

    .social-header-row .fitImage {
        display: none;
    }


    .social-header-row .social-text {
        position: inherit;
        width: 90%;
    }

    .social-green .item-list {
        display: block;
    }

    .social-planet .img {
        margin-top: 1rem;
    }

    .social-planet .img .pos {
        position: inherit;
    }

    .social-planet .img .pos .text-list {
        padding: 1rem;
        width: auto;
        gap: 1rem;
    }

    .social-emp .info-box {
        display: block;
    }

    .social-emp .info-box .text-list {
        padding: 0 1rem;
        width: auto;
    }

    .social-emp .info-box .text-list .item:hover::before {
        display: none;
    }

    .social-emp .info-box .text-list .item:hover::after {
        display: none;
    }

    .social-footer-box .item-list {
        gap: 1rem;
        margin: 2rem 0.5rem;
    }

    .social-footer-box .fitImage {
        height: 450px;
    }

    /* service */
    .service-header-box .gray-text {
        display: none;
    }

    .service-header-box .red-text::after {
        display: none;
    }

    .service-header-box .title-box {
        width: 100%;
        padding: 1rem;
    }

    .service-header-box .red-text {
        font-size: 20px;
    }

    .service-process .end-to-end .step {
        gap: 1rem;
    }

    .service-process .end-to-end .step .item {
        justify-content: flex-start;
    }

    .service-process .end-to-end .step-info-box .item {
        display: block;
    }


    .service-process .end-to-end .step-info-box .item .img {
        width: auto;
    }

    .service-process .end-to-end .step-info-box .text-list {
        padding: 1rem;
        width: auto;
    }

    .service-process .end-to-end .step-info-box .text-list .intro {
        font-size: 15px;
    }

    .service-process .contact {
        padding: 1rem;
        display: block;
    }

    .service-process .contact .email, .service-process .contact .phone {
        margin-bottom: 1rem;
    }

    .service-process .contact .button {
        font-size: 15px;
        padding: 0.6rem 1rem;
    }

    .service-value-box .fitImage {
        height: 350px;
    }

    .service-value-box .title {
        margin-top: 3rem;
    }

    .service-value-box .item-list {
        gap: 1rem;
        margin: 2rem 1rem;
    }

    .service-value-box .item-list .item {
        height: 13rem;
    }

    .contact-buy .title {
        font-size: 20px;
    }

    .contact-container .contact-buy .wrapper {
        flex-wrap: wrap;
    }

    .contact-container .contact-buy .buy .title {
        text-indent: 0;
    }

    .about-honor {
        padding: 3rem 1rem;
    }

    .customer-feedback .title {
        font-size: 20px;
    }

    .customer-feedback .customer-feedback-group {
        display: block;
    }


    /* news */
    .news-cat {
        height: 6rem;
    }

    .news-list .news-item {
        display: block;
        padding: 1rem 0;
    }

    .news-list .news-item img {
        display: none;
    }

    .news-detail-summary h1 {
        font-size: 20px;
    }

    .news-detail-pagination .cat {
        display: none;
    }

    .news-detail-pagination {
        padding: 1rem 0;
    }

    .news-detail-pagination .prev, .news-detail-pagination .next {
        margin: 1rem;
    }


    /* contact */
    .contact-leave-message .wrapper {
        display: block;
    }

    .contact-leave-message .keep {
        width: 100%;
        padding: 1rem;
    }

    .contact-leave-message .keep .title {
        font-size: 20px;
    }

    .contact-leave-message .keep .title br {
        display: none;
    }

    .contact-leave-message .keep .sub-title {
        margin-top: 1rem;
    }

    .contact-leave-message .keep .intro {
        margin-top: 1rem;
    }

    .contact-leave-message .message .form {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }

    .contact-way .wrapper {
        display: block;
    }

    .contact-way .wrapper > div {
        margin-bottom: 2rem;
    }

    .contact-way-icon .fitImage {
        height: 300px;
    }

    .contact-way-icon .qrcode-icon-box .qrcode {
        display: none;
    }

    .contact-way-icon .qrcode-icon-box .icons {
        width: 100%;
    }

    .contact-way-icon .qrcode-icon-box .icons .item {
        height: 6rem;
    }

    .contact-container .contact-buy .downloads, .contact-container .contact-buy .faq {
        width: 50%;
    }

    .contact-container .contact-buy .buy {
        width: 100%;
    }


    /* case */
    .case-container .case-list {
        grid-template-columns: auto;
    }

    .case-partner .title {
        font-size: 20px;
    }

.case-container .case-project-info .info-box {
    display: block;
}

.case-container .case-project-info .info-list {
    grid-gap: 0.5rem;
}

.case-container .case-project-info .info-item {
    width: 100px;
}

.case-container .case-project-info .info-box .img {
    display: none;
}

    .case-partner .logo-list {
        margin: 1rem;
        justify-content: center;
    }

    .case-container .case-box .wrapper {
        display: block;
        padding: 1rem;
    }

    .case-container .case-box .case-title {
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .case-container .case-box .case-button .button {
        padding: 0.5rem 1rem;
    }

    .case-container .case-project-info {
        padding: 1rem;
    }

    .case-container .case-common-title {
        margin-top: 1.5rem;
    }

    .case-container .case-project-info .info-img {
        margin-top: 1rem;
    }

    .case-project-overview {
        padding: 1rem;
    }

.related-product-video .video-list {
    display: block;
}


    /* footer */
    .footer-logo {
        padding: 2rem 1rem;
    }

    .footer-logo .item-2 {
        display: none;
    }

    .footer-body {
        padding: 1.5rem 1rem 4rem;
    }

    .footer-consultation.flex {
        display: none;
    }

    .footer-copyright {
        padding: 1rem 1rem;
    }

    .footer-links::after {
        display: none;
    }

    #r-info {
        display: none;
    }

    .back-to-top {
        display: none;
    }

    .back-to-top.show {
        display: none !important;
    }


}