@charset "utf-8";

/**
 * 헤더 레이아웃 스타일 (gt_header_inc_D@20260211)
 * PHP 변수는 :root에서 --gt-header-default-width, --gt-header-fmbtn-color 로 주입
 *
 * !important 사용처:
 * - .fix-mm1 등 레거시 고정 헤더 클래스 (외부 스크립트와 동시 적용)
 * - gt_mediaquery.css 가 #top_layer_3 / #gnb 등에 !important 로 숨김 처리하는 구간 → #tnb 범위에서만 되돌림
 */

/* ================= 상단 바: #tnb fixed (풀메뉴 뒤) ================= */
#tnb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 12;
    background: #fff;
    box-sizing: border-box;
    transition: box-shadow .2s ease-in-out;
}
body.gnb-fixed #tnb {
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}

/* 레거시/호환: 상단메뉴 고정 시 스크립트가 붙이는 클래스 */
.fix-mm1 {
    background: #fff !important;
    padding: 0 !important;
    transition: all .2s ease-in-out;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
}
.fix-mm2 { color: #000 !important; }
.gnb_1da { color: #000 !important; }

/* ================= 레이아웃 ================= */
.header-space { height: 148px; }
#tnb #top_logo.top-logo-wrap {
    position: relative;
    top: auto;
    width: 100%;
    height: 100px;
    padding: 0;
    z-index: auto;
    background: #fff;
}
.top-logo-inner {
    width: 100%;
    z-index: 10;
    margin: 0 auto;
    padding: 0;
}
.top-layer {
    width: 100%;
    max-width: var(--gt-header-default-width, 1200px);
    height: 100px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

/* 하단 서브 바 */
.gnb-sub-bar-wrap { width: 100%; background: #E3F4FC; margin: 0; padding: 0; z-index: 10; }
.gnb-sub-bar-inner {
    position: relative;
    max-width: var(--gt-header-default-width, 1200px);
    margin: 0 auto;
    padding: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.gnb-sub-bar-inner .logo_layout_space { margin: 0; width: 315px; height: 100%; }
.gnb-sub-bar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-shrink: 0;
}
/* default.css .gnb_2da 보다 #tnb 이중 ID로 덮음 (!important 없음) */
#tnb #gnb_sub_bar_content .gnb_2da {
    padding: 6px 14px;
    margin: 0;
    width: auto;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
}
#tnb #gnb_sub_bar_content .gnb_2da:hover {
    background: rgba(0,160,233,.15);
    color: #00a0e9;
}
#gnb_sub_bar_content {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 8px;
    min-height: 48px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#gnb_sub_bar_content .gnb-sub-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.gnb-sub-bar-links { position: static; right: auto; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.gnb-sub-bar-links a { color: #333; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.gnb-sub-bar-links a:hover { color: #00a0e9; }
.gnb-sub-bar-links .ico-yt { width: 22px; height: 22px; background: #E53935; border-radius: 50%; display: inline-flex; align-items: center; justify-content: space-evenly; }
.gnb-sub-bar-links .ico-yt .material-icons { font-size: 12px; color: #fff; }
.gnb-sub-bar-links .ico-ext { color: #2E7D32; font-size: 18px; }

.top-layer-1 { margin: 0; display: none;}
.top-layer-2 {
    margin: 0;
    width: auto;
    display: flex;
    align-items: center;
    min-height: 100px;
    box-sizing: border-box;
}
.top-layer-3 {
    flex: 1;
    margin: 0;
    width: auto;
    max-width: 55%;
}
.logo-box { margin: 0 auto; padding: 5px; }
#tnb #mainlogo_img { max-height: 74px; }
.top-layer-4 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-menu-flex {
    margin: 0;
    display: flex;
    height: 100px;
    justify-content: center;
}
.member-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
}

.mr-15 { margin-right: 15px; }
.color-salmon { color: salmon; }
.color-gray { color: #999; }

/* ================= 우측 메뉴 버튼 ================= */
#onweb_mbar3:hover { color: #56b879 !important; }

.tnb-anchor {
    display: none;
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 101;
    float: none;
    margin: 0;
    padding: 0;
}

.button_container {
    position: relative;
    top: auto;
    right: auto;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 1;
}
.button_container span {
    background: var(--gt-header-fmbtn-color, #56b879);
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    transition: all .35s ease;
}
.button_container span:nth-of-type(1) { top: 0; }
.button_container span:nth-of-type(2) { top: 10px; }
.button_container span:nth-of-type(3) {
    top: 20px;
    width: 18px;
    left: 17px;
}
.button_container.active_gtmenu .top {
    transform: translateY(10px) rotate(45deg);
}
.button_container.active_gtmenu .middle {
    opacity: 0;
}
.button_container.active_gtmenu .bottom {
    width: 35px;
    left: 0;
    transform: translateY(-10px) rotate(-45deg);
}

/* PC 구간(≥1400): 1차 메뉴(gnb_1dul) 줄바꿈 방지 */
@media (min-width: 1400px) {
    #tnb #gnb_1dul {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        align-items: center;
        justify-content: center;
    }
    #tnb #gnb .gnb_1dli {
        float: none !important;
        flex: 0 0 auto;
    }
}

/**
 * PC(≥1400) + subgrid: 상단·서브바 열 정렬
 * display:flex !important → #top_layer_3 등에 대한 gt_mediaquery display:none !important 대응
 */
@media (min-width: 1400px) {
    @supports (grid-template-columns: subgrid) {
        #tnb .header-pc-grid {
            --gt-header-col-gap: clamp(12px, 2.4vw, 28px);
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr) max-content;
            column-gap: var(--gt-header-col-gap);
            align-items: center;
            width: 100%;
            max-width: var(--gt-header-default-width, 1200px);
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

        #tnb .header-pc-grid #top_layer,
        #tnb .header-pc-grid .top-layer {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            grid-template-rows: minmax(100px, auto);
            align-items: center;
            width: 100%;
            max-width: none;
            height: auto;
            min-height: 100px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #tnb .header-pc-grid #top_layer_1,
        #tnb .header-pc-grid .top-layer-1 {
            display: none !important;
        }

        /* gt_mediaquery #top_layer_3 display:none !important 대응 */
        #tnb .header-pc-grid #top_layer_2,
        #tnb .header-pc-grid .top-layer-2.logo,
        #tnb .header-pc-grid #top_layer_3,
        #tnb .header-pc-grid .top-layer-3,
        #tnb .header-pc-grid #top_layer_4,
        #tnb .header-pc-grid .top-layer-4 {
            display: flex !important;
        }

        #tnb .header-pc-grid #top_layer_2,
        #tnb .header-pc-grid .top-layer-2.logo {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
            width: auto;
            max-width: none;
            text-align: left;
            padding-left: 0;
        }

        #tnb .header-pc-grid #top_layer_3,
        #tnb .header-pc-grid .top-layer-3 {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
        }

        #tnb .header-pc-grid #top_layer_4,
        #tnb .header-pc-grid .top-layer-4 {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            align-items: center;
            justify-content: center;
        }

        #tnb .header-pc-grid .top-menu-flex {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100px;
        }

        #tnb .header-pc-grid .logo-box {
            margin: 0;
            text-align: left;
        }

        #tnb .header-pc-grid .gnb-sub-bar-wrap {
            grid-column: 1 / -1;
            grid-row: 2;
            display: grid;
            grid-template-columns: subgrid;
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
            z-index: 10;
            background: transparent;
        }

        #tnb .header-pc-grid .gnb-sub-bar-wrap::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            top: 0;
            bottom: 0;
            background: #E3F4FC;
            z-index: -1;
        }

        #tnb .header-pc-grid .gnb-sub-bar-inner {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            max-width: none;
            width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #tnb .header-pc-grid .logo_layout_space {
            grid-column: 1;
            width: 100%;
            min-width: 0;
            margin: 0;
            justify-self: stretch;
        }

        #tnb .header-pc-grid #gnb_sub_bar_content,
        #tnb .header-pc-grid .gnb-sub-bar-content {
            display: flex;
            flex-wrap: nowrap;
            grid-column: 2;
            min-width: 0;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }

        #tnb .header-pc-grid .gnb-sub-bar-end {
            grid-column: 3;
            justify-self: end;
            min-width: 0;
        }
    }
}

