/*
 * 服务项目页专属样式（services.html）
 * 设计稿：1:5004「服务项目-定」（1920×3588，底色 #F2F2F2）
 * 结构：banner(700，与新闻/下载共用图) → 二级菜单 2 项(服务项目[激活]/文件下载) →
 *       三大服务卡（1599×600 白卡 radius 20：图 1100×600 + 文字区，售前图左/售中文左/售后图左交替）
 * 二级菜单复用 .subnav（common.css）
 */

/* ---------- 二级菜单（2 项 805 宽规格，同新闻/下载页） ---------- */
.svc-subnav-item {
  max-width: 805px;
}

/* ---------- 服务卡（设计稿 组1491-1494） ---------- */
.svc-card {
  display: flex;
  flex-direction: column;      /* 移动端图上文下 */
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
}
.svc-card > img {
  width: 100%;
  aspect-ratio: 1100 / 600;
  object-fit: cover;
}
.svc-body {
  padding: 26px 24px 30px;
}
@media (min-width: 1024px) {
  .svc-card {
    flex-direction: row;       /* 设计稿横向：图 1100 + 文字区 */
    min-height: 600px;
  }
  .svc-card > img {
    width: 68.8%;              /* 1100 / 1599 */
    aspect-ratio: auto;
    height: 600px;
  }
  .svc-card .svc-body {
    width: 31.2%;
    padding: 88px 0 0 82px;    /* 设计稿文字区 x=1200（图左卡）内边距 */
  }
  /* 售中：文左图右，DOM 顺序不变用 order 反转；左内边距 82 与另两张卡一致，避免文字贴卡片左缘 */
  .svc-card--reverse { flex-direction: row-reverse; }
  .svc-card--reverse > img { border-radius: 0 20px 20px 0; }
  .svc-card:not(.svc-card--reverse) > img { border-radius: 20px 0 0 20px; }
  .svc-card--reverse .svc-body { padding: 88px 82px 0 82px; }
}

/* 标题组（图标 60×60 蓝 + 名称 36 Bold 蓝 + 英文 20 MiSans 蓝） */
.svc-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.svc-title {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;            /* font_1:5028（36 Bold） */
  color: #0971CE;
}
.svc-subtitle {
  display: block;
  margin-top: 2px;
  font-family: MiSans, "Alibaba PuHuiTi 3.0", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-transform: capitalize;  /* font_1:5023/5181 */
  color: #0971CE;
}
@media (min-width: 1024px) {
  .svc-title { font-size: 36px; line-height: 50px; }
  .svc-subtitle { font-size: 20px; line-height: 27px; }
}

/* 服务条目（设计稿 组1483-1488：圆点 8×8 #3D3D3D + 22px 文字，行距 51） */
.svc-list {
  margin-top: 24px;
}
.svc-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 31px;
  color: #3D3D3D;              /* font_1:5016（22 Regular） */
}
.svc-list li + li {
  margin-top: 12px;
}
/* 条目圆点（设计稿 圆形9：8×8） */
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3D3D3D;
}
@media (min-width: 1024px) {
  .svc-list { margin-top: 30px; }
  .svc-list li { font-size: 22px; }
  .svc-list li + li { margin-top: 20px; }
}