.offline-scene{position:relative;aspect-ratio:16/9;background:#f7f7f7 url('assets/offline/background/背景-thumb.png.webp') center/100% 100% no-repeat;overflow:hidden}
.offline-banners{position:absolute;left:27%;right:27%;top:21%;height:47%;display:flex;justify-content:space-between;perspective:1000px}
.offline-scene{border:0;box-shadow:none;margin-top:-1px}
.offline-scene::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#f7f7f7;pointer-events:none;z-index:2}
.offline-banner{position:relative;width:23%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;transform-origin:center bottom}
.offline-banner img{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:auto;max-width:none;pointer-events:none;transition:filter .3s}
.offline-banner:hover img{filter:drop-shadow(0 8px 8px #253f5220)}
.offline-banner:focus-visible{outline:2px solid #00aeef;outline-offset:8px}
.offline-handbooks{position:absolute;left:4%;right:4%;bottom:2%;height:25%}
.offline-handbooks .showcase-card{height:13vw;aspect-ratio:auto;background:transparent}
.offline-handbooks .showcase-arrow{color:#586671;font-size:25px}
.offline-handbooks .showcase-pause{position:absolute;right:45px;top:-22px;color:#78818a;font-size:11px}
@media(max-width:760px){.offline-scene{min-height:600px;aspect-ratio:auto;background-size:100% auto;background-position:top center}.offline-banners{left:18%;right:18%;top:23%;height:42%}.offline-handbooks{left:2%;right:2%;height:27%}.offline-handbooks .showcase-card{height:155px}.offline-handbooks .showcase-pause{right:30px}}