/* 1400~1520: 폭·패딩·타이포 (subgrid 시 .header-pc-grid만 추가 제약) */
@media (max-width: 1520px) and (min-width: 1400px) {
    .tnb-anchor { display: none !important; }
    .header-space { height: 148px; }

    @supports (grid-template-columns: subgrid) {
        #tnb .header-pc-grid {
            max-width: 1520px;
            padding: 0 3%;
        }
    }

    /* subgrid 미지원: flex 폴백 — #top_layer_2·3 는 gt_mediaquery 의 width/text-align/display !important 와 충돌 */
    @supports not (grid-template-columns: subgrid) {
        #tnb #top_layer,
        #tnb .top-layer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100px;
            width: 100%;
            max-width: 1520px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 3%;
            box-sizing: border-box;
        }
        #tnb #top_layer_1,
        #tnb .top-layer-1 { display: none !important; }
        #tnb #top_layer_2,
        #tnb .top-layer-2.logo {
            display: flex;
            width: auto !important;
            max-width: none;
            text-align: left !important;
            padding-left: 0 !important;
        }
        #tnb #top_layer_3,
        #tnb .top-layer-3 {
            display: flex !important;
            flex: 1;
            width: auto;
            max-width: 58%;
            margin: 0;
            padding: 0;
        }
        #tnb #top_layer_4,
        #tnb .top-layer-4 {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #tnb .top-menu-flex {
            display: flex;
            height: 100px;
        }
        #tnb .gnb-sub-bar-wrap { display: block; width: 100%; }
        #tnb .gnb-sub-bar-inner {
            max-width: 1520px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 0 3%;
            box-sizing: border-box;
        }
    }

    #tnb .member-menu {
        display: flex !important;
        font-size: 11px;
    }
    #tnb #mainlogo_img { max-height: 66px; }

    #tnb #gnb .gnb_1dli { padding: 0 12px !important; }
    #tnb #gnb .gnb_1da { font-size: 17px !important; }
    #tnb #gnb_sub_bar_content .gnb_2da {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    #tnb .gnb-sub-bar-links a { font-size: 13px !important; gap: 4px; }
}

