@charset "UTF-8";
/* ==========================================================================
   KALSUN English site renewal
   Layout language modelled on a full-bleed corporate style:
   transparent header over media, oversized headlines, navy accent,
   pill tabs and outline pill buttons.
   ========================================================================== */

@font-face { font-family: "Wanted Sans"; font-weight: 400; font-display: swap; src: url(../../font/wanted/WantedSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "Wanted Sans"; font-weight: 500; font-display: swap; src: url(../../font/wanted/WantedSans-Medium.woff2) format("woff2"); }
@font-face { font-family: "Wanted Sans"; font-weight: 600; font-display: swap; src: url(../../font/wanted/WantedSans-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Wanted Sans"; font-weight: 700; font-display: swap; src: url(../../font/wanted/WantedSans-Bold.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url(../../font/pretendard/Pretendard-Regular.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url(../../font/pretendard/Pretendard-SemiBold.woff2) format("woff2"); }

:root {
    --navy: #191f6c;
    --navy-hover: #141a69;
    --navy-dark: #0b0e1c;
    --deep: #00101f;
    --ink: #161616;
    --text: #4d4d4d;
    --gray: #767676;
    --line: #e5e5e5;
    --soft: #f9f9f9;
    --white: #ffffff;
    --tint: rgb(0 70 160 / 0.55);

    --font: "Wanted Sans", "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gutter: 15px;
    --header-h: 100px;
    --radius: 16px;
    --pill: 999px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 90px; }
body { font: 400 18px/1.6 var(--font); color: var(--ink); background: var(--white); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; touch-action: manipulation; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
address { font-style: normal; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; letter-spacing: -0.03em; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.displaynone { display: none !important; }
br.full_only { display: inline; }

.skip_link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--navy); color: var(--white); padding: 12px 20px; border-radius: var(--pill); font-weight: 600; }
.skip_link:focus { top: 16px; }

.wide { width: 100%; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); max-width: 1920px; margin: 0 auto; }

/* ---------- Type ---------- */
.eyebrow { font-size: 22px; font-weight: 500; color: var(--navy); margin-bottom: 20px; }
.eyebrow.light { color: var(--white); }
.statement { font-size: clamp(34px, 5vw, 72px); line-height: 1.22; font-weight: 600; letter-spacing: -0.035em; }
.statement.light, .section_title.light { color: var(--white); }
.section_title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.3; font-weight: 600; letter-spacing: -0.03em; }

/* ---------- Buttons: outline pill with dot ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
    min-width: 182px; height: 52px; padding: 0 24px;
    border: 1px solid currentColor; border-radius: var(--pill);
    font-size: 17px; font-weight: 500; white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .3s var(--ease); }
.btn:hover i { transform: scale(1.8); }
.btn_line { color: var(--ink); }
.btn_line:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn_line_light { color: var(--white); }
.btn_line_light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn_navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn_navy:hover { background: var(--navy-hover); }

/* ---------- Header ---------- */
#header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    height: var(--header-h);
    color: var(--white);
    transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
#header .header_inner { height: 100%; display: flex; align-items: center; gap: 40px; padding: 0 max(40px, env(safe-area-inset-right)) 0 max(40px, env(safe-area-inset-left)); }
#header .logo { flex: none; }
#header .logo img { height: 34px; width: auto; }
.gnb_wrap { flex: 1; height: 100%; }
#gnb { display: flex; justify-content: space-between; height: 100%; max-width: 1000px; margin: 0 auto; }
#gnb > li { position: relative; display: flex; align-items: center; }
#gnb > li > a { font-size: 20px; font-weight: 600; padding: 8px 4px; position: relative; }
#gnb > li > a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
#gnb > li:hover > a::after, #gnb > li:focus-within > a::after, #gnb > li.current > a::after { transform: scaleX(1); }
#gnb .sub_menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, -8px);
    min-width: 220px; padding-top: 4px;
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
#gnb > li:hover .sub_menu, #gnb > li:focus-within .sub_menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#gnb .sub_menu ul { background: var(--white); border-radius: var(--radius); padding: 10px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.12); }
#gnb .sub_menu a { display: block; color: var(--ink); font-size: 16px; font-weight: 500; padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
#gnb .sub_menu a:hover { background: var(--soft); color: var(--navy); }

.header_util { display: flex; align-items: center; gap: 22px; flex: none; }
.lang_toggle { display: inline-flex; align-items: center; padding: 3px; border: 2px solid currentColor; border-radius: var(--pill); }
.lang_toggle a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 700; opacity: .7; }
.lang_toggle a[aria-current] { background: var(--white); color: var(--ink); opacity: 1; }
.lang_toggle a:hover { opacity: 1; }
#menuicon { width: 46px; height: 46px; border: 2px solid currentColor; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
#menuicon span { width: 18px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
#menuicon[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#menuicon[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menuicon[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#header.is_solid, #header:hover, #header:focus-within, body.menu_open #header { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
#header.is_solid .lang_toggle a[aria-current], #header:hover .lang_toggle a[aria-current], #header:focus-within .lang_toggle a[aria-current], body.menu_open #header .lang_toggle a[aria-current] { background: var(--ink); color: var(--white); }
#header.is_hidden { transform: translateY(-100%); }

/* Full menu (sitemap) */
#sitemap { position: fixed; inset: 0; z-index: 90; background: var(--navy-dark); color: var(--white); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--header-h); }
.sitemap_inner { min-height: 100%; padding: 48px max(40px, env(safe-area-inset-right)) 48px max(40px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 48px; }
.sitemap_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px 24px; }
.sitemap_list > li > a { display: block; font-size: 28px; font-weight: 600; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgb(255 255 255 / 0.2); }
.sitemap_list .sub_menu a { display: block; font-size: 16px; color: rgb(255 255 255 / 0.7); padding: 6px 0; }
.sitemap_list .sub_menu a:hover, .sitemap_list > li > a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.sitemap_foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
body.menu_open { overflow: hidden; }
body.menu_open #header { background: var(--navy-dark); color: var(--white); box-shadow: none; }
body.menu_open #header .lang_toggle a[aria-current] { background: var(--white); color: var(--ink); }
body.menu_open #header .gnb_wrap { visibility: hidden; }

