@charset "UTF-8";
/* =========================================================
   CIW 홈페이지 - 공통 스타일 (전 페이지 공통)
   - reset / base / 디자인 토큰
   - 레이아웃 프리미티브 (.inner)
   - header / mobile-menu / footer / btn-top
   기존 Tailwind 유틸을 옮겨온 것이며, 브레이크포인트는 Tailwind 기본값을 따른다.
     max-md : ~767.98px,  max-lg : ~1023.98px,  lg : 1024px~,  xl : 1280px~
   ========================================================= */

/* ---------------------------------------------------------
   0. 디자인 토큰
   --------------------------------------------------------- */
:root {
  --navy: #002063;
  --navydark: #052850;
  --brand: #0068b7;
  --bluemid: #105aac;
  --bluelight: #e5f0f8;
  --graybg: #f5f5f5;
  --grayline: #e0e0e0;
  --graytxt: #565656;
  --graysub: #797979;
  --skyaccent: #8dc6ff;

  --body-text: #252525;
  --max-w: 1400px;
  --pad-x: 30px;
  --pad-x-mo: 20px;

  --font-sans: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------
   1. reset / base
   --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden 속성의 기본 동작(display:none)은 브라우저 기본 스타일시트(UA) 규칙이라, 같은 요소에
   display를 지정하는 author 규칙(.admin-btn 등)이 있으면 특이도와 무관하게 그쪽이 이긴다 —
   JS로 el.hidden을 토글하는 코드가 전부 조용히 무력화되는 걸 막기 위해 여기서 강제로 되살린다. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  vertical-align: top;
}

em {
  font-style: normal;
}

/* SPA 로딩 중 상태 (main.js 가 body.is-loading 토글) */
body.is-loading {
  cursor: progress;
}

body.is-loading #container {
  opacity: 0.45;
  transition: opacity 0.15s;
}

/* ---------------------------------------------------------
   2. 레이아웃 / 유틸
   --------------------------------------------------------- */
.inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--max-w);
  padding-inline: var(--pad-x);
}

@media (max-width: 767.98px) {
  .inner {
    padding-inline: var(--pad-x-mo);
  }
}

.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;
}

