@charset "utf-8";
@import url("./style.css");
/* layout */
#wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
	min-width:1280px;
}
/* ****************** 공통클래스 ********************** */
.area {
  max-width: 1024px;
  margin: 0px auto;
  position: relative;
}
/* ****************** HEADER ********************** */
#header {
  width: 100%;
  z-index: 9;
  position: relative;
  background: var(--bs-primary);
}
#header h1.logo {
  position: relative;
  display: block;
  vertical-align: middle;
  padding: 0;
  z-index: 1;
}
#header h1.logo a {
  display: block;
  padding: 0px;
  background: url(../images/sys/logo.png);
  text-indent: -99999px;
  width: 162px;
  height: 30px;
}
#header h2.logo {
  margin-left: 6px;
}
#header h2.logo a {
  color: var(--bs-secondary);
  font-size: 14px;
  display: block;
}
.headerInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
}
.headerInner-left {
  display: flex;
  align-items: end;
}
.headerInner-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.headerInner-right a {
  font-size: 12px;
  color: var(--bs-white);
}
/* ****************** layout ********************** */
#layout-container {
  display: flex;
}
#layout-container:has(#lnb) #Container{width: calc(100% - 220px);}
/* ****************** LNB ********************** */
#lnb {
  width: 220px;
  padding: 0px;
  position: relative;
  z-index: 3;
}
#lnb:before {
  position: fixed;
  width: 220px;
  top: 0;
  left: 0;
  height: 100vh;
  background: var(--bs-lnb-bg);
  border-right: 1px solid #D1D6DE;
  display: block;
  content: "";
  z-index: 1;
}
#lnb .lnb-date-info {
  text-align: center;
  padding: 15px;
  position: relative;
  z-index: 2;
  width: 100%;
}
#lnb .lnb-date-info .date-area {
  font-weight: 700;
  font-size: 18px;
  color: #121E3B;
  margin-bottom: 14px;
}
#lnb .lnb-date-info .company-area {
  border-radius: 6px;
  border: 1px #D1D6DE;
  box-shadow: rgba(12, 12, 12, 0.05) 0px 1px 4px 0px;
  ;
  background: #FFF;
  padding: 7px;
}
#lnb .lnb-date-info .company-area em {
  display: inline-block;
  background: url("../images/sys/ico_lnb_company.png") no-repeat 0 0px;
  padding-left: 16px;
  color: #121E3B;
  font-size: 13px;
  font-weight: 500;
}
#lnb nav {
  border-top: 1px solid #D1D6DE;
  z-index: 2;
  position: relative;
  width: 220px;
}
#lnb nav > ul > li {
  padding: 0px;
  position: relative;
  border-bottom: 1px solid #D1D6DE;
}
#lnb nav > ul > li.open {
  background: var(--bs-white);
}
#lnb nav > ul > li > a {
  display: flex;
  align-items: center;
  color: var(--bs-font);
  font-size: 16px;
  line-height: 28px;
  position: relative;
  padding: 14px 16px;
  font-weight: 500;
}
#lnb nav > ul > li > a:hover, #lnb nav > ul > li.active > a, #lnb nav > ul > li.open > a {
  color: var(--bs-font-hover);
}
#lnb nav > ul > li > a .ico {
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
#lnb nav > ul > li > a .lnb-ico01 {
  background-image: url("../images/sys/lnb_nav_menu01.png")
}
#lnb nav > ul > li > a .lnb-ico02 {
  background-image: url("../images/sys/lnb_nav_menu02.png")
}
#lnb nav > ul > li > a .lnb-ico03 {
  background-image: url("../images/sys/lnb_nav_menu03.png")
}
#lnb nav > ul > li > a:hover .lnb-ico01, #lnb nav > ul > li.active > a .lnb-ico01, #lnb nav > ul > li.open > a .lnb-ico01 {
  background-image: url("../images/sys/lnb_nav_menu01_on.png")
}
#lnb nav > ul > li > a:hover .lnb-ico02, #lnb nav > ul > li.active > a .lnb-ico02, #lnb nav > ul > li.open > a .lnb-ico02 {
  background-image: url("../images/sys/lnb_nav_menu02_on.png")
}
#lnb nav > ul > li > a:hover .lnb-ico03, #lnb nav > ul > li.active > a .lnb-ico03, #lnb nav > ul > li.open > a .lnb-ico03 {
  background-image: url("../images/sys/lnb_nav_menu03_on.png")
}
#lnb nav > ul > li ul {
  display: none;
  background: #fff;
  padding: 11px 16px;
  border-top: 1px solid #D1D6DE;
  max-height: 50vh;
  overflow: auto;
}
#lnb nav > ul > li.active ul {
  display: block;
}
#lnb nav > ul > li > a.expand {
  background: url(../images/sys/lnb_nav_down.png) no-repeat 90% center
}
#lnb nav > ul > li.open > a.expand {
  background: url(../images/sys/lnb_nav_up.png) no-repeat 90% center
}
#lnb nav > ul > li > ul > li {
  position: relative;
}
#lnb nav > ul > li > ul > li:after {
  display: block;
  content: "-";
  position: absolute;
  left: 0;
  top: 4px
}
#lnb nav > ul > li > ul > li > a {
  display: block;
  padding: 5px 0px 5px 10px;
  color: var(--bs-gray-500);
}
#lnb nav > ul > li > ul > li > a:hover, #lnb nav > ul > li > ul > li.active > a {
  color: var(--bs-gray-200);
  font-weight: 500;
	text-decoration: underline;
}
/* ****************** GNB ********************** */
.gnb-wrap {
  background: #ECF2FB;
  padding-bottom: 40px;overflow: hidden;
}
#gnb {
  background: var(--bs-white);
  border-bottom: 2px solid var(--bs-font-hover);
}
#gnb > ul {
  display: flex;
  justify-content: center;
}
#gnb > ul > li {
  padding: 0;
  text-align: center;
  width: 240px;
  position: relative;
}
#gnb > ul > li > a {
  position: relative;
  font-size: 18px;
  padding: 0 0px;
  line-height: 50px;
  font-weight: 500;
  color: var(--bs-gray-500);
  display: flex;
  justify-content: center;
  align-items: center;
}
#gnb > ul > li > a .ico {
  background-repeat: no-repeat;
  background-position: left center;
  display: inline-block;
  width: 25px;
  height: 24px;
  margin-right: 5px;
}
#gnb > ul > li > a .gnb-ico01 {
  background-image: url("../images/sys/gnb_nav_menu01.png")
}
#gnb > ul > li > a .gnb-ico02 {
  background-image: url("../images/sys/gnb_nav_menu02.png")
}
#gnb > ul > li > a .gnb-ico03 {
  background-image: url("../images/sys/gnb_nav_menu03.png")
}
#gnb > ul > li > a .gnb-ico04 {
  background-image: url("../images/sys/gnb_nav_menu04.png")
}
#gnb > ul > li > a .gnb-ico05 {
  background-image: url("../images/sys/gnb_nav_menu05.png")
}
#gnb > ul > li > a:hover .gnb-ico01, #gnb > ul > li.active > a .gnb-ico01, #gnb > ul > li.open > a .gnb-ico01 {
  background-image: url("../images/sys/gnb_nav_menu01_on.png")
}
#gnb > ul > li > a:hover .gnb-ico02, #gnb > ul > li.active > a .gnb-ico02, #gnb > ul > li.open > a .gnb-ico02 {
  background-image: url("../images/sys/gnb_nav_menu02_on.png")
}
#gnb > ul > li > a:hover .gnb-ico03, #gnb > ul > li.active > a .gnb-ico03, #gnb > ul > li.open > a .gnb-ico03 {
  background-image: url("../images/sys/gnb_nav_menu03_on.png")
}
#gnb > ul > li > a:hover .gnb-ico04, #gnb > ul > li.active > a .gnb-ico04, #gnb > ul > li.open > a .gnb-ico04 {
  background-image: url("../images/sys/gnb_nav_menu04_on.png")
}
#gnb > ul > li > a:hover .gnb-ico05, #gnb > ul > li.active > a .gnb-ico05, #gnb > ul > li.open > a .gnb-ico05 {
  background-image: url("../images/sys/gnb_nav_menu05_on.png")
}
#gnb .gnb-inner {
  display: inline-block
}
#gnb > ul > li > a:hover, #gnb > ul > li.open > a {
  color: var(--bs-white);
  background-color: var(--bs-font-hover);
}
/* GNB :: 2차 전체메뉴 */
#gnb > ul > li .gnb-2dep {
  position: absolute;
  top: 63px;
  left: 0px;
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  filter: Alpha(opacity=0);
  width: 1100px;
  display: flex;
}
#gnb > ul > li:last-child .gnb-2dep {
  left: auto;
  right: 0;
  justify-content: end;
}
#gnb > ul > li .gnb-2dep ul {
  padding: 0;
  margin: 0;
  display: flex;
}
#gnb > ul > li .gnb-2dep ul li {
  position: relative;
  padding: 0px 15px;
  opacity: 0;
  filter: Alpha(opacity=0);
}
#gnb > ul > li .gnb-2dep ul li:after {
  position: absolute;
  right: 0;
  display: block;
  content: "/";
  top: 2px;
  color: rgba(0, 0, 0, 0.15);
}
#gnb > ul > li .gnb-2dep ul li:last-child:after {
  display: none;
}
#gnb > ul > li .gnb-2dep ul li a {
  display: block;
  color: var(--bs-gray-600);
  line-height: 1.3;
}
#gnb > ul > li .gnb-2dep ul li a:hover {
  color: var(--bs-black);
}
#gnb > ul > li .gnb-2dep.open {
  visibility: visible;
  opacity: 1.0;
  filter: Alpha(opacity=100);
}
#gnb > ul > li .gnb-2dep.open ul li {
  opacity: 1.0;
  filter: Alpha(opacity=100);
}
/* ****************** Container ********************** */
#Container {
  width: 100%;/*20240815*/
  position: relative;
}
#Content-wrap {padding:25px;}

