/* =========================================================
   海外利益保护服务一件事 onething_yl.css
   设计基准：1920 x 高度自适应；窄屏整页等比缩放（见 onething_yl.js）
   设计稿：海外利益保护服务"一类事"（Figma node 14006:1232）
   ========================================================= */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #F9FAFB;
    font-family: "Source Han Sans CN", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #000;
}

/* 缩放容器 */
.hw-screen {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hw-page {
    width: 1920px;
    background: #F9FAFB;
    transform-origin: 0 0;
}

/* 屏幕阅读器隐藏文本 */
.hw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* ============ Banner ============ */
.hw-banner-wrap {
    position: relative;
    width: 1920px;
    height: 360px;
}

.hw-banner {
    display: block;
    width: 1920px;
    height: 360px;
}

/* Banner 说明文字（banner.png 中标题烙印于 y160~201 垂直居中，说明文字置于其下 20px，即设计稿标题-说明间距） */
.hw-banner-desc {
    position: absolute;
    left: 360px;
    top: 221px;
    width: 678px;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.05em;
    color: #FFF;
    text-shadow: 0 1px 2px rgba(21, 97, 175, 0.5);
}

/* ============ 分区 ============ */
.hw-section {
    position: relative;
}

/* 法人服务分区：卡片底 50px 留白（对应设计稿分区高 404） */
.hw-section--legal {
    padding-bottom: 50px;
}

/* 个人服务分区：卡片底 125px 留白（对应设计稿分区高 786） */
.hw-section--personal {
    padding-bottom: 125px;
}

/* 分区标题行：图标 + 标题，间距 5px，位于 x:360 / y:40 */
.hw-section-hd {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: 40px 0 0 360px;
}

.hw-section-ico {
    display: block;
    margin-right: 5px;
}

.hw-section--legal .hw-section-ico {
    width: 33px;
    height: 33px;
}

.hw-section--personal .hw-section-ico {
    width: 38px;
    height: 38px;
}

.hw-section-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    color: #000;
    white-space: nowrap;
}

/* ============ 卡片容器 ============ */
/* 位于 x:356 / y:107（标题行下 23px），宽 1200，横向间距 20，个人服务两行间距 30 */
.hw-cards {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-wrap: wrap;
    width: 1200px;
    margin: 23px 0 0 356px;
}

/* ============ 卡片 ============ */
/* 基础样式：渐变底 + 纹理图层、白色 2px 内侧描边（设计稿 stroke inside）、圆角 8、投影
   注：card_bg_*.png 的 alpha 通道已按设计稿烘焙为 20%（Figma 中纹理以 20% 不透明度
   叠加在渐变底上，呈现浅淡清透的淡蓝波纹；勿替换为不带 alpha 的原始导出图） */
