/* ==========================================================================
   0. 접근성 (Accessibility)
   ========================================================================== */
/* CSS 변수(:root)는 common.css에서 일괄 관리합니다 */

/* 스킵 내비게이션 (접근성) */
#skipArea {
    width: 100%;
    height: 0;
}

#skipArea a {
    position: absolute;
    left: 0;
    top: -9999px;
    width: 100%;
    height: 50px;
    background-color: var(--c-black);
    color: #fff;
    font-weight: bold;
    line-height: 50px;
    opacity: 0.9;
    text-align: center;
    z-index: var(--z-skip);
}

#skipArea a:active,
#skipArea a:focus,
#skipArea a:hover {
    top: 0;
}

/* ==========================================================================
   1. 헤더 공통 및 PC 영역 (Header PC)
   ========================================================================== */
/* 헤더 기본 레이아웃 */
#header {
    padding: 0 var(--space-40);
    position: fixed;
    top: 1rem;
    width: 100%;
    height: 10rem;
    z-index: var(--z-overlay);
    transition: all 0.4s;
}

/* 스크롤 및 활성화 상태 */
#header.scroll-down,
#mob_header.scroll-down {
    transform: translateY(-10rem);
}

#header.scroll-down .nav-inner {
    border-bottom: unset;
}

#header.is-scrolled,
#header.active,
#mob_header.is-scrolled,
#mob_header.active {
    background: #fff;
    top: 0;
    border-bottom: 1px solid #E5E5E3;
}

/* 네비게이션 내부 컨테이너 */
#header .gnb {
    height: 100%;
}

#header .nav-inner {
    position: relative;
    max-width: var(--w-max);
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    transition: border-bottom 0.4s;
}

#header.active .nav-inner,
#header.is-scrolled .nav-inner,
#mob_header.active .nav-inner,
#mob_header.is-scrolled .nav-inner {
    border-bottom: unset;
    color: #17181A;
}

/* 로고 영역 */
#header .nav-inner span.logo {
    flex-shrink: 0;
}

#header .nav-inner span.logo>a {
    display: block;
    height: 4.8rem;
}

#header .nav-inner span.logo>a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#header .logo .active,
#mob_header .logo .active,
#header .mob-header-inner .active,
#mob_header .mob-header-inner .active {
    display: none;
}

#header.active .logo .active,
#header.is-scrolled .logo .active,
#mob_header.active .logo .active,
#mob_header.is-scrolled .logo .active {
    display: block;
}

#header.active .logo .default,
#header.is-scrolled .logo .default,
#mob_header.active .logo .default,
#mob_header.is-scrolled .logo .default {
    display: none;
}

/* 헤더 스크롤 됨 또는 active 시 햄버거 메뉴를 검은색으로 변경 */
#header.is-scrolled #nav-icon3,
#header.active #nav-icon3,
#mob_header.is-scrolled #nav-icon3,
#mob_header.active #nav-icon3 {
    background: url(/static/kor/images/icon/btn-menu-active.png) no-repeat center/cover;
}

/* 메뉴가 열렸을 때는 X 버튼으로 변경 */
#header.is-scrolled #nav-icon3.open,
#header.active #nav-icon3.open,
#mob_header.is-scrolled #nav-icon3.open,
#mob_header.active #nav-icon3.open {
    background: url(/static/kor/images/icon/btn_exit.png) no-repeat center/cover;
}

#nav-icon3 {
    width: 24px;
    height: 24px;
    background: url("/static/kor/images/icon/btn_menu.png") no-repeat center/cover;
    z-index: 99999;
}

/* ==========================================================================
   2. PC GNB (Global Navigation Bar) 및 하위 메뉴
   ========================================================================== */
#gnb {
    display: flex;
    /* flex: 0 1 100rem; */
    height: 100%;
    transition: all 0.3s;
}

#gnb:hover>li {
    padding: 0 4.8rem;
}

#gnb>li {
    /* flex: 1; */
    padding: 0 4rem;
    height: 100%;
    transition: padding 0.3s;
}

#gnb:hover>li>a {
    font-weight: bold;
}

@media (hover: hover) {
    #header.active #gnb>li:hover {
        border-bottom: 3px solid #0065BD;
    }
}

#gnb>li>a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: inherit;
    font-size: 1.8rem;
    font-weight: 500;
    position: relative;
}

