/* roulang page: index */
:root{
--nv-ink:#14161d;
--nv-ink2:#3d424e;
--nv-mute:#6f7583;
--nv-bg:#f7f6f3;
--nv-card:#ffffff;
--nv-line:#e4e2dc;
--nv-brand:#ea4a3c;
--nv-brand-d:#c5342a;
--nv-gold:#f0a92b;
--nv-dark:#12141b;
--nv-r:14px;
--nv-sh:0 12px 30px rgba(20,22,29,.09);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nv-bg);color:var(--nv-ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
input,button{font:inherit}
.vgcdok-wrap{width:min(1180px,100% - 36px);margin-inline:auto}

/* 顶栏 */
.vgcdok-top{position:sticky;top:0;z-index:60;background:rgba(247,246,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--nv-line)}
.vgcdok-top .vgcdok-wrap{display:flex;align-items:center;gap:18px;padding:8px 0;min-height:64px}
.vgcdok-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;flex:0 0 auto;min-height:44px;letter-spacing:.01em}
.vgcdok-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--nv-brand),var(--nv-gold));color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;flex:0 0 auto}
.vgcdok-nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.vgcdok-nav::-webkit-scrollbar{display:none}
.vgcdok-nav a{display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:9px;font-size:15px;color:var(--nv-ink2);white-space:nowrap;transition:background .2s,color .2s}
.vgcdok-nav a:hover,.vgcdok-nav a:focus-visible{background:#eceae4;color:var(--nv-brand)}
.vgcdok-nav a:focus-visible{outline:2px solid var(--nv-brand);outline-offset:1px}

/* 首屏 */
.vgcdok-hero{position:relative;overflow:hidden;background:var(--nv-dark);color:#fff;isolation:isolate}
.vgcdok-hero-bg{position:absolute;top:0;right:0;width:56%;height:100%;object-fit:cover;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.58;z-index:-2}
.vgcdok-hero::before{content:"";position:absolute;top:-28%;right:21%;width:24%;height:168%;background:linear-gradient(180deg,rgba(234,74,60,.92),rgba(234,74,60,0));transform:rotate(15deg);z-index:-1;pointer-events:none}
.vgcdok-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nv-dark) 0%,rgba(18,20,27,.93) 40%,rgba(18,20,27,.34) 100%);z-index:-1;pointer-events:none}
.vgcdok-hero .vgcdok-wrap{position:relative;padding:74px 0 84px}
.vgcdok-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:var(--nv-gold);font-weight:700;border:1px solid rgba(240,169,43,.45);border-radius:999px;padding:5px 14px;max-width:620px}
.vgcdok-hero h1{font-size:clamp(30px,5.2vw,54px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:16px 0 0;max-width:660px}
.vgcdok-em{color:#ffcf5c;position:relative;padding:0 2px}
.vgcdok-em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.12em;background:rgba(255,207,92,.32);border-radius:2px}
.vgcdok-hero-sub{margin-top:14px;font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.86);font-weight:600;max-width:620px}
.vgcdok-hero-txt{margin-top:14px;font-size:15.5px;line-height:1.92;color:rgba(255,255,255,.74);max-width:620px}
.vgcdok-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;margin-top:26px;border-radius:12px;background:var(--nv-brand);color:#fff;font-weight:700;font-size:16px;box-shadow:0 12px 26px rgba(234,74,60,.34);transition:transform .2s,background .2s}
.vgcdok-btn:hover{background:var(--nv-brand-d);transform:translateY(-2px)}
.vgcdok-btn:focus-visible{outline:3px solid var(--nv-gold);outline-offset:3px}

/* 板块 */
.vgcdok-sec{padding:62px 0}
.vgcdok-tint{background:#fff;border-block:1px solid var(--nv-line)}
.vgcdok-head{max-width:730px;margin-bottom:30px}
.vgcdok-head h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.01em;line-height:1.35}
.vgcdok-head p{margin-top:10px;font-size:15px;line-height:1.88;color:var(--nv-mute)}

/* 人群 */
.vgcdok-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vgcdok-who li{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r);padding:20px 20px 22px;transition:box-shadow .25s,transform .25s}
.vgcdok-who li:hover{transform:translateY(-3px);box-shadow:var(--nv-sh)}
.vgcdok-who b{display:block;font-size:15.5px;font-weight:700}
.vgcdok-who p{margin-top:8px;font-size:14px;line-height:1.75;color:var(--nv-mute)}