#Content {
}
/* ****************** NAV ********************** */
#navi  {margin-bottom:8px;display:flex;justify-content: space-between;align-item: center;}
#navi h2 {font-size:20px;font-weight:700;color:#111;}
#navicheck h2{
	display: inline;
	font-size: 18px;
	font-weight: 700;
	color: #111;
}

#navicheck input{
	transform: scale(1.5);
	margin-right: 10px;
}
/* ****************** BTN ********************** */
.btn-area {padding:10px 0 30px;}
.btn {
  line-height: 24px;
  border-radius: 4px;
  padding: 0 20px;
  display: inline-block;
  font-weight: 500;
  margin-left: 4px;
	white-space: nowrap;
	font-size:13px;
}
.btn:has(span) {padding: 0 10px;}
.btn-wide {padding-left:40px;
padding-right:40px;line-height:40px; border-radius: 10px;font-size:16px;}
.btn.bold {font-size:16px;font-weight:600;line-height: 29px;border-radius: 6px;}
.btn-primary {
  background: var(--bs-blue);
  border: 1px solid var(--bs-blue);
  color: var(--bs-white);
}
.btn-primary:hover {
  background: var(--bs-font-hover);
  border-color: var(--bs-font-hover);
}
.btn-primary:active {
  background: var(--bs--primary);
  border-color: var(--bs--primary);
}
.btn-primary:focus {
  background: var(--bs-blue);
  border-color: #462fbb;
}
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--bs-border-100);
  border-color: var(--bs-border-100);
  cursor: default;
  color: var(--bs-gray);
}

