@charset "UTF-8";

.header-box{position:relative;margin:0 auto;padding:0 6rem;opacity:0;box-sizing:border-box;}
.header-box-inner{display:flex;align-items:center;position:relative;width:100%;border-bottom:1px solid var(--border-color19);box-sizing:border-box;}
.header-box-inner h1 > a{display:flex;align-items:center;line-height:1;}
.header-wrap .logo-symbol-active{display:none;}

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

/* gnb-pc */
.gnb-ul{display:flex;padding:3.2rem 0 0;}
.gnb-ul > li{padding:0 2.5rem;}
.gnb-ul > li > a{display:block;padding:0 0 3.2rem;box-sizing:border-box;}
.gnb-ul > li > a span{display:inline-block;font-size:1.6rem;font-weight:var(--font-weight-bold);color:#fff;line-height:2.2rem;}
.gnb-ul > li .gnb-inner{position:absolute;top:100%;left:0;z-index:40;margin:4.5rem 0 0;padding:0 2rem 0 4rem;width:100%;min-height:28rem;border-right:1px solid var(--border-color01);box-sizing:border-box;visibility:hidden;opacity:0;transition:opacity 0.3s ease;}
.gnb-ul > li:last-of-type .gnb-inner{border:none;}
.gnb-ul > li .gnb-inner > p{padding:0 0 2.4rem;}
.gnb-ul > li .gnb-inner > p > a{font-size:1.5rem;font-weight:bold;color:var(--color21);line-height:2.1rem;}

/* GNB 2뎁스 메뉴 */
.sub-mn > li{padding:0 0 3.3rem;}
.sub-mn > li:last-of-type{padding:0;}
.sub-mn > li > a{display:block;}
.sub-mn > li > a > span{display:inline-block;position:relative;font-size:2.4rem;font-weight:var(--font-weight-bold);color:var(--text-color02);line-height:3rem;vertical-align:middle;}
.sub-mn > li > a > span:after{content:'';display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:2px solid var(--color18);transform:scaleX(0);transform-origin:right bottom;transition:transform .6s cubic-bezier(.52,.11,.16,1);}
.sub-mn > li > a:is(.active, :hover) > span:after{transform:scaleX(1);transform-origin:left bottom;}
.sub-mn > li > a[target="_blank"] span{position:relative;padding:0 2.4rem 0 0;}
.sub-mn > li > a[target="_blank"] span:before{content:'';position:absolute;top:50%;right:0;width:1.7rem;height:1.5rem;background:url(/_res/sejong/_share/img/sj-common/common/ico-bg-link@2x.png) no-repeat center center / 100%;transform:translateY(-50%);}

/* GNB 3뎁스 메뉴 */
.sub-mn02{padding:1.8rem 0 0;}
.sub-mn02 > li{padding:0 0 1rem;}
.sub-mn02 > li > a{display:block;position:relative;}
.sub-mn02 > li > a > span{display:inline-block;font-size:1.6rem;font-weight:var(--font-weight-bold);color:var(--text-color08);line-height:2.2rem;vertical-align:middle;transition:transform .6s cubic-bezier(.52,.11,.16,1);}
.sub-mn02 > li > a:is(.active, :hover) > span{transform:translateX(1.2rem);}
.sub-mn02 > li > a:before{content:'';display:inline-block;position:absolute;top:8px;left:-12px;width:3px;height:3px;background-color:var(--color56);vertical-align:middle;opacity:0;transition:all .6s cubic-bezier(.52,.11,.16,1);}
.sub-mn02 > li > a:hover:before,
.sub-mn02 > li > a.active:before{left:0;opacity:1;}
.sub-mn02 > li > a:hover span,
.sub-mn02 > li > a.active span{color:var(--text-color22);}
.gnb-bg{position:absolute;top:calc(100% + 1px);left: 0;z-index:20;padding:0 0 5rem;width:100%;background:#fff;opacity:0;visibility:hidden;box-shadow:0px 2px 40px var(--color73);}
.gnb-bg::before{content:'';position:absolute;left:100%;top:0;width:100vw;height:100%;background-color:#fff;box-shadow:20px 2px 40px var(--color73);}
.gnb-bg::after{content:'';position:absolute;right:100%;top:0;width:100vw;height:100%;background-color:#fff;box-shadow:-20px 2px 40px var(--color73);}
.gnb-bg-txt{position:absolute;right:2rem;z-index:50;padding:5rem 0 0;width:45%;background:#fff;transform:translateY(-100%);visibility:hidden;opacity:0;}
.gnb-bg-txt p{font-size:clamp(4rem, 4.167vw, 8rem);font-weight:var(--font-weight-semibold);line-height:1;color:var(--text-color23);text-align:right;}

/* header - headerFixed */
body.headerFixed .header-wrap{position:fixed;box-shadow:0px 2px 40px var(--color73);}

/* header - gnb-open */
body.gnb-open .header-box{border-bottom:none;}
body.gnb-open .header-box-inner{border-bottom:1px solid var(--border-color16);}
body:not(.gnb-open) .gnb-bg-txt{display:none !important;}

/* header - gnb-open, headerFixed 공통 */
body.gnb-open .header-wrap,
body.headerFixed .header-wrap{background:#fff;}
body.gnb-open .header-wrap .logo-symbol,
body.headerFixed .header-wrap .logo-symbol{display:none;}
body.gnb-open .header-wrap .logo-symbol-active,
body.headerFixed .header-wrap .logo-symbol-active{display:block;}
body.gnb-open .gnb-ul > li .gnb-inner{visibility:visible;opacity:1;}

body.gnb-open .gnb-ul > li > a span,
body.headerFixed .gnb-ul > li > a span{color:var(--text-color02);}
body.gnb-open .util-box li::after,
body.headerFixed .util-box li::after{background:var(--color40);}
body.gnb-open .util-box li a.util-login:before,
body.headerFixed .util-box li a.util-login:before{background-image:url(/_res/sejong/_share/img/sj-common/common/ico-login-btn-b@2x.png);}
body.gnb-open .util-box li a,
body.headerFixed .util-box li a{color:var(--text-color02);}

/* header - main */
.util-box{display:flex;}
.util-box li::after{content:'';display:inline-block;margin:0 1.5rem;width:1px;height:1.2rem;background-color:var(--color47);vertical-align:middle;}
.util-box li:last-of-type::after{display:none;}
.util-box li a{display:inline-block;font-size:1.4rem;font-weight:var(--font-weight-bold);color:#fff;line-height:2rem;}
.util-box li a.util-login:before{content:'';display:inline-block;margin:-3px 8px 0 0;width:1.3rem;height:1.6rem;background:url(/_res/sejong/_share/img/sj-common/common/ico-login-btn-w@2x.png) no-repeat center / 100%;vertical-align:middle;}

@media screen and (max-width:1280px){
	/*.header-box-inner h1 > a{width:28rem;}*/
	.header-box{padding:0 2rem;}
	/* gnb-pc */
	.gnb-ul > li{padding:0 1.5rem;}
	.gnb-ul > li > a span{font-size:1.5rem;line-height:2.1rem;}

	/* header - main */
	.util-box li::after{margin:0 1rem;}
}
@media screen and (min-width:1025px){
	.header-box-inner{justify-content:center;}
	.header-box-inner h1{position:absolute;top:50%;left:0;max-width:clamp(28rem, 23.117vw, 44.5rem);transform:translateY(-50%);}
	.util-box{position:absolute;top:50%;right:0;transform:translateY(-50%);}
}
@media screen and (max-width:1024.98px){
	.header-box{max-width:100%;}
	.header-box-inner{justify-content:space-between;padding:2rem 0;border:none;}
	.header-box-inner h1 > a{width:40rem;}
	.gnb-bg{display:none;}
	.gnb-bg-txt{display:none;}
	
	/* 기본값 */
	.gnb-wrap{display:none;}
	.util-wrap{display:none;}

	.btn-menu{display:flex;flex-direction:column;position:absolute;top:2.3rem;right:0;z-index:210;width:2.1rem;height:1.4rem;}
	.btn-menu span{display:block;height:2px;background:#fff;background-color:#fff;transition:0.6s ease;}
	.btn-menu span:nth-child(2){align-self:flex-end;margin:4px 0;width:80%;}
	.btn-menu.on{position:fixed;right:2rem;width:1.8rem;height:1.8rem;}
	.btn-menu.on span:nth-child(2){background-color:transparent;}
	.btn-menu.on span:nth-child(1){position:absolute;top:8px;width:2.1rem;background-color:var(--color18);transform:rotate(45deg);} 
	.btn-menu.on span:nth-child(3){position:absolute;top:8px;width:2.1rem;background-color:var(--color18);transform:rotate(-45deg);} 
	
	.slideMenu{display:block;position:fixed;top:0;z-index:200;width:100%;height:100%;box-sizing:border-box;opacity:0;visibility:hidden;transition:all .3s;}
	.slideMenu:before{content:'';position:absolute;top:0;left:0;z-index:-10;width:100%;height:100%;background:#fff;}
	.slideMenu.active{transition:none;}
	.slideMenu.right{right:-100%;}
	.slideMenu.right.on{right:0;opacity:1;visibility:visible;}

	.slideMenu .m-header{padding:1.3rem 2rem 1.4rem;border-bottom:1px solid var(--border-color10);box-sizing:border-box;}
	.slideMenu .m-header .m-util-box{display:flex;}
	.slideMenu .m-header .m-util-box li{padding:0 4px 0 0;}
	.slideMenu .m-header .m-util-box li:last-of-type{padding:0;}
	.slideMenu .m-header .m-util-box li a{display:block;padding:6px 1rem;width:8.8rem;border:1px solid var(--border-color10);border-radius:1.6rem;font-size:1.2rem;font-weight:var(--font-weight-bold);color:var(--text-color02);line-height:1.8rem;text-align:center;box-sizing:border-box;}
	.slideMenu .m-header .m-util-box li a.util-login{border-color:var(--text-color22);background-color:var(--border-color20);color:#fff;}
	.slideMenu .m-header .m-util-box li a.util-login:before{content:'';display:inline-block;margin:-2px 8px 0 0;width:1rem;height:1.3rem;background:url(/_res/sejong/convention/etc/ico-login-btn-w.svg) no-repeat center / 100%;vertical-align:middle;}

	/* header - headerFixed */
	body.headerFixed .btn-menu span{background-color:var(--color18);}
	
	.m-gnb{height:calc(100% - 6rem);background:#fff;overflow-y:auto;}

	.dep1{}
	.dep1 > li > a{display:block;position:relative;padding:1.5rem 4rem 1.5rem 3rem;font-size:2.4rem;font-weight:var(--font-weight-bold);color:var(--text-color02);line-height:3.4rem;}
	.dep1 > li.has-dep > a:after{content:'';position:absolute;top:50%;right:2rem;width:1.6rem;height:0.9rem;background:url(/_res/sejong/convention/img/common/ico-m-gnb-depth-open-arrow@2x.png) no-repeat 0 0/100%;transform:translateY(-50%);transition:transform .3s;}
	.dep1 li.has-dep.active > a:after{transform:translateY(-50%) rotate(180deg);}
	.dep1 li.has-dep.active .dep2{display:block;}
	
	.dep2 {display:none;margin:0 3rem;padding:0 2rem;border-radius:5px;background-color:var(--color50);}
	.dep2 > li{padding:2.1rem 0;border-bottom:1px solid var(--border-color14);}
	.dep2 > li:last-of-type{border:none;}	
	.dep2 > li > a{display:block;position:relative;font-size:1.6rem;font-weight:var(--font-weight-bold);line-height:2.2rem;color:var(--text-color02);}
	.dep2 > li.active > a,
	.dep2 > li.current > a{color:var(--color01);}
	.dep2 > li a[target="_blank"] span{position:relative;padding:0 2rem 0 0;}
	.dep2 > li > a[target="_blank"] span:before{content:'';position:absolute;top:50%;right:0;width:1.5rem;height:1.9rem;background:url(/_res/sejong/_share/img/sj-common/common/ico-bg-link@2x.png) no-repeat center center / 70%;transform:translateY(-50%);}

	.dep3{padding:1.4rem 0 0;}
	.dep3 > li{position:relative;padding:0 0 1.1rem 0.9rem;}
	.dep3 > li:last-of-type{padding-bottom:0;}
	.dep3 > li > a{display:block;position:relative;font-size:1.4rem;font-weight:var(--font-weight-bold);color:var(--text-color08);line-height:2rem;}
	.dep3 > li.active > a,
	.dep3 > li.current > a{color:var(--color01);}


}

@media screen and (max-width:768px){
	.header-box-inner h1 > a{width:24.5rem;}
}