/* roulang page: index */
:root{
  --ywbp-c1:#252a44;
  --ywbp-c2:#df5a34;
  --ywbp-c3:#f7f4ef;
  --ywbp-c4:#1c1e28;
  --ywbp-c5:#6c7080;
  --ywbp-c6:#e4ded5;
  --ywbp-c7:16px;
  --ywbp-c8:0 12px 32px rgba(30,28,26,.10);
  --ywbp-c9:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ywbp-c3);color:var(--ywbp-c4);font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,figcaption{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--ywbp-c2);outline-offset:3px}
.ywbp-container{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}

/* 顶栏 */
.ywbp-top{position:sticky;top:0;z-index:30;background:rgba(247,244,239,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ywbp-c6)}
.ywbp-top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.ywbp-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.ywbp-logo__mark{width:38px;height:38px;border-radius:12px;background:var(--ywbp-c1);color:#fff;display:grid;place-items:center;font-size:17px;box-shadow:0 6px 16px rgba(37,42,68,.28)}
.ywbp-logo__name{font-size:18px;letter-spacing:.5px}
.ywbp-nav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.ywbp-nav::-webkit-scrollbar{display:none}
.ywbp-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:15px;color:var(--ywbp-c5);border-radius:999px;white-space:nowrap;transition:color .2s,background .2s}
.ywbp-nav a:hover{color:var(--ywbp-c4);background:#efe9e0}
.ywbp-nav a.is-on{color:#fff;background:var(--ywbp-c1)}

/* 首屏 */
.ywbp-hero{position:relative;padding:98px 0 92px;color:#fff;text-align:center;background:#111427 url("/assets/images/backpic/back-1.webp") center/cover no-repeat}
.ywbp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,30,.84),rgba(15,17,30,.72) 55%,rgba(15,17,30,.92))}
.ywbp-hero__in{position:relative;z-index:1;max-width:840px;margin:0 auto}
.ywbp-hero__tag{display:inline-block;padding:6px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:13px;letter-spacing:1px;color:#f4e7df}
.ywbp-hero h1{margin:20px 0 0;font-size:clamp(28px,4.4vw,48px);line-height:1.25;letter-spacing:1px}
.ywbp-hero h1 em{font-style:normal;color:#ffb59b}
.ywbp-hero__lead{margin:18px auto 0;max-width:730px;font-size:15px;line-height:1.9;color:#dcd8e2}
.ywbp-hero__note{margin-top:22px;font-size:14px;color:#ffd0c0}
.ywbp-hero__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}
.ywbp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s}
.ywbp-btn--main{background:var(--ywbp-c2);color:#fff;box-shadow:0 10px 24px rgba(223,90,52,.32)}
.ywbp-btn--main:hover{background:#c94a27;transform:translateY(-2px)}
.ywbp-btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.ywbp-btn--ghost:hover{background:rgba(255,255,255,.14)}

/* 板块骨架 */
.ywbp-sec{padding:var(--ywbp-c9) 0;border-top:1px solid var(--ywbp-c6)}
.ywbp-sec--tint{background:#fffdfa}
.ywbp-h2{font-size:clamp(21px,2.5vw,30px);line-height:1.4;letter-spacing:.5px}
.ywbp-sub{margin-top:12px;max-width:820px;font-size:15px;color:var(--ywbp-c5)}

/* 功能亮点 */
.ywbp-points{display:grid;gap:16px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ywbp-points li{padding:24px 22px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7);transition:transform .2s,box-shadow .2s}
.ywbp-points li:hover{transform:translateY(-3px);box-shadow:var(--ywbp-c8)}
.ywbp-points li::before{content:"";display:block;width:34px;height:4px;border-radius:2px;background:var(--ywbp-c2);margin-bottom:14px}
.ywbp-points h3{font-size:17px;color:var(--ywbp-c1);margin-bottom:8px}
.ywbp-points p{font-size:14px;color:var(--ywbp-c5)}

/* 类型专区 */
.ywbp-cats{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ywbp-cats li{padding:20px 22px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7)}
.ywbp-cats span{display:inline-block;font-size:14px;font-weight:700;color:#fff;background:var(--ywbp-c1);padding:4px 13px;border-radius:999px;margin-bottom:10px}
.ywbp-cats p{font-size:14px;color:var(--ywbp-c5)}

/* 上新节奏 */
.ywbp-steps{display:grid;gap:16px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.ywbp-steps li{padding:22px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7)}
.ywbp-steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-size:13px;letter-spacing:2px;color:var(--ywbp-c2);font-weight:700;margin-bottom:8px}
.ywbp-steps h3{font-size:16px;margin-bottom:6px}
.ywbp-steps p{font-size:14px;color:var(--ywbp-c5)}

/* 片单卡片 */
.ywbp-grid{display:grid;gap:18px;margin-top:30px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ywbp-film{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7);overflow:hidden;transition:transform .2s,box-shadow .2s}
.ywbp-film:hover{transform:translateY(-4px);box-shadow:var(--ywbp-c8)}
.ywbp-thumb{position:relative;aspect-ratio:3/4;background:#ded9d1;overflow:hidden}
.ywbp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ywbp-film:hover .ywbp-thumb img{transform:scale(1.05)}
.ywbp-badge{position:absolute;top:9px;left:9px;background:rgba(20,20,28,.74);color:#fff;font-size:12px;line-height:1.6;padding:2px 9px;border-radius:999px}
.ywbp-score{position:absolute;right:9px;bottom:9px;background:var(--ywbp-c2);color:#fff;font-size:13px;font-weight:700;padding:1px 8px;border-radius:8px}
.ywbp-film__body{padding:12px 14px 16px}
.ywbp-film__title{font-size:15px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ywbp-film__meta{margin-top:4px;font-size:13px;color:var(--ywbp-c5)}

/* 口碑 */
.ywbp-voices{display:grid;gap:16px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ywbp-voice{padding:24px 22px;background:#fff;border:1px solid var(--ywbp-c6);border-left:4px solid var(--ywbp-c2);border-radius:var(--ywbp-c7)}
.ywbp-voice blockquote{font-size:15px}
.ywbp-voice figcaption{margin-top:12px;font-size:13px;color:var(--ywbp-c5)}

/* 权益 */
.ywbp-plans{display:grid;gap:16px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ywbp-plan{display:flex;flex-direction:column;padding:26px 22px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7)}
.ywbp-plan--hi{background:var(--ywbp-c1);border-color:var(--ywbp-c1);color:#fff;box-shadow:var(--ywbp-c8)}
.ywbp-plan h3{font-size:18px}
.ywbp-plan p{margin-top:6px;font-size:13px;color:var(--ywbp-c5)}
.ywbp-plan--hi p{color:#c9cbe0}
.ywbp-plan ul{margin-top:16px;padding-top:16px;border-top:1px dashed var(--ywbp-c6);display:grid;gap:10px;font-size:14px}
.ywbp-plan--hi ul{border-color:rgba(255,255,255,.22)}
.ywbp-plan li::before{content:"·";color:var(--ywbp-c2);font-weight:700;margin-right:8px}

/* 排行 */
.ywbp-rank{display:grid;gap:10px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ywbp-rank li{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.ywbp-rank li:hover{border-color:#d5cec2;box-shadow:0 6px 18px rgba(30,28,26,.06)}
.ywbp-rank__no{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#f0eae1;color:var(--ywbp-c1);display:grid;place-items:center;font-size:14px;font-weight:700}
.ywbp-rank li:nth-child(-n+3) .ywbp-rank__no{background:var(--ywbp-c2);color:#fff}
.ywbp-rank__name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ywbp-rank__tag{font-size:12px;color:var(--ywbp-c5);border:1px solid var(--ywbp-c6);border-radius:999px;padding:1px 9px;white-space:nowrap}
.ywbp-rank__score{font-size:14px;font-weight:700;color:var(--ywbp-c2)}

/* 专题 */
.ywbp-sets{display:grid;gap:18px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ywbp-set{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7);overflow:hidden;transition:transform .2s,box-shadow .2s}
.ywbp-set:hover{transform:translateY(-3px);box-shadow:var(--ywbp-c8)}
.ywbp-set img{width:100%;height:190px;object-fit:cover}
.ywbp-set__body{padding:20px 22px 24px}
.ywbp-set__body h3{font-size:18px;color:var(--ywbp-c1)}
.ywbp-set__body p{margin-top:8px;font-size:14px;color:var(--ywbp-c5)}

/* 问答 */
.ywbp-qa{margin-top:28px;display:grid;gap:12px}
.ywbp-q{background:#fff;border:1px solid var(--ywbp-c6);border-radius:12px;padding:0 20px}
.ywbp-q summary{display:flex;align-items:center;min-height:54px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.ywbp-q summary::-webkit-details-marker{display:none}
.ywbp-q summary::after{content:"+";margin-left:auto;color:var(--ywbp-c2);font-size:20px}
.ywbp-q[open] summary::after{content:"—"}
.ywbp-q p{padding:0 0 18px;font-size:14px;color:var(--ywbp-c5)}

/* 资讯 */
.ywbp-news{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.ywbp-news li{display:flex;align-items:center;gap:14px;padding:12px;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7)}
.ywbp-news img{flex:0 0 auto;width:112px;height:76px;object-fit:cover;border-radius:10px}
.ywbp-news h3{font-size:15px;line-height:1.5}
.ywbp-news time{display:block;margin-top:6px;font-size:13px;color:var(--ywbp-c5)}

/* 多端 */
.ywbp-ends{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ywbp-end{padding:24px 18px;text-align:center;background:#fff;border:1px solid var(--ywbp-c6);border-radius:var(--ywbp-c7)}
.ywbp-end b{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:14px;background:#f3ece3;color:var(--ywbp-c1);font-size:13px;letter-spacing:.5px}
.ywbp-end h3{font-size:16px}
.ywbp-end p{margin-top:6px;font-size:13px;color:var(--ywbp-c5)}
.ywbp-cta{margin-top:34px;padding:30px 26px;border-radius:var(--ywbp-c7);background:var(--ywbp-c1);color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ywbp-cta p{font-size:17px;font-weight:600}
.ywbp-cta span{display:block;margin-top:6px;font-size:13px;font-weight:400;color:#c5c8de}

/* 页脚 */
.ywbp-foot{position:relative;padding:60px 0 0;color:#d9d6e2;background:#12141f url("/assets/images/backpic/back-2.webp") center/cover no-repeat}
.ywbp-foot::before{content:"";position:absolute;inset:0;background:rgba(14,16,26,.9)}
.ywbp-foot__in{position:relative;z-index:1;display:grid;gap:28px;grid-template-columns:1.6fr 1fr 1fr 1fr;padding-bottom:36px}
.ywbp-foot__name{font-size:18px;font-weight:700;color:#fff}
.ywbp-foot__desc{margin-top:10px;max-width:340px;font-size:14px;color:#a9a7b8}
.ywbp-foot__col h4{margin-bottom:12px;font-size:15px;color:#fff}
.ywbp-foot__col a{display:flex;align-items:center;min-height:38px;font-size:14px;color:#a9a7b8;transition:color .2s}
.ywbp-foot__col a:hover{color:#fff}
.ywbp-foot__bar{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:18px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8f8d9e;text-align:center}

@media (max-width:1024px){
  :root{--ywbp-c9:58px}
  .ywbp-hero{padding:74px 0 68px}
  .ywbp-foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .ywbp-top__in{flex-wrap:wrap;padding:8px 0}
  .ywbp-nav{width:100%;order:3;border-top:1px solid var(--ywbp-c6);padding-top:6px}
  .ywbp-hero{padding:60px 0 56px}
  .ywbp-hero__lead{font-size:14px}
  .ywbp-cta{flex-direction:column;align-items:flex-start}
  .ywbp-set img{height:170px}
}
@media (max-width:520px){
  body{font-size:15px}
  .ywbp-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ywbp-news img{width:88px;height:66px}
  .ywbp-foot__in{grid-template-columns:1fr}
  .ywbp-hero h1{letter-spacing:0}
  .ywbp-cta{padding:24px 20px}
}