@charset "utf-8";
/* ==========================================================
   内页 · 首页风格主题（page-home.css）
   ----------------------------------------------------------
   用途：把静态内页（猎头 / RPO / 外包 / 背景调查 …）的视觉语言
         对齐新版官网首页：品牌红强调、居中标题 + 英文 + 红短线、
         红圆底图标、红底数据块、卡片 hover 红边、虚线分隔、深色页脚。
   启用方式（只需一行）：在 page-content.css 之后引入本文件
         —— 本文件只被引入它的页面加载，未引入的内页完全不受影响。
   生效位置（自动识别，无需额外加类）：
         .pg-content   内容区（区块标题 / 图标 / 卡片 / 流程 / 列表 / 价格块）
         .abanner      首屏 banner（深色遮罩 + 左对齐文案）
         .foot_nei     内页页脚（灰底改深色）
   配套：page-content.css 提供 .pg-* 基础排版与图标定义，本文件只做主题覆盖。
   图标：红圆底用 <span class="pg-ic-box"><i class="pg-ic pg-ic-xxx"></i></span>；
         深色块内用 <span class="pg-ic-box pg-ic-box--w">…</span>；
         步骤/条目标题旁的内联小图标（.pg-hd-ic）不加圆底，直接走品牌红。
   ========================================================== */

