/* ===== 金象消费案例征集 H5：750 设计稿，1rem = 100px（JS 设置 html 字号，兼容 CSS2.1） ===== */

/* 基础重置 */
html {
  height: 100%;
  font-size: 100px; /* JS 不可用时的兜底；移动端由 JS 按视口宽度覆写 */
}

* { margin: 0; padding: 0; box-sizing: content-box; -webkit-box-sizing: content-box; }

body {
  margin: 0 auto;
  width: 7.5rem;
  max-width: 750px; /* PC 端封顶 750px，配合 body 居中 */
  background: #000; /* 与 PSD 背景黑场一致，防亚像素露白 */
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; /* 苹果/安卓系统自带字体，忽略 PSD 字体 */
  -webkit-text-size-adjust: 100%; /* 微信/系统大字号时锁定 rem 尺度 */
  color: #f8e7d3; /* PSD 正文主色 fill=[1, .97647, .90845, .83096] */
}

a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } /* 去掉移动端点击时的灰色高亮遮罩 */

img { display: block; border: 0; }

p { margin: 0; padding: 0; }

/* ===== 页面容器：750 × 5313（PSD 画布），背景七段拼接垫底，内容流叠加 ===== */
.page {
  position: relative;
  width: 7.5rem;
  overflow: hidden;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 7.5rem;
  height: 53.13rem; /* 与七段背景总高一致，防止内容提前截断 */
}
.bg img { width: 7.5rem; height: auto; }

/* 前景内容层：相对布局，纵向全部用 margin 按 PSD 坐标差换算 */
.content {
  position: relative;
  z-index: 1;
  width: 7.5rem;
  padding-bottom: 0.72rem; /* 落款图底部到画布底 5313-5241 */
}

/* ----- 顶部 LOGO：PSD (325,97,426,244) 101×147 ----- */
.top-logo {
  width: 1.01rem;
  margin: 0.97rem auto 0;
}

/* ----- 主标题切图：PSD (79,302,672,618) 593×316，与 LOGO 底边间距 58 ----- */
.home-title {
  width: 5.93rem;
  margin: 0.58rem auto 0;
}

/* ----- 装饰下箭头（高度按切图原始比例 60×46 / 35×25） ----- */
.arrow-deco { margin: 0 auto; }
.arrow-deco-1 { width: 0.6rem; height: 0.46rem; margin-top: 5.37rem; } /* 标题图底 618 → 箭头顶 1155 */
.arrow-deco-2 { width: 0.35rem; height: 0.25rem; margin-top: 0.52rem; } /* 卡4 底 3744 → 箭头盒顶 3813（PSD） */

/* ===== 章节：标题切图左对齐 + 金边半透明卡片（各节 margin 按 PSD 坐标差单独校准） ===== */
.sec { margin-top: 0.09rem; } /* 箭头1 底 1201 → 标题1 图层顶 1210 */
.sec-2 { margin-top: 0.37rem; } /* 卡1 底 1967 → 标题2 图层顶 2004 */
.sec-3 { margin-top: 0.32rem; } /* 卡2 底 2518 → 标题3 图层顶 2554（实测收敛） */
.sec-4 { margin-top: 0.31rem; } /* 卡3 底 2949 → 标题4 图层顶 2986（实测收敛） */

.sec-title {
  width: auto; /* 高度由行内 style 指定，宽度按原图比例自适应 */
  margin: 0 0 0 0.42rem; /* PSD 各节标题左边距 37~44px，统一取 42 */
}

/* 卡片：PSD「矢量」圆角金边半透明白底，切图拉伸铺底 */
.card {
  position: relative;
  width: 6.92rem; /* PSD 形状 bbox 28→720 宽 692；content-box 下 1px 边框画在盒外，外沿 29→719 对应 PS 内对齐描边 */
  margin: 0.305rem auto 0; /* 标题图层底 → 卡顶：sec1 为 1323→1353（两轮实测中值） */
  /* PSD「矢量」层：RoundedRectangle 仅描边无填充（fill_enabled=False），
     描边 RGB(240,186,114)=#F0BA72，0.78px 内对齐 → CSS 用 1px 实线近似；不再用背景切图 */
  border: 1px solid #f0ba72;
  border-radius: 0.12rem;
  overflow: hidden; /* 固定高度下多余流高不上抵页面高度（行框 39 与 PS 字符框度量差） */
}

/* 正文严格对照 PSD：FontSize 21 × 文字变换 1.172 = 有效字号 24.6 ≈ 25px；
   像素投影实测基线间距 39；段间距投影同为 39 → p margin-bottom = 4 */
.card-txt {
  padding: 0.3rem; /* 左右上统一 30（PSD 左缘 60-卡左 28=32，取齐）；下边距由卡固定高度兜住 */
  font-size: 0.25rem; /* 21 × 1.172 ≈ 25，非引擎标称的 21 */
  line-height: 1.6;
  text-align: justify;
  color: #f8e7d3;
}
.card-txt p { margin: 0 0 0.04rem; }
.card-txt p:last-child { margin-bottom: 0; }

