* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            line-height: 1.6;
            color: #333;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        :root{
    --color_zhuti: #0056b3;
    --color_hover: #f5bd1e;
    /*--ali_family: AlibabaPuHuiTibold;*/
    --transition_3:all .2s linear;
    --transition_5:all .5s linear;
    --transition_8:all .8s linear;
    --transform_scale: scale(1.08);
}


        /* 回到顶部按钮 */
        .back-top {
            position: fixed;
            right: 30px;
            bottom: 30px;
            width: 50px;
            height: 50px;
            background: #0066cc;
            color: #fff;
            text-align: center;
           line-height: 48px;
            font-size: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            z-index: 99;
            transition: background 0.3s;
        }
        .back-top:hover {
            background: #0052a3;
        }

        /* 顶部导航 */
        .header {
            background: #ffffff;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            
            /* 默认悬浮布局 */
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            border-radius: 90px;
            z-index: 100;
            transition: all 0.3s ease;
        }
/* 滚动后固定置顶 */
.header.scroll-active {
    background: #FFF;
   
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
}
.header.scroll-active .nav-links a {
    color: #333;
}
.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.logo img {
    height: 52px;
}
.nav-links {
    display: flex;
    gap: 50px;
    height: 80px;
}
.nav-links a {
    font-size: 18px;
    transition: color 0.3s;
    width: 60px;
    line-height: 80px;
}
.nav-links a:hover {
    color: #0066cc;
}
/* 移动端菜单按钮 */
.menu-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}
.header.scroll-active .menu-btn {
    color: #fff;
}

/* 移动端侧边菜单 */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #0066cc;
    z-index: 200;
    transition: right 0.3s ease;
    padding: 60px 20px;
}
.mobile-menu.show {
    right: 0;
}
.mobile-menu li {
    margin: 20px 0;
}
.mobile-menu a {
    color: #fff;
    font-size: 16px;
}
.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}
.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 199;
}
.mask.show {
    display: block;
}


/* Banner 轮播 */
/* 轮播图最外层容器 */
.banner-container {
    width: 100%;

    height: 953px;

    position: relative;
    overflow: hidden; /* 隐藏超出容器的部分 */

}

/* 包裹所有图片的长条 */
.banner-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* 平滑过渡动画 */
}

/* 单张图片样式 */
.banner-item {
    min-width: 100%;
    aspect-ratio: 1920/953; 
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
    padding-top: 200px;
    color: #fff;

}
.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满且不变形 */
}

.banner_btn {
    padding: 15px 35px;
    font-size: 20px; 
   
    font-weight: 500;
    border-radius:10px ;
}

.btn-banner {
    background-color: #fff;
    color: #0056b3;
    }
.btn-banner:hover {
    background-color: #f5bd1e;
    color: #fff;
    }


.btn-banner1 {
    background-color: #0056b3;
    color: #ffffff;  
    margin-left: 40px;
}

.btn-banner1:hover {
    background-color: #f5bd1e;
    border-color: #004494;
    transform: translateY(-2px);
}

.btn-banner2 {
    background-color: #086a67;
    color: #ffffff;
    
    margin-left: 40px;
}

.btn-banner2:hover {
    background-color: #f5bd1e;
    border-color: #004494;
    transform: translateY(-2px);
}

/* 底部指示点 */
.dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.dot {
    width: 30px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 90px;
    cursor: pointer;
    transition: background 0.3s;
}
.dot.active { background: white; transform: scale(1.2); }
.banner-item:nth-child(1) {
    background-image: url("/static/img/banner.jpg");
}
/*.banner-item:nth-child(2) {
    background-image: url("/static/img/banner_2.jpg");
}
.banner-item:nth-child(3) {
    background-image: url("/static/img/banner_3.jpg");
}
.banner-item:nth-child(4) {
    background-image: url("/static/img/banner_4.jpg");
}
/**.banner-item:nth-child(5) {
    background-image: url("/static/img/banner_5.jpg");
}
.banner-item:nth-child(5) {
    background-image: url("/static/img/banner_6.jpg");
}**/
.banner-container h1 {
    font-size: 66px;
    margin-bottom: 10px;
    font-weight: normal;
}
.banner-container h2 {
    font-size:96px;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.5;
    font-weight: bold;
}
.banner-container h3 {
    font-size: 66px;
    margin-bottom: 10px;    
     font-weight: bold;
}
.banner-container p {
    
    margin-top:50px ;
}

/* 服务项目 */

