/* ============================================================
   新道优信建站 — 站内公告页样式 page-gonggao.css
   签名布局：紧凑单行列表（标题 + 日期 + 置顶标记）
   ============================================================ */
body.page-gonggao{background:#fff}

.hero-tel{color:var(--c-pink-400);font-weight:700;text-decoration:underline}

/* ---------- ② 紧凑公告列表 ---------- */
.notice-intro{max-width:960px;margin:-14px auto 24px;font-size:14.5px;color:var(--c-text)}
.notice-list{max-width:960px;margin:0 auto;border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.notice-item{display:flex;align-items:center;gap:18px;padding:18px 26px;border-bottom:1px solid var(--c-line);transition:background .3s}
.notice-item:last-child{border-bottom:0}
.notice-item:hover{background:var(--c-bg-pink)}
.notice-item h3{flex:1;font-size:16.5px;font-weight:600;color:var(--c-ink);transition:color .25s}
.notice-item:hover h3{color:var(--c-purple-400)}
.notice-top{flex:none;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:800;color:#fff;background:var(--grad-main)}
.notice-type{flex:none;padding:4px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--c-purple-400);background:var(--c-purple-100)}
.notice-date{flex:none;font-size:13px;color:var(--c-muted);white-space:nowrap}

/* ---------- ③ 服务保障横卷 ---------- */
.sv-card{width:270px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:26px 24px}
.sv-card b{display:block;font-size:24px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-card h3{font-size:16.5px;margin:10px 0 8px}
.sv-card p{font-size:13px}

/* ---------- ④ 服务联系卡 ---------- */
.contact-two{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.contact-img img{border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);width:100%}
.contact-card p{margin-top:12px;font-size:14.5px}
.contact-way{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.way{background:var(--grad-soft);border:1px solid var(--c-line);border-radius:var(--radius-md);padding:16px 20px;transition:transform .3s var(--ease),box-shadow .3s}
a.way:hover{transform:translateX(6px);box-shadow:var(--shadow-card)}
.way b{display:block;color:var(--c-ink);font-size:15.5px}
.way span{font-size:12.5px;color:var(--c-muted)}

/* ---------- ⑤ 相关入口 ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rel-box{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:24px;transition:all .35s}
.rel-box:hover{background:var(--grad-soft);border-color:var(--c-purple-300);transform:translateY(-4px)}
.rel-box h3{font-size:16.5px;margin-bottom:6px}
.rel-box:hover h3{color:var(--c-purple-400)}
.rel-box p{font-size:12.5px;color:var(--c-muted)}

/* ---------- ⑥ CTA ---------- */
.cta-band{background:var(--grad-dark);color:#fff;padding:64px 0}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(20px,2.6vw,28px);margin-bottom:8px}
.cta-band p{color:#D8CBE0}

/* ---------- 响应式 ---------- */
@media (max-width:1200px){
  .contact-two{grid-template-columns:1fr;gap:28px}
  .rel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .notice-item{flex-wrap:wrap;gap:10px;padding:14px 18px}
  .notice-item h3{flex-basis:100%;order:3}
  .sv-card{width:240px}
}
@media (max-width:360px){
  .rel-grid{grid-template-columns:1fr}
  .notice-top,.notice-type{font-size:11px;padding:3px 8px}
  .sv-card{width:215px;padding:20px}
}