/* ==============================
   [S] Header 공통
============================== */
.header_wrap { width: 100%; height: auto; position: fixed; left: 0; top: 0; z-index: 99; transition: all 0.3s ease; }
.header_wrap:before { content: ""; position: absolute; left: 0; top: 4rem; width: 100%; height: calc(100% - 4rem); z-index: 0; background: transparent; transition: all 0.3s ease;}
.header_wrap .inner { display: flex; align-items: flex-start; justify-content: space-between; }
.header_wrap .hd_logo { height: 4rem; flex-shrink: 0; margin-right: 2.4rem; }
.header_wrap .hd_logo .inn { height: 100%; display: flex; align-items: center; justify-content: center; }
.header_wrap nav { width: 100%; height: 100%; }
.header_wrap nav .menu_list .menu_item .sub_title_txt { width: 100%; display: block; word-break: keep-all; }

.header_wrap.sch:after,
.header_wrap.fixed:after,
.header_wrap.active:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4rem; z-index: 0; background: linear-gradient(to bottom, #20405C 0%, #234766 50%, #20405C 100%); }
.header_wrap.sch:before,
.header_wrap.fixed:before,
.header_wrap.active:before { background: var(--white); z-index: 1}
.header_wrap .inner { z-index: 1; }

/* depth_1 */
.header_wrap nav .menu_list.depth_1 { width: 100%; height: 100%; display: flex; flex: 1; }
.header_wrap nav .menu_list.depth_1 .menu_item.depth_1 { width: 100%; height: auto; display: flex; flex-flow: column; }
.header_wrap nav .menu_list.depth_1 .menu_item.depth_1 .sub_title_txt.depth_1 { height: 4rem; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; font-weight: 600; color: var(--white); flex-shrink: 0; }

/* depth_2 */
.header_wrap nav .menu_list.depth_2 { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.2s ease; }
.header_wrap nav .menu_list.depth_2 .menu_item.depth_2 .sub_title_txt.depth_2 { padding: 0.4rem; font-size: 0.7rem; color: var(--gray80); text-align: center; font-weight: 600; }

/* depth_3 */
.header_wrap nav .menu_list.depth_3 .menu_item.depth_3 { padding: 0 0.25rem; }
.header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3 { padding: 0.3rem 0.2rem; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; gap: 0.2rem; color: var(--gray70); text-align: center; }

/* util */
.header_wrap .hd_util { flex-shrink: 0; height: 4rem; display: flex; align-items: center; margin-left: 3.2rem; gap: 1rem; }
.header_wrap .hd_util .hd_util_item{ display: inline-flex; position: relative}
.header_wrap .hd_util .hd_util_item .inn { width: 1.2rem; height: 1.2rem;}
.header_wrap .hd_util .hd_util_item .inn.hd_search_trigger,
.header_wrap .hd_util .hd_util_item .inn.hd_search2_trigger { background: url("../../img/user_new/icon/ic_search_w.svg") no-repeat center / contain}
.header_wrap .hd_util .hd_util_item .inn.hd_search3_trigger { background: url("../../img/user_new/icon/ic_search.svg") no-repeat center / contain}
.header_wrap .hd_util .hd_util_item .inn.hd_login_trigger { background: url("../../img/user_new/icon/ic_login.svg") no-repeat center / contain}
.header_wrap .hd_util .hd_util_item .inn.hd_mypage_trigger { background: url("../../img/user_new/icon/ic_logout.svg") no-repeat center / contain}
.header_wrap .hd_util.mo { display: none; }
.mo_menu { display: none; width: 1.2rem; height: 4rem; mask-image: url("../../img/user_new/icon/ic_menu.svg"); mask-repeat: no-repeat; mask-size: contain; background: var(--white); mask-position: center; }
.mo_close { display: none; }

.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list{ display: flex; flex-flow: column; background: #fff; border-radius: 0.6rem; padding: 0.4rem; position: absolute; right: 0; top: 2rem; border: 1px solid var(--gray40); z-index: 200}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item{ border-bottom: 1px solid var(--gray40);}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item:last-child{ border-bottom: none;}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item .inn{ display: flex; align-items: center; gap: 0.55rem; word-break: keep-all; font-size: 0.64rem; font-weight: 500; min-width: 9rem; color: #5d5d5d; height: 2.4rem; border-radius: 0.5rem; padding: 0 0.9rem}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item .inn .ic{ width: 0.8rem; height: 0.8rem; background-size: contain; background-repeat: no-repeat; background-position: center}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item .inn:hover{ color: var(--black) !important; background: var(--primary30)}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_01 .inn .ic{ background-image: url("../../img/user_new/icon/ic_mp_01.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_01 .inn:hover .ic{ background-image: url("../../img/user_new/icon/ic_mp_01_hover.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_02 .inn .ic{ background-image: url("../../img/user_new/icon/ic_mp_02.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_02 .inn:hover .ic{ background-image: url("../../img/user_new/icon/ic_mp_02_hover.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_03 .inn .ic{ background-image: url("../../img/user_new/icon/ic_mp_03.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_03 .inn:hover .ic{ background-image: url("../../img/user_new/icon/ic_mp_03_hover.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_04 .inn .ic{ background-image: url("../../img/user_new/icon/ic_mp_04.svg")}
.header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list .mypage_item.item_04 .inn:hover .ic{ background-image: url("../../img/user_new/icon/ic_mp_04_hover.svg")}

.hd_search_wrap{ width: 100%; height: 100vh; overflow-y: auto; background: var(--gray5); position: fixed; left: 0; top: 0; z-index: 200; padding: 2rem 0.5rem 5rem}
.hd_search_wrap .inner{ display: block}
.hd_search_wrap .hd_search_logo{ display: flex}
.hd_search_wrap .hd_search_logo img{ height: 2rem}
.hd_search_wrap .trigger_close{ width: 2rem; height: 2rem; position: absolute; right: 0.8rem; top: 0; background: url("../../img/user_new/icon/ic_close.svg") no-repeat center / 1rem}
.hd_search_wrap .hd_search_box{ width: 100%; margin-top: 4rem; margin-bottom: 2.4rem;}
.hd_search_list_wrap{ width: 100%; display: flex; gap: 3rem}
.hd_search_list_wrap .hd_search_list_tit{ width: 100%; font-size: 1.2rem; font-weight: 600; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gray40); margin-bottom: 1.2rem;}
.hd_search_list_wrap .hd_search_keyword_list{ width: 16.8rem; flex-shrink: 0; }
.hd_search_list_wrap .hd_search_keyword_list .hd_search_list{ display: flex; flex-flow: column; gap: 0.8rem}
.hd_search_list_wrap .hd_search_keyword_list .hd_search_item_inn{ display: flex; align-items: center; gap: 0.5rem}
.hd_search_list_wrap .hd_search_keyword_list .hd_search_item_inn .num{ font-size: 0.9rem; font-weight: 800; color: var(--primary); width: 0.8rem; display: inline-block}
.hd_search_list_wrap .hd_search_keyword_list .hd_search_item_inn .hd_search_item_txt{ font-size: 0.8rem; font-weight: 500; color: var(--gray80);}
.hd_search_list_wrap .hd_search_keyword_list .hd_search_item_inn:hover .hd_search_item_txt{ text-decoration: underline; text-underline-position: under}
.hd_search_list_wrap .hd_search_recommended_list{ width: 100%; min-width: 0}
.hd_search_list_wrap .hd_question_wrap { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem}
.header_wrap .hd_util .hd_util_item .hd_search_list_wrap .hd_question_wrap .hd_question_item { width: 100%}
.header_wrap .hd_util .hd_util_item .hd_search_list_wrap .hd_question_wrap .hd_question_item .inn { width: 100%; height: 100%; padding: 1rem 1.2rem 3rem; background: var(--gray5); font-size: 0.8rem; line-height: 150%; word-break: keep-all; position: relative; display: block; background: var(--white); border-radius: 0.8rem; color: var(--gray80); border: 2px solid var(--white);}
.header_wrap .hd_util .hd_util_item .hd_search_list_wrap .hd_question_wrap .hd_question_item .inn:after { content: ""; width: 1rem; height: 1rem; -webkit-mask-image: url(../../img/user_new/icon/ic_q.svg); mask-image: url(../../img/user_new/icon/ic_q.svg); mask-position: center; mask-repeat: no-repeat; mask-size: contain; background: var(--gray80); position: absolute; left: 1rem; bottom: 1.2rem}
.header_wrap .hd_util .hd_util_item .hd_search_list_wrap .hd_question_wrap .hd_question_item .inn:hover{ border-color: var(--primary); color: var(--gray80) !important;}
.header_wrap .hd_util .hd_util_item .hd_search_list_wrap .hd_question_wrap .hd_question_item .inn:hover:after{ background: var(--primary)}

/* 임시 검색 영역 */
.header_wrap.sch .sub_title_txt{ pointer-events: none}
.hd_search2_trigger_wrap{ width: 100%; position: fixed; left: 0; top: 4rem}
.hd_search2_trigger_wrap.open:before{ content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 4rem; z-index: 2}
.hd_search2_trigger_wrap.open:after{ content: ""; position: fixed; left: 0; top: 4rem; width: 100%; height: calc(100% - 4rem); background:rgba(0,0,0,0.5); z-index: 0}
.hd_search2_trigger_wrap .trigger_toggle { background: var(--gray5) url("../../img/user_new/common/bg_sch.svg") no-repeat right bottom; overflow: hidden; max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; transition: max-height .3s ease, opacity .2s ease, padding-top .3s ease, padding-bottom .3s ease; z-index: 1; position: relative}
.hd_search2_trigger_wrap .trigger_toggle.open { max-height: 13rem; opacity: 1; padding-top: 2.5rem; padding-bottom: 2.5rem;}
.hd_search2_trigger_wrap .inner{ flex-flow: column}
.hd_search2_trigger_wrap .sch_tit{ width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--gray80); margin-bottom: 0.5rem; padding: 0 1.5rem; word-break: keep-all}
.hd_search2_trigger_wrap .main_search_box_wrap{ width: 100%; height: calc(3.5rem + 1.6rem); padding: 0.8rem; position: relative}
.hd_search2_trigger_wrap .main_search_box_wrap:before{ content: ""; width: 50%; height: 100%; background: url("../../img/user_new/common/bg_schbox_l.svg") no-repeat left center / auto 100%; position: absolute; left: 0; top: 0}
.hd_search2_trigger_wrap .main_search_box_wrap:after{ content: ""; width: 50%; height: 100%; background: url("../../img/user_new/common/bg_schbox_r.svg") no-repeat right center / auto 100%; position: absolute; right: 0; top: 0}
.hd_search2_trigger_wrap .trigger_close{ position: absolute; right: 1rem; top: 0.25rem; width: 1rem; height: 1rem}
.hd_search2_trigger_wrap .trigger_close .svg_icon{ width: 100%; height: 100%; background: var(--gray70)}
@media ( max-width: 1024px) {
    .header_wrap.sch .sub_title_txt { pointer-events: auto}
    .hd_search2_trigger_wrap .trigger_toggle { background-size: 45% auto}
}

