@charset "utf-8";

/* 기본값 */
.slideMenu{display:none;}
.util-wrap.mobile{display:none;}

/* 헤더 */
.header-wrap{position:relative;}
.bottom-header-box{display:flex;margin:0 auto;padding:0 2rem;width:100%;max-width:164rem;box-sizing:border-box;}
.logo-wrap{align-self:center;}
.logo-wrap h1{padding:2rem 0;}
.logo-wrap h1 a{display:block;}
.logo-wrap h1 a > .img-logo{display:block;width:clamp(18rem, 16vw, 23.2rem);}
.logo-wrap h1 a > .img-logo .img-default{display:block;max-width:100%;}
.gnb-wrap{margin:0 auto;padding:0 1rem;box-sizing:border-box;}
.gnb-ul{display:flex;justify-content:space-between;padding:2.9rem 0 0;}
.gnb-ul > li{display:flex;align-items:center;position:relative;}
.gnb-ul > li > a{display:block;padding:0 clamp(1rem, 1.7vw, 2.4rem) 2.9rem;font-size:clamp(1.6rem, 1.05vw, 1.8rem);font-weight:500;line-height:1.5;color:#333;}
.gnb-ul > li > a > span{position:relative;font-weight:500;}
.gnb-ul > li > a > span::before{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;border-radius:2px;background:#2566af;opacity:0;transition:0.3s ease;}
.gnb-ul > li:hover > a > span{font-weight:700;}
.gnb-ul > li:hover > a > span::before{width:100%;opacity:1;}

.gnb-ul > li .gnb-inner{display:none;position:absolute;top:100%;left:0;z-index:40;width:100%;height:auto !important;box-sizing:border-box;overflow:hidden;}
.gnb-ul > li.active .gnb-inner{display:block;visibility:visible;opacity:1;}
.gnb-ul > li .gnb-inner .gnb-inner-con{display:flex;margin:0 auto;display:flex;max-width:180rem;width:100%;box-sizing:border-box;}
.gnb-ul > li .gnb-inner .menu-title{display:none;}
.sub-mn{position:relative;z-index:30;padding:2rem 2px;width:calc(100% - 1px);}
.sub-mn > li > a{display:flex;justify-content:center;align-items:center;padding:8px 0;box-sizing:border-box;}
.sub-mn > li > a > span{position:relative;font-size:1.5rem;font-weight:400;color:#333;line-height:1.5;letter-spacing:-2.5%;transition:color 0.3s ease;}
.sub-mn > li > a > span::before{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;border-radius:2px;background:#2566af;opacity:0;transition:0.3s ease;}
.sub-mn > li > a:hover > span{font-weight:700;color:#2566af;}
.sub-mn > li > a:hover > span::before{width:100%;opacity:1;}
.sub-mn02{display:none;}
.gnb-bg{display:none;position:absolute;top:100%;left:50%;z-index:20;width:200vw;min-height:37.6rem;border-top:1px solid #E8EDF2;border-bottom:1px solid #E8EDF2;background:#fff;transform:translateX(-50%);-webkit-transform:translateX(-50%);}
.gnb-open .gnb-bg{display:block;}

/* 유틸메뉴 */
.util-wrap{display:flex;align-items:center;}
.util-wrap > ul{display:flex;justify-content:flex-end;align-items:center;gap:1.6rem;}
.util-wrap > ul li{position:relative;flex-shrink:0;}
.util-wrap > ul li a{display:block;}
.util-wrap .search-open{display:block;width:4rem;height:4rem;background:url(/_res/h2hub/main/etc/ico-search.svg) no-repeat center/100%;font-size:0;}
.util-wrap .sitemap-open{display:block;width:4rem;height:4rem;background:url(/_res/h2hub/main/etc/ico-sitemap.svg) no-repeat center/100%;font-size:0;}



@media screen and (max-width:1200px){
	.gnb-ul > li > a{font-size:1.5rem;}
	.util-wrap > ul{gap:8px;}
}

@media screen and (max-width:1640px){
	.bottom-header-box{padding:0 3.2rem}
}

@media screen and (max-width:1024.98px){
	/* 기본값 */
	.gnb-wrap{display:none;}
	.util-wrap{display:none;}
	.util-wrap.mobile{display:flex;}
	.gnb-bg{display:none;}

	/* 헤더 */
	.bottom-header-box{justify-content:space-between;padding:14px 32px 14px 32px;}
	.logo-wrap{display:flex;align-items:center;justify-content:space-between;position:relative;padding:0;height:auto;}
	.logo-wrap h1{padding:0;}
	.logo-wrap h1 a > .img-logo{padding:0;width:162px;}
	.util-wrap .search-open{width:32px;height:32px;background:url(/_res/h2hub/main/etc/ico-search-mobile.svg) no-repeat center center/100%;}
	.util-wrap .btn-menu{width:32px;height:32px;background:url(/_res/h2hub/main/etc/ico-sitemap-mobile.svg) no-repeat center center/100%;}
	
	body.mGnb-open{position:fixed;width:100%;height:100%;overflow:hidden;}
	body.mGnb-open .util-wrap > ul{display:flex;}

	/* gnb-mobile */
	.slideMenu{display:block;position:fixed;top:60px;right:0;z-index:100;width:100%;height:calc(100vh - 60px);background:#fff;overflow-y:auto;box-sizing:border-box;opacity:0;visibility:hidden;transition:all .3s;}
	body.mGnb-open .slideMenu.on{opacity:1;visibility:visible;}
	.m-gnb{position:relative;width:100%;min-height:100%;border-top:1px solid #f3f3f3;box-sizing:border-box;}
	.m-gnb .dep1 > li{}
	.m-gnb .dep1 > li > a{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:17px 20px;border-bottom:1px solid #f3f3f3;}
	.m-gnb .dep1 > li a span{font-weight:600;font-size:17px;line-height:1;color:#000;transition:0.3s ease;}
	.m-gnb .dep1 > li > a::after{content:'';display:block;flex-shrink:0;width:12px;height:7px;background:url(/_res/h2hub/main/img/common/icon_down_b.png) no-repeat center/100%;}
	.m-gnb .dep2{display:none;padding:20px 27px;background:#f6f6f6;box-sizing:border-box;}
	.m-gnb .dep2 > li a{display:flex;gap:10px;padding:15px 0;font-size:15px;color:#000;}
	.m-gnb .dep2 > li a span{font-size:15px;font-weight:400;}	
	.m-gnb .dep3{display:none;}
	
	.m-gnb .dep1 > li.active > a span{color:#163676;}
	.m-gnb .dep1 > li.active > a::after{transform:rotate(180deg);}
	.m-gnb .dep2 > li > a.active span{font-weight:500;}
	
	body.mGnb-open .util-wrap .btn-menu{display:none;}
	body.mGnb-open .util-wrap .m-util-box{display:block !important;}
	body.mGnb-open .util-wrap .m-util-box .slide-close{display:block !important;width:32px;height:32px;background:url(/_res/h2hub/main/etc/ico-btn-menu-close.svg) no-repeat center/100%;}
	body.mGnb-open .util-wrap .slide-close{background-image:url(/_res/h2hub/main/etc/ico-btn-menu-close.svg);}
}

@media screen and (max-width:768px){
	.bottom-header-box{padding:14px 12px 14px 16px;}	
}