:root{
  --red:#c20c0c; --red2:#e60026; --orange:#ff6a3d; --pink:#ff5e8a;
  --gold:#ffb400; --blue:#2b6cff; --green:#12b76a; --purple:#7a5af8;
  --ink:#1f2330; --sub:#5a6072; --bg:#f6f7fb; --card:#ffffff;
  --line:#e8eaf0;
  --grad:linear-gradient(135deg,#c20c0c 0%,#e60026 45%,#ff6a3d 100%);
  --grad2:linear-gradient(120deg,#2b6cff,#7a5af8);
  --shadow:0 10px 30px rgba(28,30,50,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block;border-radius:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--red)}
.logo .ico{width:38px;height:38px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:0 0 auto}
.logo small{font-weight:500;font-size:12px;color:var(--sub)}
nav.main{display:flex;flex-wrap:wrap;gap:4px}
nav.main a{padding:7px 12px;border-radius:20px;font-size:14.5px;color:var(--sub);transition:.2s}
nav.main a:hover{background:#fff0f1;color:var(--red)}
nav.main a.active{background:var(--grad);color:#fff;font-weight:600}
/* hero */
.hero{background:var(--grad);color:#fff;padding:56px 0 64px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero::before{content:"";position:absolute;left:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero h1{font-size:38px;line-height:1.3;margin-bottom:14px;position:relative;z-index:1}
.hero p{font-size:17px;max-width:720px;opacity:.95;position:relative;z-index:1}
.hero .btns{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:26px;font-weight:700;font-size:15px;transition:.2s}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.btn-ghost{border:2px solid rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-red{background:var(--grad);color:#fff}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(194,12,12,.3)}
/* sections */
section{padding:52px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px}
.sec-head h2{font-size:26px;position:relative;padding-left:16px}
.sec-head h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:4px;background:var(--grad)}
.sec-head .more{color:var(--red);font-weight:600;font-size:14px;white-space:nowrap}
.sec-head .more:hover{text-decoration:underline}
/* cards */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.02)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#ffd3d9}
.card .em{font-size:30px;display:inline-block;margin-bottom:10px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{color:var(--sub);font-size:14.5px}
.cat-tag{display:inline-block;padding:3px 12px;border-radius:14px;font-size:12px;font-weight:600;margin-bottom:12px}
.t-red{background:#fff0f1;color:var(--red)}
.t-blue{background:#eef3ff;color:var(--blue)}
.t-green{background:#e9fbf1;color:var(--green)}
.t-purple{background:#f2efff;color:var(--purple)}
.t-orange{background:#fff3e8;color:var(--orange)}
.t-pink{background:#ffeef4;color:var(--pink)}
.t-gold{background:#fff7e0;color:#b97a00}
/* faq */
.faq{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:16px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16.5px;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";margin-left:auto;font-weight:700;color:var(--red);font-size:20px;transition:.2s}
.faq[open] summary::after{content:"－"}
.faq .a{padding:4px 22px 22px;color:#3a3f52;border-top:1px dashed var(--line);padding-top:16px}
.faq .a ol{margin-left:20px}
.faq .a ol li{margin:8px 0}
/* breadcrumb */
.crumb{font-size:13.5px;color:var(--sub);padding:16px 0;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--red)}
.crumb span{color:var(--sub)}
/* article */
article.body{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow)}
article.body h1{font-size:28px;line-height:1.4;margin-bottom:14px}
.meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--sub);font-size:13.5px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:22px}
article.body h2{font-size:21px;margin:28px 0 12px;padding-left:12px;border-left:4px solid var(--red)}
article.body p{margin:14px 0;color:#333a4d;text-align:justify}
article.body figure{margin:22px 0;text-align:center}
article.body figcaption{font-size:12.5px;color:#8a8f9f;margin-top:8px}
blockquote{background:#fff7f8;border-left:4px solid var(--red);padding:14px 18px;border-radius:0 10px 10px 0;color:#5a3a3a;margin:18px 0;font-size:15px}
/* comments */
.comment{background:#fafbfd;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:12px 0}
.comment .u{font-weight:700;font-size:14px}
.comment .t{color:var(--sub);font-size:12.5px}
.comment p{font-size:14.5px;margin-top:6px;color:#3a3f52}
/* news list */
.news-item{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px;transition:.2s}
.news-item:hover{box-shadow:var(--shadow);border-color:#ffd3d9}
.news-item img{width:210px;height:140px;object-fit:cover;flex:0 0 auto}
.news-item .info h3{font-size:18px;margin-bottom:6px}
.news-item .info h3:hover{color:var(--red)}
.news-item .info p{color:var(--sub);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* sidebar */
.side{position:sticky;top:84px}
.side .box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px}
.side .box h3{font-size:16px;margin-bottom:12px;padding-left:10px;border-left:3px solid var(--red)}
.side .box a{display:block;padding:7px 0;color:var(--sub);font-size:14px;border-bottom:1px dashed var(--line)}
.side .box a:last-child{border-bottom:0}
.side .box a:hover{color:var(--red)}
.layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
/* footer */
footer.site{background:#1c1e2a;color:#c9ccd6;margin-top:40px;padding:46px 0 26px}
footer.site h4{color:#fff;font-size:16px;margin-bottom:14px}
footer.site a{color:#c9ccd6;display:block;padding:5px 0;font-size:14px}
footer.site a:hover{color:#ff8a8a}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;padding-bottom:26px;border-bottom:1px solid #323442}
.copy{text-align:center;font-size:13px;color:#8a8f9f;padding-top:20px}
/* table */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
th,td{border:1px solid var(--line);padding:10px 14px;text-align:left}
th{background:#fff5f6;color:var(--red)}
/* responsive */
@media(max-width:900px){
  .g3,.g2,.g4{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .hero h1{font-size:30px}
  .fgrid{grid-template-columns:1fr 1fr}
  .news-item img{width:120px;height:90px}
}
@media(max-width:560px){
  .g3,.g2,.g4{grid-template-columns:1fr}
  .topbar{flex-direction:column;height:auto;padding:12px 0}
  nav.main{justify-content:center}
  .hero h1{font-size:26px}
  article.body{padding:20px}
  .fgrid{grid-template-columns:1fr}
}