.btn-dark {
  background: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: var(--bs-white);
}
.btn-dark:hover {
  background: var(--bs-font-hover);
  border-color: var(--bs-font-hover);
}
.btn-dark:active,
.btn-dark:focus{
  background: var(--bs-dark);
  border-color: var(--bs-dark);
}
.btn-dark:disabled, .btn-dark.disabled {
  background: var(--bs-border);
  border-color: var(--bs-border);
  cursor: default;
  color: var(--bs-gray);
}
/*sub*/
.btn-secondary {
  background: var(--bs-white);
  border: 1px solid var(--bs-btn);
	color:var(--bs-btn);
	
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background: #F4F9FF;
}
.btn-secondary:disabled, .btn-secondary.disabled {
  background: var(--bs-border);
  border-color: var(--bs-border);
  cursor: default;
  color: var(--bs-white);
}
.btn-border {
  background: var(--bs-white);
  border: 1px solid #CCCCCC;
	color:#777777;
	
}
.btn-border:hover,
.btn-border:active,
.btn-border:focus {
  background: var(--bs-border);
	
}
.btn-border:disabled, .btn-border.disabled {
  background: var(--bs-border);
  border-color: var(--bs-border);
  cursor: default;
  color: var(--bs-white);
}


.btn-excel {
  background: var(--bs-green);
  border: 1px solid var(--bs-green);
  color: var(--bs-white);
}
.btn-excel:hover {
  background: var(--bs-green);
  border-color: var(--bs-green);
}
.btn-excel:active,
.btn-excel:focus{
  background: var(--bs-green);
  border-color: var(--bs-green);
}
.btn-excel:disabled, .btn-excel.disabled {
  background: var(--bs-border);
  border-color: var(--bs-border);
  cursor: default;
  color: var(--bs-white);
}

