:root {
    --bg-white: #ffffff;
    --bg-dark: #0d1117;
    --accent-blue: #007aff;
    --text-light: #e6edf3;
    --text-black: #131313;
    --text-muted: #abadaf;
    --border-color: #21262d;
    --font-main: 'PingFang SC', 'Montserrat', sans-serif;
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-black-400: oklch(18.22% 0.00002 271.152);
    --bg-dark: #080d1a;
    --bg-dark: #080d1a;
    --hero-bg: #0b132b;
    --accent-teal: #19c5ce;
    --badge-bg: rgba(0, 210, 255, 0.12);
    --card-bg: #ffffff;
    --text-title: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --border-card: #e2e8f0;
    /* 卡片边框 */
    --border-card-hover: #0284c7;
    /* 悬浮边框（高亮科技蓝） */
    --icon-bg: #f0f9ff;
    /* 图标圆底颜色 */
    --brand-blue: #0284c7;
    /* 科技蓝 */
    --brand-blue-light: #e0f2fe;
    /* 淡蓝背景 */
    --brand-blue-border: #bae6fd;
    /* 浅蓝边框 */
    --primary-blue-light: #f0f9ff;
    --accent-cyan: #0369a1;
    --text-main: #0f172a;
    --text-sub: #475569;
    --text-muted: #64748b;
    /* 图标主色 */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    font-family: var(--font-main);
    background-color: var(--bg-white);
    color: var(--text-black);
    font-size: calc(100vw / 19.2);
}
body {
    font-size: 0.16rem;
    background: #f8fafc;
}
/* 1. 设置极细宽度 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
/* 2. 彻底隐藏箭头（包含单箭头、双箭头和拐角） */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
/* 3. 清除角落交叉区域（避免产生灰块） */
::-webkit-scrollbar-corner {
    background: transparent;
}
/* 4. 轨道背景透明 */
::-webkit-scrollbar-track {
    background: transparent;
}
/* 5. 滑块样式（绿色细线条） */
::-webkit-scrollbar-thumb {
    background-color: #5586e9;
    border-radius: 999px;
    min-height: 150px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #5586e9;
}
/* 针对下拉选择框进行样式替换 */
select {
    /* 1. 隐藏原生默认箭头 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 2. 引入精致的自定义 SVG 箭头，并设置位置 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    /* 调整箭头距离右侧的距离 */
    background-size: 14px;
    /* 调整箭头大小 */
    /* 3. 留出右侧内边距，防止文字与新箭头重叠 */
    padding-right: 36px;
    /* 确保指针样式统一 */
    cursor: pointer;
}
/* 消除 IE 的默认箭头 */
select::-ms-expand {
    display: none;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 60px, 0);
        transform: translate3d(0, 60px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -60px, 0);
        transform: translate3d(0, -60px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -60px, 0);
        transform: translate3d(0, -60px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.full-width {
    grid-column: span 2;
    background-color: #eef6ff;
    border-color: #d0e1fd;
}
body {
    overflow-x: hidden;
}
.bg-h {
    background: #f8fafc;
}
video {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.wow {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}
/* 确保 html 的滚动行为是 auto，否则会与 Lenis 冲突 */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}
/* --- 顶级导航栏样式 --- */
/* --- 导航栏基础样式（默认透明） --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    font-size: 0.1rem;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* 淡淡的边框线 */
    transition: background 0.3s ease, border 0.3s ease, backdrop-filter 0.3s ease;
}
/* --- 上滚激活状态（变白、带模糊、带阴影、文字变深） --- */
.site-header.scrolled-active {
    background: #fff;
    /* 变白 */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* 状态切换时的文字颜色适配 */
.site-header.scrolled-active .logo {
    color: #0d1117;
}
.site-header.scrolled-active .nav-list>li>a {
    color: #555;
}
.site-header.scrolled-active .nav-list>li:hover>a {
    color: #007aff;
}
.site-header.scrolled-active .arrow {
    color: #007aff;
}
.site-header.scrolled-active .nav-toggle span {
    background: #0d1117;
}
/* 手机端三道杠变黑 */
.site-header.scrolled-active .nav-list>li:hover>a {
    color: #007aff;
}
.header-container {
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
}
.logo-img {
    filter: brightness(0) invert(1);
    width: 215px;
    height: auto;
}
.cont-us {
    display: block;
    border: 1px solid #fff;
    padding: 0.2rem 0.3rem;
}
.scrolled-active .logo-img {
    filter: brightness(1);
}
/* 一级菜单 */
.nav-list {
    display: flex;
    align-items: center;
    gap: 55px;
}
.nav-list>edit,
.nav-list>li {
    position: relative;
}
.nav-list>li>a {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 0;
    color: #c9cdd1;
    ;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}
.nav-list>li:hover>a,
.nav-list>li>a.active {
    color: #fff;
}
.site-header .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.3s;
}
.nav-list>li:hover .arrow {
    border-top-color: #ffffff;
    transform: rotate(180deg);
}
.scrolled-active li:hover .arrow {
    border-top-color: #1766cd;
    transform: rotate(180deg);
}
/* 二级下拉菜单 */
.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 200px;
    background: rgb(18 29 44 / 71%);
    border-top: 2px solid #2f5fed;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown a {
    display: block;
    padding: 12px 20px;
    font-size: 16px;
    color: #a8d3ef;
    transition: all 0.3s;
}
.dropdown a:hover {
    background: rgba(0, 122, 255, 0.1);
    color: #fff;
    padding-left: 25px;
}
/* 手机端汉堡包按钮 (默认隐藏) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: #fff;
    transition: 0.3s;
}
/* --- 首屏重工业巨幕 --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
    z-index: 1;
}
/* 模拟钛金工业质感背景图 */
/* --- 首屏重工业视频巨幕 --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    overflow: hidden;
}
/* 视频容器与高级工业滤镜 */
.hero-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保视频完美裁剪填充，不拉伸变形 */
    /* 渐变遮罩：左侧深色便于看清文字，整体压暗突出高端暗黑工厂质感 */
}
/* 遮罩层：双重保障文字清晰度 */
.hero-video-wrap::after,
.video-container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(13, 17, 23, 0.8) 20%, rgba(13, 17, 23, 0.3) 70%);
}
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* 或者固定高度，如 500px */
    overflow: hidden;
}
.hero-content {
    max-width: 1640px;
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: clamp(30px, 5vw, 48px);
    margin-bottom: 30px;
    background: linear-gradient(to right, #9bc5ff 15%, #fff 30%, #9bc5ff 55%, #fff 80%, #9bc5ff 95%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textRun 5s linear infinite;
}
.hero-subtitle {
    font-size: clamp(18px, 2vw, 20px);
    color: #b4bdc9;
    margin-bottom: 40px;
    line-height: 1.6;
}
/* 按钮组件 */
.hero-buttons {
    display: flex;
    gap: 20px;
}
.hero-section .scrolldot {
    width: 23px;
    height: 40px;
    position: absolute;
    bottom: 50px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
    font-size: 14px;
    color: #fff;
    background: url(../images/banner-mouse.png) no-repeat -23px 0px;
    text-align: center;
    animation: nudgeMouse 1.6s linear infinite;
}
.hero-section .scrolldot:after,
.hero-section .scrolldot::before {
    content: "";
    position: absolute;
}
.hero-section .scrolldot::before {
    width: 23px;
    height: 40px;
    background: url(../images/banner-mouse.png) no-repeat 0px 0px;
    -webkit-animation: colorSlide 1.6s linear infinite;
    animation: colorSlide 1.6s linear infinite;
    top: 0;
    left: 0;
}
.hero-section .scrolldot:after {
    background-color: #ffffff;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 1.6s linear infinite;
    animation: trackBallSlide 1.6s linear infinite;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
@keyframes colorSlide {
    0% {
        height: 0;
    }
    90% {
        height: 40px;
    }
}
@keyframes nudgeMouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-8px);
        transform: scale(1) translateY(-8px);
    }
    34% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(4px);
        transform: scale(1) translateY(4px);
    }
    68% {
        opacity: 0.2;
        -webkit-transform: scale(1) translateY(16px);
        transform: scale(1) translateY(16px);
    }
    100% {
        opacity: 0.2;
        -webkit-transform: scale(1) translateY(-8px);
        transform: scale(1) translateY(-8px);
    }
}
.getWe {
    display: flex;
    position: relative;
    z-index: 2;
}
.getWe a::before {
    content: '';
    width: 100%;
    height: 45px;
    border-radius: 25px;
    background: #0879f3;
    transition: all 0.4s;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none;
}
.getWe a {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 25px;
    border-radius: 25px;
    position: relative;
}
.getWe a span {
    color: #fff;
    line-height: 1.55555556em;
    transition: all 0.4s;
    font-size: 0.18rem;
}
.getWe a i svg {
    width: 40%;
    height: 40%;
    animation: Run 5s infinite;
}
.getWe a i svg path {
    fill: #fff;
    transition: all 0.4s;
}
.getWe a i {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    transition: all 0.4s;
    overflow: hidden;
}
.getWe a:hover::before {
    width: 45px;
}
.getWe a:hover span {
    color: var(--accent-blue);
}
.getWe a:hover i {
    transform: translateX(9px);
}
.getWe a:hover i svg path {
    fill: #fff;
}
@keyframes Run {
    0% {
        transform: translate3d(0%, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
    }
    7% {
        transform: translate3d(150%, -150%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
    }
    7.1% {
        transform: translate3d(-150%, 150%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
    }
    14% {
        transform: translate3d(0%, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
    }
}
@keyframes textRun {
    to {
        background-position: 200% center;
    }
}
.section-title {
    font-size: 0.42rem;
    font-weight: normal;
    color: #111;
    margin-bottom: 24px;
    text-align: center;
}
.btn {
    padding: 15px 35px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.btn-primary {
    background: var(--accent-blue);
    color: #fff;
}
.btn-primary:hover {
    background: #0062cc;
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.4);
}
.btn-secondary {
    border-color: var(--text-muted);
    color: #fff;
}
.btn-secondary:hover {
    background: #fff;
    color: var(--bg-dark);
}
/* 承接内容区 */
.intro-section {
    padding: 120px 0px;
    text-align: center;
}
.container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    max-width: 1440px;
}
.section-desc {
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1.8;
    text-align: center;
}
.title-box {
    margin-bottom: 120px;
}
/* 核心业务总容器 */
.business-section {
    width: 100%;
    height: 65vh;
    max-width: 1600px;
    /* 放开宽度限制，让右侧舒展 */
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
    text-align: left;
}
/* ================= 左侧纵向立体导航 ================= */
.left-pipeline {
    width: 160px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 20px;
    z-index: 100;
    /* 确保不被右侧倾斜层遮挡 */
}
.left-pipeline::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    border-left: 2px dashed #e0e0e0;
    z-index: 1;
}
.pipe-item {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    font-weight: 500;
    transition: all 0.4s ease;
    user-select: none;
}
.pipe-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.4s ease;
}
.pipe-item.active {
    color: #0b1d33;
    font-weight: bold;
    font-size: 18px;
}
.pipe-item.active::before {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(11, 29, 51, 0.15);
}
/* ================= 右侧 3D 舞台容器 ================= */
.right-stage {
    flex: 1;
    height: 100%;
    position: relative;
    /* 核心：开启 3D 透视，值越小透视变形越强烈 */
    perspective: 1200px;
    perspective-origin: center bottom;
}
/* 单个面板 */
.glass-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    display: flex;
    align-items: flex-end;
    padding: 50px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
    /* 【初始状态设置】 */
    opacity: 0;
    /* 绕X轴向后倾斜，下沉，略微缩小 */
    transform: translateY(60%) rotateX(25deg) scale(0.85);
    transform-origin: center bottom;
    pointer-events: none;
    overflow: hidden;
}
.glass-panel img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.glass-panel,
.swiper-slide {
    will-change: transform, opacity;
    backface-visibility: hidden;
}
/* 第一张默认完全展开可见 */
.glass-panel:first-child {
    opacity: 1;
    transform: translateY(0%) rotateX(0deg) scale(1);
    pointer-events: auto;
}
/* 背景模拟（可替换为图片） */
.panel-1 {
    background: linear-gradient(135deg, #0b1d33 0%, #1e3c72 100%);
}
.panel-2 {
    background: linear-gradient(135deg, #203a43 0%, #2c5364 100%);
}
.panel-3 {
    background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
}
.panel-4 {
    background: linear-gradient(135deg, #02111d 0%, #037bb5 100%);
}
/* ================= 毛玻璃说明卡片 ================= */
.glass-card {
    width: 630px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 55px 30px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease
}
.glass-card:hover {
    transform: translateY(-15px);
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.glass-card:hover .card-arrow {
    background: #fff;
}
.glass-card:hover .card-arrow::after {
    color: #0b1d33;
}
.card-info h3 {
    font-size: 24px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.card-info p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}
.card-arrow {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}
.card-arrow::after {
    content: '→';
    font-size: 18px;
    color: #fff;
}
.card-arrow:hover {
    background: #fff;
}
.card-arrow:hover::after {
    color: #0b1d33;
}
.card-info {
    width: 80%;
}
/* ==========================================================================
   产品展示区样式保护（强效防堆叠、防报错版）
   ========================================================================== */
/* Swiper 外部大容器 (将被 GSAP Pin 住) */
.scroll-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 0 40px;
}
.inner-content {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 80px;
    /* 为右下角按钮留出空间 */
}
/* 顶部小标题文本 */
.section-intro {
    margin-bottom: 40px;
    padding-left: 10px;
}
.section-intro p {
    color: #e0e0e0;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.mySwiper {
    width: 100%;
    overflow: visible !important;
    /* 允许看到前后卡片的边缘，完美还原截图 */
}
/* 单个产品卡片样式 */
.product-card {
    background: #ffffff;
    border-radius: 24px;
    color: #333;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* 左侧文字区域 */
.card-info {
    flex: 1;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    text-align: left;
}
.card-info h2 {
    font-size: 0.36rem;
    color: #0b1a30;
    margin-bottom: 15px;
    font-weight: 600;
}
.card-info .desc {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 25px;
}
/* 标签组 */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: auto;
}
.product .tag {
    background: #f0f5fa;
    color: #28558f;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.15rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tag::before {
    content: "❄";
    font-size: 0.1rem;
}
.more-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #21184a;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
    transition: transform 0.3s ease;
}
/* 了解详情按钮 */
.about .more-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    margin-top: 50px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.panel:hover .more-btn {
    transform: translateY(-15px);
    cursor: pointer;
}
.btn-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #055493;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.2rem;
}
/* 右侧图片深色区域 */
.card-media {
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.card-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.card-media video {
    border-radius: 16px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* 右下角原图样式的控制按钮 */
.nav-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 15px;
    z-index: 10;
}
.btn-prev,
.btn-next {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    font-size: 0.18rem;
}
.btn-prev:hover,
.btn-next:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}
/* 进度条指示器 */
.swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 2px !important;
    bottom: 35px !important;
    top: auto !important;
    width: calc(100% - 160px) !important;
}
/* 底部占位区域 */
.product {
    background-color: #05050f;
}
.product .section-title {
    text-align: left;
    color: #fff;
}
.spacer {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #eef2f7;
    color: #666;
}
/* 动画容器：改为上下 Flex 布局 */
.animation-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 上下排列 */
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    padding-top: 60px;
    /* 给顶部标题留出空间 */
}
/* 顶部标题：始终保持显示 */
.center-title {
    text-align: center;
    margin-bottom: 40px;
    z-index: 10;
}
.center-title h1 {
    font-size: 3.5rem;
    color: #111;
    margin-bottom: 15px;
    letter-spacing: 4px;
    font-weight: bold;
}
.center-title p {
    font-size: 1.1rem;
    color: #888;
    letter-spacing: 1px;
}
.about .title-box {
    margin-bottom: 50px;
}
/* 左右面板包裹层：占据剩余高度 */
.panels-container {
    position: relative;
    width: 95%;
    /* 保持左右安全边距 */
    height: 75%;
    /* 调整高度比例，防止压到标题 */
}
/* 通用面板样式 */
.panel {
    position: absolute;
    width: 55%;
    /* 宽度略大于50%，保证中间有重合斜边 */
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    /* 边缘圆角 */
}
.panel-left::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(13, 17, 23, 0.5) 30%, rgba(13, 17, 23, 0.1) 70%);
}
.panel-right::after {
    content: '';
    position: absolute;
    top: 0;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(13, 17, 23, 0.5) 30%, rgba(13, 17, 23, 0.1) 70%);
}
.panel-right a {
    float: right;
    ;
}
.panel-content h2 {
    font-size: 44px;
    margin-bottom: 30px;
}
.panel-content p {
    font-size: 20px;
}
/* 左侧面板：带右侧斜切角 (clip-path) */
.panel-left {
    left: 0;
    background-image: url('../images/about-l.jpg');
    /* 请替换为您的电路/芯片图 */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    /* 初始状态：向左偏离，露出中间空白 */
    transform: translateX(-80%);
}
/* 右侧面板：带左侧斜切角 */
.panel-right {
    right: 0;
    background-image: url('../images/about-r.jpg');
    /* 请替换为您的实验室图 */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    /* 初始状态：向右偏离 */
    transform: translateX(80%);
}
/* 面板内部文字和按钮 */
.panel-content {
    position: absolute;
    bottom: 140px;
    color: white;
    padding: 0 12%;
    opacity: 0;
    /* 初始隐藏，合并时显现 */
}
.panel-left .panel-content {
    left: 0;
}
.panel-right .panel-content {
    right: 0;
    text-align: right;
}
.meta-item svg {
    width: 16px;
    height: 16px;
    stroke: #a0a8b5;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* 外层排版容器 */
.news-section {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 40px;
}
.news .section-title {
    text-align: left;
}
/* ==========================================
       自定义命名 Swiper 核心样式
       ========================================== */
.custom-news-swiper {
    width: 100%;
    overflow: visible !important;
    /* 允许右侧内容溢出屏幕边缘，不居中截断 */
}
.custom-news-swiper .swiper-wrapper {
    display: flex;
}
/* 卡片样式 */
.custom-slide {
    flex-shrink: 0;
    height: 524px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    background-color: #ffffff;
    width: 440px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(180, 190, 210, 0.3);
    padding: 24px;
    border: 1px solid rgba(220, 225, 235, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
.custom-slide:hover {
    transform: translateY(-5px);
}
/* 卡片容器 */
.card:hover {
    transform: translateY(-4px);
}
/* 顶部配图区域 */
.card-image {
    width: 100%;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 内容包围盒 */
.card-content {
    padding-top: 20px;
}
/* 分类与时间 */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #8a92a0;
}
/* 细分割线 */
.divider {
    border: none;
    border-top: 1px solid #eef1f6;
    margin: 16px 0;
}
/* 卡片标题 */
.card-title {
    font-size: 20px;
    font-weight: 600;
    color: #0c1a30;
    line-height: 1.4;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 卡片描述 */
.card-description {
    font-size: 14px;
    color: #707885;
    line-height: 1.6;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 底部区域 */
.card-footer {
    margin-top: 12px;
}
/* “了解详情” 链接 */
.learn-more {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
    color: #1e2a3d;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.2s;
}
.learn-more:hover {
    opacity: 0.8;
}
/* 圆形箭头按钮 */
.arrow-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #0a2d8f;
    /* 契合原图的优雅蓝色 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}
.arrow-btn svg {
    width: 18px;
    height: 18px;
    stroke: #0a2d8f;
}
/* 悬停微动效：箭头轻轻向右移动 */
.learn-more:hover .arrow-btn {
    background-color: #0a2d8f;
}
.learn-more:hover .arrow-btn svg {
    stroke: #ffffff;
    transform: translateX(2px);
    transition: transform 0.2s, stroke 0.2s;
}
/* ==========================================
       底栏控制区 (左右按钮 + 进度条)
       ========================================== */
.swiper-controls-bar {
    display: flex;
    align-items: center;
    margin-top: 40px;
    gap: 24px;
}
/* 左右控制按钮组 */
.nav-buttons-group {
    display: flex;
    gap: 12px;
}
.custom-prev-btn,
.custom-next-btn {
    width: 75px;
    height: 40px;
    background-color: #f3f3f3;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}
.custom-prev-btn:hover,
.custom-next-btn:hover {
    background-color: #e5e5e5;
}
.custom-prev-btn svg,
.custom-next-btn svg {
    width: 32px;
    height: 32px;
    fill: #0a2d8f;
}
/* 禁用状态样式 */
.custom-prev-btn.swiper-button-disabled,
.custom-next-btn.swiper-button-disabled {
    opacity: 0.4;
}
/* 类似时间轴的进度条 */
.custom-progress-bar {
    flex-grow: 1;
    max-width: 100%;
    /* 限制进度条的最大长度 */
    height: 3px;
    background-color: #e0e0e0;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.custom-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    /* 由 JS 动态计算 */
    background-color: #0a2d8f;
    transition: width 0.3s ease;
    /* 顺滑过渡效果 */
}
.contact-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 380px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    position: relative;
    /* 渐变背景，模拟原图左侧的深蓝色调 */
    background: linear-gradient(90deg, #004c8c 0%, #0066b3 35%, #0d3863 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 120px;
}
/* 左侧文字区域 */
.contact-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60px;
    z-index: 2;
    color: #ffffff;
}
.contact-title {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 2px;
}
.contact-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    letter-spacing: 1px;
}
/* “联系我们” 按钮 */
.btn-contact {
    display: inline-block;
    width: fit-content;
    padding: 12px 36px;
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    background: transparent;
    cursor: pointer;
    /* 平滑过渡动画 */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 鼠标移入（Hover）效果 */
.btn-contact:hover {
    background-color: #ffffff;
    color: #005599;
    border-color: #ffffff;
    transform: translateY(-2px);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}
/* 鼠标按下（Active）效果 */
.btn-contact:active {
    transform: translateY(0);
}
/* 右侧图片区域 */
.contact-image-wrapper {
    position: relative;
    width: 50%;
    height: 100%;
}
.contact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* 遮罩层：让图片与左侧的蓝色背景完美融合，消除硬切边 */
.contact-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    /* 稍微向左覆盖一点防止露缝 */
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, #035ca2 0%, rgba(0, 102, 179, 0) 100%);
    z-index: 1;
}
/* 左侧信息栏 */
.left-content {
    flex: 1;
    max-width: 520px;
    z-index: 2;
    margin-top: 1.65rem;
}
.page-title {
    font-size: 44px;
    font-weight: 600;
    color: #222;
    margin-bottom: 60px;
    letter-spacing: 1px;
}
.office-card {
    font-style: normal;
}
.office-name {
    font-size: 20px;
    font-weight: 500;
    color: #2b2b2b;
    margin-bottom: 16px;
}
/* 统一的地址/电话列表样式，优化 SEO/a11y */
.info-list {
    list-style: none;
}
.info-item {
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.6;
}
.info-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
    fill: #666;
}
.info-item a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}
.info-item a:hover {
    color: #000;
}
/* 右侧地图与图片展示区 */
.right-graphics {
    flex: 1.2;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 520px;
    margin-top: 1.9rem;
}
/* 地图背景 SVG 抽象版图 */
.map-bg {
    position: absolute;
    top: 27%;
    left: -38%;
    transform: translateY(-50%);
    width: 80%;
    height: auto;
    opacity: 0.65;
    z-index: 3;
    pointer-events: none;
}
/* 定位标点与连接线 */
.pin-point {
    position: absolute;
    top: 20%;
    left: 16%;
    z-index: 7;
    display: flex;
    align-items: center;
}
.dot {
    position: relative;
    width: 16px;
    height: 16px;
    background-color: var(--bg-dark);
    /* 蓝色中心点 */
    border-radius: 50%;
}
/* 伪元素：外围闪烁黄色圆环 */
.dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid #7b7b7b;
    /* 黄色外环 */
    border-radius: 50%;
    /* 将伪元素居中对齐到圆点中心 */
    transform: translate(-50%, -50%);
    /* 绑定动画：名称 持续时间 循环方式 */
    animation: pulse 1.8s infinite ease-out;
    box-sizing: border-box;
}
/* 闪烁扩散动画定义 */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        /* 控制外环扩散最大倍数 */
        opacity: 0;
        /* 逐渐透明隐藏 */
    }
}
.line {
    width: 180px;
    height: 1px;
    background-color: #8c8275;
    opacity: 0.6;
}
/* 关联公司名字 */
.pinned-title {
    position: absolute;
    top: -8px;
    right: -159px;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}
