/* ==========================================================================
广东省金禧达人力资源管理有限公司 · 官网静态复刻
参考站点：https://www.szzhhr.net
设计基准：1200px 画布居中，页面在 1440px 视口下与原站逐像素对齐
目录：
1. 设计变量 2. 基础与容器 3. 页头（顶栏 / 导航）
4. 首屏轮播 5. 内页顶部图 6. 通用排版
7. 首页模块 8. 列表与卡片 9. 分页 / 按钮 / 表单
10. 页脚 11. 内页模块 12. 详情页 13. 自适应
========================================================================== */
/* ---------- 1. 设计变量 ---------- */
:root {
--blue: #012989; /* 主色：导航条 / 页脚 / 圆形图标 rgb(1,41,137) */
--blue-hover: #0a3aa8; /* 导航悬停（原站为同色，此处略提亮以便识别） */
--cyan: #005d88; /* 英文小标题 rgb(0,93,136) */
--link: #2188ca; /* 查看详情 / 链接 rgb(33,136,202) */
--ink: #000;
--ink-2: #262626; /* 新闻标题 rgb(38,38,38) */
--ink-3: #404040; /* 列表标题 rgb(64,64,64) */
--gray: #555; /* 正文辅助 rgb(85,85,85) */
--gray-2: #666; /* 分页 rgb(102,102,102) */
--gray-3: #989898; /* 页脚备案 rgb(152,152,152) */
--gray-4: #bbb; /* 日期 rgb(187,187,187) */
--line: #ededed;
--canvas: 1200px;
--font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", Arial, sans-serif;
--font-num: Tahoma, Arial, "Microsoft YaHei", sans-serif; /* 原站导航/数字使用 Tahoma */
--vw: 1200px; /* 由 main.js 写入：可视区域宽度（画布单位） */
--scale: 1; /* 由 main.js 写入：窄屏等比缩放系数 */
}
/* ---------- 2. 基础与容器 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
font-size: 14px;
color: var(--ink);
background: #fff;
min-width: 320px;
}
img { border: 0; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, li { list-style: none; }
input, textarea, button, select { font-family: inherit; font-size: inherit; }
/* 缩放舞台：≥1200px 时 scale=1，页面即 1200px 画布居中 */
.stage-wrap { width: 100%; overflow: hidden; }
.stage { width: var(--canvas); margin: 0 auto; position: relative; transform-origin: top left; transform: scale(var(--scale)); }
/* 通栏背景带（超出 1200 画布，铺满可视区域） */
.bleed {
position: absolute; left: 50%; width: var(--vw); margin-left: calc(var(--vw) / -2);
top: 0; height: 100%; overflow: hidden; z-index: 0;
}
.wrap { width: var(--canvas); margin: 0 auto; position: relative; }
/* 区块：固定高度 + 内部绝对定位（数值取自原站实测坐标，相对 1200 画布左上角） */
.sec { position: relative; width: var(--canvas); margin: 0 auto; }
.a { position: absolute; } /* 绝对定位元素 */
.sec > .bleed { z-index: 0; }
.sec > .a, .sec > .wrap { z-index: 1; }
/* ---------- 3. 页头 ---------- */
.topbar { position: relative; height: 100px; background: #fff; }
/* 首页顶栏模块（原站 tem_22_55）：logo 242×76 @ (1,22)、热线图标 38×40 @ (770,31) */
.topbar .logo { position: absolute; left: 1px; top: 22px; width: 242px; height: 76px; }
.topbar .hotline { position: absolute; left: 770px; top: 31px; width: 38px; height: 40px; }
.topbar .tagline { position: absolute; left: 824px; top: 44px; font: 700 16px/20px var(--font); color: var(--ink); }
/* 内页顶栏与原站首页不是同一个模块（实测有差异）：
logo 256×81 @ (0,18)、热线图标 38×40 @ (772,30)、标语 @ (825,40) */
body.inner .topbar .logo { left: 0; top: 18px; width: 256px; height: 81px; }
body.inner .topbar .logo img { width: 256px; height: 81px; }
body.inner .topbar .hotline { left: 772px; top: 30px; }
body.inner .topbar .tagline { left: 825px; top: 40px; }
/* 例外：原站有个别内页（实测 zhry「金禧达荣誉」）用的是「首页」那套页头/页脚几何，
这些页在 上再加一个 head-home 类即可。 */
body.head-home .topbar .logo { left: 1px; top: 22px; width: 242px; height: 76px; }
body.head-home .topbar .logo img { width: 242px; height: 76px; }
body.head-home .topbar .hotline { left: 770px; top: 31px; }
body.head-home .topbar .tagline { left: 824px; top: 44px; }
/* z-index:3 —— 必须高于首屏轮播（.hero z-index:2）与内页顶部图（.banner 同层）。
这两块都比导航条早 2~3px 起画（首页 .hero 上移 2px、内页 .banner 上移 3px，
与原站色带边界对齐），会把导航条底部 2~3px 盖在下面：鼠标从导航文字往下移动
经过这几像素时，命中的已经是大图而不是 ，:hover 立即失效、下拉框「一碰就没」。
把导航条提到图片之上，这几像素就重新属于导航项，下拉框可以正常点。 */
.navbar { position: relative; height: 60px; z-index: 3; }
/* 原站导航色带实测起于 y=99（比 100px 顶栏早 1px），此处让色带单独上移 1px，
导航文字仍落在 100..160 的正常位置。 */
.navbar > .bleed { background: var(--blue); top: -1px; }
.navbar .nav { display: flex; height: 60px; }
.nav > li { position: relative; flex: 1 1 0; height: 60px; }
.nav > li > a {
display: block; height: 60px; line-height: 60px; text-align: center;
color: #fff; font: 400 14px/60px var(--font-num);
}
.nav > li:hover > a, .nav > li.on > a { background: var(--blue-hover); color: #fff; }
.subnav {
display: none; position: absolute; left: 50%; top: 60px; transform: translateX(-50%);
width: 170px; background: var(--blue); z-index: 30;
box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
/* 顶部透明「桥」：把悬停区从导航项底边向上再延伸 6px，与导航条充分重叠。
鼠标从导航文字斜着划向下拉框、或中途短暂离开 时，不会掉出悬停态。
透明色块属于 .subnav 本身，因此照样触发 .nav > li:hover，且不改变任何布局位置。 */
.subnav::before {
content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
background: transparent;
}
.nav > li:hover .subnav,
.nav > li:focus-within .subnav,
.nav > li.open .subnav { display: block; }
/* 移动端收起态的下拉不靠悬停：触屏点「关于我们」由 main.js 切换 .open */
@media (max-width: 1023px) {
.subnav::before { display: none; }
}
.subnav a {
display: block; height: 70px; line-height: 70px; padding: 0 15px;
color: #fff; font: 400 12px/70px var(--font-num);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subnav a:hover { background: var(--blue-hover); }
/* 临时隐藏的导航项（发展历程 / 金禧达荣誉 / 团队风采 / 企业服务 / 新闻中心）
页面文件都还在、链接也可直达，只是不在导航里露出；要恢复时把对应 上的
nav-hide 类删掉即可（PC 与移动端都生效）。 */
.nav li.nav-hide { display: none !important; }
/* 汉堡按钮（<1200px 显示，便于手机端导航） */
.nav-toggle {
display: none; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px;
border: 1px solid rgba(255, 255, 255, .6); background: transparent; cursor: pointer; z-index: 40;
}
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 3px auto; background: #fff; }
/* ---------- 4. 首屏轮播 ---------- */
/* 高度不写死，跟屏宽等比：1920 屏 = 480px（4:1），2560 屏 = 640px，1440 屏 = 360px。
图片统一按 4:1 出（2560×640），盒子比例恒等于图片比例，cover 不产生任何裁切，
人物、logo 在任何显示器上都完整且不变形。--vw 由 main.js 写入（画布单位）。 */
.hero { position: relative; z-index: 2; height: calc(var(--vw) * 480 / 1920); background: #01247a; }
/* 首页：导航条底边比原站高 2px（160 vs 158），把首屏上移 2px 回到原站 y158..738，
并用 margin-bottom 抵消，后续内容位置不变（金禧达荣誉页在 honors.css 里做同样补偿） */
body:not(.inner) .hero { margin-top: -2px; margin-bottom: 2px; }
.hero .slide {
position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;
}
.hero .slide.on { opacity: 1; }
.hero .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; display: flex; gap: 10px; z-index: 6; }
.hero .dots i {
width: 15px; height: 15px; border-radius: 50%; background: rgba(0, 0, 0, .5);
cursor: pointer; display: block;
}
.hero .dots i.on { background: #fff; }
.hero .arrow {
position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; z-index: 6;
cursor: pointer; opacity: .85; border: 0; background: transparent; padding: 0;
}
.hero .arrow:before {
content: ""; position: absolute; left: 12px; top: 12px; width: 14px; height: 14px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
}
/* 箭头贴屏幕两边：.hero 只有 1200 画布宽，left:8px 在大屏上会被顶到中间，
故按「视口边缘 + 20px」定位（50% - --vw/2 = 画布左缘到视口左缘的距离，
窄屏 scale<1 时该距离为 0，仍成立）。 */
.hero .arrow.prev { left: calc(50% - var(--vw) / 2 + 20px); }
.hero .arrow.next { right: calc(50% - var(--vw) / 2 + 20px); }
.hero .arrow.prev:before { transform: rotate(45deg); }
.hero .arrow.next:before { transform: rotate(-135deg); left: 10px; }
.hero .arrow:hover { opacity: 1; }
/* ---------- 5. 内页顶部图 ----------
原站实测色带 157..457（300px 高，与导航条重叠 2px），故此处上移 3px。
2026-10：顶部图换成 banner-main.jpg（853×213，4:1，与首屏同比例）。
高度与首屏同理不写死，按屏宽等比：1440 屏 = 360px、1920 屏 = 480px、2560 屏 = 640px，
盒子比例恒等于 4:1，图片完整显示、不会被裁也不变形。 */
.banner { position: relative; height: calc(var(--vw) * 480 / 1920); margin-top: -3px; }
.banner + .sec { margin-top: 1px; }
.banner > .bleed { background: url(../img/banner-main.jpg) 50% 50% / cover no-repeat; }
.banner .arrow {
position: absolute; top: 50%; margin-top: -29px; width: 34px; height: 59px; z-index: 2;
background: rgba(0, 0, 0, .2); border: 0; cursor: pointer;
}
/* 箭头贴屏幕两边（同首屏：.banner 只有 1200 画布宽，left:20px 在大屏上会被顶到中间） */
.banner .arrow.prev { left: calc(50% - var(--vw) / 2 + 20px); }
.banner .arrow.next { right: calc(50% - var(--vw) / 2 + 20px); }
.banner .arrow:before {
content: ""; position: absolute; left: 13px; top: 23px; width: 11px; height: 11px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
}
.banner .arrow.prev:before { transform: rotate(45deg); }
.banner .arrow.next:before { transform: rotate(-135deg); left: 9px; }
.banner .dot {
position: absolute; left: 50%; bottom: 31px; margin-left: -7px; width: 15px; height: 15px;
border-radius: 50%; background: #fff; z-index: 2;
}
/* ---------- 6. 通用排版 ---------- */
.t-h1 { font: 700 34px/51px var(--font); color: var(--ink); } /* 模块大标题 */
.t-en { font: 400 20px/30px var(--font); color: var(--cyan); } /* 英文小标题 */
/* 蓝色模块标题（上排中文大字 + 下排小号英文，见 7.1 / 7.4） */
.ttl-blue { position: relative; padding-bottom: 14px; font: 700 34px/46px var(--font); color: var(--blue); }
.ttl-blue::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--blue); }
.en-blue { margin-top: 10px; font: 400 13px/18px var(--font); color: var(--cyan); letter-spacing: 2px; }
.t-h2 { font: 400 30px/45px var(--font); color: var(--ink); }
.t-h3 { font: 700 24px/24px var(--font); color: var(--ink); }
.t-h4 { font: 700 18px/26px var(--font); color: var(--ink); }
.t-h5 { font: 700 16px/24px var(--font); color: var(--ink); }
.t-h6 { font: 700 14px/21px var(--font); color: var(--ink-3); }
.p-lg { font: 400 18px/36px var(--font); color: var(--ink); }
.p-md { font: 400 14px/21px var(--font); color: var(--ink); }
.p-gray { color: var(--gray); }
.p-xs { font: 400 12px/21px var(--font); color: var(--ink); }
.c-cyan { color: var(--cyan); }
.c-link { color: var(--link); }
.c-gray { color: var(--gray); }
.c-date { color: var(--gray-4); }
/* ---------- 7. 首页模块 ---------- */
/* 7.1 公司简介（左文右图：左侧蓝色标题 + 四段简介，右侧照片 580×460，cover 居中裁切）
内容来自「公司简介内容.txt」，段落以换行分隔；图片位 2 倍图 = 1160×920。 */
.sec-intro { height: 580px; margin-top: 56px; }
.sec-intro .intro-txt { position: absolute; left: 2px; top: 14px; width: 560px; }
.sec-intro .intro-para { margin-top: 8px; font: 400 14px/28px var(--font); color: var(--ink-3); }
.sec-intro .en-blue + .intro-para { margin-top: 26px; }
.sec-intro .intro-img { position: absolute; left: 620px; top: 60px; width: 580px; height: 460px; }
.sec-intro .intro-img img { width: 100%; height: 100%; object-fit: cover; }
/* 7.2 金禧达五大服务优势（模块标题 + 5 张白色卡片，纯展示、不可点击跳转）
卡片图为「照片 + 图标」一体图（显示 195×213，2 倍图 390×426），标题与正文由 HTML 输出。 */
.sec-services { height: 518px; margin-top: 107px; }
.sec-services .svc-head { position: absolute; left: 2px; top: 0; }
.sec-services .card-svc { top: 136px; }
.card-svc {
position: absolute; width: 199px; height: 382px; background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.card-svc img { width: 195px; height: 213px; object-fit: cover; margin: 2px auto 0; }
.card-svc .ttl { display: block; margin-top: 17px; text-align: center; font: 700 14px/22px var(--font); }
.card-svc .txt { display: block; margin: 10px 9px 0; font: 400 12px/20px var(--font); color: var(--ink); }
/* 7.3 合作品牌（蓝标题 + 5 列 × 4 行 logo 墙）
logo 统一为白底 400×200（2 倍图），显示 200×100；5 列各 240 宽居中，行距 44px。 */
.sec-brand { height: 800px; margin-top: 107px; }
.sec-brand .brand-head { position: absolute; left: 2px; top: 0; }
.sec-brand .brand-grid {
position: absolute; left: 0; top: 136px; width: 1200px;
display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 44px; justify-items: center;
}
.sec-brand .brand-grid img { width: 200px; height: 100px; border: 1px solid var(--line); }
/* 7.4 企业文化理念（左图右文：左侧照片 560×460，右侧蓝色标题 + 5 条图标列表）
内容来自「企业文化理念.txt」；每条前为蓝色线稿图标（home-8/9/10/13/11.png，
分别对应理念 / 核心价值观 / 愿景 / 使命 / Slogan；图标自带品牌蓝，不加圆底）。 */
.sec-culture { height: 580px; margin-top: 79px; }
.sec-culture .culture-img { position: absolute; left: 0; top: 60px; width: 560px; height: 460px; }
.sec-culture .culture-img img { width: 100%; height: 100%; object-fit: cover; }
.sec-culture .culture-txt { position: absolute; left: 620px; top: 14px; width: 578px; }
.sec-culture .culture-list { margin-top: 40px; }
.sec-culture .culture-list li {
position: relative; padding: 17px 0 17px 62px;
font: 400 15px/24px var(--font); color: var(--ink-3);
}
.sec-culture .culture-list li + li { margin-top: 16px; }
.sec-culture .culture-list .ico {
position: absolute; left: 0; top: 50%; margin-top: -21px; width: 42px; height: 42px;
}
.sec-culture .culture-list .ico img { width: 42px; height: 42px; }
.sec-culture .culture-list li b { color: var(--blue); }
/* ---------- 8. 列表与卡片 ---------- */
/* 8.1 产品/服务卡片（企业服务、案例展示） */
.card-prod { position: absolute; width: 384px; height: 297px; background: #fff; overflow: hidden; }
.card-prod img { width: 384px; height: 240px; object-fit: cover; transition: transform .4s; }
.card-prod:hover img { transform: scale(1.05); }
.card-prod .bar {
position: absolute; left: 0; bottom: 0; width: 384px; height: 57px; background: var(--blue);
color: #fff; font: 400 14px/57px var(--font); padding-left: 12px;
}
.card-prod .more { position: absolute; right: 12px; bottom: 0; height: 57px; line-height: 57px; color: #fff; font-size: 12px; }
/* 8.2 案例卡片（图 + 标题 + 摘要 + 查看详情） */
.card-case { position: absolute; width: 276px; background: #fff; }
.card-case .ph { width: 276px; height: 184px; object-fit: cover; }
.card-case .ttl { margin-top: 14px; font: 400 16px/24px var(--font); color: var(--ink-3); }
.card-case .txt { margin-top: 8px; font: 400 12px/20px var(--font); color: var(--gray-2); }
/* 8.3 新闻卡片（三列） */
.card-news { position: absolute; width: 320px; background: #fff; }
.card-news .date { font: 700 14px/20px var(--font); color: var(--gray-3); }
.card-news .ttl { display: block; margin-top: 6px; font: 700 16px/24px var(--font); color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-news .ttl:hover { color: var(--link); }
.card-news .txt { margin-top: 10px; font: 400 12px/20px var(--font); color: var(--gray-3);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-news .more { display: inline-block; margin-top: 10px; font: 700 12px/20px var(--font); color: var(--link); }
/* 8.4 通用行列表（招聘岗位 / 新闻列表） */
.rowlist { position: absolute; width: 1160px; }
.rowlist .row {
position: relative; display: block; height: 85px; padding: 22px 90px 0 30px;
border-bottom: 1px solid var(--line);
}
.rowlist .row:hover .ttl { color: var(--link); }
.rowlist .ttl { font: 700 14px/21px var(--font); color: var(--ink-3); }
.rowlist .meta { margin-top: 8px; font: 400 12px/18px var(--font); color: var(--gray-4); }
.rowlist .views { position: absolute; right: 12px; top: 34px; font: 400 12px/18px var(--font); color: var(--gray-4); }
.rowlist .views:before { content: "👁"; margin-right: 4px; font-size: 11px; }
/* ---------- 9. 分页 / 按钮 / 表单 ---------- */
.pager { position: absolute; left: 0; width: var(--canvas); text-align: center; font: 400 12px/24px var(--font); color: var(--gray-2); }
.pager a, .pager span { display: inline-block; min-width: 24px; margin: 0 6px; color: var(--gray-2); }
.pager a:hover { color: var(--blue); }
.pager .on { color: var(--blue); font-weight: 700; }
.pager .prev, .pager .next { margin: 0 14px; }
.btn-line {
display: block; width: 117px; height: 40px; border: 1px solid var(--link); background: #fff;
color: var(--link); font: 400 12px/38px var(--font); text-align: center; transition: all .25s;
}
.btn-line:hover { background: var(--link); color: #fff; }
.btn-blue {
display: block; background: var(--blue); color: #fff; text-align: center;
font: 400 14px/44px var(--font); transition: background .25s;
}
.btn-blue:hover { background: var(--blue-hover); }
/* ---------- 10. 页脚 ---------- */
.footer { position: relative; height: 369px; }
.footer .bleed.ft-blue { top: 0; height: 242px; background: var(--blue); }
.footer .bleed.ft-black { top: 241px; height: 48px; background: #000; }
.footer .bleed.ft-icp { top: 289px; height: 80px; background: #fff; }
/* 内页页脚与原站首页页脚实测不同：总高 368，黑条在页脚顶+240，备案白底 +288 */
body.inner:not(.head-home) .footer { height: 368px; }
body.inner:not(.head-home) .footer .bleed.ft-black { top: 240px; }
body.inner:not(.head-home) .footer .bleed.ft-icp { top: 288px; }
.footer .ft-main { position: relative; height: 242px; }
/* 页脚左侧 logo：在左栏（0..382）与蓝带（高 242）内居中。
新 logo 图 3982×1429（比例 2.79:1，底色同页脚蓝 #012989），
按宽 340 等比显示（高 122、上下各留 60），不再拉伸变形 */
.footer .ft-logo { position: absolute; left: 21px; top: 60px; width: 340px; height: auto; }
body.inner .footer .ft-contact { top: 97px; }
body.inner .footer .ft-title { top: 49px; }
.footer .ft-title { position: absolute; left: 438px; top: 47px; font: 400 16px/16px var(--font); color: #fff; }
.footer .ft-line { position: absolute; top: 56px; width: 1px; height: 126px; background: rgba(255, 255, 255, .35); }
.footer .ft-line.l1 { left: 382px; }
.footer .ft-line.l2 { left: 838px; }
.footer .ft-contact { position: absolute; left: 439px; top: 98px; font: 400 14px/28px var(--font); color: #fff; }
/* 二维码：距右侧分隔线（838）留 57px，与「联系方式」距左侧分隔线（382 → 439）一致 */
.footer .ft-qr { position: absolute; left: 895px; top: 48px; width: 139px; height: 158px; }
.footer .copyright { color: #eee; font: 400 14px/48px var(--font); text-align: center; }
.footer .copyright a:hover { color: #fff; }
.footer .icp { padding-top: 14px; text-align: center; color: var(--gray-3); font: 400 12px/22px var(--font); }
.footer .icp a { color: var(--gray-3); }
.footer .icp a:hover { color: var(--gray-2); }
.footer .icp span { margin: 0 4px; }
.footer .icp div + div { margin-top: 11px; }
.footer .icp .sep { display: inline-block; width: 1px; height: 11px; margin: 0 22px; background: #c9c9c9; vertical-align: -1px; }
/* 回到顶部（固定，不随舞台缩放） */
.to-top {
position: fixed; right: 24px; bottom: 32px; width: 44px; height: 44px; z-index: 90;
background: var(--blue); color: #fff; border: 0; cursor: pointer; display: none;
font-size: 18px; line-height: 44px; text-align: center; border-radius: 3px; opacity: .85;
}
.to-top:hover { opacity: 1; }
.to-top.show { display: block; }
/* ---------- 11. 内页模块 ---------- */
/* 11.1 页面标题（联系我们等） */
.page-title .cn { font: 700 54px/72px var(--font); }
.page-title .en { font: 700 54px/72px var(--font); color: var(--cyan); }
/* 11.2 关于我们（左二图 + 右侧图文）
原站此处为一个 603x474 的富文本框（left:596 top:99），内部：居中大字标题、
两个空行、以及“首段+次段连排”的一段正文（原站两段之间没有换行，实为一段），
段首以 3 个 缩进（实测约 30px，此处用 text-indent 精确还原）。 */
/* 原站文案为“1996 年成立于深圳”的旧版简介（两段连排、约 14 行，正好填满 603x474 富文本框）。
2026-10 起改为金禧达自有简介（四段、共 14 行），正文高度 446px 仍在 474px 框内，
区块高度与下方通栏间距无需改动。 */
.sec-profile { height: 543px; }
.sec-profile .ph { position: absolute; top: 96px; width: 581px; height: 478px; overflow: hidden; }
.sec-profile .ph img { display: block; height: 478px; max-width: none; }
.sec-profile .ph-l { left: 0; }
/* 原站左格是两帧幻灯片轮播：同一时刻只显示 1 帧，另一帧停放在框架外侧（原站实测在 x=625 处被容器裁掉）。
帧内取景对齐原站：第 1 帧按图 684px 宽居中(-51.5px)、第 2 帧按图 733px 宽居中(-76px)。 */
.sec-profile .ph-track { position: absolute; left: 0; top: 0; width: 581px; height: 478px; }
.sec-profile .ph-slide {
position: absolute; left: 0; top: 0; width: 581px; height: 478px;
opacity: 0; transition: opacity .5s linear; background-repeat: no-repeat;
}
.sec-profile .ph-slide.on { opacity: 1; }
.sec-profile .ph-slide.s1 { background-image: url(../img/about-3.jpg); background-size: 684px 478px; background-position: -51.5px 0; }
.sec-profile .ph-slide.s2 { background-image: url(../img/about-2.jpg); background-size: 733px 478px; background-position: -76px 0; }
.sec-profile .ph-arrow { cursor: pointer; z-index: 3; }
.sec-profile .ph-dots i { cursor: pointer; }
.sec-profile .ph-r { left: 581px; }
.sec-profile .ph-l img { width: 684px; margin-left: -51.5px; }
.sec-profile .ph-r img { width: 733px; margin-left: -76px; }
.sec-profile .ph-arrow { position: absolute; top: 211px; width: 34px; height: 56px; background: rgba(0, 0, 0, .2); }
.sec-profile .ph-arrow.l { left: 12px; }
.sec-profile .ph-arrow.r { left: 535px; }
.sec-profile .ph-arrow:before {
content: ""; position: absolute; left: 13px; top: 22px; width: 11px; height: 11px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
}
.sec-profile .ph-arrow.l:before { transform: rotate(45deg); }
.sec-profile .ph-arrow.r:before { transform: rotate(-135deg); left: 9px; }
.sec-profile .ph-dots { position: absolute; left: 252px; top: 436px; font-size: 0; }
.sec-profile .ph-dots i {
display: inline-block; width: 22px; height: 22px; margin-right: 10px; border-radius: 2px;
background: #fff; color: #333; font: 400 12px/22px Tahoma; text-align: center; cursor: pointer;
}
.sec-profile .ph-dots i.on { background: #609ee9; color: #fff; }
.sec-profile .txt-box { position: absolute; left: 596px; top: 99px; width: 603px; font: 400 14px/28px var(--font); color: var(--ink); }
.sec-profile .name { font: 700 30px/30px var(--font); text-align: center; }
.sec-profile .para { margin-top: 24px; text-indent: 30px; }
.sec-profile .para + .para { margin-top: 0; }
/* 11.3 三项服务优势（通栏三列）
注：原站此通栏底色为 #f5f5f5，而图标与文字均为白色 —— 实际渲染完全不可见
（实测该区域墨迹为 0）。复刻版按设计意图改为主题蓝，内容得以正常显示。 */
.sec-adv { height: 301px; margin-top: 356px; }
.sec-adv > .bleed {
/* 原站是 w-banner 背景图：url(48730114.jpg)=about-1.jpg，background-position 50% 50%、size auto、repeat */
background: #f5f5f5 url(../img/about-1.jpg) 50% 50% / auto repeat;
}
.sec-adv .item { position: absolute; top: 40px; width: 331px; }
.sec-adv .item img { width: 77px; height: 79px; margin-left: 124px; }
.sec-adv .item .ttl { margin-top: 15px; font: 700 18px/26px var(--font); color: #fff; text-align: center; }
.sec-adv .item .txt { margin-top: 20px; padding-left: 4px; font: 400 12px/21px var(--font); color: #fff; }
/* 11.4 单图模块（我们的门店 / 发展历程 / 团队风采 / 金禧达荣誉） */
.sec-pic { text-align: center; }
.sec-pic img { margin: 0 auto; }
/* 11.5 联系方式 */
.sec-contact .row { font: 400 20px/44px var(--font); color: var(--gray); }
.sec-contact .map { position: absolute; object-fit: cover; }
/* ---------- 12. 详情页（新闻 / 案例） ---------- */
.article { position: absolute; width: 1100px; }
.article h1 { font: 700 24px/38px var(--font); color: var(--ink-2); }
.article .meta { margin: 12px 0 22px; font: 400 12px/20px var(--font); color: var(--gray-3); }
.article .body { font: 400 14px/28px var(--font); color: var(--ink-3); }
.article .body p { margin-bottom: 16px; }
.article .body img { max-width: 100%; height: auto; margin: 12px auto; }
.article .back { display: inline-block; margin-top: 26px; font: 400 12px/20px var(--font); color: var(--link); }
.detail-head { text-align: center; }
.detail-head .t-h1 { font-size: 28px; }
.detail-prod { position: absolute; }
.detail-prod .ph { width: 520px; height: 340px; object-fit: cover; }
.detail-prod .info { position: absolute; left: 560px; top: 0; width: 520px; }
.detail-prod .price { margin-top: 18px; font: 400 18px/30px var(--font); color: var(--link); }
.detail-prod .buy { margin-top: 20px; width: 180px; height: 44px; }
/* ---------- 13. 自适应 ---------- */
/* 原站为固定 1200px 桌面版；此处 <1200px 时整体等比缩放（main.js 计算 --scale），
并在 <1024px 收起主导航为汉堡菜单，保证手机端可正常浏览与导航。 */
@media (max-width: 1023px) {
.nav-toggle { display: block; }
.navbar { height: auto; }
.navbar .nav { display: none; height: auto; flex-direction: column; padding: 56px 0 8px; }
.navbar .nav.open { display: flex; }
.nav > li { flex: none; width: 100%; height: auto; border-top: 1px solid rgba(255, 255, 255, .15); }
.nav > li > a { height: 46px; line-height: 46px; text-align: left; padding-left: 16px; }
.subnav { position: static; transform: none; width: 100%; display: none; background: rgba(255, 255, 255, .06); box-shadow: none; }
.nav > li.open .subnav { display: block; }
.subnav a { height: 40px; line-height: 40px; padding-left: 32px; }
}