@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

:root {--content-max:1440px;}
.contain {width:100%; max-width:var(--content-max); padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; box-sizing:border-box;}
.page-main .contain {max-width:var(--content-max);}
.page-main #header .contain,
.page-main #footer .contain {max-width:var(--content-max);}
#header .contain,
#footer .contain {max-width:var(--content-max);}
.page-main #container {padding-top:0;}
.page-main #gnb>ul>li {padding:0 clamp(16px,2.3vw,38px);}
.page-main #gnb>ul>li>a {white-space:nowrap;}
.page-main .sitelogo {flex-shrink:0;}


#header {position:fixed; top:0; left:0; z-index:100; width:100%; background:#fff; border-bottom:1px solid #ddd; transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); z-index:10;}

.sitelogo {color:#18365b; font-size:var(--font-size-32); font-weight:700; letter-spacing:-.03em; line-height:1.3em;}
.sitelogo {flex-shrink:0;}
.sitelogo a {display:flex;align-items:center;gap:14px;color:inherit;}
.brand-logo {display:block;flex-shrink:0;width:auto;height:58px;aspect-ratio:200/252;letter-spacing:normal;line-height:normal;}
.brand-text {display:inline-flex;flex-direction:column;align-items:stretch;gap:5px;justify-content:center;line-height:1.2;}
.brand-name {font-family:Pretendard,Arial,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.035em;line-height:1.15;white-space:nowrap;}
.brand-name-en {display:block;width:100%;box-sizing:border-box;font-family:Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.20em;color:#47617f;line-height:1.2;white-space:nowrap;text-align:left;}

#header.is-over-visual:not(.is-solid):not(.is-hover):not(.is-gnb-open):not(:hover) .brand-name {color:#fff;}
#header.is-over-visual:not(.is-solid):not(.is-hover):not(.is-gnb-open):not(:hover) .brand-name-en {color:rgba(255,255,255,.78);}
#header.is-over-visual:not(.is-solid):not(.is-hover):not(.is-gnb-open) .brand-logo {color:#fff;}
.mobile-navigation__logo {gap:12px;color:#18365b;}
.mobile-navigation__logo .brand-logo {height:48px;width:auto;}
.mobile-navigation__logo .brand-name {font-size:23px;}
.mobile-navigation__logo .brand-name-en {font-size:9.5px;letter-spacing:.14em;}
.sitelogo img{display:block;width:400px;height:auto;}

#gnb {text-align:center; flex:1 1 auto; min-width:0; width:1%;}
#gnb>ul {display:flex; justify-content:flex-end;} 
#gnb>ul>li {position:relative; padding:0 clamp(16px,2.3vw,38px);}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; flex-direction: column; justify-content:center; height:var(--header-height); color:#242424; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.3em;}
#gnb>ul>li.active>a {color:var(--color-primary);}
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:var(--space-20) var(--space-10);}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-10) 0; color:#454545; font-size:var(--font-size-16); line-height:1.33em;}
#gnb .submenu>ul>li>a:hover {color:var(--color-primary); text-decoration:underline;}
#gnb .submenu>ul>li.active>a {color:#42ade2;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #eee;}

/* mobile navigation — see css/mobile-menu.css (Water Eyes plan1 pattern) */

/* main */
.main-section {padding:var(--space-100) 0;}
.main-section h2 {font-size:var(--font-size-40); font-weight:700; line-height:1.3em; letter-spacing:-.04em; text-align:center;}

.main-visual {height:50vh; background:#333; color:#fff;}

.main-about {background:#eee;}
.main-business {background:#fff;}
.main-contact {background:#cfd8eb;}

/* sub layout */
.sub-visual {display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; margin-top:0; width:100%; height:var(--sub-visual-height,480px); min-height:320px; padding-top:0; padding-bottom:76px; text-align:left; position:relative; overflow:hidden; background:#1a3342; color:#fff; box-sizing:border-box;}
.sub-visual__inner {position:relative; z-index:2; flex:1; display:flex; align-items:center; width:100%; max-width:var(--content-max); margin-left:auto; margin-right:auto; padding-top:var(--header-height,88px); padding-left:0; padding-right:0; box-sizing:border-box; min-height:0;}
.sub-visual__bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; z-index:0;}
.sub-visual:before {content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.4); pointer-events:none;}
.sub-visual:has(.sub-visual__bg[src*="sub-visual-support"])::before,
.sub-visual:has(.sub-visual__bg[src*="sub-visual-customer-inquiry"])::before,
.sub-visual:has(.sub-visual__bg[src*="sub-visual-support-laptop"])::before,
.sub-visual:has(.sub-visual__bg[src*="sub-visual-performance"])::before,
.sub-visual:has(.sub-visual__bg[src*="sub-visual-about"])::before,
.sub-visual:has(.sub-visual__bg[src*="sub-visual-business"])::before {background:rgba(15,34,46,.52);}
.sub-visual:has(.sub-visual__bg[src*="sub-visual-support-laptop"]) .sub-visual__bg {object-position:center 72%;}
.sub-visual:has(.sub-visual__bg[src*="sub-visual-business"]) .sub-visual__bg {object-position:center 72%;}
.sub-visual:has(.sub-visual__bg[src*="sub-visual-performance"]) .sub-visual__bg {object-position:center 72%;}
.sub-visual:has(.sub-visual__bg[src*="sub-visual-about"]) .sub-visual__bg {object-position:center 58%;}
.sub-visual__copy {position:relative; z-index:1; width:100%; padding-left:0; padding-right:0; box-sizing:border-box;}
.sub-visual__eyebrow {margin:0 0 14px; color:var(--color-primary,#e87722); font-size:12px; font-weight:800; letter-spacing:.2em; line-height:1.4;}
.sub-visual__tagline {margin:0; color:#fff; font-size:clamp(34px,4.5vw,56px); font-weight:700; line-height:1.3; letter-spacing:-.04em;}
.sub-visual__tagline strong {font-weight:inherit;}
.sub-visual__desc {max-width:640px; margin:18px 0 0; color:rgba(255,255,255,.6); font-size:clamp(16px,1.6vw,18px); font-weight:400; line-height:1.65; letter-spacing:-.02em;}

.lnb-wrap {position:relative; z-index:5; margin-top:-76px; border:0; background:transparent;}
.lnb-wrap::after {display:none;}
.lnb-bar {position:relative; z-index:2; width:100%; max-width:var(--content-max); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-sizing:border-box;}
.lnb-trail {display:flex; flex-wrap:nowrap; align-items:center; gap:0; min-height:64px; margin:0; padding:0; box-sizing:border-box; background:none; border:0;}
.lnb-home {display:inline-flex; align-items:center; justify-content:flex-start; flex-shrink:0; width:auto; min-width:0; min-height:64px; margin-right:0; line-height:0; opacity:1; transition:opacity .2s ease;}
.lnb-home:hover,
.lnb-home:focus-visible {opacity:.88; outline:none;}
.lnb-home img {display:block; width:18px; height:18px;}
.lnb-trail-sep {flex-shrink:0; align-self:center; width:1px; height:14px; margin:0 32px; background:rgba(255,255,255,.35);}
.lnb-home + .lnb-trail-sep {margin-left:32px; margin-right:32px;}
.lnb-drop + .lnb-trail-sep {margin-left:32px; margin-right:32px;}
.lnb-drop {position:relative; flex-shrink:0; display:inline-flex; flex-direction:column; align-items:stretch; width:220px; min-width:220px; max-width:220px;}
.lnb-drop-toggle {display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:64px; padding:0; border:0; background:transparent; color:#fff; font-family:inherit; font-size:18px; font-weight:500; letter-spacing:-.02em; line-height:1.3; cursor:pointer; white-space:nowrap; box-sizing:border-box;}
.lnb-drop-toggle:hover,
.lnb-drop-toggle:focus-visible {color:#fff; outline:none;}
.lnb-drop-icon {flex-shrink:0; display:block; width:12px; height:8px; margin-top:1px; border:0; background:url("../images/common/icon-lnb-chevron.svg") no-repeat 50% 50%; background-size:12px 8px; transition:transform .2s ease;}
.lnb-drop:hover .lnb-drop-icon,
.lnb-drop:focus-within .lnb-drop-icon {transform:rotate(180deg);}
.lnb-drop-menu {display:none; position:absolute; left:0; top:100%; z-index:25; width:100%; min-width:100%; box-sizing:border-box; margin:0; padding:16px 0; list-style:none; background:#fff; border:0; border-radius:0; box-shadow:0 8px 24px rgba(0,0,0,.12);}
.lnb-drop:hover .lnb-drop-menu,
.lnb-drop:focus-within .lnb-drop-menu {display:block;}
.lnb-drop-menu a {display:block; padding:13px 32px; color:#242424; font-size:16px; font-weight:400; line-height:1.35; text-decoration:none; white-space:nowrap; transition:background .2s ease,color .2s ease;}
.lnb-drop-menu a:hover,
.lnb-drop-menu a:focus-visible {background:var(--color-primary,#e87722); color:#fff; outline:none;}
.lnb-drop-menu li.active a {color:var(--color-primary,#e87722); font-weight:500; background:transparent;}
.lnb-drop-menu li.active a:hover,
.lnb-drop-menu li.active a:focus-visible {background:var(--color-primary,#e87722); color:#fff;}
.lnb-drop-menu a.is-unlinked {cursor:default; opacity:.55;}
.lnb-current {display:inline-flex; align-items:center; min-height:64px; color:#fff; font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.3; white-space:nowrap;}
.lnb-trail .lnb-current {opacity:1;}

#contArea {width:100%; max-width:var(--content-max); margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; box-sizing:border-box;}
#contArea.wide {max-width:100%; width:100%; padding:0;}
#contArea.wide .sub-title {padding-left:var(--space-container); padding-right:var(--space-container);}

body:not(.page-main) #container {padding-top:100px;}

.sub-title {padding:0; margin:0 0 64px; text-align:left;}
.sub-title h2 {display:inline-flex; align-items:center; gap:14px; margin:0; color:#242424; font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-.04em; line-height:1.25;}
.sub-title h2::before {content:""; flex-shrink:0; width:10px; height:10px; border-radius:0; background:var(--color-primary,#e87722);}
.sub-title.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

#contArea .real-cont {padding-top:0;}

.real-cont {min-height:300px; padding-bottom:120px;}


/* footer */
#footer {background:#242424; color:#fff;}

/* Supplied Haesung H identity */
#header.is-over-visual:not(.is-solid):not(.is-hover):not(.is-gnb-open):not(:hover) .sitelogo {color:#fff;}
#header.is-over-visual:hover .brand-logo {color:#18365b;}

.sitelogo .brand-name, .mobile-navigation__logo .brand-name {color:#242424;}