@charset "utf-8";
/* RESET CSS */
* { margin:0; padding:0; outline:0;/*  vertical-align:top;  */}
article, aside, details, figcaption, figure, footer, header, hgroup, menu nav, section { display:block; }
ul, ol, dl { list-style:none; }
img, video { max-width:100%; border:0; vertical-align:top; }
a {vertical-align:top; text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
html, body { margin:0; padding:0; height:100%; }
body, th, td, input, select, textarea { color:#444; font-family:'Malgun Gothic','Dotum','Apple SD Gothic Neo', sans-serif; font-size:12px; line-height:1.3em;}
button { cursor:pointer; font-family:'Malgun Gothic','돋움'; }

/*
폰트 본고딕 'Noto Sans KR',
포인트컬러
SIIS 지정컬러 #2b62ae
민트그린 #00baab
하이라이트 노랑 #FFFD6E
*/

/* ////////// LAYOUT ////////// */
body {
background-color: #eee;
}
.contents {
overflow-y: auto;
margin: 10px 10px 5px 10px;
padding: 15px;
height: calc( 100% - 125px);
border: 1px solid #ddd;
background-color: #fff;
}
#footer {
text-align: right;
}
#footer > p {
margin-right: 15px;
}

/* /// HEADER /// */
#header {
display: flex;
overflow: hidden;
height: 48px;
background: #0d1021 url(../images/header_bg.png) no-repeat top right;
}
#header > .h1Wrap {
flex: 0 0 270px;
}
h1 {
padding: 3px 0 10px 10px;
background-color: #2b62ae;
}
h1.manager {
padding: 3px 0 10px 10px;
background-color: #3e4088;
}
h1 > span {
display: inline-block;
margin-top: 15px;
color: #fff;
font-size: 0.7em;
}
#header > .nav {
flex: 1 1 auto;
margin-left: 30px;
}
.nav li {
display: inline-block;
margin-top: 9px;
padding:7px 14px 7px;
cursor: pointer;
font-size: 1.2em;
color: #fff;
}
.nav li a {
color: #fff;
}
.nav li.on {
border-radius: 20px;
background-color: #fff;
color: #2b62ae;
}
.nav li.on a {
color: #2b62ae;
}
.snb {
float: right;
margin: 5px;
color: #fff;
text-align: right;
}
.user > button {
padding: 2px 7px 2px;
color: #000;
border-radius: 20px;
border: none;
font-size: 0.9em;
text-align: center;
background-color: #fff;
}
@media (max-width: 1270px) {
    #header > .nav {
    flex: 1 1 auto;
    margin-left: 10px;
    }
    .nav li {
    padding:7px 3px 7px;
    }
}

/* 알림 */
button.alert {
width: 36px;
height: 36px;
margin: 6px 10px;
text-indent: -999em;
border: none;
background: url(../images/btn.png) no-repeat 1px -700px;
}
button.alert.on {
background: url(../images/btn.png) no-repeat -65px -700px;
}
.alertWrap {
position: relative;

}
.alertLayer {
position: absolute;
top: 46px;
right: 0;
min-width: 100px;
padding: 10px;
text-align: left;
line-height: 1.8em;
border: 1px solid #555;
color: #000;
border-radius: 3px;
background-color: #fff;
box-shadow: 1px 1px 3px #999 ;
z-index: 100;
}
.alertLayer > li {
margin: 2px 0;
padding: 0 0 0 10px;
font-size: 0.9em;
color: #000;
border-bottom: 1px dotted #ccc;
line-height: 1.6em;
background: url(../images/bullet.png) no-repeat 0 -193px;
}
.alertLayer > li:last-child {
border-bottom: none;
}


/* /// CONTENTS /// */
h2 {
margin-bottom: 10px;
padding: 7px 0 0 0;
font-size: 1.2em;
color: #000;
background: url(../images/bullet.png) no-repeat 2px -100px;
}
h3 {
margin: 5px 0;
padding: 0 0 0 10px;
font-size: 1.1em;
color: #000;
background: url(../images/bullet.png) no-repeat 0 -193px;
}
h4 {
margin-bottom: 10px;
padding-left: 10px;
font-size: 1em;
background: url(../images/bullet.png) no-repeat left -695px;
}
.layerHead > h3 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 1.0em;
color: #fff;
background: none;
}
/*
h5 {
color: #2b62ae;
}
h6 {
margin-bottom: 10px;
padding-left: 10px;
font-size: 1em;
background: url(../images/bullet.png) no-repeat left -695px;
}
*/
.hide {
display: none;
}


/* /// 레이아웃 /// */
/* 가로 사이즈 */
.w300 {
width: 300px;
}
.w400 {
width: 400px;
}
.w500 {
width: 500px;
}
.w600 {
width: 600px;
}
.w700 {
width: 700px;
}
.w780 {
width: 780px;
}
.wth-date00 {
width: 800px;
}
.w900 {
width: 900px;
}
.w1000 {
width: 1000px;
}
.w1100 {
width: 1100px;
}
.w1200 {
width: 1200px;
}
.h300 {
height: 300px;
}
.h400 {
height: 400px;
}
.h500 {
height: 500px;
}