/* 하위메뉴 (Depth2) Drop 효과 */
#gnb .depth2 {
    display: none;
    position: absolute;
    top: 10rem;
    left: 0 !important;
    width: 100% !important;
    z-index: var(--z-overlay);
    transform: none !important;
}

#gnb .depth2 .depth2-inner {
    display: flex;
    max-width: 176rem;
    height: 100%;
    margin: 0 auto;
    padding: 4rem 0;
    align-items: flex-start;
    text-align: left;
}

/* 좌측 메뉴 설명 영역 */
#gnb .depth2 .menu-desc-area {
    position: relative;
    width: 47rem;
    height: 100%;
    padding-right: 6.4rem;
    margin-right: 9.6rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

#gnb .depth2 .menu-desc-area::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #E5E5E3;
    position: absolute;
    right: 0;
    top: 0;
}

#gnb .depth2 .menu-desc-area h2 {
    margin-bottom: .8rem;
    font-size: 4rem;
    font-weight: 800;
    font-family: var(--paybooc);
}

#gnb .depth2 .menu-desc-area p {
    font-size: 1.6rem;
    font-weight: 300;
    color: #5F6266;
    line-height: 1.6;
    word-break: keep-all;
}

/* 우측 서브메뉴 리스트 영역 */
#gnb .depth2 .menu-list-area {
    flex-grow: 1;
}

#gnb .depth2 .menu-list-area ul {
    display: grid;
    grid-template-columns: repeat(4, 26.3rem);
    row-gap: 3.2rem;
}

#gnb .depth2 .menu-list-area ul li {
    width: auto !important;
    margin-bottom: 0 !important;
}

#gnb .depth2 .menu-list-area ul li.flex a {
    display: flex;
    align-items: center;
    gap: 2px;
}

#gnb .depth2 .menu-list-area ul li.flex a::after {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(/static/kor/images/icon/arrow-deg-G.png) no-repeat center/cover;
    transition: all 0.2s;
}

#gnb .depth2 .menu-list-area ul li.flex:hover a::after {
    background: url(/static/kor/images/icon/active_outlink.png) no-repeat center/cover;
}

#gnb .depth2 li a {
    display: block;
    color: #2F3133;
    font-size: 1.8rem;
    transition: all 0.2s;
    white-space: nowrap !important;
}

#gnb .depth2 li a:hover {
    color: #0078C1;
    font-weight: bold;
}

/* 서브메뉴 배경 */
.subBg {
    display: none;
    position: absolute;
    top: 9.9rem;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: var(--z-overlay);
    border-top: 1px solid #E5E5E3;
    border-bottom: 1px solid #E5E5E3;
}

/* ==========================================================================
   3. 검색 및 우측 유틸리티 영역 (Search & Utils)
   ========================================================================== */
.util {
    display: flex;
    align-items: center;
    gap: 40px;
}

.util>ul {
    position: relative;
    width: 5.7rem;
    height: 4rem;
    padding: .8rem;
    cursor: pointer;
}

.util>ul li {
    height: 100%;
}

.util>ul li.btn-eng {
    position: absolute;
    left: 0;
    display: none;
    left: .8rem;
    width: 100%;
}

.util ul li a {
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: left;
}

.util ul li.btn-eng a {
    height: auto;
}

.util ul li:last-child {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    height: unset;
}

.util li img {
    transition: transform 0.3s ease;
}

.util li img.rotate {
    transform: rotate(180deg);
}

/* 유틸리티 아이콘 상태 토글 */
#header.active .util ul li a,
#header.is-scrolled .util ul li a {
    color: #17181A;
}

#header .util ul li .active {
    display: none;
}

#header.active .util ul li .active,
#header.is-scrolled .util ul li .active {
    display: block;
}

#header.active .util ul li .default,
#header.is-scrolled .util ul li .default {
    display: none;
}

/* 검색 버튼 */
.btn-search {
    width: 4rem;
    height: 4rem;
    background: url("/static/kor/images/icon/btn-search.png") no-repeat center;
}

#header.active .btn-search,
#header.is-scrolled .btn-search {
    background: url("/static/kor/images/icon/btn-search-active.png") no-repeat center;
}

.btn-search.is-close {
    background-image: url("/static/kor/images/icon/btn_exit.png") !important;
}

/* 검색 드롭다운 영역 */
.search-wrap {
    position: absolute;
    top: 10rem;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10rem 0 12rem;
    z-index: 95;
}

