@charset "utf-8";

:root { --auto-header-height: 86px; --auto-blue: #0875e6; --auto-deep-blue: #0668cd; }
#t2d_main_container, #t2d_sub_container { padding-top: var(--auto-header-height); }
body.auto-menu-open { overflow: hidden; }

#gnb_nav_wrap { position: fixed; inset: 0 0 auto; z-index: 1010; display: block; width: 100%; background: #fff; border-bottom: 0; }
#gnb_nav_wrap, #gnb_nav_wrap * { box-sizing: border-box; }
#gnb_nav_wrap .t2d_gng_wrap { width: 100%; }
#gnb_nav_wrap .auto-desktop-header { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr) 112px; align-items: center; gap: 22px; width: calc(100% - 80px); height: var(--auto-header-height); margin: 0 auto; }

#gnb_nav_wrap .t2d_toplogo { min-width: 0; line-height: 0; text-align: left; }
#gnb_nav_wrap .t2d_toplogo a { display: inline-block; }
#gnb_nav_wrap .t2d_toplogo img { display: block; width: auto; max-width: 190px; max-height: 49px; object-fit: contain; }
/* logo 배너가 여러 건이어도 HEADER에는 첫 번째 등록 로고만 노출 */
#gnb_nav_wrap .t2d_toplogo > a:not(:first-of-type),
#gnb_nav_wrap .t2d_toplogo > img:not(:first-of-type) { display: none !important; }

#gnb_nav_wrap .row_wrap { min-width: 0; height: 100%; }
#gnb_nav_wrap .row { display: flex; align-items: stretch; justify-content: center; gap: clamp(8px, 1vw, 22px); height: 100%; margin: 0; padding: 0; list-style: none; }
#gnb_nav_wrap .cell { position: relative; display: flex; align-items: stretch; }
#gnb_nav_wrap .cell > a { position: relative; display: flex; align-items: center; padding: 0 clamp(7px, .55vw, 11px); color: #111; font-family: 'Poppins', 'Pretendard', 'Noto Sans KR', sans-serif; font-size: clamp(18px, calc(.92vw + 3px), 20px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
#gnb_nav_wrap .cell > a::after { content: none !important; display: none !important; }
#gnb_nav_wrap .cell:hover > a, #gnb_nav_wrap .cell:focus-within > a, #gnb_nav_wrap .cell > a.on { color: #075ea9; }

#gnb_nav_wrap .nav_sub { position: absolute; top: 100%; left: 50%; z-index: 1020; display: block; visibility: hidden; width: max-content; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; overflow: hidden; background: var(--auto-blue); border-radius: 11px; box-shadow: 0 12px 24px rgba(4, 42, 75, .16); opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }
#gnb_nav_wrap .has-submenu:hover > .nav_sub, #gnb_nav_wrap .has-submenu:focus-within > .nav_sub { visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#gnb_nav_wrap .nav_sub a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 20px; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center; white-space: nowrap; }
#gnb_nav_wrap .nav_sub a:hover, #gnb_nav_wrap .nav_sub a:focus, #gnb_nav_wrap .nav_sub a.on { background: var(--auto-deep-blue); color: #fff; }

#gnb_nav_wrap .auto-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#gnb_nav_wrap button { font: inherit; }
#gnb_nav_wrap .auto-globe-button, #gnb_nav_wrap .auto-all-menu-button { height: 42px; border: 0; background: transparent; color: #064b91; transition: opacity 160ms ease; }
#gnb_nav_wrap .auto-global-box { position: relative; display: flex; align-items: center; height: 100%; }
#gnb_nav_wrap .auto-globe-button { width: 42px; padding: 0; font-size: 25px; cursor: pointer; opacity: 1; transition: color 220ms ease, opacity 220ms ease; }
#gnb_nav_wrap .auto-global-box:hover .auto-globe-button,
#gnb_nav_wrap .auto-global-box:focus-within .auto-globe-button { color: #62a9f4; }
#gnb_nav_wrap .auto-global-menu { position: absolute; top: 100%; left: 50%; z-index: 1030; visibility: hidden; min-width: 112px; margin: 0; padding: 12px 0; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 14px 26px rgba(0, 47, 112, .16); clip-path: inset(0 0 100% round 8px); opacity: 1; pointer-events: none; transform: translate(-50%, -14px); transition: clip-path 300ms cubic-bezier(.22,.61,.36,1), transform 300ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 300ms; }
#gnb_nav_wrap .auto-global-box:hover .auto-global-menu,
#gnb_nav_wrap .auto-global-box:focus-within .auto-global-menu { visibility: visible; clip-path: inset(0 0 0 round 8px); pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
#gnb_nav_wrap .auto-global-menu a,
#gnb_nav_wrap .auto-global-menu span { display: block; padding: 10px 24px; color: #3e3e3e; font-size: 14px; font-weight: 500; line-height: 1.15; text-align: center; white-space: nowrap; text-decoration: none; transition: color 160ms ease, background-color 160ms ease; }
#gnb_nav_wrap .auto-global-menu li:hover a,
#gnb_nav_wrap .auto-global-menu li:hover span { background: #f2f7fd; color: #075ea9; }
#gnb_nav_wrap .auto-all-menu-button { display: flex; align-items: center; justify-content: center; width: 46px; gap: 0; padding: 0; cursor: pointer; }
#gnb_nav_wrap .auto-all-menu-button:hover { opacity: .72; }
#gnb_nav_wrap .auto-hamburger { display: grid; gap: 6px; width: 28px; }
#gnb_nav_wrap .auto-hamburger span { display: block; height: 2px; background: currentColor; }
#gnb_nav_wrap .auto-all-menu-label { display: none; }

.auto-all-menu { position: fixed; inset: 0; z-index: 7000; display: flex; justify-content: flex-end; visibility: hidden; background: rgba(5, 23, 39, .52); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.auto-all-menu.is-open { visibility: visible; opacity: 1; }
.auto-all-menu-panel { width: min(900px, 78vw); height: 100%; overflow-y: auto; padding: 34px 48px 50px; background: #fff; transform: translateX(100%); transition: transform .24s ease; }
.auto-all-menu.is-open .auto-all-menu-panel { transform: translateX(0); }
.auto-all-menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 2px solid #152434; }
.auto-all-menu-head h2 { margin: 0; color: #152434; font-size: 28px; }
.auto-all-menu-close { width: 42px; height: 42px; border: 0; background: transparent; color: #152434; font-size: 28px; cursor: pointer; }
.auto-all-menu-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin: 0; padding: 16px 0 0; list-style: none; }
.auto-all-menu-list > li { min-height: 135px; padding: 20px 0; border-bottom: 1px solid #e5ebf0; }
.auto-all-menu-list a { color: #536273; }
.auto-all-menu-list .auto-all-menu-depth1 { display: block; margin-bottom: 12px; color: #075baa; font-size: 18px; font-weight: 700; }
.auto-all-menu-list ul { margin: 0; padding: 0; list-style: none; }
.auto-all-menu-list ul a { display: block; padding: 4px 0; font-size: 15px; line-height: 1.4; }
.auto-all-menu-list a:hover, .auto-all-menu-list a:focus { color: #075baa; text-decoration: underline; }

@media (max-width: 1500px) {
    #gnb_nav_wrap .auto-desktop-header { grid-template-columns: 190px minmax(0, 1fr) 100px; gap: 14px; width: calc(100% - 56px); }
    #gnb_nav_wrap .t2d_toplogo img { max-width: 175px; }
    #gnb_nav_wrap .row { gap: 5px; }
    #gnb_nav_wrap .cell > a { padding-right: 6px; padding-left: 6px; font-size: 18px; }
    #gnb_nav_wrap .auto-header-actions { gap: 6px; }
}

@media (max-width: 1380px) {
    #gnb_nav_wrap .auto-desktop-header { grid-template-columns: 175px minmax(0, 1fr) 96px; gap: 10px; width: calc(100% - 40px); }
    #gnb_nav_wrap .t2d_toplogo img { max-width: 165px; }
    #gnb_nav_wrap .row { gap: 3px; }
    #gnb_nav_wrap .cell > a { padding-right: 5px; padding-left: 5px; font-size: 17px; }
    #gnb_nav_wrap .auto-header-actions { gap: 4px; }
    #gnb_nav_wrap .auto-globe-button { width: 40px; font-size: 23px; }
    #gnb_nav_wrap .auto-all-menu-button { width: 42px; }
    #gnb_nav_wrap .auto-hamburger { width: 25px; gap: 5px; }
}

@media (max-width: 1200px) {
    #gnb_nav_wrap, .auto-all-menu { display: none !important; }
    #t2d_main_container { padding-top: 0; }
    #t2d_sub_container { padding-top: 72px; }
}