/* 右侧现实图片卡片 */
.office-photo-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    margin-top: 100px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.office-photo-card:hover {
    transform: translateY(-4px);
}
.office-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 底部背景色与基础设置 */
.footer {
    color: #ffffff;
    padding: 60px 3% 0 3%;
    font-size: 14px;
    line-height: 1.6;
    background: url(../images/logo-big.png) no-repeat;
    background-color: #031124;
    background-position: right;
    background-size: 25%;
}
/* 容器布局：左右分栏 */
.footer-container {
    max-width: 1640px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 适配移动端 */
    gap: 40px;
}
/* ================= 左侧公司信息 ================= */
.footer-left {
    flex: 1;
    min-width: 300px;
}
.logo-footer {
    margin-bottom: 60px;
}
/* 电话热线按钮 */
.hotline-btn {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 10px 24px;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 25px;
    font-size: 19px;
    transition: all 0.3s ease;
    line-height: 33px;
}
.hotline-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}
/* 联系方式详情 */
.contact-info p {
    margin-bottom: 15px;
    color: #a1b2c9;
    /* 浅蓝灰色字体 */
}
.contact-info svg {
    width: 20px;
    position: relative;
    top: 7px;
}
.hotline-btn svg {
    position: relative;
    top: 4px;
}
.contact-info p strong {
    color: #ffffff;
}
.contact-info a {
    color: #a1b2c9;
    text-decoration: none;
}
.contact-info a:hover {
    color: #ffffff;
}
.email-spacer {
    display: inline-block;
    width: 70px;
    /* 对齐邮箱换行 */
}
/* 社交媒体图标 */
.social-icons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: #a1b2c9;
    text-decoration: none;
    font-size: 18px;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.social-icons a:hover {
    opacity: 1;
    color: #ffffff;
}
/* ================= 右侧导航链接网格 ================= */
.footer-right {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 6列均分 */
    gap: 20px;
    min-width: 600px;
}
/* 移动端响应式兼容 */
@media (max-width: 992px) {
    .footer-right {
        grid-template-columns: repeat(3, 1fr);
        min-width: 100%;
    }
}
@media (max-width: 576px) {
    .footer-right {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 每一列的样式 */
.nav-column h3 {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 20px;
    position: relative;
}
.nav-column ul {
    list-style: none;
}
.nav-column ul li {
    margin-bottom: 12px;
}
.nav-column ul li a {
    color: #a1b2c9;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s ease;
}
.nav-column ul li a:hover {
    color: #ffffff;
    /* 悬停变为纯白 */
}
/* 1. 整个右侧悬浮栏的初始状态：隐藏 + 向右偏移 */
.right-contact-bar {
    position: fixed;
    right: -80px;
    /* 初始向右偏移，藏在屏幕外 */
    bottom: 50px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-family: "Microsoft YaHei", sans-serif;
    opacity: 0;
    /* 初始透明 */
    visibility: hidden;
    /* 初始不可见 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 平滑的滑入动画 */
}
/* 2. 当添加 .show 类时的状态：滑入并显示 */
.right-contact-bar.show {
    right: 20px;
    /* 回到正常位置 */
    opacity: 1;
    visibility: visible;
}
/* 主悬浮菜单样式 */
.contact-menu {
    background-color: #fffdf9;
    border-radius: 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 15px 0;
    width: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 每一个联系项 */
.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    line-height: 25px;
    width: 100%;
    padding: 4px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.contact-item:hover {
    color: #055493;
}
.contact-item .icon {
    font-size: 20px;
    margin-bottom: 5px;
    color: #444;
}
/* 分割线 */
.divider {
    width: 35px;
    height: 1px;
    background-color: #f1ede8;
}
/* 微信二维码弹窗 */
.wechat-item {
    position: relative;
}
.wechat-qrcode {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}
.wechat-qrcode img {
    width: 180px;
    height: 180px;
    display: block;
    margin-bottom: 5px;
}
.wechat-qrcode p {
    margin: 0;
    font-size: 16px;
    padding: 10px 0;
    color: #666;
}
.wechat-item:hover .wechat-qrcode {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}
/* 3. “一键向上” 按钮（默认跟着父容器一起显示，不需要单独做隐藏了） */
.back-to-top {
    width: 60px;
    height: 60px;
    background-color: #fffdf9;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.back-to-top .icon-up {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}
.back-to-top:hover {
    background-color: #f5f2eb;
}
/* 外部容器 */
.follow-container {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* "关注" 文本标签 */
.follow-label {
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
    margin-right: 5px;
}
/* 图标列表组 */
.icon-group {
    display: flex;
    gap: 12px;
}
/* 单个图标容器（用于定位悬浮窗） */
.icon-item {
    position: relative;
}
/* 通用按钮样式 */
.icon-btn {
    width: 56px;
    height: 40px;
    border-radius: 20px;
    background-color: #2b2b2b;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    outline: none;
}
/* 微信按钮 */
.icon-btn.wechat:hover {
    background-color: #07c160;
}
/* 抖音按钮（默认红色高亮） */
.icon-btn.douyin {
    background-color: #ff001c;
}
/* 小红书按钮 */
.icon-btn.xiaohongshu {
    font-weight: bold;
    color: #ffffff;
    font-size: 13px;
}
.icon-btn.xiaohongshu:hover {
    background-color: #ff2742;
}
.icon-btn.bilibili:hover {
    background-color: #e50c5f;
}
.icon-btn.kuaishou {
    font-weight: bold;
    color: #ffffff;
    font-size: 13px;
}
.icon-btn.kuaishou:hover {
    background-color: #ec2a40;
}
/* 视频号/其他按钮 */
.icon-btn.channels:hover {
    background-color: #fa9d3b;
}
/* SVG 图标通用颜色 */
.icon-btn svg {
    fill: #ffffff;
    width: 27px;
    height: 34px;
}
/* --- 悬浮气泡/二维码样式 --- */
.tooltip-box {
    position: absolute;
    bottom: 55px;
    /* 定位到按钮上方 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #ffffff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 10;
    color: #000;
    text-align: center;
}
/* 二维码图片大小（可替换为您的真实抖音码/二维码） */
.tooltip-box img {
    width: 140px;
    height: 140px;
    display: block;
    object-fit: contain;
}
/* 气泡下方的向下小三角 */
.tooltip-box::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #ffffff transparent transparent;
    display: block;
    width: 0;
}
/* 鼠标悬停（Hover）在容器上时，显示气泡 */
.icon-item:hover .tooltip-box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* --- 核心：电话气泡弹窗样式 --- */
.phone-popover {
    position: absolute;
    right: 80px;
    /* 默认贴近，留出过渡空间 */
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    width: 240px;
    pointer-events: none;
    /* 默认不可触发事件，防止误触 */
    opacity: 0;
    /* 默认隐藏 */
    visibility: hidden;
    /* 彻底隐藏 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* 平滑的回弹缓动动画 */
}
/* 气泡右侧的小三角（指向电话图标） */
.phone-popover::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: #ffffff;
}
/* 弹窗内的文字排版 */
.popover-section {
    margin-bottom: 15px;
}
.popover-section:last-child {
    margin-bottom: 0;
}
.popover-title {
    font-size: 16px;
    color: #999;
    margin-bottom: 4px;
}
.popover-number {
    font-size: 19px;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.5px;
}
/* --- 悬停触发动画效果 --- */
.contact-item.phone-item:hover .phone-popover {
    opacity: 1;
    visibility: visible;
    right: 90px;
    /* 悬停时向左滑入 10px */
    pointer-events: auto;
    /* 激活弹窗内的点击事件 */
}
.banner-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 初始上下保留间距 */
    padding: 30px 0 0 0;
    margin-top: 0.56rem;
}
/* 初始状态：占 80% 宽度，带有大圆角 */
.banner-box {
    width: 80%;
    height: 5rem;
    min-width: 1440px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* 高质感科技感背景图 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0.5rem;
}
.banner-white .banner-content {
    color: var(--bg-dark);
}
.banner-white .breadcrumb {
    color: var(--bg-dark);
}
.banner-bg {
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, rgba(29, 58, 102, 0.25), rgba(13, 62, 159, 0.6));
}
.banner-bg img {
    width: 100%;
}
/* 卡片内部文字内容 */
.banner-content {
    color: #ffffff;
    z-index: 2;
}
.banner-content h2 {
    font-size: 0.45rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 0.9rem;
    margin-top: 0.5rem;
}
.banner-content h1 {
    font-size: 0.45rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 1.4rem;
}
/* 面包屑导航样式 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.18rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.18rem;
}
.breadcrumb span {
    cursor: pointer;
}
/* 底部内容区域（模拟下方页面内容） */
.content-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}
.content-section h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: #1a202c;
}
.content-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;
}
/* ==========================================================================
    新闻列表页
========================================================================== */
/* 容器网格布局（响应式，4列） */
.category-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.8rem;
}
/* 按钮基础样式 */
.category-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 0.26rem;
    font-size: 0.16rem;
    color: #666666;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