.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-nav:focus {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 40px;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

/* =========================================================
   3. HEADER
   .header.is-main : 메인(스크롤 전 투명 → .on / .gnb-open 시 흰 배경)
   .header.is-sub  : 서브(항상 흰 배경)
   .on       : 스크롤 60px 이상 (main.js)
   .gnb-open  : GNB 호버 (main.js)
   ========================================================= */
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.header.is-main {
  background: transparent;
}

.header.is-main.on,
.header.is-main.gnb-open {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.header.is-sub {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.header.is-sub.on {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* ---- 상단 유틸 바 ---- */
.header-util {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.header.is-main .header-util {
  border-color: rgba(255, 255, 255, 0.2);
}

.header.is-main.on .header-util,
.header.is-main.gnb-open .header-util,
.header.is-sub .header-util {
  border-color: var(--grayline);
}

@media (max-width: 1023.98px) {
  .header-util .inner {
    display: none;
  }
}

.util-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.util-list li {
  position: relative;
}

.util-list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
}

.header.is-main .util-list li + li::before {
  background: rgba(255, 255, 255, 0.3);
}

.header.is-main.on .util-list li + li::before,
.header.is-main.gnb-open .util-list li + li::before,
.header.is-sub .util-list li + li::before {
  background: var(--grayline);
}

.util-list a {
  display: block;
  height: 40px;
  padding-inline: 16px;
  line-height: 40px;
  font-size: 13px;
  transition: color 0.2s;
}

.util-list a.lang {
  padding-right: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.header.is-main .util-list a {
  color: rgba(255, 255, 255, 0.8);
}

.header.is-main .util-list a:hover {
  color: #fff;
}

.header.is-main.on .util-list a,
.header.is-main.gnb-open .util-list a,
.header.is-sub .util-list a {
  color: var(--graysub);
}

.header.is-main.on .util-list a:hover,
.header.is-main.gnb-open .util-list a:hover,
.header.is-sub .util-list a:hover {
  color: var(--navy);
}

/* ---- 메인 바 (로고 / GNB / 우측) ---- */
.header-main {
  position: relative;
}

.header-main > .inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

@media (min-width: 1024px) {
  .header-main > .inner {
    height: 88px;
    justify-content: flex-start;
  }
}

/* 로고 */
.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-symbol {
  display: block;
  flex-shrink: 0;
  width: 91px;
  height: 48px;
  background: url("/img/logo-symbol.png") no-repeat center / contain;
}

@media (min-width: 1024px) {
  .logo-symbol {
    width: 150px;
    height: 79px;
  }
}

/* logo-symbol.png 자체에 CIW 텍스트가 포함돼 있어 옆의 텍스트 표기는 숨긴다 */
.logo-word {
  display: none;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.logo-en {
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 0.01em;
  transition: color 0.3s;
}

.logo-ko {
  margin-top: 5px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.03em;
  transition: color 0.3s;
}

.header.is-main .logo-en {
  color: #fff;
}

.header.is-main .logo-ko {
  color: rgba(255, 255, 255, 0.9);
}

.header.is-main.on .logo-en,
.header.is-main.on .logo-ko,
.header.is-main.gnb-open .logo-en,
.header.is-main.gnb-open .logo-ko,
.header.is-sub .logo-en,
.header.is-sub .logo-ko {
  color: var(--navy);
}

/* 어두운 배경(스크롤 전 메인 헤더)에서는 글자가 흰색인 로고로 바꿔 대비를 준다 */
.header.is-main .logo-symbol {
  background-image: url("/img/logo-symbol-white.png");
}

.header.is-main.on .logo-symbol,
.header.is-main.gnb-open .logo-symbol,
.header.is-sub .logo-symbol {
  background-image: url("/img/logo-symbol.png");
}

/* GNB */
#gnb {
  flex: 1;
}

@media (max-width: 1023.98px) {
  #gnb {
    display: none;
  }
}

.gnb-list {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.gnb-list > li {
  position: relative;
}

.depth1 {
  display: block;
  height: 88px;
  padding-inline: 24px;
  line-height: 88px;
  font-size: 18px;
  font-weight: 700;
  transition: color 0.3s;
}

@media (min-width: 1280px) {
  .depth1 {
    padding-inline: 36px;
    font-size: 19px;
  }
}

/* GNB - 메인 모드 */
.header.is-main .depth1 {
  color: #fff;
}

.header.is-main:not(.on):not(.gnb-open) .depth1:hover {
  color: var(--skyaccent);
}

.header.is-main.on .depth1,
.header.is-main.gnb-open .depth1 {
  color: var(--navy);
}

.header.is-main.on .depth1:hover,
.header.is-main.gnb-open .depth1:hover,
.header.is-main.on .gnb-list > li.on > .depth1,
.header.is-main.gnb-open .gnb-list > li.on > .depth1 {
  color: var(--brand);
}

/* GNB - 서브 모드 */
.header.is-sub .depth1 {
  color: var(--navy);
}

.header.is-sub .depth1:hover {
  color: var(--brand);
}

.header.is-sub .gnb-list > li.on > .depth1 {
  color: var(--brand);
  font-weight: 800;
}

/* 2depth 드롭다운 */
.depth2 {
  position: absolute;
  left: 50%;
  top: 88px;
  width: 220px;
  transform: translateX(-50%);
  padding-block: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s;
}

.header.gnb-open .depth2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.depth2 a {
  display: block;
  padding: 8px 6px;
  text-align: center;
  font-size: 16px;
  color: #555;
  white-space: nowrap;
}

.depth2 a:hover {
  color: var(--brand);
  font-weight: 700;
}

/* 메가메뉴 배경 패널 */
.gnb-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 70px;
  width: 100%;
  height: 0;
  background: #fff;
  border-top: 1px solid var(--grayline);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: height 0.3s;
}

@media (min-width: 1024px) {
  .gnb-bg {
    top: 88px;
  }
}

.header.gnb-open .gnb-bg {
  height: 344px;
}

/* ---- 우측 영역 ---- */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-inquiry {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

@media (max-width: 1023.98px) {
  .btn-inquiry {
    display: none;
  }
}

.header.is-main .btn-inquiry {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.header.is-main .btn-inquiry:hover {
  background: #fff;
  color: var(--navy);
}

.header.is-main.on .btn-inquiry,
.header.is-main.gnb-open .btn-inquiry,
.header.is-sub .btn-inquiry {
  border-color: var(--navy);
  color: var(--navy);
}

.header.is-main.on .btn-inquiry:hover,
.header.is-main.gnb-open .btn-inquiry:hover,
.header.is-sub .btn-inquiry:hover {
  background: var(--navy);
  color: #fff;
}

/* 모바일 햄버거 */
.btn-all-menu {
  position: relative;
  display: none;
  width: 30px;
  height: 22px;
}

@media (max-width: 1023.98px) {
  .btn-all-menu {
    display: block;
  }
}

.btn-all-menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  transition: background-color 0.2s;
}

.btn-all-menu span:nth-child(1) { top: 0; }
.btn-all-menu span:nth-child(2) { top: 10px; }
.btn-all-menu span:nth-child(3) { top: 20px; }

.header.is-main .btn-all-menu span {
  background: #fff;
}

.header.is-main.on .btn-all-menu span,
.header.is-sub .btn-all-menu span {
  background: var(--navy);
}

/* =========================================================
   4. 모바일 슬라이드 메뉴
   ========================================================= */
.m-menu {
  position: fixed;
  right: -320px;
  top: 0;
  z-index: 1200;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  transition: right 0.3s;
}

.m-menu.on {
  right: 0;
}

.m-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 70px;
  padding-inline: 20px;
  background: var(--navy);
}

.m-menu-head .logo-symbol {
  width: 115px;
  height: 61px;
  background-image: url("/img/logo-symbol-white.png");
}

.m-menu-head .logo-en {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.m-menu-head .logo-ko {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.btn-m-close {
  margin-left: auto;
  font-size: 34px;
  line-height: 1;
  color: #fff;
}

.m-menu-list > li {
  border-bottom: 1px solid var(--grayline);
}

.m-menu-list > li > button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}

.m-menu-list > li > a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}

.m-menu-list > li > button::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  margin-top: -6px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.m-menu-list > li.on > button::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.m-menu-list > li > ul {
  display: none;
  background: #fafafa;
  padding-top: 6px;
  padding-bottom: 14px;
}

.m-menu-list > li.on > ul {
  display: block;
}

.m-menu-list > li > ul a {
  display: block;
  padding: 9px 20px;
  font-size: 15px;
  color: var(--graytxt);
  white-space: nowrap;
}

.dim {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.dim.on {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   5. FOOTER
   ========================================================= */
#footer {
  position: relative;
  z-index: 5;
  background: #1b2430;
  color: rgba(255, 255, 255, 0.6);
}

.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top > .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-block: 20px;
}

@media (min-width: 1024px) {
  .footer-top > .inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding-block: 0;
  }
}

.foot-link {
  display: flex;
  flex-wrap: wrap;
}

.foot-link li {
  position: relative;
}

.foot-link li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
}

.foot-link a {
  display: block;
  padding-inline: 18px;
  font-size: 14px;
}

.foot-link li:first-child a {
  padding-left: 0;
}

.foot-link a.strong {
  font-weight: 700;
}

.foot-link a:active {
  color: #fff;
}

/* 패밀리 사이트 */
.family-site {
  position: relative;
  z-index: 10;
  width: 100%;
}

@media (min-width: 1024px) {
  .family-site {
    width: 210px;
  }
}

.fs-btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding-inline: 18px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  color: inherit;
  transition: color 0.2s, border-color 0.2s;
}

.fs-btn:active,
.family-site.on .fs-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.fs-btn::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -6px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  transform: rotate(-45deg);
  transition: transform 0.3s;
}