.search-inner {
    max-width: 100rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-box {
    position: relative;
    width: 100%;
    margin-bottom: 2.4rem;
}

.search-box input {
    padding: 0 4rem;
    width: 100%;
    height: 7.2rem;
    font-size: 2.4rem;
    font-weight: 500;
    background-color: #F5F5F5;
    color: #2F3133;
    border-radius: 32px;
}

.search-box input::placeholder {
    color: #B1B3B3;
}

.search-box .btn-submit-search {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.2rem;
    height: 3.2rem;
    background: url("/static/kor/images/icon/btn-search-active.png") no-repeat center/cover;
    cursor: pointer;
}

/* 추천 검색어 */
.recommend-keywords {
    padding: 0 var(--space-40);
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

.recommend-keywords strong {
    font-size: 2rem;
    font-weight: 700;
    padding-top: 0.6rem;
    white-space: nowrap;
}

.recommend-keywords .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.recommend-keywords .tags a {
    padding: 0 2rem;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 4.5rem;
    color: #0065BD;
    background: #fff;
    border: 1px solid #E5E5E3;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.recommend-keywords .tags a:hover {
    border-color: #0065BD;
    background: #f4f9ff;
}

/* 팝업/메뉴 활성화 시 뒷 배경 딤처리 */
.layer-dimm {
    position: fixed;
    top: 10rem;
    left: 0;
    width: 100%;
    height: calc(100vh - 10rem);
    background: rgba(0, 0, 0, 0.6);
    z-index: 90;
}

/* ==========================================================================
   4. 푸터 공통 및 레이아웃 (Footer)
   ========================================================================== */
#footer {
    width: 100%;
    padding: 0;
    background: #E5E5E3;
    border: none;
    text-align: left;
}

/* 푸터 컨텐츠 레이아웃 */
#footer .foot_cont {
    position: relative;
    align-items: center;
    max-width: 160rem;
    margin: 0 auto;
    padding: 2.5rem 0 2rem;
}

#footer .foot_cont2.pc_only {
    border: 1px solid #CBCCCA;
}

#footer .foot_cont2 .foot-cont2-wrap {
    max-width: 160rem;
    margin: 0 auto;
    padding: 2.4rem 0;
    display: flex;
    justify-content: space-between;
}

.foot-cont_1,
.foot-cont_2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foot-cont_1 .logo>a {
    display: block;
    height: 7.2rem;
}

.foot-cont_1 .logo>a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foot-cont_2 {
    margin-top: 0.8rem;
    align-items: flex-end;
}

/* 주소 및 카피라이트 */
#footer .foot_cont address {
    padding-top: 1.2rem;
    font-size: var(--font-14);
    font-weight: var(--weight-500);
    font-style: normal;
    color: #797C80;
}

#footer .foot_cont address p {
    font-size: 1.4rem;
    font-weight: 500;
    color: #797C80;
}

#footer .foot_cont address .copy {
    padding-top: 8px;
}

#footer .foot_cont address .copy span::before {
    margin: 0 1.2rem;
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #CBCCCA;
}

#footer .foot_util+p {
    font-size: 1.4rem;
    font-weight: 500;
    color: #8F9294;
}

/* 유틸리티 메뉴 (개인정보처리방침 등) */
#footer .foot_util .privacy {
    display: flex;
    gap: 24px;
}

#footer .foot_util .privacy>li {
    position: relative;
}

#footer .foot_util .privacy>li:not(:last-child)::after {
    margin-left: 24px;
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #CBCCCA;
}

#footer .foot_util .privacy>li>a {
    font-size: 1.6rem;
    font-weight: 500;
}

#footer .foot_util .privacy>li>a strong {
    font-size: 1.6rem;
    font-weight: 500;
    color: #797C80;
}

#footer .foot_util .privacy>li:nth-child(1)>a strong {
    color: #0078C1;
    font-weight: bold;
}

#footer .foot_util .privacy>li:nth-child(3)>a {
    padding-right: 2rem;
    background: url("/static/kor/images/icon/arrow-deg-r-icon-g.png") center right no-repeat;
}

/* ==========================================================================
   5. 푸터 패밀리 사이트 드롭다운 (Family Site)
   ========================================================================== */
#footer .family dl {
    position: relative;
    width: 100%;
}

#footer .family dl dt {
    text-align: left;
}