/* 悬停效果 */
.category-item:hover {
    border-color: #2e8dff;
    color: #2e8dff;
}
/* 选中（激活）状态 - 对应图片中的“全部”样式 */
.category-item.active {
    color: #1890ff;
    background-color: #f0f7ff;
    border-color: #1890ff;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 45px;
    padding-bottom: 1.2rem;
}
/* 新闻卡片 <article> */
.news-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left;
}
/* 卡片悬浮升起 */
.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.news-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* 卡片顶部图片/横幅区域 */
.news-banner {
    width: 100%;
    height: 3.15rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
.news-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 卡片文字内容 */
.news-content {
    padding: 22px 20px 18px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}
/* 标题截断 */
.news-title {
    font-size: 0.2rem;
    font-weight: bold;
    color: #2c3e50;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.news-card:hover .news-title {
    color: #0081ff;
}
/* 摘要截断 */
.news-excerpt {
    font-size: 0.16rem;
    color: #8a96a3;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    margin: 0.28rem 0;
}
/* 卡片底部 <article> -> <footer> */
.news-footer {
    padding-top: 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}
/* 1. 静态浅灰色基准底线 */
.news-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f0f2f5;
}
/* 2. 核心动效：默认宽度 0 的蓝色线条 */
.news-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* 初始宽度为 0 */
    height: 1.5px;
    background-color: #0081ff;
    /* 从左到右平滑动画 */
    transition: width 0.35s ease-in-out;
    z-index: 2;
}
/* 鼠标悬停卡片时，线条拉满至 100% */
.news-card:hover .news-footer::after {
    width: 100%;
}
/* 发布时间与蓝色时钟图标 */
.news-time {
    font-size: 0.14rem;
    color: #a0aec0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.icon-clock {
    width: 13px;
    height: 13px;
    border: 1.5px solid #0081ff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}
.icon-clock::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 4.5px;
    width: 1px;
    height: 3.5px;
    background-color: #0081ff;
}
.icon-clock::after {
    content: '';
    position: absolute;
    top: 4.5px;
    left: 4.5px;
    width: 3px;
    height: 1px;
    background-color: #0081ff;
}
/* ==========================================================================
    新闻内容页
========================================================================== */
.news-art h1 {
    font-size: 0.32rem;
    line-height: 0.32rem;
    color: var(--bg-dark);
    margin-bottom: 10px;
    text-align: center;
    margin-top: 0.6rem;
}
.news-art .meta {
    color: #777777;
    font-size: 0.16rem;
    text-align: center;
    padding: 0.14rem 0;
}
.news-art .meta-item {
    display: inline-block;
    margin: 0 8px;
}
.news-art header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.article-body {
    line-height: 0.36rem;
    font-size: 0.18rem;
    border-bottom: 1px solid #ededed;
    padding-bottom: 0.4rem;
    color: #000;
    text-align: left;
}
.prev-next-links {
    line-height: 1.8;
    color: #555555;
}
.back-btn {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    line-height: 0.5rem;
    border-radius: 0.5rem;
    background-color: #148FFA;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #148FFA;
    overflow: hidden;
    font-size: 0.16rem;
}
.back-btn:hover {
    color: #148FFA;
}
.back-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 25px;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.back-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
article footer {
    margin-top: 0.35rem;
    text-align: justify;
    padding-top: 0.18rem;
    font-size: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}
