.home-banner{position:relative;container-type:inline-size;height:286px;overflow:hidden;border:1px solid #dde6f1;border-radius:var(--radius);background:linear-gradient(115deg,#eaf0f9,#f1f8f5)}
.home-banner-viewport{position:absolute;inset:0;overflow:hidden}
.home-banner-slide{position:absolute;inset:0;width:100%;height:100%}
.home-banner .hero{height:100%;min-height:0;border:0;border-radius:0;padding:30px 34px 42px;background:transparent;box-sizing:border-box}
.home-banner .hero h1,.home-banner .hero h2{font-size:32px;line-height:1.2;letter-spacing:-1.1px;margin:0;max-width:610px}
.home-banner .hero h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-banner .hero .eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:16px}
.home-banner .hero .eyebrow .ico{width:16px;height:16px}
.home-banner .hero p{font-size:12px;line-height:1.7;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-banner .hero-copy{max-width:70%}
.home-banner .hero-meta{margin-top:21px;gap:15px;font-size:9px;flex-wrap:wrap}
.home-banner .hero-art{top:25px;right:22px;transform:scale(.85);transform-origin:right center}
.home-banner-promotion{background:linear-gradient(115deg,#eaf0f9,#f1f8f5)!important}
.home-banner-detail{margin-top:10px;font-size:10px;color:#637e88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home-banner-action{display:flex;align-items:center;gap:17px;margin-top:15px;font-size:13px;color:var(--navy)}
.home-banner-action .btn{padding:10px 15px;font-size:11px}
.home-banner-art{position:absolute;right:34px;top:30px;bottom:36px;width:22%;display:grid;place-items:center;pointer-events:none}
.home-banner-art-card{width:155px;max-width:100%;height:185px;border:1px solid #d4e2e9;background:#ffffffb8;box-shadow:0 12px 25px #073b6410;border-radius:13px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:21px;transform:rotate(7deg);color:#00783a}
.home-banner-art-card>.ico{width:58px;height:58px;stroke-width:1.3}
.home-banner-art-card>span{font-size:9px;letter-spacing:1.2px;text-align:center;font-weight:700;color:var(--navy)}
.home-banner-cover{position:absolute;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #073b6416);border-radius:8px}
.home-banner-controls{position:absolute;bottom:11px;right:18px;z-index:5;display:flex;align-items:center;gap:3px;border:1px solid #d8e3ec;background:#ffffffdc;border-radius:20px;padding:2px 5px;color:#47647a}
.home-banner-controls button{height:25px;min-width:26px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1}
.home-banner-controls button:hover{background:#e7f1ef;color:#00783a}
.home-banner-controls button:focus-visible,.home-banner-action .btn:focus-visible{outline:2px solid #00783a;outline-offset:2px}
.home-banner-controls [data-banner-pause]{font-size:11px;border-left:1px solid #e1e9ef;border-radius:0 12px 12px 0;margin-left:3px}
.home-banner-position{font-size:10px;font-variant-numeric:tabular-nums;min-width:32px;text-align:center}
.home-banner-slide.is-entering{animation:home-banner-enter .6s ease both}
.home-banner-slide.is-leaving{animation:home-banner-leave .6s ease both}
.home-banner-slide.is-entering.is-reverse{animation-name:home-banner-enter-reverse}
.home-banner-slide.is-leaving.is-reverse{animation-name:home-banner-leave-reverse}
@keyframes home-banner-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes home-banner-leave{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes home-banner-enter-reverse{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes home-banner-leave-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}
@container(max-width:660px){.home-banner .hero-copy{max-width:100%}.home-banner .hero-art,.home-banner-art{display:none}.home-banner .hero h1,.home-banner .hero h2{font-size:29px}.home-banner .hero{padding:27px 27px 42px}.home-banner .hero-meta{gap:12px}}
@media(max-width:760px){.home-banner{height:320px}.home-banner .hero{padding:24px 22px 45px}.home-banner .hero h1{font-size:28px}.home-banner .hero h2{font-size:26px;line-height:1.15;-webkit-line-clamp:3}.home-banner .hero p{max-width:100%;font-size:11px}.home-banner .hero .eyebrow{font-size:8px;margin-bottom:12px}.home-banner .hero-meta{gap:12px;margin-top:20px}.home-banner-action{margin-top:12px}.home-banner-detail{font-size:10px}.home-banner-controls{right:15px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.home-banner-slide{animation:none!important}}