/* ===== 基础重置 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
background:#F5F7FA;
font-family:Microsoft Yahei,sans-serif;
font-size:14px;
color:#333;
padding-top:116px;
overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
/* ===== 通用容器 ===== */
.wrap-full{width:100%;}
.no-edge{
max-width:1240px;
margin:0 auto;
padding:0 15px;
}
/* ===== 首页 H1 隐藏 ===== */
.yifang-H1-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border-width:0;
}
/* ===== 顶部通知栏 ===== */
.top-notice-bar{
position:fixed;top:0;left:0;width:100%;
background:#1976D2;color:#fff;z-index:100;
height:36px;line-height:36px;
font-size:13px;
}
/* ===== 头部导航 ===== */
.header{
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,0.07);
position:fixed;top:36px;left:0;width:100%;z-index:99;
height:70px;
}
.logo-text{font-size:22px;font-weight:bold;color:#1D2939;white-space:nowrap;width: 200px}
.logo-badge{
width:38px;height:38px;background:#1976D2;border-radius:8px;
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:20px;font-weight:bold;flex-shrink:0;
}
.nav-item{position:relative;padding:0 16px;height:70px;display:flex;align-items:center;cursor:pointer;}
.nav-item>a{color:#333;font-weight:500;transition:color 0.2s;}
.nav-item:hover>a{color:#1976D2;}
.nav-drop{
position:absolute;left:0;top:100%;width:220px;background:#fff;
box-shadow:0 4px 16px rgba(0,0,0,0.12);display:none;
border-radius:0 0 8px 8px;overflow:hidden;z-index:10;
}
.nav-drop a{display:block;padding:12px 16px;color:#333;font-size:14px;transition:all 0.2s;}
.nav-drop a:hover{background:#f0f7ff;color:#1976D2;padding-left:20px;}
.nav-item:hover .nav-drop{display:block;}
.nav-search{
border:1px solid #dde2ec;border-radius:20px;
height:36px;display:flex;overflow:hidden;
}
.nav-search input{border:none;outline:none;padding:0 12px;width:140px;font-size:13px;}
.nav-search button{background:#1976D2;color:#fff;border:none;width:36px;cursor:pointer;flex-shrink:0;}
/* 移动端汉堡按钮 */
.mobile-toggle{
display:none;
flex-direction:column;justify-content:center;align-items:center;
width:40px;height:40px;cursor:pointer;gap:5px;
}
.mobile-toggle span{display:block;width:22px;height:2px;background:#333;border-radius:2px;transition:0.3s;}
.mobile-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-toggle.active span:nth-child(2){opacity:0;}
.mobile-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* 移动端菜单面板 */
.mobile-menu{
position:fixed;top:70px;left:0;width:100%;
background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);
z-index:98;max-height:0;overflow:hidden;transition:max-height 0.35s ease;
}
.mobile-menu.open{max-height:600px;overflow-y:auto;}
.mobile-menu-inner{padding:10px 20px 20px;}
.mobile-menu-inner>a,.mobile-menu-inner .mobile-sub-title{
display:block;padding:5px 0;border-bottom:1px solid #f0f0f0;
font-size:15px;color:#333;font-weight:500;
}
.mobile-menu-inner .mobile-sub-items{padding-left:16px;}
.mobile-menu-inner .mobile-sub-items p{padding:5px 0;}
.mobile-menu-inner .mobile-sub-items a{padding:8px 0;font-size:14px;color:#666;font-weight:normal;border:none;}
.mobile-menu-inner .mobile-search{margin-top:12px;}
.mobile-menu-inner .mobile-search input{
width:100%;border:1px solid #dde2ec;border-radius:8px;
height:40px;padding:0 14px;outline:none;
}
/* ===== Banner 区域 ===== */
.banner-section{position:relative;width:100%;overflow:hidden;background:#eef4fc;}
/* 左侧分类（保留样式，用于浮层） */
.left-cate{background:#fff;border-radius:0;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.15);}
.cate-title{
background:#1976D2;color:#fff;text-align:center;
height:45px;line-height:45px;font-size:16px;font-weight:bold;
}
.cate-list a{
display:block;height:42px;line-height:42px;padding:0 20px;
color:#333;border-bottom:1px solid #f4f4f4;transition:all 0.2s;
}
.cate-list a:hover{background:#f0f7ff;color:#1976D2;padding-left:24px;}
/* 全宽轮播 */
.banner-carousel{position:relative;width:100%;height:420px;overflow:hidden;background:#e8f0fe;}
.banner-slide{
position:absolute;top:0;left:0;width:100%;
opacity:0;transition:opacity 0.6s ease-in-out;
}
.banner-slide.active{opacity:1;z-index:1;
width: 100%;
height: 100%;
}
.banner-slide img{width:100%;height:100%;object-fit:cover;}
.banner-slide .banner-overlay{
position:absolute;bottom:0;left:0;right:0;
background:linear-gradient(transparent,rgba(0,0,0,0.65));
padding:50px 0 30px;color:#fff;
}
.banner-slide .banner-overlay .overlay-inner{
max-width:640px;margin:0 auto;padding:0 15px;
}
.banner-slide .banner-overlay h2{font-size:28px;font-weight:bold;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,0.3);}
.banner-slide .banner-overlay p{font-size:16px;opacity:0.95;text-shadow:0 1px 3px rgba(0,0,0,0.3);}
/* 左侧分类浮层 */
.banner-cate-overlay{
position:absolute;left:50%;top:0;transform:translateX(-50%);
z-index:5;display:flex;width:100%;max-width:1240px;height:100%;
padding:0 15px 0;pointer-events:none;
}
.banner-cate-overlay .left-cate{
pointer-events:auto;width:220px;flex-shrink:0;
background:rgba(255,255,255,0.96);height:auto;
}
/* 轮播箭头 */
.banner-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:64px;background:rgba(0,0,0,0.35);
border:none;color:#fff;font-size:24px;cursor:pointer;
z-index:6;opacity:0;transition:opacity 0.3s,background 0.2s;
display:flex;align-items:center;justify-content:center;
}
.banner-carousel:hover .banner-arrow{opacity:1;}
.banner-arrow:hover{background:rgba(0,0,0,0.55);}
.banner-prev{left:0;border-radius:0 6px 6px 0;}
.banner-next{right:0;border-radius:6px 0 0 6px;}
/* 指示点 */
.banner-dots{
position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
display:flex;gap:8px;z-index:6;
}
.banner-dots span{
width:10px;height:10px;border-radius:50%;
background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s;
}
.banner-dots span.active{background:#fff;width:28px;border-radius:5px;}
/* ===== 合作伙伴 ===== */
.partner-card{
border:1px solid #e8ecf2;border-radius:8px;height:90px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;background:#fff;transition:all 0.25s;padding:10px;
}
.partner-card:hover{box-shadow:0 4px 14px rgba(0,0,0,0.1);border-color:#c9d8eb;transform:translateY(-2px);}
.partner-card img{
max-width:100%;max-height:70px;object-fit:contain;
opacity:0.55;transition:all 0.3s;
}
.partner-card:hover img{filter:grayscale(0);opacity:1;}
/* ===== 模块通用 ===== */
.mod-box{background:#fff;border-radius:8px;padding:20px;margin:15px 0;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.mod-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.mod-title{font-size:18px;font-weight:bold;border-left:4px solid #1976D2;padding-left:12px;line-height:1.2;}
.mod-more{color:#1976D2;font-size:14px;transition:opacity 0.2s;}
.mod-more:hover{opacity:0.8;text-decoration:underline;}
/* ===== 产品卡片 ===== */
.pro-card{border:1px solid #eee;border-radius:8px;overflow:hidden;transition:all 0.25s;background:#fff;}
.pro-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.1);transform:translateY(-3px);border-color:#c9d8eb;}
.pro-img-box{position:relative;height:211px;overflow:hidden;background:#f8f8f8;}
.pro-img-box img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s;}
.pro-card:hover .pro-img-box img{transform:scale(1.06);}
.pro-tag {
position: absolute;
top: 8px;
right:8px;
background: #E53E3E;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 1;
}
@media (max-width: 768px) {
.pro-tag {
right: 30px;
}
}
.home-pro-tag {
position: absolute;
top: 8px;
right: 8px;
background: #E53E3E;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 1;
}
@media (max-width: 768px) {
.home-pro-tag {
right: 8px !important;
}
}
.pro-content{padding:12px;}
.pro-name{
font-weight:600;font-size:15px;margin-bottom:4px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:42px;line-height:1.4;
}
.pro-use{
font-size:12px;color:#666;margin-bottom:10px;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.pro-bottom{display:flex;justify-content:space-between;align-items:center;}
.pro-price{font-size:17px;color:#E53E3E;font-weight:bold;}
.pro-price small{font-size:12px;font-weight:normal;color:#999;}
.pro-source{font-size:12px;border:1px solid #1976D2;color:#1976D2;padding:1px 6px;border-radius:4px;}
/* ===== 新闻 ===== */
.news-time{color:#94a3b8;font-size:12px;white-space:nowrap;}
/* ===== FAQ ===== */
.faq-item{border:1px solid #E9EDF4;border-radius:12px;margin-bottom:14px;background:#fff;transition:all 0.24s ease;}
.faq-item:hover{border-color:#c9d8eb;box-shadow:0 2px 10px rgba(25,118,210,0.06);}
.faq-header{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.faq-header h4{font-size:15px;font-weight:500;color:#1F2937;margin:0;}
.faq-icon{
width:32px;height:32px;border-radius:50%;border:1px solid #D1DBE9;
display:flex;align-items:center;justify-content:center;
font-size:18px;color:#1976D2;flex-shrink:0;transition:all 0.25s ease;
}
.faq-item.active .faq-icon{background:#1976D2;color:#fff;border-color:#1976D2;}
.faq-body{max-height:0;overflow:hidden;transition:max-height 0.38s ease;}
.faq-body-inner{padding:0 22px 20px;color:#555966;line-height:1.75;}
.faq-item.active .faq-body{max-height:320px;}
/* ===== 计算器 ===== */
.calc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
.calc-item label{display:block;margin-bottom:6px;color:#444;font-size:14px;}
.calc-item input,.calc-item select{
width:100%;border:1px solid #dde2ec;border-radius:8px;
height:42px;padding:0 12px;outline:none;transition:border-color 0.2s;font-size:14px;
}
.calc-item input:focus,.calc-item select:focus{border-color:#1976D2;box-shadow:0 0 0 3px rgba(25,118,210,0.1);}
.calc-result{margin-top:18px;padding:18px;background:#f4f9ff;border-radius:8px;border-left:4px solid #1976D2;}
.calc-result p{margin-bottom:4px;}
.btn-calc{background:#1976D2;color:#fff;border:none;padding:10px 28px;border-radius:8px;cursor:pointer;font-size:14px;transition:background 0.2s;}
.btn-calc:hover{background:#1565C0;}
/* ===== 悬浮客服 ===== */
.float-service{position:fixed;right:1px;top:50%;transform:translateY(-50%);z-index:998;}
.service-box{width:60px;background:#fff;border-radius:8px 0 0 8px;overflow:hidden;box-shadow:-2px 2px 14px rgba(0,0,0,0.12);}
.service-box a{
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:10px 4px;font-size:11px;border-bottom:1px solid #E9EDF4;color:#333;transition:background 0.2s;
}
.service-box a i{font-size:18px;margin-bottom:4px;color:#1976D2;}
.service-box a:last-child{background:#0056b3;color:#fff;border-bottom:none;}
.service-box a:last-child i{color:#fff;}
.service-box a:not(:last-child):hover{background:#eaf4ff;}
/* ===== 定制流程步骤 ===== */
.custom-step-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;position:relative;}
.custom-step-num{
flex:0 0 40px;height:40px;border-radius:50%;
background:#1976D2;color:#fff;text-align:center;
line-height:40px;font-weight:bold;font-size:16px;
}
.custom-step-text{flex:1;padding-top:6px;}
.custom-step-item:not(:last-child):after{
content:"";position:absolute;left:20px;top:40px;
width:1px;height:calc(100% + 6px);background:#cbd5e1;
}
/* ===== line-clamp 兜底 ===== */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* ===== 响应式：平板 ===== */
@media(max-width:1024px){
.nav-search input{width:100px;}
.nav-item{padding:0 12px;}
}
/* ===== 响应式：手机 ===== */
@media(max-width:768px){
body{padding-top:72px;}
.top-notice-bar{display:none;}
.header{top:0;}
.mobile-toggle{display:flex;}
.desktop-nav{display:none !important;}
.banner-carousel{height:220px;}
.banner-cate-overlay{display:none;}
.banner-slide .banner-overlay{padding:30px 0 16px;}
.banner-slide .banner-overlay h2{font-size:18px;}
.banner-slide .banner-overlay p{font-size:13px;}
.banner-arrow{width:32px;height:48px;font-size:18px;}
.partner-card{height:70px;padding:6px;}
.partner-card img{max-height:50px;}
.pro-img-box{height:130px;}
.faq-header{padding:14px 16px;}
.faq-body-inner{padding:0 16px 16px;}
.calc-row{grid-template-columns:1fr;}
.mod-box{padding:16px;}
.mod-title{font-size:16px;}
.float-service{right:0;}
.service-box{width:50px;}
.service-box a{font-size:10px;padding:8px 2px;}
.service-box a i{font-size:16px;}
.custom-step-item{gap:12px;}
.footer-grid{grid-template-columns:1fr 1fr !important;gap:24px !important;}
}
/* 分页导航 */
.page-box {
display: flex;
justify-content: center;
margin-top: 30px;
flex-wrap: wrap;
}
.page-box .pagination {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.page-box .pagination li {
list-style: none;
}
.pagination{
align-items: center;
}
.page-box .pagination li a {
height: 36px;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: 0.2s;
text-decoration: none;
color: #333;
box-sizing: border-box;
}
/* 当前激活页 */
.page-box .pagination li.active a {
background: #1976D2;
color: #fff;
border-color: #1976D2;
}
/* hover 排除 active */
.page-box .pagination li:not(.active) a:hover {
border-color: #1976D2;
color: #1976D2;
}
/* “共 N 条” 文字项，去掉边框 */
.page-box .pagination li:first-child a {
border: none;
width: auto;
padding:0 6px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#F5F7FA;font-family:Microsoft Yahei,sans-serif;font-size:14px;color:#333;
padding-top:116px;
}
a{text-decoration:none;}
.wrap-full{
width:100%;
}
.no-edge{
max-width:1240px;
margin:0 auto;
padding:0 15px;
}
.top-notice-bar{
position:fixed;
top:0;
left:0;
width:100%;
background:#1976D2;
color:#fff;
z-index:100;
height:36px;
line-height:36px;
}
.header{
background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.07);
position:fixed;
top:36px;
left:0;
width:100%;
z-index:99;
height:70px;
}
.nav-item{position:relative;padding:0 18px;height:70px;display:flex;align-items:center;}
.nav-item:hover{color:#1976D2;}
.nav-drop{position:absolute;left:0;top:100%;width:220px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);display:none;border-radius:0 0 6px 6px;overflow:hidden;}
.nav-drop a{display:block;padding:12px 16px;color:#333;}
.nav-drop a:hover{background:#f0f7ff;color:#1976D2;}
.nav-item:hover .nav-drop{display:block;}
.nav-search{
border:1px solid #dde2ec;
border-radius:20px;
height:36px;
display:flex;
overflow:hidden;
}
.nav-search input{
border:none;
outline:none;
padding:0 12px;
width:160px;
}
.nav-search button{
background:#1976D2;
color:#fff;
border:none;
width:36px;
cursor:pointer;
}
.float-service {
position:fixed;
right:1px;
top:50%;
transform:translateY(-50%);
z-index:998;
}
.service-box {
width:124px;
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 14px rgba(0,0,0,0.12);
}
.service-box a {
display:block;
text-align:center;
padding:12px 4px;
font-size:14px;
border-bottom:1px solid #E9EDF4;
color:#333;
}
.service-box a:last-child {
background:#0056b3;
color:#fff;
border-bottom:none;
}
.service-box a:not(:last-child):hover {background:#eaf4ff;}
@media(max-width:768px){
.float-service {right:6px;}
.service-box {width:100px;font-size:13px;}
}
@media (max-width:768px){
body{padding-top:72px;}
.top-notice-bar{display:none;}
.header{top:0;}
.nav-search{display:none;}
}
:root {
--caiBlue: #1976D2;
--text-dark: #1d2129;
--text-normal: #383838;
--text-light: #86909c;
--border-color: #e5e7eb;
--bg-gray: #f4f6f9;
--card-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
img{max-width:100%;}
.flex{display:flex;}
.justify-between{justify-content:space-between;}
.items-center{align-items:center;}
.hidden{display:none;}
@media(min-width:768px){
.md:flex{display:flex;}
}
.breadcrumb{
max-width:1240px;
margin:0 auto;
padding:16px 15px;
font-size:14px;
color:var(--text-light);
}
.breadcrumb a{color:var(--caiBlue);}
.main-wrap{
max-width:1240px;
margin:0 auto 50px;
padding:0 15px;
display:grid;
grid-template-columns:840px 320px;
gap:30px;
}
@media(max-width:1180px){
.main-wrap{grid-template-columns:1fr;}
}
.article-card{
background:#fff;
border-radius:10px;
box-shadow:var(--card-shadow);
padding:36px;
}
.article-card h1{
font-size:28px;
font-weight:600;
color:var(--text-dark);
line-height:1.45;
margin-bottom:16px;
}
.article-content h2{
font-size:22px;
font-weight:600;
color:var(--text-dark);
margin:36px 0 16px;
padding-left:14px;
border-left:4px solid var(--caiBlue);
}
.article-content h3{
font-size:18px;
font-weight:600;
color:var(--text-dark);
margin:20px 0 12px;
}
.article-content h3::before{
content:"";
display:inline-block;
width:5px;
height:18px;
background-color:#ed2626;
transform:rotate(20deg);
margin-right:10px;
vertical-align:middle;
}
.article-meta{
font-size:14px;
color:var(--text-light);
padding-bottom:18px;
border-bottom:1px solid var(--border-color);
margin-bottom:24px;
}
.article-content p{
font-size:16px;
margin-bottom:18px;
color:var(--text-normal);
}
.article-content img{
border-radius:8px;
margin:16px 0;
}
.article-content table{
width:100%;
border-collapse:collapse;
margin:26px 0;
}
.article-content th,.article-content td{
border:1px solid var(--border-color);
padding:14px 16px;
font-size:15px;
}
.article-content th{
background:#f0f6ff;
color:var(--caiBlue);
font-weight:500;
}
.article-content ol,
.article-content ul {
list-style: none;
margin: 0;
padding-left: 1.2em;
}
/* ========== 有序列表 ol：1. 2. 3. ========== */
.article-content ol {
counter-reset: num;
}
.article-content ol li {
counter-increment: num;
position: relative;
}
.article-content ol li::before {
content: counter(num) ".";
position: absolute;
left: -1.2em;
width: 0.9em;
text-align: right;
}
/* ========== 无序列表 ul：默认实心圆点 ● ========== */
.article-content ul li {
position: relative;
}
.article-content ul li::before {
content: "●";
position: absolute;
left: -1.2em;
width: 0.9em;
text-align: right;
}
.page-nav{
display:flex;
justify-content:space-between;
margin:40px 0;
padding:20px 0;
border-top:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
}
.page-nav a{
max-width:45%;
font-size:15px;
color:var(--text-normal);
}
.page-nav a:hover{
color:var(--caiBlue);
}
.page-label{
font-size:14px;
color:var(--text-light);
margin-bottom:4px;
}
.article-recommend{
padding-top:30px;
border-top:1px solid var(--border-color);
}
.recommend-title{
font-size:18px;
font-weight:600;
color:var(--text-dark);
margin-bottom:20px;
}
.news-card-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:20px;
}
.news-card{
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 1px 8px rgba(0,0,0,0.06);
transition:0.24s;
}
.news-card:hover{
transform:translateY(-4px);
box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
.news-card-img{
height:107px;
overflow:hidden;
}
@media (max-width: 768px) {
.news-card-img {
height: 160px;      /* 移动端 */
}
}
.news-card-img img{
width:100%;
height:100%;
object-fit:cover;
margin:0;
}
.news-card:hover .news-card-img img{
transform:scale(1.06);
}
.news-card-body{
padding:14px;
}
.news-card-title{
font-size:15px;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom:6px;
}
.news-card-date{
font-size:13px;
color:var(--text-light);
}
@media(max-width:768px){
.news-card-wrap{grid-template-columns:1fr;}
}
.side-box{
background:#fff;
border-radius:10px;
box-shadow:var(--card-shadow);
padding:26px;
margin-bottom:24px;
}
.side-title{
font-size:18px;
font-weight:600;
color:var(--text-dark);
padding-bottom:12px;
margin-bottom:18px;
border-bottom:1px solid var(--border-color);
}
.side-prod-list{
display:flex;
flex-direction:column;
gap:14px;
}
.side-prod-card{
display:flex;
gap:12px;
border:1px solid var(--border-color);
border-radius:6px;
overflow:hidden;
transition:0.22s;
padding:8px;
}
.side-prod-card:hover{
box-shadow:var(--card-shadow);
border-color:var(--caiBlue);
}
.side-prod-img{
width:90px;
height:70px;
flex-shrink:0;
overflow:hidden;
margin-right: 10px;
border-radius:4px;
}
.side-prod-img img{
width:100%;
height:100%;
object-fit:cover;
}
.side-prod-card:hover img{
transform:scale(1.05);
}
.side-prod-name{
flex:1;
font-size:14px;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin:auto 0;
}
.form-item{
margin-bottom:14px;
}
.form-item input,.form-item textarea{
width:100%;
border:1px solid var(--border-color);
border-radius:6px;
padding:10px 12px;
font-size:14px;
outline:none;
transition:0.2s;
}
.form-item input:focus,.form-item textarea:focus{
border-color:var(--caiBlue);
}
.form-item textarea{
height:90px;
resize:none;
}
.submit-btn{
width:100%;
background:var(--caiBlue);
color:#fff;
border:none;
border-radius:6px;
height:42px;
font-size:15px;
cursor:pointer;
}
.submit-btn:hover{
background:#1565c0;
}
.mt-2{
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.footer{
background-color:#2c2c2d;background-color:#2c2c2d;padding:30px 20px;
}
.footer .grid{
display:grid;
}
.footer .md:grid-cols-4{
grid-template-columns: repeat(4,1fr);
}
.footer .gap-6{
gap:24px;
}
.footer h3,.footer h4{
color:#aliceblue;
}
.footer .text-gray-400{
color:#cccccc;
}
.footer .space-y-2 > * + *{
margin-top:8px;
}
.footer .border-t{
border-top-width:1px;
border-top-style:solid;
}
.footer .border-gray-700{
border-color:#444444;
}
.footer .mt-8{
margin-top:32px;
}
.footer .pt-6{
padding-top:24px;
}
.footer .text-center{
text-align:center;
}
@media(max-width:768px){
.footer .md:grid-cols-4 {grid-template-columns: 1fr;}
}
@media(max-width:768px){
.article-card{padding:24px 18px;}
.article-card h1{font-size:23px;}
.article-content h2{font-size:20px;}
.article-content h3{font-size:17px;}
.page-nav{flex-direction:column;gap:16px;}
.page-nav a{max-width:100%;}
}
/* ====================== 产品页面专属样式 ====================== */
.wrap {max-width: 1240px;margin: 0 auto;padding: 0 15px;}
.breadcrumb {
padding:16px 0;
font-size:14px;
}
.main-container{
display:flex;
gap:16px;
margin-bottom:50px;
}
.left-sidebar{
width:240px;
background:#fff;
border-radius:6px;
overflow:hidden;
height:fit-content;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
}
.sidebar-title{
font-size:16px;
font-weight:bold;
color:#fff;
text-align:center;
padding:0;
height:46px;
line-height:46px;
background:#1976D2;
margin-bottom:0;
border:none;
}
.cate-menu a{
display:block;
padding:0 20px;
height:44px;
line-height:44px;
font-size:14px;
border-bottom:1px solid #f2f2f2;
}
.cate-menu a:last-child{border:none;}
.cate-menu a:hover{padding-left:26px;color:#1976D2;background:#f7faff;}
.right-content{
flex:1;
}
.product-box-wrap{
background:#ffffff;
border-radius:8px;
padding:16px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
}
.product-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:16px;
margin-bottom:24px;
}
.pro-img img{
width: 100%;
height: 100%;
}
.pro-img{
height:163px;
background:#f4f7fc;
display:flex;
align-items:center;
justify-content:center;
font-size:48px;
color:#1976D2;
position:relative;
}

@media(max-width:992px){
.main-container{flex-direction:column;}
.left-sidebar{width:100%;}
.product-grid{grid-template-columns: repeat(3,1fr);}
}
@media(max-width:768px){
.product-grid{grid-template-columns: repeat(2,1fr);}
}
@media(max-width:480px){
.product-grid{grid-template-columns: 1fr;}
}
/* ====================== 【产品详情页面独有样式，保留你原有全部 UI】 ====================== */
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 15px;
}
.flex {
display: flex;
}
.between {
justify-content: space-between;
}
.center {
align-items: center;
}
/* 面包屑 */
.breadcrumb {
max-width: 1240px;
margin: 16px auto;
padding: 0 15px;
font-size: 14px;
color: #667085;
}
.breadcrumb a {
color: #1976D2;
}
/* 产品主视觉 */
.product-main {
background: #fff;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
}
.product-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: stretch;
}
.product-gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
.main-image {
width: 100%;
border-radius: 12px;
overflow: hidden;
background: #F5F7FA;
display: flex;
align-items: center;
justify-content: center;
}
.main-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-list {
display: flex;
gap: 10px;
}
.thumb-list
.thumb {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: 0.2s;
background: #F5F7FA;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb.active {
border-color: #1976D2;
}
.product-info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-info h1 {
font-size: 26px;
color: #1D2939;
margin-bottom: 12px;
line-height: 1.4;
}
.product-subtitle {
color: #667085;
font-size: 15px;
margin-bottom: 18px;
}
.price-bar {
background: linear-gradient(135deg, #eaf4ff, #ffffff);
border: 1px solid #dceaff;
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 22px;
}
.price-main {
font-size: 26px;
color: #c22727;
font-weight: 800;
}
.price-tip {
font-size: 13px;
color: #667085;
margin-top: 6px;
word-break: break-all;
}
.param-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 22px;
}
.param-list .param-item{
min-width:0;
}
.param-item {
background: #F5F7FA;
border-radius: 10px;
padding: 14px 16px;
}
.param-name {
font-size: 13px;
color: #667085;
margin-bottom: 4px;
}
.param-value {
font-size: 15px;
color: #1D2939;
font-weight: 600;
word-break: break-all;
}
.btn-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn-primary {
background: #1976D2;
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.24s;
}
.btn-primary:hover {
background: #1565C0;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(25, 118, 210, 0.25);
}
.btn-outline {
border: 1px solid #1976D2;
color: #1976D2;
background: transparent;
padding: 14px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.24s;
}
.btn-outline:hover {
background: #eaf4ff;
}
/* 优势横条 */
.advantage-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 30px;
}
.adv-card {
background: #fff;
border-radius: 12px;
padding: 18px 20px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
text-align: center;
}
.adv-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: linear-gradient(135deg, #1976D2, #00a3ff);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
font-size: 20px;
}
.adv-card h4 {
font-size: 15px;
color: #1D2939;
margin-bottom: 6px;
}
.adv-card p {
font-size: 13px;
color: #667085;
line-height: 1.6;
}
/* 详情 Tab 兼容 AI 抓取隐藏面板：原有 display:none 不变，补充备用兼容规则，不改动 JS 逻辑 */
.detail-tab {
background: #fff;
border-radius: 12px;
padding: 30px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
margin-bottom: 30px;
}
.tab-nav {
display: flex;
gap: 24px;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 24px;
flex-wrap: wrap;
}
.tab-btn {
padding: 12px 4px;
font-size: 15px;
color: #333;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-weight: 500;
transition: 0.2s;
}
.tab-btn.active {
color: #1976D2;
border-bottom-color: #1976D2;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.spec-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e5e7eb;
}
.spec-table th,
.spec-table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.spec-table th {
background: #eaf4ff;
color: #1D2939;
width: 180px;
font-weight: 600;
}
.spec-table tr:last-child td {
border-bottom: none;
}
.editor-content {
line-height: 2;
font-size: 15px;
}
.editor-content p {
margin-bottom: 16px;
}
/* 相关产品 */
.related {
margin-bottom: 30px;
}
.sec-title {
font-size: 22px;
color: #1D2939;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.sec-title::before {
content: "";
width: 4px;
height: 24px;
background: linear-gradient(180deg, #1976D2, #00a3ff);
border-radius: 2px;
}
.related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.related-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
transition: 0.24s;
}
.related-item:hover {
transform: translateY(-5px);
}
/**产品相关推荐下面的图片宽高要求**/
.related-image {
background: #F5F7FA;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 310px;
width: 100%;
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.related-image {
width: 280px;
height: 211px;
}
}
.related-text {
padding: 16px;
}
.related-text h4 {
font-size: 15px;
color: #1D2939;
margin-bottom: 8px;
font-weight: 600;
}
.related-price {
font-size: 18px;
color: #c22727;
font-weight: 800;
}
/* ========== 移动端详情页适配 ========== */
@media (max-width: 992px) {
.product-row {
grid-template-columns: 1fr;
}
.advantage-bar {
grid-template-columns: repeat(2, 1fr);
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.param-list {
grid-template-columns: 1fr;
}
.btn-row {
flex-direction: column;
}
.btn-primary,
.btn-outline {
width: 100%;
text-align: center;
}
.related-grid {
grid-template-columns: 1fr;
}
.product-main {
padding: 20px;
}
.detail-tab {
padding: 20px;
}
}
/* ======================【页面独立样式：应用场景模块】====================== */
.wrap {max-width: 1240px;margin: 0 auto;padding: 0 15px;}
.breadcrumb {
padding:16px 0;
font-size:14px;
}
/* ========== 材料分类筛选栏 ========== */
.filter-box{
background:#fff;
border-radius:8px;
padding:20px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
margin-bottom:30px;
}
.filter-title{
font-size:16px;
color:#1D2939;
font-weight:600;
margin-bottom:16px;
}
.filter-tag-list{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.filter-tag{
padding:8px 20px;
border:1px solid #e5e7eb;
border-radius:30px;
font-size:14px;
cursor:pointer;
transition:0.24s;
}
.filter-tag.active{
background:#1976D2;
color:#fff;
border-color:#1976D2;
}
.filter-tag:hover{
border-color:#1976D2;
color:#1976D2;
}
.filter-tag.active:hover{color:#fff;}
/* ========== 应用场景列表 ========== */
.scene-wrap{
background:#fff;
border-radius:8px;
padding:24px;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.06);
margin-bottom:40px;
}
.scene-grid{
display:grid;
grid-template-columns: repeat(3,1fr);
gap:20px;
}
.scene-card{
border:1px solid #e5e7eb;
border-radius:8px;
overflow:hidden;
transition:0.24s;
}
.scene-card:hover{
transform:translateY(-4px);
box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
.scene-img{
height:180px;
background:#f4f9ff;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
color:#1976D2;
}
.scene-body{
padding:16px;
}
.scene-body h3{
font-size:16px;
color:#1D2939;
margin-bottom:8px;
}
.scene-meta{
font-size:13px;
color:#1976D2;
margin-bottom:10px;
}
.scene-desc{
font-size:14px;
color:#444;
line-height:1.7;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* 隐藏非当前分类场景 */
.scene-item{display:none;}
.scene-item.show{display:block;}
/* 场景页面移动端适配 */
@media(max-width:992px){
.scene-grid{grid-template-columns: repeat(2,1fr);}
}
@media(max-width:768px){
.scene-grid{grid-template-columns:1fr;}
}
/* ==================== 【About 页面专属样式 】 ==================== */
:root {
--caiBlue: #1976D2;
--deepBlue: #003366;
--lightBlue: #eaf4ff;
--text-dark: #1d2129;
--text-normal: #4e5969;
--text-light: #86909c;
--border-color: #e5e7eb;
--bg-gray: #f7f8fa;
--card-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
--card-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
}
img {
max-width: 100%;
display: block;
}
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.items-center {
align-items: center;
}
.hidden {
display: none;
}
@media (min-width: 768px) {
.md:flex {
display: flex;
}
}
/* ==================== 面包屑 ==================== */
.breadcrumb {
max-width: 1240px;
margin: 0 auto;
padding: 18px 15px;
font-size: 14px;
color: var(--text-light);
}
.breadcrumb a {
color: var(--caiBlue);
}
/* ==================== Hero Banner ==================== */
.about-hero {
height: 420px;
background: linear-gradient(135deg, #003366 0%, #1976D2 45%, #007bff 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.about-hero::before {
content: "";
position: absolute;
inset: 0;
background: url("/upload/about_banner.jpg") center/cover no-repeat;
opacity: 0.35;
}
.hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 45%);
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
color: #ffffff;
max-width: 760px;
padding: 0 20px;
}
.hero-content h1 {
font-size: 42px;
font-weight: 800;
margin-bottom: 12px;
letter-spacing: 1px;
}
.hero-content p {
font-size: 18px;
opacity: 0.92;
margin-bottom: 24px;
}
.hero-badges {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.hero-badge {
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
padding: 8px 16px;
border-radius: 999px;
font-size: 14px;
backdrop-filter: blur(10px);
}
/* ==================== 数据亮点 ==================== */
.stats-section {
margin-top: -30px;
position: relative;
z-index: 4;
}
.stats-grid {
max-width:1240px;
margin:0 auto;
padding:0 15px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stat-card {
background: #ffffff;
border-radius: 16px;
padding: 28px 20px;
box-shadow: var(--card-shadow);
text-align: center;
border: 1px solid var(--border-color);
}
.stat-number {
font-size: 34px;
font-weight: 800;
color: var(--caiBlue);
margin-bottom: 8px;
}
.stat-label {
font-size: 15px;
color: var(--text-normal);
}
@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==================== 主容器 ==================== */
.main-wrap {
max-width: 1240px;
margin: 20px auto 30px;
padding: 0 15px;
display: grid;
grid-template-columns: 860px 340px;
gap: 32px;
align-items: flex-start;
}
/* ===== 修改重点：删除原生 sticky，改用 JS 控制 ===== */
.sidebar-sticky {
/* 移除 css sticky，交给 js 实现跟随 */
}
@media (max-width: 1200px) {
.main-wrap {
grid-template-columns: 1fr;
}
.sidebar-sticky {
position: static !important;
}
}
/* ==================== 模块标题 ==================== */
.section-title {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.section-title::before {
content: "";
width: 4px;
height: 28px;
background: linear-gradient(180deg, var(--caiBlue), #00a3ff);
border-radius: 2px;
}
/* ==================== 公司简介卡片 ==================== */
.intro-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 32px;
}
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: center;
}
.intro-text p {
font-size: 16px;
margin-bottom: 16px;
color: var(--text-normal);
line-height:1.8;
}
.intro-image {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow-soft);
}
.intro-image img {
width: 100%;
height: 260px;
object-fit: cover;
}
@media (max-width: 768px) {
.intro-grid {
grid-template-columns: 1fr;
}
}
/* ==================== 发展历程时间轴 ==================== */
.timeline-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 32px;
}
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: "";
position: absolute;
left: 6px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--caiBlue), #00a3ff);
}
.timeline-item {
position: relative;
padding-bottom: 28px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-item::before {
content: "";
position: absolute;
left: -24px;
top: 4px;
width: 14px;
height: 14px;
background: #ffffff;
border: 3px solid var(--caiBlue);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.15);
}
.timeline-year {
font-size: 20px;
font-weight: 700;
color: var(--caiBlue);
margin-bottom: 6px;
}
.timeline-desc {
font-size: 15px;
color: var(--text-normal);
}
/* ==================== 工厂图片墙 ==================== */
.factory-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 32px;
}
.factory-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.factory-item {
border-radius: 12px;
overflow: hidden;
position: relative;
}
.factory-item img {
width: 100%;
height: 200px;
object-fit: cover;
transition: 0.3s ease;
}
.factory-item:hover img {
transform: scale(1.05);
}
@media (max-width: 768px) {
.factory-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==================== 优势卡片 ==================== */
.advantage-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 32px;
}
.advantage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.adv-item {
padding: 24px;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
border: 1px solid var(--border-color);
transition: 0.24s ease;
}
.adv-item:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow);
border-color: var(--caiBlue);
}
.adv-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--caiBlue), #00a3ff);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
margin-bottom: 16px;
}
.adv-item h4 {
font-size: 17px;
color: var(--text-dark);
margin-bottom: 10px;
font-weight: 600;
}
.adv-item p {
font-size: 14px;
color: var(--text-normal);
line-height: 1.7;
}
@media (max-width: 992px) {
.advantage-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.advantage-grid {
grid-template-columns: 1fr;
}
}
/* ==================== 证书模块 ==================== */
.cert-card {
background: #ffffff;
border-radius: 16px;
padding: 32px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 32px;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cert-item {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
background: #fafafa;
}
.cert-item img {
width: 100%;
height: 220px;
object-fit: contain;
padding: 12px;
}
@media (max-width: 992px) {
.cert-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==================== 侧边栏盒子 ==================== */
.side-box {
background: #ffffff;
border-radius: 16px;
padding: 28px;
box-shadow: var(--card-shadow-soft);
border: 1px solid var(--border-color);
margin-bottom: 24px;
}
.side-title {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
padding-bottom: 12px;
margin-bottom: 18px;
border-bottom: 1px solid var(--border-color);
}
.side-nav li {
list-style: none;
}
.side-nav li a {
display: block;
padding: 11px 14px;
border-radius: 8px;
margin-bottom: 8px;
font-size: 15px;
color: var(--text-normal);
}
.side-nav li a.active,
.side-nav li a:hover {
background: var(--lightBlue);
color: var(--caiBlue);
font-weight: 600;
}
/* 表单 */
.form-item {
margin-bottom: 14px;
}
.form-item input,
.form-item textarea {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 11px 14px;
font-size: 15px;
outline: none;
background: #fcfcfc;
transition: 0.2s ease;
}
.form-item input:focus,
.form-item textarea:focus {
border-color: var(--caiBlue);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.08);
}
.form-item textarea {
height: 90px;
resize: none;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--caiBlue), #007bff);
color: #ffffff;
border: none;
border-radius: 8px;
height: 44px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: 0.24s ease;
}
.submit-btn:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(25, 118, 210, 0.25);
}
/* ==================== 移动端 about 适配 ==================== */
@media (max-width: 768px) {
.about-hero {
height: 300px;
}
.hero-content h1 {
font-size: 28px;
}
.hero-content p {
font-size: 15px;
}
.section-title {
font-size: 22px;
}
.intro-card,
.timeline-card,
.factory-card,
.advantage-card,
.cert-card,
.supply-card {
padding: 24px 18px;
}
}
/* ========== FAQ 原有样式 完整保留 ========== */
.sec-title {text-align:center;margin:0 0 32px;}
.sec-title h2 {font-size:26px;color:#1d2129;margin-bottom:8px;position:relative;display:inline-block;}
.sec-title h2:after {content:"";width:60px;height:3px;background:#0056b3;position:absolute;left:50%;transform:translateX(-50%);bottom:-10px;}
.sec-title p {color:#86909c;font-size:15px;}
.faq {padding-bottom:10px;max-width:1240px;margin:0 auto;padding-left:15px;padding-right:15px;}
.faq-wrap {max-width:940px;margin:0 auto;}
.faq-item {background:#fff;border-radius:10px;margin-bottom:12px;box-shadow:0 6px 24px rgba(0, 0, 0, 0.06);overflow:hidden;}
.faq-q {padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;color:#1d2129;}
.faq-q span:last-child {transition:0.3s;}
.faq-q.active span:last-child {transform:rotate(180deg);display:inline-block;}
.faq-a {padding:0 22px;height:0;overflow:hidden;color:#4e5969;transition:all 0.3s ease;}
.faq-a-inner {padding-bottom:18px;line-height:1.7;}
/* ========== 参观工厂页面新增样式 ========== */
.breadcrumb-wrap{
padding:16px 15px;
font-size:14px;
color:#667085;
}
.breadcrumb-wrap a{color:#1976D2;}
/* 横向选项卡导航，手机可横向滚动 */
.factory-tab-wrap{
background:#fff;
border-radius:6px;
overflow-x:auto;
margin:15px 0;
}
.factory-tab{
display:flex;
min-width:max-content;
}
.factory-tab-item{
padding:14px 20px;
cursor:pointer;
border-bottom:2px solid transparent;
font-size:14px;
white-space:nowrap;
}
.factory-tab-item.active{
color:#1976D2;
border-bottom:2px solid #1976D2;
font-weight:bold;
}
/* tab 内容容器 */
.factory-tab-content{
display:none;
}
.factory-tab-content.show{
display:block;
}
/* 图片网格 */
.factory-img-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.factory-img-card{
border-radius:8px;
overflow:hidden;
border:1px solid #E9EDF4;
}
.factory-img-card img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}

/**/
.factory-img-grid-single{
border-radius:8px;
overflow:hidden;
border:1px solid #E9EDF4;
}
.factory-img-grid-single img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}
.factory-img-desc{
padding:10px;
font-size:13px;
color:#444;
}
/* 客户评价卡片 */
.review-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
.review-item{
background:#F5F7FA;
padding:18px;
border-radius:8px;
border:1px solid #E9EDF4;
}
.review-name{
font-weight:bold;
margin-bottom:6px;
}
.review-star{
color:#FFC107;
margin-bottom:8px;
}
@media(max-width:768px){
.float-service {right:6px;}
.service-box {width:100px;font-size:13px;}
}
@media (max-width:768px){
body{padding-top:72px;}
.top-notice-bar{display:none;}
.header{top:0;}
.nav-search{display:none;}
.factory-img-grid{
grid-template-columns:repeat(2,1fr);
}
.review-grid{
grid-template-columns:1fr;
}
}
/* 搜索关键词高亮 */
.highlight{color:#E53E3E;font-weight:bold;}
/* 分页样式 */
.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:30px;
}
.pagination a,
.pagination span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 12px;
  font-size:14px;
  border:1px solid #e5e7eb;
  border-radius:4px;
  box-sizing:border-box;
  color:#333;
}
.pagination a:hover{
  border-color:#1976D2;
  color:#1976D2;
}
.pagination .current{
  background:#1976D2;
  color:#fff;
  border-color:#1976D2;
}

/* =====搜索结果分页 ===== */
.page-list{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:30px;
  flex-wrap:wrap;
}
.page-list a,
.page-list span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 12px;
  border:1px solid #dde2ec;
  border-radius:4px;
  box-sizing:border-box;
}
.page-list a:hover{
  background:#f0f7ff;
  color:#1976D2;
  border-color:#1976D2;
}
.page-list span.current{
  background:#1976D2;
  color:#fff;
  border-color:#1976D2;
}

/* 无搜索结果样式 */
.empty-search{text-align:center;padding:60px 20px;color:#666;}
.empty-search i{font-size:48px;color:#cdd6e4;margin-bottom:16px;}
.float-service {
position:fixed;
right:1px;
top:50%;
transform:translateY(-50%);
z-index:998;
}
.service-box {
width:124px;
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 14px rgba(0,0,0,0.12);
}
.service-box a {
display:block;
text-align:center;
padding:12px 4px;
font-size:14px;
border-bottom:1px solid #E9EDF4;
color:#333;
}
.service-box a:last-child {
background:#0056b3;
color:#fff;
border-bottom:none;
}
.service-box a:not(:last-child):hover {background:#eaf4ff;}
@media(max-width:768px){
body{padding-top:72px;}
.top-notice-bar{display:none;}
.header{top:0;}
.pro-img-box{height:120px;}
.nav-search{display:none;}
.float-service {right:6px;}
.service-box {width:100px;font-size:13px;}
}
/* ========== 新增搜索页移动端适配 CSS========== */
.breadcrumb{padding:12px 16px;font-size:14px;color:#666;}
.mod-box{margin-bottom:24px;padding:16px;}
.mod-head{margin-bottom:16px;}
.mod-title{font-size:18px;font-weight:bold;margin:0 0 8px 0;}
/* 列表项 移动端适配 */
.ep-list-item{
display:flex;
gap:14px;
padding:14px 0;
border-bottom:1px solid #eee;
}
.ep-thumb{
width:110px;
height:80px;
object-fit:cover;
border-radius:6px;
flex-shrink:0;
}
.ep-flex-grow{
flex:1;
}
.ep-article-title a{
font-size:15px;
color:#1976D2;
text-decoration:none;
}
.ep-list-desc{
font-size:13px;
color:#666;
margin:6px 0;
line-height:1.5;
}
.ep-meta{
display:flex;
flex-wrap:wrap;
gap:8px 12px;
font-size:12px;
color:#888;
}
.ep-badge{
background:#f0f7ff;
color:#1976D2;
padding:2px 6px;
border-radius:3px;
text-decoration:none;
}
.empty-search{
text-align:center;
padding:40px 20px;
color:#777;
}
.highlight{
color:#f5222d;
font-weight:bold;
}
/* 小屏幕 */
@media(max-width:767px){
.ep-list-item{gap:10px;padding:12px 0;}
.ep-thumb{width:86px;height:64px;}
.ep-meta{gap:6px 8px;font-size:11px;}
}
/* 默认：PC 显示，移动端隐藏 */
.banner-pc-wrap{
display:block;
}
.banner-mobile-wrap{
display:none;
}
/* 小于 768px：隐藏 PC，显示移动端轮播，同时隐藏左侧分类 */
@media (max-width:767px) {
.banner-pc-wrap{
display:none !important;
}
.banner-mobile-wrap{
display:block !important;
}
.banner-cate-overlay{
display:none !important;
}
}
/*恢复编辑器正文里面 H 标签字号加粗，不影响网站其他标题*/
.editor-content h2{
font-size: 24px !important;
font-weight: 700 !important;
margin: 15px 0 !important;
line-height: 1.6;
border-left: 4px solid #0182ff;
padding-left: 14px;
margin: 36px 0 16px;
}
.editor-content h3{
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.6;
border-left: 4px solid #b2d7fb;
padding-left: 14px;
margin: 20px 0;
}
.editor-content h4{
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.6;
border-left: 4px solid #f7d85e;
padding-left: 14px;
margin: 20px 0;
}
.editor-content p{
font-size: 16px;
margin-bottom: 18px;
}
.editor-content img {
width: 100%;
}
/*恢复编辑器应用场景加粗*/
.sr-only-yycj {
display:block !important;
visibility:visible !important;
opacity:1 !important;
font-size:28px !important;
font-weight:bold !important;
color:#222 !important;
margin:10px 0 26px 0;
line-height:1.4;
}
/* 外层容器 右侧垂直居中 */
.sidebar-kf {
position: fixed;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 99999;
}
/*资讯页面的样式调整*/
.article-card div,
.article-card p,
.article-card ul,
.article-card ol,
.article-card li{
font-size: 16px;
line-height: 1.8;
color: #444;
margin-bottom: 14px;
}
.article-card dd{
font-size: 15px;
line-height: 1.8;
color: #444;
}
.article-card dt{
font-weight: bold;
font-size: 16px;
line-height: 1.7;
margin-top: 14px;
margin-bottom: 8px;
color: #222;
counter-increment: num;
}
.article-card dl{
counter-reset: num;
}
.article-card dt::before{
content: counter(num) ". ";
font-weight: bold;
}
.article-card table{
width: 100%;
border-collapse: collapse;
}
.article-card table th,
.article-card table td {
text-align: center;    /* 水平居中 */
vertical-align: middle;/* 垂直居中 */
}
/* 右侧竖向橙色客服按钮 */
.kf-vertical-btn {
width: 42px;
height: 160px;
background: linear-gradient(180deg, #ff7a00 0%, #ff5a00 100%);
border-radius: 21px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(255, 122, 0, 0.35);
transition: 0.3s ease;
position: relative;
}
.kf-vertical-btn:hover {
box-shadow: 0 12px 28px rgba(255, 122, 0, 0.45);
}
.kf-vertical-btn i {
font-size: 22px;
margin-bottom: 8px;
}
.kf-vertical-btn span {
font-size: 13px;
writing-mode: vertical-rl;
letter-spacing: 2px;
font-weight: 500;
}
/* 白色客服弹窗卡片  顶部对齐按钮顶部，弹窗底部留出空隙，不贴死底边 */
.kf-popup-card {
position: absolute;
right: 52px;
top: -100%;
transform: translateY(-50%);
/*往下偏移 20px，底部自然就多出空白距离，你可以修改 20 这个数字调大小*/
transform: translateY(20px);
width: 260px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
overflow: hidden;
display: none;
flex-direction: column;
animation: popUp 0.3s ease forwards;
}
.kf-popup-card.show {
display: flex;
}
/* 头部 */
.popup-header {
background: linear-gradient(180deg, #ff7a00 0%, #ff5a00 100%);
padding: 18px 16px 14px;
color: #fff;
text-align: center;
position: relative;
}
.popup-close {
position: absolute;
top: 12px;
right: 12px;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
transition: 0.2s;
}
.popup-close:hover {
opacity: 1;
}
.popup-header h2 {
font-size: 20px;
font-weight: 600;
}
.popup-header p {
font-size: 13px;
opacity: 0.85;
margin-top: 4px;
}
/* 内容区域 */
.popup-body {
padding: 12px 14px;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px;
background: #f7f9fc;
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: 0.2s;
}
.menu-item:last-child {
margin-bottom: 0;
}
.menu-item:hover {
background: #fff7ed;
}
.menu-left {
display: flex;
align-items: center;
gap: 10px;
}
.menu-left i {
color: #ff7a00;
font-size: 18px;
}
.menu-left span {
font-size: 15px;
color: #333;
}
.menu-right {
color: #999;
font-size: 13px;
}
/* 二维码区域 */
.qr-section {
margin-top: 12px;
padding: 12px;
background: #f7f9fc;
border-radius: 10px;
text-align: center;
}
.qr-section img {
width: 130px;
height: 130px;
border-radius: 8px;
object-fit: contain;
border: 1px solid #eee;
display: block;
margin: 0 auto;
}
.qr-title {
margin-top: 8px;
font-size: 14px;
color: #666;
}
/* 底部工具栏 */
.bottom-bar {
display: flex;
margin: 12px 14px 14px;
background: #f7f9fc;
border-radius: 10px;
overflow: hidden;
}
.bottom-btn {
flex: 1;
text-align: center;
padding: 10px 5px;
color: #666;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
border-right: 1px solid #eee;
}
.bottom-btn:last-child {
border-right: none;
}
.bottom-btn:hover {
background: #fff7ed;
color: #ff7a00;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.sidebar-kf {
/*手机端保持右下角，避免挡住中间内容*/
top: auto;
bottom:12px;
right: 12px;
transform:none;
}
.kf-popup-card {
right: 48px;
bottom:0;
top:auto;
width: 240px;
}
.kf-vertical-btn {
width: 38px;
height: 140px;
border-radius: 19px;
}
.kf-vertical-btn i {
font-size: 20px;
}
.kf-vertical-btn span {
font-size: 12px;
}
}
@keyframes popUp {
0% {
opacity: 0;
transform: translateX(15px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* ========= 手机端产品大图 ========= */
@media(max-width:768px){
.main-image {
width:100% !important;
overflow:hidden !important;
border-radius:12px;
}
.main-image img{
width:100% !important;
height:auto !important;
object-fit:contain !important;
}
/* 缩略图列表手机端横向滚动，防止挤爆 */
.thumb-list{
overflow-x:auto;
padding-bottom:6px;
gap:8px;
}
.thumb-list::-webkit-scrollbar{height:4px;}
.thumb-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px;}
}
/* PC 端保持原有样式不变 */
.pro-img {
position: relative;
overflow: hidden;
border-radius: 6px 6px 0 0;
}
.pro-img img {
width:100%;
height:100%;
object-fit: cover;
object-position: center;
display:block;
}
/* 移动端：强制 宽 216px，高 163px */
@media (max-width:768px) {
.pro-img {
width: 368px !important;
height: 278px !important;
margin:0 auto; /* 图片容器居中 */
}
/* 产品卡片，移动端宽度也要适配，不然卡片会比图片宽，出现留白 */
.pro-card {
width: 100%;
}
}
@media (max-width: 768px) {
/* 价格栏 price-bar 防止内容横向溢出 */
.price-bar {
max-width: 100%;
overflow: hidden;
}
.price-main {
word-break: break-all;
}
/* 参数列表 param-list grid 子项，核心：min-width:0，允许压缩 */
.param-list {
grid-template-columns: 1fr;
}
.param-list > .param-item {
min-width: 0;
max-width: 100%;
}
/* 优势栏 advantage-bar */
.advantage-bar {
grid-template-columns: repeat(2, 1fr);
}
.advantage-bar > .adv-card {
min-width: 0;
max-width: 100%;
}
/* 相关产品 related-grid */
.related-grid {
grid-template-columns: 1fr;
}
.related-grid > .related-item {
min-width: 0;
max-width: 100%;
}
/* 表格 spec-table 移动端横向滚动（规格表很容易溢出） */
.spec-table {
display: block;
overflow-x: auto;
}
.spec-table th,
.spec-table td {
white-space: nowrap;
}
/* 面包屑防止超长文字撑出 */
.breadcrumb {
max-width:100%;
overflow:hidden;
}
.breadcrumb span {
word-break: break-all;
}
}
/* 文章表格防横向溢出 */
.article-content table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.article-content table th,
.article-content table td {
padding: 8px 10px;
word-break: break-all;
overflow-wrap: break-word;
}
/* param‑value 单行省略号 */
.param-value {
overflow-wrap: break-word;
word-break: break-all;
white-space: normal !important;
min-width: 0;
}
/* 移动端：表格允许横向滚动，体验更好 */
@media (max-width: 768px) {
.article-content table {
table-layout: auto;
display: block;
overflow-x: auto;
}
}
.param-row .param-item {
min-width: 0;
}
.param-row .param-value {
word-break: break-all;
overflow-wrap: break-word;
white-space: normal !important;
}
.param-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 22px;
}
.param-list .param-item {
min-width:0;
}
.param-value {
overflow-wrap: break-word;
word-break: break-all;
white-space: normal !important;
min-width: 0;
}
.price-tip {
font-size: 13px;
color: #667085;
margin-top: 6px;
word-break: break-all;
}
body {
overflow-x:hidden;
}
@media (max-width:768px) {
  .factory-img-grid {
    grid-template-columns:1fr !important;
  }
  .factory-img-grid > div {
    width:100% !important;
    max-width:100% !important;
  }
}
@media (max-width:768px) {
  /* 单列：每个图片单独一行 */
  .factory-img-grid-single {
    grid-template-columns: 1fr !important;
  }
  /* 兼容行内style覆盖的情况 */
  .factory-img-grid-single[style] {
    grid-template-columns: 1fr !important;
  }
  .factory-img-grid-single > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}