.main-container {
    display: flex;
    max-width: 1400px;
    margin: 50px auto;
    background: #FFF;
    min-height: 600px;
    
}

/* 左侧侧边栏 */
.sidebar {
    width: 240px;
    background-color: #fff;
    border-right: 1px solid #eee;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-right: 10px;
}

.sidebar-header {
    background-color: #0056b3;
    color: #fff;
    padding: 20px 20px 10px 20px;

}

.sidebar-header h2 {
    font-size: 24px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.sidebar-header p {
    font-size: 12px;
    opacity: 0.8;
}

.tab-list {
    list-style: none;
    padding-top: 10px;
    padding-left: 0;
}

.tab-item {
    padding: 15px 30px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: all 0.3s;
    position: relative;
    border-left: 4px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-item:hover {
    background-color: #f0f7ff;
    color: #0056b3;
}

.tab-item.active {
    background-color: #e6f0fa;
    color: #0056b3;
    border-left-color: #0056b3;
    font-weight: bold;
}
.tab-item.active::after{
    color: #0056b3;
}
.tab-item::after {
    content: '>';
    font-size: 16px;
    color: #000;
}
.tab-item:hover::after {
    content: '>';
    font-size: 16px;
    color: #0056b3;
}
/* 右侧内容区 */
.content-area {
    flex-grow: 1;
    padding: 20px;
    background-color: #fff;
    margin-left: 10px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

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

/* 网格布局 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* 卡片统一样式 */

.card_1{
    background: #fff;
    height:200px;
    border: 1px solid #eee;
    position: relative;
    transition: transform 0.2s;
    overflow: hidden;

}

/* HOT卡片只跨2列，样式和普通卡片一模一样 */
.hot-card {
    grid-column: span 2;
}
.hot-card::before{
        content: "HOT";
    font-size: 12px !important;
    color: #fff;
    position: absolute;
    right: 3px;
    top: 10px;
    transform: rotate(45deg);
    z-index: 2;
}
.hot-card::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 45px solid #E60012;
    transform: rotate(44deg);
    position: absolute;
    right: -40px;
    top: -10px;
    z-index: 1;
}
.card_1:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-img {
    width: 100%;
    height: 100%;
    background-color: #888;
    margin-bottom: 15px;
    filter: brightness(0.6)
}

.card_1 h3 {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 18px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    z-index:2;
    font-weight: normal;
}

.card_1 p {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* HOT角标 */
.hot-tag {
    position: absolute;
    
    right: 0px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========== 手机自适应 ========== */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        margin:10px;
    }
    .sidebar {
        width:100%;
        border-right:none;
        border-bottom:1px solid #eee;
    }
    .content-area {
        padding:15px;
    }
    /* 移动端hot卡片不再跨2列，独占1格 */
    .hot-card {
        grid-column: span 2;
    }
    .card-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .banner-container h1{ font-size:28px; }
    .banner-container h2{ font-size:30px; line-height:1.5rem;}
    .banner-container h3{ font-size:26px; }
    .header.scroll-active .menu-btn{ color: #0056b3; }
    .header{ width: 100%;  border-radius:0; top: 0px;}
    .banner-item{width: 100%; aspect-ratio: 1920 / 953; padding-top:10px; }
    .banner-container{width: 100%; aspect-ratio: 1920 / 953; margin-top:52px;}
    
    .dots{ bottom:10px;}
  
    .dot{ width:20px;}
    .banner-container p{ display:none;}
    .banner_btn{ font-size:14px; padding:5px;}
    .item-simple-title{ width: 100%;    white-space: break-spaces !important; font-size: 20px !important; margin-left: 5px; }
    .tab-list {
    display: flex;           /* 开启弹性盒子布局 */
    flex-wrap: wrap;         /* 允许换行（防止超出屏幕） */
}
   .tab-item {
    /* 核心代码：固定占据父容器 25% 的宽度（100% / 4 = 25%） */
    flex: 0 0 25%;           
    box-sizing: border-box;  /* 必须加这个，防止 padding 把宽度撑爆 */
    
    /* 保留你原有的样式（取消注释即可） */
    padding: 15px 0;         /* 手机端建议左右 padding 改为 0，让内容居中 */
    cursor: pointer;
    font-size: 14px;         /* 手机端字体建议适当调小 */
    color: #333;
    transition: all 0.3s;
    position: relative;
    display: flex;
    justify-content: center; /* 让文字在 25% 的空间内居中 */
    align-items: center;
    text-align: center;
}
.card_1 h3{ left:0px; padding:0 0 0 5px;}
.hot-card .card-img img{ min-height:140px;}
.card-img{ background-color:#fff;     filter: brightness(0.7);}

.banner-container{ height:auto;}

}
/* 报价模块 */
.quote-section {
    position: relative;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    color: #ffffff;
    overflow: hidden;
    background-image: url('/static/img/baojia.jpg');
    background-size: cover;
    background-position: center;

}

/* 遮罩 */
.quote-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: linear-gradient(90deg, rgb(26 56 95 / 0%) 0%, rgb(26 56 95 / 50%) 100%);
    z-index: 1;
}

/* 内容容器 */
.quote-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* 左侧文字 */
.quote-text {
    max-width: 600px;
}

.quote-title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.quote-desc {
    font-size: 22px;
    line-height: 1.6;
    opacity: 0.9;
    font-weight: 300;
}

/* 右侧按钮 */
.quote-buttons {
    display: flex;
    gap: 15px;
}
.btn {
    padding: 10px 30px;
    font-size: 20px; 
   
    font-weight: 500;
    border-radius:10px ;
}

.btn-pr{
    background-color: #fff;
    color: #0056b3;
     
  
    }
.btn-pr:hover {
    background-color: #f5bd1e;
    color: #fff;
    
    }

.btn-foot {
    background-color: #0056b3;
    color: #fff;
    padding: 10px 30px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    }
.btn-foot:hover {
    background-color: #f5bd1e;
    color: #fff;
    }
.btn-se {
    background-color: #0056b3;
    color: #ffffff;
    
    margin-left: 15px;
}

.btn-se:hover {
    background-color: #f5bd1e;
    border-color: #004494;
    
}




/* 移动端 */
@media (max-width: 768px) {
    .quote-section {
        height: auto;
        padding: 60px 20px;
    }
    .quote-content {
        flex-direction: column;
        text-align: center;
    }
    .quote-text {
        margin-bottom: 30px;
    }
    .quote-buttons {
        justify-content: center;
    }
  
}

/* 对比模块 */
/* --- 顶部文案区域 --- */
.vs-section {
    text-align: center;
    padding: 30px 20px 30px;
    margin: 0 auto;
}

.vs-section h1 {
    font-size: 34px;
    color: #222;
    margin-bottom: 20px;
    font-weight: normal;
}

.vs-section p {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
}

/* --- 核心对比区域 (模拟背景图) --- */
.comparison-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px 20px;
    position: relative;
}

/* 这个盒子就是那个“背景图”，利用CSS画出斜角 */
.contrast-card {
    width: 100%;
    max-width: 1350px;
    min-height: 536px;
    display: flex;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-image: url(/static/img/duibi.png);
    background-size: cover;
    background-repeat: no-repeat;
   
}

/* 左侧蓝色区域内容容器 */
.left-col {
    flex: 1.4;
    padding: 50px 40px;
    color: #fff;
    z-index: 2;
    /* 稍微向右偏移一点，避免文字贴边 */
    padding-right: 60px;
}

/* 右侧白色区域内容容器 */
.right-col {
    flex:0.8;
    padding: 50px 40px;
    color: #333;
    z-index: 2;
    /* 稍微向左偏移 */
    padding-left: 60px;
}

/* --- 标题样式 --- */
.col-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* --- 列表行样式 --- */
.compare-row {
    display: flex;
    margin-bottom: 25px;
    align-items: flex-start;
}

/* 第一列：分类名称 (方法/仪器...) */
.label {
    width: 70px;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.9;
    flex-shrink: 0;
    margin-top: 6px;
}

/* 第二列：图标 */
.icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}

/* 左侧对勾图标 */
.icon-check {
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
}
/* 右侧叉号图标 */
.icon-cross {
    border: 1px solid #ccc;
    color: #999;
}

/* 第三列：描述文本 */
.desc {
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}
.left-col .desc { border-bottom: 1px solid #fff; padding-bottom: 5px; }
.right-col .desc { border-bottom: 1px solid #333; padding-bottom: 5px;}

/* --- 中间的 VS 徽章 --- */
.vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: #0056b3;
    box-shadow: 0 0 0 10px rgba(255,255,255,0.3); /* 外发光效果 */
    z-index: 10;
}

/* --- 响应式适配 (手机端) --- */
@media (max-width: 768px) {
    .contrast-card {
        /* 手机上取消斜切，改为上下堆叠或简单的左右分栏 */
        background: #fff;
        flex-direction: column;
    }
    .left-col, .right-col {
        padding: 30px 20px;
        width: 100%;
    }
    .left-col {
        background-color: #0056b3; /* 手机上左侧变回纯蓝背景 */
    }
    .vs-badge {
        display: none; /* 手机上隐藏VS标 */
    }
    .label {
        width: 40px;
    }
}

/* 标准化模块 */
.standardization-section {
    width: 100%;

    padding: 60px 20px;
    background-image: url('/static/img/standard.png'); /* 模拟深蓝背景 */
    color: #fff;
    background-size: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 顶部标题 */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 34px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* 网格布局 */
.std-grid {
    display: grid;
    max-width: 1400px;
    grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    margin: 0 auto;
    gap: 30px;
    text-align: left;
}

/* 单个卡片样式 */
.std-card {
    background: #ffffff;
    border-radius: 0 30px 0 0;
    padding: 40px 60px;
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #333; /* 卡片内文字颜色 */
}

.std-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 左侧图标容器 */
.std-icon-wrapper {
    flex-shrink: 0; /* 防止图标被压缩 */
    width: 64px;
    height: 64px;
    background-color: #1565c0; /* 深蓝色圆圈 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40px;
    margin-top: 5%;
}

/* 图标本身 (SVG) */
.std-icon-wrapper img {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

/* 右侧文本内容 */
.std-content {
    flex: 1;
}

.std-title {
    font-size: 24px;
    font-weight: normal;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.4;
}

.std-desc {
    font-size: 18px;
    color: #666666;
    line-height: 1.6;
    text-align: justify;
}

/* --- 响应式适配 --- */
@media (max-width: 768px) {
    .std-grid {
        grid-template-columns: 1fr; /* 手机端变为单列 */
    }

    .std-card {
        padding: 30px 20px;
    }

    .section-header h2 {
        font-size: 24px;
    }
}
/*质量控制模块*/
.quality-control-wrap {
    width: 100%;
    padding: 50px 20px;
    background: #ffffff;
}
.qc-title {
    text-align: center;
    font-size: 34px;
    color: #222222;
    margin-bottom: 40px;
    font-weight: 500;
}
/* 手风琴外层容器 */
.qc-accordion {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    height: 520px;
    overflow: hidden;
}
/* 单个手风琴项 */
.accordion-item {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
   
}
.accordion-item:nth-child(1){ margin-right: 2%;}
.accordion-item:nth-child(2){ margin-right: 2%;}
.accordion-item:nth-child(3){ margin-right: 2%;}
/* 激活项加宽 */
.accordion-item.active {
    flex: 3.2;
}
/* 背景图容器 */
.item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    
}
/* 激活后加深蓝色蒙版 */
.item-content-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 60px 60px;
    /*background-color: rgba(0, 86, 169, 0.7);*/
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.accordion-item.active .item-content-box {
    opacity: 1;
}
/* 默认只显示标题 */
.item-simple-title {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    color: #222;
    white-space: nowrap;
    transition: opacity 0.3s;
}
.accordion-item.active .item-simple-title {
    opacity: 0;
}
/* 内容文字样式 */
.item-content-box h3 {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: normal;
}
.item-content-box p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 420px;
}
.tag-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 340px;
}
.tag-item {
    border: 1px solid #fff;
    padding: 8px 16px;
    font-size: 17px;
}
.more-txt {
    position: absolute;
    left: 50%;
    top: calc(25% + 36px);
    transform: translateX(-50%);
    font-size: 18px;
    color: #333;
    transition: opacity 0.3s;
}
.accordion-item.active .more-txt {
    opacity: 0;
}
.shrink-bg{ display:block; }
.open-bg{ display:none; }
/* 展开后切换显示 */
.accordion-item.active .shrink-bg{ display:none; }
.accordion-item.active .open-bg{ display:block; }

/* 客户评价-外层容器 */
.customer-eval-wrap {
  width: 100%;
  color: #ffffff; 
  position: relative;
  overflow: hidden;

  
}


/* 半透明装饰层 */
.customer-eval-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
   background-image: url('/static/img/hand-bg.png') ;
  width: 100%;
  height: 100%;
  transform: scaleX(1); 
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}
 .customer-section {
            width: 100%;
            max-width: 1400px;
            /* 这里不需要强制固定高度，让内容自然撑开即可 */
            margin: 0 auto;
            display: flex;
            position: relative;
            overflow: hidden;
            color: #fff;
           
        }

        /* --- 左侧内容区 (60%) --- */
        .customer-left-panel {
            width: 50%;
            margin-right: 10%;
            margin-top: 50px;
            padding: 40px 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2;
        }

        .customer-title {
            font-size: 34px;
            font-weight: bold;
            margin-bottom: 30px;
            line-height: 1.2;
        }

        .customer-desc-text {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 20px;
            text-align: left;
        }

        /* --- 底部数据统计区 --- */
        .customer-stats-row {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .customer-stat-item {
            display: flex;
            flex-direction: column;
        }

        .customer-stat-num {
            font-size: 42px;
            font-weight: bold;
            font-family: Arial, sans-serif;
            line-height: 1;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }

        .customer-stat-num sup {
            font-size: 16px;
            margin-left: 2px;
            margin-top: 5px;
        }

        .customer-stat-label {
            font-size: 20px;
            font-weight: 500;
        }

        /* --- 右侧视频区 (40%) --- */
        .customer-right-panel {
            width: 40%;
            padding-left: 20px;
            position: relative;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }

        /* 视频容器核心样式 */
        .customer-video-wrapper {
            width: calc(100% - 0px); /* 减去左右各20px的margin */
            margin:0  auto    ; /* 上下50px，左右20px */

            /* 关键修正：利用 aspect-ratio 锁定 16:9 比例 */
            aspect-ratio: 16 / 9;

            background-color: #000; /* 黑色占位 */
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        /* 视频标签样式 */
        .customer-video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保视频填满容器且不变形 */
            display: block;
        }

        /* 装饰背景圆（可选，为了更像截图） */
        .customer-bg-circle {
            position: absolute;
            right: -100px;
            top: -100px;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            pointer-events: none;
        }

/* logo滚动外层容器 */
.eval-logo-scroll-wrap{
  width:100%;
  overflow:hidden;
}
.eval-logo-line{
  overflow:hidden;
  margin-bottom:28px;
  
}
.eval-logo-con{
  display:flex;
  gap:16px;
  flex-wrap: nowrap;
}
.eval-logo-card {
  width:170px;
  height:100px;
  background:#fff;
border-radius: 12px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
   position: relative;
  display: inline-block;
  cursor: pointer;
}
.eval-logo-card img {
    width: 150px;
    height: 225px/128px;
 margin-left: 5%;
 margin-top: 7px;

}
/* 悬浮遮罩 + 文字 */
.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(245, 189, 30, 0.8); /* #0056b3 透明度80% */
  display: flex;
 border-radius: 12px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  opacity: 0; /* 默认隐藏 */
  transition: 0.3s; /* 平滑动画 */
}
.eval-logo-card:hover .img-overlay {
  opacity: 1;
}
/* 上行左移 */
.line1 .eval-logo-con{
  animation: toLeft 28s linear infinite;
}
/* 下行右移 */
.line2 .eval-logo-con{
  animation: toRight 34s linear infinite;
}
.line3 .eval-logo-con{
  animation: toLeft 32s linear infinite;
}
@keyframes toLeft {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes toRight {
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

/* 新闻动态 */
/* --- News 模块主容器 --- */
.news-section {
    width: 100%;
    margin-top: 50px;
    padding: 0 20px;
    background-image: url(/static/img/news.png);
    background-repeat: no-repeat;
}

/* --- 顶部标题 --- */
.news-header {
    text-align: center;
    margin-bottom: 40px;
}

.news-title {
    font-size: 34px;
    font-weight: normal;
    color: #000;
    display: inline-block;
    position: relative;
}

/* --- News 列表网格布局 (两列) --- */
.news-list-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px; /* 卡片之间的间距 */
}

/* --- 单个 News 卡片 --- */
.news-item {
    width: calc(50% - 15px); /* 减去间距的一半，实现两列并排 */
    background: #fff;
    border: 1px solid #e1e4e8; /* 浅灰色边框 */
    display: flex;
    align-items: center; /* 垂直居中 */
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 鼠标悬停效果 */
.news-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #d0d7de;
    transform: translateY(-2px);
}

/* --- News 图片区域 --- */
.news-thumb {
    width: 160px;
    height: 100px;
    background-color: #000; /* 黑色占位背景 */
    flex-shrink: 0; /* 防止图片被压缩 */
    margin-right: 25px;
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* 模拟截图中的深色图片效果 */
}

/* --- News 文字内容区域 --- */
.news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-headline {
    font-size: 20px;
    font-weight: normal;
    color: #222;
    line-height: 1.5;
    margin-bottom: 15px;
    /* 限制显示两行，多余省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-date {
    font-size: 14px;
    color: #888;
}

/* --- 底部查看更多按钮 --- */
.news-footer {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
}

.news-btn-more {
    display: inline-block;
    background-color: #0056b3; /* 深蓝色 */
    color: #fff;
    padding: 12px 45px;
    font-size: 16px;
    border-radius: 2px;
    transition: background 0.3s;
}

.news-btn-more:hover {
    background-color: #004494;
}

/* --- 响应式适配 (手机端变为单列) --- */
@media (max-width: 768px) {
    .news-item {
        width: 100%; /* 手机上一行一个 */
        flex-direction: row; /* 保持左图右文，或者改为 column 变成上图下文 */
    }
    .news-thumb {
        width: 120px;
        height: 80px;
    }
    .news-headline {
        font-size: 16px;
    }
     .item-content-box{ padding: 10px; }
      .item-content-box p{font-size:16px;}
      .customer-stats-row{ display:none;}
}

/* 优惠表单 */
.discount-section {
    background: #222;
    color: white;
    padding: 30px 20px;
    text-align: center;
}
.discount-section h3{ font-size: 34px; }
.discount-form {
    max-width: 1400px;
    margin: 20px auto 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.discount-form input {
    padding: 8px;
    border: none;
    font-size: 16px;
    flex: 1;
    min-width: 150px;
    outline: none;
    transition: box-shadow 0.3s;
}
.discount-form input:focus {
    box-shadow: 0 0 0 2px #0066cc;
}

/* 弹窗样式 */
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}
.popup-mask.show {
    display: flex;
}
.popup-box {
    width: 400px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    position: relative;
}
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}
.popup-box h4 {
    margin-bottom: 20px;
    color: #333;
}

/* 页脚 */
.footer {
    background: #222;
    color: #aaa;
    padding: 30px 20px;
    font-size: 14px;
}
.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-contact {

    flex: 1;
}
.footer-qr {
    display: flex;
    gap: 20px;
}
.qr-item {
    text-align: center;
}
.qr-img {
    width: 100px;
    height: 100px;
    margin-bottom: 5px;
    overflow: hidden;
}
.qr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.copyright {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
}
.foot_in{  font-size: 24px; }
.footer-center{
    width: ;
     display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    -moz-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    gap: 40px;
    margin-right: 5%;
}
.footer-center img{
    height: 60px;
    line-height: 60px;
    margin-left: 30%;
    font-size: 0;
    text-align: center;
    position: relative;}
.footer-center .tt{ margin-top: 11px; font-size: 16px; }
/* 移动端适配 */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .menu-btn {
        display: block;
    }
    .services-section { flex-direction: column; }
    .service-sidebar { width: 100%; }
    .vs-container { flex-direction: column; }
    .quality-grid { grid-template-columns: 1fr; }
    .back-top { right: 15px; bottom: 15px; }
    .popup-box {
        width: 90%;
    }

      .customer-left-panel{ width: 100% !important; padding: 15px !important; margin-right:0px !important; }
    .customer-right-panel{ display: none; }
    .customer-stat-num{ font-size: 32px; }
    .youce{ display: none; }
}


