/* roulang page: index */
:root{
  --ink:#17202a;
  --muted:#69737d;
  --paper:#f7f8f6;
  --white:#fff;
  --line:#e4e8e5;
  --red:#d94b43;
  --red-dark:#b63a36;
  --teal:#247d78;
  --gold:#e6a74b;
  --shadow:0 18px 50px rgba(24,36,35,.09);
  --radius:18px;
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.topline{height:4px;background:linear-gradient(90deg,var(--red),var(--gold),var(--teal))}
.header{position:sticky;top:0;z-index:20;background:rgba(247,248,246,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:34px}
.logo{font-size:20px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.logo i{display:inline-block;width:9px;height:9px;background:var(--red);border-radius:50%;margin:0 8px 2px 0}
.navlinks{display:flex;align-items:center;gap:8px;margin-left:auto}
.navlinks a{padding:9px 14px;border-radius:10px;color:var(--muted);font-size:14px;transition:.2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink);background:#e9eeeb}
.navtools{display:flex;align-items:center;gap:12px;margin-left:12px}
.status{font-size:12px;color:var(--teal);display:flex;align-items:center;gap:6px}
.status:before{content:"";width:7px;height:7px;background:#48aa82;border-radius:50%}
.nav-cta,.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;font-weight:700;transition:.2s}
.nav-cta{background:var(--ink);color:#fff;padding:11px 17px;font-size:13px}
.nav-cta:hover{background:var(--red)}
.menu{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;color:var(--ink)}
.hero{padding:74px 0 54px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-130px;top:-100px;width:470px;height:470px;border:1px solid #e6c9a1;border-radius:50%;opacity:.45}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center;position:relative;z-index:1}
.kicker{color:var(--red);font-weight:800;font-size:13px;letter-spacing:2px;margin-bottom:18px}
h1{font-size:clamp(38px,5vw,68px);line-height:1.13;letter-spacing:-1px;max-width:700px}
.hero-copy{font-size:17px;color:var(--muted);max-width:640px;margin:24px 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:13px 21px;font-size:14px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 22px rgba(217,75,67,.2)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}
.btn-light{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-light:hover{border-color:var(--teal);color:var(--teal)}
.hero-panel{background:var(--ink);color:#fff;border-radius:24px;padding:28px;box-shadow:var(--shadow);min-height:340px;position:relative;overflow:hidden}
.hero-panel img{height:190px;border-radius:14px;opacity:.82}
.panel-row{display:flex;justify-content:space-between;align-items:end;margin-top:20px;gap:20px}
.panel-row strong{display:block;font-size:23px;line-height:1.2}
.panel-row span{font-size:12px;color:#b6c3c0}
.hero-note{font-size:13px;color:#cfdbd8;margin-top:10px}
.trust{display:flex;flex-wrap:wrap;gap:24px;border-top:1px solid var(--line);padding-top:22px;margin-top:38px;color:var(--muted);font-size:13px}
.trust b{color:var(--ink);margin-right:5px}
.section{padding:82px 0}
.section-alt{background:#edf2ef}
.section-dark{background:var(--ink);color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}
.eyebrow{font-size:12px;color:var(--red);font-weight:800;letter-spacing:1.8px;margin-bottom:8px}
.section-dark .eyebrow{color:#f1b85d}
h2{font-size:clamp(27px,3vw,42px);line-height:1.25;letter-spacing:-.5px}
.section-intro{max-width:560px;color:var(--muted);font-size:15px}
.section-dark .section-intro{color:#b6c3c0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.topic{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;min-height:176px;transition:.25s}
.topic:hover,.content-card:hover,.case:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d4ded9}
.topic .num{font-size:12px;color:var(--red);font-weight:800}
.topic h3{font-size:20px;margin:18px 0 8px}
.topic p,.content-card p,.case p{font-size:14px;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#35514d;border:1px solid #35514d;margin-top:34px}
.metric{padding:26px;background:var(--ink)}
.metric strong{font-size:32px;color:#f1b85d;display:block}
.metric span{font-size:13px;color:#b6c3c0}
.feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}
.feature-image{height:370px;border-radius:20px;overflow:hidden;position:relative}
.feature-image img{height:100%}
.feature-image:after{content:"精选内容";position:absolute;left:18px;top:18px;background:var(--red);color:#fff;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:700}
.feature-copy h3{font-size:29px;line-height:1.35;margin-bottom:14px}
.feature-copy p{color:var(--muted);margin-bottom:22px}
.list{display:grid;gap:13px}
.list-item{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:13px}
.list-item b{color:var(--red);font-size:13px;min-width:30px}
.list-item span{font-size:14px}
.card-image{height:188px;border-radius:14px 14px 0 0}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.card-body{padding:19px}
.card-meta{display:flex;justify-content:space-between;color:var(--red);font-size:12px;font-weight:700;margin-bottom:8px}
.card-body h3{font-size:19px;line-height:1.4;margin-bottom:8px}
.rank-list{display:grid;gap:0;border-top:1px solid #35514d}
.rank{display:flex;align-items:center;gap:17px;padding:17px 0;border-bottom:1px solid #35514d}
.rank-num{font-size:24px;color:#f1b85d;font-weight:800;width:30px}
.rank h3{font-size:16px;margin-bottom:2px}
.rank p{font-size:13px;color:#aebfbb}
.case{background:#fff;color:var(--ink);padding:25px;border-radius:var(--radius);transition:.25s}
.case-tag{display:inline-block;color:var(--teal);font-size:12px;font-weight:800;margin-bottom:17px}
.case h3{font-size:20px;margin-bottom:10px}
.quote{font-size:15px;line-height:1.8;margin-bottom:19px}
.case-foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{position:relative;padding-left:21px;border-left:2px solid #e4c17e}
.step strong{display:block;color:var(--gold);font-size:13px;margin-bottom:8px}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:14px;color:var(--muted)}
.news-list{display:grid;gap:0;border-top:1px solid var(--line)}
.news{display:grid;grid-template-columns:100px 1fr 90px;gap:22px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}
.news time{font-size:13px;color:var(--red);font-weight:700}
.news h3{font-size:17px}
.news p{font-size:13px;color:var(--muted);margin-top:3px}
.news a{font-size:13px;color:var(--teal);text-align:right}
.cta{padding:75px 0;background:#e9d8be}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{max-width:670px}
.cta p{color:#675d52;margin-top:10px;max-width:650px}
.footer{background:#17202a;color:#aebfbb;padding:46px 0 22px}
.footer-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:35px;border-bottom:1px solid #30403d}
.footer-brand{color:#fff;font-weight:800;font-size:20px}
.footer-brand p{color:#9aa9a6;font-size:13px;font-weight:400;margin-top:10px;max-width:330px}
.footer-links{display:flex;gap:50px}
.footer-links h4{color:#fff;font-size:13px;margin-bottom:12px}
.footer-links a{display:block;font-size:13px;margin:7px 0;transition:.2s}
.footer-links a:hover{color:#f1b85d}
.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px}
:focus-visible{outline:3px solid rgba(36,125,120,.35);outline-offset:3px}
@media(max-width:1024px){
  .hero-grid{gap:30px}.grid-4{grid-template-columns:repeat(2,1fr)}
  .feature{gap:30px}.footer-links{gap:25px}
}
@media(max-width:768px){
  .container{width:min(100% - 28px,var(--container))}
  .nav{height:66px}.navlinks,.navtools{display:none}.menu{display:block;margin-left:auto}
  .hero{padding:55px 0 35px}.hero-grid{grid-template-columns:1fr}.hero-panel{min-height:auto}
  .section{padding:60px 0}.section-head{display:block}.section-intro{margin-top:12px}
  .grid-3{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}.feature-image{height:280px}
  .timeline{grid-template-columns:1fr;gap:22px}.cta-box{display:block}.cta .btn{margin-top:22px}
  .footer-top{display:block}.footer-links{margin-top:30px;flex-wrap:wrap}
}
@media(max-width:520px){
  h1{font-size:39px}.hero-copy{font-size:15px}.actions .btn{width:100%}
  .grid-4,.grid-3{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}
  .metric{padding:20px 15px}.metric strong{font-size:26px}.news{grid-template-columns:1fr;gap:5px}.news a{text-align:left}
  .copyright{display:block}.copyright span{display:block;margin-top:8px}
}

/* roulang page: category1 */
:root{
 --ink:#17202a;
 --muted:#69737d;
 --paper:#f7f8f6;
 --white:#fff;
 --line:#e4e8e5;
 --red:#d94b43;
 --red-dark:#b63a36;
 --teal:#247d78;
 --gold:#e6a74b;
 --shadow:0 18px 50px rgba(24,36,35,.09);
 --radius:18px;
 --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.header{position:sticky;top:0;z-index:20;background:rgba(247,248,246,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;gap:34px}
.logo{font-size:20px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.logo i{display:inline-block;width:9px;height:9px;background:var(--red);border-radius:50%;margin:0 8px 2px 0}
.navlinks{display:flex;align-items:center;gap:8px;margin-left:auto}
.navlinks a{padding:9px 14px;border-radius:10px;color:var(--muted);font-size:14px;transition:.2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink);background:#e9eeeb}
.navtools{display:flex;align-items:center;gap:12px;margin-left:12px}
.status{font-size:12px;color:var(--teal);white-space:nowrap}
.status:before{content:"";display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:50%;margin-right:6px}
.nav-cta,.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;font-weight:700;transition:.2s}
.nav-cta{background:var(--ink);color:#fff;padding:11px 17px;font-size:13px}
.nav-cta:hover{background:var(--red)}
.menu{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;color:var(--ink)}
.hero{padding:72px 0 55px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-130px;top:-120px;width:470px;height:470px;border:1px solid #e6c9a1;border-radius:50%;opacity:.45}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center;position:relative;z-index:1}
.eyebrow{font-size:12px;color:var(--red);font-weight:800;letter-spacing:1.8px;margin-bottom:8px}
h1,h2,h3,h4,p{margin-top:0}
h1{font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:0;margin-bottom:20px}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;margin-bottom:12px}
h3{line-height:1.35}
.hero-copy{font-size:17px;color:var(--muted);max-width:650px;margin:24px 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:13px 21px;font-size:14px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 22px rgba(217,75,67,.2)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}
.btn-light{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-light:hover{border-color:var(--teal);color:var(--teal)}
.hero-panel{background:var(--ink);color:#fff;border-radius:24px;padding:28px;box-shadow:var(--shadow);min-height:360px;position:relative;overflow:hidden}
.hero-panel:before{content:"精选专题";position:absolute;right:24px;top:22px;color:#f1b85d;font-size:12px;font-weight:800;letter-spacing:1px}
.hero-panel img{height:205px;border-radius:14px;opacity:.86}
.panel-row{display:flex;justify-content:space-between;align-items:end;margin-top:20px;gap:20px}
.panel-row strong{display:block;font-size:23px;line-height:1.2}
.panel-row span{font-size:12px;color:#b6c3c0}
.hero-note{font-size:13px;color:#cfdbd8;margin-top:10px}
.section{padding:82px 0}
.section-alt{background:#edf2ef}
.section-dark{background:var(--ink);color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}
.section-intro{max-width:560px;color:var(--muted);font-size:15px}
.section-dark .section-intro{color:#b6c3c0}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.topic{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;min-height:185px;transition:.25s}
.topic:hover,.content-card:hover,.place:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d4ded9}
.topic-mark{display:flex;align-items:center;justify-content:space-between;color:var(--red);font-size:13px;font-weight:800;margin-bottom:28px}
.topic-mark b{font-size:27px;color:var(--gold)}
.topic h3{font-size:20px;margin-bottom:8px}
.topic p,.content-card p,.place p{font-size:14px;color:var(--muted);margin-bottom:0}
.feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}
.feature-image{height:370px;border-radius:20px;overflow:hidden;position:relative}
.feature-image img{height:100%}
.feature-image:after{content:"本周专题";position:absolute;left:18px;top:18px;background:var(--red);color:#fff;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:700}
.feature-copy h3{font-size:29px;line-height:1.35;margin-bottom:14px}
.feature-copy p{color:var(--muted);margin-bottom:22px}
.list{display:grid;gap:13px}
.list-item{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:13px}
.list-item b{color:var(--red);font-size:13px;min-width:30px}
.list-item span{font-size:14px}
.region-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.place{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.place img{height:205px}
.place-body{padding:19px}
.place-body h3{margin-bottom:7px;font-size:20px}
.place-body span{font-size:12px;color:var(--red);font-weight:800}
.region-side{display:grid;gap:14px}
.region-side .place{display:grid;grid-template-columns:150px 1fr}
.region-side .place img{height:100%}
.region-side .place-body{padding:16px}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.card-image{height:188px}
.card-body{padding:19px}
.card-meta{display:flex;justify-content:space-between;color:var(--red);font-size:12px;font-weight:700;margin-bottom:8px}
.card-body h3{font-size:19px;line-height:1.4;margin-bottom:8px}
.rank-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.rank-list{display:grid;gap:0;border-top:1px solid #35514d}
.rank-item{display:flex;gap:17px;align-items:center;padding:17px 0;border-bottom:1px solid #35514d}
.rank-no{font-size:22px;color:#f1b85d;font-weight:800;width:30px}
.rank-item strong{display:block;font-size:15px}
.rank-item span{color:#aebfbb;font-size:12px}
.quote{background:#f3e5ce;padding:27px;border-radius:16px;color:#594f44}
.quote p{font-size:21px;line-height:1.5;margin-bottom:18px}
.quote small{color:#8a7661}
.news-list{display:grid;gap:0;border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:90px 1fr auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.news-date{font-size:12px;color:var(--red);font-weight:800}
.news-item h3{font-size:16px;margin:0}
.news-item p{font-size:13px;color:var(--muted);margin:3px 0 0}
.news-arrow{font-size:20px;color:var(--teal)}
.cta{padding:75px 0;background:#e9d8be}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{max-width:670px}
.cta p{color:#675d52;margin-top:10px;max-width:650px}
.footer{background:#17202a;color:#aebfbb;padding:46px 0 22px}
.footer-top{display:flex;justify-content:space-between;gap:40px;padding-bottom:35px;border-bottom:1px solid #30403d}
.footer-brand{color:#fff;font-weight:800;font-size:20px}
.footer-brand + p{color:#9aa9a6;font-size:13px;margin-top:10px;max-width:330px}
.footer-links{display:flex;gap:50px}
.footer-links h4{color:#fff;font-size:13px;margin-bottom:12px}
.footer-links a{display:block;font-size:13px;margin:7px 0;transition:.2s}
.footer-links a:hover{color:#f1b85d}
.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px}
:focus-visible{outline:3px solid rgba(217,75,67,.35);outline-offset:3px}
@media(max-width:1024px){
 .hero-grid{gap:30px}
 .topic-grid{grid-template-columns:repeat(2,1fr)}
 .feature{gap:30px}
 .region-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
 .container{width:min(100% - 28px,var(--container))}
 .nav{height:66px}
 .navlinks,.navtools{display:none}
 .menu{display:block;margin-left:auto}
 .hero{padding:55px 0 35px}
 .hero-grid{grid-template-columns:1fr}
 .hero-panel{min-height:auto}
 .section{padding:60px 0}
 .section-head{display:block}
 .section-intro{margin-top:12px}
 .feature{grid-template-columns:1fr}
 .feature-image{height:280px}
 .content-grid{grid-template-columns:1fr 1fr}
 .rank-wrap{grid-template-columns:1fr}
 .cta-box{display:block}
 .cta .btn{margin-top:22px}
 .footer-top{display:block}
 .footer-links{margin-top:30px;flex-wrap:wrap;gap:28px}
}
@media(max-width:520px){
 h1{font-size:38px}
 .hero-copy{font-size:15px}
 .actions .btn{width:100%}
 .topic-grid,.content-grid{grid-template-columns:1fr}
 .region-side .place{grid-template-columns:110px 1fr}
 .region-side .place img{min-height:145px}
 .news-item{grid-template-columns:1fr auto;gap:4px 12px}
 .news-date{grid-column:1/-1}
 .news-item h3{font-size:15px}
 .copyright{display:block}
 .copyright span{display:block;margin-top:5px}
}