/* roulang page: index */
:root{
--g1:#f6b73c;
--g2:#f2694a;
--bg:#0a0d13;
--bg2:#111722;
--bg3:#0c111a;
--txt:#eef2f8;
--dim:#94a1b5;
--edge:rgba(255,255,255,.09);
--rd:16px;
--shd:0 18px 40px -24px rgba(0,0,0,.92);
--gap:clamp(18px,3vw,30px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.75 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
.mbnuqbc-shell{width:min(1180px,92vw);margin:0 auto}

/* 顶栏 */
.mbnuqbc-top{position:sticky;top:0;z-index:40;background:rgba(10,13,19,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.mbnuqbc-top .mbnuqbc-shell{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap;padding:8px 0}
.mbnuqbc-logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.3px}
.mbnuqbc-logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mbnuqbc-logo em{font-style:normal;font-size:12px;color:var(--dim);font-weight:400;padding-left:8px;border-left:1px solid var(--edge)}
.mbnuqbc-nav{margin-left:auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.mbnuqbc-nav::-webkit-scrollbar{display:none}
.mbnuqbc-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-size:14.5px;color:var(--dim);white-space:nowrap;transition:color .2s,background .2s}
.mbnuqbc-nav a:hover{color:var(--txt);background:rgba(255,255,255,.06)}

/* 首屏 */
.mbnuqbc-hero{position:relative;padding:clamp(28px,4.5vw,58px) 0 clamp(36px,5vw,64px);background:linear-gradient(180deg,rgba(10,13,19,.78),rgba(10,13,19,.94)),url('/assets/images/backpic/back-1.webp') center/cover no-repeat}
.mbnuqbc-herowrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center}
.mbnuqbc-eyebrow{display:inline-block;padding:5px 13px;border-radius:999px;border:1px solid rgba(246,183,60,.4);color:var(--g1);font-size:13px;letter-spacing:.5px}
.mbnuqbc-herotext h1{margin-top:16px;font-size:clamp(27px,4.2vw,44px);line-height:1.24;letter-spacing:.5px}
.mbnuqbc-sub{margin-top:14px;font-size:clamp(15px,2vw,18px);color:#cfd8e6}
.mbnuqbc-note{margin-top:14px;font-size:15px;color:var(--dim);max-width:56ch}
.mbnuqbc-heroact{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.mbnuqbc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:12px;border:0;font-size:15px;font-weight:700;color:#1b1305;background:linear-gradient(135deg,var(--g1),var(--g2));transition:transform .2s,filter .2s}
.mbnuqbc-btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.mbnuqbc-btn--ghost{background:transparent;color:var(--txt);border:1px solid var(--edge);font-weight:500}
.mbnuqbc-btn--ghost:hover{border-color:rgba(246,183,60,.55);color:var(--g1)}

/* 观看档位对比 */
.mbnuqbc-plans{display:grid;gap:13px}
.mbnuqbc-plan{padding:17px 18px;border:1px solid var(--edge);border-radius:var(--rd);background:rgba(17,23,34,.86);box-shadow:var(--shd)}
.mbnuqbc-plan--pick{border-color:rgba(246,183,60,.55);background:linear-gradient(150deg,rgba(246,183,60,.16),rgba(17,23,34,.94))}
.mbnuqbc-plan h3{font-size:16px;display:flex;align-items:center;gap:9px}
.mbnuqbc-plan p{margin-top:7px;font-size:14px;color:var(--dim)}
.mbnuqbc-tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;color:var(--dim);border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.mbnuqbc-tag--hot{color:#1b1305;background:linear-gradient(135deg,var(--g1),var(--g2));border:0;font-weight:700}

/* 通用板块 */
.mbnuqbc-sec{padding:clamp(38px,5vw,64px) 0}
.mbnuqbc-sec--alt{background:var(--bg3)}
.mbnuqbc-h2{font-size:clamp(21px,2.6vw,28px);line-height:1.35}
.mbnuqbc-lead{margin-top:12px;font-size:15px;color:var(--dim);max-width:80ch}

/* 品牌故事 */
.mbnuqbc-story{display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--gap);align-items:center;margin-top:26px}
.mbnuqbc-story img{width:100%;border-radius:18px;border:1px solid var(--edge)}
.mbnuqbc-storyfig{position:relative}
.mbnuqbc-storytxt p+p{margin-top:12px}
.mbnuqbc-storytxt p{font-size:15px;color:#c8d2e1}

/* 分类频道 */
.mbnuqbc-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.mbnuqbc-chan{padding:18px;border:1px solid var(--edge);border-radius:14px;background:var(--bg2);transition:border-color .2s,transform .2s}
.mbnuqbc-chan:hover{border-color:rgba(246,183,60,.4);transform:translateY(-3px)}
.mbnuqbc-chan b{font-size:16px}
.mbnuqbc-chan p{margin-top:8px;font-size:14px;color:var(--dim)}

/* 卡片网格 */
.mbnuqbc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.mbnuqbc-card{background:var(--bg2);border:1px solid var(--edge);border-radius:14px;overflow:hidden;transition:transform .24s,border-color .24s,box-shadow .24s}
.mbnuqbc-card:hover{transform:translateY(-4px);border-color:rgba(246,183,60,.42);box-shadow:0 22px 36px -26px rgba(0,0,0,.95)}
.mbnuqbc-thumb{position:relative;aspect-ratio:2/3;background:#0e131c;overflow:hidden}
.mbnuqbc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mbnuqbc-card:hover .mbnuqbc-thumb img{transform:scale(1.05)}
.mbnuqbc-badge{position:absolute;top:9px;left:9px;padding:3px 9px;border-radius:999px;font-size:12px;color:#fff;background:rgba(8,11,16,.8);border:1px solid var(--edge)}
.mbnuqbc-score{position:absolute;right:9px;bottom:9px;padding:2px 8px;border-radius:8px;font-size:13px;font-weight:700;color:var(--g1);background:rgba(8,11,16,.82)}
.mbnuqbc-card h3{padding:12px 13px 2px;font-size:15.5px}
.mbnuqbc-card p{padding:0 13px 14px;font-size:14px;color:var(--dim)}

/* 高分列表 */
.mbnuqbc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:26px}
.mbnuqbc-li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;background:var(--bg2)}
.mbnuqbc-li b{min-width:46px;font-size:19px;color:var(--g1);line-height:1.4}
.mbnuqbc-li span{display:block;font-size:15px}
.mbnuqbc-li em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--dim)}

/* 权益 */
.mbnuqbc-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.mbnuqbc-perk{padding:20px 18px;border-radius:14px;border:1px solid var(--edge);background:linear-gradient(160deg,rgba(246,183,60,.08),rgba(17,23,34,.92))}
.mbnuqbc-perk b{display:block;font-size:15.5px}
.mbnuqbc-perk p{margin-top:8px;font-size:14px;color:var(--dim)}

/* 影讯 */
.mbnuqbc-news{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.mbnuqbc-newsitem{display:flex;gap:14px;padding:13px;border:1px solid var(--edge);border-radius:14px;background:var(--bg2);transition:border-color .2s}
.mbnuqbc-newsitem:hover{border-color:rgba(246,183,60,.4)}
.mbnuqbc-newsitem img{width:104px;height:70px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.mbnuqbc-newsitem b{font-size:14.5px;font-weight:600;line-height:1.5}
.mbnuqbc-newsitem em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--dim)}

/* 保障条 */
.mbnuqbc-guard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.mbnuqbc-guarditem{padding:16px;border-radius:12px;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02)}
.mbnuqbc-guarditem b{display:block;font-size:15px;color:var(--g1)}
.mbnuqbc-guarditem p{margin-top:6px;font-size:14px;color:var(--dim)}

/* 口碑 */
.mbnuqbc-voice{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.mbnuqbc-quote{padding:20px;border-radius:16px;border:1px solid var(--edge);background:var(--bg2)}
.mbnuqbc-quote p{font-size:14.5px;color:#cbd5e4}
.mbnuqbc-quote b{display:block;margin-top:12px;font-size:13.5px;color:var(--g1);font-weight:600}

/* 问答 */
.mbnuqbc-qa{margin-top:12px;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;background:var(--bg2)}
.mbnuqbc-qa summary{cursor:pointer;font-size:15.5px;font-weight:600;list-style:none}
.mbnuqbc-qa summary::-webkit-details-marker{display:none}
.mbnuqbc-qa p{margin-top:10px;font-size:14px;color:var(--dim)}

/* 收口 */
.mbnuqbc-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:clamp(24px,4vw,38px);border-radius:20px;border:1px solid rgba(246,183,60,.32);background:linear-gradient(120deg,rgba(246,183,60,.15),rgba(17,23,34,.94))}
.mbnuqbc-cta h2{font-size:clamp(20px,2.5vw,26px)}
.mbnuqbc-cta p{margin-top:8px;font-size:14.5px;color:var(--dim);max-width:60ch}

/* 页脚 */
.mbnuqbc-foot{margin-top:0;padding:46px 0 22px;background:#080b11;border-top:1px solid var(--edge)}
.mbnuqbc-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px}
.mbnuqbc-fcol b{display:block;font-size:15px;margin-bottom:12px}
.mbnuqbc-fcol a,.mbnuqbc-fcol span{display:flex;align-items:center;min-height:32px;font-size:14px;color:var(--dim);transition:color .2s}
.mbnuqbc-fcol a:hover{color:var(--g1)}
.mbnuqbc-fcol p{font-size:14px;color:var(--dim);max-width:34ch}
.mbnuqbc-copy{margin-top:30px;padding-top:16px;border-top:1px solid var(--edge);font-size:13.5px;color:#6f7d92;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}

@media (max-width:1024px){
.mbnuqbc-herowrap{grid-template-columns:1fr}
.mbnuqbc-grid{grid-template-columns:repeat(3,1fr)}
.mbnuqbc-chans{grid-template-columns:repeat(2,1fr)}
.mbnuqbc-perks{grid-template-columns:repeat(2,1fr)}
.mbnuqbc-guard{grid-template-columns:repeat(2,1fr)}
.mbnuqbc-voice{grid-template-columns:1fr}
.mbnuqbc-fgrid{grid-template-columns:1fr 1fr}
.mbnuqbc-story{grid-template-columns:1fr}
}
@media (max-width:768px){
.mbnuqbc-top .mbnuqbc-shell{gap:6px}
.mbnuqbc-logo{width:100%}
.mbnuqbc-nav{margin-left:0;width:100%;gap:2px}
.mbnuqbc-nav a{padding:0 11px;font-size:14px}
.mbnuqbc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.mbnuqbc-list{grid-template-columns:1fr}
.mbnuqbc-news{grid-template-columns:1fr}
.mbnuqbc-cta{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
.mbnuqbc-shell{width:94vw}
.mbnuqbc-herotext h1{font-size:25px}
.mbnuqbc-chans{grid-template-columns:1fr}
.mbnuqbc-perks{grid-template-columns:1fr}
.mbnuqbc-guard{grid-template-columns:1fr}
.mbnuqbc-fgrid{grid-template-columns:1fr}
.mbnuqbc-newsitem img{width:88px;height:62px}
.mbnuqbc-btn{width:100%}
.mbnuqbc-heroact{width:100%}
}