/* Floating top button */
.to_top {
    position: fixed; right: max(30px, env(safe-area-inset-right)); bottom: max(30px, env(safe-area-inset-bottom)); z-index: 80;
    width: 60px; height: 60px; border-radius: 50%; background: var(--white); color: var(--ink);
    display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgb(0 0 0 / 0.08);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background-color .3s;
}
.to_top.is_visible { opacity: 1; visibility: visible; }
.to_top:hover { background: var(--navy); color: var(--white); }
.to_top i { width: 14px; height: 16px; border-top: 2px solid currentColor; position: relative; }
.to_top i::before { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 13px; background: currentColor; transform: translateX(-50%); }
.to_top i::after { content: ""; position: absolute; left: 50%; top: 3px; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateX(-50%) rotate(45deg); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is_in { opacity: 1; transform: none; }
.no_js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Main
   ========================================================================== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--white); background: var(--navy-dark); }
.hero_slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 1.2s; }
.hero_slide.is_active { opacity: 1; visibility: visible; }
.hero_media { position: absolute; inset: 0; }
.hero_media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, rgb(0 0 0 / 0.05) 40%, rgb(0 0 0 / 0.45) 100%); }
.hero_media img, .hero_media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 8s linear; }
.hero_slide.is_active .hero_media img, .hero_slide.is_active .hero_media video { transform: scale(1); }
.hero_text { position: absolute; left: 0; right: 0; bottom: 110px; }
.hero_title { font-size: clamp(36px, 4.9vw, 76px); line-height: 1.12; font-weight: 700; letter-spacing: -0.045em; max-width: 19em; }
.hero_sub { font-size: clamp(18px, 2vw, 28px); font-weight: 400; margin-top: 32px; }
.hero_sub strong { font-weight: 700; }
.hero_slide.is_active .hero_title, .hero_slide.is_active .hero_sub { animation: rise 1.2s var(--ease) both; }
.hero_slide.is_active .hero_sub { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.hero_controls { position: absolute; left: 0; right: 0; bottom: calc(110px + var(--text-h, 260px) + 28px); display: flex; justify-content: space-between; align-items: center; pointer-events: none; transition: bottom .6s var(--ease); }
.hero_controls > * { pointer-events: auto; }
.hero_pager { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero_pager button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--white); border-radius: 50%; }
.hero_pager button:hover { background: rgb(255 255 255 / 0.15); }
.hero_pager button i { width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; }
.hero_prev i { transform: rotate(-135deg); }
.hero_next i { transform: rotate(45deg); }
.hero_pause i { width: 10px !important; height: 12px !important; border: solid currentColor !important; border-width: 0 3px !important; }
.hero_pause[aria-pressed="true"] i { width: 0 !important; height: 0 !important; border-width: 6px 0 6px 10px !important; border-color: transparent transparent transparent currentColor !important; }
.hero_line { width: 60px; height: 1px; background: rgb(255 255 255 / 0.8); }
.scroll_down { position: absolute; right: var(--gutter); bottom: calc(-1 * (var(--text-h, 260px) + 28px) + 12px); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding-left: 22px; }
.scroll_down::before { content: ""; position: absolute; left: 0; top: -12px; bottom: -12px; width: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.5); }
.hero_progress { position: absolute; left: 0; right: 0; bottom: 40px; height: 2px; background: rgb(255 255 255 / 0.3); }
.hero_progress span { display: block; height: 100%; width: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }

.about_intro { padding: 280px 0; text-align: center; }
.about_intro .statement { max-width: 18em; margin: 0 auto; }

.image_band { position: relative; color: var(--white); overflow: hidden; }
.image_band_bg { position: absolute; inset: 0; }
.image_band_bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); }
.image_band_bg img { width: 100%; height: 100%; object-fit: cover; }
.image_band_list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); min-height: 100svh; }
.image_band_list li { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 30svh !important; text-align: center; gap: 24px; padding: 120px 40px; border-left: 1px solid rgb(255 255 255 / 0.25); }
.image_band_list li:first-child { border-left: 0; }
.image_band_list h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; }
.image_band_list p { font-size: 18px; color: rgb(255 255 255 / 0.85); max-width: 26em; }
.image_band_list .btn { margin-top: 16px; }

.track_record { background: var(--deep); color: var(--white); padding: 160px 0; overflow: hidden; }
.track_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 100px; }
.track_head .section_title { max-width: 18em; }
.track_body { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.stats { display: grid; gap: 56px; }
.stats dt { font-size: 22px; font-weight: 500; }
.stats dd { font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 8px; }
.stats dd::after { content: "+"; font-size: 22px; vertical-align: top; margin-left: 4px; }
.track_list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.4) transparent; }
.track_list > li { scroll-snap-align: start; }
.track_list .media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: rgb(255 255 255 / 0.06); }
.track_list .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.track_list a:hover .media img { transform: scale(1.05); }
.track_list h3 { font-size: 22px; margin: 20px 0 8px; }
.track_list dl { font-size: 15px; color: rgb(255 255 255 / 0.7); }
.track_list dl div { display: flex; gap: 8px; }
.track_list dt { color: rgb(255 255 255 / 0.5); }