/* ---------- 1. 首屏 banner：深色遮罩 + 左对齐文案（对齐首页 Hero） ---------- */
.abanner { position: relative; overflow: hidden; }
/* margin-left:0 —— 明确归零，防止 main2.css 旧 media 规则（窄屏 -10%/-20%/-40%）残留造成右侧空白 */
.abanner img { display: block; width: 100%; margin-left: 0; }
.abanner:after {
	content: "";
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background: -webkit-linear-gradient(left, rgba(18,20,24,.88) 0%, rgba(18,20,24,.62) 45%, rgba(18,20,24,.22) 100%);
	background: linear-gradient(90deg, rgba(18,20,24,.88) 0%, rgba(18,20,24,.62) 45%, rgba(18,20,24,.22) 100%);
}
.abanner .text_box {
	left: 0; right: 0; margin: 0 auto;
	top: 50%; width: 1200px; max-width: 92%;
	-webkit-transform: translateY(-50%); transform: translateY(-50%);
	text-align: left; z-index: 2;
}
.abanner .text_box .en { font-size: 15px; line-height: 1.4; letter-spacing: 5px; color: rgba(255,255,255,.7); }
.abanner .text_box .cn { margin: 16px 0 0; font-size: 44px; line-height: 1.35; font-weight: bold; letter-spacing: 3px; color: #fff; }
.abanner .pg-banner-line { width: 40px; height: 3px; margin-top: 26px; background: #ab2123; }
.abanner .pg-banner-sub { margin-top: 20px; font-size: 16px; line-height: 1.8; letter-spacing: 1px; color: rgba(255,255,255,.82); }

/* ---------- 1.2 无图版 banner（.abanner--solid，目前仅 contact 页） ----------
   原版 .abanner 的高度完全来自 <img>（原图 1920×590，且 main2.css 在 ≤1500 / ≤1024 / ≤600
   还会把图片放大到 120% / 140% / 180%），1440 屏上实测约 531px。
   因此去掉图片后必须显式给高度，否则容器直接塌成 0。
   底色演进：#12141a（遮罩基色，近黑）→ #242a34（偏蓝灰）→ 现为白底浅色版。
   ⚠️ 底色变浅时，文字必须同步转深色（否则白字在白底上不可见），故下方 4 条写在一起。 */
.abanner--solid { height: 300px; background: #fff; }
.abanner--solid:after { display: none; }
.abanner--solid .text_box .en { color: #9aa2ab; }
.abanner--solid .text_box .cn { color: #222; }
.abanner--solid .pg-banner-sub { color: #6b7278; }

/* ---------- 2. 区块标题：居中 + 英文 + 红短线 ---------- */
.pg-content .pg-sec { margin-bottom: 72px; }
.pg-content .pg-hd { display: block; text-align: center; margin: 0 0 36px; }
.pg-content .pg-hd-t { display: block; padding-left: 0; font-size: 28px; letter-spacing: 1px; }
.pg-content .pg-hd-t::before { display: none; }
.pg-content .pg-hd-en { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 3px; color: #9aa2ab; text-transform: uppercase; }
.pg-content .pg-hd-line { display: block; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 25px; height: 3px; margin: 16px auto 0; background: #ab2123; }
.pg-content .pg-sub { margin: 0 0 26px; text-align: center; }

/* ---------- 3. 红圆底图标容器 ---------- */
.pg-content .pg-ic-box {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	width: 64px; height: 64px; margin: 0 auto 18px;
	border-radius: 50%; background: #fdf5f5;
	-webkit-transition: background .35s ease; transition: background .35s ease;
}
.pg-content .pg-ic-box .pg-ic { width: 30px; height: 30px; margin: 0; color: #ab2123; -webkit-transition: color .35s ease; transition: color .35s ease; }
/* 深色块内的白色变体 */
.pg-content .pg-ic-box--w { margin: 0 26px 0 0; background: rgba(255,255,255,.16); }
.pg-content .pg-ic-box--w .pg-ic { color: #fff; }
/* 步骤 / 条目标题旁的内联小图标：不加圆底，直接品牌红 */
.pg-content .pg-hd-ic,
.pg-content .pg-stack-ic { color: #ab2123; }
/* 深色块上的裸图标提亮 */
.pg-content .pg-contact-ic { color: rgba(255,255,255,.8); }
/* 原为左对齐的语境（fact 列表 / point 行 / 深色 solid 块 / 卡片）里，圆底跟着左对齐不居中 */
.pg-content .pg-fact .pg-ic-box,
.pg-content .pg-point .pg-ic-box,
.pg-content .pg-solid .pg-ic-box { margin: 0 0 16px; }
/* 三列并排的 facts（原居中排版）里保持居中 */
.pg-content .pg-facts-row .pg-fact .pg-ic-box { margin: 0 auto 16px; }
/* 首屏（.pg-hero）：about / rpo 两页原来是「左文字 + 右 3 条 facts」双栏，
   但两栏内容量差太多（左栏仅一小段文字、右栏 3 条信息高得多）→ 无论拉齐还是居中，
   左栏都会留出大片空白。改为单栏：文字块在上、3 条 facts 并排在下
   （配合 HTML 里给 facts 加 .pg-facts-row，复用既有的三列居中样式）。 */
.pg-content .pg-hero { display: block; }
.pg-content .pg-hero-l { display: block; }
.pg-content .pg-hero-r {
	-webkit-box-flex: 0; -ms-flex: none; flex: none;
	width: auto; margin: 24px 0 0; padding-left: 0; border-left: 0;
}

/* ---------- 4. 卡片：去阴影、hover 红边（对齐首页卡片） ---------- */
.pg-content .pg-card,
.pg-content .pg-step-in,
.pg-content .pg-tier {
	background: #fff;
	border: 1px solid #ececec;
	box-shadow: none;
	-webkit-transition: border-color .3s ease; transition: border-color .3s ease;
}
.pg-content .pg-card:hover,
.pg-content .pg-step-in:hover,
.pg-content .pg-tier:hover { border-color: #ab2123; }
/* text-align 显式声明：卡片内容一律左对齐。
   其它内页靠 .options_content 的左对齐继承，contact 页的容器是 .center（居中），
   不声明的话会出现「图标左对齐 + 文字居中」的错位。 */
.pg-content .pg-card { padding: 38px 34px; text-align: left; }
.pg-content .pg-card .pg-ic-box { margin: 0 0 18px; }
.pg-content .pg-card:hover .pg-ic-box { background: #ab2123; }
.pg-content .pg-card:hover .pg-ic-box .pg-ic { color: #fff; }
.pg-content .pg-card-t { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: #222; letter-spacing: 1px; }
/* 卡片「图标 + 标题同一行」的头部
   —— 图标不再单独占一行、右侧留大片空白（与首页服务卡 .home-svc-head 同一思路） */
.pg-content .pg-card-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 16px; }
.pg-content .pg-card-head .pg-ic-box { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 52px; height: 52px; margin: 0 18px 0 0; }
.pg-content .pg-card-head .pg-ic-box .pg-ic { width: 26px; height: 26px; }
.pg-content .pg-card-head .pg-card-t { margin: 0; }
.pg-content .pg-card-bd { font-size: 14px; line-height: 2; color: #6b7278; }

/* ---------- 5. 服务概览 ---------- */
.pg-content .pg-intro-k { font-size: 17px; }
.pg-content .pg-intro-v { font-size: 14px; color: #6b7278; }

/* ---------- 6. 服务流程：序号改红底圆形徽章 ---------- */
.pg-content .pg-step-in { padding: 28px 30px; }
.pg-content .pg-step-hd { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px dashed #ececec; }
.pg-content .pg-step-no {
	display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-flex: 0; -ms-flex: none; flex: none;
	width: 40px; height: 40px; margin-right: 14px;
	border-radius: 50%; background: #ab2123;
	font-size: 15px; font-weight: 700; line-height: 1; color: #fff;
}
.pg-content .pg-step-t { font-size: 18px; }
.pg-content .pg-step-d { font-size: 14px; line-height: 1.9; color: #6b7278; }

/* ---------- 7. 所获客户信赖 / 各类列表：年份品牌红 + 虚线行 ---------- */
.pg-content .pg-hl { border-top: 1px solid #e8e8e8; }
.pg-content .pg-hl li { border-bottom: 1px dashed #ececec; }
.pg-content .pg-hl li:nth-child(odd) { border-right: 1px dashed #ececec; }
.pg-content .pg-hl li:hover { background: #fdf7f7; }
.pg-content .pg-y { font-size: 14px; font-weight: 700; color: #ab2123; letter-spacing: 1px; }
.pg-content .pg-who { color: #222; }

/* ---------- 8. 收费标准 / 深色数据块：深灰改品牌红 ---------- */
.pg-content .pg-price { padding: 38px 40px; background: #ab2123; }
.pg-content .pg-price-k { font-size: 15px; letter-spacing: 1px; opacity: .85; }
.pg-content .pg-price-v { font-size: 52px; }
.pg-content .pg-price-r { font-size: 15px; line-height: 2; border-left-color: rgba(255,255,255,.35); }

/* ---------- 8.2 领域标签（.pg-fields--chip，目前用于 about「我们擅长的领域」）
   由 4 列等宽方块改为首页的流式标签；前三项加 .pg-field--hot 红底强调 ---------- */
.pg-content .pg-fields--chip { display: block; margin: 0; text-align: center; }
.pg-content .pg-fields--chip .pg-field { display: inline-block; width: auto; padding: 0; margin: 0 10px 12px 0; }
.pg-content .pg-fields--chip .pg-field span {
	display: inline-block;
	padding: 10px 22px;
	font-size: 14px;
	color: #555;
	background: #f7f7f7;
	border: 1px solid #e8e8e8;
	-webkit-transition: all .3s ease; transition: all .3s ease;
}
.pg-content .pg-fields--chip .pg-field:hover span { color: #ab2123; border-color: #ab2123; }
.pg-content .pg-fields--chip .pg-field--hot span { color: #fff; font-weight: bold; background: #ab2123; border-color: #ab2123; }
.pg-content .pg-fields--chip .pg-field--hot:hover span { color: #fff; background: #c22a2c; border-color: #c22a2c; }
.pg-content .pg-fields-note { margin: 4px 0 0; text-align: center; font-size: 12px; color: #999; }

/* ---------- 9. 引用块 / 价格档位 ---------- */
.pg-content .pg-quote { background: #f7f7f7; }
.pg-content .pg-tier-k,
.pg-content .pg-tier-d { color: #8a9199; }

/* ---------- 10. 内页页脚：灰底改首页深色 ---------- */
.foot_nei { background: #1c1d21; }
.foot_nei .fotv1 { border-bottom-color: rgba(255, 255, 255, .12); }
.foot_nei .fotv2 .v1,
.foot_nei .fotv2 .v3 a { color: #99a0a8; }
.foot_nei .ul1 li > a:hover,
.foot_nei .ul1 .v1 a:hover { color: #ab2123; }

/* ---------- 11. 办公室名录（contact 页：各地办公室） ----------
   四列卡片：城市图 + 名称 + 邮箱 / 地址（图标走 page-content.css 的 .pg-ic 体系）。
   宽度一律留出约 1% 余量，避免「列宽 × 列数 + 间距」刚好 100% 时被亚像素取整挤到下一行。 */
.pg-content .pg-offices {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	margin: 0 -1.2% -2.4%; padding: 0; list-style: none;
}
.pg-content .pg-office {
	-webkit-box-flex: 0; -ms-flex: 0 0 22.4%; flex: 0 0 22.4%;
	margin: 0 1.2% 2.4%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ececec;
	-webkit-transition: border-color .3s ease; transition: border-color .3s ease;
}
.pg-content .pg-office:hover { border-color: #ab2123; }
.pg-content .pg-office-ph { height: 132px; overflow: hidden; background: #ececec; }
.pg-content .pg-office-ph img {
	display: block; width: 100%; height: 100%;
	-o-object-fit: cover; object-fit: cover;
	-webkit-transition: -webkit-transform .5s ease; transition: transform .5s ease;
}
.pg-content .pg-office:hover .pg-office-ph img { -webkit-transform: scale(1.06); transform: scale(1.06); }
.pg-content .pg-office-bd { padding: 18px 20px 20px; text-align: left; }
.pg-content .pg-office-n { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #222; letter-spacing: 1px; }
.pg-content .pg-office-r { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: #6b7278; }
.pg-content .pg-office-r:last-child { margin-bottom: 0; }
.pg-content .pg-office-ic { width: 15px; height: 15px; margin: 4px 9px 0 0; color: #ab2123; }
.pg-content .pg-office-r span { word-break: break-all; }
/* 卡片正文里的链接（电话 / 邮箱）：跟随正文色，hover 品牌红 */
.pg-content .pg-card-bd a { color: inherit; -webkit-transition: color .3s ease; transition: color .3s ease; }
.pg-content .pg-card-bd a:hover { color: #ab2123; }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
	.abanner .text_box .en { font-size: 13px; letter-spacing: 3px; }
	.abanner .text_box .cn { font-size: 30px; }
	.abanner .pg-banner-sub { font-size: 14px; }
	.abanner--solid { height: 260px; }
	.pg-content .pg-sec { margin-bottom: 48px; }
	.pg-content .pg-hd-t { font-size: 24px; }
	.pg-content .pg-card { padding: 30px 26px; }
	.pg-content .pg-card-head { margin-bottom: 14px; }
	.pg-content .pg-card-head .pg-ic-box { width: 46px; height: 46px; margin-right: 14px; }
	.pg-content .pg-card-head .pg-ic-box .pg-ic { width: 23px; height: 23px; }
	.pg-content .pg-card-head .pg-card-t { font-size: 18px; }
	.pg-content .pg-office { -webkit-box-flex: 0; -ms-flex: 0 0 30.6%; flex: 0 0 30.6%; }
	.pg-content .pg-office-ph { height: 118px; }
}
@media (max-width: 767px) {
	.abanner .text_box .cn { font-size: 22px; letter-spacing: 1px; }
	.abanner .text_box .en { font-size: 12px; letter-spacing: 2px; }
	.abanner .pg-banner-line { width: 28px; margin-top: 18px; }
	.abanner .pg-banner-sub { display: none; }
	.abanner--solid { height: 200px; }
	.pg-content .pg-sec { margin-bottom: 40px; }
	.pg-content .pg-hd-t { font-size: 21px; }
	.pg-content .pg-ic-box { width: 54px; height: 54px; margin-bottom: 14px; }
	.pg-content .pg-ic-box .pg-ic { width: 26px; height: 26px; }
	.pg-content .pg-card { padding: 26px 22px; }
	.pg-content .pg-office { -webkit-box-flex: 0; -ms-flex: 0 0 47.1%; flex: 0 0 47.1%; }
	.pg-content .pg-office-ph { height: 96px; }
	.pg-content .pg-office-bd { padding: 14px 14px 16px; }
	.pg-content .pg-office-n { margin-bottom: 8px; font-size: 14px; }
	.pg-content .pg-office-r { font-size: 12px; }
	.pg-content .pg-office-ic { width: 13px; height: 13px; margin: 4px 7px 0 0; }
	.pg-content .pg-step-in { padding: 24px 22px; }
	.pg-content .pg-step-no { width: 34px; height: 34px; font-size: 13px; margin-right: 12px; }
	.pg-content .pg-price { padding: 28px 24px; }
	.pg-content .pg-price-v { font-size: 38px; }
}

/* ---------- 政府评定 / 资质荣誉条（about 公司概览） ----------
   用途：在公司概览 facts 下方展示政府机关评定的资质，两项并排；
   风格沿用内页规范：1px 边框、无阴影、无圆角（仅图标圆底）、虚线分隔。 */
.pg-content .pg-certs { margin: 40px 0 0; padding: 24px 28px; border: 1px solid #ececec; background: #fff; text-align: left; }
.pg-content .pg-certs-hd { display: block; margin: 0 0 18px; }
.pg-content .pg-certs-k { position: relative; padding-left: 12px; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #222; }
.pg-content .pg-certs-k::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; background: #ab2123; }
.pg-content .pg-certs-en { margin-left: 10px; font-size: 11px; letter-spacing: 2px; color: #9aa2ab; text-transform: uppercase; }
.pg-content .pg-certs-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pg-content .pg-certs-list .pg-cert { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; padding: 0 24px 0 0; }
.pg-content .pg-cert + .pg-cert { padding-left: 24px; border-left: 1px dashed #e6e6e6; }
.pg-content .pg-cert-ic { -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 44px; height: 44px; margin-right: 14px; border-radius: 50%; background: #fdf5f5; }
.pg-content .pg-cert-ic .pg-ic { width: 22px; height: 22px; margin: 0; color: #ab2123; }
.pg-content .pg-cert-n { font-size: 15px; font-weight: 700; line-height: 1.5; color: #222; }
.pg-content .pg-cert-s { margin-top: 3px; font-size: 12px; color: #8a9099; }
@media (max-width: 767px) {
	.pg-content .pg-certs { padding: 20px 18px; }
	.pg-content .pg-certs-list .pg-cert { width: 100%; padding: 0; }
	.pg-content .pg-cert + .pg-cert { margin-top: 16px; padding-top: 16px; padding-left: 0; border-left: 0; border-top: 1px dashed #e6e6e6; }
	.pg-content .pg-cert-ic { width: 38px; height: 38px; margin-right: 12px; }
	.pg-content .pg-cert-ic .pg-ic { width: 20px; height: 20px; }
	.pg-content .pg-cert-n { font-size: 14px; }
}