#footer .family dl dt a {
    display: block;
    width: 24rem;
    line-height: 4.8rem;
    padding: 0 2.4rem;
    background: #CBCCCA url("/static/kor/images/icon/select-arrow.png") right 2.4rem center no-repeat;
    font-size: 1.6rem;
    color: #5F6266;
    border-radius: 50px;
}

#footer .family dl dd {
    display: block;
    margin-left: unset;
    overflow: hidden;
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 4.8rem;
    opacity: 0;
    z-index: 25;
    border-radius: 10px;
    pointer-events: none;
    visibility: hidden;
}

#footer.is-active .family dl dd {
    pointer-events: auto;
    visibility: visible;
}

#footer .family dl dd ul {
    overflow-y: auto;
    height: 130px;
    opacity: 0.6;
}

/* 웹킷 스크롤바 커스텀 */
#footer .family dl dd ul::-webkit-scrollbar {
    width: 10px;
}

#footer .family dl dd ul::-webkit-scrollbar-thumb {
    background: #0065BD;
    border-radius: 10px;
}

#footer .family dl dd ul::-webkit-scrollbar-track {
    background: #fafafa;
}

#footer .family dl dd ul li {
    border-top: solid 1px #CACACA;
}

#footer .family dl dd ul li:first-child {
    border-top: 0;
}

#footer .family dl dd ul li a {
    display: block;
    padding: 7px 10px;
    font-size: 1.6rem;
    color: #fff;
    background-color: #969696;
}

/* ==========================================================================
   7. 반응형 미디어 쿼리 (Media Queries)
   ========================================================================== */
@media screen and (max-width: 1400px) {
    #gnb .depth2 .menu-list-area ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 태블릿 및 모바일 (1023px 이하) */
@media screen and (max-width: 1023px) {
    #mob_header.scroll-down {
        transform: translateY(-64px);
    }

    /* 모바일 헤더 */
    #mob_header.mob_only {
        padding: 0 var(--space-40);
        height: auto;
        position: fixed;
        width: 100%;
        z-index: 999999;
        transition: all 0.4s;
    }

    #mob_header.mob_only .mob-header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6.4rem;
        border-bottom: 1px solid rgba(255, 255, 255, .4);
    }

    #mob_header.mob_only .mob-header-inner .logo img {
        height: 3.6rem;
    }

    #mob_header.mob_only .mob-header-inner .mob-btn-box {
        display: flex;
        gap: 24px;
        align-items: center;
    }

    /* 모바일 헤더 아이콘 */
    .lang-change {
        position: relative;
        width: 2rem;
        height: 2rem;
        background: url("/static/kor/images/icon/lang-W-icon.png") no-repeat center / cover;
    }

    .lang-change .lang-box {
        display: none;
        padding: 1.3rem 0;
        position: absolute;
        top: calc(100% + 1rem);
        left: -1.8rem;
        width: 5.6rem;
        background: #fff;
        border: 1px solid #CBCCCA;
        border-radius: 8px;
        z-index: 9999999;
    }

    .lang-change .lang-box li:first-child {
        margin-bottom: 1.2rem;
    }

    .lang-change .lang-box li {
        display: flex;
        justify-content: center;
    }

    .lang-change .lang-box li:first-child a {
        color: #17181A;
    }

    .lang-change .lang-box li a {
        font-size: 1.2rem;
        font-weight: 700;
        color: #8F9294;
    }

    #mob_header.active .lang-change,
    #mob_header.is-scrolled .lang-change {
        background: url("/static/kor/images/icon/lang-B-icon.png") no-repeat center / cover;
    }

    .btn-search {
        width: 2.4rem;
        height: 2.4rem;
        background: url("/static/kor/images/icon/btn-search.png") no-repeat center / cover;
        vertical-align: middle;
    }

    #nav-icon3 {
        vertical-align: middle;
    }

    #mob_header.active .btn-search,
    #mob_header.is-scrolled .btn-search {
        background: url("/static/kor/images/icon/btn-search-active.png") no-repeat center / cover;
    }

    /* 모바일 네비게이션 서랍 */
    #mob_header.mob_only .nav {
        margin-top: 6.4rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: calc(100dvh - 6.4rem);
        position: absolute;
        right: -100%;
        top: 0;
        background: #fff;
        transition: all 0.4s;
        visibility: hidden;
    }

    #mob_header.mob_only .nav.active {
        right: 0;
        visibility: visible;
    }

    /* 모바일 GNB 리스트 */
    #mob_header.mob_only .nav #mob_gnb {
        padding: 2.4rem 0;
        display: flex;
        flex-direction: column;
        flex: unset;
        row-gap: 8px;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid #E5E5E3;
        z-index: 99999;
        transition: all 0.3s;
    }

    #mob_header.mob_only .nav #mob_gnb>li {
        flex: unset;
        height: unset;
    }

    #mob_header.mob_only .nav #mob_gnb>li>a {
        position: relative;
        display: block;
        justify-content: flex-start;
        width: 100%;
        height: unset;
        padding: 0 var(--space-40);
        font-size: 2.2rem;
        font-weight: 500;
        line-height: 5.6rem;
    }

    #mob_header.mob_only .nav #mob_gnb>li>a::after {
        content: "";
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        background: url(/static/kor/images/icon/mob-arrow.png) no-repeat center/cover;
        position: absolute;
        right: 1.6rem;
        top: 50%;
        transform: translateY(-50%);
    }

    #mob_header.mob_only .nav #mob_gnb>li.open>a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    #mob_header.mob_only .nav #mob_gnb>li.open>a {
        color: #0065BD;
        font-weight: bold;
    }

    /* 모바일 2Depth 서브메뉴 */
    #mob_header.mob_only .nav #mob_gnb .secondDep {
        display: none;
        background: #F0F0F0;
    }

    #mob_header.mob_only .nav #mob_gnb .secondDep .menuGroup {
        padding: 1.6rem 2.4rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 8px;
        column-gap: 16px;
    }

    #mob_header.mob_only .nav #mob_gnb .secondDep .menuGroup li {
        line-height: 1.6;
        font-size: 1.6rem;
        font-weight: 300;
        color: #2F3133;
        text-align: left;
    }

    #mob_header.mob_only .nav #mob_gnb .secondDep .menuGroup li.flex a {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #mob_header.mob_only .nav #mob_gnb .secondDep .menuGroup li.flex a::after {
        content: "";
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        background: url(/static/kor/images/icon/arrow-deg-G.png) no-repeat center/cover;
    }

    /* 모바일 검색창 */
    .search-wrap {
        padding: 3rem var(--space-40);
        top: 6.4rem;
    }

    /* 모바일 푸터 */
    #footer .foot_cont {
        border-bottom: 1px solid #CBCCCA;
    }

    #footer .foot_cont2 .foot-cont2-wrap {
        flex-direction: column;
        padding: 2rem 0 0;
    }

    #footer .foot_util .privacy {
        flex-wrap: wrap;
    }

    #footer .foot_util+p {
        margin-top: 2rem;
    }

    .foot_cont3.mob_only {
        padding-bottom: 3.2rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    #footer .family dl dd {
        width: 24rem;
    }

    #footer .family dl dd ul {
        opacity: 1;
    }
}