.youce{position: fixed;right:10px;top:50%;transform:translateY(-50%);width: 90px;z-index: 999;padding-left: 10px;}
.youce > a{background-color: #fff;border-radius: 8px;padding:18px 0 16px;font-size: 15px;text-align: center;background-color: #fff;display: block;line-height: 22px;background-color: var(--color_zhuti);color: #fff;box-shadow: 0 0 11px rgba(0, 0, 0, .1);margin-bottom:10px;}
.youce > a i{display: block;font-size:22px;padding-bottom: 4px;line-height: 1;}
.youce > a:hover{background-color: var(--color_hover);}
.youce > .divbox{border-radius: 8px;color: #555;box-shadow: 0 0 11px rgba(0, 0, 0, .1);padding:8px 0 14px;font-size: 14px;text-align: center;background-color: #fff;}
.youce > .divbox a{display: block;position: relative;transition: var(--transition_3);}
.youce > .divbox a .top{position: relative;transition: var(--transition_3);z-index: 222;background-color: #fff;padding:18px 0;}
.youce > .divbox a i{display: block;font-size: 22px;line-height: 1;padding-bottom: 4px;}
.youce > .divbox a:nth-last-child(1){padding-top: 6px;}
.youce > .divbox a:nth-last-child(1) i{padding-bottom: 0;}
.youce > .divbox a:hover{color: var(--color_zhuti);}
.youce .div1{position: absolute;right: calc(100% + 15px);top:0;background-color: #fff;width: 180px;;transform:scale(0) translateY(-50%);padding: 18px 0;text-align: center;font-size: 14px;color: #555;border-radius: 8px;box-shadow: 0 0 11px rgba(0, 0, 0, .1);}
.youce .div1 span{display: block;color: var(--color_zhuti);font-size: 18px;}
.youce .div1 img{display: block;margin:8px auto 0;width: 100%;max-width: 90px;}
.youce .div2{position: absolute;right: calc(100% + 15px);top:0;background-color: #fff;width: 180px;;transform:scale(0) translateY(-50%);padding: 18px 0;text-align: center;font-size: 15px;color: #555;border-radius: 8px;box-shadow: 0 0 11px rgba(0, 0, 0, .1);}
.youce .div2 span{display: block;color: var(--color_zhuti);font-size:18px;}
.youce .div2 b{display: block;color: var(--color_zhuti);font-size: 20px;}

.youce a .div{display:block;opacity: 0;right: -100%;z-index: 1;}
.youce a.active .div{opacity: 1;right: calc(100% + 10px);transform:scale(1) translateY(-50%);top:50%;}
.youce > .divbox a:nth-child(1) i{font-size: 24px;}
/* ==========导航下拉菜单新增样式========== */
.nav-item {
    position: relative;
    height: 80px;
    border-bottom: 5px solid transparent;
    padding-bottom: 2px;
    display: inline-block;
    text-align: center;
}
.nav-item:hover {
    /* 将透明边框变为指定颜色 */
    border-color: #0056b3;
}
/* 普通下拉小菜单 */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;   
    padding:12px 0;    
    opacity:0;
    visibility:hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index:999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.submenu li{
    padding:6px 20px;
}
.submenu li a{
    font-size:16px;
    color:#333;
    width: 100px;
    line-height: 20px;
}
.submenu li a:hover{
    color:#0066cc;
}
/* 试剂产品大四列下拉菜单 */
/* 试剂产品大四列下拉：固定宽度800px、居中 */
.big-sub{
    width:1450px !important;
    left: -150% !important;
    transform: translateX(-50%) translateY(10px);
    display:grid;
    grid-template-columns: repeat(4,1fr);
    padding:50px 60px;
    gap:22px;
    margin-top: 15px;
}
.big-sub .sub-col h4{
    font-size:18px;
    color:#0056b3;
    margin-bottom:8px;
    border-left:3px solid #0056b3;
    padding-left:8px;
    text-align: left;
}
.big-sub .sub-col a{line-height: 20px;}
.big-sub .sub-col ul{
    padding-left: 0;
}

.big-sub .sub-col ul li{
    padding:5px 0;
    text-align: left
}

/* hover展开：复位translateY，X保持居中 */
.has-sub:hover > .submenu{
    opacity:1;
    visibility:visible;
    transform: translateX(-50%) translateY(0);
}
/* 滚动置顶后导航下拉背景适配 */
.header.scroll-active .submenu{
    background:#fff;
}
/* 移动端导航隐藏下拉，沿用原有汉堡菜单 */
@media(max-width:768px){
    .submenu{display:none !important;}
}


.tcbox1{display: none;position: fixed;left: 0;top:0;width: 100%;height: 100%;background: #000;opacity: .2;z-index: 9999;}
.tcbox2{display: none;width:550px; background-color: #fff; border-radius: 18px;position: fixed;left: 0;right: 0;top:50%;transform:translateY(-50%);overflow: hidden;margin: 0 auto;max-width: 96%;padding: 50px 54px 30px;text-align: center;z-index: 99999;}

.tcbox2 .tcbox3{position: relative;z-index: 3;}
.tcbox2 .tt1{font-size: 38px;line-height: 1.3;color: var(--color_zhuti);}
.tcbox2 .tt2{font-size: 32px;line-height: 1.3;padding-top:9px;}
.tcbox2 textarea{ width: 100%;
    margin-top: 10px;
    
border: 1px solid var(--color_zhuti);padding: 0 20px;margin-top: 15px;border-radius: 8px;font-size:16px;
}
.tcbox2 .gb{font-size: 22px;line-height: 1.3;position: absolute;right: -33px;top:-33px;cursor: pointer;color: #666;}
.tcbox2 .gb:hover{color: var(--color_hover);}
.tcbox2 form{padding: 11px 0;display: block;}
.tcbox2 input{width: 100%;height: 52px;border: 1px solid var(--color_zhuti);padding: 0 20px;margin-top: 15px;border-radius: 8px;font-size:16px;}
.tcbox2 button{width: 100%;height: 52px;background: var(--color_zhuti);color: #fff;border: 0;margin-top: 22px;border-radius: 8px;font-size:20px;color: #fff;text-align: center;}
.tcbox2 button:hover{background-color: var(--color_hover);}
.tcbox2 .tt3{padding-top: 14px;color: var(--color_zhuti);font-size: 20px;}
@media (max-width:991px) {
    .tcbox2{padding: 40px 25px;}
    .tcbox2 .tt1{font-size: 26px;}
    .tcbox2 .tt2{font-size: 16px;padding-top: 5px;}
    .tcbox2 .gb{font-size: 22px;right: 0;top:-20px;}
    .tcbox2 form{padding: 8px 0;}
    .tcbox2 input{font-size: 14px;height: 46px;margin-top: 10px;border-width: 1px;}
    .tcbox2 button{height: 46px;margin-top: 10px;font-size: 18px;}
    .tcbox2 .tt3{font-size:16px;padding-top: 8px;}
}



.tcbox11{display: none;position: fixed;left: 0;top:0;width: 100%;height: 100%;background: #000;opacity: .2;z-index: 9999;}
.tcbox22{display: none;width:500px;background:url(https://hangtest.com//images/bj7.jpg)no-repeat center center/cover;border-radius: 18px;position: fixed;left: 0;right: 0;top:50%;transform:translateY(-50%);overflow: hidden;margin: 0 auto;max-width: 96%;padding: 50px 54px 30px;text-align: center;z-index: 99999;}
.tcbox22:after{content: "";width: 200px;height: 200px;background-color: rgba(20, 193, 113, .06);border-radius: 50%;position: absolute;right: -100px;top:-100px;z-index: 1;}
.tcbox22:before{content: "";width: 200px;height: 200px;background-color: rgba(20, 193, 113, .06);border-radius: 50%;position: absolute;left: -100px;bottom:-100px;z-index: 1;}
.tcbox22 .tcbox3{position: relative;z-index: 3;}
.tcbox22 .tt1{font-size: 34px;line-height: 1.3;color: var(--color_zhuti);text-align: left;}
.tcbox22 .tt2{font-size: 18px;line-height: 1.3;padding-top:9px;text-align: left;}
.tcbox22 .gb{font-size: 22px;line-height: 1.3;position: absolute;right: -33px;top:-33px;cursor: pointer;color: #666;}
.tcbox22 .gb:hover{color: var(--color_hover);}
.tcbox22 form{padding: 11px 0;display: block;}
.tcbox22 input{width: 100%;height: 52px;border: 1px solid var(--color_zhuti);padding: 0 20px;margin-top: 15px;border-radius: 8px;font-size:16px;}
.tcbox22 button{width: 100%;height: 52px;background: var(--color_zhuti);color: #fff;border: 0;margin-top: 22px;border-radius: 8px;font-size:20px;color: #fff;text-align: center;}
.tcbox22 button:hover{background-color: var(--color_hover);}
.tcbox22 .tt3{padding-top: 14px;color: var(--color_zhuti);font-size: 20px;}
@media (max-width:991px) {
    .tcbox22{padding: 40px 25px;}
    .tcbox22 .tt1{font-size: 26px;}
    .tcbox22 .tt2{font-size: 16px;padding-top: 5px;}
    .tcbox22 .gb{font-size: 22px;right: 0;top:-20px;}
    .tcbox22 form{padding: 8px 0;}
    .tcbox22 input{font-size: 14px;height: 46px;margin-top: 10px;border-width: 1px;}
    .tcbox22 button{height: 46px;margin-top: 10px;font-size: 18px;}
    .tcbox22 .tt3{font-size:16px;padding-top: 8px;}
}
        /* 触发区域样式 */
        .video-trigger-wrapper {
            position: relative;
            width: 50vw;
            max-width: 800px;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .video-trigger-wrapper img { width: 100%; display: block; }

        /* 播放按钮 */
        .play-btn {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 70px; height: 70px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%; border: none; color: white;
            cursor: pointer; display: flex; justify-content: center; align-items: center;
            transition: all 0.3s ease;
        }

        .video-trigger-wrapper:hover .play-btn {
            background-color: rgba(0, 123, 255, 0.9);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .play-icon {
            width: 0; height: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 20px solid white;
            margin-left: 4px;
        }

        /* 遮罩层与视频样式 */
        .overlay {
            display: none; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000; justify-content: center; align-items: center;
        }

        .overlay video {
            width: 50vw; height: auto; max-height: 80vh;
            background-color: #000; border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }