.banner{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:0 0 var(--r-l) var(--r-l)}.banner::-webkit-scrollbar{display:none}
.banner img{flex:0 0 100%;width:100%;scroll-snap-align:center;display:block;aspect-ratio:3/2;object-fit:cover}
.hero{position:relative;overflow:hidden;margin:-30px var(--sp4) 0;padding:var(--sp5) var(--sp5) var(--sp4);border-radius:var(--r-l);background:linear-gradient(150deg,#3f2a18,#170f09 72%);border:1px solid var(--line);box-shadow:var(--sh)}
.hero:before{content:'';position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;border:1px solid rgba(217,174,107,.28);box-shadow:0 0 0 22px rgba(217,174,107,.05),0 0 0 46px rgba(217,174,107,.035)}
.hero>*{position:relative}.hero small{color:var(--tx2);font-size:var(--t-cap)}.hero .sw{margin:var(--sp2) 0 var(--sp3)}
.hero .nm{font:500 36px/1.1 var(--f-disp);color:var(--gold2)}.hero .tm{font-size:18px;color:var(--tx2);margin-top:2px}.hero .c{color:var(--gold);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:2px}
.hero .rm{display:inline-block;padding:6px 14px;border-radius:var(--r-p);background:rgba(217,174,107,.12);color:var(--gold2);font-size:13px;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4) var(--sp2)}
.grid a{display:flex;flex-direction:column;align-items:center;gap:var(--sp2);font-size:11.5px;color:var(--tx2);text-align:center;transition:transform var(--dur)}.grid a:active{transform:scale(.95)}
.grid a b{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,var(--s3),var(--s1));border:1px solid var(--line);color:var(--gold)}
.banner>a{flex:0 0 100%;display:block;scroll-snap-align:center}