.hw-card {
    position: relative;
    width: 387px;
    min-height: 247px;
    margin-right: 20px;
    border-radius: 8px;
    background-image: url("../images/card_bg_c.png"), linear-gradient(139deg, #E9F3FF 0%, #FFFFFF 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 2px #FFFFFF, 0 2px 28px 0 rgba(64, 102, 173, 0.1);
    overflow: hidden;
}

/* 第二列卡片宽 386（设计稿 387+386+387+间距40=1200） */
.hw-card:nth-child(3n+2) {
    width: 386px;
}

/* 行末卡片去掉右侧间距 */
.hw-card:nth-child(3n) {
    margin-right: 0;
}

/* 多行拓展：第 4 张卡片起进入第二行，与上一行间距 30（法人/个人服务通用） */
.hw-card:nth-child(n+4) {
    margin-top: 30px;
}

/* 个人服务分区：第二行及之后卡片高 277（首行按基础高 247），保持设计稿两行视觉 */
.hw-section--personal .hw-card:nth-child(n+4) {
    min-height: 277px;
}

/* 卡片背景纹理变体（设计稿裁剪差异） */
.hw-card--apec {
    background-image: url("../images/card_bg_a.png"), linear-gradient(139deg, #E9F3FF 0%, #FFFFFF 100%);
}

.hw-card--security {
    background-image: url("../images/card_bg_b.png"), linear-gradient(139deg, #E9F3FF 0%, #FFFFFF 100%);
}

/* 卡片标题：位于 (23,23)，20px 加粗 */
.hw-card-title {
    position: absolute;
    left: 23px;
    top: 23px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: #000;
    white-space: nowrap;
}

/* 卡片底部插画：374x299，锚定卡片底部（下探 191px 由卡片裁切） */
.hw-card-art {
    position: absolute;
    left: 63px;
    bottom: -191px;
    width: 374px;
    height: 299px;
    pointer-events: none;
}

/* 卡片右下角图标：法人服务距底 26，个人服务距底 34，横向位置按设计稿逐卡设置 */
.hw-card-ico {
    position: absolute;
    bottom: 26px;
    display: block;
    pointer-events: none;
}

.hw-section--personal .hw-card-ico {
    bottom: 34px;
}

.hw-card--apec .hw-card-ico {
    left: 292px;
    width: 68px;
    height: 68px;
}

.hw-card--security .hw-card-ico {
    left: 300px;
    width: 58px;
    height: 68px;
}

.hw-card--consular .hw-card-ico {
    width: 66px;
    height: 68px;
}

.hw-section--legal .hw-card--consular .hw-card-ico {
    left: 295px;
}

.hw-section--personal .hw-card--consular .hw-card-ico {
    left: 293px;
}

.hw-card--cert .hw-card-ico {
    left: 300px;
    width: 62px;
    height: 68px;
}

.hw-card--study .hw-card-ico {
    left: 289px;
    width: 70px;
    height: 68px;
}

.hw-card--travel .hw-card-ico {
    left: 291px;
    width: 68px;
    height: 68px;
}

.hw-card--work .hw-card-ico {
    left: 294px;
    width: 68px;
    height: 68px;
}

.hw-card--insurance .hw-card-ico {
    left: 292px;
    width: 68px;
    height: 68px;
}

/* ============ 子业务列表 ============ */
/* 列表走文档流（原绝对定位导致内容超出卡片高度即被截断、卡片高度无法自适应）：
   padding 对齐原定位坐标（left 23 / top 68），内容增多时卡片高度自动向下撑开，
   修复维护超过 5 条业务时不展示的截断问题；
   右侧预留 90px 图标列，避免子级内容覆盖右下角图标（图标绝对定位贴卡片底部，随卡片增高自动下移）；
   底部 26px 留白与图标距底间距一致 */
.hw-card-list {
    margin: 0;
    padding: 68px 90px 26px 23px;
    list-style: none;
}

/* 列表项：18px Regular #333（较原16px调大一号），文字距左 26px（设计稿 "  · " 前缀缩进） */
.hw-li {
    position: relative;
    padding-left: 26px;
    font-size: 18px;
    line-height: 26px;
    color: #333333;
    white-space: nowrap;
}

.hw-li + .hw-li {
    margin-top: 15px;
}

/* 项目符号：统一使用设计稿圆点图片 icon_list_item.svg（16x14），固定尺寸渲染，
   保证所有卡片圆点完全一致；图内圆点中心位于 (7,6)，
   按行高 26px 垂直居中：top=(26/2-6)=7px，圆点中心水平位置与原 12.5px 对齐：left=12.5-7=5.5px */
.hw-li::before {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 7px;
    width: 16px;
    height: 14px;
    background: url("../images/icon_list_item.svg") no-repeat center;
    background-size: 16px 14px;
}

/* 列表条目：统一以可点击链接样式展示（含未配置跳转地址项，后续配置后即生效） */
.hw-li a {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

/* 悬停/按压：文字变设计稿演示蓝 + 蓝色下划线，代表可点击链接 */
.hw-li a:hover,
.hw-li a:active {
    color: #1561AF;
    text-decoration: underline;
}

/* ============ 子级业务区域（父条目下方，一行两列网格） ============ */
/* 父条目（如"领事认证"）配置了子级时，在其菜单项下方展示子级业务区域：
   一行两列、数量增多自动换行；字号小于父级（14px < 18px），
   文字颜色与圆点前缀样式沿用父级（图标缩小版）；卡片背景/圆角/阴影/间距不变 */
.hw-sublist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 4px;
    margin: 6px 0 2px;
    padding: 0;
    list-style: none;
    /* 覆盖父级 li 的 nowrap，允许子项在列内自动换行 */
    white-space: normal;
}

/* 子级条目：14px Regular #333，前缀缩进与父级同构 */
.hw-subli {
    position: relative;
    padding-left: 21px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

/* 子级前缀：沿用父级圆点图标（icon_list_item.svg 16x14）等比缩小为 12x10.5，
   按行高 22px 垂直居中：top=(22-10.5)/2≈5.8→6px，圆点中心水平与父级对齐取 left=4px */
.hw-subli::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 12px;
    height: 10.5px;
    background: url("../images/icon_list_item.svg") no-repeat center;
    background-size: 12px 10.5px;
}

/* 子级条目链接：默认色与父级一致，悬停/按压同样变蓝加下划线 */
.hw-subli a {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

.hw-subli a:hover,
.hw-subli a:active {
    color: #1561AF;
    text-decoration: underline;
}

/* ============ 保险说明文字（静态段落卡片） ============ */
.hw-card-text {
    position: absolute;
    left: 23px;
    top: 68px;
    width: 325px;
    margin: 0;
    font-size: 16px;
    line-height: 28px;
    color: #666666;
}

/* ============ 个人服务分区底部渐显背景 ============ */
/* 设计稿 1920x574 蒙版渐显图层（含渐变遮罩），锚定分区底部 */
.hw-personal-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1920px;
    height: 574px;
    pointer-events: none;
}

/* 设计稿装饰圆点（5x5 白色） */
.hw-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFFFFF;
}

.hw-dot--1 {
    left: 382px;
    top: 306px;
}

.hw-dot--2 {
    left: 382px;
    top: 340px;
}

.hw-dot--3 {
    left: 382px;
    top: 374px;
}