/* Homepage only. Light, restrained hero; existing Swiper 4 is retained. */
body.front.index #banner.hero-2026 {position:relative; background:#f9f7f6; color:#222;}
body.front.index #banner.hero-2026 .main.swiper-container {height:100vh; height:100svh; min-height:740px; max-height:920px;}
body.front.index #banner.hero-2026 .main .swiper-wrapper > .swiper-slide {height:100%; overflow:hidden;}
body.front.index #banner.hero-2026 .hero-slide {background:#faf7f6;}
body.front.index #banner.hero-2026 .hero-products {background:#f4f6f9;}
body.front.index #banner.hero-2026 .hero-security {background:#f2f7f5;}
body.front.index #banner.hero-2026 .main .swiper-info-container {inset:0; z-index:2; pointer-events:none;}
body.front.index #banner.hero-2026 .main .swiper-info-container .swiper-info {z-index:2; pointer-events:none; color:#222;}
body.front.index #banner.hero-2026 .main .swiper-info-container .wording {position:absolute; left:max(7vw,calc((100vw - 1240px)/2)); top:47%; bottom:auto; transform:translateY(-50%); width:53%; max-width:650px; padding:0; text-align:left; background:none; pointer-events:auto;}
body.front.index #banner.hero-2026 .wording h1,body.front.index #banner.hero-2026 .wording h2 {font-size:clamp(34px,3.65vw,54px); line-height:1.45; letter-spacing:-2.5px; font-weight:500; margin:0 0 26px; border:0; padding:0; color:#222; text-shadow:none; word-break:keep-all;}
body.front.index #banner.hero-2026 .wording strong {font-weight:700; color:#e51837;}
body.front.index #banner.hero-2026 .main .wording .hero-description {font-size:19px; font-weight:400; line-height:1.9; letter-spacing:-.65px; color:#60646c; margin:0; text-shadow:none; word-break:keep-all;}
body.front.index #banner.hero-2026 .main .swiper-info .btn-event {display:inline-flex; align-items:center; justify-content:center; gap:0; width:auto; min-width:0; max-width:none; margin-top:35px; padding:14px 22px; border:1px solid #e51837; background:#e51837; color:#fff; border-radius:4px; font-size:16px; font-weight:500; text-decoration:none; transition:background .2s;}
body.front.index #banner.hero-2026 .main .swiper-info .btn-event:hover {background:#c6102c;}
body.front.index #banner.hero-2026 .hero-art {position:absolute; width:min(46vw,660px); height:auto; right:max(6vw,calc((100vw - 1260px)/2)); top:47%; transform:translateY(-50%); pointer-events:none;}
body.front.index #banner.hero-2026 .hero-navigation {position:absolute; z-index:5; left:50%; bottom:48px; transform:translateX(-50%); display:flex; align-items:center; width:86%; max-width:1240px; gap:42px; border-top:1px solid #2222221f; padding-top:21px;}
body.front.index #banner.hero-2026 .banner-left {position:static; inset:auto; transform:none; flex:1; min-width:0;}
body.front.index #banner.hero-2026 .banner-left ul {display:flex; list-style:none; margin:0; padding:0; gap:24px;}
body.front.index #banner.hero-2026 .banner-left ul li {display:block; width:auto; height:auto; margin:0; flex:1; transition:none;}
body.front.index #banner.hero-2026 .banner-left button {display:flex; width:100%; gap:14px; align-items:center; min-height:44px; background:none; border:0; padding:0; color:#80858d; text-align:left; cursor:pointer; border-radius:0; transition:color .2s;}
body.front.index #banner.hero-2026 .banner-left ul li.active button,body.front.index #banner.hero-2026 .banner-left button:hover {color:#222;}
body.front.index #banner.hero-2026 .hero-nav-number {font-size:13px; font-variant-numeric:tabular-nums; color:inherit;}
body.front.index #banner.hero-2026 .banner-left ul li .banner-left-title {display:block; font-size:17px; font-weight:500; text-align:left; background:none; color:inherit; opacity:1; line-height:1.6;}
body.front.index #banner.hero-2026 .banner-left li.active .hero-nav-number {color:#e51837;}
body.front.index #banner.hero-2026 .hero-controls {display:flex; align-items:center; gap:6px;}
body.front.index #banner.hero-2026 .hero-count {font-size:13px; letter-spacing:1px; color:#70757c; margin-right:14px; font-variant-numeric:tabular-nums;}
body.front.index #banner.hero-2026 .hero-controls button {display:grid; place-items:center; width:44px; height:44px; border:1px solid #cbd0d5; background:transparent; color:#454b55; border-radius:50%; font-size:17px; cursor:pointer;}
body.front.index #banner.hero-2026 .hero-controls button:hover {background:#fff;}
body.front.index #banner.hero-2026 button:focus-visible,body.front.index #banner.hero-2026 a:focus-visible {outline:3px solid #e51837; outline-offset:5px;}
body.front.index #banner.hero-2026 .down-button-wrap {bottom:0; z-index:4; pointer-events:none;}
body.front.index #banner.hero-2026 .down-button-wrap button {font-size:26px; color:#7b8088; pointer-events:auto;}
/* The light hero uses the site's existing dark logo and navigation. */
html.top body.front.index header {margin-top:22px;}
html.top body.front.index header .koreassl-logo.white {display:none;}
html.top body.front.index header .koreassl-logo.gray {display:block; width:160px;}
html.top body.front.index header .navbar-nav .nav-item .nav-link,html.top body.front.index header #btn-open-menu {color:#333; text-shadow:none; font-size:16px;}
html.top body.front.index header .navbar-nav .nav-item:hover .nav-link {background:#00000005;}
html.top body.front.index header .navbar-nav .nav-item .nav-link.btn-login {background:#00000006;}
@media(max-width:1100px) and (min-width:769px) {
 body.front.index #banner.hero-2026 .main .swiper-info-container .wording {left:5%; width:56%;}
 body.front.index #banner.hero-2026 .main .wording .hero-description {font-size:16px;}
 body.front.index #banner.hero-2026 .hero-art {right:2%; width:46%;}
 body.front.index #banner.hero-2026 .hero-navigation {width:90%; gap:20px;}
 body.front.index #banner.hero-2026 .banner-left ul {gap:14px;}
 body.front.index #banner.hero-2026 .banner-left ul li .banner-left-title {font-size:15px;}
}
@media(max-width:768px) {
 body.front.index #banner.hero-2026 .main.swiper-container {min-height:780px; max-height:900px;}
 body.front.index #banner.hero-2026 .main .swiper-info-container .wording {left:7%; top:118px; width:86%; max-width:none; transform:none; padding:0; text-align:left;}
 body.front.index #banner.hero-2026 .wording h1,body.front.index #banner.hero-2026 .wording h2 {font-size:31px; letter-spacing:-1.7px; line-height:1.5; margin-bottom:20px;}
 body.front.index #banner.hero-2026 .main .wording .hero-description {font-size:15px; line-height:1.9; letter-spacing:-.6px;}
 body.front.index #banner.hero-2026 .main .swiper-info .btn-event {font-size:15px; margin-top:24px; padding:12px 18px; min-width:0;}
 body.front.index #banner.hero-2026 .hero-art {width:310px; max-width:88%; top:auto; bottom:125px; right:50%; transform:translateX(50%);}
 body.front.index #banner.hero-2026 .hero-navigation {bottom:22px; width:86%; padding-top:12px; display:block;}
 body.front.index #banner.hero-2026 .banner-left ul {gap:12px;}
 body.front.index #banner.hero-2026 .banner-left button {gap:7px; padding:0; min-height:44px;}
 body.front.index #banner.hero-2026 .banner-left ul li .banner-left-title {font-size:13px; white-space:nowrap;}
 body.front.index #banner.hero-2026 .hero-nav-number {font-size:11px;}
 body.front.index #banner.hero-2026 .hero-controls {justify-content:flex-start; margin-top:0; gap:10px;}
 body.front.index #banner.hero-2026 .hero-controls button {width:44px; height:44px; font-size:16px;}
 body.front.index #banner.hero-2026 .hero-count {margin-right:10px; font-size:12px;}
 body.front.index #banner.hero-2026 .down-button-wrap {display:none;}
 body.front.index .quickmenu-button-wrap {bottom:150px; right:10px; transform:scale(.65); transform-origin:bottom right;}
}
@media(max-width:359px) {
 body.front.index #banner.hero-2026 .main.swiper-container {min-height:810px;}
 body.front.index #banner.hero-2026 .wording h1,body.front.index #banner.hero-2026 .wording h2 {font-size:26px;}
 body.front.index #banner.hero-2026 .main .wording .hero-description {font-size:14px;}
 body.front.index #banner.hero-2026 .banner-left ul {gap:7px;}
 body.front.index #banner.hero-2026 .banner-left ul li .banner-left-title {font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
 body.front.index #banner.hero-2026 *,body.front.index #banner.hero-2026 *:before {animation:none!important; transition:none!important; scroll-behavior:auto!important;}
}

/* Match all three hero graphics at mobile sizes, including their inner canvas. */
@media(max-width:768px) {
 body.front.index #banner.hero-2026 .main.swiper-container {min-height:840px;}
 body.front.index #banner.hero-2026 .hero-art {width:min(112vw,450px); max-width:none; top:340px; bottom:auto;}
 body.front.index #banner.hero-2026 .hero-kclm .hero-art {width:min(98vw,400px); right:54%;}
 body.front.index .quickmenu-button-wrap {width:70px;}
 body.front.index .quickmenu-button-wrap a .quickmenu-button {width:70px; padding:0;}
 body.front.index .quickmenu-button-wrap a .quickmenu-button .quickmenu-button-title {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
}
@media(min-width:769px) {
 html.top body.front.index .quickmenu-button-wrap {bottom:135px;}
}

@media(min-width:769px) {
 body.front.index .quickmenu-button-wrap {width:70px; right:20px;}
 body.front.index .quickmenu-button-wrap a .quickmenu-button {width:70px; padding:0;}
 body.front.index .quickmenu-button-wrap a .quickmenu-button .quickmenu-button-title {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
}