@charset "utf-8";
/*@import url("common.css");
@import url("main.css");*/


/* 레이아웃 */
html,
body {position:relative; width:100%; height:100%; margin:0; padding:0; overflow-x:hidden;}
body {display:flex; flex-direction:column; min-height:100vh;}
#header {width:100%; left:0; top:0; border-bottom:1px solid #e6e6e6;}
#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:#eff5ff;}
.wrap {position:relative;}

/* 헤더 영역 */
.header {position:relative; height:80px; }
.header .layout,
.header > div {position:relative; max-width:1200px; width:100%; margin:0 auto;}
.header .logo {width:149px; height:80px; line-height:80px;}
.header .logo a {display:inline-block;width:149px;height:50px;line-height:50px;background:url(/resource/nsf/images/common/epeople_logo.png) no-repeat;text-indent:-999px;}
.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;}

/*  유틸영역  */
.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; text-align:center; padding:30px 0;}
#footer .layout a.link,
#footer .layout address {display:inline-block; position:relative; padding:0 10px; word-break:keep-all; }
#footer .layout a.link {color:#0244a2; font-weight: 700;}
#footer .layout address:before {content:''; position:absolute; top:3px; left:-1px; width:1px; height:16px; background:#ccc; }
#footer .copyright {display:block;}

/* 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 * {font-size:14px;}
    #footer .layout {padding:20px 0;}
    #footer .layout a.link,
    #footer .layout address {display:block;}
    #footer .layout address:before {display:none;}
    #footer .copyright {margin-top:0;}

    /*  유틸영역  */
    .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; }
}