/* SAMA Machinery International Site - Modern Industrial B2B Style */
:root {
--primary-dark: #0f1923;
--primary-navy: #1a2332;
--primary-blue: #1e3a5f;
--accent-red: #db261d;
--accent-red-dark: #b71c14;
--text-dark: #1a1a2e;
--text-gray: #5a6478;
--text-light: #8899aa;
--bg-light: #f5f7fa;
--bg-white: #ffffff;
--border-color: #e1e8ef;
--shadow-sm: 0 2px 8px rgba(15,25,35,0.08);
--shadow-md: 0 4px 20px rgba(15,25,35,0.12);
--shadow-lg: 0 8px 40px rgba(15,25,35,0.16);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
--container: 1280px;
}
* { margin:0; padding:0; box-sizing:border-box; }
/* ===== 图片防变形（全局兜底）=====
HTML 里的 width/height 属性会被浏览器当作 presentational hint 生成
`height:XXXpx`。凡是 CSS 没有显式写 height 的 ![]()
，都会被这个属性
撑成固定高度，宽度却按 100% 拉伸 → 图片变形（实测「关于我们」区
1200x675 的图被压成 486x675）。
这里统一把 height 复位为 auto。写了具体 height 的图片（logo、国旗、
产品图等）由各自规则或本行的 auto 覆盖链后续处理，不受影响。 */
img { height:auto; }
html {
scroll-behavior:smooth;
/* 固定 header 高 70px：锚点跳转时若不预留偏移，目标区块会被压在导航下 */
scroll-padding-top:84px;
}
body {
padding-top: 70px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
color: var(--text-dark);
background: var(--bg-white);
line-height: 1.6;
overflow-x: hidden;
}
/* 语言切换过渡效果 */
[data-lang] {
transition: opacity 0.2s ease;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* Top Bar */
.top-bar {
background: var(--primary-dark);
color: #aabbcc;
font-size: 13px;
padding: 8px 0;
}
.top-bar .container { display:flex; justify-content:space-between; align-items:center; }
.top-bar-info { display:flex; gap:24px; }
.top-bar-info span { display:flex; align-items:center; gap:6px; }
.top-bar-info a { color:#aabbcc; text-decoration:none; transition:var(--transition); }
.top-bar-info a:hover { color:#fff; }
/* Header / Navigation */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255,255,255,0.98);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header .container { display:flex; align-items:center; justify-content:space-between; height:80px; transition:var(--transition); }
.header.scrolled .container { height:70px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark {
width:48px; height:48px;
background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
border-radius: 8px;
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:800; font-size:20px;
letter-spacing:-1px;
}
.logo-text { display:flex; flex-direction:column; }
.logo-text .brand { font-size:22px; font-weight:800; color:var(--primary-dark); letter-spacing:1px; }
.logo-text .tagline { font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:2px; }
.logo-img { height:42px; width:auto; display:block; object-fit:contain; }
.logo-text .brand-cn { font-size:15px; font-weight:700; color:var(--primary-dark); letter-spacing:0.3px; line-height:1.3; }
.logo-text .brand-en { font-size:9px; color:var(--text-light); text-transform:uppercase; letter-spacing:1.5px; }
/* 页脚 logo：原图 822x332（比例 2.476）。
height 若含 padding（content-box），图片区只有 26px 高，
配合 width:100% 会被撑成80x36 → 变形 11%。
改用 box-sizing:border-box + object-fit:contain 保证不变形。 */
.logo-img-footer {
height:46px; width:auto; max-width:150px;
box-sizing:border-box; object-fit:contain;
padding:5px 8px; background:#fff; border-radius:6px;
}
.nav { display:flex; align-items:center; gap:4px; }
.nav {
display: flex;
gap: 6px;
align-items: center;
}
.nav a {
color: var(--text-dark);
text-decoration:none;
font-size:14px;
font-weight:500;
padding:8px 6px;
border-radius:6px;
transition:var(--transition);
position:relative;
white-space: nowrap;
flex-shrink: 0;
}
.nav a:hover, .nav a.active { color:var(--accent-red); background:rgba(219,38,29,0.06); }
.nav a.active::after {
content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:24px; height:3px; background:var(--accent-red); border-radius:2px;
}
/* Language Switcher */
.lang-switcher {
position:fixed; top:80px; right:12px; z-index:9999;
}
.lang-btn {
display:flex; align-items:center; gap:8px;
background:rgba(13,32,72,0.88); color:#fff;
border:1px solid rgba(255,255,255,0.25);
padding:10px 16px; border-radius:8px;
font-size:14px; font-weight:500; cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,0.25);
transition:background-color 0.2s ease;
}
.lang-btn:hover { background:var(--primary-blue); }
.lang-btn .flag { font-size:18px; }
.flag-img {
width: 22px;
height: 16px;
vertical-align: middle;
margin-right: 6px;
border-radius: 2px;
display: inline-block;
object-fit: cover;
border: 1px solid rgba(0,0,0,0.1);
}
.lang-dropdown {
position:absolute; top:calc(100% + 8px); right:0;
background:#fff; border-radius:10px; box-shadow:var(--shadow-lg);
min-width:280px; max-height:420px; overflow-y:auto; padding:6px;
opacity:0; visibility:hidden;
transform:translateY(-8px); transition:var(--transition);
z-index:1001;
display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.lang-switcher:hover .lang-dropdown,
.lang-dropdown.show { opacity:1; visibility:visible; transform:translateY(0); }
.lang-dropdown button {
display:flex; align-items:center; gap:8px; width:100%;
background:none; border:none; padding:9px 12px;
font-size:13px; color:var(--text-dark); cursor:pointer;
border-radius:6px; transition:var(--transition); text-align:left;
}
.lang-dropdown button:hover,
.lang-dropdown button.active { background:var(--accent-red); color:#fff; }
.lang-dropdown button .flag { font-size:18px; flex-shrink:0; }
/* Mobile Menu Toggle */
.menu-toggle {
display:none;
background:none; border:none; cursor:pointer;
width:40px; height:40px; flex-direction:column;
align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span {
display:block; width:24px; height:2px;
background:var(--text-dark); border-radius:2px; transition:var(--transition);
}
/* Hero Section */
.hero {
position:relative;
min-height:100vh;
display:flex; align-items:center;
/* 背景图：本地 images/hero-bg.jpg（车间实拍片皮机阵列）
原引用 https://aka.doubaocdn.com/s/TNFDxhAZxe 已 403 失效
（第三方 CDN 防盗链），首页实际长期处于无背景状态，故改用自有本地图。
三处关键处理（均为 Chromium 实测后修正）：
① 渐变角度必须是 90deg（水平）。曾误用 100deg（近乎垂直），
遮罩方向错误，整幅图糊成灰蓝、完全看不出是车间。
② background-position 必须 center bottom。原图机器阵列集中在
中下部，center 定位会被裁到只剩顶部白墙。
③ 图片本身已对顶部白墙做定向压暗（烘焙进文件），
故 CSS 只需 0.86 → 0.06 的水平遮罩保证标题可读。 */
background-image:
linear-gradient(90deg, rgba(9,16,24,0.87) 0%, rgba(10,18,28,0.80) 34%, rgba(12,22,34,0.42) 56%, rgba(13,24,38,0.10) 78%, rgba(13,24,38,0.06) 100%),
url('../images/hero-bg.jpg');
/* 路径必须带 ../ —— 本文件位于 css/ 子目录，CSS 里的相对 url()
是相对「样式表所在目录」解析的。写 images/hero-bg.jpg 会指向
css/images/hero-bg.jpg（不存在），导致首页长期无背景而不报错。
同样修正下方 .page-header 的引用。*/
/* 这两项单独声明（不用 background 简写里的center bottom）：
实测简写形式会被同文件内其他 .hero 规则重置，导致机器阵列
被裁到画面上方、只剩顶部白墙，看起来是一片灰蓝。 */
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
color:#fff;
padding-top:80px;
overflow:hidden;
}
.hero::before {
content:''; position:absolute; top:0; right:0; bottom:0; width:50%;
background: linear-gradient(90deg, transparent, rgba(219,38,29,0.08));
pointer-events:none;
}
.hero-content { max-width:720px; position:relative; z-index:2; }
.hero-badge {
display:inline-flex; align-items:center; gap:8px;
background:rgba(219,38,29,0.15); border:1px solid rgba(219,38,29,0.4);
color:#ff8a82; padding:8px 18px; border-radius:30px;
font-size:13px; font-weight:600; margin-bottom:24px;
text-transform:uppercase; letter-spacing:1px;
}
.hero h1 {
font-size:56px; font-weight:800; line-height:1.15;
margin-bottom:20px; letter-spacing:-1px;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero h1 .highlight { color:var(--accent-red); }
.hero p {
font-size:19px; color:#d3dde7; margin-bottom:36px;
max-width:600px; line-height:1.7;
/* 背景图换成车间实拍后，正文会压在机器与窗框上（亮部）导致读不清。
加轻微文字投影，把字从背景里"托"起来，不必再加深整块遮罩。 */
text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 14px rgba(0,0,0,0.35);
}
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.btn {
display:inline-flex; align-items:center; gap:8px;
padding:16px 32px; border-radius:8px;
font-size:15px; font-weight:600;
text-decoration:none; cursor:pointer;
border:none; transition:var(--transition);
}
.btn-primary { background:var(--accent-red); color:#fff; }
.btn-primary:hover { background:var(--accent-red-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(219,38,29,0.4); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.3); }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,0.1); }
.hero-scroll {
position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
color:rgba(255,255,255,0.6); font-size:13px; text-align:center;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,100% { transform:translateX(-50%) translateY(0); }
50% { transform:translateX(-50%) translateY(10px); }
}
/* Section Common */
.section { padding:100px 0; }
.section-header { text-align:center; margin-bottom:60px; }
.section-label {
display:inline-block; color:var(--accent-red);
font-size:13px; font-weight:700; text-transform:uppercase;
letter-spacing:3px; margin-bottom:12px;
}
.section-title { font-size:40px; font-weight:800; color:var(--primary-dark); margin-bottom:16px; letter-spacing:-0.5px; }
.section-desc { font-size:17px; color:var(--text-gray); max-width:640px; margin:0 auto; }
/* Products Section */
.products { background:var(--bg-light); }
.product-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
.product-card {
background:#fff; border-radius:var(--radius-md);
overflow:hidden; box-shadow:var(--shadow-sm);
transition:var(--transition); cursor:pointer;
text-decoration:none; color:inherit;
display:block;
}
.product-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.product-img {
aspect-ratio:1/1; overflow:hidden; background:#ffffff;
position:relative; display:flex; align-items:center; justify-content:center;
border-bottom:1px solid var(--border-color);
}
.product-img img { width:100%; height:100%; object-fit:contain; padding:8px; transition:transform 0.5s ease; }
.product-card:hover .product-img img { transform:scale(1.05); }
.product-img-icon i { font-size:62px; color:var(--primary-navy); opacity:.45; }
.product-card:hover .product-img-icon i { opacity:.8; color:var(--accent-red); }
.product-info { padding:22px; }
.product-info h3 { font-size:17px; font-weight:700; color:var(--primary-dark); margin-bottom:8px; }
.product-info p { font-size:13px; color:var(--text-light); line-height:1.5; }
.product-arrow {
margin-top:14px; color:var(--accent-red); font-size:13px;
font-weight:600; display:flex; align-items:center; gap:6px;
}
/* Stats Section */
.stats {
position:relative;
/* 前台图仅作环境暗示。遮罩压到 0.985/0.99 ——
这张图里含有「东莞市圣玛机械有限公司 / Dongguan Shengma machinery Co., LTD」
的墙面大字，与本区的红色统计数字在视觉上直接重复、互相争夺注意力，
因此几乎压成纯深色，只留一层几乎不可察的环境感。 */
background: linear-gradient(135deg, rgba(10,18,27,0.985) 0%, rgba(19,38,60,0.99) 100%),
url('../images/company-front.jpg') center 45%/cover no-repeat;
color:#fff; padding:72px 0;
}
/* 区块标题：明确居中基准点，视觉上更稳 */
.stats-head { text-align:center; margin-bottom:44px; }
.stats-title {
display:inline-block; font-size:26px; font-weight:800;
letter-spacing:3px; color:#fff;
padding-bottom:12px; position:relative;
}
.stats-title::after {
content:''; position:absolute; left:50%; bottom:0;
transform:translateX(-50%); width:48px; height:3px;
background:var(--accent-red); border-radius:2px;
}
.stats-grid {
display:grid; grid-template-columns:repeat(4,1fr);
gap:32px; width:100%; max-width:1080px; margin:0 auto;
}
.stat-item {
position:relative; text-align:center;
display:flex; flex-direction:column; align-items:center;
justify-content:flex-start;
}
/* 分隔线定位在「列间隙」正中。
gap=32px，故偏移 = -(padding + gap/2) = -(0 + 16px)。
.stat-item 不能有左右 padding，否则 absolute 的 left 以内容盒为基准、
连padding 一起偏移，线就会偏离间隙中心（这正是之前看着"没居中"的原因）。 */
.stat-item + .stat-item::before {
content:''; position:absolute; left:-16px; top:50%;
transform:translateY(-50%); width:1px; height:72px;
background:linear-gradient(180deg, transparent, rgba(255,255,255,0.28) 50%, transparent);
}
/* 数字行固定高度：计数器动画期间字号由 0 渐增，也不会推挤标签 */
.stat-item .stat-number {
min-height:62px; display:flex; align-items:center; justify-content:center;
font-size:52px; font-weight:800; color:var(--accent-red);
line-height:1; margin-bottom:10px;
font-variant-numeric:tabular-nums;
}
/* 中文标签不能加 letter-spacing：会把「年行业经验」等中文字距拉宽，
视觉上像没居中。uppercase 对中文无效，仅对英文语言包有意义。 */
.stat-item .stat-label {
margin-top:2px; min-height:21px; line-height:1.4;
font-size:15px; color:#9fb2c6;
}
/* Advantages Section */
.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.advantage-card {
text-align:center; padding:40px 28px;
border-radius:var(--radius-md); background:#fff;
border:1px solid var(--border-color);
transition:var(--transition);
}
.advantage-card:hover { border-color:var(--accent-red); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.advantage-icon {
width:72px; height:72px; margin:0 auto 20px;
background:linear-gradient(135deg, rgba(219,38,29,0.1), rgba(219,38,29,0.05));
border-radius:16px; display:flex; align-items:center; justify-content:center;
font-size:32px; transition:var(--transition);
}
.advantage-card:hover .advantage-icon { transform:rotateY(180deg); background:var(--accent-red); }
.advantage-card h3 { font-size:18px; font-weight:700; color:var(--primary-dark); margin-bottom:10px; }
.advantage-card p { font-size:14px; color:var(--text-gray); line-height:1.6; }
/* About Section */
.about { background:var(--bg-light); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
/* height:auto 是关键。
![]()
里的 height 会被浏览器当作 presentational hint
生成 `height:675px`，优先级高于本规则里没写的 height，于是图片被压成
486x675（原始 16:9），严重变形。
改为 object-fit:cover + 固定 4:3，既不变形，又与右侧文字块高度接近、视觉更平衡。 */
.about-img img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.about-img::before {
content:''; position:absolute; top:-20px; left:-20px;
width:100px; height:100px; border-top:4px solid var(--accent-red);
border-left:4px solid var(--accent-red); border-radius:var(--radius-lg) 0 0 0;
}
.about-content .section-label { display:block; margin-bottom:12px; }
.about-content h2 { font-size:36px; font-weight:800; color:var(--primary-dark); margin-bottom:20px; line-height:1.25; }
.about-content > p { font-size:16px; color:var(--text-gray); margin-bottom:24px; line-height:1.8; }
.about-features { list-style:none; margin-bottom:30px; }
.about-features li {
display:flex; align-items:flex-start; gap:12px;
padding:10px 0; font-size:15px; color:var(--text-dark);
}
.about-features li::before {
content:'✓'; flex-shrink:0; width:24px; height:24px;
background:rgba(219,38,29,0.1); color:var(--accent-red);
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700; margin-top:2px;
}
/* Applications Section */
.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.app-card {
position:relative; border-radius:var(--radius-md); overflow:hidden;
aspect-ratio:4/3; cursor:pointer;
}
.app-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.app-card:hover img { transform:scale(1.1); }
.app-overlay {
position:absolute; inset:0;
background:linear-gradient(to top, rgba(15,25,35,0.9), rgba(15,25,35,0.2));
display:flex; align-items:flex-end; padding:28px;
transition:var(--transition);
}
.app-card:hover .app-overlay { background:linear-gradient(to top, rgba(219,38,29,0.85), rgba(219,38,29,0.3)); }
.app-overlay h3 { color:#fff; font-size:20px; font-weight:700; }
/* Application icon cards */
.app-icon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.app-icon-card {
background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md);
padding:40px 24px; text-align:center; transition:var(--transition);
}
.app-icon-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--accent-red); }
.app-icon-card .app-ico {
width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
background:linear-gradient(135deg, rgba(219,38,29,0.12), rgba(219,38,29,0.04));
color:var(--accent-red); font-size:32px;
display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.app-icon-card:hover .app-ico { background:var(--accent-red); color:#fff; transform:scale(1.08); }
.app-icon-card h3 { font-size:17px; font-weight:700; color:var(--primary-dark); }
/* Country / export-market cards */
.country-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.country-card {
background:#fff; border:1px solid var(--border-color); border-radius:var(--radius-md);
padding:32px 20px; text-align:center; transition:var(--transition);
}
.country-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--accent-red); }
.country-badge {
width:70px; height:70px; margin:0 auto 14px; border-radius:50%;
background:linear-gradient(135deg, var(--primary-navy), var(--primary-dark));
color:#fff; font-size:20px; font-weight:800; letter-spacing:1px;
display:flex; align-items:center; justify-content:center;
}
.country-card h3 { font-size:16px; font-weight:700; color:var(--primary-dark); margin-bottom:4px; }
.country-card p { font-size:13px; color:var(--text-light); }
/* About gallery */
.about-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.about-gallery .g-item { border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); }
.about-gallery .g-item img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; transition:transform .5s ease; }
.about-gallery .g-item:hover img { transform:scale(1.06); }
.about-gallery .g-item.wide { grid-column:span 2; }
.about-gallery .g-item.wide img { aspect-ratio:16/7; }
/* Contact CTA */
.contact-cta {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-navy));
color:#fff; padding:80px 0; text-align:center;
}
.contact-cta h2 { font-size:36px; font-weight:800; margin-bottom:16px; }
.contact-cta p { font-size:17px; color:#aabbcc; margin-bottom:32px; max-width:600px; margin-left:auto; margin-right:auto; }
/* Footer */
.footer { background:var(--primary-dark); color:#aabbcc; padding:70px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; padding-bottom:50px; }
.footer-brand .logo { margin-bottom:20px; }
.footer-brand p { font-size:14px; line-height:1.8; margin-bottom:20px; }
.footer-col h4 { color:#fff; font-size:16px; font-weight:700; margin-bottom:20px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:12px; }
.footer-col a { color:#aabbcc; text-decoration:none; font-size:14px; transition:var(--transition); }
.footer-col a:hover { color:var(--accent-red); padding-left:4px; }
.footer-contact-item { display:flex; gap:10px; margin-bottom:14px; font-size:14px; }
.footer-contact-item .icon { color:var(--accent-red); flex-shrink:0; }
.footer-bottom {
border-top:1px solid rgba(255,255,255,0.08);
padding:24px 0; text-align:center; font-size:13px;
}
/* Back to Top */
.back-to-top {
position:fixed; bottom:30px; right:30px;
width:48px; height:48px; background:var(--accent-red);
color:#fff; border:none; border-radius:50%;
font-size:20px; cursor:pointer; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transition:var(--transition);
z-index:999;
}
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--accent-red-dark); transform:translateY(-4px); }
/* Page Header (Inner Pages) */
.page-header {
/* 内页页头复用 hero 背景图，但遮罩更重（页头高度小、需承载标题与
面包屑，文字对比度要求更高）。 */
background: linear-gradient(180deg, rgba(10,18,26,0.86) 0%, rgba(15,28,42,0.78) 100%),
url('../images/hero-bg.jpg') center 40%/cover no-repeat;
color:#fff; padding:140px 0 80px; text-align:center;
}
.page-header h1 { font-size:42px; font-weight:800; margin-bottom:12px; }
.breadcrumb { font-size:14px; color:#aabbcc; }
.breadcrumb a { color:#aabbcc; text-decoration:none; }
.breadcrumb a:hover { color:var(--accent-red); }
/* Fade-in Animation */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
/* Responsive */
/* Support tabs + videos */
.support-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.support-tab { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:24px 16px; text-align:center; cursor:pointer; transition:var(--transition); }
.support-tab:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d0d8e4; }
.support-tab.active { border-color:var(--accent); background:#fff5f5; box-shadow:0 4px 16px rgba(219,38,29,.12); }
.support-tab-icon { width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:#f4f6f9; display:flex; align-items:center; justify-content:center; font-size:20px; color:#8899aa; transition:var(--transition); }
.support-tab.active .support-tab-icon { background:var(--accent); color:#fff; }
.support-tab-name { font-size:15px; font-weight:600; color:var(--primary-dark); }
.support-panel { display:none; animation:fadeIn .35s ease; }
.support-panel.active { display:block; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.video-card { background:#fff; border:1px solid var(--border-color); border-radius:12px; overflow:hidden; transition:var(--transition); }
.video-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.video-card video { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.video-card h3 { padding:14px 16px 2px; font-size:16px; color:var(--primary-dark); }
.video-card p { padding:0 16px 14px; font-size:13px; color:var(--text-gray); }
.panel-empty { background:#fff; border:1px dashed var(--border-color); border-radius:14px; padding:60px 20px; text-align:center; color:var(--text-gray); }
.panel-empty i { font-size:42px; color:#ccd6e0; margin-bottom:16px; display:block; }
.panel-empty p { font-size:16px; margin-bottom:20px; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
/* Video lightbox */
.video-thumb { position:relative; cursor:pointer; }
.video-thumb video { pointer-events:none; }
.play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px; box-shadow:0 4px 20px rgba(0,0,0,.3); transition:var(--transition); }
.video-card:hover .play-btn { transform:translate(-50%,-50%) scale(1.1); background:var(--accent); color:#fff; }
.video-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; }
.video-lightbox.show { display:flex; animation:fadeIn .25s ease; }
.lightbox-body { width:100%; max-width:960px; }
.lightbox-body video { width:100%; border-radius:10px; display:block; }
.lightbox-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; border:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:var(--accent); }
/* Video lightbox */
.video-thumb { position:relative; cursor:pointer; }
.video-thumb video { pointer-events:none; }
.play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px; box-shadow:0 4px 20px rgba(0,0,0,.3); transition:var(--transition); }
.video-card:hover .play-btn { transform:translate(-50%,-50%) scale(1.1); background:var(--accent); color:#fff; }
.video-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; }
.video-lightbox.show { display:flex; animation:fadeIn .25s ease; }
.lightbox-body { width:100%; max-width:960px; }
.lightbox-body video { width:100%; border-radius:10px; display:block; }
.lightbox-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; border:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:var(--accent); }
/* Certificates */
/* auto-fit + minmax(160px,1fr) 在 1080~1366 宽度下会排出 6~7 列，
每张证书缩略图只有 ~190px 宽，却因 HTML height 属性被撑到 1706px 高，
形成一排又窄又高的「白色长条」，非常难看。
改为固定 3 列（平板 2 列 / 手机 1 列），给每张证书合理的展示尺寸。 */
.cert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:10px 0; }
.cert-card {
position:relative; background:#fff; border:1px solid #e8e8e8;
border-radius:12px; overflow:hidden; cursor:pointer;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
box-shadow:0 2px 6px rgba(0,0,0,0.04);
display:flex; flex-direction:column;
}
.cert-card:hover { transform:translateY(-4px); box-shadow:0 10px 26px rgba(15,25,35,0.13); border-color:var(--accent-red); }
/* 缩略图容器：固定 5:6 比例的浅灰「证书底板」，卡片高度更紧凑精致 */
.cert-thumb {
position:relative; width:100%; aspect-ratio:5/6;
background:linear-gradient(160deg,#f7f8fa 0%,#eef1f5 100%);
display:flex; align-items:center; justify-content:center;
overflow:hidden; border-bottom:1px solid #eef1f5;
}
/* width/height 由容器 + object-fit:contain 决定；
height:auto 与 max-height 防止 HTML height 属性造成的超高溢出。 */
.cert-card img {
width:100%; height:auto; max-height:100%; max-width:100%;
object-fit:contain; object-position:center;
display:block; padding:14px; transition:transform .4s ease;
}
.cert-card:hover img { transform:scale(1.04); }
.cert-card h3 {
padding:14px 12px; font-size:14px; font-weight:600;
color:var(--primary-dark); text-align:center; background:#fff;
margin:0; line-height:1.4; letter-spacing:.3px;
border-top:1px solid #f0f2f5;
}
/* hover 蒙层：只盖缩略图区域。inset 只写 top/left/right，
底部交给 .cert-thumb 的定位上下文（蒙层是 .cert-thumb 的子元素，
bottom:0 即恰好覆盖缩略图，无需硬编码标题高度）。 */
.cert-mask {
position:absolute; inset:0; background:rgba(15,25,35,.58);
display:flex; align-items:center; justify-content:center; gap:8px;
color:#fff; font-size:14px; opacity:0; transition:opacity .3s ease;
pointer-events:none;
}
.cert-mask i { font-size:22px; }
.cert-card:hover .cert-mask { opacity:1; }
/* 角标：类型标识（商标 / 专利） */
.cert-badge {
position:absolute; top:10px; left:10px; z-index:2;
padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
letter-spacing:.5px; color:#fff; background:rgba(15,25,35,.72);
backdrop-filter:blur(3px);
}
.cert-badge.patent { background:rgba(219,38,29,.88); }
.cert-badge.trademark { background:rgba(30,58,95,.88); }
.cert-badge.system { background:rgba(21,101,77,.88); }
.img-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; display:none; align-items:center; justify-content:center; padding:30px; }
.img-lightbox.show { display:flex; animation:fadeIn .25s ease; }
.img-lightbox img { max-width:90vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.img-lightbox .lightbox-close { position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; border:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.img-lightbox .lightbox-close:hover { background:var(--accent); }
/* Product detail */
.pd-main { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.pd-img { border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--border-color); }
.pd-img img { width:100%; aspect-ratio:4/3; object-fit:contain; display:block; background:#f7f8fa; padding:20px; }
.pd-info h2 { font-size:32px; color:var(--primary-dark); margin-bottom:16px; }
.pd-desc { font-size:16px; color:var(--text-gray); line-height:1.7; margin-bottom:24px; }
.pd-features { list-style:none; margin-bottom:30px; }
.pd-features li { padding:8px 0; color:var(--primary-dark); font-size:15px; display:flex; align-items:center; gap:10px; }
.pd-features i { color:var(--accent); }
.pd-cta { display:flex; gap:14px; flex-wrap:wrap; }
.pd-spec-title { font-size:26px; color:var(--primary-dark); margin-bottom:24px; }
.pd-spec-wrap { border:1px solid var(--border-color); border-radius:14px; overflow:hidden; background:#fff; }
.pd-spec-table { width:100%; border-collapse:collapse; }
.pd-spec-table td { padding:14px 22px; font-size:14px; border-bottom:1px solid var(--border-color); }
.pd-spec-table tr:last-child td { border-bottom:none; }
.pd-spec-table .spec-k { background:#f7f8fa; color:var(--text-gray); width:40%; font-weight:500; }
.pd-spec-table .spec-v { color:var(--primary-dark); font-weight:500; }
@media (max-width: 1024px) {
.product-grid, .advantage-grid { grid-template-columns:repeat(2,1fr); }
.stats-grid { grid-template-columns:repeat(2,1fr); gap:30px 24px; }
.app-grid, .app-icon-grid, .country-grid { grid-template-columns:repeat(2,1fr); }
.footer-grid { grid-template-columns:1fr 1fr; }
.video-grid { grid-template-columns:repeat(2,1fr); }
.cert-grid { grid-template-columns:repeat(2,1fr); }
.pd-main { grid-template-columns:1fr; gap:30px; }
.support-tabs { grid-template-columns:repeat(2,1fr); }
.video-grid { grid-template-columns:repeat(2,1fr); }
.hero h1 { font-size:42px; }
}
/* QR contact cards */
.qr-head { font-size:28px; text-align:center; color:var(--primary-dark); margin-bottom:8px; }
.qr-sub { text-align:center; color:var(--text-gray); margin-bottom:36px; }
.qr-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.qr-card { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:22px 16px; text-align:center; transition:var(--transition); }
.qr-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.qr-card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px; margin-bottom:12px; }
.qr-name { font-size:17px; font-weight:700; color:var(--primary-dark); }
.qr-role { font-size:13px; color:var(--text-gray); margin-top:3px; }
/* ============ Mobile (max-width: 1024px) ============ */
@media (max-width: 1024px) {
/* 通用 */
.top-bar { display:none; }
.menu-toggle { display:flex; }
.container { padding:0 16px; }
/* 导航 */
.nav {
position:fixed; top:64px; left:0; right:0;
background:#fff; flex-direction:column;
padding:8px 0 16px; box-shadow:0 8px 24px rgba(0,0,0,0.14);
transform:translateY(-150%); transition:var(--transition);
gap:0; max-height:calc(100vh - 64px); overflow-y:auto;
overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.nav.open { transform:translateY(0); }
.nav a { width:100%; padding:14px 18px; }
.lang-switcher {
position:fixed; top:80px; right:12px; margin:0;
}
.lang-btn { width:100%; justify-content:center; }
/* 已移除：.lang-dropdown { position:static; ... }
这条规则让面板脱离定位上下文，Chromium 实测
面板 y=-123px（顶部被裁）、宽仅 170px、每项挤在 108px 内。
移动端的正确定位由文件末尾「语言面板移动端重做」一节负责。 */
/* Hero */
.hero h1 { font-size:30px; }
.hero p { font-size:15px; }
.hero-buttons { flex-direction:column; }
.btn { width:100%; justify-content:center; padding:14px 24px; }
/* 通用section */
.section { padding:50px 0; }
.section-title { font-size:26px; }
/* 网格布局 */
.product-grid, .advantage-grid, .app-grid { grid-template-columns:1fr; }
.stats-grid { gap:22px 14px; }
/* 2 列时第2、4 项在最左列，分隔线要落在正确的列间 */
.stat-item + .stat-item::before { display:none; }
.stat-item:nth-child(even)::before {
display:block; left:calc(-1 * 11px);
}
.app-icon-grid, .country-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
.app-icon-card { padding:24px 12px; }
/* 关于我们 */
.about-grid { grid-template-columns:1fr; gap:24px; }
.about-gallery { grid-template-columns:1fr; }
.about-gallery .g-item.wide { grid-column:span 1; }
.about-gallery .g-item.wide img { aspect-ratio:4/3; }
/* 页脚 */
.footer-grid { grid-template-columns:1fr; gap:24px; }
/* Logo */
.logo-img { height:32px; }
.logo-text .brand-cn { font-size:13px; }
.logo-text .brand-en { display:none; }
/* 统计数字 */
.stat-item .stat-number { font-size:36px; }
/* 二维码 */
.qr-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
.video-grid { grid-template-columns:1fr; }
.cert-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
.qr-head { font-size:22px; }
/* 页面标题 */
.page-header { padding:40px 0; }
.page-header h1 { font-size:24px; }
/* === 产品详情页手机端优化 === */
.product-detail-grid {
grid-template-columns:1fr;
gap:20px;
}
.product-detail-img {
padding:12px;
background:#f8f9fa;
border-radius:8px;
}
.product-detail-img img {
max-height:220px;
object-fit:contain;
width:100%;
}
.product-detail-info h2 {
font-size:22px;
margin-bottom:10px;
}
.product-detail-info p {
font-size:14px;
line-height:1.6;
}
.product-features li {
font-size:14px;
padding:6px 0;
}
/* 参数表格 */
.spec-table {
font-size:13px;
display:block;
overflow-x:auto;
}
.spec-table td, .spec-table th {
padding:8px 10px;
}
/* 相关产品 */
.related-products { grid-template-columns:1fr; }
/* 固定底部咨询按钮 */
.mobile-cta {
position:fixed;
bottom:0;
left:0;
right:0;
background:#fff;
padding:12px 16px;
box-shadow:0 -2px 10px rgba(0,0,0,0.1);
z-index:1000;
display:block;
}
.mobile-cta .btn {
width:100%;
padding:14px;
font-size:16px;
}
body { padding-bottom:70px; }
}
/* ============ Small phones (max-width: 480px) ============ */
@media (max-width: 480px) {
.hero h1 { font-size:24px; }
.hero p { font-size:14px; }
.section { padding:40px 0; }
.section-title { font-size:22px; }
.page-header { padding:30px 0; }
.page-header h1 { font-size:20px; }
.product-detail-img img { max-height:180px; }
.product-detail-info h2 { font-size:19px; }
.spec-table { font-size:12px; }
.btn { padding:12px 18px; font-size:14px; }
}
/* News Grid */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.news-card {
background: #fff;
border-radius: 10px;
padding: 30px;
border: 1px solid #e2e8f0;
transition: transform 0.3s, box-shadow 0.3s;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.news-date {
color: #94a3b8;
font-size: 14px;
margin-bottom: 10px;
}
.news-card h3 {
font-size: 20px;
margin-bottom: 12px;
color: #0f1923;
line-height: 1.4;
}
.news-card p {
color: #64748b;
line-height: 1.7;
margin-bottom: 15px;
}
.read-more {
color: #db261d;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
}
@media (max-width: 1024px) {
.news-grid {
grid-template-columns: 1fr;
}
}
/* Export Countries Section */
.ec-section { padding:80px 0; }
.ec-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:40px; }
.ec-stat { text-align:center; padding:28px 20px; background:linear-gradient(135deg,#1a2a3a,#2c3e50); border-radius:12px; color:#fff; }
.ec-num { font-size:42px; font-weight:800; color:#e74c3c; margin-bottom:8px; line-height:1; }
.ec-label { font-size:14px; color:#aabbcc; }
.ec-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.ec-item { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fff; border-radius:8px; border:1px solid #e8eaed; border-left:3px solid #c0392b; transition:all 0.3s; }
.ec-item:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); border-color:#c0392b; }
/* height:auto + width:auto：按每张国旗自身比例自适应宽度，
避免 80x53 与 80x50 的国旗被统一压进 30x22 而轻微变形。 */
.ec-flag { height:22px; width:auto; object-fit:contain; border-radius:2px; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.ec-name { font-size:14px; color:#444; font-weight:500; }
@media (max-width: 1024px) {
.ec-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 1024px) {
.ec-stats { grid-template-columns:repeat(2,1fr); gap:12px; }
.ec-stat { padding:20px 12px; }
.ec-num { font-size:32px; }
.ec-list { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.ec-item { padding:10px 12px; }
.ec-flag { height:18px; }
.ec-name { font-size:13px; }
}
/* ====== 真正适配手机端 375-480px ====== */
/* ====== 全新手机端适配 320-768px ====== */
@media screen and (max-width: 1024px) {
/* 全局：去掉body顶部padding，电脑端的padding只在桌面生效 */
body {
padding-top: 0 !important;
font-size: 14px;
}
/* 顶部栏：手机隐藏 */
.top-bar { display: none !important; }
/* 头部导航：缩小padding，只留logo和汉堡按钮 */
.header .container {
padding: 0 15px !important; flex-wrap: nowrap !important; gap: 8px; }
.header .logo h1 { font-size: 18px !important; }
.header .logo p { font-size: 10px !important; }
/* 导航链接：手机端全部隐藏，改成汉堡菜单 */
.nav {
display: none !important;
position: fixed;
top: 64px;
left: 0;
right: 0;
width: 100%;
flex-direction: column;
gap: 0;
padding: 10px 0;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
max-height: calc(100vh - 64px);
overflow-y: auto;
z-index: 998;
}
.nav.show {
display: flex !important;
/* 必须重置 transform：上一条 .nav 规则用 translateY(-150%) 把菜单
隐藏在视口上方（实测 top=-536px），只改 display 会导致菜单
展开但完全点不到。 */
transform: translateY(0) !important;
/* 菜单需盖在 header 之上（header 为 1000），否则展开时上沿被压住 */
z-index: 1001;
/* 视觉分隔：header 与菜单都是白底，靠阴影与描边区分层次 */
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
animation: samaNavIn 0.22s ease-out;
}
/* 菜单展开时给页面加一层遮罩，点空白处关闭，层次更清晰 */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 25, 35, 0.42);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.22s, visibility 0.22s;
}
.nav-backdrop.show {
opacity: 1;
visibility: visible;
}
@keyframes samaNavIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 菜单项加大点击区，两端留白 */
.nav a {
display: flex !important;
align-items: center;
min-height: 52px;
padding: 14px 22px !important;
font-size: 15px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.nav a:last-child { border-bottom: none !important; }
.nav a:active { background: rgba(219, 38, 29, 0.07); }
/* 菜单打开时锁定背景滚动 */
body.nav-open {
overflow: hidden;
}
/* 汉堡按钮展开时变形为 X */
.menu-toggle.active {
background: rgba(219, 38, 29, 0.08);
border-radius: 8px;
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* 兼容旧 class 名（部分模板可能仍在用 .nav.open） */
.nav.open {
display: flex !important;
transform: translateY(0) !important;
z-index: 1001;
}
.nav a {
padding: 12px 15px !important;
border-bottom: 1px solid #eee;
color: #1a2a3a !important;
font-size: 14px;
text-align: left;
}
/* 语言切换按钮：手机端保留在右上角 */
.lang-switcher {
position:fixed; top:80px; right:12px; margin:0;
}
/* 必须 flex：三根横条靠 flex column + gap 排布；
若 display:block，三条会叠成一团粗块，展开时也无法正确变形为 X */
.menu-toggle { display: flex !important; flex-direction: column; }
/* 首屏banner */
.hero {
min-height: 60vh !important;
padding: 60px 0 !important;
}
.hero h2 {
font-size: 28px !important;
line-height: 1.3 !important;
padding: 0 15px !important;
}
.hero p {
font-size: 14px !important;
padding: 0 15px !important;
}
.hero .hero-btns {
flex-direction: column !important;
gap: 12px !important;
padding: 0 20px !important;
}
.hero .hero-btns a {
width: 100% !important;
text-align: center;
padding: 14px !important;
}
/* 通用section padding */
.section {
padding: 40px 0 !important;
}
.section-title h2 {
font-size: 24px !important;
padding: 0 15px;
}
.section-title p {
font-size: 14px !important;
padding: 0 15px;
}
/* 产品卡片：1列竖排 */
.products-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 15px !important;
}
/* 统计板块：隐藏背景大字水印 */
.stats-section .bg-watermark { display: none !important; }
.stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 22px 14px !important;
padding: 0 15px !important;
}
/* 移动端两列，分隔线只画在偶数项左侧（列间） */
.stat-item + .stat-item::before { display: none !important; }
.stat-item:nth-child(even)::before {
display:block !important; left:calc(-1 * 7px) !important;
}
.stat-item .stat-number { font-size:34px !important; min-height:46px !important; }
.stat-item .stat-label { font-size:12px !important; letter-spacing:0 !important; }
/* 行业应用、核心优势：1列 */
.industries-grid, .advantages-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 15px !important;
}
/* 出口国家：2列 */
.countries-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 0 15px !important;
}
/* 对比表格：横向滚动 */
.compare-table-wrap {
overflow-x: auto;
margin: 0 -15px;
padding: 0 15px;
}
/* 页脚：1列 */
.footer-grid {
grid-template-columns: 1fr !important;
gap: 25px !important;
padding: 30px 15px !important;
}
.footer-bottom {
text-align: center !important;
padding: 20px 15px !important;
}
/* 联系我们表单：1列 */
.about-grid, .contact-form {
grid-template-columns: 1fr !important;
gap: 25px !important;
}
/* ===== 补充：各页面关键区块手机端适配 ===== */
/* 面包屑 */
.breadcrumb { padding: 10px 15px !important; font-size: 12px !important; }
/* 产品详情页：需为固定 header(64px) 预留顶部空间，
否则标题会被压在 header 下方（实测遮挡 34px） */
.product-detail-hero { padding: 84px 15px 30px !important; }
.product-main { grid-template-columns: 1fr !important; gap: 20px !important; }
.product-main-img img { max-height: 220px !important; object-fit: contain; }
.detail-section { padding: 30px 15px !important; }
.cta-section { padding: 30px 15px !important; }
.features-list { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 !important; }
.features-list li { font-size: 13px !important; padding: 6px 4px !important; }
.app-tags { flex-wrap: wrap; gap: 6px; }
.app-tag { font-size: 12px !important; padding: 4px 10px !important; }
.faq-item { padding: 14px !important; }
.faq-item h3 { font-size: 14px !important; }
.faq-item p { font-size: 13px !important; }
/* 按钮 */
.btn-sm, .btn-white { padding: 10px 16px !important; font-size: 13px !important; }
/* 产品卡片（首页/产品中心/案例页共用） */
.product-card-img { width: 100% !important; }
.product-card-body { padding: 15px !important; }
.product-card-img img { width: 100% !important; height: auto !important; max-height: 220px; object-fit: cover; }
.product-arrow { display: none !important; }
/* 二维码（联系我们） */
.qr-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 15px !important; }
.qr-card { padding: 14px 10px !important; }
.qr-name { font-size: 13px !important; }
/* 视频网格（技术支持） */
.video-grid { grid-template-columns: 1fr !important; gap: 15px !important; padding: 0 15px !important; }
.video-thumb img { max-height: 180px !important; object-fit: cover; }
/* 技术支持标签 */
.support-tabs { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.support-tab { padding: 12px 8px !important; font-size: 13px !important; }
/* 资质证书（关于我们） */
.cert-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; padding: 0 15px !important; }
.cert-card h3 { font-size: 12px !important; padding: 10px 8px !important; }
.cert-badge { font-size: 10px !important; padding: 3px 8px !important; top: 7px !important; left: 7px !important; }
.cert-card img { padding: 8px !important; }
/* 认证/案例图标网格 */
.app-grid, .app-icon-grid, .country-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 15px !important; }
/* 回到顶部按钮：手机端缩小 */
.back-to-top { width: 40px !important; height: 40px !important; font-size: 16px !important; right: 12px !important; bottom: 12px !important; }
/* 手机端底部固定快捷操作条：保留，但样式更轻 */
.mobile-cta {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: #fff !important;
padding: 10px 16px !important;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
z-index: 1000 !important;
display: flex !important;
gap: 10px !important;
}
.mobile-cta .btn {
flex: 1 !important;
width: auto !important;
padding: 12px !important;
font-size: 14px !important;
}
body { padding-bottom: 70px !important; }
}
/* ==========================================================================
移动端适配修复补丁 v20261008
依据 Chromium 真机视口实测（iPhone SE 375 / iPhone 13 390 / Pro Max 430 /
安卓 360 / iPad 768）定位，共三类问题：
① contact.html、blog.html 在窄屏整体横向溢出 13-90px，
连带把 header 顶宽，汉堡菜单被挤出屏幕外无法点击
② products.html 的机型对比表格 850px 宽，窄屏无法查看
③ 全站导航/页脚/面包屑链接触控区仅 15-19px 高，远低于 44px 建议值
========================================================================== */
/* ── 修复 ①：全局横向溢出治理 ────────────────────────────────────
body 的 overflow-x:hidden 只对 body 生效，html 仍会记录溢出宽度，
导致页面整体可横向拖动，fixed 定位的 header 计算基准随之偏移。 */
html {
overflow-x: hidden;
max-width: 100%;
}
body {
overflow-x: hidden;
max-width: 100%;
}
/* 网格/弹性子项默认 min-width:auto，是横向溢出的最常见根因 */
.container,
.container > *,
.about-grid > *,
.pd-main > *,
.pd-info > *,
.footer-grid > * {
min-width: 0;
}
/* 宽内容应自身滚动，而非撑破页面 */
pre,
code {
max-width: 100%;
overflow-x: auto;
word-break: break-word;
white-space: pre-wrap;
}
/* ── 修复 ②：表格窄屏处理 ────────────────────────────────────────
products.html 的机型参数对比表在 375px 屏下宽 850px。
方案：外层允许横向滑动 + 首列吸附，读表时不迷路。 */
.pd-spec-wrap,
.table-wrap,
.table-scroll {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
max-width: 100%;
}
@media (max-width: 768px) {
.pd-spec-wrap,
.table-wrap,
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e8eaed;
border-radius: 8px;
}
/* 关键列吸附，横向滑动时始终可见机型名 */
.pd-spec-wrap table th:first-child,
.table-wrap table th:first-child,
.table-scroll table th:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
box-shadow: 1px 0 0 #e8eaed;
}
/* 小屏下压缩单元格内边距，让更多列进入视野 */
.pd-spec-wrap table th,
.pd-spec-wrap table td,
.table-wrap table th,
.table-wrap table td {
padding: 10px 12px;
font-size: 13px;
white-space: nowrap;
}
}
/* ── 修复 ③：触控目标尺寸 ────────────────────────────────────────
实测导航链接高 15-19px，页脚链接 17px，Read More 按钮 22px。
44px 为 Apple/Google 建议下限。 */
@media (max-width: 1024px) {
.menu-toggle {
width: 44px;
height: 44px;
}
.lang-btn {
min-height: 44px;
padding: 12px 16px;
}
/* 汉堡菜单内的链接：整行可点，高度充足 */
.nav a {
display: block;
padding: 14px 0;
min-height: 48px;
line-height: 20px;
}
/* 面包屑：允许换行，避免挤压 */
.breadcrumb {
flex-wrap: wrap;
row-gap: 6px;
}
.breadcrumb a {
display: inline-block;
padding: 6px 2px;
min-height: 32px;
line-height: 20px;
}
/* 页脚链接：扩大点击热区 */
.footer-links a,
.footer-contact a,
.footer-bottom a,
.footer-grid a {
display: inline-block;
padding: 8px 0;
min-height: 40px;
line-height: 24px;
}
.news-card a,
.blog-card a,
.read-more,
.btn-link {
display: inline-block;
padding: 10px 0;
min-height: 40px;
line-height: 20px;
}
}
/* ── 补强：768px 及以下（多数安卓机、折叠屏、小平板）─────────────
原有断点只有 1024px 与 480px，768-1024px 区间规则缺失。 */
@media (max-width: 768px) {
.container {
padding: 0 18px;
}
.top-bar {
display: none !important;
}
/* 表单控件在窄屏需 100% 宽，避免撑破 */
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
max-width: 100%;
}
.form-options,
.form-grid,
.form-row {
grid-template-columns: 1fr !important;
}
.lang-switcher {
max-width: calc(100vw - 24px);
}
img {
max-width: 100%;
height: auto;
}
/* 长英文单词不断行会导致溢出 */
h1, h2, h3, h4, h5, h6, p, li, td, th, span, a {
overflow-wrap: break-word;
word-wrap: break-word;
}
}
/* ── 触摸设备：去掉 hover 依赖的视觉反馈（移动端 hover 会粘住）── */
@media (hover: none) {
.product-card:hover,
.news-card:hover,
.blog-card:hover,
.advantage-card:hover {
transform: none !important;
}
}
/* ── 触控目标兜底：内联样式无法全部清除时的通用保障 ────────────
内联 style 优先级高于 CSS，故对正文内所有链接统一给出
最小可点高度，配合行高保证不误触相邻内容。 */
@media (max-width: 1024px) {
p a,
li a,
td a,
.breadcrumb a,
.footer-bottom a,
.footer-grid a,
.read-more,
.icp-link {
display: inline-block;
min-height: 32px;
line-height: 32px;
padding: 0 1px;
}
/* 卡片内的整块链接可适当放大，便于手指点击 */
.news-card a,
.blog-card a,
.case-card a {
min-height: 40px;
}
/* 页脚政策类链接（ICP 备案等）行高与正文对齐 */
.footer-bottom a,
.icp-link {
line-height: 28px;
min-height: 28px;
display: inline-block;
}
}
/* ── 语言切换按钮定位修正 ──────────────────────────────────────
原规则 position:fixed; top:80px 是按桌面 header 高度写的。
移动端 header 仅 70px 高，按钮会下探 10px 压在页面内容上
（截图中表现为遮挡 hero 徽章与页头标题）。
改造思路：把 lang-switcher 纳入 header 的 flex 布局参与排版，
避免用 fixed 硬定位导致与 logo、菜单按钮互相抢占空间。
.header .container 已是 flex，故让 lang-switcher 变成 flex 子项。 */
@media (max-width: 1024px) {
.header .container {
display: flex;
align-items: center;
gap: 8px;
}
/* 语言切换器回到正常文档流，作为 flex 子项参与排版 */
.lang-switcher {
position: static;
transform: none;
margin: 0 0 0 auto;
max-width: none;
order: 2;
}
/* 菜单按钮排在语言按钮之后 */
.menu-toggle {
order: 3;
flex-shrink: 0;
}
/* logo 占据剩余空间，可收缩 */
.header .logo {
order: 1;
min-width: 0;
flex: 1 1 auto;
gap: 8px;
overflow: hidden;
}
.header .logo .logo-img {
height: 34px;
width: auto;
flex-shrink: 0;
}
.header .logo .logo-text {
min-width: 0;
flex: 1 1 auto;
justify-content: center;
}
.lang-btn {
padding: 10px 12px;
font-size: 13px;
gap: 6px;
min-height: 44px;
}
/* 下拉面板向下展开、右对齐，避免超出屏幕 */
.lang-dropdown {
right: 0;
left: auto;
max-width: calc(100vw - 24px);
}
}
/* 窄屏：隐藏品牌英文副标题，为按钮腾出横向空间 */
@media (max-width: 768px) {
.header .logo .brand-en {
display: none;
}
.header .logo .brand-cn {
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
display: block;
/* 关键：不设 max-width + 不裁切，改用 transform 缩放保证完整显示 */
transform: scale(var(--brand-scale, 1));
transform-origin: left center;
}
}
/* 超窄屏（≤400px）：语言按钮只保留地球图标，文字隐藏 */
@media (max-width: 400px) {
/* 已移除过时的 lang-btn span 隐藏规则 */
.lang-btn {
padding: 10px;
min-width: 44px;
justify-content: center;
}
.header .logo .brand-cn { font-size: 13px; }
}
/* ── 页头内容避让：给固定 header 留出足够空间 ──────────────────
移动端 body { padding-top: 0 !important }（因顶栏已隐藏），
内容会从 y=0 开始，而 header 是 position:fixed 高度 80px，
若 hero / page-header 自身不预留空间，首屏内容会被压住。
.page-header 桌面端 padding-top 为 140px（80px header + 60px 间距），
移动端 header 变矮后仍需保持标题不被固定元素遮挡。 */
@media (max-width: 1024px) {
.page-header {
padding: 84px 0 44px;
}
.page-header h1 {
font-size: 26px;
}
.page-header .breadcrumb {
justify-content: center;
}
/* 首页 hero：预留 header 高度 + 视觉呼吸空间 */
.hero {
padding-top: 92px !important;
min-height: auto !important;
}
.hero .hero-badge,
.hero-badge {
margin-top: 0;
}
.hero-content {
padding-top: 0;
}
}
/* 无 .page-header 的普通页面：首个 section 同样需要避让 */
@media (max-width: 1024px) {
body > .section:first-of-type {
padding-top: 84px;
}
body > section:first-of-type .container {
position: relative;
}
}
/* ── 联系信息图标对齐修正 ──────────────────────────────────────
截图中图标块被拉伸变形、文字基线不齐。
已在 HTML 中为图标块加 .contact-ico、文字块加 .contact-txt，
此处按 class 精确控制（不使用 :has()，兼容性更稳）。 */
@media (max-width: 768px) {
/* 图标块：宽高锁定，不参与伸缩 */
.contact-ico {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex: 0 0 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
}
/* 文字容器：正常换行，不被挤压 */
.contact-txt {
min-width: 0;
flex: 1 1 auto;
}
.about-grid h4 {
margin-bottom: 2px !important;
}
.contact-txt p {
margin: 0 !important;
line-height: 1.55 !important;
word-break: normal;
overflow-wrap: break-word;
}
}
/* ==========================================================================
语言面板移动端重做 v20261008
--------------------------------------------------------------------------
原问题（Chromium 实测 390px 视口）：
· 面板 y = -123px，顶部几行被裁在屏幕外
· 面板仅 170px 宽，16 个语言项每项挤在 108px 内
· position:static 使其脱离定位上下文
方案：改为相对 header 定位的全屏抽屉式面板，
单列 + 内部滚动 + 当前语言高亮，确保任何屏宽都完整可见。
========================================================================== */
@media (max-width: 1024px) {
/* 触发器：header 内参与 flex 排版，替代原先的 fixed 定位 */
.lang-switcher {
position: static;
transform: none;
margin: 0 0 0 auto;
order: 2;
max-width: none;
}
/* ── 下拉面板本体 ── */
.lang-dropdown {
/* 定位：相对 .lang-switcher 绝对定位，锚定在 header 右下方 */
position: fixed !important;
top: 60px !important;
right: 10px !important;
left: auto !important;
/* 宽度：撑到可用空间但不超出视口 */
width: min(340px, calc(100vw - 20px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 20px) !important;
/* 单列，避免每项被压到 108px */
display: none !important;
grid-template-columns: 1fr !important;
gap: 2px !important;
/* 高度自适应，超出则内部滚动 */
max-height: calc(100vh - 80px) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
/* 视觉 */
padding: 8px !important;
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 14px !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18) !important;
opacity: 0;
visibility: hidden;
transform: translateY(-10px) !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
z-index: 1002 !important;
}
.lang-dropdown.show {
display: grid !important;
grid-template-columns: 1fr !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* ── 语言项 ── */
.lang-dropdown button {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
min-height: 46px !important;
padding: 11px 14px !important;
font-size: 15px !important;
line-height: 1.3 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: var(--text-dark) !important;
background: none !important;
border: none !important;
border-radius: 9px !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* 旗帜：使用本地图片（已本地化 20 面），不依赖 emoji 与外链 */
.lang-dropdown button .flag-img,
.lang-dropdown button .flag {
width: 24px !important;
height: 17px !important;
flex: 0 0 24px !important;
object-fit: cover !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
font-size: 0 !important;
}
.lang-dropdown button:active {
background: rgba(219, 38, 29, 0.08) !important;
}
/* 当前语言：左侧竖条 + 浅底，比纯红底更克制 */
.lang-dropdown button.active {
background: rgba(219, 38, 29, 0.09) !important;
color: var(--accent-red) !important;
font-weight: 600;
box-shadow: inset 3px 0 0 var(--accent-red);
}
.lang-dropdown button.active .flag-img {
box-shadow: 0 0 0 1px var(--accent-red) !important;
}
/* 触发按钮：更明确的点击感 */
.lang-btn {
min-height: 40px !important;
height: 40px !important;
padding: 8px 12px !important;
font-size: 13px !important;
gap: 6px !important;
border-radius: 10px !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.lang-btn .flag-img {
width: 22px !important;
height: 15px !important;
object-fit: cover !important;
border-radius: 2px !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}
}
/* 超窄屏：语言按钮只留旗帜图标，把空间让给公司名与汉堡按钮 */
@media (max-width: 400px) {
/* 已移除：会隐藏 langCurrent 内的旗帜 */
.lang-btn {
min-width: 44px !important;
padding: 10px 11px !important;
justify-content: center !important;
}
}
/* ==========================================================================
Header 视觉优化（移动端）
--------------------------------------------------------------------------
目标：让 80px 高的固定头部在手机上更精致——层次清晰、比例协调，
而不是三个元素挤在一条线上。
========================================================================== */
@media (max-width: 1024px) {
.header {
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 12px rgba(15, 25, 35, 0.06) !important;
}
.header.scrolled {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 18px rgba(15, 25, 35, 0.1) !important;
}
.header .container {
height: 64px !important;
padding: 0 14px !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
/* Logo：图片与文字比例调整，整齐居中 */
.header .logo {
order: 1;
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.header .logo .logo-img {
height: 26px !important;
width: auto !important;
flex-shrink: 0 !important;
}
.header .logo .logo-text {
min-width: 0;
flex: 1 1 auto;
display: flex !important;
flex-direction: column;
justify-content: center;
}
/* 公司名：完整显示，超长时优雅缩放而非截断 */
.header .logo .brand-cn {
font-size: 13px !important;
font-weight: 700;
line-height: 1.2;
color: var(--primary-dark);
white-space: nowrap;
display: block;
/* 关键：不设 max-width / ellipsis。
Chromium 实测 13px 下「东莞市圣玛机械有限公司」约需 146px，
360px 屏扣除 logo 图(79) + 间距(8) + 语言钮(55) + 汉堡钮(44) + 边距(28)
后文字区约 146px，刚好放下；更窄时由 scale 兜底缩放。 */
transform: scale(var(--brand-scale, 1));
transform-origin: left center;
}
/* 汉堡按钮：加大点击区 + 静止态的浅边框 */
.menu-toggle {
order: 3;
width: 44px !important;
height: 44px !important;
flex-shrink: 0 !important;
border-radius: 10px;
background: rgba(15, 25, 35, 0.04);
transition: background 0.2s, transform 0.2s;
}
.menu-toggle span {
background: var(--primary-dark) !important;
transition: transform 0.24s ease, opacity 0.18s ease;
}
}
/* 移动端语言按钮：只保留旗帜图标（文字由 JS 缩放让位给品牌名） */
@media (max-width: 1024px) {
.lang-btn #langCurrent {
font-size: 0 !important;
}
.lang-btn #langCurrent .flag-img {
font-size: initial;
}
.lang-btn .lang-caret {
display: none !important;
}
.lang-btn {
min-width: 44px !important;
padding: 9px 11px !important;
justify-content: center !important;
}
}
/* ==========================================================================
桌面端导航改版 · 方案 C（深色反色 + 描边） v20261008
--------------------------------------------------------------------------
设计意图：工业机械感最强的品牌化导航。
· 整条 header 用品牌深色 var(--primary-dark) #0f1923
· 导航项白字，悬停浅底 + 描边，选中项实心红
· 与首页深色 hero（rgba(15,25,35,.92)）无缝衔接
仅作用于 1025px 及以上；移动端保持原有浅色 + 汉堡菜单方案不变。
========================================================================== */
@media (min-width: 1025px) {
/* ── header 本体：深色反色 ── */
.header {
background: var(--primary-dark) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 14px rgba(0, 0, 0, 0.18) !important;
}
.header.scrolled {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 22px rgba(0, 0, 0, 0.28) !important;
}
.header .container {
height: 76px;
gap: 18px;
}
/* 右侧渐变装饰，呼应 hero 的红色调 */
.header::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 58%, rgba(219, 38, 29, 0.10));
pointer-events: none;
}
.header > .container {
position: relative;
z-index: 1;
}
/* ── logo ── */
.header .logo {
gap: 10px;
flex: 0 0 auto;
min-width: 0;
}
.header .logo .logo-img {
height: 36px !important;
width: auto !important;
/* 保留 logo 原始配色（红色标志反白会变青色失真），
仅用轻微提亮与投影保证在深色底上的对比度 */
filter: brightness(1.12) contrast(1.05);
opacity: 0.98;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.header .logo .brand-cn {
color: #fff !important;
font-size: 15px !important;
font-weight: 700;
white-space: nowrap;
}
/* 英文副标题在深色下隐藏，减少信息噪声 */
.header .logo .brand-en {
display: none !important;
}
/* ── 导航项 ── */
.nav {
display: flex !important;
align-items: center;
gap: 3px;
flex: 1 1 auto;
justify-content: center;
flex-wrap: nowrap;
min-width: 0;
}
.nav a {
color: #c3ceda !important;
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 9px 13px;
border-radius: 8px;
border: 1px solid transparent;
white-space: nowrap;
flex-shrink: 0;
position: relative;
transition: color 0.25s, background 0.25s, border-color 0.25s;
}
/* 去掉旧的下划线伪元素 */
.nav a::after {
display: none !important;
}
.nav a:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
/* 当前页：实心红块，指示最明确 */
.nav a.active,
.nav a.on {
background: var(--accent-red) !important;
color: #fff !important;
border-color: var(--accent-red) !important;
font-weight: 600;
box-shadow: 0 3px 12px rgba(219, 38, 29, 0.38);
}
/* ── 语言切换按钮 ── */
.lang-switcher {
position: static !important;
transform: none !important;
margin: 0 2px 0 0 !important;
flex-shrink: 0;
z-index: auto;
}
.lang-btn {
display: flex !important;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 13px;
font-size: 13.5px !important;
font-weight: 500;
color: #e8eef4 !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 8px !important;
cursor: pointer;
white-space: nowrap;
transition: background 0.25s, border-color 0.25s;
}
.lang-btn:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.38) !important;
}
.lang-btn .flag-img {
width: 22px !important;
height: 15px !important;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}
.lang-btn .lang-caret {
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
}
/* ── 语言下拉面板：深色系，与 header 同色 ── */
.lang-dropdown {
background: #16212e !important;
border: 1px solid rgba(255, 255, 255, 0.13) !important;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
min-width: 268px;
overflow: visible;
}
.lang-dropdown button {
color: #cfd9e3 !important;
font-size: 13.5px;
}
.lang-dropdown button:hover {
background: rgba(255, 255, 255, 0.09) !important;
color: #fff !important;
}
.lang-dropdown button.active {
background: rgba(219, 38, 29, 0.2) !important;
color: #ff7a70 !important;
box-shadow: inset 3px 0 0 var(--accent-red);
}
.lang-dropdown button .flag-img,
.lang-dropdown button .flag {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
}
}
/* ── 中等宽度（1025–1280）：收紧间距，避免导航换行 ── */
@media (min-width: 1025px) and (max-width: 1280px) {
.header .container {
gap: 12px;
}
.nav a {
padding: 9px 10px;
font-size: 13.5px;
}
.header .logo .brand-cn {
font-size: 14px !important;
}
.lang-btn {
padding: 0 11px;
font-size: 13px !important;
}
}
/* ── 窄屏笔记本（1025–1152）：只留图标，彻底避免拥挤 ── */
@media (min-width: 1025px) and (max-width: 1152px) {
.nav a {
padding: 9px 8px;
font-size: 13px;
}
.header .logo .brand-cn {
font-size: 13px !important;
}
.lang-btn #langCurrent {
font-size: 0 !important;
}
.lang-btn #langCurrent .flag-img {
font-size: initial;
}
}
/* ── 移动端品牌名自适应缩放兜底 ────────────────────────────────
实测：13px 下「东莞市圣玛机械有限公司」需 146px；文字区可用宽度
随屏宽在 121–159px 之间波动（受 logo 图、语言钮文字显隐影响）。
用 JS 测量后写 --brand-scale 做无损缩放，避免截断或换行。 */
@media (max-width: 1024px) {
.header .logo .brand-cn {
font-size: 12.5px !important;
letter-spacing: -0.2px;
}
}
/* ≥415px 空间充裕，语言钮文字全显即可，无需缩放 */
@media (min-width: 401px) and (max-width: 1024px) {
.lang-btn #langCurrent {
font-size: 0 !important;
}
.lang-btn #langCurrent .flag-img {
font-size: initial;
}
.lang-btn {
min-width: 44px;
padding: 10px 11px;
justify-content: center;
}
}
/* ==========================================================================
方案 C 配套：顶栏配色统一
--------------------------------------------------------------------------
顶栏（.top-bar）位于 header 上方。原色 #0f1923 与 header 同色，但在部分
页面（浅色背景）之间形成视觉断层；这里统一压深一档并加底部描边，
使「顶栏 + 导航」读作一整块深色区域。 */
@media (min-width: 1025px) {
.top-bar {
background: #0a121a !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.top-bar .container {
color: #9fb0c2;
}
.top-bar a:hover {
color: #fff !important;
}
/* 顶栏内的分隔竖线在深底上要提亮，否则看不见 */
.top-bar .sep,
.top-bar span + span::before {
color: rgba(255, 255, 255, 0.18);
}
}
/* ==========================================================================
询盘表单「意向产品与数量」窄屏适配
--------------------------------------------------------------------------
该区块原为内联 grid-template-columns:1fr 1fr，两列各含「型号标签 + 60px
数量输入框」。360px 屏放不下两列，实测 label 超出 25~40px。
移动端改为单列，数量输入框自适应。 */
@media (max-width: 768px) {
.product-pick-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.product-pick-grid label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 12px !important;
min-height: 46px;
}
/* 数量输入框：不再固定 60px，吃掉标签剩余空间 */
.product-pick-grid .qty-input {
width: auto !important;
min-width: 62px !important;
max-width: 96px !important;
flex: 0 0 auto !important;
margin-left: auto !important;
padding: 6px 8px !important;
font-size: 15px !important;
text-align: center;
}
/* 型号文字占据中间，避免被数量框挤压 */
.product-pick-grid label > input[type="checkbox"] {
flex: 0 0 auto;
}
}
/* ==========================================================================
窄屏网格兜底（覆盖内联 grid-template-columns）
--------------------------------------------------------------------------
内联样式的优先级高于 CSS 规则，因此这里的覆盖必须加 !important。
涉及两类：
① .fix3-grid 固定三列 → 窄屏改单列
② .auto-grid minmax(Npx,1fr) → 窄屏下限压到 100px，避免 250px 下限撑破
========================================================================== */
@media (max-width: 768px) {
.fix3-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.auto-grid {
/* 关键：把 minmax 下限从 250px 压到 100px。
auto-fit 在窄屏下本应只排一列，但 minmax 的下限会成为硬性最小宽度，
250px + 容器内边距在 360px 屏上必然溢出。 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
gap: 12px !important;
}
}
/* 平板（769–1024）：两列即可，不必压到 100px */
@media (min-width: 769px) and (max-width: 1024px) {
.fix3-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ==========================================================================
移动端可点链接的点击区补足
--------------------------------------------------------------------------
实测：header 内的公司名链接 26px 高、页脚 ICP 备案链接 28px 高，
均低于 44px 建议下限，容易误触或点不中。 */
@media (max-width: 1024px) {
/* logo 整体可点，扩成 44px 高的点击区（视觉尺寸不变） */
.header .logo {
min-height: 44px;
padding: 4px 0;
}
/* ICP 备案 / 页脚政策类链接：保证 40px 以上的行高与点击区 */
.footer-bottom a,
.icp-link {
display: inline-flex !important;
align-items: center;
min-height: 40px !important;
line-height: 40px !important;
padding: 0 2px !important;
}
}
/* ==========================================================================
移动端 hero 背景适配
--------------------------------------------------------------------------
桌面端用的「左深右浅」遮罩在窄屏失效：cover 会放大图片，
右侧几乎不加遮罩的机器区正好铺满整个屏幕，文字压在高光上读不清。
窄屏改为纵向均匀遮罩（整体压暗 + 底部过渡），保证正文可读。 */
@media (max-width: 1024px) {
.hero {
background-image:
linear-gradient(180deg, rgba(8,14,21,0.86) 0%, rgba(9,16,24,0.82) 55%, rgba(10,18,26,0.90) 100%),
url('../images/hero-bg.jpg') !important;
background-position: center 42% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* 超窄屏：图放大更厉害，遮罩再加重一档 */
@media (max-width: 480px) {
.hero {
background-image:
linear-gradient(180deg, rgba(8,14,21,0.90) 0%, rgba(9,16,24,0.88) 50%, rgba(10,18,26,0.93) 100%),
url('../images/hero-bg.jpg') !important;
}
}
/* ==========================================================================
语言切换按钮细节修正
--------------------------------------------------------------------------
1) 双箭头：updateLangButton() 曾往 #langCurrent 里再插一个 ▼，
而 HTML 里本来就有 .lang-caret，一个按钮出现两个箭头。
已在 main.js 中移除多余的那个，只保留 .lang-caret。
2) 箭头改为 CSS 边框实心三角：字符 ▼ 在 11px 下笔画细、边缘发虚，
与 14px 的语言名不匹配；三角形无锯齿、任意缩放都锐利。
3) 旗帜源图升级为 2 倍（80px 宽），@2x 屏不再发糊。 */
.lang-btn .lang-caret {
/* 覆盖 L2660 的字符样式：内容改由 border 绘制 */
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
color: transparent !important;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid rgba(255, 255, 255, 0.62);
margin-left: 1px;
flex: 0 0 auto;
transition: border-top-color 0.2s ease;
}
/* 展开时箭头朝上，明确表达「当前已打开」。
收起态用 0.62 白、展开态用 0.72 白：展开时因面板背景为深色(#16212e)，
过亮会显得刺眼，0.72 刚好能看出方向又不抢眼。 */
.lang-btn[aria-expanded="true"] .lang-caret,
.lang-btn.on .lang-caret,
.lang-switcher.open .lang-caret {
border-top-color: transparent;
border-bottom: 5px solid rgba(255, 255, 255, 0.72);
}
/* 悬停时箭头提亮，与按钮整体的 hover 反馈一致 */
.lang-btn:hover .lang-caret {
border-top-color: rgba(255, 255, 255, 0.9);
}
.lang-btn:hover[aria-expanded="true"] .lang-caret {
border-bottom-color: rgba(255, 255, 255, 0.85);
}
/* 下拉面板内的语言项也有箭头，统一同样的绘制方式 */
.lang-dropdown button .lang-caret,
.lang-dropdown .caret {
width: 0;
height: 0;
font-size: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid rgba(255, 255, 255, 0.45);
}
/* ==========================================================================
国旗比例修正
--------------------------------------------------------------------------
此前 .flag-img 被强制 height:15px + object-fit:cover，导致所有国旗
都被压成 3:2 固定比例。实际上国旗比例并不统一：
3:2（多数） 中国、日本、韩国、俄、法、德、西、越、泰、土、葡、意...
2:1 英国、美国、菲律宾、加拿大、阿联酋
1.9:1 美国（星条旗实际更扁）
1.67:1 德国
1.74:1 墨西哥
2.58:1 卡塔尔（极端横向）
固定高度 + cover 会把这些旗横向压扁（英国十字旗变窄、美条变密），
属明显的视觉错误。
修正：改为固定高度、宽度自适应（width:auto），保持每面旗的原生比例；
外层加固定宽度容器用于对齐，超宽的旗（卡塔尔等）限制最大宽度并
用 object-fit:contain 留白而非裁切。 */
.lang-btn .flag-img,
.lang-dropdown button .flag-img,
.lang-dropdown button .flag {
height: 15px !important;
width: auto !important;
max-width: 34px !important;
object-fit: contain !important;
object-position: left center !important;
border-radius: 2px !important;
/* 固定宽度占位：保证不同比例的旗在列表里左对齐、文字列一致 */
min-width: 15px;
background: rgba(255, 255, 255, 0.06);
}
/* 面板内的旗略高，与面板行高匹配 */
@media (min-width: 1025px) {
.lang-dropdown button .flag-img,
.lang-dropdown button .flag {
height: 17px !important;
max-width: 38px !important;
}
}
/* flex 容器里必须允许图片按内容宽度收缩 */
.lang-btn,
.lang-dropdown button {
align-items: center;
}
.lang-dropdown button .flag-img,
.lang-btn .flag-img {
flex: 0 0 auto !important;
margin-right: 8px;
}
/* ==========================================================================
移动端隐藏「向下滚动」提示
--------------------------------------------------------------------------
.hero-scroll 用 position:absolute; bottom:40px 定位在hero 底部，
但移动端 hero 是 min-height:auto（由内容撑高），定位基准随之改变，
箭头会落到「获取报价」按钮下方，看起来像按钮上挂了根多余的箭头
（线上实机截图确认）。
窄屏空间本就紧张，首屏内容已占满，故移动端直接隐藏该提示。 */
@media (max-width: 1024px) {
.hero-scroll {
display: none !important;
}
}
/* ============================================================
精选案例 —— 视频卡片
============================================================ */
.case-video-card .product-img {
padding:0; background:#0f1923; overflow:hidden;
/* 视频是 16:9，必须改掉父类的 1:1，否则画面被压成竖条 */
aspect-ratio:16/9;
}
.case-video-thumb { position:relative; }
.case-video-thumb video {
width:100%; height:100%; object-fit:cover; display:block;
/* 绝不能加 transform:scale()！
Chrome 下transform 会让原生 controls 整体错位到视频顶部，
且控件层会拦截点击，导致自定义播放按钮失效。 */
}
/* 封面图上没有可播内容时给一层深色底，避免空白闪烁 */
.case-video-thumb::after {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(15,25,35,.05) 0%, rgba(15,25,35,.45) 100%);
pointer-events:none;
}
/* 中央播放按钮 */
.case-video-play {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:64px; height:64px; border-radius:50%;
background:rgba(219,38,29,.94); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:24px; padding-left:4px;
box-shadow:0 4px 18px rgba(0,0,0,.35);
transition:transform .3s ease, background .3s ease;
z-index:2; cursor:pointer;
}
.case-video-play i { line-height:1; }
.case-video-card:hover .case-video-play {
transform:translate(-50%,-50%) scale(1.12);
background:var(--accent-red-dark);
}
/* 右下角时长 */
.case-video-dur {
position:absolute; right:10px; bottom:10px; z-index:2;
padding:4px 10px; border-radius:20px;
background:rgba(15,25,35,.78); color:#fff;
font-size:12px; font-weight:600; letter-spacing:.5px;
backdrop-filter:blur(3px);
}
/* 播放中：隐藏播放按钮，卡片不再 hover 位移（避免画面抖动） */
.case-video-card.is-playing .case-video-play { opacity:0; }
.case-video-card.is-playing { transform:none !important; }
.case-video-card.is-playing .case-video-thumb::after { opacity:.35; }
/* 移动端：播放按钮略小，点击区域够大 */
@media (max-width:768px) {
.case-video-play { width:52px; height:52px; font-size:20px; }
.case-video-dur { font-size:11px; padding:3px 8px; }
}
/* ============================================================
案例视频 —— 原生控件 + 全屏按钮
============================================================ */
/* 播放时显示原生控件（含全屏/音量/进度条），未播放时隐藏保持卡片干净 */
.case-video-thumb video::-webkit-media-controls-enclosure {
display:none;
}
.case-video-card.is-playing video::-webkit-media-controls-enclosure,
.case-video-card:hover video::-webkit-media-controls-enclosure {
display:block;
}
.case-video-card.is-playing video::-webkit-media-controls,
.case-video-card:hover video::-webkit-media-controls {
opacity:1 !important;
}
/* Firefox/Edge 等不支持 ::-webkit伪元素的浏览器：
播放时强制显示控件 */
.case-video-card.is-playing video { outline:none; }
/* 全屏按钮：右上角 */
.case-video-fs {
position:absolute; top:10px; right:10px; z-index:3;
width:34px; height:34px; border-radius:6px; border:none;
background:rgba(15,25,35,.72); color:#fff; cursor:pointer;
font-size:14px; display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .25s ease, background .25s ease, transform .25s ease;
backdrop-filter:blur(3px);
}
.case-video-card:hover .case-video-fs,
.case-video-card.is-playing .case-video-fs,
.case-video-fs:focus-visible { opacity:1; }
.case-video-fs:hover { background:var(--accent-red); transform:scale(1.08); }
.case-video-fs:focus-visible { outline:2px solid var(--accent-red); outline-offset:2px; }
/* 触屏设备没有 hover，常驻显示 */
@media (hover:none) {
.case-video-fs { opacity:1; width:38px; height:38px; font-size:15px; }
}
@media (max-width:768px) {
.case-video-fs { top:8px; right:8px; }
}
/* ---- 全屏状态：让视频占满整个屏幕 ---- */
.case-video-card:fullscreen,
.case-video-card:-webkit-full-screen {
background:#0f1923;
display:flex; flex-direction:column;
align-items:stretch; justify-content:center;
padding:0; margin:0;
overflow:auto;
}
/* 全屏时图片区撑满，标题缩到屏幕下方 */
.case-video-card:fullscreen .product-img,
.case-video-card:-webkit-full-screen .product-img {
flex:1 1 auto; width:100%;
aspect-ratio:auto; min-height:0;
display:flex; align-items:center; justify-content:center;
background:#000; border-bottom:none;
}
.case-video-card:fullscreen .product-img video,
.case-video-card:-webkit-full-screen .product-img video {
width:100%; height:100%;
max-height:calc(100vh - 120px);
object-fit:contain; /* 全屏时完整显示，不裁切画面 */
}
.case-video-card:fullscreen .product-info,
.case-video-card:-webkit-full-screen .product-info {
flex:0 0 auto; padding:14px 24px;
background:rgba(15,25,35,.92);
text-align:center;
}
.case-video-card:fullscreen .product-info h3,
.case-video-card:-webkit-full-screen .product-info h3 {
color:#fff; font-size:18px; margin-bottom:4px;
}
.case-video-card:fullscreen .product-info p,
.case-video-card:-webkit-full-screen .product-info p {
color:#9fb2c6; font-size:13px; max-width:760px; margin:0 auto;
}
/* 全屏时把「了解更多/播放视频」这行箭头藏起来，避免与控件条打架 */
.case-video-card:fullscreen .product-arrow,
.case-video-card:-webkit-full-screen .product-arrow { display:none; }
/* 全屏时播放按钮常驻（暂停状态下也要能点） */
.case-video-card:fullscreen .case-video-play,
.case-video-card:-webkit-full-screen .case-video-play { opacity:1; }
/* 全屏时全屏按钮改为「退出」图标位 */
.case-video-card:fullscreen .case-video-fs,
.case-video-card:-webkit-full-screen .case-video-fs {
opacity:1; z-index:10; width:40px; height:40px; font-size:16px;
}
/* ---- 触屏设备：全屏按钮常驻（无 hover）---- */
@media (hover:none), (pointer:coarse) {
.case-video-fs { opacity:1 !important; width:38px; height:38px; font-size:15px; }
}
/* JS 检测到的触摸设备：全屏按钮常驻显示（CSS media 查询的兜底） */
body.is-touch .case-video-fs { opacity:1 !important; }
/* ============================================================
案例视频 —— 自绘控件条
为什么不用原生 controls：
1) video 上加transform 时，Chrome 会把原生 controls 错位到顶部；
2) 原生控件层的点击会拦截，导致中央红色播放按钮失灵。
故全部自绘，完全可控。
============================================================ */
.case-video-thumb { overflow:hidden; }
/* 暗化层：未播放时压暗封面，播放时变淡 */
.case-video-thumb::after {
background:linear-gradient(180deg, rgba(15,25,35,.15) 0%, rgba(15,25,35,.55) 100%);
}
.case-video-card.is-playing .case-video-thumb::after { opacity:0; }
/* ---- 控件条容器：贴在视频底部 ---- */
.case-video-bar {
position:absolute; left:0; right:0; bottom:0; z-index:6;
display:flex; align-items:center; gap:10px;
padding:10px 12px;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.82) 100%);
opacity:0; transform:translateY(6px);
transition:opacity .25s ease, transform .25s ease;
pointer-events:none; /* 不挡卡片播放点击 */
}
.case-video-card:hover .case-video-bar,
.case-video-card.is-playing .case-video-bar,
.case-video-card.is-paused .case-video-bar {
opacity:1; transform:translateY(0);
pointer-events:auto; /* 悬停后控件才可点 */
}
/* ---- 控件按钮 ---- */
.case-bar-play, .case-bar-mute, .case-bar-fs {
width:28px; height:28px; flex:0 0 28px;
border:none; border-radius:4px; cursor:pointer;
background:rgba(255,255,255,.16); color:#fff;
font-size:11px; display:flex; align-items:center; justify-content:center;
transition:background .2s ease;
}
.case-bar-play:hover, .case-bar-mute:hover, .case-bar-fs:hover {
background:var(--accent-red);
}
.case-bar-play i, .case-bar-mute i, .case-bar-fs i { line-height:1; }
/* ---- 时间文本 ---- */
.case-bar-time {
flex:0 0 auto; color:#fff; font-size:11.5px;
font-variant-numeric:tabular-nums; letter-spacing:.3px;
opacity:.92; white-space:nowrap;
}
/* ---- 进度条 ---- */
.case-bar-track {
position:relative; flex:1 1 auto; height:4px;
background:rgba(255,255,255,.28); border-radius:3px; cursor:pointer;
}
.case-bar-loaded, .case-bar-played {
position:absolute; left:0; top:0; height:100%;
border-radius:3px; width:0%;
}
.case-bar-loaded { background:rgba(255,255,255,.45); }
.case-bar-played { background:var(--accent-red); }
/* 拖拽手柄 */
.case-bar-thumb {
position:absolute; top:50%; left:0;
width:11px; height:11px; border-radius:50%;
background:#fff; transform:translate(-50%,-50%) scale(0);
transition:transform .18s ease;
box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.case-bar-track:hover .case-bar-thumb,
.case-bar-track.is-dragging .case-bar-thumb { transform:translate(-50%,-50%) scale(1); }
/* 悬停时进度条加高，便于点按 */
.case-bar-track:hover { height:6px; }
/* ---- 全屏态：控件条同样贴底 ---- */
.case-video-card:fullscreen .case-video-bar,
.case-video-card:-webkit-full-screen .case-video-bar {
padding:14px 24px;
}
/* ---- 移动端控件条加大，便于手指操作 ---- */
@media (max-width:768px) {
.case-video-bar { padding:8px 10px; gap:8px; }
.case-bar-play, .case-bar-mute, .case-bar-fs {
width:34px; height:34px; flex:0 0 34px; font-size:13px;
}
.case-bar-time { font-size:11px; }
.case-bar-track { height:6px; }
}
/* 触屏：控件条常驻（无 hover） */
body.is-touch .case-video-bar { opacity:1; transform:translateY(0); pointer-events:auto; }
/* ============================================================
精选案例 —— 卡片高度对齐
视频卡是 16:9，文字卡原来是 1:1，两者并排时视觉高低不一。
统一改成 16:9，网格更整齐。
============================================================ */
/* 只作用于精选案例页（body.page-case），避免影响首页/产品页 */
.page-case .product-grid .product-card:not(.case-video-card) .product-img {
aspect-ratio:16/9;
}
.page-case .product-grid .product-card:not(.case-video-card) .product-img i {
font-size:52px;
}
/* 信息区高度拉平，文字多少不影响卡片整体高度 */
.page-case .product-grid .product-card .product-info {
display:flex; flex-direction:column; min-height:148px;
}
.page-case .product-grid .product-card .product-info p { flex:1 1 auto; }
@media (max-width:768px) {
.page-case .product-grid .product-card .product-info { min-height:0; }
}
/* ============================================================
无障碍：跳转到主要内容
键盘用户按 Tab 第一下就能跳过导航直达正文。
============================================================ */
.skip-link {
position:absolute; left:-9999px; top:0; z-index:99999;
padding:12px 20px; background:var(--accent-red); color:#fff;
font-size:15px; font-weight:600; text-decoration:none;
border-radius:0 0 8px 0;
}
.skip-link:focus {
left:0;
box-shadow:0 4px 14px rgba(0,0,0,.28);
}
/* 键盘焦点可见性：仅键盘导航时显示焦点框，鼠标点击不显示 */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline:2px solid var(--accent-red); outline-offset:2px;
}