/* ===== 04 时间和流程：竖向时间轴 ===== */
.card-tl {
  height: 5.85rem; /* content-box：外高 = 585 + 边框 2 + 上内边距 26 = 613；PSD 原高 609，
     因浏览器行框 39 大于 PS 字符框 33.33，末行 desc 需多几 px 才不被裁切 */
  padding-top: 0.26rem; /* bar 盒顶 = 卡顶相对 28 = PSD 矩形4 顶 3152 */
  overflow: hidden;
}

.tl-line {
  /* 竖向虚线：PSD 形状 1 (65,3171,67,3629)，绝对定位含边框，卡外沿 28 */
  position: absolute;
  left: 0.35rem;
  top: 0.47rem; /* 第一 dot 中心（卡顶相对 48 = bar 顶 28 + bar 高 40 / 2） */
  width: 0.02rem;
  height: 4.58rem; /* 第一 dot 中心 48 → 第五 dot 中心 506（PSD 虚线原长 458） */
  background: transparent url(../img/tl_line.png) repeat-y 0 0;
}

.tl-item {
  position: relative;
  margin: 0 0 0.22rem 0.205rem; /* 节拍 107（PSD 矩形4 顶 3152/3259/3367/3474/3612）= bar 40 + desc mt 6 + 行框 39 + mb 22；末项清零 */
  padding-left: 0.3rem;
}
.tl-item-last { margin-bottom: 0; } /* 末项不留下边距，避免撑出卡片底边（CSS2.1 兼容，不用 :last-child） */

.tl-dot {
  position: absolute;
  left: 0;
  top: 0.10rem; /* dot 中心 = bar 中心（卡顶相对 48）：item 顶(含卡内边距 26+边框 1) + dot top 10 + 半高 11.5 ≈ 48 */
  width: 0.24rem;
  height: 0.23rem;
}

.tl-bar {
  width: 3.94rem;
  height: 0.4rem;
  background: transparent url(../img/tl_bar.png) no-repeat 0 0;
  background-size: 3.94rem 0.4rem;
  padding-left: 0.3rem; /* 文字起点 PSD x:110，条左 80 → 缩进 30（让开左向箭头） */
  font-size: 0.23rem; /* 21 × 变换 1.093 ≈ 23（阶段条变换与正文不同） */
  line-height: 0.4rem; /* 行盒 40 与 40 高 bar 对齐，文字垂直居中 */
  font-weight: 700;
  color: #000; /* PSD 阶段条文字 fill=[1,0,0,0] */
}

.tl-desc {
  margin: 0.06rem 0.3rem 0 0.29rem; /* bar 盒顶 28 + bar 高 40 + 上边距 6 → desc 盒 74，墨迹顶≈78（PSD desc 顶 3202 相对 78） */
  font-size: 0.25rem; /* 21 × 1.172 ≈ 25 */
  line-height: 0.39rem;
  color: #f8e7d3;
}

/* ===== 五大申报按钮：PSD 按钮1-5 (53,3882..4836) 643×163，间距 35 ===== */
.btns { padding: 0; }
.btn {
  display: block;
  width: 6.43rem;
  margin: 0.35rem auto 0;
}
.btns .btn:first-child { margin-top: 0.37rem; } /* 箭头盒底 3838 → 按钮1 顶 3882（PSD） */
.btn img { width: 6.43rem; height: 1.63rem; }

/* ===== 点击按钮申报：PSD 像素层 (261,4872,488,4916) 227×44，整图直出、居中，无文字 ===== */
.tips {
  margin-top: 0.37rem; /* 按钮5 底 4837 → 图顶 4872（行盒 font-size:0 后无额外偏移） */
  text-align: center;
  font-size: 0; /* 防止匿名行盒用继承字号擑高（行盒变 55 使图下移 11） */
}
.tips img {
  display: inline-block;
  width: 2.27rem; /* 切图原始尺寸 227×44，保持比例 */
  height: 0.44rem;
}

/* ===== 咨询信息：PSD (155,4949,597,5056) 三行居中，字号 21×1.172≈25，投影行距 39 ===== */
.contact {
  margin-top: 0.32rem; /* tips 盒底 4909 → 咨询盒顶 4941（字形顶 4949） */
  text-align: center;
  font-size: 0.25rem;
  line-height: 0.39rem;
  color: #f8e7d3;
}
/* 手机端可点击拨号/发邮件：tel: 与 mailto: 链接沿用正文色、去下划线 */
.contact-link {
  color: #f8e7d3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== 底部落款：PSD (47,5069,705,5241) 658×172 ===== */
.bottom-logo {
  width: 6.58rem;
  margin: 0.15rem auto 0; /* 咨询盒底 ~5054 → 落款图顶 5069 */
}