/* roulang page: index */
:root{
  --kkc-deep:#24614A;
  --kkc-deep2:#16402F;
  --kkc-amber:#E39A3B;
  --kkc-cream:#F6F3EA;
  --kkc-paper:#FFFFFF;
  --kkc-soft:#DDE8DE;
  --kkc-line:#E4E0D3;
  --kkc-ink:#1B2620;
  --kkc-sub:#57635B;
  --kkc-faint:#8A948D;
  --kkc-radius:14px;
  --kkc-shadow:0 2px 10px rgba(31,60,45,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.85;color:var(--kkc-ink);background:var(--kkc-cream);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;border:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--kkc-amber);outline-offset:3px}
section[id]{scroll-margin-top:90px}

/* 容器与顶栏 */
.kkc-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.kkc-head{position:sticky;top:0;z-index:60;background:rgba(246,243,234,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--kkc-line)}
.kkc-head-in{position:relative;display:flex;align-items:center;gap:14px;min-height:76px}
.kkc-logo{display:flex;align-items:center;gap:12px;margin-right:auto;min-height:44px}
.kkc-mark{position:relative;display:block;width:48px;height:48px;flex:none;border-radius:12px;background:var(--kkc-deep)}
.kkc-mark::before{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid var(--kkc-amber)}
.kkc-mark::after{content:"";position:absolute;inset:19px;border-radius:50%;background:rgba(255,255,255,.88)}
.kkc-name{font-size:20px;font-weight:700;letter-spacing:.5px;color:var(--kkc-deep2)}
.kkc-nav ul{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.kkc-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;color:var(--kkc-sub);transition:color .2s ease}
.kkc-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:2px;border-radius:2px;background:transparent;transition:background .2s ease}
.kkc-nav a:hover{color:var(--kkc-deep)}
.kkc-nav a:hover::after,.kkc-nav .kkc-on::after{background:var(--kkc-amber)}
.kkc-nav .kkc-on{color:var(--kkc-deep);font-weight:600}
.kkc-switch{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kkc-burger{display:none;width:44px;height:44px;border:1px solid var(--kkc-line);border-radius:12px;background:var(--kkc-paper);cursor:pointer}
.kkc-burger span{position:absolute;left:50%;top:50%;display:block;width:18px;height:2px;margin:-1px 0 0 -9px;background:var(--kkc-deep);border-radius:2px}
.kkc-burger span::before,.kkc-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--kkc-deep);border-radius:2px}
.kkc-burger span::before{top:-6px}
.kkc-burger span::after{top:6px}

/* 首屏 */
.kkc-hero{padding:64px 0 76px;background:linear-gradient(180deg,#FBF9F2 0%,var(--kkc-cream) 100%);border-bottom:1px solid var(--kkc-line)}
.kkc-hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.kkc-eyebrow{display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:999px;background:var(--kkc-soft);color:var(--kkc-deep);font-size:13px;letter-spacing:1px}
.kkc-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.15;font-weight:800;letter-spacing:-.5px}
.kkc-wave{position:relative;display:inline-block;color:var(--kkc-amber)}
.kkc-wave::after{content:"";position:absolute;left:2px;right:2px;bottom:-9px;height:5px;border-bottom:3px solid var(--kkc-amber);border-radius:50%;transform:rotate(-.8deg)}
.kkc-lead{margin-top:24px;font-size:19px;font-weight:600;color:var(--kkc-deep)}
.kkc-copy{max-width:52ch;margin-top:10px;color:var(--kkc-sub)}
.kkc-search{display:flex;gap:10px;max-width:520px;margin-top:28px}
.kkc-search input{flex:1;min-width:0;height:50px;padding:0 20px;border:1px solid var(--kkc-line);border-radius:999px;background:var(--kkc-paper);color:var(--kkc-ink);transition:border-color .2s ease,box-shadow .2s ease}
.kkc-search input::placeholder{color:var(--kkc-faint)}
.kkc-search input:focus{border-color:var(--kkc-amber);box-shadow:0 0 0 3px rgba(227,154,59,.18);outline:none}
.kkc-btn{height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--kkc-amber);color:#2A1B06;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.kkc-btn:hover{background:var(--kkc-deep2);color:#fff;transform:translateY(-1px)}
.kkc-hero-media{position:relative;max-width:420px;margin-left:auto;padding-bottom:36px}
.kkc-poster{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--kkc-line);background:var(--kkc-soft);box-shadow:0 18px 40px rgba(31,60,45,.16)}
.kkc-poster img{width:100%;aspect-ratio:3/4;object-fit:cover}
.kkc-poster figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(transparent,rgba(22,64,47,.86))}
.kkc-mini{position:absolute;width:118px;overflow:hidden;border-radius:14px;border:3px solid var(--kkc-paper);background:var(--kkc-soft);box-shadow:0 10px 24px rgba(31,60,45,.2)}
.kkc-mini img{width:100%;aspect-ratio:3/4;object-fit:cover}
.kkc-mini-a{left:-30px;top:56px}
.kkc-mini-b{right:-16px;bottom:0}

