@charset "utf-8";

/* 레이아웃 */
html,
body {position:relative; width:100%; height:100%; margin:0; padding:0; overflow-x:hidden;}
body {display:flex; flex-direction:column; min-height:100vh;}
#contents {position:relative; margin-top:0; background:#fff; clear:both; flex:1;}
.content {max-width:1200px; margin:0 auto;}
#banner {width:100%; height:116px; background:#fff;}
#footer {width:100%; background:#eef2f7;}
.wrap {position:relative;}

/* 헤더 영역 */
#header {width:100%; border-bottom:1px solid #cdd1d5;}
#header .layout {position:relative; max-width:1200px; width:100%; margin:0 auto;height:80px;}
#header .layout .logo {display:flex;align-items:center;justify-content:center;width:149px;height:100%;}
#header .layout .logo a {display:block;width:100%;height:100%;background:url(/resource/nsf/images/common/logo_epeople.svg) no-repeat center/contain;}
.header.wwwdev .logo a {display:inline-block;width:260px;height:47px;line-height:47px;background:url(/resource/nsf/images/common/dev_logo_new3.png) no-repeat;text-indent:-999px;}
@media (max-width: 1023px) {
	#header .layout .logo {width:130px;}
}
@media (max-width: 767px) {
	#header .layout {height:65px;}
	#header .layout .logo {width:110px;}
}

/*  유틸영역  */
.header_util {position:absolute; top:30px; right:0;}
.header_util > ul {display:inline-block;}
.header_util > ul > li {display:inline-block; margin-left:10px;}
.header_util > ul > li a {display:inline-block; font-size:16px; position:relative;}
.header_util > ul > li a:before {display:inline-block; margin-right:4px; content:"";}
.header_util > ul > li.home a::before {width:22px; height:24px; background: url(/resource/nsf/images/common/header_home.png) no-repeat; background-size: 74%; background-position: 80%; vertical-align: bottom;}
.header_util > ul > li.login a::before {width:21px; height:24px; background:url(/resource/nsf/images/common/header_login.png) no-repeat; background-size: 70%; background-position: 50%; vertical-align: bottom;}
.header_util > ul > li.logout a::before {width:23px; height:21px; background:url(/resource/nsf/images/common/header_logout.png) no-repeat; background-size: 70%; background-position: 50% 88%; vertical-align: bottom;}

/*  푸터  */
#footer {margin-top:80px;}
#footer .layout {position:relative; max-width:1200px; margin:0 auto; padding:40px 0;display:flex;flex-direction:column;gap:20px;}
#footer .layout .f_logo {width:137px;height:48px;background:url(/resource/nsf/images/common/logo_epeople.svg) no-repeat center/contain;}
#footer .layout .f_cont {display:flex;flex-direction:column;gap:8px;}
#footer .layout address {position:relative; word-break:keep-all;}
#footer .layout dl {display:flex;gap:12px;}
#footer .layout dl dt {font-weight:700;}
#footer .layout .f_bottom {display:flex;flex-direction:column;gap:8px;}
#footer .layout .f_menu {border-top:1px solid #bacbde; padding-top:16px;}
#footer .layout a.link{color:#0244a2; font-weight:700;width:100%;}
#footer .layout a.link::before{content:'';width:100%;height:1px;}
#footer .copyright {display:block;font-size:16px;}

/* Sub Title */
#subTit { padding-top:60px; }
#subTit h3 { font-size:40px; font-weight:700; }
.guide_txt { margin-top:20px; padding:20px 30px; background:#eef2f7; border-radius:12px; }


@media (max-width: 1199px) {
	#header,
	.content,
	#banner,
	#footer { padding:0 24px; }

	/* Sub Title */
	#subTit { padding-top:40px; }
	#subTit h3 { font-size:36px; }
	.guide_txt { margin-top:20px; padding:15px 20px; }

}

@media (max-width: 767px) {
	/* Sub Title */
	#subTit { padding-top:20px; }
	#subTit h3 { font-size:32px; }

	/*  푸터  */
	#footer {margin-top:40px;}
	#footer .layout .f_logo {width:99px;height:32px;}

	/*  유틸영역  */
	.header_util > ul > li {padding-left:10px; }
	.header_util > ul > li a:before {position:absolute; top:4px; left:-14px; }
	.header_util > ul > li.home a::before {display:none;}
	.header_util > ul > li.login a::before,
	.header_util > ul > li.logout a::before { background:#ddd; width:1px; height:14px; vertical-align:middle; }
}

@media (max-width: 479px) {
	#footer .layout dl {flex-direction:column;gap:0;}
}