.prev-next-links a {
    transition: color 0.2s ease;
    font-weight: bold;
}
.prev-next-links a:hover {
    color: var(--accent-blue);
}
/* FAQ*/
section.faq-hero {
    background-color: #1a1234;
    /* 纯 CSS 渲染微弱点阵背景，免加载图片，优化 SEO 及性能 */
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    color: #ffffff;
    padding: 80px 20px 70px 20px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0.86rem;
}
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--badge-bg);
    border: 1px solid rgba(0, 210, 255, 0.3);
    color: var(--accent-blue);
    font-size: 18px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.faq-hero-title {
    font-size: 30px;
    /* 微调后的字号，兼顾视觉冲击与空间节省 */
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 10px;
    /* 缩减底部间距 */
    line-height: 1.25;
}
.faq-hero-subtitle {
    font-size: 0.16rem;
    color: #94a3b8;
    font-weight: 400;
    max-width: 680px;
    margin: 0 auto 20px auto;
    /* 缩减底部间距 */
    line-height: 1.5;
}
.main-container {
    max-width: 1440px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
/* 左侧吸顶分类导航 */
.sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 30px;
}
.category-faq-nav {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: 12px;
    overflow: hidden;
}
.category-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 16px;
}
.category-menu {
    list-style: none;
}
.category-menu li a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    transition: color 0.2s;
}
.category-menu li a i {
    margin-right: 0.12rem;
    margin-top: 0.04rem;
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    transition: color 0.2s, transform 0.2s;
}
.category-menu li.active a,
.category-menu li a:hover {
    background-color: #f9f9f9;
    color: var(--accent-teal);
    font-weight: 400;
}
.category-menu li.active a i svg path,
.category-menu li a:hover i svg path {
    fill: var(--accent-teal);
    width: 0.24rem;
}
/* 右侧 FAQ 内容区 */
.content-area {
    flex-grow: 1;
    min-width: 0;
}
.faq-section {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: 32px;
    margin-bottom: 30px;
}
.faq-section .section-header {
    margin: 0 0 0.24rem 0
}
.section-header {
    font-size: 22px;
    color: var(--bg-dark);
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-header i {
    color: var(--accent-teal);
}
/* 手风琴 Accordion 样式 */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.accordion-item:hover {
    border-color: #cbd5e1;
}
.accordion-item.active {
    border-color: var(--accent-teal);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.08);
}
.accordion-header {
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    user-select: none;
    transition: background 0.2s;
}
.accordion-header:hover {
    background-color: #f8fafc;
}
.question-text {
    display: flex;
    align-items: center;
    gap: 10px;
}
.question-text::before {
    content: "问";
    display: inline-block;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 13px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    flex-shrink: 0;
}
.accordion-icon {
    color: var(--text-muted);
    line-height: 0.1rem;
}
.accordion-content {
    height: 0;
    overflow: hidden;
    background-color: #f8fafc;
    border-top: 1px solid transparent;
}
.accordion-item.active .accordion-content {
    border-top-color: var(--border-color);
}
.accordion-body {
    padding: 20px 22px;
    font-size: 14.5px;
    color: #334155;
    line-height: 1.8;
}
.accordion-body ul {
    margin-left: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.accordion-body li {
    margin-bottom: 6px;
    list-style: disc;
}
.badge {
    background-color: #d14c0a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 6px;
}
/* 咨询 Call To Action 模块 */
.cta-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 0.3rem;
    box-shadow: var(--shadow-card);
}
.cta-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #ffffff;
}
.cta-card p {
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 24px;
}
.cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
    cursor: pointer;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.5);
}
/* 联系我们 */
/* 左侧区域 (使用语义化标签 section) */
.contact-box {
    padding: 1.2rem 0;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.left-section {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.title-group h1 {
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-black);
}
.title-group p {
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-black);
    margin-top: 4px;
}
/* 视频封面卡片 */
.video-card {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: 320px;
    margin: 0.8rem 0;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: #222 url('../images/zl-zc.jpg') center/cover no-repeat;
    transition: transform 0.3s ease;
    border: none;
    text-align: left;
}
.video-card:hover {
    transform: scale(1.02);
}
.play-btn {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.3s;
}
.play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 3px;
}
.video-card:hover .play-btn {
    background: rgba(0, 0, 0, 0.9);
}
.client-text {
    font-size: 0.2rem;
    color: var(--text-black);
    margin-bottom: 20px;
}
/* 品牌 Logo 列表区域 */
.brand-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 53px;
    align-items: center;
    max-width: 480px;
    opacity: 0.85;
    font-weight: bold;
    color: #333;
    list-style: none;
}
.brand-item {
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
}
/* 右侧表单区 */
.right-section {
    flex: 1;
    background-color: #e2f5ff;
    padding: 60px 50px;
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}
.form-title {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 30px;
    color: #1a1a1a;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    margin-bottom: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group p {
 line-height: 1;
}
.form-group.full-width {
    grid-column: span 2;
    border: none;
    background: none;
}
.form-group label {
    font-size: 0.18rem;
    color: #333;
    margin-bottom: 6px;
    display: block;
}
.form-group label span {
    color: #e53935;
}
.form-control {
    width: 100%;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid #dcd7ce;
    border-radius: 8px;
    font-size: 0.16rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    font-family: pingfang sc;
}
.form-control:focus {
    border-color: #333;
    background-color: rgba(255, 255, 255, 0.7);
}
textarea.form-control {
    height: 140px;
    resize: none;
}
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #555;
}
.checkbox-group input {
    width: 16px;
    height: 16px;
    accent-color: #222;
    cursor: pointer;
}
.checkbox-group a {
    color: #555;
    text-decoration: underline;
}
.submit-btn {
    width: 100%;
    padding: 14px;
    background-color: #222;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover {
    background-color: #000;
}
/* 视频弹窗 Modal */
/* 优化后的 Modal 样式 */
.modal {
    display: none;
    /* 默认隐藏，由 GSAP/jQuery 控制 */
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    /* 移除 css 中的 transition，避免与 GSAP 冲突 */
}
.modal-content {
    position: relative;
    width: 80%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    will-change: transform, opacity;
    /* 提升渲染性能 */
}
.modal.active {
    display: flex;
    opacity: 1;
}
.modal-content video {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}
.close-btn {
    position: absolute;
    top: -75px;
    right: 0;
    color: #ffffff;
    font-size: 63px;
    font-weight: 300;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    user-select: none;
    transition: color 0.2s, transform 0.2s;
}
.close-btn:hover {
    color: var(--accent-blue);
    transform: scale(1.1);
}
/* 解决方案*/
/* Hero solution */
.hero-solution {
    position: relative;
    width: 100%;
    height: 80vh;
    /* 撑满屏幕高度 */
    overflow: hidden;
    /* 隐藏超出范围的图片部分 */
    display: flex;
    align-items: center;
    padding: 0 10%;
}
/* 背景图样式 */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 预留 20% 高度用于向下/向上位移 */
    z-index: 1;
    transform-origin: center bottom;
    will-change: transform;
    /* 开启硬件加速提升性能 */
}
.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    /* 预留 20% 高度用于向下/向上位移视差 */
    object-fit: cover;
    /* 效果同 background-size: cover */
    object-position: center bottom;
    /* 效果同 background-position: center bottom */
    z-index: 1;
    transform-origin: center bottom;
    will-change: transform;
    /* 开启硬件加速提升性能 */
    pointer-events: none;
    /* 避免图片影响页面点击交互 */
}
/* 渐变遮罩层 (让文字更清晰) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 2;
}
/* 内容区域 */
.hero-solution .hero-content {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    color: #fff;
}
.breadcrumb {
    font-size: 0.18rem;
    opacity: 0.8;
    margin-bottom: 40px;
}
.hero-solution .title {
    font-size: 0.5rem;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}
.hero-solution p {
    font-size: 0.25rem;
}
/* 测试滚动的下方区块 */
.scroll-content {
    height: 150vh;
    background-color: #fff;
    padding: 100px 10%;
    position: relative;
    z-index: 4;
}
.banner-container {
    padding: 1.2rem 0;
}
.solution-tit {
    padding: 1.2rem 0;
}
.description {
    height: 0.8rem;
    font-size: 0.2rem;
    line-height: 0.3rem;
}
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}
/* 解决方案卡片结构 */
.solution {
    position: relative;
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 23px;
    overflow: hidden;
    /* 确保背景图不超出圆角 */
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-align: left;
}
/* Hover 状态边框和阴影 */
.solution:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    color: #fff;
}
/* 1. 悬浮背景图逻辑 (通过 img 标签实现) */
.solution-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保证图片覆盖整个容器 */
    object-position: center;
    z-index: 1;
    /* 位于背景与内容之间 */
    opacity: 0;
    /* 默认隐藏 */
    transition: opacity 0.4s ease-in-out;
    /* 平滑渐变效果 */
    pointer-events: none;
    /* 避免图片遮挡鼠标事件 */
}
/* Hover 时显示背景图片 */
.solution:hover .solution-bg-img {
    opacity: 0.9;
    /* 调整透明度以确保上层文字清晰可读 */
}
/* 2. 卡片内容区域 (必须建立层级位于图片之上) */
.solution-content {
    position: relative;
    z-index: 2;
    /* 确保文本排在图片上方 */
}
/* 内部元素样式 */
.solution .tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--tag-bg);
    color: var(--tag-text);
    font-size: 13px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.solution h3 {
    font-size: 22px;
    margin: 0 0 16px 0;
    line-height: 1.4;
}
.solution .description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feature-list li {
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.feature-list li::before {
    content: "✓";
    font-weight: bold;
    margin-right: 10px;
}
/* 表格外层容器卡片 */
.table-card {
    width: 100%;
    max-width: 1440px;
    background-color: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin: 0 auto;
}
/* 表格基础设置 */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.16rem;
}
/* 表头设计 */
.styled-table thead {
    background-color: var(--bg-table-header);
    border-bottom: 2px solid var(--border-color);
}
.styled-table th {
    padding: 20px 28px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* 表格行设计 */
.styled-table tbody tr {
    position: relative;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.25s ease-in-out;
}
.styled-table tbody tr:last-child {
    border-bottom: none;
}
/* 悬浮行微动效与左边框高亮 */
.styled-table tbody tr:hover {
    background-color: #f8fafc;
    box-shadow: inset 4px 0 0 var(--brand-blue);
    /* 左侧蓝色指示条 */
}
.styled-table td {
    padding: 22px 28px;
    color: var(--text-muted);
    line-height: 1.6;
    vertical-align: middle;
}
/* 1. 材料牌号列：胶囊 Badge 样式 */
.material-badge {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--brand-blue-light);
    border: 1px solid var(--brand-blue-border);
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
/* 2. 执行标准列：代码感块级显示 */
.code-tag {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    color: #334155;
    background-color: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    display: inline-block;
    white-space: nowrap;
}
/* 3. 核心优势列：强调加粗 */
.advantage-text {
    color: #334155;
    font-weight: 500;
}
.advantage-text strong {
    color: var(--brand-blue);
    font-weight: 600;
}
/* 4. 适配场景列：微型场景 Tag */
.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.scene-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-blue);
    color: var(--bg-white);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.14rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}
.styled-table tbody tr:hover .scene-tag {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: var(--text-main);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 1.2rem;
}
/* 流程卡片基本结构 */
.step-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
}
/* Hover 状态：上浮、阴影强化与高亮边框 */
.step-card:hover {
    border-color: var(--border-card-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
/* 替换 01,02,03,04 的 SVG Icon 图标盒子 */
.icon-box {
    width: 52px;
    height: 52px;
    background-color: var(--icon-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--icon-color);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.step-card:hover .icon-box {
    background-color: var(--accent-blue);
    color: #ffffff;
    transform: scale(1.05);
}
.icon-box svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 标题与描述文本 */
.step-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 12px;
    line-height: 1.4;
}
.step-card p {
    font-size: 14px;
    color: var(--bg-dark);
    line-height: 1.65;
    text-align: left;
}
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 1.2rem;
}
.faq-accordion .section-title {
    text-align: left;
}
.faq-accordion .section-desc {
    text-align: left;
    margin-bottom: 0.6rem;
}
.faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.25s ease-in-out;
}
.faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-md);
}
.faq-item.active {
    border-color: var(--card-border-active);
    box-shadow: var(--shadow-active);
}
.faq-header {
    width: 100%;
    padding: 22px 28px;
    background: none;
    border: none;
    outline: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}
