/* ========================================
   壹博特色（新版）- 静态整帧框架
   设计稿 Pixso 5:253「壹博特色」1939×1033（bg 1920 全出血）
   背景渐变 + header 与 doctors_new.css 完全一致（含移动端适配）
   内容：左上大图块 + 右侧 6 行列表 + 底部两卡片（render.D 数据驱动）
   ======================================== */

.feature-new {
  position: relative;
  background: linear-gradient(to top, #CED5D6, #FFFFFF);   /* 与 doctor-new 背景一致 */
  overflow: hidden;
  padding: 44px 0 99px;   /* 顶部 44 对齐 header；底部 99 = 帧1033 - 内容底 y985（旧 ::after 46 + 卡片间距差 16 补偿） */
}

/* ---- Section Header（对齐 doctor-new-header：标题整图 + 两侧虚线垂直居中）---- */
.feature-new-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

/* Dashed line images（与 doctor-new-dash 一致） */
.feature-new-dash {
  flex: 1;
  max-width: 830px;
  height: auto;
  min-width: 0;
  display: block;
  object-fit: contain;
}

/* Unified title image（与 doctor-new-header-title-img 一致: 9.5% ≈ 181px @1920） */
.feature-new-header-title-img {
  flex-shrink: 0;
  display: block;
  width: 9.5%;
  height: auto;
  margin: 0 18px;
}

/* ========================================
   内容区（Pixso 组408: 1526×728 @y257；title 底 y208 → 上间距 49px）
   ======================================== */
.feature-new-content {
  width: 79.5%;        /* 与设计稿一致：内容区 1526/1920 = 79.5%，左右边距 ~10.25% 随宽度成比例 */
  max-width: 1526px;
  margin: 49px auto 0;
}

/* ---- 上区：左上大图块 + 右侧 6 行列表（两栏） ---- */
.feature-new-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;   /* 左右两列底部对齐：第6条与左列按钮平齐，列表下方不悬空 */
  position: relative;
  padding-bottom: 11px;   /* 底部预留：底线距列底 ~10px（设计 行6底→线 10.3px） */
}

/* 中间竖向分隔线（设计 直线168 #6E6567）：中心对齐内容 41.11%，贯穿 main 全高 */
.feature-new-vline {
  position: absolute;
  left: calc(41.11% - 0.5px);   /* 补偿 1px 线宽 → 线心落在 41.11%，与左右底线同轴 */
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(110, 101, 103, 0.5);
}

/* 底部横向分隔线（设计 直线169/170 #6E6567）：左右两段同高，竖线两侧各留 16px 对称收口 */
.feature-new-main::before,
.feature-new-main::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background: rgba(110, 101, 103, 0.5);
}
.feature-new-main::before {   /* 直线169：左块下底线；左内缩 8px，右止于竖线前 16px */
  left: 0.53%;
  right: calc(58.89% + 16px);
}
.feature-new-main::after {    /* 直线170：列表下底线；竖线后 16px 起，右缘内缩 2.5px */
  left: calc(41.11% + 16px);
  right: 0.16%;
}

/* 子模块1 左上（600×503 @帧） */
.feature-new-left {
  width: 39.3%;        /* 600 / 1526 */
  display: flex;
  flex-direction: column;
}

.feature-new-left-img {
  width: 100%;
  aspect-ratio: 599 / 268;   /* 设计 图-大 599×268 */
  object-fit: cover;
  display: block;
}

.feature-new-left-title {
  font-size: 28px;          /* 32 → 28（-4） */
  font-weight: 700;
  color: #D60008;
  line-height: 1.2;
  margin: 6px 0 0;          /* 图底→标题 6px */
}

.feature-new-left-subtitle {
  font-size: 20px;          /* 24 → 20（-4） */
  font-weight: 500;
  color: #1F191C;
  line-height: 1.4;
  margin: 6px 0 0;
}

.feature-new-left-bottom {
  display: flex;
  flex-direction: column;      /* 设计稿: button 位于 bullets 下一行 (button顶≈bullets底) */
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

.feature-new-left-bottom .feature-new-btn {
  align-self: flex-end;        /* 设计稿: button 右缘对齐 (x 513→600) */
}

.feature-new-bullets {
  display: flex;
  gap: 60px;
}

.feature-new-bullets-col {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-new-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;          /* 20 → 16（-4） */
  color: #51474C;
  line-height: 1.4;
}

.feature-new-bullet + .feature-new-bullet {
  margin-top: 12px;
}

.feature-new-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D60008;
  flex-shrink: 0;
}

.feature-new-bullet-text {
  white-space: nowrap;
}

/* ---- 子模块2 右侧 6 行列表（848×509 @帧；行高48 间距45） ---- */
.feature-new-list {
  width: 55.6%;        /* 848 / 1526 */
  list-style: none;
  margin: 0;
  padding: 0 0 0 50px;   /* 左侧留白容纳竖向分隔线 */
  display: flex;
  flex-direction: column;
}

