#hd {width: 100% ;z-index: 999; transition: all .1s; position: relative; margin-top: 38px}
#hd.scroll {position: sticky; left: 0; top: 0}

/*header - tnb*/
#tnb {background: var(--light-blue); padding: 7px 0; height: 38px; position: absolute; left: 0; top: 0; width: 100%}
#tnb > div {height: 100%}
#tnb .inner_container {display: flex; justify-content: space-between; align-items: center; height: 100%}
#tnb .tnb_menu {display: flex; gap: 0 20px}
#tnb .tnb_menu li {position: relative}
#tnb .tnb_menu li a {display: flex; text-align: center; align-items: center; justify-content: center; color: var(--black); transition: all .2s}
#tnb .tnb_menu li + li::before {content: ''; width: 1px; height: 12px; background: #96AFCA; display: block; position: absolute; left: -10px; top: 2px}
#tnb .tnb_menu li a:hover {color: var(--key-color)}
#tnb .member_info p {color: var(--black); display: flex; align-items: center}
#tnb .member_info p::before {content: ''; width: 24px; height: 24px; background: url(../img/common/profile_icon.svg) no-repeat center / cover; margin-right: 8px}

/*header - gnb*/
#hd_wrapper {background: var(--white); box-shadow: 0px -6px 6px rgba(0,0,0,0.1); width: 100%}
#hd_wrapper .full_container {border-bottom: 1px solid #ddd}
#hd_wrapper .full_container.sub {border-bottom: none}
#hd.scroll #hd_wrapper .full_container.sub {border-bottom: 1px solid #ddd}
#hd_wrapper .logo {width: 175px}
#hd_wrapper .inner_container {display: flex; justify-content: space-between; align-items: center}
#hd_wrapper nav {display: flex; align-items: center; z-index: 9999}
#hd_wrapper nav .gnb_area {display: flex; position: relative; gap: 0 45px}
#hd_wrapper nav .gnb_area li.depth1 {position: relative}
#hd_wrapper nav .gnb_area li.depth1 > a {height: 90px; display: flex; align-items: center; white-space: nowrap}
#hd_wrapper nav .gnb_area li.depth1 > a.on {color: var(--key-color); font-weight: 700}
#hd_wrapper nav .gnb_area li.depth1:last-child > a {padding-right: 0}
#hd_wrapper nav .gnb_area li.depth1:hover > a,
#hd_wrapper nav .gnb_area li.depth1 > a:focus{font-weight: bold; color: var(--key-color); transition: all .2s; position: relative; z-index: 3}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 {position: absolute; z-index: 3; width: 230px; /*height:300px; left: var(--nav_left_pd);*/ visibility: hidden; opacity: 0; padding:35px 25px; left: 50%; transform: translateX(-50%)}

/*ldh : 25-02-11 헤더 재수정*/
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2::before {content:''; display: block; width: 100%; height: calc(100% - 1px); background: var(--white); position: absolute; border-radius: 20px; left: 0; bottom: 0; z-index: 0; box-shadow: 0 4px 14px 4px rgba(0,0,0,0.08)}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 > .depth2 {z-index: 1; position: relative}

#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2.active {visibility: visible; opacity: 1; transition: all .4s}/*풀다운 메뉴 필요하면 visible로 유지*/
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title{text-align: right}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner,
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 {display: flex; gap:0 50px; position: absolute; left: 327px; top: 0; width: calc(1200px - 327px); height: 300px; padding-left: 55px; padding-top: 40px}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 {visibility: hidden; opacity: 0}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3.active {visibility: visible; opacity: 1; transition: all .3s}/*풀다운 메뉴 필요하면 visible로 유지*/
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner li,
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 li {text-align: left}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner li + li,
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 li + li {padding-top: 15px}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a {color: var(--black); font-size: 24px; font-weight: 500; letter-spacing: -1px; padding-right: 35px; position: relative}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner a:hover,
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 li a:hover {color: var(--key-color); font-weight: 500}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a::after {content: ''; width: 11px; height: 17px; background: var(--black); position: absolute; right: 0; top: 50%; transform: translateY(-50%)}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a.now_hover{color: var(--key-color); font-weight: 600; font-size: 27px}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a.now_hover span {border-bottom: 2px solid var(--key-color)}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a.now_hover::after {background: var(--key-color)}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a span {line-height: 1}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2_title + .depth2_title {margin-top: 10px}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2 a:hover {color: var(--key-color); font-weight: 600}
#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2 > a.on {color: var(--key-color); font-weight: 600}