.faq-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
}
.faq-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue);
    font-family: monospace;
    background: var(--primary-blue-light);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(2, 132, 199, 0.15);
}
.faq-question {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-main);
}
.faq-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}
.faq-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-sub);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background: var(--accent-blue);
}
.faq-item.active .faq-icon svg {
    stroke: #ffffff;
}
/* Content Collapse Styling */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}
.faq-accordion .faq-body {
    padding: 0 28px 24px 36px;
    color: var(--text-sub);
    font-size: 15px;
    line-height: 1.7;
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
    padding-top: 18px;
}
.faq-answer-direct {
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
}
.highlight-text {
    color: var(--accent-blue);
    font-weight: 600;
}
.feature-list {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feature-list li {
    position: relative;
    padding-left: 18px;
}
.feature-list li::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    top: 1px;
}
/* 工业卡片框架 */
.spec-card {
    background: #ffffff;
    border: 0.01rem solid var(--border-color);
    /* 1px */
    border-left: 0.05rem solid var(--primary-color);
    /* 5px 左侧高亮边框 */
    border-radius: 0.06rem;
    /* 6px */
    box-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.spec-card:hover {
    box-shadow: 0 0.1rem 0.15rem -0.03rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.02rem);
    /* -2px */
}
/* 左侧缩略图区域：宽度 240px -> 2.4rem */
.spec-media {
    width: 100%;
    background: #edf2f7;
    position: relative;
    height: 2.5rem;
}
.spec-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 右侧内容主体：内边距 24px -> 0.24rem */
.spec-details {
    padding: 0.16rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.spec-header {
    align-items: baseline;
    border-bottom: 0.01rem solid var(--border-color);
    padding-bottom: 0.12rem;
    /* 12px */
    margin-bottom: 0.16rem;
    /* 16px */
}
/* 标题 22px -> 0.22rem */
.spec-title {
    font-size: 0.22rem;
    font-weight: 700;
    margin: 0;
    width: 285px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spec-title a {
    color: inherit;
    text-decoration: none;
}
.spec-title a:hover {
    color: var(--accent-color);
}
/* 标签 12px -> 0.12rem */
.spec-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.12rem;
    font-weight: 600;
    padding: 0.03rem 0.08rem;
    border-radius: 0.04rem;
    /* width: 140px; */
    text-align: center;
    margin-bottom: 0.1rem;
    display: inline-block;
    /* width: 100%; */
    text-align: left;
}
.spec-details p {
    font-size: 0.14rem;
    line-height: 0.2rem;
}
/* 参数表格网格 */
.spec-excerpt-box .key-specs-list {
    font-size: 0.14rem;
    height: 2.7rem;
}
.spec-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.16rem;
    background: var(--accent-blue);
    width: 100%;
    margin-top: 0.1rem;
    text-align: center;
}
/* 按钮 8px 20px -> 0.08rem 0.2rem */
.btn-detail {
    background: var(--primary-color);
    color: white;
    padding: 0.08rem 0.2rem;
    border-radius: 0.04rem;
    text-decoration: none;
    font-size: 0.14rem;
    /* 14px */
    font-weight: 600;
    transition: background 0.2s;
}
.btn-detail:hover {
    background: var(--accent-color);
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(322px, 1fr));
    gap: 0.3rem;
    margin: 0.9rem 0;
}
/* ---------------- 左侧产品列表悬浮栏 ---------------- */
.sidebar-floating {
    position: fixed;
    top: 100px;
    left: 0;
    width: var(--panel-width);
    background: var(--bg-white);
    border-radius: 0 16px 16px 0;
    box-shadow: var(--shadow-premium);
    z-index: 999;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border-light);
    border-left: none;
    backdrop-filter: blur(10px);
}
/* 收起状态：完全移出左侧屏幕 */
.sidebar-floating.collapsed {
    transform: translateX(-100%);
}
/* 头部区域 */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
    background: #ffffff;
    border-radius: 0 16px 0 0;
}
.sidebar-title {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.sidebar-title .icon-svg {
    color: var(--accent-blue);
    font-size: 16px;
}
/* 展开/收起切换按钮 */
.toggle-btn {
    background: var(--brand-blue-light);
    border: 1px solid var(--border-color);
    color: var(--text-sub);
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: absolute;
    right: -13px;
    top: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.toggle-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}
.toggle-btn:hover .icon-svg {
    fill: var(--bg-white);
}
.toggle-btn .icon-svg {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.sidebar-floating.collapsed .toggle-btn .icon-svg {
    transform: rotate(180deg);
}
/* 产品分类列表容器 */
.sidebar-content {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding: 8px 0;
}
/* 精致极细滚动条 */
.sidebar-content::-webkit-scrollbar {
    width: 3px;
}
.sidebar-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
/* 菜单列表样式 */
.product-menu {
    list-style: none;
}
.menu-item {
    position: relative;
}
.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.16rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.menu-link:hover {
    background: var(--bg-subtle);
    color: var(--accent-blue);
}
.menu-item.active>.menu-link {
    color: var(--accent-blue);
    border-left-color: var(--accent-blue);
    background: #f0f7ff;
}
.menu-link .left-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.menu-link .left-info .icon-svg {
    color: var(--text-sub);
    font-size: 15px;
    transition: color 0.2s ease;
}
.menu-link:hover .left-info .icon-svg,
.menu-item.active .left-info .icon-svg {
    color: var(--accent-blue);
}
.menu-link .arrow {
    font-size: 11px;
    color: #94a3b8;
    transition: transform 0.3s ease, color 0.2s ease;
}
.menu-item.open>.menu-link .arrow {
    transform: rotate(180deg);
    color: var(--accent-blue);
}
/* 二级菜单列表 */
.submenu {
    list-style: none;
    background: var(--bg-subtle);
    display: none;
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.menu-item.open>.submenu {
    display: block;
}
.submenu-link {
    display: flex;
    align-items: center;
    padding: 9px 20px 9px 48px;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.14rem;
    transition: all 0.3s ease;
    position: relative;
}
.submenu-link:hover,
.submenu-link.active {
    color: var(--accent-blue);
}
.submenu-link.active::before {
    content: "";
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent-blue);
}
.icon-svg {
    width: 1em;
    height: 1em;
    fill: var(--accent-blue);
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.features-section {
    position: relative;
    background-color: #edf4fa;
    overflow: hidden;
    text-align: center;
        padding: 80px 0 100px 0;
}
/* 参照图同心圆背景 */
.features-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    border-radius: 50%;
    border: 1px solid rgba(190, 212, 233, 0.5);
    box-shadow:
        0 0 0 120px rgba(220, 233, 245, 0.3),
        0 0 0 280px rgba(235, 243, 250, 0.4);
    z-index: 1;
    pointer-events: none;
}
.features-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin: 0.5rem 0;
}
/* 原图白底圆角卡片样式 */
.feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px 25px 25px 25px;
    box-shadow: 0 10px 25px rgba(0, 50, 100, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 50, 100, 0.1);
}
/* SVG 图标容器定义 */
.feature-icon {
    width: 0.6rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--accent-blue);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-content {
    text-align: left;
}
.feature-name {
    font-size: 0.22rem;
    font-weight: bold;
    color: #0f172a;
    margin-bottom: 0.14rem;
    margin-top: 0.1rem;
}
.feature-sub {
    font-size: 0.16rem;
    color: #64748b;
}
.section-header {
    text-align: center;
    margin: 0.9rem 0 0.4rem 0;
        justify-content: space-between;
}
.section-header h2 {
    font-size: 32px;
    color: #0b2545;
}
.section-header p {
    color: #64748b;
    margin-top: 8px;
}
.home-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 1.2rem;
}
.home-product-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
    text-align: left;
}
.home-product-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.home-product-img {
    width: 100%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.home-product-img img {
    width: 100%;
}
.home-product-info {
    padding: 20px;
}
.home-product-title {
    font-size: 0.26rem;
    color: #1e293b;
    margin-bottom: 8px;
}
.home-product-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    display: -webkit-box;
    overflow: hidden;
}
.home-product-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    background-color: #f1f5f9;
    color: #0b2545;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.home-product-btn:hover {
    background-color: var(--accent-blue);
    color: var(--bg-white);
}
.geo-text {
    text-align: left;
}
.geo-about {
    background-color: #f1f5f9;
    padding: 60px 0;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 1.2rem;
}
.geo-content {
    display: flex;
    justify-content: space-between;
}
.geo-text h2 {
    font-size: 26px;
    margin-bottom: 16px;
    color: #0b2545;
}
.geo-text p {
    color: #475569;
    font-size: 0.16rem;
    margin-bottom: 12px;
}
.geo-contact-info {
    list-style: none;
    margin-top: 15px;
}
.geo-contact-info li {
    margin-bottom: 12px;
    color: #334155;
    font-size: 0.16rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.geo-contact-info svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-blue);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.products-section .section-title {
    text-align: left;
    font-size: 0.32rem;
        width: 8rem;
}
.products-section .section-header p {
    text-align: left;
    font-size: 0.18rem;
}
/* 产品网格 (卡片展示) */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 70px;
}
.catalog-card {
    text-align: left;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.catalog-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}