/* 양쪽정렬 구조 */
.bothDiv {
display: flex;
position: relative;
margin: 10px 0px 5px 0px;
}
.mlr {
margin: 10px 15px 20px 15px;
}
.bothDiv > div {
flex: auto;
}
.bothDiv > div:last-child {
text-align: right;
}

.bothDivBg {
display: flex;
position: relative;
margin: 10px 0 5px;
background-color: #eee;
}
.bothDivBg > div {
flex: auto;
}
.bothDivBg > div:last-child {
text-align: right;
}


/* 가로100% 테이블 */
.tableFull > table {
width: 100%;
}

/* 꾸미기 */
.highlight {
background-color: #fffd6e;
}


/* 정렬, 여백주기 */
.ct {text-align: center;}
.rg { text-align: right;}
.lf { text-align: left;}

.m10 {
margin: 10px;
}
.m20 {
margin: 20px;
}
.mt10 {
margin-top: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}

.row {
display: inline-block;
margin-right: 15px;
}


.scrollY {
overflow-y: auto;
margin: 10px 0 20px;
/* padding: 10px; */
border: 1px solid #999;
overflow: hidden;
}

/* 요소 */
select {
padding: 3px;
border-radius: 3px;
}
select.noline {
padding: 3px;
border: none;
background-color: transparent;
}
button {
cursor: pointer;
}
input {
padding: 3px;
}
input.date {
width: 100px;
padding: 3px;
color: #222;
box-sizing: border-box;
background: url(../images/ico.png) no-repeat right -96px;
}
input.line {
border: none;
border-bottom: 2px solid #333;
background-color: transparent;
}
input.line:read-only {
background-color: #eee;
border: 1px solid #ddd;
}
input.box {
border: 1px solid #888;
background-color: transparent;
}
input.box:read-only {
background-color: #eee;
}
input.box:disabled {
background-color: #eee;
}
textarea {
padding: 2px;
}
select {
padding: 3px;
border: 1px solid #555;
}
span.line {
display: inline-block;
min-width: 137px;
padding: 3px;
border-bottom: 2px solid #333;
}


/* /// 버튼스타일 /// */
/* 버튼 타입 */
.pageBtn {
margin: 10px 0px;
}
button.page {
padding: 7px 30px;
font-size: 1em;
}


/* 테이블, 폼 위,아래 BTN */
.subBtnWrap {
}
button.subBtn {
padding: 4px 15px;
border-radius: 3px;
font-size: 0.9em;
}
button.subBtn.impo {
text-align: center;
border: none;
color: #2b62ae;
border: 1px solid #2b62ae;
background-color: #fff;
}
button.subBtn.impo:hover {
color: #fff;
border: 1px solid #2b62ae;
background-color: #2b62ae;
}
button.subBtn.basi {
text-align: center;
border: none;
color: #333;
border: 1px solid #333;
background-color: #fff;
}
button.subBtn.basi:hover {
color: #fff;
border: 1px solid #333;
background-color: #333;
}

/* 테이블 내 BTN */
/* 버튼 타입별 스타일 적용 */
button.impo {
text-align: center;
border: none;
color: #fff;
border: 1px solid #2b62ae;
background-color: #2b62ae;
}
button.impo:hover {
color: #2b62ae;
border: 1px solid #2b62ae;
background-color: #fff;
}
button.basi {
text-align: center;
border: none;
color: #fff;
border: 1px solid #333;
background-color: #333;
}
button.basi:hover {
color: #333;
border: 1px solid #333;
background-color: #fff;
}
button.sub {
text-align: center;
border: none;
color: #777;
border: 1px solid #777;
background-color: #fff;
}
button.sub:hover {
color: #333;
border: 1px solid #333;
}
button.act {
    width: 65px;
    padding: 5px 7px;
    color: #fff;
    font-size: 12px;
    border: none;
    cursor: default;
    border-radius: 5px;
    border:1px solid #23559a;
    background-color: #2b62ae ;
}
button.inact {
    width: 65px;
    padding: 5px 7px;
    color: #000;
    font-size: 12px;
    border: none;
    /*cursor:default;*/
    border:1px solid #ddd;
    border-radius: 5px;
    background-color: #eee ;
}


/* 아이콘 BTN */
button.ico {
border: none;
border-radius: 3px;
text-indent: -999em;
background-image: url(../images/btn.png);
background-repeat: no-repeat;
background-color: transparent;
}
button.del {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: 7px -395px;
}
button.setup {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: 5px -295px;
}
button.setup.on {
border: 1px solid #28589b;
background-position: 5px -345px;
background-color:#2b62ae;
}
button.reload {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: -75px -190px;
}
button.download {
width: 30px;
height: 20px;
background-position: -10px -510px;
}
button.footprint {
width: 20px;
height: 20px;
background-position: 0px -564px;
}
button.footprint.on {
background-position: -50px -564px;
}
button.scene {
width: 20px;
height: 20px;
background-position: 0px -614px;
}
button.scene.on {
background-position: -50px -614px;
}
button.mod {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: 7px -895px;
}
button.reset {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: 7px -760px;
}
button.preview {
width: 30px;
height: 28px;
border: 1px solid #555;
background-position: -72px -52px;
}