.feature-new-list-item {
  display: flex;
  align-items: center;
  min-height: 50px;     /* 内容一行时 46px（44→46 留白）；描述换行时随内容增高 */
  position: relative;   /* 行下虚线定位参照 */
}

.feature-new-list-item + .feature-new-list-item {
  margin-top: 30px;
}

/* 每行下划虚线（设计 5:297-5:301 #B2B5B9 dash）：位于行底下方，使内容在虚线围合空间内垂直居中。
   起点 = 竖线右侧 31.67px（组408 坐标：虚线 x659.01 − 竖线 x627.34）。
   相对 li（内容起点 ≈ 竖线 + padding 50px）：left = 50 - 31.67 = -18.33px。
   纵向：行距 30px 正中 → 虚线距行底 15px（内容中心 = 上下两虚线中点）。 */
.feature-new-list-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(-50px + 31.67px);   /* 虚线不越过中间分割线 */
  right: 0;
  bottom: -15px;               /* 行距正中，内容垂直居中于虚线空间 */
  border-bottom: 1px dashed rgba(178, 183, 185, 0.6);
}

.feature-new-num {
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 37px;          /* 41 → 37（-4） */
  font-weight: 600;
  color: rgba( 188, 26, 37, 0.4);   /* 设计稿: 序号 #D60008 且 opacity 0.4 → 淡红 */
  line-height: 1;
  width: 50px;
  flex-shrink: 0;
}

.feature-new-list-title {
  font-size: 25px;          /* 29 → 25（-4） */
  font-weight: 700;
  color: #D60008;
  line-height: 1.2;
  margin: 0 0 0 18px;
  width: 250px;          /* 固定标题列（设计 68→347）：描述起点恒定，各行对齐 */
  flex-shrink: 0;
  white-space: normal;   /* 不省略：超长标题在列内换行 */
}

.feature-new-list-desc {
  font-size: 16px;          /* 20 → 16（-4） */
  font-weight: 400;
  color: #51474C;
  line-height: 1.4;
  /* margin: 0 12px;            */
  flex: 1;
  min-width: 0;
  white-space: normal;       /* 不省略：放不下自动换行，行随内容增高 */
}

.feature-new-list-item .feature-new-btn {
  margin-left: auto;     /* 设计稿: button 右缘贴列表右缘 (x 761→848) */
}

/* ---- 红色「了解更多」按钮（左上块 + 列表；红圆 + 白箭头 + 红字）---- */
.feature-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #D60008;
  font-size: 11.8px;        /* 15.8 → 11.8（-4） */
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
  margin-bottom: 10px;
}

.feature-new-btn:hover {
  opacity: .75;
}

.feature-new-btn-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #D60008;
  color: #FFFFFF;
  font-size: 8px;           /* 12 → 8（-4） */
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- 子模块3/4 底部两卡片（红底 + 左侧图标 + 白色内容）---- */
.feature-new-cards {
  display: flex;
  gap: 18px;
  margin-top: 30px;   /* 设计：底线→卡片 29.5px */
}

.feature-new-card {
  flex: 1;
  min-width: 0;
  height: 149px;
  display: flex;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.feature-new-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}