.catalog-img {
    width: 100%;
}
.catalog-img img {
    width: 100%;
}
.catalog-info {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.catalog-title {
    font-size: 0.22rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 14px;
}
.catalog-spec {
    font-size: 12px;
    color: var(--accent-blue);
    background: #edf4fa;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    width: fit-content;
}
.catalog-desc {
    font-size: 0.16rem;
    color: #64748b;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catalog-btn {
    text-align: center;
    padding: 6px 0;
    background-color: #f8fafc;
    color: #0b2545;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.catalog-btn:hover {
    background-color: var(--accent-blue);
    color: #ffffff;
    border-color: var(--accent-blue);
}
/* 产品详情主区域 */
.product-detail-main {
    padding: 40px 0 60px 0;
}
/* 顶部 Hero 区域 */
.product-hero-grid {
    display: grid;
    grid-template-columns: 380px 1fr 300px;
    gap: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
}
/* 左侧：产品展示图 */
.product-gallery {
    background: linear-gradient(135deg, #f8fafc 0%, #edf4fa 100%);
    border-radius: 8px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}
.products-section {
    padding-bottom: 0.9rem;
}
/* 中间：产品核心摘要 */
.product-summary h1 {
    font-size: 24px;
    color: #0b2545;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
    text-align: left;
}
.product-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tag {
    font-size: 12px;
    background: #edf4fa;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.key-specs-list {
    list-style: none;
    margin-bottom: 20px;
    font-size: 0.16rem;
    color: #475569;
    text-align: left;
}
.key-specs-list li {
    margin-bottom: 0.12rem;
    display: flex;
}
.product-detail-main .key-specs-list strong {
    width: 90px;
    ;
}
.key-specs-list strong {
    width: 70px;
    color: #1e293b;
    flex-shrink: 0;
}
/* 右侧：询价卡片 */
.inquiry-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.inquiry-card h3 {
    font-size: 16px;
    color: #0b2545;
    margin-bottom: 10px;
}
.inquiry-card p {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 15px;
}
.contact-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0066cc;
    color: #ffffff;
    padding: 10px 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.contact-btn-primary:hover {
    background: #0052a3;
}
.contact-phone-box {
    font-size: 13px;
    color: #334155;
    background: #ffffff;
    padding: 10px;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* 下方详情面板 */
.detail-tabs-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    text-align: left;
    margin-bottom: 0.9rem;
}
.tab-header {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 25px;
    display: flex;
    gap: 30px;
}
.tab-item {
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    border-bottom: 3px solid #0066cc;
    padding-bottom: 10px;
    margin-bottom: -2px;
}
.product-detail-main .section-title {
    font-size: 18px;
    font-weight: 700;
    color: #0b2545;
    margin: 25px 0 15px 0;
    border-left: 4px solid #0066cc;
    padding-left: 10px;
}
.section-title-trust {
    margin-bottom: 20px;
}
/* 参数表格 */
.tech-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 14px;
}
.tech-table th,
.tech-table td {
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    text-align: left;
}
.tech-table th {
    background-color: #f8fafc;
    color: #1e293b;
    font-weight: 600;
}
.tech-table td {
    color: #475569;
}
.table-head-bg {
    background-color: #f8fafc;
}
/* 应用描述通用段落与列表 */
.section-desc-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}
.app-bullet-list {
    font-size: 14px;
    color: #475569;
    margin: 10px 0 0 20px;
    line-height: 1.8;
}
.app-bullet-list li {
    list-style: disc;
}
/* EEAT 信任与质量保障模块类名抽离 */
.trust-eeat-box {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px dashed #e2e8f0;
}
.trust-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.trust-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0066cc;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.icon-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.22rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 0.28rem;
}
.icon-title-wrap svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
/* 统一的卡片描述段落类名 */
.trust-card-desc {
    font-size: 0.14rem;
    color: #475569;
    line-height: 1.6;
}
.product-detail-main .section-title {
    text-align: left;
}
/* 关于我们 */
.about-hero {
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 70vh;
}
.about-hero .container {
    text-align: left;
    position: absolute;
    top: 34%;
    z-index: 1;
    left: 12%;
}
.about-hero-title {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.about-hero-subtitle {
    font-size: 0.22rem;
    color: var(--bg-white);
    margin: 0 auto;
    line-height: 1.8;
    font-weight: 300;
}
/* 主要内容容器 */
.about-main-content {
    padding: 70px 0;
    text-align: left;
}
/* 模块通用样式 */
.section-block {
    margin-bottom: 80px;
}
.about-main-content .section-title {
    font-size: 0.35rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 30px;
    border-left: 5px solid #0066cc;
    padding-left: 14px;
    text-align: left;
}
/* 模块一：公司简介布局 */
.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.intro-text-p {
    font-size: 0.18rem;
    color: #475569;
    line-height: 1.85;
    margin-bottom: 18px;
    text-align: left;
}
/* 右侧带暗淡背景图的视觉展示框 */
.intro-visual {
    position: relative;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    /* 工业制造背景图 + 暗色遮罩微调 */
    background:
        linear-gradient(135deg, rgba(11, 37, 69, 0.35) 0%, rgba(15, 23, 42, 0.32) 100%),
        url('../images/about-r.jpg') center/cover no-repeat;
    transition: transform 0.4s ease;
}
.intro-visual:hover {
    transform: scale(1.01);
}
.intro-visual-icon {
    width: 64px;
    height: 64px;
    background: rgba(0, 102, 204, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.3);
    backdrop-filter: blur(4px);
}
.intro-visual-icon svg {
    width: 32px;
    height: 32px;
    stroke: #38bdf8;
}
.intro-visual-text {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* ===== 数据卡片样式 ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #0066cc;
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-icon-box {
    width: 48px;
    height: 48px;
    background: #edf4fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    color: #0066cc;
    transition: background 0.3s ease, transform 0.3s ease;
}
.stat-icon-box svg {
    width: 24px;
    height: 24px;
    stroke: #0066cc;
}
.stat-card:hover .stat-icon-box {
    background: #0066cc;
    color: #ffffff;
    transform: scale(1.1);
}
.stat-card:hover .stat-icon-box svg {
    stroke: #ffffff;
}
.stat-number-wrap {
    font-size: 0.26rem;
    font-weight: 800;
    color: #0b2545;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.stat-number {
    display: inline-block;
}
.stat-unit {
    font-size: 20px;
    font-weight: 700;
    color: #0066cc;
    margin-left: 2px;
}
.stat-unit-text {
    font-size: 26px;
    font-weight: 700;
    color: #0066cc;
}
.stat-label {
    font-size: 0.16rem;
    color: #64748b;
    font-weight: 500;
}
/* 模块二：工程案例模块 (Case Studies) */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}
.case-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.case-img-box {
    height: 288px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.case-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(11, 37, 69, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}
.case-tag {
    background: #0066cc;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}
.case-card-body {
    padding: 25px;
    text-align: left;
}
.case-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 12px;
}
.case-desc {
    font-size: 0.16rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 18px;
}
.case-meta-list {
    border-top: 1px dashed #e2e8f0;
    padding-top: 15px;
    list-style: none;
    font-size: 13px;
    color: #475569;
}
.case-meta-list li {
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 0.16rem;
}
.case-meta-list strong {
    color: #0066cc;
}
/* 设备展示卡片 */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.equip-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    cursor: pointer;
}
.equip-img-placeholder {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    height: 278px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    position: relative;
    overflow: hidden;
}
.equip-img-placeholder img {
    width: 100%;
    height: 100%;
}
.equip-card-body {
    padding: 24px;
    text-align: left;
}
.equip-card-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 0.2rem;
}
.equip-card-desc {
    font-size: 0.16rem;
    color: #64748b;
    line-height: 1.7;
}
/* 资质荣誉卡片 */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.cert-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.cert-icon-wrap {
    width: 70px;
    height: 70px;
    background: #edf4fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.cert-icon-wrap svg {
    width: 28px;
    height: 28px;
    stroke: #0066cc;
}
.cert-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 0.16rem;
    margin-top: 0.18rem;
}
.cert-desc {
    font-size: 0.16rem;
    color: #64748b;
    line-height: 1.7;
    text-align: left;
}
/* 时间轴展示 */
.timeline-wrapper {
    position: relative;
    padding-left: 35px;
    margin-left: 15px;
}
.timeline-line-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e2e8f0;
}
.timeline-line-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, #0066cc 0%, #38bdf8 100%);
}
.timeline-item {
    position: relative;
    margin-bottom: 35px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -42px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #0066cc;
    box-shadow: 0 0 10px rgba(0, 102, 204, 0.3);
    z-index: 2;
}
.timeline-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    text-align: left;
}
.timeline-year {
    font-size: 0.26rem;
    font-weight: 800;
    color: #0066cc;
    margin-bottom: 6px;
}
.timeline-title {
    font-size: 0.22rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 8px;
}
.timeline-desc {
    font-size: 0.16rem;
    color: #64748b;
    line-height: 1.7;
}
/* GEO 地理定位区 */
.geo-contact-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    text-align: left;
}
.geo-info-title {
    font-size: 0.22rem;
    color: #0b2545;
    margin-bottom: 20px;
    font-weight: 700;
}
.geo-info-list {
    list-style: none;
    font-size: 0.16rem;
    color: #475569;
}
.geo-info-list li {
    margin-bottom: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.geo-info-list strong {
    color: #1e293b;
    min-width: 80px;
}
.geo-info-list svg {
    width: 20px;
    height: 20px;
    stroke: #0066cc;
    flex-shrink: 0;
    margin-top: 2px;
}
.visit-card-box {
    background: linear-gradient(135deg, #f8fafc 0%, #edf4fa 100%);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.visit-card-title {
    font-size: 17px;
    color: #0b2545;
    margin-bottom: 12px;
    font-weight: 700;
}
.visit-card-desc {
    font-size: 0.16rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 20px;
}
.visit-btn-primary {
    display: inline-block;
    text-align: center;
    background: #0066cc;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s;
}
.visit-btn-primary:hover {
    background: #0052a3;
}
/*  工作  */
/* 岗位分类 Filter 标签 */
.careers-main-content {
    padding: 70px 0;
}
.careers-main-content .section-title {
    font-size: 0.32rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 30px;
    border-left: 5px solid #0066cc;
    padding-left: 14px;
    text-align: left;
}
.job-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.filter-btn {
    padding: 8px 20px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-btn.active,
.filter-btn:hover {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
}
/* 招聘岗位 Accordion 卡片列表 */
.job-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.job-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: border-color 0.3s;
}
.job-card.active {
    border-color: #0066cc;
}
.job-header {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
}
.job-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.job-name {
    font-size: 18px;
    font-weight: 700;
    color: #0b2545;
}
.job-badge {
    background: #edf4fa;
    color: #0066cc;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}
.job-salary {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-blue);
}
.job-meta-inline {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
    width: 100%;
}
.job-toggle-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf4fa;
    color: #0066cc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.job-card.active .job-toggle-icon {
    transform: rotate(45deg);
    background: #0066cc;
    color: #ffffff;
}
.job-body {
    padding: 0 30px 30px 30px;
    display: none;
    border-top: 1px dashed #e2e8f0;
    margin-top: 10px;
    padding-top: 20px;
    text-align: left;
}
.job-section-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #0b2545;
    margin: 15px 0 8px 0;
}
.job-req-list {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}
.job-apply-box {
    margin-top: 25px;
    padding: 15px 20px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.job-apply-text {
    font-size: 13px;
    color: #64748b;
}
.btn-apply {
    background: #0066cc;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    transition: background 0.3s;
}
.btn-apply:hover {
    background: #0052a3;
}
/* 工作环境环境展示网格 */
.env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.env-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.env-img-box {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.contact-hr-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    color: #0b2545;
}
.env-card-body {
    padding: 20px;
}
.env-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 6px;
}
.env-card-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
/* CNC精密加工 */
.main-content {
    padding: 0.7rem 0;
}
.main-content .section-title {
    font-size: 0.32rem;
    font-weight: 700;
    color: #0b2545;
    margin-bottom: 30px;
    border-left: 5px solid #0066cc;
    padding-left: 14px;
    text-align: left;
}
/* 1. 基础 Header 样式（默认透明，适合有 Banner 的页面） */
/* 基础固定定位与默认透明样式 */
/* 带有 scrolled-active 时的背景/留白样式 */
.site-header.scrolled-active {
    background-color: #ffffff;
    /* 根据你的设计更改 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    /* 可选：增加阴影提升层级感 */
}
/* 有 Banner 页面，取消 main 默认留白，让 Banner 直接抵顶 */
body.has-banner main {
    padding-top: 0 !important;
}
/* 手机端 */
@media (max-width: 992px) {
    html {
        font-size: calc(100vw / 7.5) !important;
    }
    .header-container {
        padding: 16px 20px;
    }
    .nav-toggle {
        display: flex;
        padding: 5px;
        z-index: 1001;
    }
    /* 侧边弹出菜单：引入高级的模糊感，防止突兀 */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: rgba(22, 27, 34, 0.95);
        /* 深钛色带微透 */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 100px 24px 40px 24px;
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6);
        transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        /* 高端缓动 */
    }
    /* 当顶部上滑变白时，移动端侧边栏变为白底微透 */
    .site-header.scrolled-active .main-nav {
        background: rgba(255, 255, 255, 0.96);
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.08);
    }
    .main-nav.open {
        right: 0;
    }
    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        /* 列表项微小间距 */
        width: 100%;
    }
    .nav-list>li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .site-header.scrolled-active .nav-list>li {
        border-bottom-color: rgba(0, 0, 0, 0.04);
    }
    /* 一级菜单触摸状态优化 */
    .nav-list>li>a {
        padding: 18px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        color: var(--text-light);
        border-radius: 6px;
        transition: background 0.2s;
    }
    .site-header.scrolled-active .nav-list>li>a {
        color: #1f2328;
    }
    /* 增加手机端点击反馈（钛蓝微光） */
    .nav-list>li>a:active {
        background: rgba(0, 122, 255, 0.1);
    }
    /* 二级折叠菜单：不偏不倚，独立轻工业色块包围 */
    .dropdown {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        margin: 0;
        padding: 0;
        /* 移除之前设置的 height: auto !important，允许 JS 动态写入 height */
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height 0.35s ease, opacity 0.3s ease;
    }
    has-dropdown:hover .dropdown,
    .dropdown {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        margin: 0;
        padding: 0;
        /* 隐藏初始状态，交给 GSAP 接管 */
        height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
    }
    .dropdown a {
        padding: 12px 20px;
        font-size: 14px;
        color: var(--text-muted);
        display: block;
    }
    .dropdown a {
        padding: 14px 20px;
        font-size: 14px;
        color: var(--text-muted);
        display: block;
    }
    .site-header.scrolled-active .dropdown {
        background: rgba(0, 0, 0, 0.04);
    }
    .dropdown.js-open {
        opacity: 1 !important;
        margin: 8px 0;
        padding: 6px 0;
    }
    .dropdown a:active {
        background: rgba(0, 122, 255, 0.15);
        color: #fff;
    }
    /* 优化箭头动画旋转轴心 */
    .arrow {
        transform-origin: center 25%;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .arrow.rotate {
        transform: rotate(180deg);
    }
    /* 汉堡包按钮精致化 */
    .nav-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* 响应式适配 */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}