.question_item .inn:hover { background: var(--primary30)}
.question_item .inn:hover:after { background: var(--primary)}

.header_wrap .hd_logo{ display: flex; align-items: center}
.header_wrap .hd_logo .inn { background: url("../../img/user_new/common/hd_logo.svg") no-repeat left center / contain; width: 9.35rem}
body.ty_02 .header_wrap{ background: var(--white)}
body.ty_02 .header_wrap:after{ content: ""; width: 100%; height: 1px; background: #acacac; position: fixed; left: 0; top: 4rem; z-index: 0}
body.ty_02 .header_wrap .hd_logo .inn { background-image: url("../../img/user_new/common/hd_logo_gy.svg")}
body.ty_02 .header_wrap .hd_util .hd_util_item .inn,
body.ty_02 .header_wrap nav .menu_list.depth_1 .menu_item.depth_1 .sub_title_txt.depth_1{ color: #000;}
body.ty_02 .header_wrap .mo_menu{ background: var(--black)}
body.ty_02 .header_wrap.fixed:after,
body.ty_02 .header_wrap.active:after{ content: ""; width: 100%; height: 1px; background: #acacac; position: fixed; left: 0; top: 4rem; z-index: 0}
body.ty_02 .header_wrap .hd_util .hd_util_item .inn.hd_search_trigger { background: url("../../img/user_new/icon/ic_search.svg") no-repeat center / contain}
body.ty_02 .header_wrap .hd_util .hd_util_item .inn.hd_login_trigger { background: url("../../img/user_new/icon/ic_login_b.svg") no-repeat center / contain}
body.ty_02 .header_wrap .hd_util .hd_util_item .inn.hd_mypage_trigger { background: url("../../img/user_new/icon/ic_logout_b.svg") no-repeat center / contain}
/* ==============================
   [S] Header PC (min-width:1024px)
============================== */
@media (min-width: 1024px) {
    .header_wrap.active { box-shadow: 0 0.21rem 1.58rem 0.32rem rgba(0, 0, 0, 0.64); height: 25rem}
    .header_wrap.active .inner{ height: 100%}
    .header_wrap nav .menu_list .menu_item.active .sub_title_txt.depth_1,
    .header_wrap nav .menu_list .menu_item .sub_title_txt.depth_1:hover,
    .header_wrap nav .menu_list .menu_item .sub_title_txt.depth_1:focus,
    .header_wrap .hd_util .hd_util_item .inn:focus,
    .header_wrap .hd_util .hd_util_item .inn:hover { color: var(--primary) !important; }
    .header_wrap nav .menu_list .menu_item.active .menu_list.depth_2 { background: var(--gray5); }
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.active .sub_title_txt.depth_2,
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2 .sub_title_txt.depth_2:focus,
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2 .sub_title_txt.depth_2:hover { background: var(--primary); color: var(--black); border-radius: 0.3rem; }
    .header_wrap nav .menu_list.depth_3 { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.2s ease; background: var(--white); border-radius: 0.3rem; }
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2{ padding: 0 0.25rem}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.active .menu_list.depth_3 { max-height: 20rem; opacity: 1; visibility: visible; padding: 0.5rem 0; }
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3:focus,
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3:hover { background: var(--primary30); color: var(--black); border-radius: 0.3rem; }
    .header_wrap nav.active .menu_list.depth_2 { height: 100%; max-height: 40rem; opacity: 1; visibility: visible; padding: 1rem 0 1rem 0; border-left: 1px solid #d8d8d8; margin-top: 1px;}
    .header_wrap nav.active .menu_list.depth_1 .menu_item.depth_1:last-child .menu_list.depth_2 { border-right: 1px solid #d8d8d8; }
    .hd_txt_wrap { position: absolute; left: 0; top: 4rem; padding: 2rem 0 2rem 3.75rem; display: none; }
    .hd_txt_wrap:after { content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: var(--primary) url("../../img/user_new/common/bg_hd_txt.svg") no-repeat center / 60% auto; position: absolute; left: 0; top: 2rem; }
    .hd_txt_wrap .hd_tit { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
    .hd_txt_wrap .hd_txt { font-weight: 600; font-size: 0.6rem; color: var(--gray70); max-width: 5rem; word-break: keep-all; }
    .header_wrap nav.active .menu_list.depth_1 .menu_item.depth_1.active .hd_txt_wrap { display: block; }
}

/* ==============================
   [S] Header 반응형 (max-width:1240px)
============================== */
@media (max-width: 1240px) {
    .header_wrap .hd_logo { margin-right: 0.8rem; }
    .header_wrap .hd_util { margin-left: 0.8rem; }
    .header_wrap nav .menu_list.depth_1 .menu_item.depth_1 .sub_title_txt.depth_1 { font-size: 0.8rem; }
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2 .sub_title_txt.depth_2 { font-size: 0.8rem; }
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3 { font-size: 0.72rem; }
}

/* ==============================
   [S] Header 모바일 (max-width:1024px)
============================== */
@media (max-width: 1024px) {
    .header_wrap.open .inner:before{ content: ""; width: 100%; height: 100vh; background: rgba(0,0,0,0.67); position: fixed; left: 0; top: 0; z-index: 100}
    .header_wrap .hd_logo .inn{ width: 7.5rem; height: 1.6rem}
    .header_wrap .hd_logo img { height: 1.6rem; }
    .header_wrap .hd_util { position: absolute; right: 1rem; top: 0; gap: 1rem}
    .header_wrap .hd_util .hd_util_item{ display: inline-flex}
    .header_wrap .hd_util.mo { display: inline-flex; }
    .header_wrap .hd_util.mo .hd_util_item { font-size: 1rem; position: relative; display: inline-flex}
    .header_wrap .hd_util.mo .hd_util_item .inn { color: var(--gray80); line-height: 100%;}
    .header_wrap .hd_util .hd_util_item .hd_mypage_trigger_wrap .mypage_list { right: -2.4rem}

    .mo_menu { display: block; }
    .mo_close { position: absolute; right: 0.8rem; top: 0; display: inline-flex; align-items: center; justify-content: center; height: 4rem; }
    .mo_close .svg_icon { background: var(--gray70); width: 1rem; height: 1rem; mask-size: 100% auto}
    .header_wrap nav { width: 80vw; height: 100vh; position: fixed; right: 0; top: 0; background: var(--white); z-index: 101; display: none; padding-top: 4rem}
    .header_wrap.open nav { display: block; }
    .header_wrap nav:after { content: ""; width: 100%; height: 1px; background: #acacac; position: absolute; left: 0; top: 4rem}
    .header_wrap nav:before { content: ""; width: 50%; height: 4rem; background: url("../../img/user_new/common/hd_logo_b.svg") no-repeat left center / auto 40%; position: absolute; left: 1rem; top: 0}
    .header_wrap nav .menu_list.depth_1 .menu_item.depth_1{ padding: 1.2rem 0}
    .header_wrap nav .menu_list.depth_1 .menu_item.depth_1 .sub_title_txt.depth_1 { font-size: 0.9rem; color: var(--black); height: auto}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2{ border-bottom: 1px solid #acacac;}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2 .sub_title_txt.depth_2 { font-size: 0.8rem; color: var(--black); height: 2.75rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.has_sub .sub_title_txt.depth_2:after { content: ""; width: 0.65rem; height: 0.65rem; mask-image: url("../../img/user_new/icon/ic_plus_02.svg"); mask-repeat: no-repeat; mask-size: contain; background: var(--gray60); mask-position: center}
    .header_wrap nav .menu_list.depth_3{ display: none}
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3 { font-size: 0.7rem; color: var(--gray70); padding: 0.6rem 1.2rem; justify-content: flex-start}
    .header_wrap nav .menu_list.depth_1 { width: 30%; flex-flow: column; border-right: 1px solid #acacac; }
    .header_wrap nav .menu_list.depth_2 { position: absolute; right: 0; top: 4rem; width: 70%; height: calc(100vh - 4rem); opacity: 1; max-height: 100vh; transition: none; display: none; visibility: visible; padding: 0; overflow-y: auto; background: var(--gray10)}

    .header_wrap nav .menu_item.depth_1.on .menu_list.depth_2 { display: block; }
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.has_sub.on .menu_list.depth_3{ display: block; background: var(--white); padding: 0.5rem 0}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.has_sub.on .sub_title_txt.depth_2{ background: var(--primary30); border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary);}
    .header_wrap nav .menu_list.depth_2 .menu_item.depth_2.has_sub.on .sub_title_txt.depth_2:after { mask-image: url("../../img/user_new/icon/ic_minus_02.svg"); background: var(--black)}
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3.on,
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3:hover,
    .header_wrap nav .menu_list.depth_3 .menu_item.depth_3 .sub_title_txt.depth_3:focus{ color: var(--black); text-decoration: underline; text-underline-position: under; text-decoration-color: var(--primary) !important; text-underline-offset: 0.2em;}
    .hd_txt_wrap { display: none}
    .hd_txt_wrap .hd_tit { display: none}
    .hd_txt_wrap .hd_txt { font-weight: 600; font-size: 0.6rem; color: #464646; max-width: 5rem; word-break: keep-all; text-align: center;}
    .menu_item.depth_1.on{ background: var(--primary)}
    .menu_item.depth_1.on .hd_txt_wrap{ display: inline-flex; justify-content: center; margin-top: 0.25rem;}

    body.ty_02 .header_wrap{ border-bottom: 1px solid #acacac;}
    body.ty_02 .header_wrap:after { display: none !important;}

    .hd_search_list_wrap{ flex-flow: column}
    .hd_search_list_wrap .hd_search_keyword_list{ width: 100%}
    .hd_search_list_wrap .hd_question_wrap{ grid-template-columns: repeat(1,1fr)}
}