/* 区块通用 */
.kkc-sec{padding:72px 0}
.kkc-sec-soft{background:var(--kkc-soft)}
.kkc-sec-white{background:var(--kkc-paper)}
.kkc-hd{margin-bottom:40px;max-width:760px}
.kkc-h2{font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-weight:700;letter-spacing:-.2px;color:var(--kkc-ink)}
.kkc-h2::before{content:"";display:block;width:32px;height:4px;border-radius:2px;background:var(--kkc-amber);margin-bottom:14px}
.kkc-sub{margin-top:12px;font-size:15px;color:var(--kkc-sub)}

/* 频道分类 */
.kkc-chans{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--kkc-line);border:1px solid var(--kkc-line);border-radius:16px;overflow:hidden}
.kkc-chan{padding:26px 20px;background:var(--kkc-paper)}
.kkc-chan-name{display:block;margin-bottom:8px;font-size:20px;font-weight:700;color:var(--kkc-deep)}
.kkc-chan p{font-size:13.5px;line-height:1.75;color:var(--kkc-sub)}

/* 卡片通用 */
.kkc-card{background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:var(--kkc-radius);padding:12px;box-shadow:var(--kkc-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.kkc-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(31,60,45,.16);border-color:var(--kkc-amber)}
.kkc-card:hover img{transform:scale(1.04)}
.kkc-cover{position:relative;overflow:hidden;border-radius:10px;background:var(--kkc-soft);aspect-ratio:3/4}
.kkc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.kkc-tag{position:absolute;left:8px;top:8px;padding:2px 9px;border-radius:999px;background:var(--kkc-amber);color:#2A1B06;font-size:11.5px;font-weight:600;line-height:1.6}
.kkc-title{margin-top:10px;font-size:14.5px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kkc-meta{margin-top:2px;font-size:12.5px;color:var(--kkc-faint)}
.kkc-score{color:var(--kkc-amber);font-weight:700}
.kkc-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}

/* 卖点 */
.kkc-points{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kkc-point{padding:26px 22px;background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:var(--kkc-radius);box-shadow:var(--kkc-shadow)}
.kkc-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;border-radius:12px;background:var(--kkc-soft);color:var(--kkc-deep);font-weight:800;font-size:16px}
.kkc-point h3{font-size:16px;font-weight:700;margin-bottom:6px}
.kkc-point p{font-size:13.5px;color:var(--kkc-sub)}

/* 热门视频 */
.kkc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kkc-vcover{position:relative;overflow:hidden;border-radius:10px;background:var(--kkc-soft);aspect-ratio:16/9}
.kkc-vcover img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.kkc-card:hover .kkc-vcover img{transform:scale(1.04)}
.kkc-dur{position:absolute;right:8px;bottom:8px;padding:1px 8px;border-radius:6px;background:rgba(22,64,47,.84);color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums}
.kkc-state{margin-top:2px;font-size:12.5px;color:var(--kkc-deep)}

/* 热播榜 */
.kkc-rank{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.kkc-rank-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--kkc-line)}
.kkc-no{flex:none;width:26px;color:var(--kkc-amber);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.kkc-rname{font-weight:600;font-size:15px}
.kkc-rkind{padding:0 7px;border:1px solid var(--kkc-line);border-radius:999px;color:var(--kkc-faint);font-size:12px;line-height:1.8}
.kkc-rhot{margin-left:auto;color:var(--kkc-deep);font-size:12px;white-space:nowrap}
.kkc-rank-fig{overflow:hidden;border:1px solid var(--kkc-line);border-radius:16px;background:var(--kkc-paper);box-shadow:var(--kkc-shadow)}
.kkc-rank-fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.kkc-note{padding:20px 22px}
.kkc-note strong{display:block;margin:8px 0 6px;font-size:17px;color:var(--kkc-deep2)}
.kkc-note p{font-size:14px;color:var(--kkc-sub)}
.kkc-chip{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--kkc-soft);color:var(--kkc-deep);font-size:11.5px;font-weight:600}

/* 编辑推荐清单 */
.kkc-rows{border-top:1px solid var(--kkc-line)}
.kkc-row{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--kkc-line)}
.kkc-row img{flex:none;width:120px;height:80px;object-fit:cover;border-radius:10px}
.kkc-row h3{font-size:16px;font-weight:600;transition:color .2s ease}
.kkc-row:hover h3{color:var(--kkc-deep)}
.kkc-row p{font-size:13.5px;color:var(--kkc-sub)}