#hd_wrapper nav .gnb_area li.depth1 .gnb_area_2 .depth2 + .depth2 {padding-top:15px}
#hd_wrapper nav .sch {width: 32px; height: 32px; margin-left: 50px}
#hd_wrapper nav .sch:after {content: ''; width: 100%; height: 100%; background: var(--font); display: block; -webkit-mask-size: 22px; transition: all .2s}
#hd_wrapper nav .sch:hover:after {background: var(--key-color2)}
#hd_wrapper nav .sch.close:after {-webkit-mask-image: url(../img/common/close_icon.svg)}
#hd_wrapper nav .fullDownBtn {width: 28px; height: 22px; position: relative; margin-left: 30px}
#hd_wrapper nav .fullDownBtn span {display: block; width: 28px; height: 4px; background: var(--key-color); border-radius: 2px; position: absolute; transition: all .2s}
#hd_wrapper nav .fullDownBtn:hover span {background: var(--key-color2)}
#hd_wrapper nav .fullDownBtn span:nth-child(1) {top: 0; left: 0}
#hd_wrapper nav .fullDownBtn span:nth-child(2) {top: 9px; left: 0}
#hd_wrapper nav .fullDownBtn span:nth-child(3) {bottom: 0; left: 0}
#hd_wrapper nav .fullDownBtn.close span:nth-child(1) {transform: rotate(45deg) translateY(-50%); top: 50%; transform-origin: top}
#hd_wrapper nav .fullDownBtn.close span:nth-child(2) {display: none}
#hd_wrapper nav .fullDownBtn.close span:nth-child(3) {transform: rotate(-45deg) translateY(-50%); top: 50%; transform-origin: top}
.menu_under_line,
.menu_under_line_full {height: 5px; background: var(--key-color); border-radius: 20px; position: absolute; top: 86px; z-index: 1999; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; -ms-transition: all 0.15s; transition: all 0.15s; z-index: 2}
.menu_under_line_full {z-index: 1000}
#hd.scroll .menu_under_line {top: 86px} 
#gnb_all_bg_box {display: none; width: 100%; height: 420px; background: var(--white); position: absolute; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border-bottom: 1px solid #ddd; z-index: 1}
#gnb_all_bg_box::before {content: ''; width: calc(50% - 600px); height: 100%; position: absolute; left: 0; top: 0; background: var(--light-blue2)}
#gnb_all_bg_box::after {content: ''; width: 327px; height: 100%; position: absolute; left: calc((100% - 1200px) / 2); top: 0; background: var(--light-blue2)}