/* 对味 */
.vgcdok-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vgcdok-split ul{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r);padding:22px 24px}
.vgcdok-split h3{font-size:16px;font-weight:700;margin-bottom:10px}
.vgcdok-split li{position:relative;padding:7px 0 7px 20px;font-size:14.5px;color:var(--nv-ink2);line-height:1.7}
.vgcdok-split li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:3px;background:var(--nv-brand)}
.vgcdok-split .vgcdok-no li::before{background:#c9c6be}

/* 口味 */
.vgcdok-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vgcdok-pick{position:relative;overflow:hidden;background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r);padding:26px 22px 24px}
.vgcdok-pick::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--nv-brand),var(--nv-gold))}
.vgcdok-pick h3{font-size:16.5px;font-weight:800}
.vgcdok-pick p{margin-top:8px;font-size:14px;line-height:1.78;color:var(--nv-mute)}

/* 频道 */
.vgcdok-chans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vgcdok-chan{background:var(--nv-card);border:1px solid var(--nv-line);border-left:3px solid var(--nv-brand);border-radius:12px;padding:18px 20px}
.vgcdok-chan b{display:block;font-size:15.5px;font-weight:700}
.vgcdok-chan span{display:block;margin-top:6px;font-size:13.8px;line-height:1.72;color:var(--nv-mute)}

/* 卡片 */
.vgcdok-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vgcdok-card{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.vgcdok-card:hover{transform:translateY(-5px);box-shadow:var(--nv-sh)}
.vgcdok-pic{position:relative;aspect-ratio:3/4;overflow:hidden;background:#dedbd4}
.vgcdok-pic img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.vgcdok-card:hover .vgcdok-pic img{transform:scale(1.05)}
.vgcdok-flag{position:absolute;left:10px;top:10px;background:rgba(18,20,27,.8);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.vgcdok-rate{position:absolute;right:10px;bottom:10px;background:var(--nv-gold);color:#241a06;font-weight:800;font-size:13px;padding:2px 8px;border-radius:6px}
.vgcdok-body{padding:14px 16px 18px}
.vgcdok-body h3{font-size:16px;font-weight:700;line-height:1.4}
.vgcdok-body p{margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--nv-mute)}

/* 口碑条 */
.vgcdok-praises{display:grid;gap:14px}
.vgcdok-praise{display:flex;align-items:flex-start;gap:18px;background:var(--nv-card);border:1px solid var(--nv-line);border-radius:12px;padding:18px 22px}
.vgcdok-praise strong{flex:0 0 auto;font-size:26px;font-weight:800;color:var(--nv-brand);line-height:1.2;min-width:64px}
.vgcdok-praise h3{font-size:15.5px;font-weight:700}
.vgcdok-praise p{margin-top:4px;font-size:14px;line-height:1.72;color:var(--nv-mute)}

/* 榜单 */
.vgcdok-rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;counter-reset:vgrank}
.vgcdok-rank li{display:flex;align-items:center;gap:13px;background:var(--nv-card);border:1px solid var(--nv-line);border-radius:12px;padding:12px 16px;counter-increment:vgrank;transition:border-color .2s,box-shadow .2s}
.vgcdok-rank li:hover{border-color:rgba(234,74,60,.4);box-shadow:0 8px 18px rgba(20,22,29,.06)}
.vgcdok-rank li::before{content:counter(vgrank,decimal-leading-zero);font-weight:800;font-size:14px;color:var(--nv-brand);min-width:22px}
.vgcdok-rank strong{font-size:15.5px;font-weight:700}
.vgcdok-rank em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--nv-mute);white-space:nowrap}
.vgcdok-rank span{flex:0 0 auto;font-size:12.5px;color:var(--nv-ink2);background:#f2f0eb;border-radius:999px;padding:2px 10px;white-space:nowrap}

/* 专题 */
.vgcdok-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vgcdok-spec{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:228px;padding:22px;border-radius:var(--nv-r);overflow:hidden;color:#fff;border:1px solid var(--nv-line)}
.vgcdok-spec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vgcdok-spec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,27,.08),rgba(18,20,27,.9))}
.vgcdok-spec h3,.vgcdok-spec p{position:relative;z-index:1}
.vgcdok-spec h3{font-size:17px;font-weight:800}
.vgcdok-spec p{margin-top:7px;font-size:13.8px;line-height:1.7;color:rgba(255,255,255,.82)}

