/* ==========================================================================
   韩剧tv · hanjuys.cn  独立视觉系统
   主题：首尔夜线 · 霓虹站台
   记忆点：地铁线路图导航 / 首播时刻表 / 收视率折线 / 双语字幕角标 / 站台号牌
   1) 基础 2) 线路条 3) 品牌栏+线路导航 4) 站台 Hero 5) 首播时刻表
   6) 剧集卡 7) 收视曲线榜 8) 主演圆阵 9) OST 轨 10) 专题
   11) 追剧日历 12) 社区 13) 页脚 14) 回到顶部 15) 动效 16) 响应式
   ========================================================================== */

/* ---------------- 1. 基础 ---------------- */
*,*::before,*::after{box-sizing:border-box}
:root{
  --night:#0e1024; --panel:#171a38; --panel-2:#1d2148; --panel-3:#232852;
  --line:#2a2f5c; --line-2:#343a6b;
  --pink:#ff4f9a; --pink-2:#ff86b9; --pink-3:#3a1430;
  --mint:#45e0c0; --mint-2:#87efd9; --mint-3:#0d3a34;
  --yel:#ffd23f; --yel-3:#3a3010;
  --purp:#8b7bff; --purp-3:#241f52;
  --ink:#eef1ff; --ink-2:#c3c9ef; --muted:#8b93c4;
  --sh-1:0 4px 16px rgba(0,0,0,.35);
  --sh-2:0 12px 30px rgba(0,0,0,.5);
  --glow-p:0 0 0 1px rgba(255,79,154,.5),0 8px 26px rgba(255,79,154,.28);
  --glow-m:0 0 0 1px rgba(69,224,192,.45),0 8px 26px rgba(69,224,192,.22);
  --r:18px; --ez:cubic-bezier(.3,1.1,.4,1); --shell:1300px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink-2);
  font:15px/1.7 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 460px at 12% -4%,rgba(255,79,154,.20),transparent 62%),
    radial-gradient(760px 420px at 92% 2%,rgba(139,123,255,.20),transparent 60%),
    radial-gradient(680px 460px at 46% 106%,rgba(69,224,192,.13),transparent 62%);
  background-attachment:fixed}
