@charset "UTF-8";

/* =====font ===== */
@font-face {font-family: 'Pretendard';src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Regular.woff') format('woff');font-weight: 400;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Medium.woff') format('woff');font-weight: 500;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-Bold.woff') format('woff');font-weight: 700;font-display: swap;}
@font-face {font-family: 'Pretendard';src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff/Pretendard-ExtraBold.woff') format('woff');font-weight: 800;font-display: swap;}

/* ===== reset ===== */
*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {-webkit-text-size-adjust: 100%;}
body {font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;color: #181924;background: #fff;word-break: keep-all;}
ul, ol {list-style: none;}
a {color: inherit;text-decoration: none;}
img {display: block;max-width: 100%;}
button {border: 0;background: none;cursor: pointer;font: inherit;}
h1, h2, h3, h4, h5 {font-size: inherit;font-weight: inherit;}


.blind {position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;}

:root {
  --navy: #002554;
  --text: #181924;
  --gray: #808080;
  --line: #dee2e9;
  --gutter: 40px;
}

/* ===== header ===== */
.header {position: relative;display: flex;align-items: center;justify-content: space-between;height: 100px;padding: 0 var(--gutter);background: #fff;}

.header-logo {position: relative;z-index: 2;width: 170.29px;height: 60px;overflow: hidden;}
.header-logo a {display: block;width: 100%;height: 100%;}
.header-logo img {position: absolute;max-width: none;}
.header {z-index: 50;}
.gnb {position: absolute;left: 50%;top: 0;height: 100%;transform: translateX(-50%);}
.gnb > ul {display: flex;gap: 100px;height: 100%;}
.gnb > ul > li {position: relative;display: flex;align-items: center;}
.gnb > ul > li > a {font-size: 20px;font-weight: 700;line-height: 1.5;letter-spacing: -0.4px;color: #000;white-space: nowrap;transition: color 0.2s;}
.gnb > ul > li:hover > a, .gnb > ul > li:focus-within > a, .gnb > ul > li.is-active > a {color: var(--navy);}

/* 2차 메뉴 드롭다운 */
.gnb-sub {position: absolute;top: calc(50% + 28px);left: -20px;min-width: 160px;padding: 8px;border-radius: 8px;background: #fff;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);opacity: 0;visibility: hidden;transform: translateY(-8px);transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;}

/* 메뉴와 드롭다운 사이 빈 공간에서도 hover 유지 */
.gnb-sub::before {content: '';position: absolute;left: 0;right: 0;bottom: 100%;height: 28px;}
.gnb > ul > li:hover > .gnb-sub, .gnb > ul > li:focus-within > .gnb-sub {opacity: 1;visibility: visible;transform: none;transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;}
.gnb-sub a {display: block;padding: 10px 12px;border-radius: 6px;font-size: 16px;font-weight: 500;line-height: 1.5;letter-spacing: -0.24px;color: #181924;white-space: nowrap;transition: background-color 0.15s, color 0.15s;}
.gnb-sub a:hover, .gnb-sub a:focus-visible {background: #f3f5f8;color: var(--navy);}
.header-menu {position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;}

/* ===== 전체메뉴 ===== */
.all-menu {position: fixed;inset: 0;z-index: 100;overflow-y: auto;background: rgba(4, 10, 18, 0.9);-webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);opacity: 0;transition: opacity 0.45s ease;}
.all-menu[hidden] {display: none;}
.all-menu.is-active {opacity: 1;}
html.is-menu-open {overflow: hidden;}

.all-menu-head {display: flex;align-items: center;justify-content: flex-end;height: 100px;padding: 0 var(--gutter);}
.all-menu-close {display: flex;align-items: center;justify-content: center;width: 32px;height: 32px;}
.all-menu-body {display: flex;justify-content: space-between;max-width: calc(1400px + var(--gutter) * 2);margin: 0 auto;padding: 73px var(--gutter) 100px;color: #fff;}
.all-menu-col {display: flex;flex-direction: column;gap: 32px;width: 148px;}
.all-menu-title {font-size: 28px;font-weight: 700;line-height: 1.4;letter-spacing: -0.56px;}
.all-menu-title button {color: #fff;text-align: left;cursor: default;}
.all-menu-list {display: flex;flex-direction: column;gap: 15px;}
.all-menu-list > li > a, .all-menu-list > li > button {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 5px 0;border-bottom: 1px solid rgba(222, 226, 233, 0.2);font-size: 18px;font-weight: 700;line-height: 1.5;letter-spacing: -0.36px;color: #fff;text-align: left;transition: border-color 0.2s;}
.all-menu-list > li > button::after {content: '';flex-shrink: 0;width: 16px;height: 16px;background: url(../img/ico_chevron_right_sm.svg) no-repeat center / 16px 16px;transform: rotate(-90deg);transition: transform 0.2s;}
.all-menu-list > .is-open > button::after {transform: rotate(90deg);}
.all-menu-list > li > a:hover, .all-menu-list > li > button:hover {border-bottom-color: rgba(255, 255, 255, 0.8);}
.all-menu-sub {display: none;margin-top: 15px;opacity: 0.48;}
.all-menu-list > .is-open > .all-menu-sub {display: block;}
.all-menu-sub a {display: block;padding: 4px 0;font-size: 16px;font-weight: 700;line-height: 1.5;letter-spacing: -0.24px;color: #fff;transition: opacity 0.2s;}
.all-menu-sub a:hover {text-decoration: underline;}

/* ===== footer ===== */
.footer-wrap {padding: 0 var(--gutter);}
.footer {padding: 50px 264px;background: #0b0f14;color: #fff;}
.footer-content {display: flex;align-items: flex-start;}

.footer-brand {flex-shrink: 0;width: 388px;}
.footer-logo {position: relative;display: block;width: 170.29px;height: 60px;overflow: hidden;}
.footer-info {display: flex;flex-direction: column;gap: 15px;flex: 1 0 0;min-width: 0;min-height: 116px;}
.footer-row {display: flex;flex-wrap: wrap;align-items: center;gap: 4px 15px;font-size: 16px;font-weight: 500;line-height: 1.5;letter-spacing: -0.24px;}

.footer-row span {display: inline-block;white-space: nowrap;}
.footer-row span + span::before {content: '';display: inline-block;width: 10px;height: 1px;margin: 0 10.5px 0 -4.5px;/* 회전 후 세로선 1px, 오른쪽 간격 15px */vertical-align: middle;background: url(../img/line_divider.svg) no-repeat center / 10px 1px;transform: rotate(90deg);}
.footer-copyright {padding-top: 10px;border-top: 1px solid rgba(255, 255, 255, 0.08);font-size: 13px;font-weight: 500;line-height: 1.5;letter-spacing: -0.195px;color: rgba(255, 255, 255, 0.7);}

/* ===== 맨 위로 버튼 ===== */
.btn-top {position: fixed;right: 40px;bottom: 40px;z-index: 40;display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;border-radius: 50%;background: var(--navy);box-shadow: 0 8px 20px rgba(0, 37, 84, 0.25);opacity: 0;visibility: hidden;transform: translateY(16px);transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background-color 0.2s;}
.btn-top.is-show {opacity: 1;visibility: visible;transform: none;transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s, background-color 0.2s;}
.btn-top:hover {background: #073c9f;}
.btn-top:focus-visible {outline: 2px solid #073c9f;outline-offset: 3px;}

/* ===== responsive ===== */
@media (max-width: 1600px) {
  .footer {padding: 50px 120px;}
  .footer-brand {width: 240px;}
}

@media (max-width: 1280px) {
  .footer {padding: 48px 60px 32px;}
  .footer-content {flex-direction: column;gap: 24px;padding-bottom: 28px;}
  .footer-brand {width: auto;}
  .footer-info {flex: none;gap: 10px;min-height: 0;}
  .footer-row {font-size: 15px;}
  .footer-row:last-child {display: grid;grid-template-columns: repeat(2, max-content);gap: 6px 48px;}
  .footer-row:last-child span::before {display: none;}
  .footer-copyright {padding-top: 20px;}
}

@media (max-width: 1024px) {
  .gnb {display: none;}
  .footer {padding: 48px 40px 32px;}
  .all-menu-body {flex-wrap: wrap;justify-content: flex-start;gap: 56px 40px;padding-top: 60px;}
  .all-menu-col {width: calc(50% - 20px);}
}

@media (max-width: 768px) {
  :root {--gutter: 20px;}
  .header-logo img{width: 80%; margin-top: 10px;}
  .header {height: 70px;}

  /* 모바일: 오른쪽 슬라이드 메뉴 */
  .all-menu {overflow: hidden;background: rgba(4, 10, 18, 0.6);-webkit-backdrop-filter: none;backdrop-filter: none;}
  .all-menu-inner {position: absolute;top: 0;right: 0;bottom: 0;width: min(320px, 85%);overflow-y: auto;background: #040a12;transform: translateX(100%);transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform;box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);}
  .all-menu.is-active .all-menu-inner {transform: translateX(0);}

  .all-menu-head {height: 70px;padding: 0 20px;}
  .all-menu-body {flex-direction: column;gap: 0;padding: 0 0 40px;}
  .all-menu-col {width: 100%;gap: 0;border-top: 1px solid rgba(222, 226, 233, 0.15);}
  .all-menu-col:last-child {border-bottom: 1px solid rgba(222, 226, 233, 0.15);}
  .all-menu-title {font-size: 20px;}
  .all-menu-title button {display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 18px 20px;cursor: pointer;}
  .all-menu-title button::after {content: '';width: 16px;height: 16px;background: url(../img/ico_chevron_right_sm.svg) no-repeat center / 16px 16px;transform: rotate(90deg);transition: transform 0.2s;}
  .all-menu-col.is-open .all-menu-title button::after {transform: rotate(-90deg);}

  .all-menu-list {display: none;gap: 4px;padding: 4px 20px 20px;}
  .all-menu-col.is-open .all-menu-list {display: flex;}
  .all-menu-list > li > a, .all-menu-list > li > button {padding: 10px 0;border-bottom: 0;font-size: 16px;opacity: 0.85;}
  .all-menu-sub {margin: 0 0 6px;padding-left: 12px;}
  .all-menu-sub a {font-size: 15px;}

  .footer {padding: 40px 24px 28px;}
  .footer-content {gap: 20px;padding-bottom: 20px;}
  .footer-row {font-size: 14px;}
  .footer-row span {white-space: normal;}
  .footer-row:last-child {grid-template-columns: 1fr;gap: 4px;}
  .footer-copyright {padding-top: 16px;white-space: normal;}

  .btn-top {right: 16px;bottom: 16px;width: 44px;height: 44px;}
  .btn-top img {width: 20px;height: 20px;}
}

/* 움직임 줄이기 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
  .all-menu, .all-menu-inner, .btn-top {transition: none;}
}