/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
	.foot-cont_1 .logo>a {
		height: auto;
	}
	
    .search-box input {
        font-size: 1.6rem;
        padding: 0 2rem;
        line-height: 5.6rem;
        height: 5.6rem;
    }

    .recommend-keywords {
        flex-direction: column;
        padding: unset;
    }

    .recommend-keywords .tags {
        gap: .6rem;
    }

    .recommend-keywords .tags a {
        font-size: 1.2rem;
        padding: 0 1.2rem;
        line-height: 3.2rem;
    }

    #footer .foot_cont {
        padding: 2.4rem 0 1.6rem;
    }

    .foot-cont_1 .logo img {
        height: 4rem !important;
    }

    #footer .foot_cont address,
    #footer .foot_cont address .copy {
        padding-top: unset;
    }

    #footer .foot_cont address p,
    #footer .foot_util+p {
        font-size: 1.2rem;
    }

    #footer .foot_cont2 .foot-cont2-wrap {
        padding: 1.6rem 0 0;
    }

    #footer .foot_util .privacy>li>a strong {
        font-size: 1.4rem;
    }

    #footer .family dl dt a {
        width: 16.4rem;
        font-size: 1.4rem;
        line-height: 4rem;
    }

    #footer .family dl dd {
        width: 100%;
        height: 0;
        bottom: 3.8rem;
    }

    .emblem>img {
        height: 6.4rem;
    }

    #footer .family dl dd ul li a {
        font-size: 1.4rem;
    }

    /* 모바일 푸터 개인정보처리방침 등 */
    #footer .foot_util .privacy {
        gap: 12px;
    }

    #footer .foot_util .privacy>li:not(:last-child)::after {
        margin-left: 12px;
    }
}