/* 资讯 */
.vgcdok-news{display:grid;gap:14px}
.vgcdok-news li{display:grid;grid-template-columns:136px 1fr;gap:18px;align-items:center;background:var(--nv-card);border:1px solid var(--nv-line);border-radius:12px;overflow:hidden;padding-right:20px;transition:box-shadow .25s}
.vgcdok-news li:hover{box-shadow:var(--nv-sh)}
.vgcdok-news img{width:136px;height:90px;object-fit:cover}
.vgcdok-news h3{font-size:15.5px;font-weight:700;line-height:1.5}
.vgcdok-news p{margin-top:5px;font-size:13.5px;color:var(--nv-mute);line-height:1.65}
.vgcdok-news time{color:var(--nv-brand);font-weight:600;font-style:normal}

/* 保障 */
.vgcdok-guard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vgcdok-guard li{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:var(--nv-r);padding:20px}
.vgcdok-guard b{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700}
.vgcdok-guard b::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--nv-brand);flex:0 0 auto}
.vgcdok-guard p{margin-top:8px;font-size:14px;line-height:1.75;color:var(--nv-mute)}

/* 问答 */
.vgcdok-faq{display:grid;gap:14px}
.vgcdok-faq article{background:var(--nv-card);border:1px solid var(--nv-line);border-radius:12px;padding:20px 22px}
.vgcdok-faq h3{font-size:15.5px;font-weight:700}
.vgcdok-faq h3::before{content:"Q";display:inline-block;color:var(--nv-brand);font-weight:800;margin-right:8px}
.vgcdok-faq p{margin-top:8px;font-size:14.5px;line-height:1.82;color:var(--nv-ink2)}

/* 页脚 */
.vgcdok-foot{background:var(--nv-dark);color:#c3c8d3;margin-top:16px}
.vgcdok-foot .vgcdok-wrap{padding:54px 0 0}
.vgcdok-fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding-bottom:38px}
.vgcdok-foot h3{color:#fff;font-size:15px;font-weight:700;margin-bottom:12px}
.vgcdok-foot p{font-size:14px;line-height:1.85;color:#a9afbd}
.vgcdok-foot li{font-size:14px;line-height:1.85;padding:3px 0}
.vgcdok-foot li a{transition:color .2s}
.vgcdok-foot li a:hover,.vgcdok-foot li a:focus-visible{color:#fff}
.vgcdok-foot .vgcdok-logo{color:#fff;margin-bottom:12px}
.vgcdok-copy{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#828a9b}

@media(max-width:1024px){
.vgcdok-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-who{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-chans{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-guard{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.vgcdok-sec{padding:54px 0}
}
@media(max-width:768px){
.vgcdok-hero-bg{width:100%;opacity:.24;clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
.vgcdok-hero::before{right:8%;width:34%;opacity:.55}
.vgcdok-hero::after{background:linear-gradient(180deg,rgba(18,20,27,.72),rgba(18,20,27,.94))}
.vgcdok-hero .vgcdok-wrap{padding:56px 0 62px}
.vgcdok-split{grid-template-columns:1fr}
.vgcdok-rank{grid-template-columns:1fr}
.vgcdok-specs{grid-template-columns:1fr}
.vgcdok-picks{grid-template-columns:1fr}
.vgcdok-head{margin-bottom:24px}
.vgcdok-head p{font-size:14.5px}
.vgcdok-sec{padding:46px 0}
.vgcdok-news li{grid-template-columns:108px 1fr;gap:14px;padding-right:16px}
.vgcdok-news img{width:108px;height:80px}
.vgcdok-praise{gap:12px;padding:16px 18px}
.vgcdok-praise strong{font-size:22px;min-width:52px}
}
@media(max-width:520px){
.vgcdok-top .vgcdok-wrap{flex-wrap:wrap;gap:0;padding:6px 0}
.vgcdok-logo{font-size:14.5px}
.vgcdok-nav{margin-left:0;width:100%;border-top:1px solid var(--nv-line);padding-top:2px}
.vgcdok-nav a{padding:0 11px;font-size:14px}
.vgcdok-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vgcdok-who,.vgcdok-chans,.vgcdok-guard{grid-template-columns:1fr}
.vgcdok-fgrid{grid-template-columns:1fr;gap:24px}
.vgcdok-body{padding:12px 12px 16px}
.vgcdok-body h3{font-size:14.5px}
.vgcdok-body p{font-size:12.5px}
.vgcdok-praise{flex-direction:column;gap:4px}
.vgcdok-rank li{padding:11px 13px;gap:10px}
.vgcdok-rank strong{font-size:14.5px}
.vgcdok-head h2{font-size:20px}
}