.btn span {
  display: inline-block;
  margin-right: 5px;
  width: 14px;
  height: 15px;
  vertical-align: middle;
  margin-top: -1px;
}
.btn span.add {
  background: url(../images/sys/ico_add.png) no-repeat center center;
}
.btn span.view {
  background: url(../images/sys/ico_view.png) no-repeat center center;
}
.btn span.save {
  background: url(../images/sys/common/btn-ico-save.png) no-repeat center center;
}
.btn span.del {
  background: url(../images/sys/common/btn-ico-del.png) no-repeat center center;
}
.btn span.minus {
  background: url(../images/sys/common/btn-ico-minus.png) no-repeat center center;
}
.btn span.cancel {
  background: url(../images/sys/common/btn-ico-cancel.png) no-repeat center center;
}
.btn span.download {
  background: url(../images/sys/ico_download.png) no-repeat center center;
}
.btn span.upload {
  background: url(../images/sys/ico_upload.png) no-repeat center center;
}
.btn span.search {
  background: url(../images/sys/ico_search.png) no-repeat center center;
}
.btn span.check {
  background: url(../images/sys/ico_check.png) no-repeat center center;
}
.btn span.excel {
  background: url(../images/sys/ico_excel.png) no-repeat center center;
}
.file-down, .file-down:hover {
    text-decoration: underline;
    text-decoration-color: var(--bs-gray-800);
    background: url(../images/sys/ico_download_s.png) no-repeat left center;
    padding-left: 14px;
}
.link {
    color: var(--bs-primary);
    text-decoration: underline;
}
/* ****************** TABLE ********************** */
.tableA {
  border-collapse: collapse;
  width: 100%
}
.tableA thead th {
  text-align: center;
  padding: 0.6em;
  color: #636a76;
  font-weight: 500;
  border-left: 1px solid #dadee5;
  background: #edf0f5;
}
.tableA tbody td {
  padding: 0.6em;
  text-align: right;
  color: #414246;
  border-bottom: 1px solid #dadee5;
  border-left: 1px solid #dadee5;
}
.tableA tfoot td {
  padding: 0.6em;
  text-align: right;
  color: #414246;
  background: #dee3ed;
  border-left: 1px solid #dadee5;
}
.tableA thead tr th:first-child, .tableA tbody tr td:first-child, .tableA tfoot tr td:first-child {
  border-left: 0;
}
.text-primary + .grid-table {margin-top:20px;}