/* 最新上传 */
.kkc-grid-new{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.kkc-new{display:flex;align-items:center;gap:14px;padding:12px;background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:var(--kkc-radius);box-shadow:var(--kkc-shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.kkc-new:hover{transform:translateY(-3px);border-color:var(--kkc-amber);box-shadow:0 10px 24px rgba(31,60,45,.14)}
.kkc-new .kkc-cover{flex:none;width:132px;aspect-ratio:16/10;border-radius:10px}
.kkc-new h3{font-size:15px;font-weight:600}
.kkc-new p{font-size:13px;color:var(--kkc-sub);line-height:1.7}

/* 频道精选 */
.kkc-groups{display:grid;gap:20px}
.kkc-group{padding:20px 22px;border:1px solid var(--kkc-line);border-radius:16px;background:rgba(221,232,222,.6)}
.kkc-group-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:15px;font-weight:700;color:var(--kkc-deep)}
.kkc-group-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kkc-amber)}
.kkc-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kkc-mcard{display:flex;align-items:center;gap:12px;padding:8px;background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:12px}
.kkc-mcard .kkc-cover{flex:none;width:74px;aspect-ratio:4/3;border-radius:8px}
.kkc-mname{font-size:13.5px;font-weight:600;line-height:1.5}
.kkc-mkind{font-size:12px;color:var(--kkc-faint)}

/* 系列连载 */
.kkc-series{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kkc-sitem{overflow:hidden;background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:var(--kkc-radius);box-shadow:var(--kkc-shadow);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.kkc-sitem:hover{transform:translateY(-4px);border-color:var(--kkc-amber);box-shadow:0 10px 24px rgba(31,60,45,.14)}
.kkc-sitem .kkc-cover{aspect-ratio:16/10;border-radius:0}
.kkc-sbody{padding:14px 16px 16px}
.kkc-sbody h3{font-size:15px;font-weight:700;margin-bottom:4px}
.kkc-sbody p{font-size:12.5px;color:var(--kkc-sub);line-height:1.7;margin-bottom:10px}
.kkc-badge{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--kkc-soft);color:var(--kkc-deep);font-size:11.5px;font-weight:600}

/* 混剪 */
.kkc-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* 专题片单 */
.kkc-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kkc-topic{position:relative;overflow:hidden;border:1px solid var(--kkc-line);border-radius:16px;background:var(--kkc-soft);box-shadow:var(--kkc-shadow)}
.kkc-topic img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}
.kkc-topic:hover img{transform:scale(1.05)}
.kkc-topic-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff;background:linear-gradient(180deg,rgba(22,64,47,.06) 32%,rgba(22,64,47,.88))}
.kkc-topic-tag{align-self:flex-start;margin-bottom:auto;padding:2px 10px;border-radius:999px;background:rgba(227,154,59,.94);color:#2A1B06;font-size:11.5px;font-weight:600}
.kkc-topic-txt h3{font-size:17px;font-weight:700;margin-bottom:4px}
.kkc-topic-txt p{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.86)}

