@charset "UTF-8";

/*  헤더  */

.logo {
  display: inline-block;
  width: 250px;
}
.top-header {
  display: inline-block;
  width:calc(100% - 250px);
  background:#414453;
  height: 80px;
  position: relative;
}
.top-header>span {
  position: absolute;
  top:50%;
  transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%);
  -webkit-transform: translate(0%,-50%);
  -o-transform: translate(0%,-50%);
  right:85px;
}
.top-header .user-name {
  font-size:13px;
  color:#fff;
  font-weight: bold;
}
.top-header .btn-log {
  background:#469bd2;
  font-size:13px;
  color:#fff;
  font-weight: bold;
  width: 100px;
  margin-left: 10px;
  height: 30px;
}

/*  내비  */
nav {
  width: 250px;
  height: 100%;
  min-height:800px;
  border-right:1px solid #dcdcdc;
  margin-top: -5px;
  float: left;
}
.gnb>li {
  position: relative;
}
.gnb>li>a {
  color:#787878;
  font-size:17px;
  font-weight: bold;
  padding-left: 60px;
  display: inline-block;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.gnb>li:hover::after {
  content:'';
  position: absolute;
  width: 6px;
  height: 60px;
  background: #469bd2;
  top:0;
  left:0;
}
.gnb>li.on ul.sub {
	display: block;
}
.gnb>li.on::after {
  content:'';
  position: absolute;
  width: 6px;
  height: 60px;
  background: #469bd2;
  top:0;
  left:0;
}
.gnb>li:hover>a {
  color:#469bd2;
}
.gnb>li.on>a {
  color:#469bd2;
}
.gnb>li:nth-child(1)>a {
  background:url('../img/menu01.png') no-repeat 20px center;
}
.gnb>li:nth-child(2)>a, .gnb>li:nth-child(6)>a {
  background:url('../img/menu02.png') no-repeat 20px center;
}
.gnb>li:nth-child(3)>a {
  background:url('../img/menu03.png') no-repeat 20px center;
}
.gnb>li:nth-child(4)>a {
  background:url('../img/menu04.png') no-repeat 20px center;
}
.gnb>li:nth-child(5)>a {
  background:url('../img/menu05.png') no-repeat 20px center;
}
.gnb>li:nth-child(1):hover>a {
  background:url('../img/menu01_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(2):hover>a, .gnb>li:nth-child(6):hover>a {
  background:url('../img/menu02_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(3):hover>a {
  background:url('../img/menu03_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(4):hover>a {
  background:url('../img/menu04_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(5):hover>a {
  background:url('../img/menu05_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(1).on>a {
  background:url('../img/menu01_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(2).on>a, .gnb>li:nth-child(6).on>a {
  background:url('../img/menu02_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(3).on>a {
  background:url('../img/menu03_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(4).on>a {
  background:url('../img/menu04_on.png') no-repeat 20px center;
}
.gnb>li:nth-child(5).on>a {
  background:url('../img/menu05_on.png') no-repeat 20px center;
}

.sub {
  display:none;
}
.sub li {
  height: 33px;
  position: relative;
}
.sub a {
  color:#787878;
  font-size:15px;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 33px;
  padding-left: 60px;
  background:#f0f0f5;
}
/* .sub li:hover::after {
  content:'';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius:8px;
  background:#fa7832;
  position: absolute;
  top:50%;
  left:24px;
  transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%);
  -webkit-transform: translate(0%,-50%);
  -o-transform: translate(0%,-50%);
} */
.sub li:hover a {
  background:#e1e1e6;
  color:#469bd2;
}
.sub li.on::after {
  content:'';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius:8px;
  background:#fa7832;
  position: absolute;
  top:50%;
  left:24px;
  transform: translate(0%,-50%);
  -ms-transform: translate(0%,-50%);
  -webkit-transform: translate(0%,-50%);
  -o-transform: translate(0%,-50%);
}
.sub li.on a {
  background:#e1e1e6;
  color:#469bd2;
}


/*  콘텐츠  */
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y:auto;
  overflow-x:auto;
  min-width:1700px;
}
section {
  background:#f0f0f5;
  width:calc(100% - 250px);
  height: 100%;
  float: left;
  min-width:1130px;
  margin-top: -5px;
  padding:0 40px 40px;
}
.title {
  color:#323232;
  font-size:28px;
  font-weight: bold;
  padding-left: 40px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.contents {
  width: 100%;
  height: calc(100% - 72px);
  min-height:700px;
  background:#fff;
  border:1px solid #dcdcdc;
  padding:50px 40px;
  min-width:1050px;
}

/*  기본팝업  */
.popup-bg {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.5);
}
.popup-info .popup {
  width: 400px;
  height: 220px;
  position: absolute;
  top:50%;
  left:50%;
  margin-top: -110px;
  margin-left: -200px;
  background:#fff;
}
.popup-bg h3 {
  background:#414453;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  position: relative;
}
.popup-bg .popup-close:not(.btn) {
  width: 18px;
  height: 18px;
  position: absolute;
  background:url('../img/x02.png') no-repeat;
  opacity: 0.75;
  /* top:50%; */
  top:20px;
  margin-top: -9px;
  /* right:20px; */
  right:15px;
}
.popup-bg .popup-close:not(.btn):hover {
  opacity: 1;
}
.popup-bg .popup-txt {
  text-align: center;
  color:#646464;
  font-size:14px;
  margin:50px 0;
}
.popup-bg .btn-gray {
  width: 80px;
  height: 30px;
  color:#dcdcdc;
  font-size:13px;
  font-weight: bold;
  background:#787878;
}
.popup-bg .btn-gray:hover {
  color: #fff;
}
.excel-popup .popup-txt {
  line-height: 1.5;
  margin:40px 0;
}
.excel-popup .btn-50-blue, .excel-popup .btn-50-red {
  width: 94px;
  height: 40px;
  font-size:13px;
}
.pop-btn-wrapper {
	position: absolute;
	width: 100%;
	bottom: 15px;
}

/*  util  */

.cf::after {
  content: '';
  display: block;
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float:right;
}
.tof {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.btn {
  border-radius:10px;
}
.btn-30-blue {
  height: 30px;
  background:#469bd2;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  width:80px;
}
.btn-50-blue {
  height: 50px;
  background:#469bd2;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  width: 120px;
}
.btn-50-blue:hover,.btn-30-blue:hover {
  background:#3287be;
}
.btn-50-red {
  height: 50px;
  width: 120px;
  background:#f0785a;
  color:#fff;
  font-size:16px;
  font-weight: bold;
}
.btn-30-red {
  height: 30px;
  width: 80px;
  background:#f0785a;
  color:#fff;
  font-size:13px;
  font-weight: bold;
}
.btn-50-red:hover,.btn-30-red:hover {
  background:#dc6446;
}
.btn-30-gray {
  height: 30px;
  width: 80px;
  background:#787878;
  color:#fff;
  font-size:13px;
  font-weight: bold;
}
.btn-50-gray {
  height: 50px;
  width: 120px;
  background:#787878;
  color:#fff;
  font-size:16px;
  font-weight: bold;
}
.btn-gray:hover, .btn-50-gray:hover,.btn-30-gray:hover {
  background:#646464;
}
.btn-30-white {
  height: 30px;
  width: 80px;
  background:#fff;
  color:#5a5a5a;
  font-size:13px;
  font-weight: bold;
  border:1px solid #787878;
  margin:0 8px;
}
.btn-50-white {
  height: 50px;
  width: 120px;
  background:#fff;
  color:#5a5a5a;
  font-size:16px;
  font-weight: bold;
  border:1px solid #787878;
}
.btn-excel {
  width: 100px;
  height: 30px;
  border:1px solid #b4b4b4;
  background:url('../img/excel.png') no-repeat 10px #fff;
  padding-left: 27px;
  margin-left: 10px;
}


.ta-r {
  text-align: right;
}
.ta-c {
  text-align: center;
}

.select {
  border:1px solid #b4b4b4;
  height: 30px;
  font-size:13px;
  color:#5a5a5a;
  padding-left: 10px;
  padding-right: 30px;
}
.select-100 {
  width: 100px;
  padding-left: 5px;
  background:url('../img/arrow01.png') no-repeat 80px center #fff;
}
.select-120 {
  width: 120px;
  background:url('../img/arrow01.png') no-repeat 100px center #fff;
}
.select-200 {
  width: 200px;
  background:url('../img/arrow01.png') no-repeat 180px center #fff;
}
.select-220 {
  width: 220px;
  background:url('../img/arrow01.png') no-repeat 198px center #fff;
}
.select-250 {
  width: 250px;
  background:url('../img/arrow01.png') no-repeat 95% center #fff;
}
select.disabled {
	background-color: #f0f0f0;
}

input[type="checkbox"],input[type="radio"] {
  display: none;
}
.check {
  font-size:14px;
  color:#646464;
  cursor: pointer;
}
.radio-icon {
  background:url('../img/radio.png') no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 5px;
}
input[type="checkbox"]:checked + .radio-icon,
input[type="radio"]:checked + .radio-icon {
  background:url('../img/radio_on.png') no-repeat;
}
.check-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  border:1px solid #b4b4b4;
  background:#fff;
  vertical-align: middle;
  margin:0 3px;
}
input[type="checkbox"]:checked + .check-icon {
  background:url('../img/check_on.png') no-repeat;
}

/*  페이지네이션  */
.pagenation {
  text-align: center;
}
.pagenation a {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  line-height: 24px;
  font-size:13px;
  color:#323232;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.pprev,.prev,.nnext,.next {
  background:#e1e1e6;
}
.pagenation a:hover {
  background:#414453;
  color:#fff;
}
.pagenation a.on {
  background:#414453;
  color:#fff;
}
/* width */
.w324 {
	width: 324px !important;
}
/* margin */
.mr5 {
	margin-right: 5px !important;
}
.mr8 {
	margin-right: 8px !important;
}
.mr40 {
  margin-right: 40px;
}
.mb5 {
	margin-bottom: 5px !important;
}
.mt25 {
	margin-top: 25px !important;
}
/* padding */
.pt10 {
	padding-top: 10px !important;
}
.pr20 {
	padding-right: 20px !important;
}
.bottom20 { bottom: 20px !important; }
.hide {
	display: none;
}

/* 로딩 css */
.nb-spinner_wrapper {
	/* width: 100%; */
	width: 225px;
	/* height: 100%; */
	height: 225px;
	position: fixed;
	/* background:rgba(0,0,0,0.6); */
	background: rgba(255,255,255,0.7);
	/* top:0; */
    top: 40%;
	/* left:0; */
    left: 50%;
    border-radius: 20px;
}
.nb-spinner {
   width: 75px;
   height: 75px;
   margin: 0;
   background: transparent;
   border-top: 4px solid #32aae6;
   border-right: 4px solid transparent;
   border-radius: 50%;
   -webkit-animation: 1s spin linear infinite;
   animation: 1s spin linear infinite;
   position: absolute;
   /* left: calc(50% - 50px); */
   /* top: calc(50% - 50px); */
   left: 75px;
   top: 75px;
   z-index: 998;
 }
.nb-spinner_wrapper p {
	position: absolute;
	left: calc(50% - 185px);
	top: calc(50% - -50px);
	color: white;
	font-size: 25px;
}
 @-webkit-keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
.disabled {
	 background-color: rgb(229,229,229) !important;
}