/* =====================================================================
responsive.css — 统一响应式适配层（最后加载，纯 CSS）
工程化约束：Token 引用 / 流式宽度 / Grid 容器 + Flex 组件 / 断点全覆盖 /
可访问性 / SEO 单 URL。!important 经用户授权用于覆盖 PC 模板行内固定宽度。
不改动任何 CMS 调用代码（{module}/{category}/{dr_*} 等标签原样保留）。
===================================================================== */
/* ============ Token 定义层（映射 PC 现有配色与 4px 间距体系） ============ */
:root{
/* 配色（来自 global.css / index.css 现有硬编码值） */
--c-ink:#051f37; /* 导航底（最深） */
--c-navy:#112543; /* 区块底 */
--c-deep:#091c38; /* 页脚底 */
--c-panel:#0a2c4d; /* 二级菜单底 */
--c-f:#ffffff; /* 深底之上的文字 */
--c-6:#666666; /* 次要文字（对应 .color-6） */
--c-3:#1a1a1a; /* 图标（对应 .color-3 近似） */
--c-line:rgba(255,255,255,.12);
/* 间距（4px 基准整数倍） */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
--s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-15:60px;
/* 布局 */
--container:1320px;
--gutter:16px; /* 容器安全边距（4 的倍数，替换原 15px） */
/* 字号 */
--fs-base:16px;
--fs-sm:14px;
/* 触控最小可点区域 */
--tap:44px;
}
/* ============ 1. 全局基础（盒模型 / 图片自适应 / 防横向溢出） ============ */
/* #7 全局重置校验：盒模型 + body 清零（已确认 global.css 的 *{margin:0;padding:0} 不完整，此处显式兜底） */
*, *::before, *::after { box-sizing: border-box; }
html { box-sizing: border-box; }
body { margin: 0; padding: 0; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }
picture { display: block; }
html, body { max-width: 100%; overflow-x: hidden; }
/* ============ 2. 清除 ul/ol/li 默认圆点（!important 兜底，优先级最高） ============ */
ul, ol, li { list-style: none !important; }
ul, ol { margin: 0; padding: 0; }
/* ============ 3. 可访问性：焦点可见（对比度达标，键盘可达） ============ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-toggler:focus-visible {
outline: 2px solid var(--c-f);
outline-offset: 2px;
}
/* ============ 3b. 全局覆盖 global.css 中 PC 固定宽度 ============ */
/* 覆盖 .header min-width:1320px 和 .navs 固定宽度 */
@media (max-width: 1200px) {
.header { min-width: 0 !important; width: 100% !important; }
.navs { min-width: 0 !important; width: 100% !important; }
.navs .main { width: 100% !important; max-width: 100% !important; }
.navs .nav { width: 100% !important; max-width: 100% !important; }
}
/* ============ 3c. 移动端 header / navs 高度修复 ============ */
/* PC 端 .navs 是 position:fixed;top:0;height:90px，移动端需缩小 */
@media (max-width: 768px) {
.header { height: 56px !important; min-height: 56px !important; }
.navs { height: 56px !important; line-height: 56px !important; position: fixed !important; top: 0 !important; z-index: 9999 !important; }
.navs .main { height: 56px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px !important; box-sizing: border-box !important; }
/* Logo 容器：自适应宽度，不裁切 */
.header .logo, .navs .logo { width: auto !important; max-width: 60% !important; height: 36px !important; margin: 0 !important; float: none !important; overflow: visible !important; flex-shrink: 0; }
.header .logo img, .navs .logo img { width: auto !important; max-width: 100% !important; height: 32px !important; max-height: 32px !important; object-fit: contain !important; display: block; }
/* 因为 navs 是 fixed，下方内容需要补偿 */
.mainBody_01 { margin-top: 56px !important; }
.home-banner { margin-top: 56px !important; }
#container { padding-top: 56px !important; }
/* 隐藏右侧浮动在线客服侧边栏 */
.side { display: none !important; }
}
/* 隐藏勾选框获得焦点时，把焦点环转移到可见的汉堡图标上 */
.nav-toggler-cb:focus-visible + .nav-toggler {
outline: 2px solid var(--c-f);
outline-offset: 2px;
}
/* ============ 4. 主容器 .main 流式居中（覆盖 global.css 固定 1320px） ============ */
.main { width: 100% !important; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.footer_bottom .main { width: 100% !important; max-width: var(--container); }
/* ============ 5. 首屏文案容器 .kj / .desc02 ============ */
.kj { width: 100% !important; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.desc02 { max-width: 100% !important; }
/* ============ 6. 各 mainBody 区块：去除 min-width:1320px，内部容器流式 ============ */
@media (max-width: 1366px) {
.header, .navs,
.mainBody_01, .mainBody_02, .mainBody_03, .mainBody_04, .mainBody_05,
.mainBody_06, .mainBody_07, .mainBody_08 {
min-width: 0 !important; width: 100% !important;
}
.mainBody_01 .list, .mainBody_02 .list, .mainBody_03 .list, .mainBody_04 .main,
.mainBody_05 .list, .mainBody_06 .list, .mainBody_07 .hd, .mainBody_08 .list {
width: 100% !important; max-width: var(--container); margin-inline: auto;
}
}
/* ============ 7. 首屏轮播 mainBody_01（单屏全宽：覆盖错误的 4 列 grid，恢复单张满屏滑块） ============ */
.mainBody_01 { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.mainBody_01 .bd { width: 100% !important; max-width: 100% !important; }
.mainBody_01 .bd ul { display: block !important; width: 100% !important; max-width: 100% !important; }
.mainBody_01 .bd li { width: 100% !important; max-width: 100% !important; float: none !important; background-size: cover !important; background-position: center center !important; }
/* ============ 8. FAQ 资讯轮播：覆盖行内写死宽度（tempWrap/ul/li/spacer） ============ */
@media (max-width: 1366px) {
.slideBox02 .tempWrap { width: 100% !important; max-width: 1200px; margin-inline: auto; }
.slideBox02 .tempWrap > ul { width: 100% !important; }
.slideBox02 .tempWrap > ul > li { width: 100% !important; float: none !important; }
.dynamicbox > div[style*="width:1000px"] { width: 100% !important; max-width: 100% !important; }
}
/* ============ 9. 首屏轮播高度收敛 + 文字自适应 ============ */
@media (max-width: 992px) {
.mainBody_01 .bd ul li, .mainBody_01 .bd li { height: 420px !important; }
}
@media (max-width: 768px) {
.mainBody_01 .bd ul li, .mainBody_01 .bd li {
height: 320px !important; background-size: cover !important; background-position: center !important;
}
/* 覆盖轮播图 ul 内联 style="height:700px"，并设为 auto 让子元素决定高度 */
.mainBody_01 .bd ul, .mainBody_01 .bd ul[style] { display: block !important; height: auto !important; min-height: 320px; }
/* kj 容器大幅上移，让文字在小屏更紧凑 */
.kj { margin-top: 0 !important; padding-top: 80px !important; }
.kj { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
/* 轮播图文字：小字号适配移动端，max 限死避免超大 */
.mainBody_01 .bd .title01 span { font-size: clamp(13px, 3.5vw, 17px) !important; line-height: 1.35 !important; font-weight: 400; }
.mainBody_01 .bd .title01 { height: auto !important; padding: 0 !important; }
.xiaobt { font-size: clamp(14px, 4vw, 22px) !important; line-height: 1.35 !important; margin-bottom: 6px !important; font-weight: 700; }
.desc02 { width: 100% !important; font-size: 13px !important; line-height: 1.5 !important; margin-top: 4px !important; }
/* 手机端轮播导航按钮显示 */
.mainBody_01 .prev, .mainBody_01 .next {
display: block !important;
opacity: 0.7 !important;
width: 30px !important;
height: 50px !important;
margin-top: -25px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.mainBody_01 .prev {
left: 5px !important;
background-image: url(/static/assets/m/images/prev.png) !important;
}
.mainBody_01 .next {
right: 5px !important;
background-image: url(/static/assets/m/images/next.png) !important;
}
/* 内页 banner 轮播文字 */
.banner h2 { font-size: clamp(18px, 5vw, 28px) !important; line-height: 1.35 !important; }
.banner .title { width: 100% !important; padding-top: 120px !important; }
.banner p { font-size: 13px !important; line-height: 1.5 !important; }
}
@media (max-width: 480px) {
.kj { margin-top: 0 !important; padding-top: 60px !important; padding-left: 12px !important; padding-right: 12px !important; }
.xiaobt { font-size: 16px !important; font-weight: 700; }
.mainBody_01 .bd .title01 span { font-size: 13px !important; font-weight: 400; }
.desc02 { font-size: 12px !important; }
.mainBody_01 .bd ul { display: block !important; }
.mainBody_01 .bd ul li, .mainBody_01 .bd li { height: 280px !important; }
}
/* ============ 10. 解决方案 mainBody_03（文字始终浮于色块/图片之上） ============ */
@media (min-width: 993px) {
.mainBody_03 { padding: 30px 0 0 0 !important; }
}
@media (max-width: 992px) {
.mainBody_03 { height: auto !important; min-height: 0 !important; min-width: 0 !important; padding: 30px 0 20px 0 !important; background-image: none !important; background: #fff !important; border-bottom: 1px solid #eee !important; }
.mainBody_03 h2 { margin-bottom: 24px !important; }
.mainBody_03 .list { padding: 0 16px !important; }
.mainBody_03 ul { width: 100% !important; height: 260px !important; margin-bottom: 16px !important; position: relative !important; }
.mainBody_03 ul img { width: 100% !important; height: 100% !important; object-fit: cover; }
.mainBody_03 .a1 { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.mainBody_03 .a2 {
position: absolute !important; top: auto !important; bottom: 16px !important; left: 16px !important;
transform: none !important; width: calc(100% - 32px) !important; max-width: 360px !important;
height: auto !important; min-height: 100px !important; padding: 12px !important;
background: rgba(0,0,0,0.6) !important; border-radius: 8px !important;
}
.mainBody_03 .a2 h3 { font-size: 16px !important; line-height: 1.4 !important; padding-bottom: 6px !important; margin-bottom: 6px !important; }
.mainBody_03 .a2 p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 8px !important; }
/* "了解详情" 按钮：左对齐，不上下排列 */
.mainBody_03 .a2 i { display: inline-block !important; font-size: 13px !important; line-height: 32px !important;
padding: 0 16px !important; background: #003d7d !important; color: #fff !important; border-radius: 4px !important; }
.mainBody_03 .ul2, .mainBody_03 .ul3, .mainBody_03 .ul4 { width: 100% !important; }
}
/* ============ 11. 产品中心 mainBody_04（使用 listpage 样式） ============ */
/* PC端：首页产品中心使用与产品列表页相同的样式 */
@media (min-width: 993px) {
.mainBody_04 { padding: 50px 0 0 !important; }
/* 首页侧边栏样式 */
.mainBody_04 .leftm.sidebar-cat {
float: left !important;
width: 260px !important;
background: #fff !important;
border-radius: 10px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.mainBody_04 .sidebar-cat-title {
font-size: 24px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
padding: 24px 20px 10px !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
}
.mainBody_04 .sidebar-cat-wrap { padding: 8px 14px 14px !important; }
.mainBody_04 .sidebar-cat-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: #666 !important;
padding: 12px 10px !important;
border-bottom: 1px solid #f0f0f5 !important;
margin-bottom: 6px !important;
}
.mainBody_04 .sidebar-cat-icon { font-size: 15px !important; color: #003d7d !important; }
.mainBody_04 .sidebar-cat-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mainBody_04 .sidebar-cat-item { margin-bottom: 4px !important; }
.mainBody_04 .sidebar-cat-item a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
font-size: 15px !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
font-weight: 500 !important;
}
.mainBody_04 .sidebar-cat-item a:hover,
.mainBody_04 .sidebar-cat-item a.active {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
}
.mainBody_04 .sidebar-cat-arrow {
font-size: 18px !important;
opacity: 0.4 !important;
margin-left: auto !important;
transition: all 0.25s ease !important;
}
.mainBody_04 .sidebar-cat-item a:hover .sidebar-cat-arrow,
.mainBody_04 .sidebar-cat-item a.active .sidebar-cat-arrow {
opacity: 1 !important;
color: #fff !important;
}
.mainBody_04 .sidebar-cat-sublist { list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; }
.mainBody_04 .sidebar-cat-subitem { margin-bottom: 4px !important; }
.mainBody_04 .sidebar-cat-subitem a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
font-size: 14px !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
font-weight: 500 !important;
}
.mainBody_04 .sidebar-cat-subitem a:hover,
.mainBody_04 .sidebar-cat-subitem a.active {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
}
.mainBody_04 .sidebar-phone {
margin: 12px !important;
padding: 18px !important;
background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%) !important;
border-radius: 10px !important;
text-align: center !important;
}
.mainBody_04 .sidebar-phone-label { font-size: 13px !important; color: #888 !important; margin: 0 0 6px !important; }
.mainBody_04 .sidebar-phone-num { font-size: 24px !important; font-weight: 700 !important; color: #003d7d !important; margin: 0 !important; }
/* 强制 mainBody_04 宽度=1320px 居中，与其他板块对齐（覆盖 .container 的 1400px） */
.mainBody_04.container { width: 1320px !important; max-width: var(--container) !important; margin: 0 auto !important; padding: 50px 0 0 0 !important; }
/* 首页产品列表：leftm 260px + 间距 + rightm 1040px = 1320px，与产品列表页一致 */
.mainBody_04 .rightm { width: 1040px !important; float: right !important; }
.mainBody_04 .rightm .box { width: 100% !important; }
/* HTML 结构为 ， 是 inline 会破坏 float 布局。
改用 flex 布局，让 成为 flex item，强制一排三个 */
.mainBody_04 .rightm .box { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; }
.mainBody_04 .rightm .box > a { width: calc((100% - 48px) / 3) !important; display: block !important; float: none !important; margin: 0 !important; }
.mainBody_04 .rightm .box > a > li { width: 100% !important; height: 368px !important; margin: 0 !important; float: none !important; }
.mainBody_04 .rightm .box li img { height: 328px !important; }
/* 隐藏蓝色色块悬浮层 */
.mainBody_04 .rightm .box li .des { display: none !important; }
/* 图片放大效果 */
.mainBody_04 .rightm .box li img { transition: transform 0.4s ease !important; }
.mainBody_04 .rightm .box li:hover img { transform: scale(1.06) !important; }
.mainBody_04 .rightm .box li h3 { position: relative !important; z-index: 10 !important; background: #fff !important; line-height: 40px !important; }
}
/* 平板及以下 */
@media (max-width: 992px) {
.mainBody_04 { overflow: visible !important; min-width: 0 !important; padding: 20px 0 !important; background: #fff !important; border-top: 1px solid #eee !important; }
.mainBody_04 .rightm { width: 100% !important; float: none !important; }
/* 重置PC端flex布局为float布局 */
.mainBody_04 .rightm .box { display: block !important; gap: 0 !important; }
.mainBody_04 .rightm .box > a { width: calc(33.333% - 16px) !important; display: block !important; float: left !important; margin: 0 24px 24px 0 !important; }
.mainBody_04 .rightm .box > a:nth-child(3n) { margin-right: 0 !important; }
.mainBody_04 .rightm .box > a > li { width: 100% !important; height: auto !important; margin: 0 !important; float: none !important; }
.mainBody_04 .rightm .box li img { height: auto !important; max-height: 200px; object-fit: contain; }
.mainBody_04 .rightm .box li h3 { line-height: 1.4 !important; padding: 8px !important; height: auto !important; }
}
/* 手机端 */
@media (max-width: 768px) {
/* 隐藏解决方案"了解详情"按钮和箭头 */
.mainBody_03 .a2 i { display: none !important; }
.mainBody_04 { padding: 20px 0 !important; border-top: 1px solid #eee !important; background: #fff !important; }
/* 侧边栏全宽显示 - 重置PC端大样式 */
.mainBody_04 .leftm.sidebar-cat {
float: none !important;
width: 100% !important;
margin: 0 0 12px 0 !important;
background: #f8f9fa !important;
border-radius: 6px !important;
box-shadow: none !important;
padding: 0 !important;
}
.mainBody_04 .sidebar-cat-title {
font-size: 16px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
padding: 12px 16px !important;
line-height: 1.3 !important;
letter-spacing: 1px !important;
border-bottom: 1px solid #eee !important;
}
.mainBody_04 .sidebar-cat-wrap { padding: 8px 12px !important; }
.mainBody_04 .sidebar-cat-label {
font-size: 14px !important;
font-weight: 500 !important;
color: #666 !important;
padding: 8px 10px !important;
border-bottom: 1px solid #f0f0f5 !important;
margin-bottom: 4px !important;
}
.mainBody_04 .sidebar-cat-item a {
padding: 8px 12px !important;
font-size: 14px !important;
border-radius: 4px !important;
}
.mainBody_04 .sidebar-phone {
margin: 8px !important;
padding: 12px !important;
background: #f0f4ff !important;
border-radius: 6px !important;
}
.mainBody_04 .sidebar-phone-label { font-size: 12px !important; }
.mainBody_04 .sidebar-phone-num { font-size: 20px !important; }
/* 产品列表两列 - 使用 作为布局容器 */
.mainBody_04 .rightm { width: 100% !important; float: none !important; }
.mainBody_04 .rightm .box { display: block !important; gap: 0 !important; width: 100% !important; }
.mainBody_04 .rightm .box > a {
width: calc(50% - 5px) !important;
display: block !important;
float: left !important;
margin: 0 10px 10px 0 !important;
}
.mainBody_04 .rightm .box > a:nth-child(3n) { margin-right: 10px !important; }
.mainBody_04 .rightm .box > a:nth-child(2n) { margin-right: 0 !important; }
.mainBody_04 .rightm .box > a > li { width: 100% !important; height: auto !important; margin: 0 !important; float: none !important; }
.mainBody_04 .rightm .box li img { height: auto !important; max-height: 140px; object-fit: contain; }
.mainBody_04 .rightm .box li h3 {
line-height: 1.3 !important;
padding: 6px 8px !important;
height: auto !important;
font-size: 13px !important;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
}
@media (max-width: 480px) {
.mainBody_04 .rightm .box li img { max-height: 120px !important; }
.mainBody_04 .rightm .box li h3 { font-size: 12px !important; padding: 4px 6px !important; min-height: 32px; }
}
/* ============ 12. FAQ 资讯 dynamicul（Grid 容器） ============ */
/* PC端：统一内容区宽度到1320px */
@media (min-width: 993px) {
.dynamicbox { padding: 20px 0 !important; }
.dynamicbox .index_title { max-width: 1320px; margin: 0 auto 24px !important; padding: 0 !important; }
.dynamicbox > div[style*="width:1000px"] { width: 1320px !important; max-width: 100% !important; margin: 0 auto !important; }
.dynamicbox .slideBox02 { width: 1320px !important; max-width: 100% !important; margin: 0 auto !important; }
.dynamicbox .slideBox02 .tempWrap { width: 1320px !important; max-width: 100% !important; }
.dynamicbox .slideBox02 .tempWrap > ul { width: 3960px !important; }
.dynamicbox .slideBox02 .tempWrap > ul > li { width: 1320px !important; }
.dynamicbox .dynamic { width: 1320px !important; max-width: 100% !important; margin: 0 auto !important; }
}
.dynamicul { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.dynamicul div { width: auto !important; float: none !important; padding: var(--s-3) !important; height: auto !important; margin: 0 !important; }
@media (max-width: 1366px) { .slideBox02, .dynamic { width: 100% !important; max-width: 1200px; } }
@media (max-width: 992px) { .dynamicul { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 576px) {
.dynamicul { grid-template-columns: 1fr !important; }
.slideBox02 .prev { left: 30% !important; }
.slideBox02 .next { right: 30% !important; }
}
/* ============ 13. 关于我们 gyshuoyuan（.gyright 原 width:600px float:right） ============ */
@media (min-width: 993px) {
.gyshuoyuan { margin: 15px auto !important; padding: 0 !important; }
}
@media (max-width: 992px) {
.gyshuoyuan { margin: 0 auto !important; padding: 20px 16px !important; }
.gyshuoyuan .main { display: block !important; padding: 0 !important; }
.gyshuoyuan .gyright { width: 100% !important; float: none !important; margin-top: 20px !important; }
.gyshuoyuan .shoyuatitle { margin-bottom: 16px !important; font-size: 24px !important; }
.gyshuoyuan .shoyuatitle p { font-size: 14px !important; }
.gyright .title_gy { font-size: 18px !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
.gyright p { font-size: 14px !important; line-height: 1.8 !important; }
}
@media (max-width: 768px) {
.gyshuoyuan { margin: 0 auto !important; padding: 20px 16px !important; }
}
/* ============ 13b. 新闻中心 home-news ============ */
@media (min-width: 993px) {
.home-news { padding: 30px 0 !important; }
}
/* 平板及以下 */
@media (max-width: 992px) {
.home-news { padding: 20px 0 !important; }
.home-news .w1400 { padding: 0 16px !important; }
.home-news h2 { margin-bottom: 24px !important; }
}
@media (max-width: 768px) {
/* 新闻卡片间距 */
.home-news .new-news .text { padding: 16px !important; }
.home-news .new-news .text h4 { font-size: 16px !important; margin: 8px 0 !important; line-height: 1.4 !important; }
.home-news .new-news .text p { margin-bottom: 4px !important; }
.home-news .new-news .text .desc { line-height: 1.6 !important; margin-bottom: 8px !important; }
/* 新闻列表项间距 */
.home-news .news-info ul { margin-left: 0 !important; width: 100% !important; margin-top: 16px !important; }
.home-news .news-info ul li { margin-bottom: 12px !important; }
.home-news .news-info ul li a { padding: 12px !important; min-height: 100px !important; }
.home-news .news-info ul li a p { font-size: 13px !important; margin-bottom: 6px !important; }
.home-news .news-info ul li a h4 { font-size: 15px !important; margin: 8px 0 !important; line-height: 1.4 !important; }
.home-news .news-info ul li a .desc { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 8px !important; }
}
/* ============ 13c. FAQ 资讯板块间距修复 ============ */
@media (max-width: 992px) {
.dynamicbox { padding: 30px 0 !important; }
.dynamicbox .index_title { margin-bottom: 24px !important; padding: 0 16px !important; }
.dynamicbox .index_title h2 { margin-bottom: 12px !important; }
.dynamicbox .index_title .work2-des { font-size: 14px !important; line-height: 1.6 !important; }
}
@media (max-width: 768px) {
/* 覆盖内联固定宽度，统一内容区域 */
.dynamicbox > div[style*="width:1000px"] { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }
.dynamicbox .slideBox02 { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; }
.dynamicbox .slideBox02 .tempWrap { width: 100% !important; max-width: 100% !important; }
.dynamicbox .slideBox02 .tempWrap > ul { width: 100% !important; max-width: 100% !important; }
.dynamicbox .slideBox02 .tempWrap > ul > li { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 200px !important; }
.dynamicbox .dynamic { width: 100% !important; max-width: 100% !important; }
.dynamicul div { padding: 16px !important; margin-bottom: 12px !important; background: #fff !important; border-radius: 8px !important; }
.dynamicul div h3 { font-size: 15px !important; margin-bottom: 8px !important; line-height: 1.4 !important; }
.dynamicul div p { font-size: 13px !important; line-height: 1.6 !important; }
}
/* ============ 14. 列表页 .news / .rnews（main02.css 原 1000/240px） + 间距修复 ============ */
@media (max-width: 1200px) {
.dqwz { width: 100% !important; max-width: 100% !important; margin: 20px auto 0 !important; box-sizing: border-box; padding: 0 16px !important; }
}
@media (max-width: 992px) {
.listpage { padding: 20px 0 !important; }
.news, .rnews { width: 100% !important; float: none !important; }
.news .a1 { width: 30% !important; max-width: 220px; }
.news .a2, .news .a3, .news .a4, .news .a5 { width: 68% !important; }
}
@media (max-width: 768px) {
/* 新闻列表项间距修复：标题、时间、描述不再重叠 */
.news li { height: auto !important; min-height: 180px !important; padding: 16px !important; margin-bottom: 16px !important; }
.news .a1 { width: 120px !important; height: 100px !important; margin-right: 16px !important; flex-shrink: 0; }
.news .a2 { width: calc(100% - 140px) !important; height: auto !important; line-height: 1.4 !important; font-size: 16px !important; margin-bottom: 6px !important; }
.news .a3 { width: calc(100% - 140px) !important; height: auto !important; font-size: 13px !important; padding: 4px 0 8px 0 !important; line-height: 1.4 !important; }
.news .a4 { width: calc(100% - 140px) !important; height: auto !important; min-height: 48px !important; line-height: 1.6 !important; font-size: 13px !important; margin-bottom: 8px !important; }
.news .a5 { width: 100% !important; height: auto !important; padding-top: 8px !important; clear: both; }
}
@media (max-width: 576px) {
.news .a1 { width: 100% !important; float: none !important; height: 160px !important; margin-right: 0 !important; margin-bottom: 12px !important; }
.news .a2, .news .a3, .news .a4, .news .a5 { width: 100% !important; float: none !important; }
.news li { height: auto !important; }
}
/* ============ 15. 案例详情 .case_c（绝对定位居中 → 静态重排） ============ */
@media (max-width: 992px) {
.case_c { height: auto !important; position: relative !important; }
.case_c dl, .case_c { width: 100% !important; position: static !important; margin: 0 !important; right: auto; left: auto; }
.case_c dt { padding: 30px 15px 0 !important; }
.case_c dt p { width: 100% !important; }
.case_c dd p { padding-left: 15px !important; height: auto !important; }
.case_c dd i { margin-left: 15px !important; }
}
/* ============ 16. 表单验证码（原 width:270px 行内 → 流式上限） ============ */
.form-recaptcha { width: 100% !important; max-width: 270px; }
/* ============ 17. 移动端折叠汉堡导航（完整重构：logo不裁切、联系我们对齐、子菜单可展开、按钮规范） ============ */
.nav-toggler-cb {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0;
}
.nav-toggler { display: none; }
@media (max-width: 768px) {
/* 汉堡图标：44px 触控区，居中三条线 */
.nav-toggler {
display: flex !important; flex-direction: column; justify-content: center; gap: 4px;
width: 44px !important; height: 44px !important; margin: 0 !important; cursor: pointer; flex-shrink: 0;
padding: 11px 10px; box-sizing: border-box;
}
.nav-toggler span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 1px; transition: .3s; }
/* 默认菜单隐藏 */
.navs .right {
display: none !important; width: 100% !important; float: none !important;
position: absolute !important; left: 0 !important; top: 100% !important;
background: #051f37 !important; z-index: 10000 !important; line-height: normal !important;
max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* 点击图标后展开 */
.nav-toggler-cb:checked ~ .main .right { display: block !important; }
/* 导航列表：纵向排列 */
#nav.nav {
display: block !important; width: 100% !important; max-width: 100% !important;
background: #051f37 !important; padding: 0 !important; margin: 0 !important;
list-style: none !important; line-height: normal !important; text-align: left !important;
}
/* 所有 li（含 nLi 和不含 nLi 的联系我们）统一样式 */
#nav.nav > li {
width: 100% !important; float: none !important; display: block !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
line-height: normal !important;
}
/* 所有一级链接统一样式（含联系我们） */
#nav.nav > li > a {
display: block !important; width: 100% !important; box-sizing: border-box;
padding: 0 20px !important; height: 44px !important; line-height: 44px !important;
color: #fff !important; font-size: 15px !important; font-weight: normal !important;
text-align: left !important; margin: 0 !important; background: transparent !important;
text-decoration: none !important;
}
/* 联系我们：覆盖内联 margin-left:20px 和 color:#fff */
#nav.nav > li:last-child > a { margin-left: 0 !important; color: #fff !important; }
/* ===== 子菜单：不强制 display:none，让 superslide JS 控制显隐 ===== */
#nav.nav .nLi .sub, #nav.nav .nLi .sub1 {
position: static !important; width: 100% !important; height: auto !important;
background: #0d3155 !important; padding: 0 !important; top: auto !important; left: auto !important;
box-shadow: none !important; overflow: visible !important;
}
/* 子菜单内部布局 */
#nav.nav .nLi .sub .mains { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
/* 隐藏左侧大图区域，移动端只显示链接 */
#nav.nav .nLi .sub .mains .l1 { display: none !important; }
#nav.nav .nLi .sub dl {
width: 100% !important; height: auto !important; float: none !important; display: block !important;
padding: 0 !important; margin: 0 !important;
}
/* 子菜单描述文字 h6 */
#nav.nav .nLi .sub dl h6 {
width: 100% !important; padding: 10px 20px !important; margin: 0 !important;
color: rgba(255,255,255,0.6) !important; font-size: 12px !important; line-height: 1.5 !important;
font-weight: normal !important; border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* 子菜单链接 */
#nav.nav .nLi .sub dl dd, #nav.nav .nLi .sub dl li {
width: 100% !important; float: none !important; line-height: normal !important; margin: 0 !important;
}
#nav.nav .nLi .sub dl dd a, #nav.nav .nLi .sub dl li a {
display: block !important; width: 100% !important; box-sizing: border-box;
padding: 0 20px 0 36px !important; height: 40px !important; line-height: 40px !important;
color: rgba(255,255,255,0.9) !important; font-size: 14px !important; text-align: left !important;
background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.05);
}
#nav.nav .nLi .sub dl dd a:hover, #nav.nav .nLi .sub dl li a:hover {
color: #fff !important; background: rgba(255,255,255,0.08) !important;
}
}
/* ============ 18. 关于我们页栅格 + 公司文化卡片修复 ============ */
.about-page ul.row, .about-page ol.d-none { list-style: none !important; margin: 0; padding: 0; }
.about-page ul.row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.about-page ul.row > li { box-sizing: border-box; }
.about-page ol.d-none { display: flex !important; flex-wrap: wrap; justify-content: space-around; }
/* 公司文化卡片文字防竖排：覆盖 .item 过大的横向 padding，设置 writing-mode 为 horizontal-tb */
.about-page .content2 .item {
writing-mode: horizontal-tb !important;
padding: 24px 20px !important;
height: auto !important;
}
.about-page .content2 .item h3 { white-space: nowrap; font-size: 18px !important; }
.about-page .content2 .item p { font-size: 13px !important; line-height: 1.7 !important; word-break: break-all; }
.about-page .content2 .item i { font-size: 28px !important; }
.about-page .content2 .item img { writing-mode: horizontal-tb; }
@media (max-width: 992px) { .about-page ul.row { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) {
.about-page .content2 { padding: 20px 0 !important; }
.about-page .content2 .item { padding: 20px 16px !important; }
}
@media (max-width: 576px) {
/* 移动端：公司文化改为2列（而非1列），避免卡片过窄导致文字竖排 */
.about-page ul.row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.about-page ol.d-none { display: none; } /* 移动端隐藏数据统计条，避免拥挤 */
.about-page .content2 .item { padding: 16px 12px !important; }
.about-page .content2 .item h3 { font-size: 15px !important; margin: 8px 0 !important; }
.about-page .content2 .item p { font-size: 12px !important; line-height: 1.6 !important; }
.about-page .content2 .item i { font-size: 24px !important; }
.about-page .content2 .item { text-align: center; }
}
/* ============ 19. 字号收敛（防手机端大标题溢出；正文保持 ≥14px） ============ */
@media (max-width: 768px) {
.work2 { font-size: 26px !important; }
.shoyuatitle, .gyshuoyuan .shoyuatitle { font-size: 30px !important; line-height: 40px !important; }
.title_gy { font-size: 20px !important; line-height: 34px !important; }
h2.font-36, .font-36 { font-size: 26px !important; }
h3.font-42, .font-42 { font-size: 26px !important; }
.mainBody_03 .a2 h3 { font-size: 18px !important; }
}
/* ============ 20. 表格横向滚动容器（禁止大表格原样移植撑破布局） ============ */
table { width: 100% !important; max-width: 100%; }
.table-responsive, .table { overflow-x: auto; }
/* ============ 21. 通用固定容器 .w1400 / .w1600（style.css 写死 1320/1600px） ============ */
@media (max-width: 992px) {
.w1400, .w1600 { width: 100% !important; max-width: 100%; padding-inline: var(--gutter); box-sizing: border-box; }
}
/* ============ 22. 图片优化（ALT/懒加载/WebP 由模板层落实，见交付清单） ============ */
/* 此处仅保证图片在流式容器内不溢出；loading="lazy" 与规范文件名在模板中处理。 */
/* =====================================================================
23–28. 用户上报 8 项 Bug 修复（约束：仅改 CSS，不触碰 CMS 标签）
全部落在最后加载层，用 !important 压住 PC 基准固定宽度。
===================================================================== */
/* ---------- 23. #1 PC 导航选中态溢出（修复前：.navs .nav{width:1320px} 超出父级 .right 920px，
选中 .on 色块右溢；修复后：nav 撑满父容器，nLi 用 flex:1 均分，选中块恰好填满单元格） ---------- */
.navs .nav { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.navs .nav .nLi { flex: 1 1 0 !important; min-width: 0 !important; box-sizing: border-box; }
.navs .nav .on, .navs .nav .nLi.on { background: rgba(0, 61, 125, 0.7) !important; } /* 仅保留选中底色，不再撑满整行（修复“占比过大”） */
/* ---------- 24. #2 移动端 Logo 占比（已在 Section 3c 和 17 中完整处理，此处保留空占位避免重复冲突） ---------- */
/* ---------- 25. #3 PC 轮播图/图集宽度非自适应（修复前：.picture .left1{width:500px}、
.news1 图{width:600px}、Swiper 容器随父级写死；修复后：容器 width:100% + max-width，父级有明确可算宽度，
禁用任何固定布局 px 宽度） ---------- */
.plant-container, .equi-container, .honor-container,
.slideBox { width: 100% !important; max-width: 1200px; margin-inline: auto; box-sizing: border-box; }
.picture { display: flex !important; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.picture .left1 { width: 100% !important; max-width: 500px; height: auto !important; margin-left: 0 !important; }
.picture .right2 { width: 100% !important; max-width: 430px; flex: 1 1 360px; padding-right: 0 !important; }
.news1 .con2 h5 img { width: 100% !important; max-width: 600px; height: auto !important; }
/* ---------- 27. #5 产品展示页：侧边导航错乱 + 整体未居中（修复前：.container{width:1320px} 固定、
.listpage .rightm .box{width:1140px} 超出 .rightm 1040px 向右溢出、页面偏右；
修复后：.container 流体居中，.listpage 改 flex 两栏，侧边导航 flex-column，.box 不再溢出） ---------- */
@media (max-width: 1200px) {
.container { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 16px !important; box-sizing: border-box !important; overflow: visible !important; }
.listpage { display: block !important; }
.listpage .leftm { float: none !important; width: 100% !important; margin: 0 0 20px 0 !important; }
.listpage .rightm { float: none !important; width: 100% !important; }
.listpage .rightm .box { width: 100% !important; }
.itemlist { width: 100% !important; max-width: 100% !important; float: none !important; }
}
@media (max-width: 992px) {
.listpage .leftm { flex: 1 1 100% !important; }
}
/* ---------- 28. #6 底部文字竖排（修复前：footer 链接列在中等宽度被压到 <最小宽度>，
逐字换行呈“竖排”；修复后：强制 writing-mode:horizontal-tb，链接列 flex-wrap + min-width，
桌面横排、移动端整列纵向堆叠且链接文字仍为水平） ---------- */
footer, footer * { writing-mode: horizontal-tb !important; }
footer .content { flex-direction: row !important; flex-wrap: wrap !important; }
footer .content > ul { flex-direction: row !important; flex-wrap: wrap !important; }
footer .content ul li { width: auto !important; min-width: 140px; }
footer .content ul li a { white-space: normal !important; width: auto !important; }
footer .copyright { flex-direction: row !important; flex-wrap: wrap !important; }
@media (max-width: 768px) {
/* 底部改为左右并排（列并排、可换行），不再是整体竖排 */
footer .content { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; }
footer .content > ul { flex: 1 1 45% !important; flex-direction: column !important; margin-right: var(--s-4) !important; }
footer .content ul li { width: auto !important; min-width: 0; margin-right: 0 !important; }
}
/* ============ 29. #7 移动端按钮规范（所有按钮统一 44px 触控区、居中、不溢出） ============ */
@media (max-width: 768px) {
/* 轮播图 "查看更多" 按钮 */
.mainBody_01 .more {
height: 40px !important; line-height: 40px !important; border-radius: 6px !important;
margin-top: 12px !important; padding: 0 20px !important; display: inline-block !important;
}
.mainBody_01 .more a { font-size: 14px !important; line-height: 40px !important; color: #fff !important; }
/* 解决方案 "了解详情" 链接 */
.mainBody_03 .a2 i {
display: inline-block !important; font-size: 13px !important; line-height: 32px !important;
padding: 0 16px !important; background: rgba(0,61,125,0.8) !important; border-radius: 4px !important; color: #fff !important;
}
/* 产品板块 "更多产品" 按钮 */
.mainBody_04 .itemlist .top a {
height: 40px !important; line-height: 40px !important; font-size: 13px !important;
padding: 0 16px !important; width: auto !important; float: right !important;
}
.mainBody_04 .itemlist .top a::before { font-size: 13px !important; color: #fff !important; }
/* 表单提交按钮 */
.contact-box button, .form-actions .btn, .btn.green {
display: block !important; width: 100% !important; height: 44px !important; line-height: 44px !important;
padding: 0 !important; font-size: 15px !important; border-radius: 4px !important;
margin: 16px auto 0 !important; text-align: center !important; cursor: pointer !important;
}
/* 表单输入框 */
.contact-box input, .contact-box textarea, .form-control {
height: 44px !important; font-size: 15px !important; padding: 0 12px !important; border-radius: 4px !important;
}
.contact-box textarea { height: 120px !important; padding: 10px 12px !important; }
/* 关于我们页 "了解硕远" 按钮 */
.about-page .button a, .button {
display: inline-block !important; height: 40px !important; line-height: 40px !important;
padding: 0 20px !important; font-size: 14px !important; border-radius: 4px !important;
}
/* 内页 banner 按钮 */
.banner .bannernav a {
width: auto !important; height: 40px !important; line-height: 40px !important;
padding: 0 16px !important; font-size: 14px !important; border-right: none !important;
}
}
/* 额外小屏优化（≤480px） */
@media (max-width: 480px) {
#nav.nav > li > a { font-size: 14px !important; height: 42px !important; line-height: 42px !important; }
#nav.nav .nLi .sub dl dd a, #nav.nav .nLi .sub dl li a { font-size: 13px !important; height: 38px !important; line-height: 38px !important; }
.navs .logo img, .header .logo img { height: 28px !important; max-height: 28px !important; }
.nav-toggler { width: 40px !important; height: 40px !important; padding: 10px 8px; }
/* 轮播图按钮更小 */
.mainBody_01 .more { height: 36px !important; line-height: 36px !important; }
.mainBody_01 .more a { font-size: 13px !important; line-height: 36px !important; }
}
/* ============ 30. #8 产品分类板块补充修复（已在 Section 11 处理，此处保留图片高度微调） ============ */
@media (max-width: 768px) {
.mainBody_04 .itemlist li img { max-height: 160px !important; object-fit: contain; }
}
@media (max-width: 480px) {
.mainBody_04 .itemlist li img { max-height: 130px !important; }
}
/* ============ 31. #9 底部（footer）移动端修复 ============ */
/* 全局覆盖：style_devices.css 在 ≤1200px 时隐藏最后一个 li，恢复显示 */
footer .content ul li:last-child { display: list-item !important; }
@media (max-width: 768px) {
/* 底部导航链接列：显示（覆盖 d-none）、全宽堆叠 */
footer .content > ul.d-none.d-lg-flex { display: block !important; }
footer .content { flex-direction: column !important; align-items: stretch !important; }
footer .content > ul { width: 100% !important; flex: 1 1 100% !important; margin: 0 0 20px 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
footer .content > ul > li { min-width: 0; flex: 0 0 50% !important; max-width: 50% !important; margin: 0 0 16px 0 !important; padding-right: 8px; box-sizing: border-box; }
footer .content ul li h3 { font-size: 15px !important; margin-bottom: 8px !important; }
footer .content ul li a { font-size: 13px !important; line-height: 26px; }
/* 联系方式全宽 */
footer .contact1 { width: 100% !important; text-align: left; justify-content: flex-start !important; flex-direction: column !important; align-items: flex-start !important; }
footer .contact1 div { text-align: left; }
/* 版权区域：上下堆叠（友情链接在上，备案在下） */
footer .copyright { flex-direction: column !important; align-items: stretch !important; text-align: left; padding: 12px 0 !important; }
/* 友情链接：左右横向排列，自动换行 */
footer .copyright > .d-flex { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0; }
footer .copyright > .d-flex > a { margin: 0 12px 4px 0 !important; font-size: 12px !important; white-space: nowrap; }
/* 备案信息：左侧排列 */
footer .copyright .beian { float: none !important; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 8px; }
footer .copyright .beian p { margin-left: 0 !important; margin-right: 12px; margin-bottom: 4px; }
footer .copyright p { display: block; margin-bottom: 4px; }
/* 友情链接标签隐藏（d-none d-lg-flex 在移动端不显示） */
footer .copyright a.d-none { display: none !important; }
/* 减少底部内边距 */
footer { padding-bottom: 20px !important; }
}
/* ============ 32. #10 通用列表页（listpage）移动端修复 ============ */
@media (max-width: 768px) {
.listpage .rightm { width: 100% !important; float: none !important; }
.listpage .rightm .box { width: 100% !important; }
.listpage .rightm .box li { width: 100% !important; height: auto !important; margin: 0 0 16px 0 !important; }
.listpage .rightm .box li:nth-child(3n) { margin-right: 0; }
.listpage .rightm .box li img { height: auto !important; max-height: 280px; object-fit: contain; }
.listpage .rightm .box li .des { display: none !important; }
.listpage .leftm { width: 100% !important; float: none !important; margin-bottom: 16px; }
/* 内页 banner 移动端高度 */
.banner { min-width: 0 !important; }
.banner .title { padding-top: 160px !important; width: 100% !important; }
.banner h2 { font-size: 24px !important; }
/* 新闻列表页 */
.news, .rnews { width: 100% !important; float: none !important; }
.news li { height: auto !important; padding: 16px !important; }
.news .a1 { width: 100% !important; height: 200px !important; float: none !important; margin: 0 0 12px 0 !important; }
.news .a2, .news .a3, .news .a4, .news .a5 { width: 100% !important; float: none !important; }
/* 面包屑导航 */
.dqwz { width: 100% !important; margin: 0 !important; padding: 0 16px !important; }
}
/* ============ 33. #11 通用容器 w1400 移动端安全边距 ============ */
@media (max-width: 768px) {
.w1400 { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
.main { width: 100% !important; padding: 0 16px; box-sizing: border-box; }
}
/* ============ 34. #12 关于我们页面移动端修复 ============ */
@media (max-width: 768px) {
.gyshuoyuan .shoyuatitle { font-size: 26px !important; line-height: 36px !important; }
.gyshuoyuan .shoyuatitle p { font-size: 18px !important; }
.gyright .title_gy { font-size: 18px !important; line-height: 28px !important; }
.gyright p { font-size: 14px !important; line-height: 24px !important; }
}
/* ============ 35. 终极修复：所有页面间距与布局（覆盖前面所有冲突规则） ============ */
/* 35a. 全局容器修复：仅在平板及以下生效 */
@media (max-width: 1200px) {
.container { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 16px !important; box-sizing: border-box !important; overflow: visible !important; }
}
/* 35b. 产品列表页 (product.html) 移动端 */
@media (max-width: 992px) {
.listpage { padding: 20px 0 !important; display: block !important; }
.listpage .leftm { float: none !important; width: 100% !important; margin: 0 0 20px 0 !important; padding: 16px !important; box-sizing: border-box !important; }
.listpage .rightm { float: none !important; width: 100% !important; }
.listpage .rightm .box { width: 100% !important; }
.listpage .rightm .box li { width: calc(50% - 12px) !important; height: auto !important; margin: 0 12px 24px 0 !important; float: left !important; }
.listpage .rightm .box li:nth-child(3n) { margin-right: 12px !important; }
.listpage .rightm .box li:nth-child(2n) { margin-right: 0 !important; }
.listpage .rightm .box li img { width: 100% !important; height: auto !important; max-height: 220px !important; object-fit: contain !important; }
.listpage .rightm .box li h3 { line-height: 1.4 !important; font-size: 14px !important; padding: 12px 8px !important; height: auto !important; }
.listpage .rightm .box li .des { display: none !important; }
.listpage .rightm .box li p { position: static !important; height: auto !important; padding: 8px 15px !important; border-top: 1px solid #e3e3e3 !important; font-size: 13px !important; }
.listpage .rightm .box2 li { width: calc(50% - 9px) !important; height: auto !important; margin: 0 18px 15px 0 !important; float: left !important; }
.listpage .rightm .box2 li img { height: 180px !important; object-fit: contain !important; }
.listpage .rightm .fan li { padding: 0 0 16px 0 !important; margin-bottom: 16px !important; }
.listpage .rightm .fan .left { width: 100% !important; height: auto !important; margin-bottom: 12px !important; }
.listpage .rightm .fan .right { width: 100% !important; }
.listpage .rightm .fan .right h2 { font-size: 18px !important; padding-bottom: 8px !important; }
.listpage .rightm .fan .right p { font-size: 13px !important; line-height: 1.6 !important; height: auto !important; }
.listpage .rightm .fan .button a { display: inline-block !important; width: auto !important; height: 36px !important; line-height: 36px !important; padding: 0 16px !important; font-size: 14px !important; }
}
@media (max-width: 576px) {
.listpage .rightm .box li { width: 100% !important; margin-right: 0 !important; }
.listpage .rightm .box li img { max-height: 260px !important; }
}
/* 35c. 新闻列表页 (list.html) 移动端 */
@media (max-width: 992px) {
.news { width: 100% !important; float: none !important; padding: 16px 0 !important; }
.news li { height: auto !important; min-height: 160px !important; padding: 16px !important; margin-bottom: 16px !important; overflow: visible !important; }
.news .a1 { width: 140px !important; height: 120px !important; float: left !important; margin: 0 16px 0 0 !important; overflow: hidden !important; flex-shrink: 0; }
.news .a1 img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.news .a2 { width: calc(100% - 156px) !important; height: auto !important; float: left !important; overflow: visible !important; font-size: 16px !important; line-height: 1.4 !important; margin-bottom: 4px !important; }
.news .a2 a { font-size: 16px !important; display: block !important; line-height: 1.4 !important; }
.news .a3 { width: calc(100% - 156px) !important; height: auto !important; float: left !important; padding: 4px 0 6px 0 !important; font-size: 13px !important; line-height: 1.4 !important; overflow: visible !important; }
.news .a4 { width: calc(100% - 156px) !important; height: auto !important; float: left !important; overflow: visible !important; line-height: 1.6 !important; font-size: 13px !important; margin-bottom: 6px !important; }
.news .a5 { width: 100% !important; height: auto !important; float: left !important; padding: 6px 0 0 0 !important; overflow: visible !important; clear: both !important; }
.news .a5 a { width: auto !important; height: auto !important; float: none !important; padding: 4px 0 !important; display: inline-block !important; font-size: 13px !important; line-height: 1.4 !important; }
.rnews { width: 100% !important; float: none !important; padding: 16px !important; margin: 20px 0 0 0 !important; }
}
@media (max-width: 576px) {
.news li { padding: 12px !important; }
.news .a1 { width: 100% !important; height: 180px !important; float: none !important; margin: 0 0 12px 0 !important; }
.news .a2, .news .a3, .news .a4, .news .a5 { width: 100% !important; float: none !important; }
.news .a2 { font-size: 15px !important; }
.news .a4 { line-height: 1.5 !important; }
}
/* 35d. 新闻详情页 (article.html) 移动端 */
@media (max-width: 992px) {
.news1 { padding: 20px 16px !important; margin-top: 16px !important; }
.news1 .con1 { font-size: 22px !important; line-height: 1.4 !important; }
.news1 .con1 h1 a { font-size: 22px !important; }
.news1 .con4 { font-size: 13px !important; padding: 8px 0 !important; height: auto !important; }
.news1 .con2 { padding: 16px 0 !important; line-height: 1.8 !important; font-size: 14px !important; }
.news1 .con5 { padding: 10px 16px !important; line-height: 1.6 !important; font-size: 13px !important; margin-bottom: 20px !important; }
.news2 { padding: 16px !important; margin-top: 16px !important; }
.news2 .titlep { height: auto !important; line-height: normal !important; padding-bottom: 8px !important; }
.news2 .titlep h2 { float: none !important; width: 100% !important; margin: 0 0 8px 0 !important; font-size: 14px !important; }
.news2 ul { padding: 4px 0 !important; }
.news2 li { width: 100% !important; height: auto !important; line-height: normal !important; float: none !important; padding: 4px 0 !important; font-size: 13px !important; }
.news2 li:nth-child(2n) { padding-right: 0 !important; }
.news2 li a { width: auto !important; height: auto !important; float: none !important; text-indent: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.news2 li i { width: auto !important; height: auto !important; float: none !important; text-align: left !important; font-size: 12px !important; line-height: 1.4 !important; }
}
/* 35e. 联系表单页 移动端 */
@media (max-width: 992px) {
.page-position, .position { height: auto !important; min-height: 50px !important; }
.page-position .category ul, .position .category ul { height: auto !important; flex-wrap: wrap; }
.page-position .category ul li, .position .category ul li { height: 50px !important; }
.page-position .category ul li a, .position .category ul li a { height: 50px !important; font-size: 14px !important; }
}
/* ============ 35b2. 产品列表页卡片悬浮效果：上浮 + 图片放大 ============ */
@media (min-width: 993px) {
.container.listpage {
margin-top: 50px !important;
}
.listpage .rightm .box li {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.listpage .rightm .box li:hover {
transform: translateY(-8px) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}
.listpage .rightm .box li img {
transition: transform 0.4s ease !important;
overflow: hidden !important;
}
.listpage .rightm .box li:hover img {
transform: scale(1.06) !important;
}
.listpage .rightm .box li h3 {
position: relative !important;
z-index: 10 !important;
background: #fff !important;
}
.listpage .rightm .box li .des {
display: none !important;
}
/* 首页 .mainBody_03 解决方案卡片 */
.mainBody_03 .a2 i { display: inline-block !important; white-space: nowrap !important; }
}
/* ============ 35b3. 应用案例页面修复：色块区分 + 布局3列 ============ */
@media (min-width: 993px) {
.yyal li {
width: calc((100% - 60px) / 3) !important;
height: auto !important;
min-height: 350px !important;
margin-right: 30px !important;
margin-bottom: 30px !important;
padding: 0 !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
}
.yyal li:nth-child(3n) { margin-right: 0 !important; }
.yyal li a {
width: 100% !important;
height: auto !important;
display: block !important;
border-radius: 0 !important;
}
.yyal li img {
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
}
.yyal li p {
width: 100% !important;
height: auto !important;
min-height: 50px !important;
line-height: 25px !important;
padding: 12px 16px !important;
background: #f6f8fb !important;
color: #333 !important;
font-size: 14px !important;
overflow: hidden !important;
border-top: 1px solid #eee !important;
}
.yyal li h3 {
width: 100% !important;
height: auto !important;
line-height: 25px !important;
padding: 12px 16px !important;
background: #f6f8fb !important;
color: #333 !important;
font-size: 14px !important;
overflow: hidden !important;
font-weight: normal !important;
}
}
/* ============ 35b4. 导航栏选中效果 + Logo居中 ============ */
@media (min-width: 993px) {
/* Logo 在容器内居中显示 */
.header .logo, .navs .logo {
width: 170px !important;
height: 70px !important;
float: left !important;
margin: 10px 0 0 0 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.header .logo img, .navs .logo img {
width: 100% !important;
height: auto !important;
max-height: 60px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
/* 导航选中效果不超出背景 */
.navs .nav .nLi {
padding: 0 !important;
margin: 0 !important;
height: 90px !important;
line-height: 90px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.navs .nav .nLi > a {
display: block !important;
width: 100% !important;
height: 100% !important;
line-height: 90px !important;
text-align: center !important;
box-sizing: border-box !important;
padding: 0 10px !important;
}
.navs .nav .on, .navs .nav .nLi.on {
background: rgba(0, 61, 125, 0.7) !important;
border-radius: 2px !important;
}
/* 导航布局 - 保持原有左右结构，导航不溢出 */
.navs .right {
width: auto !important;
flex: 1 !important;
text-align: right !important;
}
.navs .nav {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 20px 0 0 !important;
box-sizing: border-box !important;
justify-content: flex-end !important;
}
}
/* 修复新闻列表页 PC 端标题允许换行，不再截断 */
@media (min-width: 993px) {
.news li { padding: 24px 24px !important; height: auto !important; min-height: 195px !important; }
.news .a1 { margin-right: 30px !important; }
.news .a2 {
width: calc(100% - 350px) !important;
max-width: 580px !important;
height: auto !important;
min-height: 36px !important;
line-height: 36px !important;
float: left !important;
overflow: visible !important;
margin-bottom: 4px !important;
font-size: 20px !important;
word-break: break-all !important;
white-space: normal !important;
}
.news .a3 {
width: calc(100% - 350px) !important;
max-width: 580px !important;
height: auto !important;
float: left !important;
padding: 6px 0 8px 0 !important;
font-size: 16px !important;
}
.news .a4 {
width: calc(100% - 350px) !important;
max-width: 580px !important;
height: auto !important;
float: left !important;
line-height: 27px !important;
padding-bottom: 6px !important;
font-size: 13px !important;
}
.news .a5 {
width: calc(100% - 350px) !important;
max-width: 580px !important;
height: auto !important;
float: left !important;
padding-top: 6px !important;
font-size: 14px !important;
}
.rnews { padding: 24px !important; }
}
/* 35f. 隐藏移动端不需要的浮动元素 + 案例页移动端 */
@media (max-width: 768px) {
.side { display: none !important; }
.float-ad { display: none !important; }
[class*="kefu"], [class*="service"] { max-width: 180px !important; }
/* 应用案例页面移动端 - 单列布局 + 色块区分 */
.yyal li {
width: 100% !important;
height: auto !important;
min-height: auto !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
padding: 0 !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
overflow: hidden !important;
}
.yyal li a {
width: 100% !important;
height: auto !important;
display: block !important;
}
.yyal li img {
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
}
.yyal li p, .yyal li h3 {
width: 100% !important;
height: auto !important;
min-height: auto !important;
line-height: 24px !important;
padding: 12px 16px !important;
font-size: 14px !important;
background: #f6f8fb !important;
color: #333 !important;
border-top: 1px solid #eee !important;
}
}
/* ============ 35g. 解决方案页 .case .list li 中隐藏箭头，了解详情靠左 ============ */
/* 修复：隐藏 .a4(箭头)，仅保留 .a5(了解详情) 靠左显示 */
@media (min-width: 993px) {
/* 修复 .case .list 容器宽度 */
.case .list {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* 修复 li 宽度：3列布局 */
.case .list li {
width: calc((100% - 60px) / 3) !important;
margin-right: 30px !important;
margin-bottom: 30px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.case .list li:nth-child(3n) { margin-right: 0 !important; }
/* 隐藏箭头 */
.case .list li .a4 {
display: none !important;
}
/* .a5 了解详情：靠左 */
.case .list li .a5 {
width: auto !important;
height: auto !important;
padding: 16px 20px !important;
margin: 0 !important;
float: none !important;
display: block !important;
line-height: 24px !important;
font-size: 16px !important;
color: #000 !important;
text-align: left !important;
}
}
/* ============ 35h. 关于我们页公司文化卡片 + 公司介绍图片修复 ============ */
/* 公司文化：两列布局（2排），公司介绍图片居中 */
@media (min-width: 993px) {
/* 确保 w1400 容器有足够宽度 */
.about-page .w1400 {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* 公司文化栅格容器 - 强制 flex 布局 */
.about-page .content2 .row.g-3 {
display: flex !important;
flex-wrap: wrap !important;
margin: -12px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
}
/* 强制每列宽度为 1/2，两列布局 */
.about-page .content2 .row.g-3 > li,
.about-page .content2 .row.g-3 > li.col-6,
.about-page .content2 .row.g-3 > li.col-lg-4 {
flex: 0 0 auto !important;
width: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 24px) / 2) !important;
padding: 12px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* 卡片内容区域 */
.about-page .content2 .row.g-3 > li .item {
width: 100% !important;
height: 100% !important;
min-height: 240px !important;
padding: 24px !important;
box-sizing: border-box !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s ease !important;
}
.about-page .content2 .row.g-3 > li .item > i {
font-size: 36px !important;
margin-bottom: 12px !important;
color: #003d7d !important;
}
.about-page .content2 .row.g-3 > li .item > h3 {
font-size: 20px !important;
margin: 8px 0 12px 0 !important;
line-height: 1.4 !important;
color: #333 !important;
}
.about-page .content2 .row.g-3 > li .item > p {
font-size: 14px !important;
line-height: 1.7 !important;
flex: 1 !important;
color: #666 !important;
}
/* hover效果 */
.about-page .content2 .row.g-3 > li .item:hover {
background: #003d7d !important;
box-shadow: 0 6px 24px rgba(0,61,125,0.3) !important;
transform: translateY(-4px) !important;
}
.about-page .content2 .row.g-3 > li .item:hover > i { color: #fff !important; }
.about-page .content2 .row.g-3 > li .item:hover > h3 { color: #fff !important; }
.about-page .content2 .row.g-3 > li .item:hover > p { color: rgba(255,255,255,0.9) !important; }
/* === 公司介绍图片居中修复 === */
.about-page .content1 .title img {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 405px !important;
height: 315px !important;
object-fit: contain !important;
}
}
/* 关于我们页公司文化卡片 移动端适配 */
@media (max-width: 768px) {
.about-page .content2 .row.g-3 {
display: flex !important;
flex-wrap: wrap !important;
margin: -8px !important;
}
.about-page .content2 .row.g-3 > li {
width: calc((100% - 16px) / 2) !important;
max-width: calc((100% - 16px) / 2) !important;
padding: 8px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.about-page .content2 .row.g-3 > li .item {
width: 100% !important;
min-height: 180px !important;
padding: 16px !important;
box-sizing: border-box !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s ease !important;
}
.about-page .content2 .row.g-3 > li .item > i {
font-size: 28px !important;
margin-bottom: 8px !important;
color: #003d7d !important;
}
.about-page .content2 .row.g-3 > li .item > h3 {
font-size: 16px !important;
margin: 6px 0 8px 0 !important;
color: #333 !important;
}
.about-page .content2 .row.g-3 > li .item > p {
font-size: 13px !important;
line-height: 1.6 !important;
color: #666 !important;
}
/* hover修复 - 移动端点击时切换 */
.about-page .content2 .row.g-3 > li .item:active {
background: #003d7d !important;
box-shadow: 0 4px 16px rgba(0,61,125,0.3) !important;
}
.about-page .content2 .row.g-3 > li .item:active > i { color: #fff !important; }
.about-page .content2 .row.g-3 > li .item:active > h3 { color: #fff !important; }
.about-page .content2 .row.g-3 > li .item:active > p { color: rgba(255,255,255,0.9) !important; }
}
/* 关于我们页公司文化卡片 平板适配 (769px-992px) */
@media (min-width: 769px) and (max-width: 992px) {
.about-page .content2 .row.g-3 {
display: flex !important;
flex-wrap: wrap !important;
margin: -10px !important;
}
.about-page .content2 .row.g-3 > li {
width: calc((100% - 20px) / 2) !important;
max-width: calc((100% - 20px) / 2) !important;
padding: 10px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.about-page .content2 .row.g-3 > li:nth-child(2n+1) { clear: left !important; }
.about-page .content2 .row.g-3 > li .item {
width: 100% !important;
min-height: 200px !important;
padding: 20px !important;
box-sizing: border-box !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
display: flex !important;
flex-direction: column !important;
}
}
/* ============ 35i. 关于我们页面 Banner 与布局修复 ============ */
/* 修复：banner与导航间距、图片压在banner上的问题 */
@media (min-width: 993px) {
/* Banner区域 - 确保高度正确，去除多余间距 */
.home-banner {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
overflow: hidden !important;
}
.home-banner > img {
display: block !important;
width: 100% !important;
height: 540px !important;
object-fit: cover !important;
}
/* about-text 定位在banner内部 */
.home-banner .about-text {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
/* about-page 紧跟banner，无多余间距 */
.about-page {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
z-index: 2 !important;
}
/* content1 不压在banner上 */
.about-page .content1 {
position: relative !important;
z-index: 2 !important;
margin-top: 0 !important;
}
/* content1 内部图片修复 - 不溢出容器 */
.about-page .content1 .title img {
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 380px !important;
height: auto !important;
max-height: 300px !important;
}
/* header 不压banner */
header {
z-index: 100 !important;
}
/* 面包屑/导航条与banner的间距 */
.home-banner + .about-page,
.home-banner + div {
margin-top: 0 !important;
}
}
/* 关于我们页面 Banner 移动端修复 */
@media (max-width: 768px) {
.home-banner {
margin-top: 0 !important;
padding-top: 0 !important;
}
.home-banner > img {
height: 280px !important;
object-fit: cover !important;
}
.home-banner .about-text {
padding: 40px 16px !important;
justify-content: center !important;
}
.home-banner .about-text h3 {
font-size: 26px !important;
}
.about-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
.about-page .content1 .title img {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
right: auto !important;
bottom: auto !important;
margin: 0 auto 20px !important;
display: block !important;
box-sizing: border-box !important;
}
.about-page .content1 .title {
position: static !important;
width: 100% !important;
overflow: visible !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
.about-page .content1 img {
max-width: 100% !important;
height: auto !important;
}
.about-page .content1 .desc {
padding: 0 16px !important;
}
}
/* ============ 35j. 产品详情页 show.html 移动端适配 ============ */
@media (max-width: 768px) {
/* 产品详情页 - 隐藏侧边栏，内容全宽 */
.show-page .leftm {
display: none !important;
}
.show-page .rightm {
width: 100% !important;
float: none !important;
}
/* 主容器全宽 */
.listpage {
width: 100% !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
/* 侧边栏 - 移动端样式 */
.listpage .leftm {
display: block !important;
width: 100% !important;
float: none !important;
margin-bottom: 16px !important;
border-radius: 12px !important;
overflow: visible !important;
background: #fff !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
padding: 0 !important;
color: #333 !important;
}
.listpage .leftm a {
color: #333 !important;
text-decoration: none !important;
}
.listpage .leftm a:hover {
color: #003d7d !important;
text-decoration: none !important;
}
.listpage .sidebar-cat-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
padding: 16px 16px 4px !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
}
.listpage .sidebar-cat-wrap {
padding: 4px 10px 10px !important;
overflow: visible !important;
}
.listpage .sidebar-cat-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 8px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #666 !important;
border-bottom: 1px solid #f0f0f5 !important;
margin-bottom: 4px !important;
}
.listpage .sidebar-cat-icon {
font-size: 14px !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-list {
list-style: none !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
min-width: 100% !important;
}
.listpage .sidebar-cat-item {
margin: 0 0 4px !important;
}
.listpage .sidebar-cat-item a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
white-space: normal !important;
transition: all 0.2s ease !important;
}
.listpage .sidebar-cat-item a:hover {
background: #f0f4ff !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-item a.active {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
}
.listpage .sidebar-cat-item a.active .sidebar-cat-arrow {
color: #fff !important;
}
.listpage .sidebar-cat-arrow {
display: inline !important;
font-size: 18px !important;
opacity: 0.5 !important;
transition: all 0.2s ease !important;
}
.listpage .sidebar-cat-sublist {
list-style: none !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.listpage .sidebar-cat-subitem {
margin-bottom: 4px !important;
}
.listpage .sidebar-cat-subitem a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
white-space: normal !important;
transition: all 0.2s ease !important;
}
.listpage .sidebar-cat-subitem a:hover {
background: #f0f4ff !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-subitem a.active {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
font-weight: 500 !important;
}
.listpage .sidebar-phone {
margin: 8px !important;
padding: 12px !important;
background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%) !important;
border-radius: 10px !important;
text-align: center !important;
}
.listpage .sidebar-phone-label {
font-size: 12px !important;
color: #888 !important;
margin: 0 0 4px !important;
}
.listpage .sidebar-phone-num {
font-size: 18px !important;
font-weight: 700 !important;
color: #003d7d !important;
margin: 0 !important;
letter-spacing: 1px !important;
}
/* 右侧内容区全宽 */
.listpage .rightm.right {
float: none !important;
width: 100% !important;
padding: 0 !important;
}
/* 产品图片区 - 堆叠布局 */
.picture {
padding: 16px 12px !important;
margin-bottom: 12px !important;
box-sizing: border-box !important;
}
.picture .left1 {
float: none !important;
width: 100% !important;
max-width: 320px !important;
height: auto !important;
margin: 0 auto 16px !important;
}
.picture .left1 img {
width: 100% !important;
height: auto !important;
}
.picture .right2 {
float: none !important;
width: 100% !important;
padding: 0 !important;
}
.picture .right2 .con1 {
height: auto !important;
line-height: 1.4 !important;
font-size: 18px !important;
padding: 0 0 8px !important;
}
.picture .right2 .con2 {
height: auto !important;
overflow: visible !important;
line-height: 1.8 !important;
font-size: 14px !important;
padding: 12px 0 !important;
}
.picture .right2 .con2 .p p {
display: none !important;
}
.picture .right2 .con3 {
height: auto !important;
padding: 12px 0 !important;
}
.picture .right2 .con3 a {
width: 100% !important;
height: 44px !important;
line-height: 44px !important;
float: none !important;
margin: 0 !important;
font-size: 15px !important;
}
/* 产品详情Tabs */
.slideBox {
padding: 16px 12px !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
.slideBox .titlep {
height: auto !important;
line-height: 1.4 !important;
border-bottom: 1px solid #dedede !important;
}
.slideBox .titlep ul {
display: flex !important;
flex-wrap: wrap !important;
}
.slideBox .titlep li {
float: none !important;
width: 50% !important;
}
.slideBox .titlep h2 {
width: auto !important;
float: none !important;
font-size: 15px !important;
padding: 10px 0 !important;
margin: 0 !important;
text-align: center !important;
}
.slideBox .titlep li.on h2 {
background: #003d7d !important;
color: #fff !important;
}
.slideBox .cont5 {
padding: 12px 0 !important;
line-height: 1.8 !important;
font-size: 14px !important;
overflow: visible !important;
height: auto !important;
}
.slideBox .cont5 h2 {
font-size: 16px !important;
padding-left: 8px !important;
margin-bottom: 12px !important;
}
.slideBox .cont5 ul {
width: 100% !important;
}
.slideBox .cont5 .tempWrap {
width: 100% !important;
}
.slideBox .cont5.cont_case {
overflow: visible !important;
}
.slideBox .cont5.cont_case ul {
width: 100% !important;
float: none !important;
}
.slideBox .cont5.cont_case .parameter {
width: 100% !important;
}
.slideBox .cont5.cont_case table {
width: 100% !important;
max-width: 100% !important;
}
.slideBox .cont5.cont_case img {
max-width: 100% !important;
height: auto !important;
}
/* 产品信息区 - 去除边框线 */
.picture .right2 .con2 hr,
.picture .right2 .con2 .p p {
display: none !important;
}
.picture .right2 .con2 .p {
border: none !important;
}
/* 上下篇导航 */
.con6 {
padding: 16px 0 !important;
line-height: 1.4 !important;
}
.con6 .pre,
.con6 .next {
width: 100% !important;
height: auto !important;
float: none !important;
margin-bottom: 8px !important;
padding: 10px 12px !important;
line-height: 1.6 !important;
text-indent: 0 !important;
box-sizing: border-box !important;
}
.con6 .span {
width: auto !important;
height: auto !important;
display: inline-block !important;
padding: 0 8px !important;
margin: 0 4px 0 0 !important;
line-height: 1.6 !important;
background: none !important;
color: #003d7d !important;
}
/* 相关产品 */
.con7 {
padding: 16px 12px !important;
margin-top: 12px !important;
box-sizing: border-box !important;
}
.con7 .titlep {
height: auto !important;
line-height: 1.4 !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #dedede !important;
}
.con7 .titlep h2 {
width: auto !important;
float: none !important;
font-size: 16px !important;
padding: 8px 12px !important;
margin: 0 !important;
}
.box3 {
width: 100% !important;
padding: 12px 0 0 !important;
}
.box3 li {
width: 100% !important;
height: auto !important;
float: none !important;
margin: 0 0 12px 0 !important;
}
.box3 li:nth-child(3n) {
margin-right: 0 !important;
}
.box3 li:nth-child(2n) {
margin-right: 0 !important;
}
.box3 li img {
width: 100% !important;
height: auto !important;
max-height: 200px !important;
object-fit: contain !important;
}
.box3 li h3 {
font-size: 13px !important;
line-height: 1.4 !important;
padding: 8px 6px !important;
}
.box3 li .des {
display: none !important;
}
}
/* ============ 35k. 文章详情页 article.html 移动端适配 ============ */
@media (max-width: 768px) {
/* 容器全宽 */
.container {
width: 100% !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
/* 面包屑 */
.dqwz {
font-size: 12px !important;
padding: 10px 12px !important;
line-height: 1.5 !important;
}
/* 文章主体 - 全宽 */
.new {
width: 100% !important;
float: none !important;
padding: 0 !important;
margin-top: 10px !important;
}
/* 文章内容卡片 */
.news1 {
padding: 16px 12px !important;
margin-top: 0 !important;
}
.news1 .con1 {
height: auto !important;
line-height: 1.4 !important;
font-size: 22px !important;
padding: 0 0 8px !important;
}
.news1 .con1 h1 a {
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.news1 .con4 {
height: auto !important;
line-height: 1.6 !important;
font-size: 12px !important;
padding: 8px 0 !important;
color: #999 !important;
}
.news1 .con2 {
padding: 12px 0 !important;
line-height: 1.8 !important;
font-size: 14px !important;
overflow: visible !important;
}
.news1 .con2 h2 {
font-size: 18px !important;
margin: 12px 0 8px !important;
padding-left: 8px !important;
border-left: 4px solid #051f37 !important;
}
.news1 .con2 h3 {
font-size: 16px !important;
margin: 10px 0 6px !important;
padding-left: 8px !important;
border-left: 4px solid #051f37 !important;
}
.news1 .con2 h5 img {
max-width: 100% !important;
height: auto !important;
}
.news1 .con5 {
padding: 10px 12px !important;
line-height: 1.6 !important;
font-size: 13px !important;
margin-bottom: 20px !important;
}
/* 文章上下篇 */
.news1 .con6,
.con6 {
padding: 16px 0 !important;
line-height: 1.4 !important;
}
.news1 .con6 .pre,
.news1 .con6 .next,
.con6 .pre,
.con6 .next {
width: 100% !important;
height: auto !important;
float: none !important;
margin-bottom: 8px !important;
padding: 10px 12px !important;
line-height: 1.6 !important;
text-indent: 0 !important;
box-sizing: border-box !important;
}
.news1 .con6 .span,
.con6 .span {
width: auto !important;
height: auto !important;
display: inline-block !important;
padding: 0 8px !important;
margin: 0 4px 0 0 !important;
line-height: 1.6 !important;
background: none !important;
color: #003d7d !important;
}
/* 相关新闻 */
.news2 {
padding: 16px 12px !important;
margin-top: 16px !important;
}
.news2 .titlep {
height: auto !important;
line-height: 1.4 !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #dedede !important;
}
.news2 .titlep h2 {
width: auto !important;
float: none !important;
font-size: 15px !important;
padding: 8px 12px !important;
margin: 0 !important;
}
.news2 ul {
padding: 8px 0 !important;
}
.news2 li {
width: 100% !important;
height: auto !important;
line-height: 1.6 !important;
float: none !important;
padding: 6px 0 !important;
font-size: 13px !important;
}
.news2 li a {
width: auto !important;
height: auto !important;
float: none !important;
text-indent: 0 !important;
line-height: 1.6 !important;
overflow: visible !important;
}
.news2 li i {
width: auto !important;
height: auto !important;
float: none !important;
text-align: left !important;
display: block !important;
padding: 2px 0 0 !important;
font-size: 12px !important;
}
/* 侧边相关产品 - 全宽堆叠 */
.rnews {
width: 100% !important;
float: none !important;
padding: 16px 12px !important;
margin: 16px 0 !important;
box-sizing: border-box !important;
}
.rnews h2 {
font-size: 18px !important;
padding-bottom: 12px !important;
}
.rnews ul {
overflow: visible !important;
}
.rnews ul li {
padding: 10px 0 !important;
margin-bottom: 10px !important;
text-align: center !important;
}
.rnews ul li img {
max-width: 100% !important;
height: auto !important;
margin: 0 auto 8px !important;
}
.rnews ul li h3 {
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
}
}
/* ============ 35l. 产品详情页 PC 端布局优化（参照 yikinai.com） ============ */
@media (min-width: 993px) {
/* 主容器 - 全宽自适应 */
.listpage {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* 产品详情页(show-page)专用布局 - 侧边栏与内容区水平对齐 */
.show-page .leftm {
width: 260px !important;
float: left !important;
margin: 0 !important;
}
.show-page .rightm.right {
width: calc(100% - 280px) !important;
float: right !important;
margin: 0 !important;
padding: 0 !important;
}
/* 左侧边栏 - 产品分类新样式 */
.listpage .leftm {
width: 220px !important;
float: left !important;
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
overflow: visible !important;
padding: 0 !important;
}
.listpage .sidebar-cat-title {
font-size: 26px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
padding: 24px 20px 8px !important;
line-height: 1.3 !important;
letter-spacing: 2px !important;
}
.listpage .sidebar-cat-wrap {
padding: 8px 12px 12px !important;
}
.listpage .sidebar-cat-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #666 !important;
padding: 12px 10px !important;
border-bottom: 1px solid #f0f0f5 !important;
margin-bottom: 4px !important;
}
.listpage .sidebar-cat-icon {
font-size: 14px !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.listpage .sidebar-cat-item {
margin-bottom: 4px !important;
}
.listpage .sidebar-cat-item a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
font-size: 14px !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
font-weight: 500 !important;
cursor: pointer !important;
}
.listpage .sidebar-cat-item a:hover {
background: #f0f4ff !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-item a.active,
.listpage .sidebar-cat-item a:target {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
}
.listpage .sidebar-cat-item a.active .sidebar-cat-arrow,
.listpage .sidebar-cat-item a:hover .sidebar-cat-arrow {
opacity: 1 !important;
transform: translateX(0) !important;
}
.listpage .sidebar-cat-arrow {
font-size: 18px !important;
opacity: 0.4 !important;
transform: translateX(-4px) !important;
transition: all 0.25s ease !important;
margin-left: auto !important;
}
.listpage .sidebar-cat-item a.active .sidebar-cat-arrow {
opacity: 1 !important;
color: #fff !important;
transform: translateX(0) !important;
}
.listpage .sidebar-cat-sublist {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.listpage .sidebar-cat-subitem {
margin-bottom: 4px !important;
}
.listpage .sidebar-cat-subitem a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
font-size: 14px !important;
color: #333 !important;
text-decoration: none !important;
border-radius: 8px !important;
transition: all 0.25s ease !important;
font-weight: 500 !important;
cursor: pointer !important;
}
.listpage .sidebar-cat-subitem a:hover {
background: #f0f4ff !important;
color: #003d7d !important;
}
.listpage .sidebar-cat-subitem a.active {
background: linear-gradient(135deg, #003d7d 0%, #003d7d 100%) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(74,108,247,0.35) !important;
}
.listpage .sidebar-phone {
margin: 12px !important;
padding: 16px !important;
background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%) !important;
border-radius: 10px !important;
text-align: center !important;
}
.listpage .sidebar-phone-label {
font-size: 12px !important;
color: #888 !important;
margin: 0 0 4px !important;
}
.listpage .sidebar-phone-num {
font-size: 20px !important;
font-weight: 700 !important;
color: #003d7d !important;
margin: 0 !important;
letter-spacing: 1px !important;
}
/* 右侧内容区 */
.listpage .rightm.right {
width: calc(100% - 200px) !important;
float: right !important;
padding: 0 !important;
}
/* 产品图片区 - 左右两栏 */
.picture {
display: flex !important;
flex-wrap: nowrap !important;
gap: 30px !important;
padding: 20px 0 !important;
margin-bottom: 0 !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
overflow: hidden !important;
}
.picture .left1 {
flex: 0 0 480px !important;
width: 480px !important;
height: 480px !important;
float: none !important;
margin: 0 !important;
border: none !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.picture .left1 img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.picture .right2 {
flex: 1 !important;
width: auto !important;
float: none !important;
padding: 10px 10px 10px 0 !important;
overflow: hidden !important;
}
.picture .right2 .con1 {
height: auto !important;
line-height: 1.4 !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #000 !important;
padding: 0 0 12px !important;
overflow: visible !important;
}
.picture .right2 .con2 {
height: auto !important;
overflow: visible !important;
line-height: 1.8 !important;
font-size: 14px !important;
padding: 12px 0 !important;
border-top: 1px solid #f1f1f1 !important;
border-bottom: 1px solid #f1f1f1 !important;
}
.picture .right2 .con2 p {
word-break: break-all !important;
overflow-wrap: break-word !important;
margin: 4px 0 !important;
}
.picture .right2 .con2 .p p {
display: none !important;
}
.picture .right2 .con3 {
height: auto !important;
padding: 16px 0 0 !important;
}
.picture .right2 .con3 a {
display: inline-block !important;
width: auto !important;
min-width: 160px !important;
height: 46px !important;
line-height: 46px !important;
padding: 0 24px !important;
float: none !important;
margin: 0 !important;
border-radius: 4px !important;
font-size: 16px !important;
text-align: center !important;
}
/* Tabs 区域 */
.slideBox {
padding: 20px 24px !important;
margin-top: 20px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
max-width: 100% !important;
overflow: hidden !important;
}
.slideBox .titlep {
height: 50px !important;
line-height: 50px !important;
border-bottom: 2px solid #f1f1f1 !important;
}
.slideBox .titlep h2 {
height: 50px !important;
line-height: 50px !important;
font-size: 17px !important;
padding: 0 24px !important;
margin: 0 20px 0 0 !important;
background: none !important;
color: #333 !important;
border-bottom: 2px solid transparent !important;
float: left !important;
width: auto !important;
}
.slideBox .titlep li.on h2 {
background: none !important;
color: #003d7d !important;
border-bottom: 2px solid #003d7d !important;
}
.slideBox .con5 {
padding: 20px 0 !important;
line-height: 1.8 !important;
font-size: 14px !important;
overflow: visible !important;
height: auto !important;
word-break: break-all !important;
overflow-wrap: break-word !important;
}
.slideBox .con5 img {
max-width: 100% !important;
height: auto !important;
}
.slideBox .con5 table {
max-width: 100% !important;
overflow-x: auto !important;
display: block !important;
}
/* 相关产品 */
.con7 {
padding: 20px 24px !important;
margin-top: 20px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.box3 {
width: 100% !important;
}
.box3 li {
width: calc((100% - 40px) / 3) !important;
height: auto !important;
margin: 0 20px 20px 0 !important;
}
.box3 li:nth-child(3n) {
margin-right: 0 !important;
}
.box3 li img {
height: 240px !important;
object-fit: contain !important;
}
}
/* ============ 35m. 文章详情页内容溢出修复（PC端） ============ */
@media (min-width: 993px) {
.container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
.new {
width: calc(100% - 280px) !important;
float: left !important;
padding: 0 !important;
}
.news1 {
padding: 24px 28px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
overflow: hidden !important;
}
.news1 .con2 {
padding: 16px 0 !important;
line-height: 1.8 !important;
font-size: 14px !important;
overflow: hidden !important;
}
.news1 .con2 p,
.news1 .con2 div,
.news1 .con2 span,
.news1 .con2 li {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
.news1 .con2 img {
max-width: 100% !important;
height: auto !important;
}
.news1 .con2 table {
max-width: 100% !important;
overflow-x: auto !important;
display: block !important;
}
.news1 .con2 iframe,
.news1 .con2 video {
max-width: 100% !important;
}
.news1 .con5 {
padding: 12px 16px !important;
line-height: 1.7 !important;
font-size: 13px !important;
}
.news2 {
padding: 20px 24px !important;
margin-top: 20px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.rnews {
width: 240px !important;
float: right !important;
padding: 20px !important;
background: #fff !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.rnews ul li img {
max-width: 100% !important;
height: auto !important;
}
}
/* ============ 35n. 文章详情页内容溢出修复（移动端补充） ============ */
@media (max-width: 768px) {
.news1 .con2 {
word-break: break-all !important;
overflow-wrap: break-word !important;
overflow: hidden !important;
}
.news1 .con2 img {
max-width: 100% !important;
height: auto !important;
}
.news1 .con2 table {
max-width: 100% !important;
overflow-x: auto !important;
display: block !important;
}
.news1 .con2 iframe,
.news1 .con2 video {
max-width: 100% !important;
height: auto !important;
}
.news1 .con2 p,
.news1 .con2 div {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
.news1 .con2 h5 img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* 产品参数表格溢出修复 */
.slideBox .cont5 .parameter {
overflow-x: auto !important;
display: block !important;
max-width: 100% !important;
}
.slideBox .cont5 .parameter table {
min-width: 600px !important;
max-width: none !important;
}
/* 产品详情文本溢出修复 */
.picture .right2 .con2,
.slideBox .cont5 {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
.picture .right2 .con2 p {
word-break: break-all !important;
overflow-wrap: break-word !important;
}
}
/* ============ 35z. 最终覆盖规则 - 解决层叠冲突 ============ */
/* 移动端 - 最终覆盖 */
@media (max-width: 768px) {
/* 手机端解决方案箭头隐藏 */
.mainBody_03 .a2 i {
display: none !important;
}
/* 手机端Banner切换按钮全部隐藏 */
.mainBody_01 .prev,
.mainBody_01 .next {
display: none !important;
}
/* 产品详情页手机端隐藏侧边栏 */
.show-page .leftm {
display: none !important;
}
.show-page .rightm.right {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.show-page .rightm {
width: 100% !important;
float: none !important;
}
}
/* PC端 - 产品详情页最终对齐与布局 */
@media (min-width: 993px) {
/* 侧边栏与右侧内容顶部对齐 + 间隔 */
.show-page {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 20px !important;
}
.show-page .leftm {
width: 260px !important;
float: none !important;
margin: 0 !important;
flex: 0 0 260px !important;
}
.show-page .rightm.right {
width: calc(100% - 280px) !important;
float: none !important;
margin: 0 !important;
flex: 1 !important;
}
/* 面包屑与侧边栏顶部对齐 */
.show-page .dqwz {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0 10px 0 !important;
height: auto !important;
line-height: 1.6 !important;
text-indent: 0 !important;
background: #fff !important;
border-bottom: 1px solid #eee !important;
}
/* 产品图片区域边框 */
.show-page .picture .left1 {
border: 1px solid #e3e3e3 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
/* 产品详情页相关产品 - 一排三个 (修复变形) */
.show-page .box3 {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
width: 100% !important;
padding: 0 !important;
overflow: visible !important;
}
.show-page .box3 > a {
display: block !important;
width: calc((100% - 40px) / 3) !important;
flex: 0 0 calc((100% - 40px) / 3) !important;
height: auto !important;
float: none !important;
margin: 0 !important;
text-decoration: none !important;
}
.show-page .box3 > a > li {
width: 100% !important;
height: auto !important;
float: none !important;
position: relative !important;
text-align: center !important;
border: 1px solid #e3e3e3 !important;
border-radius: 4px !important;
overflow: hidden !important;
background: #fff !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.show-page .box3 li img {
width: 100% !important;
height: 200px !important;
object-fit: contain !important;
display: block !important;
}
.show-page .box3 li h3 {
padding: 12px 10px !important;
font-size: 14px !important;
line-height: 1.4 !important;
height: auto !important;
margin: 0 !important;
border-top: 1px solid #f1f1f1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.show-page .box3 li .des {
display: none !important;
}
}