.feature-new-card-icon {
  height: 100%;
  width: auto;
  aspect-ratio: 230 / 149;   /* 设计 组377/381 230×149 */
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.feature-new-card-body {
  flex: 1;
  min-width: 0;
  background: #D60008;
  color: #FFFFFF;
  padding: 8px 20px 12px 21px;
  display: flex;
  flex-direction: column;
}

.feature-new-card-title {
  font-size: 28px;          /* 32 → 28（-4） */
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.feature-new-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: 10px 0 12px;
}

.feature-new-card-bottom {
  display: flex;
  flex-direction: column;      /* 描述一行 + 了解更多换行到第二行 */
  align-items: flex-end;       /* 了解更多 右对齐 */
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.feature-new-card-desc {
  font-size: 16px;          /* 20 → 16（-4） */
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.5;
  margin: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-new-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
  font-size: 11px;          /* 15 → 11（-4） */
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}

.feature-new-card-btn::before {
  content: '>';
  font-size: 20px;          /* 24 → 20（-4） */
  line-height: 1;
}

/* ========================================
   Responsive — 1024px（桌面两栏 → 单栏；镜像 doctors_new 断点）
   设计稿是 1920 宽的两栏布局：桌面(≥1025)一律保留两栏，描述放不下时省略号截断；
   ≤1024 才切单栏流式。内容区始终 79.5% 视口，左右边距与设计稿成比例。
   ======================================== */
@media only screen and (max-width: 1024px) {
  .feature-new-main {
    flex-direction: column;
    gap: 40px;
    padding-bottom: 0;   /* 单栏无底部两段底线，去掉预留 */
  }
  .feature-new-vline,
  .feature-new-main::before,
  .feature-new-main::after {
    display: none;       /* 桌面两栏专属分割线，单栏流式隐藏 */
  }
  .feature-new-left,
  .feature-new-list {
    width: 100%;
  }
  .feature-new-list {
    border-left: none;   /* 单栏流式下不再有左右分栏竖线 */
    padding-left: 0;     /* 序号列与左块内容左缘对齐 */
  }
  .feature-new-list-item {
    height: auto;
    padding: 12px 0;
  }
  .feature-new-list-item + .feature-new-list-item {
    margin-top: 0;
    border-top: 1px solid rgba(23, 13, 12, 0.08);
  }
  .feature-new-list-item:not(:last-child)::after {
    display: none;       /* 桌面行下虚线，移动端用 li+li 实线代替 */
  }
  .feature-new-cards {
    flex-direction: column;
  }
  .feature-new-card {
    height: auto;
  }
  .feature-new-card-icon {
    width: 230px;
    height: auto;
  }
  .feature-new-card-body {
    padding: 20px 24px;
  }
}

/* ========================================
   Responsive — 1024px（header 虚线收窄，内容通栏；镜像 doctors_new）
   ======================================== */
@media only screen and (max-width: 1024px) {
  .feature-new-dash {
    max-width: 300px;
  }
  .feature-new-content {
    width: 100%;          /* 窄屏内容通栏 + 16px 内边距（与 doctors_new 一致） */
    box-sizing: border-box;   /* padding 计入宽度，避免溢出 */
    padding: 0 16px;
  }
}

/* ========================================
   Responsive — 768px（移动端，镜像 doctors_new）
   ======================================== */
@media only screen and (max-width: 768px) {
  .feature-new {
    padding: 30px 0 0;
  }
  .feature-new-header {
    padding: 0 16px;
  }
  .feature-new-dash {
    display: none;
  }
  .feature-new-header-title-img {
    width: 30%;   /* 与 doctor-new-header-title-img 移动端一致 */
    margin: 0;
  }
  .feature-new-content {
    padding: 0 16px;
  }

  /* 左上块 */
  .feature-new-left-title {
    font-size: 26px;          /* 28 → 26（-2） */
  }
  .feature-new-left-subtitle {
    font-size: 16px;          /* 18 → 16（-2） */
  }
  .feature-new-left-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .feature-new-bullets {
    gap: 24px;
    width: 100%;
  }
  .feature-new-bullet {
    font-size: 14px;          /* 16 → 14（-2） */
  }
  .feature-new-bullet-text {
    white-space: normal;   /* 允许窄屏换行 */
  }
  .feature-new-left-bottom .feature-new-btn {
    align-self: flex-end;  /* 了解更多 右下 */
  }

  /* 右侧列表（每行竖排：行1 序号+标题+按钮，行2 描述） */
  .feature-new-list-item {
    flex-wrap: wrap;   /* flex-basis:100% 的 desc 换行到第2行 */
  }
  .feature-new-num {
    font-size: 26px;          /* 28 → 26（-2） */
    width: 38px;
    color: rgba(214, 0, 8, 0.4);   /* 与桌面一致：淡红 */
  }
  .feature-new-list-title {
    font-size: 20px;          /* 22 → 20（-2） */
    margin-left: 10px;
    width: auto;   /* 移动端标题自适应宽度，不固定列 */
  }
  .feature-new-list-desc {
    order: 3;
    flex: 1 1 100%;
    margin: 8px 0 0;
    font-size: 14px;          /* 16 → 14（-2） */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .feature-new-list-item .feature-new-btn {
    order: 2;
    margin-left: auto;
    padding-left: 12px;
  }

  /* 底部两卡片（图标 35% + 红底文案） */
  .feature-new-card {
    align-items: flex-start;   /* 图标保持自身比例，不被文案撑高拉伸 */
  }
  .feature-new-card-icon {
    width: 35%;
    height: auto;
  }
  .feature-new-card-title {
    font-size: 22px;          /* 24 → 22（-2） */
  }
  .feature-new-card-desc {
    font-size: 14px;          /* 16 → 14（-2） */
  }
  .feature-new-card-body {
    padding: 16px 16px;
  }
}

/* ========================================
   Responsive — 480px（手机窄屏再缩一档，镜像 doctors_new）
   ======================================== */
@media only screen and (max-width: 480px) {
  .feature-new {
    padding: 24px 0 0;
  }
  .feature-new-left-title {
    font-size: 22px;          /* 24 → 22（-2） */
  }
  .feature-new-left-subtitle {
    font-size: 14px;          /* 16 → 14（-2） */
  }
  .feature-new-bullets {
    gap: 16px;
  }
  .feature-new-bullet {
    font-size: 12px;          /* 14 → 12（-2） */
    gap: 8px;
  }
  .feature-new-num {
    font-size: 22px;          /* 24 → 22（-2） */
    width: 32px;
  }
  .feature-new-list-title {
    font-size: 18px;          /* 20 → 18（-2） */
  }
  .feature-new-list-desc {
    font-size: 13px;          /* 15 → 13（-2） */
  }
  .feature-new-card-title {
    font-size: 19px;          /* 21 → 19（-2） */
  }
  .feature-new-card-desc {
    font-size: 12px;          /* 14 → 12（-2） */
  }
}