/*技术文档*/
.article-feed {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 1.2rem;
}
/* 文章独立条目 (article) */
.article-card {
    display: flex;
    background-color: #f2f3f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    /* GSAP 入场动画初始状态 */
    opacity: 0;
    transform: translateY(30px);
    transition: background-color 0.3s ease;
}
/* 封面图容器 */
.article-thumb {
    width: 320px;
    min-width: 320px;
    height: 200px;
    background-color: var(--accent-blue);
    /* 默认品牌蓝背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 品牌 Logo 文本标 */
.brand-logo {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
    user-select: none;
}
.brand-logo span {
    font-size: 28px;
    font-weight: 700;
}
/* 文章主体内容区 */
.article-body {
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 文章标题 */
.article-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
    line-height: 1.4;
}
.article-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}
.article-title a:hover {
    color: #00a0e9;
}
/* 元信息（日期） */
.article-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #86868b;
    margin-bottom: 14px;
}
.icon-calendar {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 文章摘要 */
.article-desc {
    font-size: 14px;
    color: #6e6e73;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 移动端响应式布局 */
@media (max-width: 768px) {
    .article-card {
        flex-direction: column;
    }
    .article-thumb {
        width: 100%;
        min-width: 100%;
        height: 180px;
    }
    .article-body {
        padding: 20px;
    }
}
/* 修复 WP 经典编辑器居中样式 */
.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
p.has-text-align-center,
p[style*="text-align: center"] {
    text-align: center !important;
}
/*文章内容样式*/
.article-body-box h2 {
    font-size: 23px;
    margin: 1.8em 0 .6em;
    padding-bottom: .3em;
    border-bottom: 2px solid #1f6feb;
    color: var(--accent-blue);
}
.article-body-box table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    font-size: 15px
}
.article-body-box th,
td {
    border: 1px solid #ebeaea;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top
}
.article-body-box th {
    background: #eef4ff
}
.article-body-box blockquote {
    margin: 1em 0;
    padding: 10px 16px;
    background: #f8f8e7;
    border-left: 4px solid var(--zl-brand);
    color: #333
}
.article-body-box .meta {
    color: var(--zl-muted);
    font-size: 14px;
    margin-bottom: 1em
}
.article-body-box .faq {
    border: 1px solid #e7e7e7;
    box-shadow: var(--box-shadow);
    padding: 14px 18px;
    margin: 1em 0;
    background: #fff;
    border-radius: 0.06rem;
}
.article-body-box .faq h3 {
    margin-top: 0;
    color: #103a6b
}
.article-body-box .tag {
    display: inline-block;
    background: #eef4ff;
    color: var(--zl-brand);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
    margin-bottom: 6px
}
.article-body-box .note {
    font-size: 13px;
    color: var(--zl-muted);
    background: #fff8e6;
    padding: 10px 14px;
    border-radius: 6px
}
.article-body-box .warn {
    font-size: 13px;
    color: #a1260a;
    background: #fff3f0;
    border-left: 4px solid #e23;
    padding: 10px 14px;
    border-radius: 6px
}
.article-body-box .toc {
    background: #e7fcff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 12px 35px;
    margin: 1.2em 0;
}
.article-body-box .toc b {
    color: #103a6b
}
.article-body-box .faq-item {
    margin-bottom: 0.1rem;
    padding: 0.2rem;
}
/*关于我们-设备管理切换*/
/* 轮播外层容器 relative 定位方便放置左右按钮 */
.equipment-swiper-container {
    position: relative;
    padding: 30px 0px;
    /* 给左右按钮留出空间 */
}
/* 保证所有 Slide 和 Card 等高 */
.equipment-swiper .swiper-slide {
    height: auto;
}
.equipment-swiper .equip-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* 自定义左右切换按钮定位与颜色 */
.equipment-btn-prev,
.equipment-btn-next {
    color: #1a1a1a;
    /* 替换为你的主题主色 */
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.equipment-btn-prev:after,
.equipment-btn-next:after {
    font-size: 16px;
    font-weight: bold;
}
.equipment-btn-prev {
    left: 0;
}
.equipment-btn-next {
    right: 0;
}
.equipment-btn-prev:hover,
.equipment-btn-next:hover {
    background: #0056b3;
    /* 悬停颜色 */
    color: #fff;
}
/* 调整底部分页器距离 */
.equipment-pagination {
    position: relative !important;
    margin-top: 30px;
}
/*资质荣誉鼠标移入效果*/
/* 图片容器：固定宽高比例并加圆角 */
.cert-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 统一固定为 4:3 比例，也可设为 16/9 或 1/1 */
    background-color: #f8f9fa;
    /* 边缘留白时的背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
/* 证书缩略图：平滑缩放效果 */
.cert-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* 完整显示，不裁剪 */
    padding: 10px;
    /* 适当留出内边距更精致 */
    transition: transform 0.3s ease;
}
/* 悬停遮罩层：默认透明，Hover 时显现 */
.cert-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    /* 暗色半透明背景 */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}
/* 鼠标移入（Hover）动画逻辑 */
.cert-card:hover .cert-hover-overlay {
    opacity: 1;
}
.cert-card:hover .cert-img {
    transform: scale(1.05);
    /* 移入时图片微放大，增加互动感 */
}
.cert-pagination {
    position: relative !important;
    margin-top: 0.25rem !important;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部分割线 */
    margin-top: 20px;
    padding: 15px 0;
    font-size: 12px;
    color: #888888;
}
.footer-bottom-container p {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-bottom a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-bottom a:hover {
    color: #ffffff;
}
.footer-bottom .divider {
    color: #555555;
}
@media (max-width: 992px) {
    body {
        font-size: 80px;
    }
    main {
        width: 100%;
        overflow: hidden;
    }
    .r-box {
        display: none;
    }
    .btn {
        padding: 15px 24px;
        font-size: 12px;
    }
    /* //about页面 */
    .about-hero .container {
        width: 80%;
        max-width: 100% !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
        box-sizing: border-box;
    }
    .about-hero-title {
        font-size: 0.5rem;
    }
    .about-hero-subtitle {
        font-size: 0.3rem;
    }
    .about-main-content .intro-grid {
        display: flex;
        flex-direction: column;
    }
    .about-main-content .intro-visual {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .intro-text-p {
        font-size: 0.3rem;
    }
    .about-main-content .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .about-main-content .stat-label {
        font-size: 15px;
    }
    .stat-number {
        font-size: 20px;
    }
    .about-main-content .equip-card-title {
        font-size: 15px !important;
    }
    .about-main-content .equip-card-desc {
        font-size: 13px;
    }
    .case-title {
        font-size: 0.3rem;
    }
    .case-desc {
        font-size: 0.2rem;
    }
    .case-meta-list li {
        font-size: 0.2rem;
    }
    .timeline-year {
        font-size: 0.4rem;
    }
    .timeline-title {
        font-size: 0.3rem;
    }
    .timeline-desc {
        font-size: 0.3rem;
    }
    .geo-info-title {
        font-size: 0.6rem;
    }
    .geo-info-list li {
        font-size: 0.25rem;
    }
    .section-block {
        margin-bottom: 0;
        /* 改成20px或者0，看你需要多少间距 */
    }
    .about-main-content {
        padding-top: 20px !important;
        padding-bottom: 0 !important;
    }
    .contact-container {
        width: calc(100% - 30px) !important;
        height: auto !important;
        padding: 30px 20px !important;
        border-radius: 5px;
        margin: 0 auto 30px auto !important;
        /* 核心改动：让内容从上往下排，不要居中，不要两端对齐 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        /* 靠上对齐 */
        align-items: flex-start !important;
        /* 靠左对齐 */
        box-sizing: border-box !important;
    }
    /* 隐藏右侧图片 */
    .contact-image-wrapper {
        display: none !important;
    }
    /* 清掉文字区域原本乱七八糟的边距 */
    .contact-content {
        padding-left: 0 !important;
        text-align: left !important;
    }
    /* 重新设定文字大小和间距，保证清晰 */
    .contact-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    .contact-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }
    /* 按钮恢复正常大小 */
    .btn-contact {
        display: inline-block !important;
        padding: 5px 16px !important;
        font-size: 12px !important;
    }
    .geo-contact-card {
        grid-template-columns: 1fr !important;
        /* 变成单列，上下排列 */
        gap: 20px !important;
    }
    .geo-info-list li {
        font-size: 0.2rem;
    }
    .visit-card-desc {
        font-size: 0.3rem;
    }
    .intro-grid {
        padding: 0.2rem;
    }
    .stat-unit-text {
        font-size: 0.4rem;
    }
    .equip-card-body {
        padding: 0.3rem;
    }
    .cert-pagination {
        /* 1. 把上面的间距改大，让它往下走 */
        margin-top: 0.5rem !important;
        /* 原来可能是 0.25rem，改成 0.5rem 或更大 */
        /* 2. 增加底部间距，防止它和下面的文字贴在一起 */
        margin-bottom: 0.3rem !important;
    }
    /* cnc页面 */
    .intro-grid {
        display: block !important;
        padding: 0.4rem !important;
        gap: 0 !important;
    }
    .cert-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.2rem !important;
    }
    .case-meta-list {
        font-size: 0.3rem;
    }
    .geo-info-title {
        font-size: 0.4rem;
    }
    .geo-contact-card {
        padding: 0.2rem;
    }
    .visit-card-desc {
        font-size: 0.15rem;
    }
    .main-content {
        padding: 0;
    }
    .timeline-desc {
        font-size: 0.2rem;
    }
    .faq-accordion {
        margin-bottom: 0;
    }
    /* job页面 */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.2rem !important;
    }
    .job-filter-bar {
        flex-wrap: 0;
    }
    .job-meta-inline {
        font-size: 0.15rem;
    }
    .job-name {
        font-size: 0.3rem;
    }
    .job-salary {
        font-size: 0.2rem;
    }
    .job-req-list li {
        font-size: 0.2rem;
    }
    .job-header {
        padding: 0.3rem;
    }
    .job-body {
        padding: 0.3rem;
    }
    .env-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.2rem !important;
    }
    .careers-main-content {
        padding: 0.4rem 0 0 0;
    }
    .env-card-desc {
        font-size: 0.15rem;
    }
    .env-card-title {
        font-size: 0.22rem;
    }
    .category-nav {
        padding-bottom: 0.2rem;
    }
    .news-grid {
        padding: 0.3rem;
    }
    .news-title {
        font-size: 0.35rem;
    }
    .news-excerpt {
        font-size: 0.2rem;
    }
    .news-grid {
        gap: 0.3rem;
    }
    .category-nav {
        padding-left: 0.3rem;
        padding-top: 0;
    }
    /* industry */
    .article-body article-body-box {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
    .prev-next-links {
        padding-left: 0.3rem;
    }
    .back-btn {
        padding-right: 0.2rem;
    }
    .article-body img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        /* 取消固定的宽高比 */
        object-fit: contain !important;
        /* 确保图片完整显示在框内，而不是裁剪 */
        display: block;
        /* 避免底部出现多余空隙 */
        margin: 0 auto;
        /* 居中显示 */
    }
    .section-title {
        margin: 0.3rem 0 0.5rem 0;
    }
    .section-desc {
        font-size: 0.25rem;
        padding: 0 0.2rem;
    }
    .container {
        padding: 0 0.3rem;
        margin-bottom: 0.5rem;
    }
    .article-body h2 {
        line-height: 0.5rem;
    }
    .styled-table {
        width: 100% !important;
        table-layout: fixed !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
    }
    .styled-table th,
    .styled-table td {
        white-space: normal !important;
        /* 取消不许换行的限制 */
        padding: 10px !important;
        /* 适当减小内边距，给文字留出更多空间 */
        font-size: 14px !important;
        /* 如果字体太大，适当缩小字体 */
    }
    .solution-tit {
        padding: 0 0.3rem 0.3rem 0.3rem;
    }
    .steps-grid {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        width: 100%;
    }
    .title-box {
        margin-bottom: 0.3rem;
    }
    .key-specs-list li {
        font-size: 0.2rem;
    }
    .btn-detail {
        font-size: 0.2rem;
    }
    .product-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    .sidebar {
        position: relative;
        width: 100%;
        margin-bottom: 0.3rem;
    }
    .main-container {
        display: flex;
        flex-direction: column;
        padding: 0.3rem;
        margin: 0;
    }
    .badge {
        background-color: #d14c0a !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        /* 核心：文字竖排 */
        writing-mode: vertical-rl !important;
        text-align: center !important;
        /* 调整内边距，让它好看（上下大，左右小） */
        padding: 8px 6px !important;
        /* 防止被挤压 */
        width: auto !important;
        height: auto !important;
        min-width: 20px !important;
        min-height: 40px !important;
        /* 给它一个最小高度，防止挤扁 */
        border-radius: 12px !important;
        margin-left: 6px !important;
        /* 确保它自身能垂直居中 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .news-excerpt {
        font-size: 0.3rem;
    }
    .news-time {
        font-size: 0.2rem;
    }
    .news-banner {
        height: 100%;
    }
    .category-item {
        font-size: 0.3rem;
    }
    .banner-bg {
        width: 100%;
    }
    article footer {
        justify-content: flex-start !important;
        gap: 0.5rem;
    }
    body {
        overflow-x: hidden !important;
        /* 只禁止横向滑动 */
        width: 100%;
    }
    .section-header {
        margin: 0 0 0 0;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
    .catalog-desc {
        font-size: 0.25rem;
    }
    .banner-box {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .catalog-title {
        font-size: 0.30rem;
    }
    .products-section {
        padding-bottom: 0;
    }
    .catalog-grid {
        gap: 0.4rem;
    }
    .detail-tabs-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        /* 防止页面整体左右晃动 */
    }
    /* 2. 关键步骤：利用 CSS 的伪元素或包裹层为表格提供滑动空间 */
    /* 因为你的 HTML 里 table 直接写在 section 下，我们可以使用 display:block 让表格自身变成可滚动容器 */
    .tech-table {
        display: block !important;
        /* 让表格变成块级元素，这样才能设置 overflow */
        width: 100% !important;
        /* 占满父容器宽度 */
        overflow-x: auto !important;
        /* 核心属性：内容超出时出现横向滚动条 */
        -webkit-overflow-scrolling: touch;
        /* 苹果手机滑动更顺滑 */
        white-space: nowrap !important;
        /* 强制表格内部内容不换行 */
        border: 1px solid #e0e0e0;
        /* 保持边框美观（可选） */
    }
    /* 3. 恢复表格内部单元格的正常排版（不要被挤压变形） */
    .tech-table th,
    .tech-table td {
        white-space: nowrap !important;
        /* 文字绝对不换行 */
        word-break: keep-all !important;
        padding: 10px 15px !important;
        /* 给单元格留出合适的呼吸空间 */
        font-size: 14px !important;
        /* 字体保持可读大小 */
        min-width: 80px;
        /* 给每一列设置一个最小宽度，防止列被压扁 */
    }
    /* 4. 美化一下滚动条（针对 Chrome/Safari 等 Webkit 浏览器） */
    .tech-table::-webkit-scrollbar {
        height: 6px;
        /* 滚动条高度 */
        display: block;
    }
    .tech-table::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* 滚动条轨道颜色 */
        border-radius: 3px;
    }
    .tech-table::-webkit-scrollbar-thumb {
        background: #007aff;
        /* 滚动条滑块颜色（你主题里的蓝色） */
        border-radius: 3px;
    }
    .solutions-grid {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    .spec-media {
        height: auto;
    }
    .key-specs-list strong {
        width: auto;
    }
    /* 产品卡片：消除图文间与文字间的大片空白 */
    .spec-details {
        padding: 0.06rem 0.16rem 0.16rem;
        justify-content: flex-start;
    }
    .spec-header {
        font-size: 0.2rem;
        line-height: 1.4;
        padding-bottom: 0.06rem;
        margin-bottom: 0.08rem;
    }
    .spec-badge {
        margin-bottom: 0.06rem;
    }
    .spec-excerpt-box .key-specs-list {
        height: auto;
        margin-bottom: 0;
    }
    .banner-content {
        margin-top: 0.1rem;
    }
    .description {
        height: auto;
    }
    .article-body p {
        font-size: 0.2rem;
    }
    .faq-accordion .section-desc {
        margin-bottom: 0rem;
    }
    .question-text {
        font-size: 0.24rem;
    }
    .faq-section .section-header {
        font-size: 0.3rem;
        justify-content: flex-start;
    }
    .faq-question {
        font-size: 14px;
        font-weight: 400;
    }
    .faq-body .feature-list li {
        display: block;
        font-size: 14px;
    }
    .product-hero-grid {
        padding: 0.2rem;
    }
    .trust-card-desc {
        font-size: 0.25rem;
    }
    .table-card {
        width: 100%;
        /* 保持宽度100% */
        overflow-x: auto;
        /* 核心：开启横向滚动 */
        -webkit-overflow-scrolling: touch;
        /* 移动端滑动更顺滑 */
        padding-bottom: 10px;
    }
    .styled-table {
        width: 100% !important;
        min-width: 900px !important;
        /* 核心：强制表格最小宽度为 900px (数值可根据需要调整，越大越宽) */
        table-layout: auto !important;
        /* 核心：让列宽根据内容自动撑开，不再死板等分 */
        white-space: nowrap;
        /* 核心：防止文字折行，让它撑开宽度 */
    }
    .styled-table th,
    .styled-table td {
        padding: 16px 20px !important;
        /* 原来可能只有 8px，增大上下左右的内边距 */
        line-height: 1.6;
        /* 增加行高，提升阅读体验 */
    }
    /* 针对您截图中看到的标签，也可以稍微加大一点 */
    .styled-table .material-badge {
        padding: 6px 12px;
        font-size: 12px;
        /* 稍微调大字体 */
    }
    .scene-tag {
        font-size: 0.18rem;
    }
    .left-info span {
        font-size: 0.25rem;
    }
    .spec-badge {
        font-size: 0.2rem;
    }
    .contact-box {
        display: flex;
        flex-direction: column;
    }
    .title-group h1 {
        margin-top: 0.5rem;
    }
    .line {
        /* 【核心修改】屏幕宽度的 10% */
        width: 15vw;
        /* 【必须加保底】防止屏幕太小时，线缩得看不见了 */
        min-width: 0.4rem;
        /* 【可选上限】防止屏幕特别大时，线变得太长太突兀 */
        max-width: 2rem;
        height: 1px;
        background-color: #8d8275;
        opacity: 0.6;
        margin: 0 10px;
        /* 保持和左右元素的间距 */
    }
    .brand-logos {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    .left-content {
        margin-left: 0.5rem;
    }
    .client-text {
        margin-left: 1rem;
    }
    .title-group p {
        font-size: 0.25rem;
    }
    .equipment-grid {
        padding-right: 0.2rem;
    }
    .contact-menu {
        display: none;
    }
    .intro-section {
        padding: 26px 0px;
        text-align: center;
    }
    .business-section {
        padding: 0;
    }
    .left-pipeline::before {
        border: 0;
    }
    .pipe-item.active {
        font-size: 14px;
    }
    .pipe-item {
        font-size: 14px;
    }
    .pipe-item::before {
        width: 4px;
        height: 4px;
    }
    .business-section {
        display: block;
    }
    .left-pipeline {
        flex-direction: unset;
        display: inline-flex;
        gap: 12px;
        width: auto;
        margin-bottom: 30px;
    }
    .pipe-item {
        padding-left: 14px;
    }
    .logo-img {
        width: 150px;
    }
    .glass-card {
        width: 80%;
        padding: 12px 15px;
    }
    .card-info h3 {
        font-size: 18px;
    }
    .card-info p {
        font-size: 12px !important;
    }
    .glass-panel {
        height: 270px;
        width: 94%;
        left: 3%;
    }
    .card-arrow {
        width: 25px;
        height: 25px;
    }
    .card-arrow::after {
        font-size: 14px;
    }
    .tag-container {
        display: none;
    }
    .card-info {
        width: 100%;
        padding-right: 0;
    }
    .product-card {
        height: 100%;
        border-radius: 7px;
        padding: 26px;
        display: block;
    }
    .btn-arrow {
        width: 20px;
        height: 20px;
    }
    .card-media {
        width: 100%;
        margin-top: 40px;
        padding: 0;
    }
    .more-btn span {
        font-size: 12px;
    }
    .panel-content h2 {
        font-size: 16px;
    }
    .panel-content p {
        font-size: 12px;
        line-height: 26px;
    }
    .custom-slide {
        width: 328px;
        height: 100%;
    }
    .arrow-btn {
        width: 24px;
        height: 24px;
    }
    .card-description {
        margin-bottom: 0;
    }
    .custom-slide {
        margin-top: 0;
    }
    .arrow-btn svg {
        width: 12px;
        height: 12px;
    }
    .card-image {
        height: 208px;
    }
    .card-footer {
        margin-top: 28px;
        display: flex;
        align-items: flex-start;
    }
    .footer-right {
        display: none;
    }
    .logo-footers .logo-img {
        width: 300px;
    }
    .hotline-btn {
        font-size: 14px;
    }
    .hotline-btn {
        padding: 6px 14px;
        font-size: 14px;
        line-height: 24px;
    }
    .faq-header {
        padding: 15px 7px;
    }
    .faq-accordion .faq-body {
        padding: 10px 14px 15px 14px;
        font-size: 12px;
    }
    .faq-answer-direct {
        font-size: 12px;
    }
    .hotline-btn svg {
        width: 20px;
        height: 20px;
    }
    .logo-footer img {
        width: 220px;
    }
    .left-section {
        padding: 66px 0px 0px 0px;
    }
    .solution h3{
        font-size: 0.38rem;
    }
    .home-product-img img{
        object-fit: cover;
        display: block;
    }
    .home-product-info{
        display: flex;
        flex-direction: column;
    }
    .products-section .section-header h2{
        font-size: 0.33rem;
                      padding: 38px 0 15px 0;
    }
    .products-section .section-header p{
           margin-bottom: 18px;
           text-align: center;
           font-size: 14px;
    }
    .catalog-box{
     display: flex;
    flex-direction: column;   
    }
    .solution-content {
    display: flex;
    flex-direction: column;
    }
    .form-title{
        font-size: 0.45rem;
    }
    .page-title{
        font-size: 0.5rem;
    }
    .brand-logos {
        display: none;
    }
    .client-text{
         display: none;
    }
    .left-content{
        margin-top: 0;
    }
    .spec-media img {
    display: block;
    width: 100%;
    height: auto;
     }
.catalog-img{
 height:5.8rem;
}
.section-header{
    display: block;
      padding: 0;
}
.section-desc{
    display: none;
}
.home-product-img{
    display: block;
}
.product-gallery img{
    width: 100%;
}
.right-section{
        padding: 32px 14px;
        border-radius: 8px;
}
.right-section .form-group{
        line-height: 18px;
}
.right-section .form-group label{
    font-size: 0.30rem;
}
.form-control{
    font-size: 0.28rem;
    margin: 12px 0;
}
textarea.form-control{
    margin-top: 10px;
}
.form-group p{
    line-height: 0;
}
/* 1. 强制移除 iOS 点击时的黑/灰高亮遮罩及默认触摸行为 */
    .dropdown a,
    .has-dropdown > a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    /* 2. 禁用移动端 CSS hover 触发机制，防止 iOS 模拟 hover 拦截点击 */
    .dropdown a:hover {
        background-color: transparent; /* 还原为你移动端需要的背景色 */
    }
    /* 3. 确保移动端二级菜单为手风琴流式布局，而非绝对定位悬浮窗 */
    .dropdown {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        box-shadow: none !important; /* 移除截图中的浮层阴影 */
        width: 100% !important;
    }
}