.family-site.on .fs-btn::after {
  margin-top: -2px;
  transform: rotate(135deg);
}

.fs-list {
  display: none;
  position: absolute;
  z-index: 11;
  left: 0;
  bottom: 40px;
  width: 100%;
  background: #2a3542;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}

.family-site.on .fs-list {
  display: block;
}

.fs-list a {
  display: block;
  padding: 11px 18px;
  font-size: 14px;
}

.fs-list a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.fs-list a:active {
  color: #fff;
}

/* 하단 정보 */
.footer-bottom > .inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 30px;
  padding-bottom: 36px;
}

@media (min-width: 1024px) {
  .footer-bottom > .inner {
    flex-direction: row;
    gap: 70px;
    padding-top: 44px;
    padding-bottom: 50px;
  }
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.foot-logo .logo-symbol {
  width: 128px;
  height: 67px;
  background-image: url("/img/logo-symbol-white.png");
}

.foot-logo .logo-en {
  font-size: 23px;
  color: rgba(255, 255, 255, 0.9);
}

.foot-logo .logo-ko {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.foot-info {
  font-size: 14px;
  line-height: 1.9;
}

.foot-info .foot-slogan {
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}

.foot-info .addr,
.foot-info .tel {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
}

.foot-info .copy {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

/* =========================================================
   6. TOP 버튼
   ========================================================= */
.btn-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 20px rgba(0, 32, 99, 0.3);
  transition: opacity 0.3s, visibility 0.3s, background-color 0.3s;
}

.btn-top:hover {
  background: var(--brand);
}

.btn-top.on {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767.98px) {
  .btn-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    font-size: 10px;
  }
}