* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei",PingFangSC,Arial,sans-serif; color:#1f2937; background:#eef1f5; }
a { color:#1f2937; text-decoration:none; }
.wrap { width:1160px; max-width:96%; margin:0 auto; }
.header { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06); position:sticky; top:0; z-index:100; }
.header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-size:24px; font-weight:bold; color:#111827; letter-spacing:1px; }
.logo i { display:inline-block; width:10px; height:10px; border-radius:50%; background:#2563eb; margin-right:8px; }
.nav { display:flex; flex-wrap:wrap; }
.nav a { padding:20px 13px; font-size:15px; color:#4b5563; border-bottom:3px solid transparent; }
.nav a:hover { color:#2563eb; }
.nav a.on { color:#2563eb; border-bottom-color:#2563eb; font-weight:bold; }
.hero { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-top:22px; }
.bigcard { position:relative; display:block; height:372px; border-radius:14px; overflow:hidden; }
.bigcard .cover, .mini .cover { position:absolute; inset:0; }
.bigcard .shade { position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(0,0,0,.72)); }
.bigcard .txt { position:absolute; left:24px; right:24px; bottom:20px; color:#fff; }
.bigcard .txt h2 { font-size:24px; line-height:1.45; margin-bottom:8px; }
.bigcard .txt p { font-size:14px; color:rgba(255,255,255,.85); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.minis { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; }
.mini { position:relative; display:block; border-radius:12px; overflow:hidden; }
.mini .shade { position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(0,0,0,.7)); }
.mini h3 { position:absolute; left:14px; right:14px; bottom:12px; color:#fff; font-size:15px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ctag { position:absolute; left:12px; top:12px; background:rgba(255,255,255,.28); backdrop-filter:blur(2px);
  color:#fff; padding:3px 10px; border-radius:20px; font-size:12px; }
.mark { position:absolute; right:6px; bottom:-8px; font-size:56px; font-weight:bold; color:rgba(255,255,255,.16);
  letter-spacing:-2px; pointer-events:none; }
.hotstrip { background:#fff; border-radius:14px; margin-top:22px; padding:18px 24px; }
.hotstrip h2 { font-size:17px; margin-bottom:12px; color:#111827; }
.hotstrip h2 span { color:#2563eb; }
.hotstrip ol { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:4px 40px; counter-reset:hot; }
.hotstrip li { counter-increment:hot; padding:6px 0; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hotstrip li:before { content:counter(hot); display:inline-block; width:20px; height:20px; line-height:20px;
  text-align:center; background:#e5e7eb; color:#6b7280; border-radius:6px; margin-right:10px; font-size:12px; }
.hotstrip li:nth-child(-n+3):before { background:#2563eb; color:#fff; }
.hotstrip a:hover { color:#2563eb; }
.sec { margin-top:34px; }
.sec-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.sec-h b { font-size:20px; color:#111827; padding-left:12px; border-left:4px solid #2563eb; }
.sec-h a { font-size:13px; color:#9ca3af; }
.sec-h a:hover { color:#2563eb; }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.card { background:#fff; border-radius:12px; overflow:hidden; display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.card .cover { position:relative; height:92px; }
.card .cbody { padding:12px 14px 14px; }
.card h3 { font-size:15px; line-height:1.5; height:45px; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card:hover h3 { color:#2563eb; }
.card p { font-size:13px; color:#9ca3af; line-height:1.6; height:42px; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .cdate { font-size:12px; color:#c2c8d0; }
.crumb { font-size:13px; color:#9ca3af; margin:20px 0 14px; }
.crumb a { color:#9ca3af; }
.crumb a:hover { color:#2563eb; }
.pager { text-align:center; padding:26px 0 10px; }
.pager a, .pager b { display:inline-block; min-width:34px; padding:7px 10px; border-radius:8px; margin:0 3px;
  background:#fff; font-size:14px; color:#4b5563; }
.pager b { background:#2563eb; color:#fff; }
.pager a:hover { color:#2563eb; }
.article { max-width:880px; margin:0 auto; background:#fff; border-radius:14px; padding:36px 44px; }
.article h1 { font-size:28px; line-height:1.45; margin-bottom:14px; color:#111827; }
.article .meta { color:#9ca3af; font-size:13px; padding-bottom:16px; border-bottom:1px solid #f0f2f5; margin-bottom:20px; }
.article .meta span { margin-right:18px; }
.article .meta .cat { color:#2563eb; }
.article h2 { font-size:19px; margin:24px 0 10px; color:#111827; padding-left:10px; border-left:4px solid #2563eb; }
.article p { font-size:16px; line-height:1.95; margin-bottom:14px; color:#374151; }
.pn { max-width:880px; margin:18px auto 0; display:flex; gap:14px; }
.pn a, .pn span { flex:1; background:#fff; border-radius:10px; padding:14px 18px; font-size:14px; color:#4b5563;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pn a:hover { color:#2563eb; }
.rel { max-width:880px; margin:30px auto 0; }
.rel .sec-h b { font-size:18px; }
.rel .cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.adbox { margin-top:22px; text-align:center; overflow:hidden; }
.article .adbox { margin:16px 0; }
.footer { background:#111827; color:#9ca3af; margin-top:44px; padding:26px 0; font-size:13px; text-align:center; line-height:2.1; }
.footer a { color:#9ca3af; }
.footer a:hover { color:#fff; }
.main-pad { padding-bottom:10px; }
@media (max-width:980px){
  .hero { grid-template-columns:1fr; }
  .bigcard { height:280px; }
  .minis { grid-template-rows:none; }
  .mini { height:130px; }
  .cards, .rel .cards { grid-template-columns:1fr 1fr; }
  .hotstrip ol { grid-template-columns:1fr; }
  .nav a { padding:12px 10px; }
  .header .wrap { height:auto; flex-direction:column; padding:10px 0 0; }
  .article { padding:24px 20px; }
}