img{display:block;max-width:100%;height:auto;border:0;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol,li{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hj-shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}
.hj-sec{padding:54px 0}
.hj-sec--alt{background:linear-gradient(180deg,#12152f,#0e1024);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 站台号牌 / 角标 */
.plate{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 7px;border-radius:6px;
  font-size:12px;font-weight:900;color:#0e1024;background:var(--yel);letter-spacing:.02em}
.plate--p{background:var(--pink);color:#fff}
.plate--m{background:var(--mint);color:#06251f}
.plate--v{background:var(--purp);color:#fff}
.bi{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;border-radius:7px;padding:3px 8px;
  background:var(--panel-3);color:var(--mint);border:1px solid var(--line-2)}
.bi b{color:var(--yel);font-weight:900}

/* 标题 */
.hj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.hj-kick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.05em;
  padding:5px 13px;border-radius:999px;background:var(--pink-3);color:var(--pink-2);border:1px solid rgba(255,79,154,.35)}
.hj-kick--m{background:var(--mint-3);color:var(--mint-2);border-color:rgba(69,224,192,.32)}
.hj-kick--y{background:var(--yel-3);color:var(--yel);border-color:rgba(255,210,63,.32)}
.hj-kick--v{background:var(--purp-3);color:#c3bcff;border-color:rgba(139,123,255,.35)}
.hj-kick i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hj-h2{font-size:clamp(21px,2.4vw,30px);font-weight:900;color:#fff;margin-top:10px;line-height:1.25}
.hj-sub{color:var(--muted);font-size:14px;margin-top:8px;max-width:76ch}
.hj-more{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--mint);border:1px solid rgba(69,224,192,.4);
  border-radius:999px;padding:8px 16px;transition:.24s var(--ez)}
.hj-more:hover{background:var(--mint-3);box-shadow:var(--glow-m);transform:translateY(-2px)}

/* ---------------- 2. 顶部线路条 ---------------- */
.hj-top{background:linear-gradient(90deg,#1a1030,#241038 45%,#101a38);border-bottom:1px solid var(--line)}
.hj-top__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:40px;font-size:12.5px}
.hj-live{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--pink-2);white-space:nowrap}
.hj-live i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(255,79,154,.25);animation:hjPulse 1.4s infinite}
@keyframes hjPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hj-top__mid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.hj-top__links{display:flex;gap:14px;white-space:nowrap;color:var(--ink-2)}
.hj-top__links a:hover{color:var(--mint)}

/* ---------------- 3. 品牌栏 + 线路导航 ---------------- */
.hj-headbar{position:sticky;top:0;z-index:60;padding:12px 0 10px;background:rgba(14,16,36,.88);backdrop-filter:blur(12px)}
.hj-card-h{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:12px 16px;box-shadow:var(--sh-1)}
.hj-row-h{display:flex;align-items:center;gap:14px}
.hj-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hj-brand__mark{width:44px;height:44px;flex:0 0 44px}
.hj-brand__tx{display:flex;flex-direction:column;line-height:1.1}
.hj-brand__name{font-size:20px;font-weight:900;color:#fff}
.hj-brand__name em{font-style:normal;background:linear-gradient(100deg,var(--mint),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hj-brand__en{font-size:10px;letter-spacing:.24em;color:var(--muted);font-weight:700}
/* 线路导航：一条主线 + 站点 */
.hj-metro{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;padding:6px 4px}
.hj-metro::-webkit-scrollbar{display:none}
.hj-metro::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--purp) 45%,var(--mint));opacity:.5}
.hj-metro a{position:relative;z-index:1;display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:13px;font-weight:800;color:var(--ink-2);padding:9px 13px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);transition:.24s var(--ez)}
.hj-metro a i{width:8px;height:8px;border-radius:50%;background:var(--line-2);box-shadow:0 0 0 3px var(--panel-2)}
.hj-metro a:hover{color:#fff;border-color:var(--mint);transform:translateY(-2px)}
.hj-metro a:hover i{background:var(--mint)}
.hj-metro a.on{color:#0e1024;background:var(--mint);border-color:var(--mint);box-shadow:var(--glow-m)}
.hj-metro a.on i{background:#0e1024;box-shadow:0 0 0 3px var(--mint)}
.hj-act{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hj-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 14px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.hj-search:focus-within{border-color:var(--pink);box-shadow:var(--glow-p)}
.hj-search svg{width:15px;height:15px;fill:var(--muted);flex:0 0 15px}
.hj-search input{border:0;background:none;outline:none;width:134px;font-size:13.5px;color:var(--ink)}
.hj-search input::placeholder{color:#6c74a4}
.hj-search button{height:32px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(100deg,var(--pink),var(--purp))}
.hj-btn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;border-radius:999px;font-size:13.5px;
  font-weight:800;color:#06251f;background:linear-gradient(100deg,var(--mint),var(--mint-2));box-shadow:var(--glow-m);transition:.24s var(--ez)}
.hj-btn:hover{transform:translateY(-2px)}
.hj-burger{display:none;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--panel-2);place-items:center}
.hj-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.hj-burger span::before,.hj-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px}
.hj-burger span::before{top:-6px}.hj-burger span::after{top:6px}

/* ---------------- 4. 站台 Hero ---------------- */
.hj-hero{padding:20px 0 6px}
.hj-hero__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
.hj-stage{position:relative;border-radius:20px;overflow:hidden;min-height:452px;background:var(--panel);box-shadow:var(--sh-2)}
.hj-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hj-stage__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,36,.15) 30%,rgba(14,16,36,.65) 62%,rgba(14,16,36,.94))}
.hj-stage__bd{position:absolute;inset:auto 0 0 0;padding:24px 26px}
.hj-stage__line{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mint-2);font-weight:800}
.hj-stage__t{font-size:clamp(26px,3.2vw,40px);font-weight:900;color:#fff;margin:10px 0 8px}
.hj-stage__d{color:var(--ink-2);font-size:14.5px;max-width:60ch}
.hj-stage__m{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.hj-stage__m b{font-size:23px;font-weight:900;color:var(--yel)}
.hj-hero__side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
.hj-mini{position:relative;border-radius:16px;overflow:hidden;min-height:132px;background:var(--panel);box-shadow:var(--sh-1)}
.hj-mini>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hj-mini__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,36,.1),rgba(14,16,36,.8))}
.hj-mini__bd{position:absolute;inset:auto 0 0 0;padding:12px 14px}
.hj-mini__bd h3{font-size:16px;font-weight:900;color:#fff}
.hj-mini__bd p{font-size:12.5px;color:var(--ink-2);margin-top:3px}
/* 直播倒计时 */
.hj-count{margin-top:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 22px;border-radius:16px;
  background:linear-gradient(100deg,#241038,#1a1030 50%,#101a38);border:1px solid var(--line)}
.hj-count__t{display:flex;align-items:baseline;gap:9px}
.hj-count__t b{font-size:28px;font-weight:900;color:var(--pink-2);font-variant-numeric:tabular-nums}
.hj-count__t span{font-size:13px;color:var(--muted);font-weight:700}
.hj-count__note{font-size:12.5px;color:var(--muted);flex:1;min-width:200px}

/* ---------------- 5. 首播时刻表 ---------------- */
.hj-tt{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.hj-day{border-radius:14px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.hj-day__h{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 11px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.hj-day__h b{font-size:13px;font-weight:900;color:#fff}
.hj-day__h span{font-size:11px;color:var(--muted)}
.hj-day ul{padding:8px}
.hj-day li{padding:8px 9px;border-radius:10px;background:var(--panel-2);border:1px solid transparent;margin-bottom:6px;transition:.22s var(--ez)}
.hj-day li:hover{border-color:var(--mint);transform:translateX(2px)}
.hj-day li b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.4}
.hj-day li span{font-size:11px;color:var(--muted)}
.hj-day li.on{background:var(--pink-3);border-color:rgba(255,79,154,.4)}
.hj-day li.on b{color:var(--pink-2)}
.hj-day--today{border-color:rgba(255,210,63,.45);box-shadow:var(--sh-1)}
.hj-day--today .hj-day__h{background:var(--yel-3)}

/* ---------------- 6. 剧集卡 ---------------- */
.hj-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.hj-card{border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-1);transition:.26s var(--ez)}
.hj-card:hover{transform:translateY(-5px);border-color:var(--pink);box-shadow:var(--glow-p)}
.hj-card__fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel-2)}
.hj-card__fig img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ez)}
.hj-card:hover .hj-card__fig img{transform:scale(1.06)}
.hj-card__bi{position:absolute;right:10px;top:10px;font-size:11px;font-weight:900;color:#06251f;background:var(--mint);border-radius:6px;padding:2px 7px}
.hj-card__ep{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(14,16,36,.72);border-radius:6px;padding:3px 8px}
.hj-card__bd{padding:13px 15px 15px}
.hj-card__t{font-size:15.5px;font-weight:900;color:#fff;line-height:1.4}
.hj-card__d{font-size:12.5px;color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hj-card__m{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}

/* ---------------- 7. 收视曲线榜 ---------------- */
.hj-rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hj-ritem{display:flex;gap:13px;padding:13px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:.24s var(--ez)}
.hj-ritem:hover{border-color:var(--mint);transform:translateY(-3px);box-shadow:var(--glow-m)}
.hj-ritem__no{flex:0 0 auto;align-self:center}
.hj-ritem__fig{flex:0 0 96px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--panel-2)}
.hj-ritem__fig img{width:100%;height:100%;object-fit:cover}
.hj-ritem__bd{min-width:0;flex:1}
.hj-ritem__bd h4{font-size:14.5px;font-weight:900;color:#fff}
.hj-ritem__bd p{font-size:12px;color:var(--muted);margin-top:3px}
.hj-ritem__spark{margin-top:8px;display:flex;align-items:center;gap:10px}
.hj-ritem__spark svg{flex:0 0 92px;height:26px}
.hj-ritem__spark b{font-size:12.5px;font-weight:900;color:var(--mint)}
.hj-ritem__spark span{font-size:11.5px;color:var(--muted)}

/* ---------------- 8. 主演圆阵 ---------------- */
.hj-cast{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.hj-face{text-align:center;padding:16px 10px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:.24s var(--ez)}
.hj-face:hover{transform:translateY(-4px);border-color:var(--purp)}
.hj-face img{width:74px;height:74px;border-radius:50%;margin:0 auto 10px;object-fit:cover;box-shadow:0 0 0 2px var(--purp)}
.hj-face b{display:block;font-size:13.5px;font-weight:900;color:#fff}
.hj-face span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---------------- 9. OST 轨 ---------------- */
.hj-ost{display:flex;gap:15px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.hj-ost::-webkit-scrollbar{display:none}
.hj-ocard{flex:0 0 268px;border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:.24s var(--ez)}
.hj-ocard:hover{transform:translateY(-4px);border-color:var(--yel);box-shadow:0 8px 26px rgba(255,210,63,.18)}
.hj-ocard__fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel-2)}
.hj-ocard__fig img{width:100%;height:100%;object-fit:cover}
.hj-ocard__play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,210,63,.92)}
.hj-ocard__play svg{width:14px;height:14px;fill:#241c00}
.hj-ocard__bd{padding:12px 14px 14px}
.hj-ocard__bd h3{font-size:14.5px;font-weight:900;color:#fff}
.hj-ocard__bd p{font-size:12px;color:var(--muted);margin-top:4px}

/* ---------------- 10. 专题 ---------------- */
.hj-topic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hj-tcard{position:relative;border-radius:18px;overflow:hidden;min-height:224px;border:1px solid var(--line)}
.hj-tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hj-tcard__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,36,.9),rgba(14,16,36,.2))}
.hj-tcard__bd{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:center;color:#fff;max-width:80%}
.hj-tcard__bd h3{font-size:20px;font-weight:900}
.hj-tcard__bd p{font-size:13px;color:var(--ink-2);margin-top:8px}
.hj-tcard__bd span{font-size:12.5px;font-weight:800;color:var(--yel);margin-top:12px}

/* ---------------- 11. 追剧日历 ---------------- */
.hj-cal{position:relative;padding-left:26px}
.hj-cal::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--pink),var(--purp),var(--mint))}
.hj-cal__i{position:relative;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);margin-bottom:12px}
.hj-cal__i::before{content:"";position:absolute;left:-23px;top:22px;width:11px;height:11px;border-radius:50%;
  background:var(--night);border:3px solid var(--mint)}
.hj-cal__i b{display:block;font-size:14px;font-weight:900;color:#fff}
.hj-cal__i span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.hj-cal__i em{font-style:normal;color:var(--yel);font-weight:800}

/* ---------------- 12. 社区 ---------------- */
.hj-talk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.hj-bubble{padding:16px 17px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.hj-bubble p{font-size:13.5px;color:var(--ink-2);margin-bottom:12px}
.hj-bubble__who{display:flex;align-items:center;gap:10px}
.hj-bubble__who img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--mint)}
.hj-bubble__who b{display:block;font-size:13px;font-weight:900;color:#fff}
.hj-bubble__who span{font-size:11.5px;color:var(--muted)}

/* ---------------- 13. 页脚 ---------------- */
.hj-foot{margin-top:24px;background:#0a0c1c;border-top:1px solid var(--line)}
.hj-foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:24px;padding:44px 0 28px}
.hj-foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hj-foot p{font-size:13px;color:var(--muted);max-width:52ch}
.hj-foot__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hj-foot__tags a{font-size:12.5px;padding:5px 12px;border-radius:999px;background:var(--panel-2);color:var(--mint);border:1px solid var(--line)}
.hj-foot h4{font-size:14px;font-weight:900;color:#fff;margin-bottom:12px}
.hj-foot__lis{display:flex;flex-direction:column;gap:9px}
.hj-foot__lis a{font-size:13px;color:var(--muted)}
.hj-foot__lis a:hover{color:var(--mint)}
.hj-foot__bot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0 22px;border-top:1px solid var(--line);font-size:12.5px;color:#6c74a4;flex-wrap:wrap}
.hj-foot__bot a{color:#6c74a4;margin-left:14px}

/* ---------------- 14. 回到顶部 ---------------- */
.gotop{position:fixed;right:20px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(100deg,var(--mint),var(--purp));box-shadow:var(--glow-m);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ez)}
.gotop.on{opacity:1;visibility:visible;transform:none}
.gotop svg{width:20px;height:20px;fill:#06251f}

/* ---------------- 15. 动效 ---------------- */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---------------- 16. 响应式 ---------------- */
@media (max-width:1180px){
  .hj-grid4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hj-cast{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hj-tt{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hj-talk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hj-search input{width:104px}
}
@media (max-width:1024px){
  .hj-hero__grid{grid-template-columns:1fr}
  .hj-hero__side{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hj-mini{min-height:176px}
  .hj-rank{grid-template-columns:1fr}
  .hj-foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hj-metro{order:3;width:100%;flex-basis:100%}
  .hj-row-h{flex-wrap:wrap;gap:12px}
  .hj-search{flex:1}
  .hj-tt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hj-topic{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hj-shell{padding:0 16px}
  .hj-metro{display:none}
  .hj-headbar.open .hj-metro{display:flex;flex-wrap:wrap;gap:7px;padding-top:8px}
  .hj-headbar.open .hj-metro a{font-size:12.5px;padding:7px 11px}
  .hj-burger{display:grid}
  .hj-brand__mark{width:38px;height:38px;flex-basis:38px}
  .hj-brand__name{font-size:18px}
  .hj-brand__en{display:none}
  .hj-btn{display:none}
  .hj-sec{padding:38px 0}
  .hj-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hj-cast{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hj-talk{grid-template-columns:1fr}
  .hj-foot__top{grid-template-columns:1fr}
  .hj-stage{min-height:340px}
  .hj-hero__side{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hj-top__mid{display:none}
  .hj-grid4{grid-template-columns:1fr}
  .hj-cast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hj-hero__side{grid-template-columns:1fr}
  .hj-mini{min-height:150px}
  .hj-tt{grid-template-columns:1fr}
  .hj-ocard{flex:0 0 226px}
  .hj-stage__bd{padding:18px}
}
@media (max-width:390px){
  .hj-shell{padding:0 13px}
  .hj-search{display:none}
  .hj-h2{font-size:19px}
  .hj-stage{min-height:290px}
}