/* 资讯 */
.kkc-news{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 28px}
.kkc-news article{display:flex;align-items:center;gap:16px}
.kkc-news img{flex:none;width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.kkc-news h3{font-size:15px;font-weight:600;line-height:1.6}
.kkc-when{margin-top:4px;font-size:12.5px;color:var(--kkc-faint)}

/* 常见问答 */
.kkc-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.kkc-faq article{padding:24px;background:var(--kkc-paper);border:1px solid var(--kkc-line);border-radius:var(--kkc-radius);box-shadow:var(--kkc-shadow)}
.kkc-faq h3{margin-bottom:8px;font-size:16px;font-weight:700;color:var(--kkc-deep)}
.kkc-faq p{font-size:14px;color:var(--kkc-sub)}

/* 页脚 */
.kkc-foot{padding:56px 0 24px;background:var(--kkc-deep2);color:rgba(255,255,255,.78)}
.kkc-foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.kkc-fbrand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kkc-fbrand .kkc-mark{width:40px;height:40px;border-radius:10px}
.kkc-fbrand .kkc-mark::before{inset:10px}
.kkc-fbrand .kkc-mark::after{inset:16px}
.kkc-fbrand span{font-size:18px;font-weight:700;color:#fff}
.kkc-fh{margin-bottom:12px;font-size:14px;font-weight:700;color:#fff;letter-spacing:.5px}
.kkc-foot p,.kkc-foot li{font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.72)}
.kkc-foot ul li{padding:2px 0}
.kkc-foot a{transition:color .2s ease}
.kkc-foot a:hover{color:var(--kkc-amber)}
.kkc-dom{color:var(--kkc-amber);font-weight:600}
.kkc-copy{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.6)}

/* 1024 */
@media (max-width:1024px){
  .kkc-hero-in{grid-template-columns:1fr 360px;gap:34px}
  .kkc-grid-5{grid-template-columns:repeat(3,1fr)}
  .kkc-chans{grid-template-columns:repeat(3,1fr)}
  .kkc-rank{grid-template-columns:1fr}
  .kkc-points{grid-template-columns:repeat(2,1fr)}
  .kkc-series{grid-template-columns:repeat(2,1fr)}
  .kkc-topics{grid-template-columns:repeat(2,1fr)}
  .kkc-foot-in{grid-template-columns:repeat(2,1fr);gap:28px}
}

/* 768 */
@media (max-width:768px){
  .kkc-head-in{min-height:64px}
  .kkc-burger{display:block}
  .kkc-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:8px 24px 16px;background:var(--kkc-cream);border-bottom:1px solid var(--kkc-line);box-shadow:0 12px 24px rgba(31,60,45,.1)}
  .kkc-switch:checked ~ .kkc-nav{display:block}
  .kkc-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .kkc-nav a{min-height:44px;padding:0 4px;font-size:15px;border-bottom:1px solid var(--kkc-line)}
  .kkc-nav a::after{display:none}
  .kkc-hero{padding:40px 0 48px}
  .kkc-hero-in{grid-template-columns:1fr;gap:36px}
  .kkc-hero-media{max-width:340px;margin:0 auto}
  .kkc-sec{padding:48px 0}
  .kkc-hd{margin-bottom:28px}
  .kkc-h2{font-size:24px}
  .kkc-grid-5,.kkc-grid-3,.kkc-grid-2,.kkc-grid-new,.kkc-news,.kkc-faq{grid-template-columns:repeat(2,1fr)}
  .kkc-chans,.kkc-points{grid-template-columns:repeat(2,1fr)}
  .kkc-mini-grid{grid-template-columns:1fr}
  .kkc-search{max-width:none}
}

/* 520 */
@media (max-width:520px){
  .kkc-wrap{padding:0 16px}
  .kkc-hero h1{font-size:30px}
  .kkc-lead{font-size:17px}
  .kkc-mini{display:none}
  .kkc-hero-media{max-width:100%;padding-bottom:0}
  .kkc-grid-5{grid-template-columns:repeat(2,1fr);gap:14px}
  .kkc-card .kkc-tag{display:none}
  .kkc-grid-3,.kkc-grid-2,.kkc-grid-new,.kkc-news,.kkc-faq,.kkc-chans,.kkc-points,.kkc-series,.kkc-topics,.kkc-group{grid-template-columns:1fr}
  .kkc-groups .kkc-group{padding:16px}
  .kkc-row{gap:12px}
  .kkc-row img{width:96px;height:64px}
  .kkc-row h3{font-size:15px}
  .kkc-news article{gap:12px}
  .kkc-news img{width:110px}
  .kkc-search{flex-direction:column}
  .kkc-btn{width:100%}
  .kkc-foot-in{grid-template-columns:1fr}
  .kkc-rhot{display:none}
}