.srch #main { visibility: hidden } .srch #bg { filter: blur(70px) brightness(.5) saturate(1.5) } .srch #dim { opacity: .35 } .srch #dim2 { opacity: 0 !important } #sr { position: fixed; inset: 0; z-index: 25; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .6)); overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .35s; padding: 6vh var(--pad) 8vh; scrollbar-width: none } #sr.show { opacity: 1; pointer-events: auto } .stop { display: flex; align-items: center; gap: 18px; height: clamp(46px, 4.6vw, 76px) } .stop svg { width: clamp(30px, 2.8vw, 46px); height: clamp(30px, 2.8vw, 46px); color: rgba(255, 255, 255, .85); flex: 0 0 auto } #stext { font-size: clamp(28px, 3vw, 52px); font-weight: 600; letter-spacing: -.02em; color: rgba(255, 255, 255, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw } #stext.q { color: #fff } #stext.q::after { content: ""; display: inline-block; width: 3px; height: .8em; background: #fff; margin-left: 5px; vertical-align: -.08em; animation: bl 1s steps(1) infinite } @keyframes bl { 50% { opacity: 0 } } #kb { display: flex; align-items: center; justify-content: space-between; gap: clamp(2px, .35vw, 8px); margin: 1.4vh 0 0 4px; width: min(100%, 1180px) } .k { flex: 1 1 0; min-width: 0; max-width: 46px; height: clamp(34px, 3vw, 52px); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 1.6vw, 26px); font-weight: 500; color: rgba(255, 255, 255, .88); transition: background .2s, color .2s, transform .22s cubic-bezier(.22, .9, .3, 1) } .k.w { flex: 0 0 auto; max-width: none; font-size: clamp(9px, .8vw, 13px); font-weight: 700; padding: 0 clamp(8px, .8vw, 14px); background: rgba(255, 255, 255, .22); letter-spacing: .04em; height: clamp(26px, 2.3vw, 40px) } .k.d svg { width: 1.1em; height: 1.1em } .k.on { background: #fff; color: #000; transform: scale(1.22); } .row.ch { padding: 16px 6px 18px; min-height: 0; margin: 0 -6px; gap: 14px } .chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 20px; height: clamp(36px, 3vw, 52px); border-radius: 12px; background: rgba(255, 255, 255, .24); color: #fff; font-size: clamp(14px, 1.3vw, 22px); font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, transform .22s cubic-bezier(.22, .9, .3, 1) } .chip svg { width: 1.1em; height: 1.1em } .chip.on { background: #fff; color: #000; transform: scale(1.06) } .tabs { display: flex; justify-content: space-around; border-top: 1px solid rgba(255, 255, 255, .22); margin-top: 1vh; padding-top: 1.6vh } .tab { padding: 8px 24px; border-radius: 999px; font-size: clamp(13px, 1.15vw, 19px); color: rgba(255, 255, 255, .65); position: relative; transition: background .2s, color .2s } .tab.act { color: #fff; font-weight: 600 } .tab.act::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: #fff; border-radius: 2px } .tab.on { background: rgba(255, 255, 255, .2); color: #fff } .ss { margin-top: 2.6vh } .ss h3 { font-size: clamp(14px, 1.2vw, 20px); font-weight: 500; color: rgba(255, 255, 255, .75) } .sc { flex: 0 0 var(--cw); width: var(--cw); max-width: var(--cw); min-width: 0; transition: transform .32s cubic-bezier(.22, .9, .3, 1); } .sc .po { width: 100%; height: calc(var(--cw) * 1.5); aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: #1b1b24; } .sc .po img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.86); transition: filter .3s } .sc b { display: block; margin-top: 10px; font-size: clamp(13px, 1vw, 17px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .sc small { display: flex; gap: 8px; margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: clamp(11px, .85vw, 14px); white-space: nowrap } .sc small span+span::before { content: "\2022"; margin-right: 8px; opacity: .5 } .sc.on { transform: scale(1.05) translateY(-3px) } .sc.on img { filter: none }