.grid-table table thead th {border-bottom:1px solid #DDD;border-right:1px solid #ddd;background:#F4F9FF;padding:15px;}
.grid-table table tbody td {border-bottom:1px solid #DDD;border-right:1px solid #ddd;padding:10px;}
/* ****************** TITLE ********************** */
h4.subtitle {
  background: url(../images/sys/common/ico-title.png) no-repeat left center;
  padding-left: 10px;
  font-size: 1.2em;
  font-weight: 700;
}
/* ****************** Modal popup ********************** */
html.overflow {
  overflow: hidden;
}
.Mpopup {
  background-color: rgba(0, 0, 0, .6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  padding: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.Mpopup.open {
  display: flex;
}
.popup {
  width: 100%;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bs-white);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px;
  border-radius: 15px;
}
.popup.small {
  max-width: 500px;
}
.popup.large {
  max-width: 1200px;
}
.popup-head {
  background: var(--bs-primary);
  display: flex;
  justify-content: space-between;
  overflow: hidden;
	align-items: center;
	padding:15px;
}
.popup-head h4 {
  font-weight: 700;
  font-size: 16px;
	color:var(--bs-white);
}
.popup-head p {color:var(--bs-white);}
.popup-head .btn-close-popup {
  width: 24px;
  text-align: center;
  cursor: pointer;
}
.popup-head .btn-close-popup em {
  display: block;
  text-indent: -9999px;
  background: url("../images/sys/ico_popup_x.png") no-repeat center center;
  height: 100%;
}
.popup-body {
  padding: 15px;
}
.popup-body.scroll {
  max-height: 70vh;
  overflow-y: auto;
}
.popup-body-btn {
  margin-top: 2rem;
}
.popup-body-btn a {
  display: inline-block;
}
.popup-footer {
  background: var(--bs-popup-header);
  padding: 10px 15px;
}


/* ****************** paging********************** */
.paging {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0 0 0;
  gap: 2px;
}

.paging a {
  display:inline-block;
  vertical-align: middle;
  padding: 0 0.7em;
  font-size: 0.9em;
	 width: 32px;
	    line-height: 32px;
	text-align:center;
  color: var(--bs-gray-300);
	margin:0 2px;
}
.paging a:hover {
  color: var(--bs-blue);
}
.paging strong.on {
  color: var(--bs-blue);
  font-weight: 800;
    border-radius: 4px;
	display:inline-block;
	width: 32px;
	line-height: 32px;
	text-align:center;
}
.paging button {
  text-indent: -99999px;
  width: 32px;
  height: 32px;
	    display: inline-block;
    position: relative;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: middle;
    overflow: hidden;
}
.paging button[disabled] {
    opacity: 0.4;
}
.paging button:not([disabled]):focus, .paging button:not([disabled]):hover {
    border-radius: 4px;
    background-color: #eee;
}

.paging button.btn-first:before, .paging button.btn-last:before {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid #444;
    border-width: 0 0 2px 2px;
    background-color: transparent;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(45deg);
}
.paging button.btn-first:after, .paging button.btn-last:after {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid #444;
    border-width: 0 0 2px 2px;
    background-color: transparent;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(45deg);
}
.paging button.btn-last:before {
    left: auto;
    right: 17px;
    transform: translateY(-50%) rotate(-135deg);
}
.paging button.btn-last:after {
    left: auto;
    right: 10px;
    transform: translateY(-50%) rotate(-135deg);
}
.paging button.btn-prev:before, .btn-next:before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid #444;
    border-width: 0 0 2px 2px;
    background-color: transparent;
    box-sizing: border-box;
    transform: translateY(-50%) rotate(45deg);
}
.paging button.btn-next:before {
    left: auto;
    right: 14px;
    transform: translateY(-50%) rotate(-135deg);
}


.datepicker-input {
  line-height: 1.2;
  vertical-align: middle;
  border: 1px solid var(--bs-border);
  border-radius: 5px;
  background-color: var(--bs-white);
  font-weight: 500;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 125px;
  width: 100%;
	padding: 0 5px 0 0;
}
.datepicker-input:focus-within {
  border: 1px solid var(--bs-primary);
}
.datepicker-input input {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 23px!important;
  padding:0 0 0 10px!important;
}

.datepicker-ym {
  background: url(../images/sys/icon_calendar.png) no-repeat center right
}
.mtz-monthpicker-year, .ui-datepicker-year {
  min-width: 100px;
}
.mtz-monthpicker td {
  padding: 10px;
}
.ui-datepicker-prev {
  background: url(../images/sys/ico-calendar-prev.png) no-repeat center center;
}
.ui-datepicker-next {
  background: url(../images/sys/ico-calendar-next.png) no-repeat center center;
}


div.pq-pager {background:#fff;gap:3px;    justify-content: end;padding:10px 5px}
.ui-icon-seek-first {
    background-position: 0 0!important;
	background: #fff url(../images/sys/gr_pprev.png) no-repeat center center!important;
}
.pq-select-search-div>.ui-icon {
    margin-top: 4px;
}
.pq-select-button .pq-icon {
    margin-top: 4px;
}
.ui-icon-seek-prev {
    background-position: 0 0!important;
	background: #fff url(../images/sys/gr_prev.png) no-repeat center center!important;
}

.ui-icon-seek-next {
    background-position: 0 0!important;
	background:#fff  url(../images/sys/gr_next.png) no-repeat center center!important;
}

.ui-icon-seek-end {
    background-position: 0 0!important;
	background: #fff url(../images/sys/gr_nnext.png) no-repeat center center!important;
}
.ui-icon-refresh {
    background-position: 0 0!important;
	background: #fff url(../images/sys/gr_reload.png) no-repeat center center!important;
}
.pq-grid span.pq-separator {
    border-left-color: #ddd!important;
}
.pq-pager-input {height:26px}
div.pq-pager select {min-width:60px;height:26px;}