@charset "utf-8";

/* 기본값 */
.slideMenu{display:none;}
.btn-menu,
.slide-close{display:none;}

/* 헤더 */
.header-wrap{position:absolute;top:0;left:0;z-index:200;width:100%;border-bottom:1px solid var(--white30);backdrop-filter:blur(8px)}
.bottom-header-box{display:flex;margin:0 auto;padding:0 2rem;width:100%;max-width:148rem;box-sizing:border-box;}
.logo-wrap{align-self:center;}
.logo-wrap h1 a{display:block;}
.logo-wrap h1 a > .img-logo{display:block;width:clamp(18rem, 17vw, 290px);}
.logo-wrap h1 a > .img-logo .img-default{display:block;}
.logo-wrap h1 a > .img-logo .img-hover{display:none;}
.gnb-wrap{margin:0 auto;box-sizing:border-box;}
.gnb-ul{display:flex;justify-content:space-between;height:124px;}
.gnb-ul > li{display:flex; align-items:center;}
.gnb-ul > li > a{display:block;padding:0 clamp(8px, 0.7vw, 1.5rem);font-size:clamp(1.6rem, 1.05vw, 1.8rem);font-weight:var(--font-weight-medium);color:var(--white100);line-height:1;transition:0.3s ease;}
.gnb-ul > li.active > a > span{display:block;position:relative;}
.gnb-ul > li.active > a > span::after{content:'';position:absolute;bottom:-1.2rem;left:0;width:100%;height:3px;background-color:var(--color124);}
.gnb-ul > li .gnb-inner{display:none;position:absolute;top:100%;left:0;z-index:40;width:100%;min-height:37.6rem;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;padding:0 2rem;display:flex;max-width:180rem;width:100%;box-sizing:border-box;}
.gnb-ul > li .gnb-inner .menu-title{display:flex;flex-direction:column;gap:0.9rem;padding:6rem 2rem 0 18rem;width:24.278%;box-sizing:border-box;}
.gnb-ul > li .gnb-inner .menu-title a{display:block;}
.gnb-ul > li .gnb-inner .menu-title a span{font-size:3rem;font-weight:var(--font-weight-bold);color:var(--color124);line-height:4rem;word-break:keep-all;}
.gnb-ul > li .gnb-inner .menu-title > span{font-size:1.8rem;font-weigh:var(--font-weight-semibold);color:var(--black06);line-height:2.7rem;}
.gnb-ul > li .gnb-inner .bg-menu-eng{position:absolute;right:0;bottom:-1rem;z-index:20;font-size:13rem;font-weight:var(--font-weight-bold);color:var(--color70);line-height:11.7rem;text-align:right;text-transform:uppercase;}
.sub-mn{display:flex;flex-direction:column;gap:3rem;position:relative;z-index:30;padding:7rem 0 8rem 10rem;width:calc(100% - 24.278%);border-left:1px solid var(--color126);}
.sub-mn > li{display:flex;align-items:flex-start;}
.sub-mn > li > a{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:4px 0;width:22rem;box-sizing:border-box;}
.sub-mn > li > a > span{font-size:2rem;font-weight:var(--font-weight-bold);color:var(--color125);line-height:2.6rem;}
.sub-mn > li > a::after{content:'';width:1rem;height:1.5rem;background:url(../img/common/ico-gnb-2dep-arrow@2x.png)no-repeat center center/100%;}
.sub-mn02{display:flex;flex-wrap:wrap;gap:1rem 2rem;}
.sub-mn02 > li{width:auto;} /*251226 학교요청 14 > 18*/
.sub-mn02 > li > a{display:block;padding:6px 0;}
.sub-mn02 > li > a span{display:block;font-size:1.6rem;font-weight:var(--font-weight-bold);line-height:2.2rem;transition:0.3s ease;}
.sub-mn02 > li.active > a span,
.sub-mn02 > li > a:hover span{color:var(--color124);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;}
.gnb-bg{display:none;position:absolute;top:100%;left:50%;z-index:20;width:200vw;min-height:37.6rem;border-top:1px solid var(--color126);background:var(--white100);transform:translateX(-50%);-webkit-transform:translateX(-50%);box-shadow:0px 2px 40px var(--color73);}
.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:2rem;}
.util-wrap > ul li{position:relative;flex-shrink:0;}
.util-wrap > ul li a{display:block;}