/* /// 탭 /// */
.fullTab {
display: flex;
margin: 10px 0;
}
.fullTab li {
flex: auto;
padding: 5px 0 5px;
color: #666;
cursor: pointer;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #333;
background-color: #eee;
text-align: center;
}
.fullTab li.on {
font-weight: bold;
color: #fff;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 0px solid #fff;
background-color: #333;
}

.tab {
overflow: hidden;
display: flex;
height: 27px;
margin: 10px 0 15px;
}
.tab li {
flex: auto;
height: 14px;
padding: 5px 0px 5px;
color: #666;
cursor: pointer;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 3px solid #333;
background-color: #eee;
text-align: center;
}
.tab li a {
color: #666;
}
.tab li.on {
font-weight: bold;
color: #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #333;
border-bottom: 2px solid #fff;
background-color: #fff;
}
.tab li.on a {
color: #333;
}


.tab-sub {
overflow: hidden;
display: flex;
height: 30px;
margin: 10px 0;
}
.tab-sub li {
height: 15px;
padding: 5px 30px 5px;
color: #666;
cursor: pointer;
border: 1px solid #cecece;
background-color: #eee;
text-align: center;
}
.tab-sub li a {
color: #666;
}
.tab-sub li.on {
font-weight: bold;
color: #fff !important;
border: 1px solid #26579b;
background-color: #2b62ae;
}
.tab-sub li.on a {
color: #fff;
}

.full-width li {
    flex: auto;
}

/* PAGINATION */
.pagination {
margin: 5px;
text-align: center;
float: left;
margin-left: calc(50% - 65px);
}
.pagination a {
margin: 0px;
color: #222;
padding: 5px 7px;
text-decoration: none;
cursor: pointer;
}
.pagination * {
vertical-align: middle;
}
.pagination a.active {
background-color: #2b62ae;
color: #fff;
border: 1px solid #2b62ae;
}
.pagination a.on {
border-bottom: 2px solid #2b62ae;
}
.pagination > .ico {
display: inline-block;
width:30px;
height: 30px;
padding: 0;
text-indent: -999em;
background-image: url(../images/pager.png);
background-repeat: no-repeat;
}
.pagination .ico:hover {
border-bottom: 0px solid #333;
}
.pagination .first {
background-position: 10px center;
}
.pagination .forward {
background-position: -40px center;
}
.pagination .back {
background-position: -90px center;
}
.pagination .end {
background-position: -140px center;
}
select[name='perPage'] {
padding: 2px 5px;
margin: 10px 5px;
}


/* ///// LAYERS  ///// */
.layerWrap {
position: absolute;
border-radius: 7px;
box-shadow: 0px 2px 2px 0px #333;
background-color: #fff;
z-index: 500;
}
.layerWrap-modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
top: 0px;
z-index: 1;
}
.layerHead {
position: relative;
padding: 10px 5px 10px 15px;
cursor: pointer;
font-size: 1.2em;
font-weight: normal;
font-weight: 300;
color: #fff;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #e0e0e0;
background-color: #222;
}
.layerHead > button {
position: absolute;
top: 3px;
right: 3px;
width: 30px;
height: 30px;
border: none;
text-indent: -999em;
background: url(../images/btn.png) no-repeat 8px 9px;
}
.layerContents {
overflow-y: auto;
margin: 20px;
}

button.layers {
position: absolute;
top: 3px;
left: 3px;
width: 100px;
height: 35px;
padding: 0 0 0 25px;
font-size: 14px;
border-radius: 20px;
color: #fff;
background: #292c3b url(../images/ico_nav.png) no-repeat 10px 7px;
}
button.layers.on {
background-color: #4648bf;
}
.layersHead {
width: 130px;
height: 40px;
margin:0 0 0px 3px;
cursor: pointer;
border-radius: 20px;
box-sizing: border-box;
background-color: #2b62ae;
}
.layerClose {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
border: none;
text-indent: -999em;
background: transparent url(../images/ico_btn.png) no-repeat 5px 5px;
}
.layersContain.on {
display: block;
}
.layersContain {
display: none;
position: absolute;
top: 35px;
left: 0;
overflow-y: auto;
padding: 3px 5px 5px;
border-radius: 0px;
box-sizing: border-box;
border: 1px solid #999;
text-align: left;
background-color: #eee;
}
.layers {
padding: 10px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
background-color: #fff;
}
.layerBtn {
margin: 10px;
text-align: center;
}