/*header - search box*/
#hd_sch_box {position: absolute; left: 0; top: 91px; width: 100%; z-index: 999; background: var(--white); visibility: hidden; opacity: 0; z-index: 0; box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.15)}
#hd_sch_box.active {visibility: visible; opacity: 1; transition: all .2s}
#hd_sch_box .hd_sch_wr {width: 100%; padding: 55px 0; display: flex; justify-content: center}
#hd_sch_box .hd_sch_wr #hd_sch {width: 770px; background: #f4f4f4; border-radius: 54px; height: 54px; overflow: hidden}
#hd_sch_box .hd_sch_wr #hd_sch form {display: flex; width: 100%; height: 100%; position: relative}
#hd_sch_box .hd_sch_wr #hd_sch form input[type="text"] {width: 100%; border: none; background: transparent; border-radius: 54px 0 0 54px; padding: 0 64px 0 30px}
#hd_sch_box .hd_sch_wr #hd_sch form input[type="text"]:focus {border: 2px dashed var(--key-color2)}
#hd_sch_box .hd_sch_wr #hd_sch form button {width: 54px; height: 54px; border-radius: 50%; position: absolute; right: 0; top: 0; border: none; background: var(--key-color); color: var(--white); display: flex; justify-content: center; align-items: center; transition: all .2s}
#hd_sch_box .hd_sch_wr #hd_sch form button:hover {background: var(--key-color2)}
#hd_sch_box .hd_sch_wr #hd_sch form button:focus {border: 2px dashed var(--white); outline: none}
#hd_sch_box .hd_sch_wr #hd_sch form button::after {content: ''; width: 26px; height: 26px; background: var(--white); display: block}

/*header - fulldown*/
#full_down_bg_box {width: 100%; height: 470px; background: var(--white); position: absolute; box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.15); left: 0; top: 91px; z-index: 999; visibility: hidden; opacity: 0}
#full_down_bg_box.active {visibility: visible; opacity: 1}
#hd_wrapper nav .gnb_area.full li.depth1 {position: relative}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 { visibility: visible; opacity: 1; z-index: 1000; width: auto; position: absolute; height: auto; left: auto; padding-top: 35px; padding-right: 0}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title:not(.with_depth3) > a{display: none}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title .gnb_area_3 {display: none}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner {display: block; position: relative; left: 0; top: auto; width: 170px; height: auto; padding-left: 0; padding-top: 0}
#hd_wrapper nav .gnb_area.full ~ .menu_under_line {display: none!important}
#hd_wrapper nav .gnb_area:not(.full) ~ .menu_under_line_full {display: none!important}

#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 {width: 200px; padding: 35px 0 0; transform: translateX(0);}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title {text-align: left}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title + .depth2_title {margin-top:0; padding-top: 15px}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a {padding-right: 0}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a span {color: var(--font);}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a::after {display: none}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a.now_hover span {border-bottom: none}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a:hover span {color: var(--key-color); font-weight: 500}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner > ul + ul {padding-top: 15px}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner li a {font-size: 16px}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title .gnb_area_2_inner li a .full_span {display: block}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2 .depth2_title.with_depth3 > a{font-size: 16px; font-weight: 400}
#hd_wrapper nav .gnb_area.full li.depth1 .gnb_area_2::before {content:none}
#hd_wrapper nav .gnb_area.full li.depth1:nth-child(1) .gnb_area_2 { transform: translateX(-5px);}
#hd_wrapper nav .gnb_area.full li.depth1:nth-child(4) .gnb_area_2 { transform: translateX(-30px);}
#hd_wrapper nav .gnb_area.full li.depth1:nth-child(5) .gnb_area_2 { transform: translateX(10px);}


/*header - breadcrumb*/
.breadcrumb {background: var(--bg-gray4); height: 50px; border-bottom: 1px solid var(--line2)}
.breadcrumb nav,
.breadcrumb nav .full_container,
.breadcrumb nav .inner_container {height: 100%}
.breadcrumb nav ul {display: flex; height: 100%; align-items: center; gap: 0 45px}
.breadcrumb nav ul li[aria-current="home"] a {font-size: 0; width: 20px; height: 20px; display: block}
.breadcrumb nav ul li[aria-current="home"] a::after {content:''; display: block; width: 100%; height: 100%; background: #666; transition: all .2s}
.breadcrumb nav ul li[aria-current="home"] a:hover::after {background: var(--key-color2)}
.breadcrumb nav ul li {position: relative}
.breadcrumb nav ul li + li::before {content:''; display: block; width: 5px; height: 10px; background: #666; position: absolute; left: -27px; top: 4px}
.breadcrumb nav ul li a {transition: all .2s}
.breadcrumb nav ul li a:hover {color: var(--key-color2)}


/****************** Media Query ******************/