/* 중간·모바일 헤더(≤1399): 햄버거(tnb-anchor), 인라인 GNB·서브바 숨김 */
@media (max-width: 1399px) {
    #tnb .header-pc-grid { display: contents; }
    .tnb-anchor { display: block; }
    .header-space { height: 100px; }

    #tnb #top_layer_1,
    #tnb #top_layer_3,
    #tnb #top_layer_4,
    #tnb .top-layer-1,
    #tnb .top-layer-3,
    #tnb .top-layer-4 {
        display: none !important;
    }

    #tnb .top-layer-2 { flex: 0 0 auto; }
    .gnb-sub-bar-wrap,
    #gnb_sub_bar_content,
    .gnb-sub-bar-links {
        display: none !important;
    }
}

/* 1020~1399: 로고 중앙 (1400px 미만 햄버거 구간 중 태블릿 폭) */
@media (max-width: 1399px) and (min-width: 1020px) {
    #tnb .top-layer { justify-content: center; }
    #tnb #top_layer_2.logo,
    #tnb .top-layer-2.logo { text-align: center !important; }
    #tnb .logo-box { margin: 0 auto; text-align: center; }
    #tnb #mainlogo_img { display: block; margin-left: auto; margin-right: auto; }
}

/* ~1019px: 좁은 화면은 로고 좌측 정렬 유지 */
@media (max-width: 1019px) {
    #tnb .top-layer { justify-content: flex-start; }
    #tnb #top_layer_2.logo,
    #tnb .top-layer-2.logo { text-align: left !important; }
    #tnb .logo-box { margin: 0; text-align: left; }
    #tnb #mainlogo_img { display: block; margin-left: 0; margin-right: auto; }
}