/* roulang page: index */
:root{--navy:#11233f;--blue:#246bce;--cyan:#21a7c9;--ink:#17243b;--muted:#6f7d91;--paper:#f5f8fc;--white:#fff;--line:#e3eaf3;--soft:#eef5ff;--gold:#e2a63b;--radius:18px;--shadow:0 16px 42px rgba(25,53,92,.10);--ease:all .25s ease}
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
        a{text-decoration:none;color:inherit}
        img{display:block;width:100%;object-fit:cover}
        button,input{font:inherit}
        button{cursor:pointer;border:0}
        .container{width:min(1180px,calc(100% - 40px));margin:auto}
        .topbar{height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
        .nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
        .brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--navy);white-space:nowrap}
        .brand-mark{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:17px;box-shadow:0 8px 18px rgba(17,35,63,.22)}
        .brand-name{font-size:16px;letter-spacing:0}
        .nav-list{display:flex;align-items:center;gap:4px;list-style:none}
        .nav-list a{display:block;padding:9px 14px;border-radius:10px;color:#617087;transition:var(--ease)}
        .nav-list a:hover,.nav-list a.active{background:var(--soft);color:var(--blue)}
        .nav-tag{padding:8px 13px;border:1px solid #d7e4f4;border-radius:10px;color:var(--blue);font-size:13px}
        .menu-btn{display:none;background:transparent;color:var(--navy);font-size:24px}
        .hero{padding:54px 0 38px;background:#fff}
        .hero-grid{display:grid;grid-template-columns:1.45fr .75fr .75fr;grid-template-rows:auto auto;gap:16px}
        .hero-main{grid-row:span 2;min-height:430px;border-radius:24px;padding:46px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(9,29,57,.95),rgba(23,80,132,.72)),url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1200&q=85") center/cover;color:#fff}
        .hero-main:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(4,13,27,.65))}
        .hero-main>*{position:relative;z-index:1}
        .eyebrow{display:inline-flex;align-items:center;gap:7px;color:#9cdcf2;font-size:13px;font-weight:700;margin-bottom:14px}
        .eyebrow:before{content:"";width:24px;height:2px;background:var(--cyan)}
        h1{font-size:clamp(34px,4vw,58px);line-height:1.15;letter-spacing:0;margin-bottom:18px;max-width:690px}
        h1 em{font-style:normal;color:#74d7ee}
        .hero-copy{font-size:16px;color:#d8e8f6;max-width:680px;line-height:1.9}
        .hero-actions{display:flex;gap:12px;margin-top:27px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 19px;border-radius:11px;font-weight:700;transition:var(--ease);border:1px solid transparent}
        .btn-primary{background:var(--cyan);color:#06263a;box-shadow:0 8px 20px rgba(33,167,201,.24)}
        .btn-primary:hover{background:#55c9e3;transform:translateY(-2px)}
        .btn-light{background:#fff;color:var(--navy)}
        .btn-light:hover{background:#e9f5fa}
        .hero-mini{border-radius:20px;background:var(--soft);padding:25px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #dceaf8}
        .hero-mini strong{display:block;font-size:23px;color:var(--navy);margin:14px 0 4px}
        .hero-mini p{font-size:13px;color:var(--muted)}
        .mini-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#d4f3f8;color:#087e9e;font-weight:800}
        .hero-strip{grid-column:2/4;border-radius:18px;background:var(--navy);color:#fff;padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .hero-strip b{font-size:15px}.hero-strip span{color:#b9cadf;font-size:13px}
        main section{padding:76px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}
        .section-head h2{font-size:30px;line-height:1.25;color:var(--navy);letter-spacing:0}
        .section-head p{max-width:610px;color:var(--muted);font-size:14px}
        .section-label{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1px;margin-bottom:8px}
        .story{background:#fff}
        .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
        .story-image{height:340px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
        .story-image img{height:100%}
        .story-text p{color:var(--muted);margin-bottom:20px}
        .point-list{list-style:none;display:grid;gap:13px}
        .point-list li{display:flex;gap:12px;align-items:start}
        .point-list i{font-style:normal;color:var(--blue);font-weight:800;background:var(--soft);border-radius:8px;padding:1px 7px}
        .channels{background:#f8fbff}
        .channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
        .channel{padding:22px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:var(--ease)}
        .channel:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#bfd8f3}
        .channel h3{font-size:17px;color:var(--navy);margin-bottom:7px}
        .channel p{font-size:13px;color:var(--muted)}
        .content-section{background:#fff}
        .content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .content-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:var(--ease)}
        .content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
        .cover{height:220px;position:relative;overflow:hidden;background:#dce6f0}
        .cover img{height:100%;transition:transform .4s ease}
        .content-card:hover .cover img{transform:scale(1.05)}
        .badge{position:absolute;left:12px;top:12px;background:rgba(17,35,63,.88);color:#fff;border-radius:7px;padding:3px 8px;font-size:11px;font-weight:700}
        .card-body{padding:15px}
        .card-title{font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:7px;color:var(--muted);font-size:12px}
        .score{color:var(--gold);font-weight:800}
        .popular{background:var(--paper)}
        .popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .popular-card{min-height:230px;position:relative;border-radius:18px;overflow:hidden;background:#18304d;color:#fff}
        .popular-card img{height:100%;position:absolute;inset:0}
        .popular-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(5,16,30,.95))}
        .popular-info{position:absolute;z-index:1;bottom:20px;left:20px;right:20px}
        .popular-info h3{font-size:20px;margin-bottom:5px}
        .popular-info p{font-size:12px;color:#c6d5e5}
        .benefits{background:#fff}
        .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        .benefit{padding:25px;border-top:3px solid var(--cyan);background:#f8fbff;border-radius:14px}
        .benefit b{display:block;font-size:17px;color:var(--navy);margin-bottom:8px}
        .benefit p{font-size:13px;color:var(--muted)}
        .ranking{background:var(--navy);color:#fff}
        .ranking .section-head h2{color:#fff}.ranking .section-head p{color:#b9c8d9}.ranking .section-label{color:#74d7ee}
        .rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 38px}
        .rank-item{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
        .rank-no{width:30px;color:#77d7ec;font-size:18px;font-weight:800}
        .rank-info{flex:1}.rank-info b{display:block}.rank-info span{color:#a9bdd0;font-size:12px}
        .rank-hot{font-size:12px;color:#a9bdd0}.rank-score{color:#f2c25f;font-weight:800}
        .news{background:#f8fbff}
        .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .news-item{display:grid;grid-template-columns:110px 1fr;gap:15px;align-items:center;background:#fff;padding:12px;border:1px solid var(--line);border-radius:14px;transition:var(--ease)}
        .news-item:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
        .news-item img{height:82px;border-radius:10px}
        .news-item h3{font-size:15px;line-height:1.45;color:var(--navy)}
        .news-item time{display:block;color:var(--muted);font-size:12px;margin-top:5px}
        .assurance{background:#fff}
        .assurance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
        .assurance-box{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 25px rgba(25,53,92,.05)}
        .assurance-box strong{display:block;color:var(--navy);font-size:18px;margin-bottom:8px}.assurance-box p{color:var(--muted);font-size:13px}
        .voices{background:#f8fbff}
        .voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .voice{padding:26px;background:#fff;border-radius:16px;border:1px solid var(--line)}
        .voice p{color:#52647c;font-size:14px;margin-bottom:17px}.voice b{color:var(--navy);font-size:13px}
        .entry{background:linear-gradient(115deg,#eaf7fb,#edf4ff)}
        .entry-box{display:flex;justify-content:space-between;align-items:center;gap:25px}
        .entry h2{color:var(--navy);font-size:30px}.entry p{color:var(--muted);max-width:650px;margin-top:8px}
        .faq{background:#fff}
        .faq-list{max-width:900px;margin:auto;display:grid;gap:11px}
        details{border:1px solid var(--line);border-radius:13px;padding:17px 20px;background:#fbfdff}
        summary{font-weight:800;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
        summary:after{content:"+";color:var(--blue);font-size:20px;line-height:1}
        details[open] summary:after{content:"−"}
        details p{color:var(--muted);font-size:14px;padding-top:12px;max-width:800px}
        footer{background:#0c1b31;color:#b5c5d8;padding:52px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
        footer .brand{color:#fff;margin-bottom:15px}.footer-desc{font-size:13px;max-width:280px;color:#91a5bd}
        footer h3{color:#fff;font-size:14px;margin-bottom:14px}footer ul{list-style:none;display:grid;gap:8px}footer li,footer a{font-size:13px;color:#91a5bd}footer a:hover{color:#74d7ee}
        .copyright{padding-top:20px;font-size:12px;color:#71879f;display:flex;justify-content:space-between;gap:20px}
        :focus-visible{outline:3px solid rgba(33,167,201,.45);outline-offset:3px}
        @media(max-width:1024px){.hero-grid{grid-template-columns:1fr 1fr}.hero-main{grid-row:span 1;grid-column:span 2}.hero-strip{grid-column:1/3}.channel-grid{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:repeat(3,1fr)}.cover{height:200px}.benefit-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.container{width:min(100% - 30px,620px)}.topbar{height:68px}.menu-btn{display:block}.nav-list{display:none;position:absolute;left:15px;right:15px;top:76px;padding:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;flex-direction:column;align-items:stretch}.nav-list.open{display:flex}.nav-list a{padding:11px 14px}.nav-tag{display:none}.hero{padding-top:30px}.hero-grid{display:flex;flex-direction:column}.hero-main{min-height:460px;padding:30px 25px}.hero-strip{align-items:flex-start;flex-direction:column}.story-grid{grid-template-columns:1fr;gap:25px}.story-image{height:260px}.section-head{display:block}.section-head p{margin-top:10px}.channel-grid,.content-grid{grid-template-columns:repeat(2,1fr)}.cover{height:190px}.popular-grid,.news-grid,.assurance-grid,.voice-grid{grid-template-columns:1fr 1fr}.rank-grid{grid-template-columns:1fr}.entry-box{display:block}.entry .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}}
        @media(max-width:520px){h1{font-size:35px}.hero-copy{font-size:14px}.hero-actions .btn{flex:1}.channel-grid,.content-grid,.benefit-grid,.popular-grid,.news-grid,.assurance-grid,.voice-grid{grid-template-columns:1fr}.content-grid .cover{height:240px}.news-item{grid-template-columns:95px 1fr}.news-item img{height:76px}.section-head h2,.entry h2{font-size:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.copyright{display:block}.copyright span{display:block;margin-top:5px}}