@charset "utf-8";

/* 건너뛰기 */   
.skip-nav { position:absolute; left:0; right:0; top:-2px; width:100%; text-align:center; z-index:10000;}
.skip-nav a { display:block; color:#fff; height:1px; overflow:hidden;}
.skip-nav a:focus,
.skip-nav a:active { height:30px; line-height:30px; background:#da131a; color:#fff !important; font-size:110%; }
.rotate>* {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}


.inner { max-width:87.5rem; margin:0 auto; }

#top{width:100%;}
		#toparea{max-width:87.5rem; width:100%; margin:0 auto;}

@media (max-width: 1400px) {
	.inner { padding-left:1.5rem; padding-right:1.5rem; }
	
	#toparea{padding:0 1rem;}
}

@media (max-width: 768px) {
	.inner { padding-left:1rem; padding-right:1rem; }
}




/* 공식 배너 */
#top-ban { background-color: #eef2f7; }
#top-ban .nuri { max-width:87.5rem; width:100%; height:2rem; line-height:2rem; font-size:1rem; color: #1e2124; margin:0 auto; }
#top-ban .nuri::before { display:inline-flex; content:''; width:1.5rem; height:1rem; background:url(/images/icon/ico_flag.svg) no-repeat center/cover; margin-right:0.5rem; }


@media (max-width: 768px) {
	#top-ban .nuri { font-size:.9375rem; letter-spacing: -1.5px; }
}

/* 기관 로고 */
/* 타이틀 */
#toparea .logo { height:4.25rem; padding:0 0 0 4rem; background:url(/images/inc/logo.png) no-repeat; background-size:auto 3.25rem; display:flex; flex-direction:column; word-break:keep-all; }
#toparea .logo span { position:relative; top:-1px; font-size:1.25rem; line-height:1.5rem;}
#toparea .logo strong{font-size:1.75rem;line-height:1.75rem;}

@media (max-width: 1024px) {
	.header-util { display:none; }
	header .logo { font-size:1.25rem; }
}



/* util || 유틸 */
.util-wrap{display:flex; justify-content:space-between; padding:0.5rem 0;}
.header-util { display:flex; justify-content: end; margin:0 0 .4rem; }
.gnb-utils .util-list { display:flex; flex-wrap:wrap; }

.header-util .mbr-list .drop-list { display:flex; flex-wrap:wrap; }
.header-util .mbr-list .drop-list > li { width:calc(100% / 3); }
.header-util .mbr-list .drop-list .item-link { justify-content:center; }

.util-list { display:flex; justify-content:end; }
.util-list > li { display:flex; align-items:center; line-height:1.5; }
.util-list > li.font span { margin:0 .5rem; }
.util-list:first-child > li:not(:last-child)::after { display: inline-flex; content: ""; width: 0.25rem; height:0.25rem; background:#cdd1d5; border-radius:1rem; margin:0 .5rem; }

.util-list > li .btn-txt { color:#58616A !important; line-height:1.5; }


@media (max-width: 1023px) {
	.util-wrap { display:none; }

}


/* font || 폰트사이즈 */
.font{display:flex; align-items:center;}
.font span{margin:0 0.5rem; color:#58616A;}
.font button{border-radius:0.25rem;}


/* Sidebar | 모바일 메뉴 | underLink*/
.side-underLink{width:100%; display:flex;}
.side-underLink > li{ align-items:center; padding:0.5rem 0.75rem;}
.side-underLink .iconArrowDown{padding-right:0;}




/* 서브메뉴 표시 */

#topMenu > li:hover > ul { background:#fafafa; }
#topMenu > li > ul { position:absolute; left:0; top:46px; width:100%; height:22.5rem; padding:10px 0 0 0px; border-top:1px solid #ddd; border-left: 1px solid #eee; background:#fff; display:block; overflow:hidden; clear:both; z-index:1003; transition: height .3s ease,  .3s ease;  }
#topMenu > li > ul > li { position:relative; width:100%; padding:3px 10px 4px 10px;  text-align:left; display:block; }
#topMenu > li > ul.end { border-right: 1px solid #eee;}

#topMenu > li > ul > li > a:link,
#topMenu > li > ul > li > a:visited { width:100%; height:auto; padding:0; background:none; color:#555; border:0; line-height:1.3; text-decoration:none; margin:0; letter-spacing:-1px;  }
#topMenu > li > ul > li > a:active,
#topMenu > li > ul > li > a:hover,
#topMenu > li > ul > li > a:focus,
#topMenu > li > ul > li > a.select { clear:both; color:#2268bd; }

#topMenu > li > ul > li > ul.mdepth3 { width:0; height:0; font-size:0; display:none; }

.submenu { display:none; overflow:hidden; }

.menubox { position:absolute; left:0; top:13.4rem; width:100%; height:0; border-top:1px solid #ddd; border-bottom:1px solid #284394; background:#fff; display:block; overflow:hidden; z-index:10;  transition: height .3s ease; box-sizing:border-box;}
.menubox:not(.on) {border-top:0; border-bottom:0;}


#topMenu > li > ul > li.none { display:none; }
#topMenu > li > ul {height: 0;padding-top: 0;padding-bottom: 0;overflow: hidden;}


@media (max-width:1024px){
	.topMenu,
	.menubox { display:none; } 	
	.menubox { width:0; height:0; border:0; line-height:0; }
}	
	






/* 서브 레이아웃 */
#container.sub > .inner { display:flex; justify-content:space-between; padding-bottom:4rem; margin-top: 4rem; }

.svisible { padding:1.6rem 0; background:linear-gradient(45deg, #FFFDE7,#E0F2F1); }

.path { display:flex; align-items:center; text-align:right; }
.path span { display:flex; font-size:0; width:1rem; height:1rem; background:url(/images/icon/ico_angle.svg) no-repeat center/contain; transform:rotate(-90deg); margin:.5rem; }

.sub #gocontent { /* max-width:calc(100% - 20rem); */ width:100%; word-break:keep-all; }
.sub #gocontent table { word-break:break-all; }

.sub .page-title,
.sub .sns-list { position:relative; display:flex; }

.sub .page-title { position:relative; align-items: flex-end; justify-content: space-between; padding:3rem 0 .75rem; margin-bottom:2.5rem; }
.sub .page-title::after { position:absolute; left:0; bottom:0; content:''; width:100%; height:.25rem; background:url(/images/common/dg_line.png) repeat-x; opacity:.3; }
.sub .page-title h2 { position:absolute; top:0; font-size:2.25rem; font-weight:700; margin-bottom:2rem; }

@media (max-width: 1023px) {
	#container.sub > .inner { margin-top: .25rem; }

	.svisible { padding:1.2rem 0; }

	.sub #gocontent { max-width:none; margin-top:1.5rem; }

	.sub .page-title { margin-bottom:2rem; }
	.sub .page-title h2 { font-size:2rem; margin-bottom:1.5rem; }
}

@media (max-width: 768px) {
	.sub .page-title { position:relative; padding-top:2.5rem; margin-top:2.5rem; }
}




/* Footer, Bottom || 푸터, 바텀 */
#bottom { background:#33363D; border-top:1px solid #CDD1D5; color:#C9C9C9; word-break:keep-all; }

#bottom .link-site { display:flex; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
#bottom .link-site > li { position:relative; flex:1; }
#bottom .link-site > li button { display:flex; justify-content:space-between; width:100%; padding:1rem; border-radius:.5rem; background:#3C3F46; color:#DFE0E2; transition:.4s; }
#bottom .link-site > li button.on,
#bottom .link-site > li button:hover,
#bottom .link-site > li button:focus { background:#4E525D; }

#bottom .link-site > li .bottomLinkList { position:absolute; top:100%; left:0; right:0; display:none; height:17rem; padding:1rem; background:rgba(0,0,0,.7); border-radius:.5rem; border:#000; backdrop-filter:blur(.25rem); margin:.5rem 0; overflow-y:auto; }
#bottom .link-site > li .bottomLinkList a { width:100%; padding:.25rem 0; margin:.25rem 0; }
#bottom .link-site > li .bottomLinkList a:hover,
#bottom .link-site > li .bottomLinkList a:focus { text-decoration:underline; }


#bottom > .inner { padding:2.5rem 0 1.5rem; }

#bottom .f-cnts { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:2.25rem; }
#bottom .f-link { text-align: end; }
#bottom .f-link .btn { color:#CDD0D5; }
#bottom .f-link .btn .svg-icon { background-color:#CDD0D5; }
#bottom .f-link .btn:hover,
#bottom .f-link .btn:focus { background:#151719 !important; }


#bottom .f-logo { display:flex; align-items:center; font-size:2rem; color:#ddd; margin-bottom:2.25rem; }
#bottom .f-logo::before { content:''; display:block; width:3rem; height:3rem; background:url(/images/common/mark.png) no-repeat center/contain; margin-right:.5rem; }

#bottom .f-info { display:flex; flex-direction:column; gap:.5rem; }
#bottom .f-info .f-num { display:flex; }
#bottom .f-info .f-num:last-child { margin-bottom:0; }
#bottom .f-info .f-num strong { margin-right:.8rem; font-weight:600; }
#bottom .f-info .f-num span { font-size:.9375rem; margin-left:1rem; }
#bottom .f-info .f-num span::before { width:1px; height:.5rem; }


#bottom .f-btm { display:flex; justify-content:space-between; padding-top:1rem; border-top:1px solid #CDD1D5; }

#bottom .f-btm .f-menu { display:flex; }
#bottom .f-btm .f-menu li { margin-left:1rem; }
#bottom .f-btm .f-menu li:first-child { margin-left:0; }
#bottom .f-btm .f-menu li:first-child a { color:#489793 !important; background:#282C2F; }
#bottom .f-btm .f-menu li a { color:#CDD0D5 !important; }
#bottom .f-btm .f-menu li a:hover,
#bottom .f-btm .f-menu li a:focus { background:#151719 !important; }
#bottom .f-btm .copy { font-size:1rem; color:#C9C9C9; text-transform:uppercase; }

#bottom .f-top { max-width: 87.5rem; margin:0 auto; display:flex; justify-content:end; }
#bottom .f-top a { background:#fff; border-radius:10px 10px 0 0; display:flex; align-items:center; width:55px; height:55px; justify-content:center; transition:.4s; }
#bottom .f-top a:hover,
#bottom .f-top a:focus { background:#e5e5e5; }

#bottom .link-sns{display:flex; justify-self:end;}
#bottom .link-sns li{display:flex; justify-content:center; align-items:center; width:2.5rem; height:2.5rem; border-radius:3rem; background:#191a1c; margin-left:1.5rem;}

#bottom .svg-inline--fa{vertical-align:middle;}
#bottom .link-sns .kakao img{width:auto; height:1rem; vertical-align:middle;}


@media (max-width: 1440px) {
	#bottom > .inner { padding:4rem 2.4rem 2.4rem; }
}


@media (max-width: 1024px) {
	#bottom .f-link { width:auto; }
}

@media (max-width: 768px) {
	#bottom > .inner { padding:2.4rem 1.6rem 1.6rem; }
	
	#bottom .link-site{flex-direction:column; gap:1.25rem;}
	#bottom .link-site > .inner { padding:0; }
	#bottom .link-site .site-list { flex-direction:column; }
	#bottom .link-site .site-list .link { min-height:3rem; border-top:.1rem solid #CDD1D5; border-right:none; }
	#bottom .link-site .site-list li:first-child .link { border-left:none;  border-top:none; }

	#bottom .f-cnts { flex-direction:column; margin-bottom:1.5rem; }
	#bottom .f-link .btn { font-size:1rem; padding:0; }
	#bottom .f-link .btn .svg-icon { width:1rem; height:1rem; }

	#bottom .f-logo { font-size:1.5rem; margin-bottom:1.5rem; }                     
	#bottom .f-logo::before { width:2rem; height:2rem; }
	
	#bottom .link-go > li { text-align:left; }

	#bottom .f-info { font-size:1rem; margin-bottom:1rem; }
	#bottom .f-info .f-num { margin-bottom:.5rem; }
	#bottom .f-info .f-num span { margin-left:.25rem; }

	#bottom .f-btm { flex-direction:column; }
	#bottom .f-btm .f-menu { font-size:.9375rem; flex-wrap:wrap; margin-bottom:.75rem; }
	#bottom .f-btm .f-menu li { margin-left:.5rem; }

	#bottom .f-btm .copy { font-size:.9375rem; }
	
	#bottom .link-sns{margin-top:1.25rem;}
	#bottom .link-sns li{margin-left:0; margin-right:1.25rem;}
}