/* 통합검색 */
.util-wrap a.search-open{width:2.4rem;height:2.4rem;background:url(../etc/ico-search.svg) no-repeat center/100%;}
.util-wrap .search-box{position:fixed;top:12rem;left:0;width:100%;height:100%;background-color:var(--black60);transition:opacity 0.3s ease;visibility:hidden;opacity:0;}
.util-wrap .search-box.on{z-index:-1;visibility:visible;opacity:1;}
.util-wrap .search-box .inner{display:flex;justify-content:center;align-items:center;margin:0 auto;padding:0 2rem;max-width:100%;width:100%;height:34rem;border-top:1px solid var(--color139);background:var(--white100);box-sizing:border-box;}
.util-wrap .search-box .inner form{width:100%;}
.util-wrap .search-box .search-con-box{display:flex;gap:3rem;position:relative;}
.util-wrap .search-box .search-con-box .search-close{position:absolute;top:-12rem;right:0;width:2.4rem;height:2.4rem;background:url(/_res/gradcau/cauoie/img/common/btn-search-close@2x.png) no-repeat 50% 50%/100%;}
.util-wrap .search-box .search-con-box .search-con{position:relative;margin:0 auto;width:65rem;}
.util-wrap .search-box .search-con-box .search-con fieldset{background:var(--white100);}
.util-wrap .search-box .search-con-box .search-con fieldset > div{position:relative;}
.util-wrap .search-box .search-con-box .search-con .search-label{display:block;margin:0 0 3rem;font-size:3.6rem;font-weight:var(--font-weight-medium);color:var(--color124)}
.util-wrap .search-box .search-con-box .search-con .search-input{padding:0 5rem 0 0;width:100%;height:6rem;border:none;border-bottom:2px solid var(--color07);font-size:2rem;font-weight:var(--font-weight-medium);box-sizing:border-box;}
.util-wrap .search-box .search-con-box .search-con .search-input::placeholder{font-weight:var(--font-weight-regular);color:var(--color07);}
.util-wrap .search-box .search-con-box .search-con .search-btn{display:block;position:absolute;top:50%;right:0;padding:0;width:2.7rem;height:2.7rem;background:url(/_res/gradcau/cauoie/img/common/ico-search@2x.png) no-repeat 50% 50%/100%;transform:translateY(-50%);}

/* 사이트맵 (헤더안, 사이트맵 자체는 위젯으로 뺌) */
.util-wrap .util-sitemap{height:2.4rem;}

@media screen and (max-width:1200px){
	.gnb-ul > li > a{padding:0 4px;font-size:1.4rem;}
	.util-wrap > ul{gap:5px;}
}

@media screen and (max-width:1024.98px){
	/* 기본값 */
	.gnb-wrap{display:none;}
	.util-wrap > ul > li{display:none;}
	.m-util-box{display:none;}
	.gnb-bg{display:none;}

	/* 헤더 */
	.bottom-header-box{justify-content:space-between;padding:2.4rem 2rem 2rem 2rem;}
	.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:27.7rem;}
	.util-wrap .slide-close{width:2.4rem;height:2.4rem;background:url(../etc/img-sitemap-close.svg) no-repeat center center/100%;}
	.util-wrap .btn-menu{display:block;width:2.4rem;height:2.4rem;background:url(../etc/ico-sitemap.svg) no-repeat center center/100%;}
	.util-wrap ul{display:none;}
	
	body.mGnb-open{overflow:hidden;}
	body.mGnb-open .bottom-header-box{background-color:var(--color07);}
	body.mGnb-open .util-wrap > ul{display:flex;}
	body.mGnb-open .logo-wrap h1 a > .img-logo .img-default{display:none;}
	body.mGnb-open .logo-wrap h1 a > .img-logo .img-hover{display:block;}

	/* gnb-mobile */
	.slideMenu{display:block;position:fixed;top:8rem;right:0;z-index:100;width:100%;height:calc(100vh - 8rem);background:var(--white100);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%;box-sizing:border-box;}
	.m-gnb .dep1 > li{}
	.m-gnb .dep1 > li > a{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:0 3rem;padding:2.4rem 0;border-bottom:1px solid var(--black20);}
	.m-gnb .dep1 > li a span{font-weight:var(--font-weight-medium);font-size:2rem;line-height:1;color:var(--color02);transition:0.3s ease;}
	.m-gnb .dep1 > li > a::after{content:'';display:block;flex-shrink:0;width:1.6rem;height:1.6rem;background:url(../img/common/ico-m-gnb-arrow01@2x.png) no-repeat center/100%;}
	.m-gnb .dep2{display:none;margin:0 3rem 3rem;}
	.m-gnb .dep2 > li a{display:flex;gap:1rem;padding:2rem 0;font-size:2rem;color:var(--color01);}
	.m-gnb .dep2 > li > a::before{content:'';display:block;flex-shrink:0;margin-top:1rem;width:4px;height:4px;border-radius:50%;background:var(--black20);}	
	.m-gnb .dep3 > li a{display:flex;gap:1rem;margin:-1rem 2rem 2rem;padding:1rem 0;}
	.m-gnb .dep3 > li a span{font-size:1.8rem;transition:0.3s ease;}
	.m-gnb .dep3 > li > a::before{content:'';display:block;flex-shrink:0;margin-top:1rem;width:4px;height:4px;border-radius:50%;background:var(--black20);}
	
	.m-gnb .dep1 > li.active > a{margin:0;padding:2.4rem 3rem;border:0;background:var(--color15);}
	.m-gnb .dep1 > li.active > a span{color:var(--white100);}
	.m-gnb .dep1 > li.active > a::after{background:url(../img/common/ico-m-gnb-arrow02@2x.png) no-repeat center/100%;}
	.m-gnb .dep2 > li > a.active span{color:var(--color10);}
	.m-gnb .dep2 > li > a.active::before{background:var(--color10);}
	.m-gnb .dep3 > li > a.active span{color:var(--color10);}
	.m-gnb .dep3 > li > a.active::before{background:var(--color10);}
	
	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;}
	body.mGnb-open .util-wrap .slide-close{background-image:url(../etc/img-sitemap-close.svg);}
}

@media screen and (max-width: 350px){
	.logo-wrap h1 a > .img-logo{width:25rem;}
}