/* ============================================================
   校招首页 & 岗位介绍页样式（home.css）
   适配方案：rem.js，设计稿宽 720px，1rem = 100px
   ============================================================ */

html, body {
	margin: 0;
	padding: 0;
}
/* 关键：html 和 body 都禁止横向溢出 — 抽屉/pj_deco 等绝对定位元素出界不会产生横向滚动条，也不会出现"左侧遮挡" */
html {
	overflow-x: hidden;
}
body {
	background: #f4f6fa;
	color: #202942;
	font-family: "Source Han Sans CN", "PingFang SC", "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
	max-width: 750px;           /* 回到原本的 750，与历史版本一致，避免内容缩放偏移 */
	margin: 0 auto;
	position: relative;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- 通用 ---------- */
.hm_wrap {
	padding: 0 0.24rem;
	/*
	 * 全局不设底部大留白 —— 之前写 padding-bottom:1.4rem 是为了"最底部内容不被固定底栏遮挡"，
	 * 但中间那两个 hm_wrap 后面紧跟的是横滑 hm_hscroll（兄弟节点），
	 * 结果 1.4rem = 140px 的留白就裸露在 "标题 -> 横滑卡片" 之间，
	 * 变成了你截图里看到的 "中间空隙太大"。
	 * 改为：只给最后一个 hm_wrap（公司声明 / 页脚）单独加底部留白。
	 */
}
/* 只有最底部的公司声明/页脚需要避让固定底栏（底部蓝色立即投递按钮条高度约 0.8rem + padding 0.92rem ≈ 1.72rem） */
body > .hm_wrap:last-of-type { padding-bottom: 1.4rem; }
.hm_section { margin-top: 0.24rem; }
.hm_sec_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.2rem;
}
.hm_sec_title .st_l {
	display: flex;
	align-items: center;
	font-size: 0.32rem;
	font-weight: 700;
	color: #202942;
	line-height: 1;
}
.hm_sec_title .st_l::before {
	content: "";
	display: inline-block;
	width: 0.08rem;
	height: 0.3rem;
	border-radius: 0.04rem;
	background: linear-gradient(180deg, #2b86f5, #0a56d0);
	margin-right: 0.14rem;
}
.hm_sec_title .st_r {
	font-size: 0.24rem;
	color: #8a94a8;
	display: flex;
	align-items: center;
}
.hm_sec_title .st_r svg { margin-left: 0.04rem; }

.hm_card, .card {
	background: #fff;
	border-radius: 0.16rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
	overflow: hidden;
}

/* 标签 */
.hm_tag {
	display: inline-block;
	padding: 0.04rem 0.14rem;    /* 原来 0.05/0.16 → 略微收紧，避免单个 tag 盒子过胖 */
	border-radius: 0.06rem;
	font-size: 0.22rem;
	line-height: 1.4;            /* 原 1.5 → 略收，避免单 tag 太 */
	margin-right: 0.1rem;
	/*
	 * 关键：去掉 margin-top: 0.1rem ——
	 * 当 tag 是 inline-block 且同一容器内有多行时，
	 * 每一行的 tag 都会带上 marginTop，这会被 inline-formatting-context
	 * 当作"行高增量"叠加到行框上，视觉上三行 tag 之间就变得非常空
	 * （就是你第三张截图里 "招1人" 和 "专业" 之间隔了几行的效果）。
	 * 改为：只给换行后的第一行 tag 留一个统一的容器行距，
	 * 通过 .hm_job_card .jc_tags 的 margin-top 来控制与上方部门的距离。
	 * 行与行之间的空隙用 jc_tags 的 line-height 控制。
	 */
	vertical-align: top;         /* 让多行 tag 按上沿对齐（而不是默认 baseline 错开，第一行短 tag 会被长 tag 拉到下沿悬浮） */
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 荣誉标签区（关于维安 section）：之前靠 hm_tag 的 margin-top 来撑行间距，现在去掉后单独补 */
.hm_about .ab_honor { line-height: 1.8; }
.hm_about .ab_honor .hm_tag { margin: 0.04rem 0.08rem 0.04rem 0; }
.hm_tag_blue  { background: #e8f1fe; color: #0a56d0; }
.hm_tag_green { background: #e7f7ee; color: #13a35c; }
.hm_tag_gray  { background: #f1f3f7; color: #6b7488; }

/* ---------- 顶部栏 ---------- */
.hm_topbar {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 750px;        /* 与 body max-width 对齐，避免左右 15px 错位 */
	height: 0.88rem;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.24rem;
	z-index: 100;
	box-shadow: 0 0.02rem 0.12rem rgba(20, 60, 140, 0.06);
}
.hm_tbar_btn {
	width: 0.64rem;
	height: 0.64rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.hm_tbar_btn:active { background: #eef2f8; }
/* 右上角用户菜单浮层（我的简历 / 我的投递） */
.hm_user_menu_mask {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: transparent;
	z-index: 140;
}
.hm_user_menu {
	position: fixed;
	top: 0.72rem;
	right: 0.16rem;
	z-index: 141;
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.1rem;
	min-width: 2rem;
	box-shadow: 0 0.06rem 0.24rem rgba(20, 40, 90, 0.15);
}
.hm_user_menu a.um_item {
	display: flex;
	align-items: center;
	font-size: 0.28rem;
	color: #202942;
	padding: 0.22rem 0.18rem;
	border-radius: 0.1rem;
	white-space: nowrap;
}
.hm_user_menu .um_item { display: flex; align-items: center; font-size: 0.28rem; color: #202942; padding: 0.22rem 0.18rem; border-radius: 0.1rem; white-space: nowrap; }
.hm_user_menu a.um_item:active { background: #f2f6fd; color: #0a56d0; }
.hm_user_menu button.um_item { width: 100%; border: none; background: none; cursor: pointer; text-align: left; gap: 10px; box-sizing: border-box; }
.hm_user_menu button.um_item svg { margin-right: 0.12rem; color: #202942; }
.hm_user_menu .um_item:active { background: #f2f6fd; color: #0a56d0; }

/* 首页"我的投递"浮层 */
.hm_apply_panel {
	position: fixed;
	z-index: 150;
	top: 1.1rem;
	right: max(0.12rem, calc(50% - 3.75rem + 0.12rem));
	width: 4.6rem;
	max-width: calc(100vw - 0.4rem);
	background: #fff;
	border-radius: 0.14rem;
	box-shadow: 0 0.08rem 0.3rem rgba(20, 40, 90, 0.2);
	overflow: hidden;
	animation: hmFadeDown .2s ease;
}
@keyframes hmFadeDown { from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
.hm_apply_title { display: flex; align-items: center; justify-content: space-between; padding: 0.22rem 0.24rem; border-bottom: 1px solid #eef1f6; }
.hm_apply_title span { font-size: 0.3rem; font-weight: 700; color: #202942; }
.hm_apply_title button { border: none; background: none; font-size: 0.36rem; color: #8a94a8; cursor: pointer; line-height: 1; }
.hm_apply_list { max-height: 5.6rem; overflow-y: auto; }
.hm_apply_item { display: flex; align-items: center; gap: 0.18rem; padding: 0.24rem 0.24rem; border-bottom: 1px solid #f4f6fb; cursor: pointer; }
.hm_apply_item:active { background: #f2f6fd; }
.hm_apply_item .ap_avatar { width: 0.72rem; height: 0.72rem; border-radius: 0.12rem; background: #0a56d0; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.3rem; flex-shrink: 0; }
.hm_apply_item .ap_info { flex: 1; min-width: 0; }
.hm_apply_item .ap_name { font-size: 0.28rem; color: #202942; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm_apply_item .ap_meta { font-size: 0.24rem; color: #8a94a8; margin-top: 0.04rem; }
.hm_apply_item .ap_status { font-size: 0.24rem; color: #0a56d0; flex-shrink: 0; }
.hm_apply_empty { padding: 0.5rem 0.3rem; text-align: center; color: #8a94a8; font-size: 0.26rem; }
.hm_apply_loading { padding: 0.5rem 0.3rem; text-align: center; color: #8a94a8; font-size: 0.26rem; }
.hm_brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}
.hm_brand .b_en { font-size: 0.3rem; font-weight: 800; color: #0a56d0; letter-spacing: 0.02rem; font-style: italic; }
.hm_brand .b_cn { font-size: 0.22rem; color: #6b7488; margin-top: 0.02rem; letter-spacing: 0.06rem; }

/* 抽屉菜单 */
.hm_drawer_mask {
	position: fixed;
	inset: 0;
	background: rgba(20, 30, 55, 0.45);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.hm_drawer_mask.show {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}
/*
 * 抽屉定位机制（解决"侧滑太过"，与 750px body 容器严格对齐）：
 *
 * ① 移动端（视口 <750px）— body 宽度 = 视口宽度，左边就在屏幕左 0 点
 *    默认（关闭）: left:0 + translateX(-100%) → 整个抽屉在屏幕左外
 *    打开(.show): left:0 + translateX(0)     → 从左滑出，贴屏幕左，max-width:78vw 保证不贴满
 *
 * ② 桌面端（视口 ≥750px）— body 是 750px 居中的白色容器，左边缘坐标 = (视口W-750)/2
 *    等价写法：把抽屉"钉"在 body 容器上。用 left:50%（视口中点），然后：
 *       关闭: translateX(calc(-375px - 100%)) → 先减 375（body half）到 body 左边缘，再减抽屉自身宽，完全藏在左边外
 *       打开: translateX(-375px)            → 只减 375，抽屉左边缘正好 = body 容器左边缘，右边缘在 body 内部
 */
.hm_drawer {
	position: fixed;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	width: 5rem;
	max-width: 78vw;
	height: 100%;
	background: #fff;
	z-index: 201;
	visibility: hidden;
	opacity: 0;
	transition: transform .28s ease, visibility 0s linear .28s, opacity .15s ease;
	display: flex;
	flex-direction: column;
	padding: 0.6rem 0.32rem;
	box-shadow: 0 0 0.4rem rgba(0,0,0,0.1);
}
.hm_drawer.show {
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	transition: transform .28s ease, visibility 0s linear 0s, opacity .2s ease;
}

@media (min-width: 750px) {
	.hm_drawer {
		left: 50%;
		/* 关闭：先回到 body 容器左边缘(-375px)，再往左平移抽屉自身100% → 整个抽屉藏在 body 左外 */
		transform: translateX(calc(-375px - 100%));
	}
	.hm_drawer.show {
		/* 打开：仅平移 -375px → 抽屉左边缘正好对齐 body 容器左边缘（不超出右侧） */
		transform: translateX(-375px);
	}
}
.hm_drawer .dr_logo { font-size: 0.4rem; font-weight: 800; color: #0a56d0; font-style: italic; }
.hm_drawer .dr_sub { font-size: 0.24rem; color: #8a94a8; margin: 0.08rem 0 0.5rem; }
.hm_drawer a.dr_item {
	display: flex;
	align-items: center;
	font-size: 0.3rem;
	color: #202942;
	padding: 0.26rem 0.1rem;
	border-radius: 0.12rem;
}
.hm_drawer a.dr_item:active { background: #f2f6fd; color: #0a56d0; }
.hm_drawer a.dr_item svg { margin-right: 0.2rem; }
.hm_drawer .dr_foot { margin-top: auto; font-size: 0.2rem; color: #aab2c2; line-height: 1.7; }

/* ---------- Banner ---------- */
.hm_hero {
	position: relative;
	margin-top: 0.88rem;
	/* 用户要求："图片没有圆角" — banner 图片本身是矩形，不设 border-radius
	   图片下方白色区域（快捷入口卡片）才做两侧大圆角，由 .hm_quick 去承担，见后面的样式 */
	border-radius: 0;
	overflow: hidden;
	/* 让 banner 超过屏幕一半，兼顾 375px 小屏与大屏幕 */
	height: 60vh;
	min-height: 5.6rem;
	max-height: 9rem;
	background: #0c2a65;
}
.hm_hero img,
.hm_hero video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0; /* 本身完全没有圆角 */
}
.hm_hero .hero_mute {
	position: absolute;
	top: 0.28rem;
	right: 0.28rem;
	z-index: 5;
	width: 0.76rem;
	height: 0.76rem;
	display: none; /* 首屏封面状态下隐藏，播放后才显示 */
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(10, 30, 70, 0.45);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	cursor: pointer;
}
.hm_hero .hero_mute.shown { display: flex; }
.hm_hero .hero_mute:active { transform: scale(0.92); }
/* 图标切换：默认(解除静音) → 显示"声波"喇叭；is-muted(静音) → 显示"带×"静音喇叭 */
.hm_hero .hero_mute .ic_on { display: block; }
.hm_hero .hero_mute .ic_off { display: none; }
.hm_hero .hero_mute.is-muted .ic_on { display: none; }
.hm_hero .hero_mute.is-muted .ic_off { display: block; }
/* Banner 播放封面：覆盖视频，点击任意位置开始播放 */
.hm_hero .hero_cover {
	position: absolute;
	inset: 0;
	z-index: 1; /* 低于 hero_c(2) 和 hero_play(4)，保证底部文字/按钮不被挡住；但封面层本身也绑定了 startVideo */
	background: #0c2a65 url('../img/banner.jpg') center / cover no-repeat; /* 视频封面图 */
	cursor: pointer;
}
.hm_hero .hero_play {
	/* hero_play 独立为 .hm_hero 的直接子级（不再嵌在 hero_cover 内），能真正超越父层 z-index:1 */
	position: absolute;
	top: 1.9rem;       /* 视觉位置：banner 上部 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;        /* 高于 hero_c(2) 和 hero_cover(1)，永远悬浮可点 */
	width: 0.76rem;
	height: 0.76rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: rgba(10, 30, 70, 0.42);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 0.04rem 0.16rem rgba(0, 20, 60, 0.3);
}
.hm_hero .hero_play img {
	width: 0.32rem;
	height: 0.32rem;
	display: block;
	object-fit: contain;
	margin-left: 0.04rem; /* 三角视觉居中 */
}
.hm_hero .hero_play:active { transform: translateX(-50%) scale(0.94); }
.hm_hero .hero_mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 30, 70, 0.18) 0%, rgba(10, 30, 70, 0.18) 40%, rgba(10, 35, 85, 0.78) 100%);
}
.hm_hero .hero_c {
	position: absolute;
	left: 0.36rem;
	right: 0.36rem;
	bottom: 0.6rem;
	color: #fff;
	z-index: 2;
}
.hm_hero .hero_tag {
	display: inline-block;
	font-size: 0.2rem;
	padding: 0.06rem 0.18rem;
	border-radius: 0.3rem;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	margin-bottom: 0.18rem;
}
.hm_hero .hero_title {
	font-size: 0.52rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02rem;
	text-shadow: 0 0.04rem 0.16rem rgba(0, 20, 60, 0.45);
}
.hm_hero .hero_sub {
	font-size: 0.26rem;
	margin-top: 0.1rem;
	opacity: 0.92;
	letter-spacing: 0.01rem;
}
.hm_hero .hero_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.3rem;
	/* 与项目底部按钮体系视觉一致 */
	height: 0.72rem;
	padding: 0 0.4rem;
	border-radius: 0.36rem;
	background: #fff;
	color: #0a56d0;
	font-size: 0.28rem;
	font-weight: 600;
	box-shadow: 0 0.08rem 0.24rem rgba(0, 25, 80, 0.28);
}
.hm_hero .hero_btn:active { transform: scale(0.96); }
.hm_hero .hero_btn svg { margin-left: 0.12rem; }

/* ---------- 首页 Banner 下方"整块内容"——因为什么要加这个？
   用户原话：『不是快捷入口有这样的圆角，是除图片外的下面整个模块上移盖住图片一点然后左上和右上有圆角弧度』
   之前我把圆角只给了 .hm_quick（小卡），完全不符合要求。
   现在加这一层：包住"快捷入口+招聘项目+校招岗位+加入维安理由"这整块内容，
   由它做 margin-top 负值 上移盖图 + 左上右上圆角 + 背景色（.hm_wrap 不再是内容的最外层） ---------- */
.hm_lower {
	position: relative;
	/* 用户指定改成 0.3rem：圆角值和上移量都用 0.3rem，刚好上移量 >= 圆角值，
	   整个圆角藏进 banner 图里，露出尖锐的垂直侧边 */
	margin-top: -0.3rem;
	padding-top: 0.3rem;
	border-radius: 0.3rem 0.3rem 0 0;
	background: #f4f6fb;
	overflow: hidden;
	z-index: 3;
	box-shadow: 0 -0.06rem 0.2rem rgba(20, 60, 140, 0.06);
}

/* ---------- .hm_wrap：保持原来的背景透明语义（因为 .hm_lower 已经管背景+圆角），
   不再管上移或圆角 ---------- */
.hm_wrap {
	margin-top: 0;
	position: static;
	background: transparent;
	padding-bottom: 0.2rem;
}

/* ---------- 快捷入口 .hm_quick：
   用户反馈"白色区域没有圆角不自然"，上一轮我把 border-radius 设成了 0（因为觉得大圆角归 .hm_lower）。
   两层圆角的正确做法：
   - 外层 .hm_lower：大圆弧 0.4rem（整块压住 banner 图的弧度）
   - 内层 .hm_quick：小圆弧 0.24rem（快捷入口白卡自身的圆角，让它看起来像一张独立白卡） */
.hm_quick {
	display: flex;
	background: #fff;
	/* 给快捷入口白卡自己的圆角 —— 左上右上和 .hm_lower 的大圆弧有微妙的层级差，自然不突兀 */
	border-radius: 0.24rem;
	box-shadow: 0 0.02rem 0.12rem rgba(20, 60, 140, 0.06);
	padding: 0.48rem 0.24rem 0.4rem;
	margin: 0 0.24rem;  /* 加左右小间距，白卡和外层灰底有缝隙，圆角更显 */
	position: relative;
	gap: 0.1rem;
}
.hm_quick a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.26rem;
	color: #3d475c;
}
.hm_quick .q_icon {
	width: 0.96rem;
	height: 0.96rem;
	/* 图标容器保留圆角（只是图标本身，不是"整块两侧的大圆角"） */
	border-radius: 0.28rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.16rem;
	box-shadow: 0 0.04rem 0.12rem rgba(10, 86, 208, 0.12);
}
.hm_quick .q_icon svg { color: #fff; width: 36px; height: 36px; }
.hm_quick .q1 { background: linear-gradient(135deg, #3a8bff 0%, #0a56d0 100%); }
.hm_quick .q2 { background: linear-gradient(135deg, #64b3ff 0%, #2a7ef0 100%); }
.hm_quick .q3 { background: linear-gradient(135deg, #28b3ff 0%, #0a8ed0 100%); }
.hm_quick a:active .q_icon { transform: scale(0.93); }

/* ---------- 招聘项目第四次设计（极简纯文字横排）
   前三次都失败了：1) 左侧蓝竖线+重阴影 2) 细描边+圆角卡 3) 彩色装饰块+虚线
   用户反馈"还是不好看"，这次彻底极简：
   - promop 本身只有白底 + flex row 布局，无装饰
   - 内部 .hpp_head 让标签和标题横排对齐
   - 按钮右侧悬浮，带箭头小图标 ---------- */
.hm_project_promo {
	margin: 0.2rem 0.3rem 0;
	/* 卡片加白底 + 大圆角 + 柔和阴影（参考图建议的"与页面背景拉开层次"） */
	background: #fff;
	border-radius: 0.24rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.08), 0 0.01rem 0.04rem rgba(20, 60, 140, 0.04);
	padding: 0.32rem 0.32rem 0.3rem;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}
.hm_project_promo::before { display: none; content: none; }

.hm_project_promo .hpp_l {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
}
.hm_project_promo .hpp_head {
	display: flex;
	align-items: center;
	gap: 0.16rem;
}
/* "校招·2027届" 品牌小标签（参考图建议的"一眼识别"） */
.hm_project_promo .hpp_tag {
	display: inline-block;
	font-size: 0.18rem;
	padding: 0.02rem 0.12rem;
	border-radius: 0.14rem;
	background: #eef4ff;
	color: #0a56d0;
	font-weight: 600;
	border: 1px solid #d6e3ff;
	white-space: nowrap;
	flex-shrink: 0;
}
.hm_project_promo .hpp_title {
	font-size: 0.3rem;
	font-weight: 700;
	color: #0f2a5c;
	line-height: 1.3;
}
.hm_project_promo .hpp_sub {
	font-size: 0.22rem;
	color: #6b7a96;
	line-height: 1.4;
}
.hm_project_promo .hpp_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.08rem;
	margin-top: 0.04rem;
}
/* 参考图建议：地点/学历/岗位标签改成浅色 pill 药丸 —— 背景更淡、边框几乎看不见、圆角更大 */
.hpp_meta_tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.04rem 0.14rem;
	font-size: 0.18rem;
	line-height: 1.4;
	color: #4a6086;
	background: #f5f8ff;        /* 更淡的 pill 底色 */
	border-radius: 0.16rem;    /* 更大的圆角，药丸感 */
	border: 1px solid #edf2fb; /* 更浅的边框几乎看不见 */
	white-space: nowrap;
}
/* 参考图建议：胶囊按钮 + 微渐变 —— 按钮高度略加大一点，渐变更柔和 */
.hpp_btn {
	flex-shrink: 0;
	height: 0.66rem;
	padding: 0 0.28rem;
	border-radius: 0.33rem;
	background: linear-gradient(135deg, #2b86f5 0%, #0a56d0 100%);
	color: #fff !important;
	font-size: 0.22rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.06rem 0.16rem rgba(10, 86, 208, 0.24);
	white-space: nowrap;
}
.hpp_btn:active { transform: scale(0.96); }

/* ---------- 旧的"招聘项目"蓝卡（已不再使用，保留以防其它老代码引用，视觉上弱化）---------- */
.hm_project {
	position: relative;
	padding: 0.36rem 0.32rem;
	background: linear-gradient(120deg, #0d5ee0 0%, #1a6ef0 55%, #3a8bff 100%);
	color: #fff;
	border-radius: 0.16rem;
	overflow: hidden;
}
.hm_project .pj_name { font-size: 0.34rem; font-weight: 700; }
.hm_project .pj_sub { font-size: 0.24rem; opacity: 0.92; margin-top: 0.12rem; }
.hm_project .pj_note { font-size: 0.22rem; opacity: 0.78; margin-top: 0.08rem; }
.hm_project .pj_btn {
	position: absolute;
	top: 0.36rem;
	right: 0.32rem;
	background: #fff;
	color: #0a56d0;
	font-size: 0.24rem;
	font-weight: 600;
	padding: 0.12rem 0.3rem;
	border-radius: 0.4rem;
}
.hm_project .pj_btn:active { opacity: 0.88; }
.hm_project .pj_deco {
	position: absolute;
	right: -0.2rem;
	bottom: -0.3rem;
	font-size: 2rem;
	opacity: 0.1;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
}

/* ---------- 岗位卡 ---------- */
.hm_job_list { display: flex; flex-direction: column; gap: 0.2rem; }
.hm_job_card {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.32rem 0.28rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
	transition: transform .15s ease, box-shadow .15s ease;
}
.hm_job_card:active {
	transform: scale(0.985);
	box-shadow: 0 0.02rem 0.1rem rgba(20, 60, 140, 0.1);
}
.hm_job_card .jc_main { flex: 1; min-width: 0; }
.hm_job_card .jc_title_row {
	display: flex;
	align-items: center;
}
.hm_job_card .jc_title { font-size: 0.32rem; font-weight: 700; color: #202942; }
.hm_job_card .jc_cat {
	font-size: 0.18rem;
	color: #0a56d0;
	background: #e8f1fe;
	border-radius: 0.04rem;
	padding: 0.03rem 0.1rem;
	margin-left: 0.14rem;
	flex-shrink: 0;
}
.hm_job_card .jc_dept { font-size: 0.24rem; color: #8a94a8; margin-top: 0.08rem; }
/*
 * 岗位卡片内部多行标签：改用 flex wrap + 统一 gap
 *   —— 解决 "同一行内标签挤（只有 margin-right 0.1rem），
 *         换行后上下间距又明显大很多（line-height + padding/leading 叠加）"
 *         导致"看起来不均匀"的问题。
 *   用 gap 可以把"同行的左右间距"和"换行后的上下间距"统一到同一个口径，
 *   row-gap = column-gap = 0.1rem，任何情况观感完全一致。
 *   作用域仅限 .jc_tags，不影响荣誉标签、声明里其他用 hm_tag 的 inline-block 容器。
 */
.hm_job_card .jc_tags {
	margin-top: 0.12rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* gap = 行间距 列间距 各 0.1rem（≈8-10px 随 rem 缩放） */
	gap: 0.1rem;
}
/* flex 子项不再需要每个 tag 单独的 margin-right（gap 统一管），也不需要 inline-block —— flex 子项自动 block 化 */
.hm_job_card .jc_tags .hm_tag { margin: 0; display: inline-flex; align-items: center; }
.hm_job_card .jc_arrow {
	flex-shrink: 0;
	width: 0.56rem;
	height: 0.56rem;
	margin-left: 0.16rem;
	border-radius: 50%;
	background: #f2f6fd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a56d0;
}

/* ---------- 加入维安的理由（横滑卡） ---------- */
.hm_hscroll {
	display: flex;
	overflow-x: auto;
	gap: 0.2rem;
	padding: 0 0.24rem 0.16rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.hm_hscroll::-webkit-scrollbar { display: none; }
.hm_reason_card {
	flex: 0 0 3.2rem;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.3rem 0.26rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
}
.hm_reason_card .rs_icon {
	width: 0.76rem;
	height: 0.76rem;
	border-radius: 0.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.18rem;
}
.hm_reason_card .rs_icon svg { width: 34px; height: 34px; }
.hm_reason_card .rs_icon.c1 { background: #e8f1fe; color: #0a56d0; }
.hm_reason_card .rs_icon.c2 { background: #e7f7ee; color: #13a35c; }
.hm_reason_card .rs_icon.c3 { background: #fff1e3; color: #f08a18; }
.hm_reason_card .rs_icon.c4 { background: #f0ebff; color: #7a5af0; }
.hm_reason_card .rs_icon.c5 { background: #e0f7f6; color: #0aa39a; }
.hm_reason_card .rs_icon.c6 { background: #ffeef3; color: #e84a7c; }
.hm_reason_card .rs_name { font-size: 0.28rem; font-weight: 700; color: #202942; }
.hm_reason_card .rs_desc { font-size: 0.22rem; color: #7a8499; line-height: 1.6; margin-top: 0.1rem; }

/* ---------- 关于维安 ---------- */
.hm_about { padding: 0.32rem 0.28rem 0.28rem; }
.hm_about .ab_text { font-size: 0.24rem; color: #5b6678; line-height: 1.8; text-align: justify; }
.hm_about .ab_stats {
	display: flex;
	margin: 0.28rem 0 0.04rem;
	background: #f6f9ff;
	border-radius: 0.12rem;
	padding: 0.24rem 0.04rem;
}
.hm_about .ab_stat { flex: 1; text-align: center; }
.hm_about .ab_stat .num { font-size: 0.4rem; font-weight: 800; color: #0a56d0; line-height: 1.1; }
.hm_about .ab_stat .num small { font-size: 0.22rem; font-weight: 600; }
.hm_about .ab_stat .lab { font-size: 0.2rem; color: #8a94a8; margin-top: 0.06rem; }
.hm_about .ab_honor { display: flex; flex-wrap: wrap; margin-top: 0.22rem; }
.hm_about .ab_honor .hm_tag { margin-bottom: 0.04rem; }

/* ---------- 招聘流程 ---------- */
.hm_process { padding: 0.32rem 0.28rem; }
.hm_step { display: flex; align-items: flex-start; position: relative; }
.hm_step + .hm_step { margin-top: 0.3rem; }
.hm_step .sp_dot {
	flex-shrink: 0;
	width: 0.68rem;
	height: 0.68rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #2b86f5, #0a56d0);
	color: #fff;
	font-size: 0.26rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.22rem;
	position: relative;
	z-index: 1;
}
.hm_step:not(:last-child) .sp_dot::after {
	content: "";
	position: absolute;
	top: 0.76rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.02rem;
	height: 0.46rem;
	background: #d5e2f7;
}
.hm_step .sp_txt .t { font-size: 0.28rem; font-weight: 700; color: #202942; }
.hm_step .sp_txt .d { font-size: 0.22rem; color: #8a94a8; margin-top: 0.06rem; line-height: 1.5; }

/* ---------- 维安生活（照片墙） ---------- */
.hm_life_card {
	flex: 0 0 3.6rem;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 0.16rem;
	overflow: hidden;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
}
.hm_life_card .lf_img {
	width: 100%;
	height: 2.4rem;
	object-fit: cover;
}
.hm_life_card .lf_cap {
	font-size: 0.26rem;
	font-weight: 600;
	color: #202942;
	padding: 0.22rem 0.26rem 0.26rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 照片大图预览 */
.hm_lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10, 18, 38, 0.92);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
}
.hm_lightbox.show { display: flex; }
.hm_lightbox img { max-width: 100%; max-height: 100%; border-radius: 0.12rem; }
.hm_lightbox .lb_close {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 0.72rem;
	height: 0.72rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- 公司声明 / 页脚 ---------- */
.hm_notice {
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.32rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
}
.hm_notice .nc_t { font-size: 0.28rem; font-weight: 700; color: #202942; margin-bottom: 0.16rem; display: flex; align-items: center; }
.hm_notice .nc_t::before {
	content: "";
	width: 0.08rem;
	height: 0.28rem;
	border-radius: 0.04rem;
	background: linear-gradient(180deg, #2b86f5, #0a56d0);
	margin-right: 0.14rem;
}
.hm_notice .nc_b { font-size: 0.22rem; color: #97a0b3; line-height: 1.8; text-align: justify; }
.hm_footer {
	text-align: center;
	font-size: 0.2rem;
	color: #aab2c2;
	margin-top: 0.44rem;
	line-height: 1.9;
}

/* ---------- 底部固定按钮栏 ---------- */
.hm_tabbar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 720px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -0.02rem 0.16rem rgba(20, 60, 140, 0.08);
	padding: 0.16rem 0.24rem;
	padding-bottom: calc(0.16rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(0.16rem + env(safe-area-inset-bottom));
	display: flex;
	gap: 0.2rem;
	align-items: center;
	z-index: 100;
}
.hm_btn {
	flex: 1;
	height: 0.8rem;
	border-radius: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.28rem;
	font-weight: 600;
	border: none;
}
.hm_btn_primary {
	background: linear-gradient(135deg, #1a6ef0, #0a56d0);
	color: #fff;
	box-shadow: 0 0.08rem 0.2rem rgba(10, 86, 208, 0.28);
}
.hm_btn_primary:active { opacity: 0.9; transform: scale(0.98); }
.hm_btn_ghost {
	background: #fff;
	color: #0a56d0;
	border: 0.02rem solid #b9d3f7;
}
.hm_btn_ghost:active { background: #f2f7ff; }

/* ============================================================
   岗位介绍页（job.html）
   ============================================================ */
.jb_topbar {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 720px;
	height: 0.88rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.2rem;
	z-index: 100;
	box-shadow: 0 0.02rem 0.12rem rgba(20, 60, 140, 0.06);
}
.jb_topbar .jb_back {
	width: 0.72rem;
	height: 0.72rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.jb_topbar .jb_back:active { background: #eef2f8; }
.jb_topbar .jb_t_title { font-size: 0.32rem; font-weight: 700; color: #202942; }
.jb_topbar .jb_t_placeholder { width: 0.72rem; }

.jb_wrap { padding: 1.08rem 0.24rem 1.5rem; }

.jb_hero {
	position: relative;
	background: linear-gradient(120deg, #0d5ee0 0%, #1a6ef0 60%, #4a95ff 100%);
	border-radius: 0.16rem;
	padding: 0.44rem 0.36rem 0.4rem;
	color: #fff;
	overflow: hidden;
}
.jb_hero .jh_deco {
	position: absolute;
	right: -0.4rem;
	top: -0.5rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}
.jb_hero .jh_deco2 {
	position: absolute;
	right: 0.5rem;
	bottom: -0.9rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}
.jb_hero .jh_cat {
	display: inline-block;
	font-size: 0.2rem;
	padding: 0.05rem 0.18rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 0.3rem;
	margin-bottom: 0.2rem;
}
.jb_hero .jh_title { font-size: 0.48rem; font-weight: 800; }
.jb_hero .jh_dept { font-size: 0.28rem; opacity: 0.92; margin-top: 0.12rem; }
.jb_hero .jh_meta { display: flex; flex-wrap: wrap; margin-top: 0.28rem; }
.jb_hero .jh_meta .m_item {
	display: flex;
	align-items: center;
	font-size: 0.24rem;
	margin-right: 0.32rem;
	margin-bottom: 0.08rem;
	opacity: 0.95;
}
.jb_hero .jh_meta .m_item svg { margin-right: 0.08rem; }

.jb_info_row {
	display: flex;
	gap: 0.2rem;
	margin-top: 0.2rem;
}
.jb_info_card {
	flex: 1;
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.28rem 0.2rem;
	text-align: center;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
}
.jb_info_card .ic_lab { font-size: 0.22rem; color: #8a94a8; }
.jb_info_card .ic_val { font-size: 0.3rem; font-weight: 700; color: #0a56d0; margin-top: 0.1rem; }

.jb_block {
	background: #fff;
	border-radius: 0.16rem;
	padding: 0.36rem 0.32rem;
	margin-top: 0.2rem;
	box-shadow: 0 0.04rem 0.2rem rgba(20, 60, 140, 0.07);
}
.jb_block .bk_t {
	font-size: 0.3rem;
	font-weight: 700;
	color: #202942;
	margin-bottom: 0.22rem;
	display: flex;
	align-items: center;
}
.jb_block .bk_t::before {
	content: "";
	width: 0.08rem;
	height: 0.3rem;
	border-radius: 0.04rem;
	background: linear-gradient(180deg, #2b86f5, #0a56d0);
	margin-right: 0.14rem;
}
.jb_block .bk_intro { font-size: 0.26rem; color: #5b6678; line-height: 1.85; text-align: justify; }
.jb_block ul { margin: 0; padding: 0; list-style: none; }
.jb_block ul li {
	position: relative;
	font-size: 0.26rem;
	color: #5b6678;
	line-height: 1.75;
	padding-left: 0.32rem;
	margin-bottom: 0.18rem;
}
.jb_block ul li::before {
	content: "";
	position: absolute;
	left: 0.04rem;
	top: 0.18rem;
	width: 0.12rem;
	height: 0.12rem;
	border-radius: 50%;
	background: #c7dbf8;
}
.jb_block ul li::after {
	content: "";
	position: absolute;
	left: 0.08rem;
	top: 0.22rem;
	width: 0.04rem;
	height: 0.04rem;
	border-radius: 50%;
	background: #0a56d0;
}
.jb_major {
	background: #f6f9ff;
	border-radius: 0.12rem;
	padding: 0.24rem 0.28rem;
	font-size: 0.26rem;
	color: #3d475c;
	line-height: 1.7;
}
.jb_major .mj_lab { color: #8a94a8; margin-right: 0.1rem; }

.jb_tip {
	display: flex;
	align-items: flex-start;
	background: #eef5ff;
	border-radius: 0.12rem;
	padding: 0.24rem 0.28rem;
	font-size: 0.24rem;
	color: #3d6dc9;
	line-height: 1.7;
	margin-top: 0.2rem;
}
.jb_tip svg { flex-shrink: 0; margin-right: 0.12rem; margin-top: 0.03rem; }