@charset "UTF-8";
/* header */
#kakaoHead a {float: none;padding: unset;} /* 기존 css와 충돌 - reset */
.kakao-head--v2 .header {position:fixed;width:100%;height:62px;background:#fff;z-index: 10;font-family: "Pretendard", 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;}
.kakao-head--v2 .header::after {content:"";position: absolute;top: 62px;left: 0;width: 100%;height: calc(var(--nav-bg-height) + 50px);pointer-events: none;opacity: 0;background: #fff;box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.12);}
.kakao-head--v2 .header:has(.is-active .depth-box)::after {opacity: 1;}
.kakao-head--v2 .header .inner {/* position:relative; */display: flex;align-items: center;margin:0 auto;padding:0 40px;max-width:1440px;min-width:944px;height:100%;}
.kakao-head--v2 .header .logo-wrap {display: flex; align-items: center;}
.kakao-head--v2 .header h1 {display: flex; align-items: center;gap:6px;padding-left: 2px;}
.kakao-head--v2 .header .logo {display: inline-flex; align-items: center;line-height: 1;}
.kakao-head--v2 .header .logo .logo-kakao {display:inline-block;width:106px;height:17.81px;text-indent: -9999px;background:url(https://og.kakaobank.io/view/5e7d5da2-bd48-47c2-9ac5-6fc0aa836730) no-repeat center / 100%;}
/* header-nav */
.kakao-head--v2 .header .nav {margin-left:auto;height:100%;}
/* header-nav : 1depth */
.kakao-head--v2 .header .nav > ul.depth1-list {display:flex;align-items: center;gap:40px;height: inherit;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item {height: inherit;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item a.nav-link {display:inline-flex;align-items: center;height:inherit;color: #000;text-align: center;font-size: 16px;font-weight: 600;line-height: 150%; /* 24px */letter-spacing: -0.16px;text-align:left;word-break: keep-all; margin: 0;transition: all 0.4s ease-in-out;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item a.nav-link:hover,
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item a.nav-link:active,
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item a.nav-link:focus {color: #444;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth2-item a.nav-link {font-weight: 500;}
/* header-nav : 2depth */
.kakao-head--v2 .header .nav .depth-box {visibility:hidden;opacity:0;overflow:visible; position: absolute;left: 0;right: 0;padding:20px 0 30px; width: 100%;transition-property: visibility, opacity;z-index: 5;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item.is-active .depth-box {visibility: visible;opacity: 1;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item ul:not(.depth3-list) > li + li {margin-top:12px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item ul > li > a.nav-link{width: 200px;}
/* 2depth-- */
.kakao-head--v2 .header .depth-box--inner {margin:0 auto;padding: 0 40px;  max-width:1440px;min-width: 944px;}
.kakao-head--v2 .header .nav .depth-box .depth-cont {position:relative;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont {display: flex;gap: 20px;/*min-width: calc(681px - 31px);*/min-width: calc(var(--nav-min-width) - 31px);width: fit-content;/*margin-left: auto;margin-right:26px;*/}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont:has(.depth3-active) {margin-right: 0px;margin-left: auto;}
/* header-nav : 3depth */
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active {width: 1326px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth2-item {display: flex;align-items: flex-start;gap:20px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth2-item > a.nav-link {flex: 0 0 126px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list {display:flex;flex-wrap: wrap;row-gap: 12px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list li {position:relative;margin-right: 32px;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li::after {content:"";position:absolute;top:4px;right:-16px;bottom:4px;width:1px;background:#DDD;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li:last-child {margin-right:0;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li:last-child:after {display:none;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li > a {color:#888;font-size:16px;font-weight:500;letter-spacing:-0.16px;transition: all 0.4s ease-in-out;}
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li > a:hover,
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li > a:active,
.kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li > a:focus {color:#000;}

/* Tablet(1024~1599) */
@media screen and (max-width: 1599.98px) {
    .kakao-head--v2 .header .inner,
    .kakao-footer--v2 .footer .inner {max-width:1519px;}
    .kakao-head--v2 .header .depth-box--inner {max-width: 1519px;}
    .kakao-head--v2 .header .nav > ul.depth1-list {padding:0 1px;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item a.nav-link,
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li > a {font-size:14px;letter-spacing: 0;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont,
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont:has(.depth3-active){/*min-width: 628px;*/min-width:var(--nav-min-width);margin-right: 0;margin-left:auto;} /* min-width:1depth width 설정 */
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item ul > li > a.nav-link {width:144px;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active {width:944px;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth2-item > a.nav-link {flex:0 0 114px;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li {margin-right: 26px;}
    .kakao-head--v2 .header .nav > ul.depth1-list > li.depth1-item .depth-cont .depth2-sub.depth3-active .depth3-list > li::after {right:-13px;}
    /* 단, 3차 메뉴(.depth3-active)가 없을 때만 적용 */
    /* 2depth - 4열일때 : 첫번째 depth2-sub를 1칸인 164px(144+20)만큼 왼쪽으로 당김*/
    .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):not(:has(.depth2-sub:nth-child(5))):not(:has(.depth2-sub:nth-child(6))):has(.depth2-sub:nth-child(4)) > .depth2-sub:first-child {margin-left:-164px;}
    /* 2depth - 5열,6열일때 센터정렬 */
    .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):has(.depth2-sub:nth-child(5)),
    .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):has(.depth2-sub:nth-child(6)) {justify-content: center;margin: auto;}
}
/* =================================================================
   [1600px 이상 PC 전용] 순수 CSS 정렬 로직 (No JS)
   ================================================================= */
@media screen and (min-width: 1600px) {
  /* 1. 기준점 변경: 개별 메뉴(li)가 아닌 전체 메뉴판(ul)을 기준으로 잡음 */
  .kakao-head--v2 .header .nav>ul.depth1-list {position: relative;}
  .kakao-head--v2 .header .nav>ul.depth1-list:has(.depth1-item.is-active .depth3-active) {position: inherit;}
  .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item {position: static;/* 개별 li의 기준점 기능 해제 */}

  /* 2. Wrapper */
  .kakao-head--v2 .header .nav .depth-box {/*left: 0;width: 100%;*/text-align: left;}

  /* 3. 내부 컨텐츠 레이아웃 보정 */
  .kakao-head--v2 .header .nav .depth-box .depth-box--inner:not(:has(.depth3-active)) {margin: 0;width: auto;max-width: none;min-width: unset;padding:0;}

  /* 4. 텍스트 이동 */
  .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)) {/*margin-left: 0 !important;margin-right: 0 !important;*/transition: margin-left 0.3s cubic-bezier(0.25, 1, 0.5, 1);}

  /* 5. 조건부 정렬 로직
    - 기본 상태: 1~3열은 margin-left: 0 이므로 '상품안내' 위치에 자동 정렬.
    - 4열 이상: :has()가 감지하여 margin-left를 음수값으로 당김.
  */
  /* 4열일 때 (1칸인 220px만큼 왼쪽으로 당김) */
  /* 단, 3차 메뉴(.depth3-active)가 없을 때만 적용 */
  .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):has(.depth2-sub:nth-child(4)) {margin-left: -220px !important;}
  /* 5열일 때 (2칸인 440px만큼 왼쪽으로 당김) */
  .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):has(.depth2-sub:nth-child(5)) {margin-left: -440px !important;}
  /* 6열일 때 (3칸인 660px만큼 왼쪽으로 당김) */
  .kakao-head--v2 .header .nav>ul.depth1-list>li.depth1-item .depth-cont:not(:has(.depth3-active)):has(.depth2-sub:nth-child(6)) {margin-left: -660px !important;}
}