/* ============================================================
   gangwei.html · 八大员岗位详解总览
   题头①全幅图Banner+居中标题；卡片栅格 / 表格 / 深绿色带 / 步骤流 / 手风琴
   ============================================================ */

/* ---------- 题头：全幅图 Banner ---------- */
.gw-hero{ position:relative; min-height:460px; display:flex; align-items:center; color:#fff; overflow:hidden; padding:120px 0 90px; }
.gw-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gw-hero-mask{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,23,.62) 0%, rgba(15,31,23,.78) 100%); }
.gw-hero-inner{ position:relative; text-align:center; max-width:860px; margin:0 auto; }
.gw-crumbs{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; font-size:13px; color:#D7E4DC; padding-bottom:18px; }
.gw-crumbs a{ color:#fff; }
.gw-crumbs a:hover{ color:var(--orange-2); }
.gw-crumbs .sep{ color:rgba(255,255,255,.45); }
.gw-hero-title{ font-size:44px; font-weight:800; letter-spacing:1px; text-shadow:0 4px 20px rgba(0,0,0,.3); }
.gw-hero-sub{ margin:18px auto 0; max-width:720px; font-size:16px; line-height:1.9; color:#E4EEE8; }
.gw-hero-actions{ margin-top:30px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ---------- 8 岗位大卡（4 列带图卡） ---------- */
.gw-cards-sec{ background:var(--white); }
.gw-card-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.gw-pcard{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; display:block; }
.gw-pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.gw-pcard img{ width:100%; height:170px; object-fit:cover; }
.gw-pnum{ position:absolute; top:12px; left:12px; background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff; font-weight:800; font-size:13px; padding:4px 12px; border-radius:999px; letter-spacing:1px; }
.gw-pbody{ padding:16px 18px 18px; }
.gw-pbody b{ font-size:18px; font-weight:800; }
.gw-pbody p{ margin-top:6px; font-size:13.5px; color:var(--ink-2); line-height:1.7; }
.gw-pbody em{ display:inline-block; margin-top:10px; font-style:normal; font-size:13px; font-weight:700; color:var(--orange-deep); }

/* ---------- 职责对照表 ---------- */
.gw-table-sec{ background:var(--bg-soft); }
.gw-table-wrap{ margin-top:36px; overflow-x:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); background:#fff; }
.gw-table{ width:100%; border-collapse:collapse; min-width:760px; }
.gw-table th, .gw-table td{ padding:15px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line); }
.gw-table thead th{ background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; font-weight:700; letter-spacing:1px; }
.gw-table tbody tr:nth-child(even){ background:var(--bg-green); }
.gw-table tbody tr:hover{ background:var(--orange-soft); }
.gw-table td:first-child a{ font-weight:800; color:var(--green-deep); }
.gw-table td:first-child a:hover{ color:var(--orange-deep); }
.gw-table-note{ margin-top:18px; font-size:14px; color:var(--ink-2); }
.gw-table-note a{ color:var(--orange-deep); font-weight:700; }
.gw-table-note a:hover{ text-decoration:underline; }

/* ---------- 报考价值：深绿连续色带 ---------- */
.gw-value{ background:linear-gradient(135deg,#0B2A1C,#0F1F17 60%); padding:72px 0; }
.gw-value .sec-kicker{ color:#7FE8B6; }
.gw-value .sec-title{ color:#fff; }
.gw-value-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gw-vitem{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:26px 22px; transition:transform .3s ease, background .3s ease; }
.gw-vitem:hover{ transform:translateY(-5px); background:rgba(255,122,28,.14); border-color:rgba(255,122,28,.5); }
.gw-vitem b{ display:block; font-size:26px; font-weight:800; color:var(--orange-2); margin-bottom:10px; }
.gw-vitem p{ font-size:14px; line-height:1.9; color:#C4D8CC; }

/* ---------- 怎么选岗位：步骤流（浅橙底） ---------- */
.gw-how{ background:var(--bg-orange); }
.gw-how-steps{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:gwstep; }
.gw-how-steps li{ position:relative; background:#fff; border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-sm); border-top:4px solid var(--orange); }
.gw-how-steps li:nth-child(2){ border-top-color:var(--green); }
.gw-how-steps li:nth-child(3){ border-top-color:var(--orange-2); }
.gw-hs-num{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:2px; color:var(--orange-deep); background:var(--orange-soft); padding:4px 14px; border-radius:999px; margin-bottom:14px; }
.gw-how-steps li:nth-child(2) .gw-hs-num{ color:var(--green-deep); background:var(--green-soft); }
.gw-how-steps h3{ font-size:19px; margin-bottom:10px; }
.gw-how-steps p{ font-size:14.5px; color:var(--ink-2); line-height:1.9; }

/* ---------- 常见问答：折叠手风琴 ---------- */
.gw-faq-sec{ background:#fff; }
.gw-faq{ margin:32px auto 0; max-width:860px; display:flex; flex-direction:column; gap:14px; }
.gw-faq details{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft); padding:0 22px; transition:border-color .25s ease, box-shadow .25s ease; }
.gw-faq details[open]{ background:#fff; border-color:var(--green); box-shadow:var(--shadow-sm); }
.gw-faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gw-faq summary::-webkit-details-marker{ display:none; }
.gw-faq summary::after{ content:"+"; flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--green-soft); color:var(--green-deep); display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .3s ease; }
.gw-faq details[open] summary::after{ transform:rotate(45deg); background:var(--orange); color:#fff; }
.gw-faq details p{ padding:0 0 20px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }
.gw-faq details p a{ color:var(--orange-deep); font-weight:700; }

/* ---------- 底部咨询行动带 ---------- */
.gw-cta{ background:linear-gradient(120deg,var(--orange) 0%,var(--orange-deep) 100%); padding:56px 0; }
.gw-cta-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; }
.gw-cta-copy h2{ color:#fff; font-size:28px; font-weight:800; }
.gw-cta-copy p{ margin-top:10px; color:#FFE9D6; max-width:520px; font-size:15px; line-height:1.9; }
.gw-cta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.gw-cta-mail{ color:#fff; font-size:13.5px; opacity:.9; }
.gw-cta-mail:hover{ opacity:1; text-decoration:underline; }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .gw-hero-title{ font-size:32px; }
  .gw-card-grid{ grid-template-columns:repeat(2,1fr); }
  .gw-value-grid{ grid-template-columns:repeat(2,1fr); }
  .gw-how-steps{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .gw-hero{ min-height:380px; padding:110px 0 70px; }
  .gw-card-grid{ grid-template-columns:1fr; }
  .gw-value-grid{ grid-template-columns:1fr; }
  .gw-cta-inner{ flex-direction:column; align-items:flex-start; }
}