.business_head { position: relative; min-height: 86svh; display: flex; align-items: center; text-align: center; color: var(--white); overflow: hidden; }
.business_head_bg { position: absolute; inset: 0; }
.business_head_bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.3), rgb(0 16 31 / 0.65)); }
.business_head_bg img { width: 100%; height: 100%; object-fit: cover; }
.business_head .wide { position: relative; }
.business_head .statement { max-width: 20em; margin: 0 auto; }
.panels { display: grid; grid-template-columns: repeat(3, 1fr); height: 100svh; min-height: 640px; }
.panels li { position: relative; overflow: hidden; }
.panels a { display: block; height: 100%; color: var(--white); }
.panels img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.6); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.panels a:hover img, .panels a:focus-visible img { filter: none; transform: scale(1.04); }
.panel_text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; gap: 20px; }
.panel_text h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; }
.panel_text p { font-size: 17px; max-width: 24em; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.panel_text .more { font-size: 15px; font-weight: 600; border-bottom: 1px solid currentColor; opacity: 0; transition: opacity .6s var(--ease); }
.panels a:hover .panel_text p, .panels a:focus-visible .panel_text p, .panels a:hover .more, .panels a:focus-visible .more { opacity: 1; transform: none; }

.partners { padding: 200px 0 160px; text-align: center; overflow: hidden; }
.partners .statement { max-width: 20em; margin: 0 auto 100px; }
.marquee_wrap { position: relative; display: grid; gap: 40px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee_track { flex: none; display: flex; align-items: center; gap: 80px; padding-right: 80px; animation: marquee 40s linear infinite; }
.marquee.reverse .marquee_track { animation-direction: reverse; }
.marquee_track li { flex: none; width: 200px; height: 60px; display: grid; place-items: center; }
.marquee_track img { max-height: 48px; width: auto; }
.marquee_wrap.is_paused .marquee_track, .marquee_wrap:hover .marquee_track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee_toggle { position: absolute; right: var(--gutter); bottom: -64px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.marquee_toggle i { width: 10px; height: 12px; border: solid var(--ink); border-width: 0 3px; }
.marquee_toggle[aria-pressed="true"] i { width: 0; height: 0; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); }

.news_section { background: var(--soft); padding: 160px 0; }
.news_inner { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; }
.news_head .section_title { margin-bottom: 40px; }
.news_list li { border-top: 1px solid var(--line); }
.news_list li:last-child { border-bottom: 1px solid var(--line); }
.news_list a { display: grid; grid-template-columns: 1fr 40px; column-gap: 24px; align-items: center; padding: 32px 0; }
.news_list .meta { grid-column: 1; display: flex; gap: 12px; font-size: 15px; color: var(--gray); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.news_list h3 { grid-column: 1; font-size: 22px; line-height: 1.45; transition: color .3s; }
.news_list .arrow { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: background-color .3s, border-color .3s; }
.news_list .arrow::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateX(-1px) rotate(45deg); }
.news_list a:hover h3 { color: var(--navy); }
.news_list a:hover .arrow { background: var(--navy); border-color: var(--navy); color: var(--white); }
.empty { color: var(--gray); padding: 48px 0; text-align: center; }

/* ---------- Split CTA + footer ---------- */
.split_cta { position: relative; display: grid; grid-template-columns: 1fr 1fr; color: var(--white); overflow: hidden; }
.split_cta_bg { position: absolute; inset: 0; }
.split_cta_bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); }
.split_cta_bg img { width: 100%; height: 100%; object-fit: cover; }
.split_cta_item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; min-height: 300px; padding: 64px 32px; transition: background-color .4s var(--ease); }
.split_cta_item + .split_cta_item::before { content: ""; position: absolute; left: 0; top: 44px; bottom: 44px; width: 1px; background: rgb(255 255 255 / 0.35); }
.split_cta_item strong { font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
.split_cta_item span { font-size: 18px; }
.split_cta_item:hover { background: rgb(25 31 108 / 0.55); }

#footer { background: var(--navy-dark); color: var(--white); padding: 140px 0 max(40px, env(safe-area-inset-bottom)); }
.footer_slogan { font-size: clamp(40px, 5vw, 72px); font-weight: 600; line-height: 1.3; letter-spacing: -0.035em; margin-bottom: 110px; }
.footer_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
.footer_col h2 { font-size: 19px; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.01em; }
.footer_col dl { display: grid; gap: 8px; font-size: 16px; }
.footer_col dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.footer_col dt { font-weight: 500; }
.footer_col dd { color: rgb(255 255 255 / 0.65); font-variant-numeric: tabular-nums; }
.footer_col a:hover { color: var(--white); text-decoration: underline; }
.footer_bottom { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgb(255 255 255 / 0.15); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer_links { display: flex; gap: 24px; font-size: 15px; }
.footer_links a { color: rgb(255 255 255 / 0.75); }
.footer_links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.copyright { font-size: 13px; color: rgb(255 255 255 / 0.5); }

/* ==========================================================================
   Sub pages
   ========================================================================== */
.sub_visual { position: relative; height: 820px; max-height: 92svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: var(--white); text-align: center; overflow: visible; }
.sub_visual_bg { position: absolute; inset: 0; overflow: hidden; }
.sub_visual_bg::after { content: ""; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; }
.sub_visual_bg img { width: 100%; height: 100%; object-fit: cover; animation: visual_zoom 2.4s var(--ease) both; }
@keyframes visual_zoom { from { transform: scale(1.12); } to { transform: none; } }
.sub_visual_info { position: relative; padding: 0 var(--gutter); margin-bottom: 56px; }
.breadcrumb ol { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 17px; font-weight: 500; }
.breadcrumb li + li::before { content: "·"; margin-right: 10px; opacity: .8; }
.breadcrumb li[aria-current] { font-weight: 600; }
.ico_home { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h6v-6h2v6h6V11h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sub_visual h1 { font-size: clamp(44px, 5.5vw, 80px); font-weight: 700; letter-spacing: -0.04em; margin-top: 24px; line-height: 1.1; }
.sub_visual_desc { font-size: 18px; margin-top: 16px; opacity: .9; }
.sub_visual { padding-bottom: 80px; }
.sub_visual.has_tabs { padding-bottom: 150px; }
.sub_tabs { position: sticky; top: 16px; z-index: 60; display: flex; justify-content: center; width: fit-content; max-width: calc(100% - 32px); margin: -112px auto 56px; transition: top .35s var(--ease); }
body.header_shown .sub_tabs { top: calc(var(--header-h) + 12px); }
.sub_tabs ul { display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: var(--pill); background: rgb(255 255 255 / 0.2); -webkit-backdrop-filter: blur(12.5px); backdrop-filter: blur(12.5px); overflow-x: auto; scrollbar-width: none; max-width: 100%; transition: background-color .35s, box-shadow .35s; }
.sub_tabs a { display: block; height: 43px; line-height: 43px; padding: 0 20px; border-radius: 45px; font-size: 18px; font-weight: 500; color: var(--white); white-space: nowrap; transition: color .35s, background-color .35s; }
.sub_tabs a:hover { background: rgb(255 255 255 / 0.15); }
.sub_tabs a[aria-current] { background: var(--navy); color: var(--white); }
.sub_tabs.is_stuck ul { background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgb(0 0 0 / 0.06); }
.sub_tabs.is_stuck a { color: var(--ink); }
.sub_tabs.is_stuck a:hover { background: var(--soft); }
.sub_tabs.is_stuck a[aria-current] { color: var(--white); background: var(--navy); }
.content_anchor { display: block; scroll-margin-top: 90px; }
.content_anchor:focus { outline: none; }

.page_head { padding-top: 140px; padding-bottom: 20px; }
.page_title { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.25; letter-spacing: -0.04em; }

#sub_page .layout { padding: 80px 0 180px; }
#sub_page .wrap { width: 100%; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
#sub_page .wrap .wrap { padding: 0; }
#sub_page .layout > section + section { margin-top: 160px; }
#sub_page .path_wrap { display: none; }

/* shared content titles */
#sub_page .sub_title_wrap, #sub_page .sub_title2_wrap, #sub_page .product_title { margin-bottom: 60px; }
#sub_page .sub_title_wrap h2, #sub_page .sub_title2_wrap h2, #sub_page .product_title h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.3; letter-spacing: -0.035em; max-width: 22em; }
#sub_page .sub_title_wrap p, #sub_page .sub_title2_wrap p { font-size: 20px; line-height: 1.7; color: var(--text); margin-top: 24px; max-width: 60em; }
#sub_page .sub_title_wrap span { display: block; color: var(--text); margin-top: 20px; max-width: 60em; }
#sub_page .sub_title3_wrap { margin: 80px 0 32px; }
#sub_page .sub_title3_wrap h3, #sub_page .product_title h3, #sub_page .ir_title_wrap h2, #sub_page .ir_title_wrap h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }
#sub_page .sub_title3_wrap span { display: block; color: var(--text); margin-top: 10px; font-size: 17px; }

#sub_page .lr_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
#sub_page .lr_wrap > * { min-width: 0; }
#sub_page .lr_wrap + .lr_wrap { margin-top: 64px; }
#sub_page .lr_wrap img, #sub_page .box1 .right_wrap img { width: 100%; border-radius: var(--radius); }
#sub_page .lr_wrap.two { grid-template-columns: 1fr; }
#sub_page .lr_wrap .right_wrap > p { font-size: 20px; line-height: 1.7; color: var(--text); }

/* tabs inside content */
#sub_page .depth3_wrap, #sub_page .history_path { margin-bottom: 60px; }
#sub_page .depth3_wrap ul, #sub_page .history_path ul { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-radius: var(--pill); border: 1px solid var(--line); }
#sub_page .depth3_wrap a, #sub_page .history_path a, #sub_page .depth3_wrap button, #sub_page .history_path button { display: block; height: 43px; line-height: 43px; padding: 0 20px; border-radius: 45px; font-size: 17px; font-weight: 500; color: var(--ink); }
#sub_page .depth3_wrap a:hover, #sub_page .history_path a:hover, #sub_page .depth3_wrap button:hover, #sub_page .history_path button:hover { background: var(--soft); }
#sub_page .depth3_wrap li.active a, #sub_page .history_path li.active a, #sub_page .depth3_wrap li.active button, #sub_page .history_path li.active button { background: var(--navy); color: var(--white); }

/* About */
.company .c2 .contents ul { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 16px; }
.company .c2 .contents li { overflow: hidden; border-radius: var(--radius); }
.company .c2 .contents li:first-child { grid-row: span 2; }
.company .c2 .contents li:last-child { grid-column: span 2; }
.company .c2 .contents img { width: 100%; height: 100%; object-fit: cover; }
.company .c2_1 { background: var(--soft); padding: 140px 0; }
.company .splide__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 22%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
.company .splide__slide { scroll-snap-align: start; }
.company .splide__slide > div { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.company .splide__slide img { width: 100%; height: 100%; object-fit: cover; }
.company .splide__slide p { font-size: 15px; font-weight: 600; margin-top: 12px; }
.company .c3 .lr_wrap { grid-template-columns: 5fr 7fr; }
.company .c3 .swiper-slide:not(:first-child) { display: none; }
.company .c3 .swiper-slide img { border-radius: var(--radius); }
.company .c3 .right_wrap > div { border-top: 1px solid var(--ink); padding: 28px 0; }
.company .c3 dt { font-size: 26px; font-weight: 600; }
.company .c3 dl + dl { margin-top: 14px; }
.company .c3 dl + dl dt { font-size: 15px; color: var(--navy); }
.company .c3 dd { color: var(--text); margin-top: 6px; }

.cert .contents ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
.cert .img_wrap { background: var(--soft); border-radius: var(--radius); aspect-ratio: 3 / 4; padding: 28px; display: flex; align-items: center; justify-content: center; }
.cert .img_wrap img { width: 100%; height: 100%; object-fit: contain; }
.cert .contents li p { font-size: 17px; font-weight: 600; margin-top: 14px; text-align: center; }

.history .box_wrap { display: none; }
.history .box_wrap.active { display: block; }
.history .box { border-top: 1px solid var(--line); padding: 48px 0; }
.history .box .lr_wrap { grid-template-columns: 320px 1fr; }
.history .year { font-size: clamp(44px, 4.4vw, 64px); font-weight: 700; color: var(--navy); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.history .text_wrap { display: grid; grid-template-columns: 56px 1fr; gap: 16px; font-size: 18px; }
.history .text_wrap + .text_wrap { margin-top: 16px; }
.history .month { font-weight: 700; font-variant-numeric: tabular-nums; }
.history dl { color: var(--text); }

.recruit .c2 .contents ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.recruit .c2 .contents li { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.recruit .c2 .img_wrap img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.recruit .c2 .text_wrap { position: absolute; inset: auto 0 0 0; padding: 20px; display: flex; align-items: center; gap: 10px; color: var(--white); background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); }
.recruit .c2 .icon_wrap img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.recruit .c2 .title { font-weight: 600; }
.recruit .c3 dl { border-top: 1px solid var(--ink); padding: 24px 0; }
.recruit .c3 dt { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.recruit .c3 dd { color: var(--text); }
.recruit .c4 .contents ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.recruit .c4 li { background: var(--soft); border-radius: var(--radius); padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 120px; }
.recruit .c4 li p { font-size: 18px; font-weight: 600; }
.recruit .c4 .icon img { width: 44px; height: 44px; }

.location .swiper-slide { display: none; }
.location .swiper-slide.active { display: block; }
.location .map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 7; background: var(--soft); margin-bottom: 56px; }
.location .map_inner, .location .map_link, .location .map_link a, .location .map > div, .location .map > div > div, .location .map a { display: block; width: 100%; height: 100%; }
.location .map img.map { width: 100%; height: 100%; object-fit: cover; border: 0 !important; margin: 0; aspect-ratio: auto; border-radius: 0; }
.location .lr_wrap { grid-template-columns: 1fr 2fr; border-top: 1px solid var(--ink); padding-top: 28px; }
.location .lr_wrap h2 { font-size: 26px; }
.location .info dl { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 6px 0; }
.location .info dt { font-weight: 600; }
.location .info dd { color: var(--text); font-variant-numeric: tabular-nums; }
.location .naver a { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; height: 52px; padding: 0 24px; border: 1px solid var(--ink); border-radius: var(--pill); font-weight: 500; }
.location .naver a:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.location .naver .icon img { width: 20px; height: 20px; }

/* Products + delivery lists */
.product.list .sub_title_wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.product.list .contents ul, .business.delivery .contents ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 20px; }
.product.list .img_wrap, .business.delivery .img_wrap { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); }
.product.list .img_wrap { padding: 28px; }
.product.list .img_wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.business.delivery .img_wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.product.list a:hover img, .business.delivery a:hover img { transform: scale(1.05); }
.product.list figcaption, .business.delivery figcaption { padding-top: 20px; }
.product.list figcaption .title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product.list figcaption h3, .business.delivery figcaption h3 { font-size: 24px; }
.product.list a:hover h3, .business.delivery a:hover h3 { color: var(--navy); }
.product.list figcaption .icon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.product.list figcaption .icon svg { width: 16px; height: 16px; }
.product.list figcaption .icon svg * { stroke: var(--ink); }
.product.list figcaption p { color: var(--text); margin-top: 10px; font-size: 16px; }
.business.delivery .category_wrap { display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--navy); background: rgb(25 31 108 / 0.07); padding: 4px 12px; border-radius: var(--pill); }
.business.delivery .info { margin-top: 10px; color: var(--text); font-size: 15px; }

.product.detail .c2 .contents { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.product.detail .c2 .img_wrap { display: grid; gap: 16px; }
.product.detail .img_wrap img { border-radius: var(--radius); width: 100%; }
.product.detail .c2 .img_wrap.border img { background: var(--soft); }
.product.detail .text_wrap .text { font-size: 20px; line-height: 1.7; color: var(--text); }
.product.detail .layout > section:not(.c2):not(.c8) .contents { background: var(--soft); border-radius: var(--radius); padding: 32px; }
.product.detail .splide__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
.product.detail .splide__slide { scroll-snap-align: start; }
.product.detail .splide__slide .img_wrap { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.product.detail .splide__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.product.detail figcaption h4, .product.detail figcaption h5 { font-size: 22px; margin: 16px 0 6px; }
.product.detail figcaption p { font-size: 15px; color: var(--text); }
.product.detail figure.image { margin: 0; }

/* Tables & editor content */
#sub_page table { font-size: 15px; }
#sub_page th { background: var(--navy); color: var(--white); font-weight: 600; padding: 14px 16px; text-align: center; }
#sub_page td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; color: var(--text); }
#sub_page td.fwb { font-weight: 700; color: var(--navy); background: rgb(25 31 108 / 0.05); }
#sub_page .box4, #sub_page .table_wrap, #sub_page .product_table, .ir .content_wrap > .ir_index { overflow-x: auto; max-width: 100%; }
.editor-content img, #sub_page .img_wrap img, #sub_page .product_table img { max-width: 100%; height: auto; }
.editor-content p + p { margin-top: 12px; }
.editor-content a { text-decoration: underline; color: var(--navy); }

/* Business info pages */
#sub_page .business_contents + .business_contents { margin-top: 120px; }
#sub_page .sub_title2_wrap { padding-bottom: 56px; border-bottom: 1px solid var(--line); }
#sub_page .box1 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 64px; }
#sub_page .box1 h3 { font-size: 32px; margin-bottom: 20px; }
#sub_page .box1 p { color: var(--text); }
#sub_page .box1 dl { margin-top: 20px; background: var(--soft); border-radius: var(--radius); padding: 20px 24px; font-size: 16px; color: var(--text); }
#sub_page .box1 dt { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
#sub_page .box2 ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
#sub_page .box2 li { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, background-color .3s; }
#sub_page .box2 li:hover { border-color: var(--navy); background: rgb(25 31 108 / 0.03); }
#sub_page .box2 .num { font-size: 15px; font-weight: 700; color: var(--navy); }
#sub_page .box2 .text { font-size: 18px; font-weight: 600; min-height: 56px; }
#sub_page .box2 .icon img { width: 44px; height: 44px; margin: 8px 0; }
#sub_page .box2 li span { font-size: 15px; color: var(--gray); }
#sub_page .box3 ol li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--text); }
#sub_page .box3 ol li:first-child { border-top: 1px solid var(--ink); }
#sub_page .box3 ol li p:first-child { font-weight: 700; color: var(--navy); }
#sub_page .box0 { display: grid; gap: 20px; margin-top: 64px; }
#sub_page .box0 .lr_wrap { display: block; margin: 0; }

.business.delivery_detail .swiper_wrap { max-width: 960px; }
.business.delivery_detail .swiper { position: relative; border-radius: var(--radius); overflow: hidden; }
.business.delivery_detail .swiper-slide { display: none; }
.business.delivery_detail .swiper-slide.active { display: block; }
.business.delivery_detail .swiper-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.business.delivery_detail .swiper-button-prev, .business.delivery_detail .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.business.delivery_detail .swiper-button-prev { left: 16px; }
.business.delivery_detail .swiper-button-next { right: 16px; }
.business.delivery_detail .swiper-button-prev::after, .business.delivery_detail .swiper-button-next::after { content: ""; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 0 2px 2px; }
.business.delivery_detail .swiper-button-prev::after { transform: translateX(2px) rotate(45deg); }
.business.delivery_detail .swiper-button-next::after { transform: translateX(-2px) rotate(-135deg); }
.business.delivery_detail .swiper-pagination { display: none; }
.business.delivery_detail .contents + .contents { margin-top: 48px; }
.business.delivery_detail .category { display: inline-block; font-size: 14px; font-weight: 600; color: var(--navy); background: rgb(25 31 108 / 0.07); padding: 4px 12px; border-radius: var(--pill); margin-bottom: 14px; }
.business.delivery_detail .left_wrap h2, .business.delivery_detail .left_wrap h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.25; }
.business.delivery_detail .info_wrap li { border-top: 1px solid var(--line); }
.business.delivery_detail .info_wrap li:first-child { border-top-color: var(--ink); }
.business.delivery_detail .info_wrap dl { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; }
.business.delivery_detail .info_wrap dt { font-weight: 600; }
.business.delivery_detail .info_wrap dd { color: var(--text); }

.research.performance .swiper-slide { display: none; }
.research.performance .swiper-slide.active { display: block; }

#sub_page .back_btn { margin-top: 64px; display: flex; justify-content: center; }
#sub_page .back_btn a { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 26px; border: 1px solid var(--ink); border-radius: var(--pill); font-weight: 500; }
#sub_page .back_btn a:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
#sub_page .back_btn a:hover img { filter: invert(1); }
#sub_page .back_btn a img { width: 16px; height: 16px; }
#sub_page .back_btn .back_icon::after { content: "Back to list"; }

/* Boards */
#sub_page .table_wrap table { min-width: 600px; }
#sub_page .table_wrap th { background: none; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
#sub_page .table_wrap td { padding: 22px 16px; }
#sub_page .table_wrap td:nth-child(2) { text-align: left; }
#sub_page .table_wrap td a { color: var(--ink); font-weight: 500; }
#sub_page .table_wrap tr:hover td a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.pagination_style { margin-top: 64px; display: flex; justify-content: center; }
.page_btn, .page_btn .num_box { display: flex; align-items: center; justify-content: center; gap: 6px; }
.page_btn a, .page_btn .is_disabled > span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 50%; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.page_btn a:hover { background: var(--soft); }
.page_btn a.active { background: var(--navy); color: var(--white); }
.page_btn .btn_box { padding: 0 !important; }
.page_btn .is_disabled > span { color: var(--line); }
.page_btn .btn_box a:empty::after, .page_btn .is_disabled > span:empty::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.page_btn .next a:empty::after, .page_btn .next.is_disabled > span:empty::after { transform: rotate(-135deg); }
.page_btn svg { width: 8px; height: 14px; }

.ir_index .ir_body > li { border-top: 1px solid var(--line); }
.ir_index .ir_body > li:first-child { border-top-color: var(--ink); }
.ir_index .ir_body > li:last-child { border-bottom: 1px solid var(--line); }
.ir_index .ir_body .rows { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; }
.ir_index .ir_body .title { font-weight: 500; }
.ir_index .ir_body .rows:hover .title { color: var(--navy); }
.ir_index .ir_body .date, .ir_index .ir_body .date_wrap { font-size: 15px; color: var(--gray); white-space: nowrap; font-variant-numeric: tabular-nums; }

.board_wrap .board_title { padding-bottom: 32px; border-bottom: 1px solid var(--ink); }
.board_wrap .board_title .date { font-size: 15px; color: var(--gray); margin-bottom: 12px; }
.board_wrap .board_title .title { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; }
.board_wrap .board_content { padding: 48px 0; color: var(--text); }
.board_bottom .down_title { display: flex; flex-wrap: wrap; gap: 10px; }
.board_bottom .down_title a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--pill); padding: 10px 20px; font-size: 15px; }
.board_bottom .down_title a:hover { border-color: var(--navy); color: var(--navy); }
.board_bottom .down_title .icon img { width: 16px; height: 16px; }
.next_prev_wrap { margin-top: 40px; border-top: 1px solid var(--line); }
.next_prev_wrap > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.next_prev_wrap .left { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.next_prev_wrap .arrow img { width: 12px; height: 12px; }
.next_prev_wrap .prev .arrow img { transform: rotate(180deg); }
.next_prev_wrap .right a:hover { color: var(--navy); text-decoration: underline; }
.empty_post { color: var(--gray); }

/* IR */
.ir .lr_wrap { grid-template-columns: 240px 1fr !important; }
.ir .left_wrap { position: sticky; top: 90px; }
.ir .left_wrap ul { display: flex; flex-direction: column; gap: 4px; }
.ir .left_wrap a { display: block; padding: 12px 20px; border-radius: var(--pill); font-weight: 500; }
.ir .left_wrap a:hover { background: var(--soft); }
.ir .left_wrap li.active a { background: var(--navy); color: var(--white); }
.ir .left_wrap .swiper-pagination { display: none; }
.ir .content_wrap + .content_wrap { margin-top: 120px; }
.ir .ir_title_wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.ir .ir_title_wrap .more_link { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--pill); font-size: 15px; font-weight: 500; }
.ir .ir_title_wrap .more_link:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ir table img, .ir .down_icon img { width: 24px; height: 24px; margin: 0 auto; }
.ir .ir_index td a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.ir .ir_index td a:hover { background: var(--soft); }
.ir .qna_wrap p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.ir .qna_wrap .title { color: var(--ink); font-weight: 600; }
.ir .count, .ir .qna_wrap .date { font-size: 13px; color: var(--gray); margin-left: 6px; }

/* Video */
.news.video .contents ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 20px; }
.news.video .contents li a { display: block; }
.news.video .contents li img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); transition: transform .8s var(--ease); }
.news.video .contents li .img_wrap { overflow: hidden; border-radius: var(--radius); }
.news.video .contents li a:hover img { transform: scale(1.05); }
.news.video .contents li p { font-size: 20px; font-weight: 600; margin-top: 16px; }
.popup_style { position: fixed; inset: 0; z-index: 150; background: rgb(0 0 0 / 0.8); display: none; align-items: center; justify-content: center; padding: 24px; }
.popup_style.active { display: flex; }
.popup_style .popup_wrap { position: relative; width: min(1100px, 100%); }
.popup_style .close { position: absolute; top: -60px; right: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.popup_style .close img { width: 16px; height: 16px; }
.video_popup_player { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video_popup_player iframe { width: 100%; height: 100%; border: 0; }
.video_popup_title { color: var(--white); font-size: 18px; font-weight: 600; margin-top: 16px; }

/* Inquiry form: label column + field, bordered rows */
.contact .form_box { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.form_box form { grid-column: 2; }
.form_box .label_wrap, .form_box .select_field { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; transition: border-color .3s; }
.form_box .label_wrap:focus-within, .form_box .select_field:focus-within { border-color: var(--navy); }
.form_box .label_wrap > label, .form_box .select_field { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; padding: 0 20px; min-height: 60px; }
.form_box .label_text { font-weight: 600; font-size: 17px; }
.form_box .label_text::after { content: " *"; color: var(--navy); }
.form_box input[type="text"], .form_box input[type="email"], .form_box input[type="tel"], .form_box input[type="password"], .form_box textarea { width: 100%; border: 0; background: none; padding: 18px 0; font-size: 17px; outline: none; }
.form_box textarea { min-height: 180px; resize: vertical; }
.form_box .label_wrap:has(textarea) > label { align-items: start; padding-top: 18px; }
.form_box ::placeholder { color: #9a9a9a; }
.select_box { position: relative; }
.select_selected { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; text-align: left; font-size: 17px; }
.select_selected::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-left: 12px; }
.select_options { display: none; position: absolute; left: -20px; right: -20px; top: 100%; z-index: 5; background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.08); }
.select_box.active .select_options { display: block; }
.select_options li { padding: 12px 14px; border-radius: 4px; cursor: pointer; }
.select_options li:hover, .select_options li.active { background: var(--soft); color: var(--navy); }
.form_box .error { border-color: #c62828 !important; }
.field_error { color: #c62828; font-size: 15px; font-weight: 600; padding: 0 20px 14px; grid-column: 1 / -1; }
.privacy_wrap { border: 1px solid var(--line); border-radius: 4px; padding: 24px 20px; margin: 12px 0; }
.privacy_wrap label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.privacy_wrap .label_text::after { content: ""; }
.privacy_content { max-height: 180px; overflow-y: auto; color: var(--text); font-size: 15px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink); }
.form_box input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--navy); }
.button_wrap { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 32px; }
.button_wrap button[type="submit"] { height: 56px; padding: 0 40px; border-radius: var(--pill); background: var(--navy); color: var(--white); font-size: 17px; font-weight: 600; transition: background-color .3s; }
.button_wrap button[type="submit"]:hover { background: var(--navy-hover); }
.button_wrap button:disabled { opacity: .6; cursor: progress; }
.form_status { color: var(--text); font-size: 15px; }
.form_status:empty { display: none; }
.contact_intro { position: sticky; top: 110px; }
.contact_intro .page_title { margin-bottom: 32px; }
.contact_intro p.lead { font-size: 22px; color: var(--gray); margin-bottom: 40px; }
.contact_intro dl { border-top: 1px solid var(--line); }
.contact_intro dl div { display: grid; grid-template-columns: 140px 1fr; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact_intro dt { font-size: 20px; font-weight: 600; }
.contact_intro dd a { font-size: 20px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
    #gnb > li > a { font-size: 17px; }
    #header .header_inner { gap: 28px; }
}
@media (max-width: 1100px) {
    :root { --header-h: 72px; }
    .gnb_wrap { display: none; }
    #header .header_inner { justify-content: space-between; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    #header .logo img { height: 28px; }
    .image_band_list { grid-template-columns: 1fr; min-height: 0; }
    .image_band_list li { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.25); padding: 80px 24px; }
    .image_band_list li:first-child { border-top: 0; }
    .track_body { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .stats dd { font-size: 44px; }
    .panels { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .panels li { height: 70svh; min-height: 420px; }
    .panel_text p, .panel_text .more { opacity: 1; transform: none; }
    .panels img { filter: grayscale(0.3) brightness(0.55); }
    .news_inner { grid-template-columns: 1fr; gap: 48px; }
    .footer_grid { grid-template-columns: 1fr 1fr; }
    #sub_page .lr_wrap, #sub_page .box1, .product.detail .c2 .contents, .company .c3 .lr_wrap, .contact .form_box { grid-template-columns: 1fr; }
    .form_box form { grid-column: auto; }
    .contact_intro { position: static; }
    .ir .lr_wrap { grid-template-columns: 1fr !important; }
    .ir .left_wrap { position: static; overflow-x: auto; scrollbar-width: none; }
    .ir .left_wrap ul { flex-direction: row; width: max-content; }
    .product.list .contents ul, .business.delivery .contents ul, .cert .contents ul, .news.video .contents ul { grid-template-columns: repeat(2, 1fr); }
    .recruit .c2 .contents ul, #sub_page .box2 ul { grid-template-columns: repeat(3, 1fr); }
    .recruit .c4 .contents ul { grid-template-columns: repeat(2, 1fr); }
    .history .box .lr_wrap, .location .lr_wrap { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    :root { --gutter: 16px; }
    .eyebrow { font-size: 17px; margin-bottom: 14px; }
    .hero_text { bottom: 96px; }
    .hero_controls .scroll_down { display: none; }
    .hero_sub { margin-top: 18px; }
    .about_intro { padding: 140px 0; }
    .track_record, .news_section { padding: 100px 0; }
    .track_head { flex-direction: column; align-items: flex-start; margin-bottom: 56px; }
    .stats dt { font-size: 15px; }
    .stats dd { font-size: 34px; }
    .track_list { grid-auto-columns: 78%; }
    .partners { padding: 120px 0 110px; }
    .partners .statement { margin-bottom: 56px; }
    .marquee_track { gap: 40px; padding-right: 40px; }
    .marquee_track li { width: 130px; height: 44px; }
    .marquee_track img { max-height: 36px; }
    .split_cta { grid-template-columns: 1fr; }
    .split_cta_item { min-height: 220px; }
    .split_cta_item + .split_cta_item::before { left: 32px; right: 32px; top: 0; bottom: auto; width: auto; height: 1px; }
    #footer { padding-top: 90px; }
    .footer_slogan { margin-bottom: 64px; }
    .footer_grid { grid-template-columns: 1fr; gap: 40px; }
    .footer_bottom { flex-direction: column; align-items: flex-start; }
    .to_top { width: 48px; height: 48px; right: 16px; bottom: 16px; }
    .sitemap_inner { padding: 32px 16px; }
    .sitemap_list { grid-template-columns: 1fr; gap: 28px; }
    .sitemap_list > li > a { font-size: 24px; }
    .sub_visual { height: 640px; min-height: 480px; }
    .sub_visual_desc { font-size: 16px; }
    .sub_tabs a { font-size: 15px; padding: 0 16px; height: 40px; line-height: 40px; }
    .page_head { padding-top: 100px; }
    #sub_page .layout { padding: 48px 0 120px; }
    #sub_page .layout > section + section { margin-top: 100px; }
    br.full_only { display: none; }
    .company .c2 .contents ul { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .company .c2 .contents li { aspect-ratio: 4 / 3; }
    .company .c2 .contents li:first-child, .company .c2 .contents li:last-child { grid-row: auto; grid-column: span 2; }
    .product.list .contents ul, .business.delivery .contents ul, .news.video .contents ul { grid-template-columns: 1fr; }
    .recruit .c2 .contents ul, #sub_page .box2 ul, .cert .contents ul { grid-template-columns: 1fr 1fr; }
    .location .map { aspect-ratio: 4 / 3; }
    .location .info dl { grid-template-columns: 80px 1fr; }
    .ir_index .ir_body .rows { flex-direction: column; align-items: flex-start; gap: 6px; }
    .form_box .label_wrap > label, .form_box .select_field { grid-template-columns: 1fr; gap: 0; padding-top: 14px; }
    .form_box input[type="text"], .form_box input[type="email"], .form_box input[type="tel"], .form_box textarea, .select_selected { padding-top: 8px; }
    .button_wrap { flex-direction: column-reverse; align-items: stretch; }
    .business.delivery_detail .info_wrap dl { grid-template-columns: 120px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .hero_media img, .hero_media video { transform: none; }
    .marquee { overflow-x: auto; }
}

/* ---------- alignment fixes after first capture ---------- */
.panel_text { justify-content: flex-start; padding-top: 42%; }
.split_cta_item { justify-content: flex-start; padding-top: 96px; }
.footer_bottom { padding-right: 90px; }
@media (max-width: 1100px) { .panel_text { padding-top: 30%; } }
@media (max-width: 767px) { .footer_bottom { padding-right: 0; padding-bottom: 60px; } .split_cta_item { padding-top: 64px; } }
.hero_title { text-wrap: balance; }
.product.list .img_wrap { background: var(--white); border: 1px solid var(--line); }
#sub_page .depth3_wrap ul, #sub_page .history_path ul { max-width: 100%; }
.history .text_wrap > *, .history .lr_wrap > * { min-width: 0; }
.history dl, .history dd { overflow-wrap: anywhere; }
#sub_page .contents, #sub_page .table_wrap { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
    .page_btn, .page_btn .num_box { gap: 2px; flex-wrap: wrap; }
    .page_btn a, .page_btn .is_disabled > span { min-width: 36px; height: 36px; font-size: 15px; }
    .page_btn .page_btn { margin: 0 !important; }
}
#sub_page .back_btn.ver2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 32px; }
#sub_page .back_btn.ver2 .np_btn { display: flex; align-items: center; gap: 12px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; color: var(--ink); }
#sub_page .back_btn.ver2 .np_btn:hover { background: none; color: var(--navy); }
#sub_page .back_btn.ver2 .np_btn p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sub_page .back_btn.ver2 .next { flex-direction: row-reverse; text-align: right; }
#sub_page .back_btn.ver2 .next .icon { transform: scaleX(-1); }
#sub_page .back_btn.ver2 .np_btn .icon svg { width: 16px; height: 16px; }
#sub_page .back_btn.ver2 .is_disabled { color: var(--gray); }
@media (max-width: 767px) { #sub_page .back_btn.ver2 { grid-template-columns: 1fr; } #sub_page .back_btn.ver2 .back_icon { justify-self: center; order: 3; } }

/* ---------- 초대형 화면 최대 폭 (1920px) ---------- */
#header .header_inner,
.page_head.wide,
#sub_page .layout,
#footer .wide.footer_inner {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}