@charset "utf-8";

* {margin:0; padding:0; box-sizing:border-box;}
html,body{width:100%; min-width: 320px; height:100%;margin:0;padding:0;-webkit-text-size-adjust: 100%;font-family:'Noto Sans KR',"Malgun Gothic","맑은 고딕", Dotum, '돋움', arial, sans-serif; font-weight: 500; letter-spacing: -0.05em; font-size: 13px; color:#333333;}
html,body,div,p,ul,li,ol,dl,dt,dd,input,textarea,select,p,hr,h1,h2,h3,h4,h5 {margin:0;padding:0;}
span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, button, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {background: none; margin: 0; padding: 0;}

ul,li,ol,dl,dd,dt{list-style:none;}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a {text-decoration:none;color:#333333;}
caption{width:1px;height:1px;overflow:hidden;display:none}
table{margin:0px;border-collapse:collapse;-ms-word-break: keep-all;word-break: keep-all;}
td,th,p,span {letter-spacing: -0.05em;}/*-ms-word-break: keep-all;word-break: keep-all;*/
select, input {font-family:'Noto Sans KR', Dotum, '돋움', arial, sans-serif; font-weight: 500; outline-style: none; font-size: 12px; color:#333; transition: all 0.3s;}
input:disabled,
select:disabled {border: 1px solid #e6e6e6 !important; background-color: #e6e6e6 !important;}
/* button {font-family:'NanumGothicBold', arial, sans-serif;} */
select {-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; padding-right: 20px;}
select::-ms-expand { display:none;}
hr.line {margin: 15px 0 10px;}


@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(/webfonts/NotoSansCJKkr-Regular.woff) format('woff'),
        url(/webfonts/NotoSansCJKkr-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(/webfonts/NotoSansCJKkr-Medium.woff) format('woff'),
        url(/webfonts/NotoSansCJKkr-Medium.otf) format('opentype');
 }

 /* 공통 */
.wd-05 {width: 5%;}
.wd-07 {width: 7%;}
.wd-10 {width: 10%;}
.wd-15 {width: 15%;}
.wd-20 {width: 20%;}
.wd-22 {width: 22.5%;}
.wd-25 {width: 25%;}
.wd-30 {width: 30%;}
.wd-33 {width: 33.3333%;}
.wd-35 {width: 35%;}
.wd-40 {width: 40%;}
.wd-45 {width: 45%;}
.wd-50 {width: 50%;}
.wd-55 {width: 55%;}
.wd-60 {width: 60%;}
.wd-65 {width: 65%;}
.wd-70 {width: 70%;}
.wd-75 {width: 75%;}
.wd-80 {width: 80%;}
.wd-85 {width: 85%;}
.wd-90 {width: 90%;}
.wd-95 {width: 95%;}
.wd-100 {width: 100%;}
.m-5 {margin-top: 5px;}
.m-10 {margin-top: 10px;}
.m-20 {margin-top: 20px;}
.m-30 {margin-top: 30px;}

.red {color:#ff2a48 !important;}
.required::before {content: '*';}
.hidden {position:absolute; left:-9999px;}
.clear {clear: both;}
.f_right {float: right;}

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


/* button style */
.btn-wrap li {margin-left: 6px; float: left;}
.btn-wrap li span {
  cursor: pointer; display: block; padding: 4px 20px 5px 37px;
  border-radius: 30px; color:#fff; background-color:#c2c2c2;
  transition: all 0.2s; font-size: 13px; background-image: url(/images/btn_style01.png);
  background-repeat: no-repeat;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
 }
.btn-wrap li span:hover {background-color:#00a9de;}
.btn-upload {background-position: 13px 9px;}
.btn-download {background-position: 13px -17px;}
.btn-print {background-position: 13px -44px;}
.btn-save {background-position: 13px -72px;}
.btn-del {background-position: 13px -98px;}
.btn-add {background-position: 13px -124px;}
.btn-edit {background-position: 13px -152px;}
.btn-new {background-position: 13px -179px;}
.btn-view {background-position: 13px -205px;}

.loading {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.8); z-index: 102; display: none;}
.loading .img-wrap {position: absolute; width: 60px; height: 60px; background:#fff; border-radius: 100px; top: 50%; left: 50%; margin-left: -30px; margin-top: -50px;}
.loading .img-wrap img {display: block; margin: 16px auto 0;}

#wrap {width: 100%; height:100%;}
.navbar {
  width: 255px; position: fixed; top:0; left:0; bottom:0;
  background: linear-gradient(-45deg, #083271, #177694);
  background: -webkit-linear-gradient(-45deg, #083271, #177694);
  background: -o-linear-gradient(-45deg, #083271, #177694);
  background: -moz-linear-gradient(-45deg, #083271, #177694);
  box-shadow:4px 0px 18px 3px rgba(63,70,88, 0.5);
  -webkit-box-shadow:4px 0px 18px 3px rgba(63,70,88, 0.5);
  -moz-box-shadow:4px 0px 18px 3px rgba(63,70,88, 0.5);
  -ms-box-shadow:4px 0px 18px 3px rgba(63,70,88, 0.5);
  overflow-y: auto; transition: all 0.3s; z-index: 10;
}
.navbar .nav-top {width: 100%; height: 107px; border-bottom: 1px solid #17578c; position:relative;}
.navbar .nav-top .logo {margin: 39px 0 0 15px; width: 95px;}
.navbar .nav-top .logout-btn {position: absolute; top: 42px; right: 51px; cursor: pointer; width: 25px; height: 19px; background: url('/images/logout.png') no-repeat center center; opacity: 0.3; filter: alpha(opacity=30); transition: all 0.2s;}
.navbar .nav-top .logout-btn:hover {opacity: 0.8; filter: alpha(opacity=80);}
.navbar .nav-top .right {position: absolute; top: 39px; right: 15px; cursor: pointer; font-size: 20px; transition: all 0.2s; width: 26px; height: 26px;}
.navbar .nav-top .right span {display: block; position: absolute; top:12px; height: 2px; width: 26px; border-radius: 2px; transition: all 0.2s; background:#fff; opacity: 0.3; filter: alpha(opacity=30);}
.navbar .nav-top .right span::before {content: ''; display: block; position: absolute; top:-8px; right:0; height: 2px; width: 20px; border-radius: 2px; transition: all 0.3s; background:#fff;}
.navbar .nav-top .right span::after {content: ''; display: block; position: absolute; top:8px; right:0; height: 2px; width: 20px; border-radius: 2px; transition: all 0.3s; background:#fff;}
.navbar .nav-top .right:hover span {opacity: 0.8; filter: alpha(opacity=80);}
.navbar .nav-top .right:hover span::before, .navbar .nav-top .right:hover span::after {width: 26px;}
.navbar .nav-user {width: 100%; height: 88px; border-bottom: 1px solid #17578c; position: relative; align-items: center; display: flex; padding: 0 15px 0 15px;}
/*.navbar .nav-user .photo {width: 25px; height: 25px; position: absolute; top: 28px; left: 15px;}
.navbar .nav-user .photo.default {background: url('/images/photo.png') no-repeat bottom center; opacity: 0.3; filter: alpha(opacity=30); background-size: 100%;}
.navbar .nav-user .photo img {width: 100%;}*/
.navbar .nav-user .user-area {display: flex; padding-right: 24px; position: relative;}
.navbar .nav-user .user-area img {width: 25px; height: 25px; margin-right: 10px; border-radius: 50%;}
.navbar .nav-user .user-area .set {display: block; width: 19px; height: 19px; background: url('/images/ico_set01.png') no-repeat center center; cursor: pointer; position: absolute; top: 1px; right: 0px; background-size: 15px; opacity: 0.8;}
.navbar .nav-user .name {color:#c1ddf3; font-size: 15px;}
.navbar .nav-user .team {font-size: 13px;}
.navbar .nav-user .team::before {content: '(';}
.navbar .nav-user .team::after {content: ')';}
.navbar .nav-menu {padding: 35px 15px;}
.navbar .nav-menu li {cursor : pointer}
.navbar .nav-menu .depth01-ul > li {margin: 3px 0;}
.navbar .nav-menu .depth01-ul > li > a {color:#b4cbd8; font-size: 14px; font-weight: 400; transition: all 0.2s; padding: 10px 10px 10px 27px; position: relative; display: block; background-repeat: no-repeat; background-position: left 11px; width: 100%;}
.navbar .nav-menu .depth01-ul > li > a:hover,
.navbar .nav-menu .depth01-ul > li > a.on {color:#f8fcfe;}
.navbar .nav-menu .depth01-ul > li > a .arrow {display: block; width: 8px; height: 4px; background: url('/images/arrow01.png') no-repeat center center; opacity: 0.3; filter: alpha(opacity=30); transition: all 0.4s; transform:rotate(180deg); position: absolute; top: 15px; right: 10px;}
.navbar .nav-menu .depth01-ul > li > a.on .arrow {transform:rotate(0deg);}
.navbar .nav-menu .depth01-ul .menu03 > a {background-image: url('/images/nav_ico03.png');transition: all 0.3s;}
.navbar .nav-menu .depth01-ul .menu03 > a:hover, .navbar .nav-menu .depth01-ul .menu01 > a.on {background-image: url('/images/nav_ico03_over.png');}
.navbar .nav-menu .depth01-ul .menu02 > a {background-image: url('/images/nav_ico02.png');transition: all 0.3s;}
.navbar .nav-menu .depth01-ul .menu02 > a:hover, .navbar .nav-menu .depth01-ul .menu02 > a.on {background-image: url('/images/nav_ico02_over.png');}
.navbar .nav-menu .depth01-ul .menu01 > a {background-image: url('/images/nav_ico01.png');transition: all 0.3s;}
.navbar .nav-menu .depth01-ul .menu01 > a:hover, .navbar .nav-menu .depth01-ul .menu03 > a.on {background-image: url('/images/nav_ico01_over.png');}
.navbar .nav-menu .depth01-ul .menu04 > a {background-image: url('/images/nav_ico04.png');transition: all 0.3s;}
.navbar .nav-menu .depth01-ul .menu04 > a:hover, .navbar .nav-menu .depth01-ul .menu04 > a.on {background-image: url('/images/nav_ico04_over.png');}
.navbar .nav-menu .depth01-ul .menu05 > a {background-image: url('/images/nav_ico05.png');transition: all 0.3s;}
.navbar .nav-menu .depth01-ul .menu05 > a:hover, .navbar .nav-menu .depth01-ul .menu05 > a.on {background-image: url('/images/nav_ico05_over.png');}
.navbar .nav-menu .depth02-ul {display: none; padding: 15px 18px; background: rgba(255, 255, 255, 0.17); border-radius: 3px;}
.navbar .nav-menu .depth02-ul.on {display: block;}
.navbar .nav-menu .depth02-ul > li {margin: 5px 0;}
.navbar .nav-menu .depth02-ul > li > a {color:#f8fcfe; font-size: 13px; font-weight: 400;transition: all 0.2s;}
.navbar .nav-menu .depth02-ul > li > a::before {content: ''; padding-right: 9px; background: url(/images/ico04.png) no-repeat left center;}
.navbar .nav-menu .depth02-ul > li > a:hover, .navbar .nav-menu .depth02-ul > li > a.on {color:#ffe28b;}
.navbar .nav-menu .depth03-ul  {margin-left: 9px; margin-bottom: 15px;}
.navbar .nav-menu .depth03-ul > li {margin: 5px 0;}
.navbar .nav-menu .depth03-ul > li > a {display: block; color:#92cae0; font-weight: 400;transition: all 0.2s;}
.navbar .nav-menu .depth03-ul > li > a:hover {color:#72b4ce;}

.navbar.on {left: -205px;}
.navbar.on .nav-top, .navbar.on .nav-user {border-bottom: 0;}
.navbar.on .nav-top .right span::before, .navbar.on .nav-top .right span::after {left: 0;}
.navbar.on .nav-menu {position: absolute; right: 0; padding:0; width: 50px;}
.navbar.on .nav-menu .depth01-ul > li {margin: 20px 0;}
.navbar.on .nav-menu .depth01-ul > li > a {text-indent: -99999%; background-position: center center;}
.navbar.on .nav-menu .depth01-ul > li > a .arrow {display: none;}
.navbar.on .nav-menu .depth02-ul {display: none !important;}

.main-content {position: absolute; top:0; right:0; left: 255px; bottom:0; background:#f2f2f2;transition: all 0.3s; overflow-y: auto;}
.main-content .content-inner {overflow: auto; min-width: 945px; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
/* .main-content .content-inner > .inner {padding: 30px; position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto;} */
/* 수정 whshin */
.main-content .content-inner > .inner {padding: 10px; position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto;}
.main-content .header {width: 100%; position: relative; margin-bottom: 10px;}
.main-content .header .h2 {font-size: 20px; color:#083271; font-weight: 500;}
.main-content .header .page-step {position: absolute; top:8px; right:0; overflow: hidden;}
.main-content .header .page-step li {margin-left: 7px; float: left;}
.main-content .header .page-step a {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; color: #999999; background: url(/images/arrow04.png) no-repeat left center; padding-left: 17px;}
.main-content .header .page-step li:first-child a {background: none;}
.main-content .header .page-step li:last-child a {color: #083271; background: url(/images/arrow03.png) no-repeat left center;}
/* .search-area {
  position: relative;
  padding: 5px 30px 20px 5px;
  background:#fff;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  margin-bottom: 20px;
} */
/* 수정 whshin */
.search-area {
  position: relative;
  padding: 5px 30px 20px 5px;
  background:#fff;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  margin-bottom: 0px;
}
.search-area .search-btn-wrap {position: absolute; right: 30px; bottom: 30px;}
.search-area .search-btn-wrap > ul > li > span {
  display: block; width: 35px; height: 35px;
  cursor: pointer; border-radius: 50px; transition: all 0.3s;
  box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -webkit-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -moz-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -ms-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  background-color:#f3f3f3; background-repeat: no-repeat; background-position: center center;
}
.search-area .search-btn-wrap > ul > li > span:hover {background-color: #00a9de;}
.search-area .search-btn-wrap .search span {background-image: url('/images/ico02.png');}
.search-area .search-btn-wrap .search span:hover {background-image: url('/images/ico03.png');}
.search-area .table-wrap {width: 100%; padding-right: 45px;}
.search-area .table-wrap .table {width: 100%;}
.search-area .table-wrap .table input {width: 100%; border: 1px solid #f3f3f3; background-color:#f3f3f3; padding: 7px 10px 8px;}
.search-area .table-wrap .table input[type="text"]:focus,
.search-area .table-wrap .table select:focus,
.search-area .date .input.on {border: 1px solid #00a9de;}
.search-area .table-wrap .table td {padding: 0 10px;}
.search-area .table-wrap .table .label {font-size:12px; color:#177694; margin-bottom: 3px; padding-top: 5px;}
.search-area .date ul {overflow: hidden;}
.search-area .date ul li {float: left;}
.search-area .date .input {width: 45%; padding-right: 30px; background:#f3f3f3 url(/images/ico05_calendar.png) no-repeat right center; border: 1px solid #f3f3f3; transition: all 0.3s;}
.search-area .date div.input {width: 100%;}
.search-area .date .swing {width: 10%; text-align: center; line-height: 27px;}
.search-area .date.month .input {width: 100%;}
.search-area .date .input input[type="text"]:focus {border: 1px solid #f3f3f3;}
.select-wrap {position: relative; background:#fff;}
.select-wrap select {width: 100%; border: 1px solid #f3f3f3; background-color:#f3f3f3; padding: 7px 20px 8px 10px;}
.select-wrap .drop {position: absolute; bottom: 0; top:1; right: 0; width: 25px; height: 32px; background-image: url("/images/arrow02.png"); background-repeat: no-repeat; background-position: center center;}

/* .search-area.btn-hide {padding: 5px 10px 20px;} */
/* size 수정 whshin */
.search-area.btn-hide {padding: 0px 0px 5px;}

.search-area.btn-hide .table-wrap {padding-right: 0;}
.search-area.btn-hide .btn-wrap {display: flex;}
.search-area.btn-hide .btn-wrap li {flex: 1;}
.search-area.btn-hide .btn-wrap li span {padding: 7px 20px 8px 37px;}
.main-content .container .table-header {margin-bottom: 10px; position: relative;}
.main-content .container .table-header .result {float: left; margin-top: 5px;}
.main-content .container .table-header .btn-wrap {display: flex; float: right;}
/* .main-content .container .table-wrap {
  position: absolute; bottom:95px; right: 30px; left:30px;
  background:#fff; overflow: auto; clear: both;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
} */
/* 수정 whshin */
.main-content .container .table-wrap {
  position: absolute; bottom:95px; right: 10px; left:10px;
  background:#fff; overflow: auto; clear: both;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
}
.main-content .container .table-wrap.type00 {top: 110px; overflow:hidden;}
/* 수정 whshin
.main-content .container .table-wrap.type01 {top: 215px; overflow:hidden;} */
.main-content .container .table-wrap.type01 {top: 180px; overflow:hidden;}
.main-content .container .table-wrap.type01.no-buttons {top: 200px; overflow: hidden;}
.main-content .container .table-wrap.type02 {top: 300px; overflow:hidden;}
.main-content .container .table-wrap.type03 {top: 370px; overflow:hidden;}
/* 수정 whshin
.main-content .container .table-wrap.no-pager {bottom: 30px;} */
.main-content .container .table-wrap.no-pager {bottom: 10px;}
.main-content .container .paging {position: absolute; bottom: 37px; left:30px; right:30px;}
.main-content .container .paging .btn {float: left; width: 150px; display: flex; display: -webkit-box; display: -ms-flexbox;}
.main-content .container .paging .page {float: right;}
.main-content .container .paging ul li {margin-right: 2px;}
.main-content .container .paging ul li span {
  transition: all 0.3s;
  display: -webkit-box;display: -ms-flexbox;display: flex;
  -webkit-box-pack: center;-ms-flex-pack: center;
  justify-content: center;-webkit-box-align: center;-ms-flex-align:center;
  align-items: center;text-align: center; padding: 10px 20px 11px; font-size: 12px;
  color:#177694; text-transform: uppercase; cursor: pointer; background:#fff;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
}
.main-content .container .paging ul li span:hover {background:#00a9de; color:#fff;}
.main-content .container .paging .btn > li {-webkit-box-flex: 1; -ms-flex:1; flex: 1;}
.main-content .container .paging .page > li {float: left;}
.main-content .container .paging .page .num {color:#177694; font-size: 12px; margin: 10px 15px 0 0;}
.main-content .container .paging .page .box input {
  border: 1px solid #fff; background-color:#fff; padding: 9.4px; width: 56px;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
}
.main-content .container .paging .page .box input:focus {border: 1px solid #00a9de;}
.main-content.on {left:50px;}

.main-content .container .table-section .title {font-size: 16px; text-transform: uppercase; position: relative; display: inline-block; padding-right: 15px;}
.main-content .container .table-section .title mark {position: relative; z-index: 1;}
.main-content .container .table-section .title::before {content: ''; display: block; width: 100%; height: 5px; background: #84d0f5; position: absolute; bottom:4px; left:0;}
.main-content .container .table-section .paging {position: static; margin-top: 10px;}
.main-content .container .table-section .check-box {display: flex; flex-wrap: wrap; width: 100%;}
.main-content .container .table-section .check-box > li {-webkit-box-flex: 1; -ms-flex:1; flex: 1;}
.main-content .container .table-type03 {
  width: 100%; background:#fff;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
   margin-top: 10px;
}
.main-content .container .table-type03.type01 {height: 400px; margin-bottom: 30px; overflow:hidden;}
.main-content .container .table-type03.type02 {height: 300px; overflow:hidden;}
.main-content .container .table-type03.type03 {height: 210px; overflow:hidden;}
.main-content .container .table-type04 {top: 110px; bottom: 30px; left: 30px; right: 30px; position: absolute;display: flex; display: -webkit-box; display: -ms-flexbox;}
.main-content .container .table-type04.type01 {top: 110px; overflow:hidden;}
.main-content .container .table-type04.type02 {top: 230px; overflow:hidden;}
.main-content .container .table-type04 .table-box {top: 0px; -webkit-box-flex: 1; -ms-flex:1; flex: 1; position: relative;}
.main-content .container .table-type04 .table-box01 {margin-right: 15px;}
.main-content .container .table-type04 .table-box02 {margin-left: 15px;}
.main-content .container .table-type04 .table-box .inner {
  background: #fff; position: absolute; top:0; left:0; right: 0; bottom:0;
  box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  overflow: auto; padding: 30px;
}
.main-content .container .table-type04 .table-section .inner {padding: 30px;}
.main-content .container .table-type04 .table-section table {width: 100%;}
.main-content .container .table-type04 .table-section table td {padding: 10px 0;}
.main-content .container .table-type04 .table-section .label {font-size: 12px; color:#177694;}
.main-content .container .table-type04 .table-section input[type="text"],
.main-content .container .table-type04 .table-section textarea {width: 100%; border: 1px solid #f3f3f3; background:#f3f3f3; padding: 6px 10px;}
.main-content .container .table-type04 .table-section input[type="text"]:focus,
.main-content .container .table-type04 .table-section textarea:focus {border: 1px solid #00a9de;}
.main-content .container .table-type04 .table-section .select-wrap {position: relative; background:#fff;}
.main-content .container .table-type04 .table-section .select-wrap .drop {position: absolute; top:1px; right: 0px; width: 25px; height: 32px; background-image: url("/images/arrow02.png"); background-repeat: no-repeat; background-position: center center;}
.main-content .container .table-type04 .table-section select {width: 100%; border: 1px solid #f3f3f3; background-color:#f3f3f3; padding: 6px 20px 6px 10px;}
.main-content .container .table-type04 .table-section select:focus {border: 1px solid #00a9de;}

.main-content .container .table-type04 .table-section input[type="radio"] {display: none;}
.main-content .container .table-type04 .table-section input[type="radio"] + label {display: inline-block;cursor: pointer;background: url('/images/ico_check01.png') no-repeat 0;line-height: 16px;padding-left: 20px;margin-right: 20px;}
.main-content .container .table-type04 .table-section input[type="radio"]:checked + label {background: url('/images/ico_check.png') no-repeat 0;line-height: 16px;padding-left: 20px;}
.main-content .container .table-type05 {display: flex; margin-top: 10px;margin-left: -10px; margin-right: -10px;}
/* .main-content .container .table-type05 .table-box {flex: 1; padding: 0 10px; height: 400px;} */
/* 수정 whshin*/
.main-content .container .table-type05 .table-box {flex: 1; padding: 0 10px; height: 520px;}
.main-content .container .table-type05 .table-box .inner {
    background: #fff;
    box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    overflow: auto;
    height: 100%;
}
.table-type05 .table-box .box-title {padding: 10px; font-size: 15px; color:#15a4d6;}
.table-type05 .table-box table {width: 100%;}
.table-type05 .table-box table th,
.table-type05 .table-box table td {border-top: 1px solid #ccc; padding: 5px 10px;}
.table-type05 .table-box table input {border: 1px solid #ccc; padding: 1px 5px; font-size: 13px; width: 100%; text-align: right;}
.table-type05 .table-box table.total th,
.table-type05 .table-box table.total td {background: #dfefff;}

.table-section-wrap {position: relative; margin-top: 20px; height: 392px;}
.table-section-wrap .table01, .table-section-wrap .table02 {position: absolute; top:27px;}
.table-section-wrap .table01 {width: 650px; height: 356px; left:0; top: 37px;}
.table-section-wrap .table02 {right:0; left: 660px;}
.table-section-wrap .table01 .preview-area {
	width: 100%; height: 100%;
	box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  	-webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  	-moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
  	-ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
}
.table-section-wrap .table01 .preview-area .inner {width: 1101px; height: 100%; position: relative;}
.table-section-wrap .table01 .preview-area iframe {border: 0; width: 100%; height: 636px; transform: scale(0.59); position:  absolute; left: -226px; top: -141px;}

.login-wrap {
  width: 100%; height: 100%; min-width: 1200px; overflow-x: auto; position: relative;
  background: linear-gradient(-45deg, #083271, #177694);
  background: -webkit-linear-gradient(-45deg, #083271, #177694);
  background: -o-linear-gradient(-45deg, #083271, #177694);
  background: -moz-linear-gradient(-45deg, #083271, #177694);
}
.login-wrap .bg-img {background: url(/images/login_bg.png) no-repeat left top; width: 100%; height: 698px; position: absolute; top:0; left:0; right: 0; background-size: cover;}
.login-wrap .login-box {width: 400px; height: 345px; position: absolute; top: 50%; left: 50%; margin-top: -172.5px; margin-left: -200px; padding: 10px;}
.login-wrap .login-box .login-logo {display: block; margin: 0 auto;}
.login-wrap .login-box .save-id input {vertical-align: middle;}
.login-wrap .login-box .save-id label {color:#fff; font-weight: 400; font-size: 13px; letter-spacing: 0;}
.login-wrap .login-box .required {color:#9ed8f9; font-weight: 400;}
.login-box .input-area  {margin-top: 15px;}
.login-box .input-area > li {margin: 7px 0;}
.login-box .input-area input {border: 1px solid #fff; border-radius: 5px;padding: 15px; width: 100%;}
.login-box .input-box.on input {border: 1px solid #00a9de;}
.login-box .login-btn {
  display: block; background:#2686bd; color:#fff; text-align: center; font-size: 15px; text-transform: uppercase; padding: 15px; border-radius: 5px; font-weight: 400; letter-spacing: 0;
  box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
  -webkit-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
  -moz-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
  -ms-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
}
.login-box .login-btn:hover {background:#0f7bb9; transition: all 0.2s;}

.grid-row-icon {display: inline-block; width: 16px; height: 16px; vertical-align: middle;background-image:url("/images/zTreeStandard.png"); background-repeat: no-repeat;}
.grid-row-edit-icon {background-position:-161px -16px;}
.grid-row-add-icon {background-position:-144px -0px;}
.grid-row-remove-icon {background-position:-110px -65px;}

/* 다국어추가 */
.login-wrap .bottom-area {display: flex; align-items: center; justify-content: space-between;}
.login-wrap .bottom-area select {border: 1px solid #f3f3f3; background-color:#f3f3f3; padding: 6px 30px 6px 10px; background-image: url("/images/arrow02.png"); background-repeat: no-repeat; background-position: right 10px center;}
.navbar .nav-menu {position: absolute; top: 195px; left:0; right:0; bottom: 65px; overflow: auto;}
.navbar  .bottom-area {position: absolute; bottom:0; left:0; right:0; padding: 20px;}
.navbar  .bottom-area select {
  /*   border: 1px solid #b3ccd6;
    background-color: rgba(255, 255, 255, 0);
    padding: 6px 30px 6px 10px;
    background-image: url("/images/arrow02.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    width: 100%;
    color:#fff; */
    border: 1px solid #f3f3f3; 
    background-color:#f3f3f3; 
    padding: 6px 30px 6px 10px; 
    background-image: url("/images/arrow02.png"); 
    background-repeat: no-repeat; 
    background-position: right 10px center;    
    width: 100%;
}


/* layer popup*/
#wrap.popup-wrap {height: auto;}
#wrap.popup-wrap .cke_contents.cke_reset {position: absolute; top: 44px; left: 0 ; right: 0; bottom:0; min-height: 660px; height: auto !important;}
.layer-popup {position: fixed; top:0; left:0; right:0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 101; display: none;}
.layer-popup .popup {background:#fff; position: absolute; top: 50%; left: 50%; padding: 10px;}
.layer-popup .popup-header {position: relative; border-bottom: 1px solid #c7c7c7; margin-bottom: 20px; padding-bottom: 10px;}
.layer-popup .popup-header .title {font-size: 16px; position: relative; padding-top: 10px;}
.layer-popup .popup-header .title::before {content: ''; position: absolute; left:0; top: 5px; width: 20px; height: 4px; background:#156f90;}
.layer-popup .popup-header .close {position: absolute; top: 0px; right: 0px; width: 30px; height: 30px; cursor: pointer; transition: all 0.2s;}
.layer-popup .popup-header .close:hover {transform: rotate(90deg);}
.layer-popup .popup-header .close::before {content: ''; display: inline-block; width: 25px; height: 3px; margin-top: -1px; margin-left: -13px; transform: rotate(-45deg); background:#333; position: absolute; top: 50%; left: 50%; border-radius: 10px;}
.layer-popup .popup-header .close::after {content: ''; display: inline-block; width: 25px; height: 3px; margin-top: -1px; margin-left: -13px; transform: rotate(45deg); background:#333; position: absolute; top: 50%; left: 50%; border-radius: 10px;}
.layer-popup .popup-search-area {position: absolute; top:10px; left: 10px; right: 10px;}
.layer-popup .popup-search-area input {width: 100%; border: 1px solid #f3f3f3; background-color: #f3f3f3; padding: 7px 10px 8px;}
.layer-popup .popup-search-area table {width: 100%;}
.layer-popup .popup-search-area table tbody tr td {padding: 0 3px;}
.layer-popup .popup-search-area table input[type="text"]:focus {border: 1px solid #00a9de;}
.layer-popup .popup-search-area .btn {padding-left: 15px;}
.layer-popup .btn .search {width: 38px; height: 38px; border-radius: 50px; background: #d6d6d6 url(/images/ico02.png) no-repeat center center; display: inline-block; vertical-align: middle; cursor: pointer; transition: all 0.2s;}
.layer-popup .popup-search-area .btn .search:hover {background: #00a9de url(/images/ico03.png) no-repeat center center;}
.layer-popup .list-wrap {position: absolute; left:10px; right:10px; bottom: 10px; top: 75px; border: 1px solid #e6e6e6;}
.layer-popup .popup-btn {position: absolute; bottom: 0; left: 0; right: 0;}
.layer-popup .popup-btn ul {width: 100%; display: flex; display: -webkit-box; display: -ms-flexbox;}
.layer-popup .popup-btn ul li {-webkit-box-flex: 1; -ms-flex:1; flex: 1; text-align: center;}
.layer-popup .popup-btn ul li span {cursor: pointer; display: block; padding: 10px; transition: all 0.2s;}
.layer-popup .popup-btn .save {background:#fff; border: 1px solid #d6d6d6;}
.layer-popup .popup-btn .close {background:#d6d6d6; border: 1px solid #d6d6d6;}
.layer-popup .popup-btn .save:hover {background: #00a9de; border: 1px solid #00a9de; color:#fff;}
.layer-popup .popup-btn .close:hover {background:#c7c7c7; border: 1px solid #c7c7c7;}
.layer-popup .popup-user {width: 900px; height: 500px; margin-top: -250px; margin-left: -450px;}
.layer-popup .popup-dept {width: 400px; height: 400px; margin-top: -200px; margin-left: -200px;}
.layer-popup .popup-code {width: 900px; height: 500px; margin-top: -250px; margin-left: -450px;}
/*web da print 용도*/
.layer-popup_print {position: fixed; top:0; left:0; right:0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 101; display: none;}
.layer-popup_print .popup {background:#fff; position: absolute; top: 0; left: 0; padding: 10px;}
.layer-popup_print .popup-print {position: absolute; bottom: 0; left: 0; right: 0;}
.layer-popup_print .popup-print ul {width: 100%; display: flex; display: -webkit-box; display: -ms-flexbox;}
.layer-popup_print .popup-print ul li {-webkit-box-flex: 1; -ms-flex:1; flex: 1; text-align: center;}
.layer-popup_print .popup-print ul li span {cursor: pointer; display: block; padding: 10px; transition: all 0.2s;}
.layer-popup_print .popup-print .save {background:#fff; border: 1px solid #d6d6d6;}
.layer-popup_print .popup-print .close {background:#d6d6d6; border: 1px solid #d6d6d6;}
.layer-popup_print .popup-print .save:hover {background: #00a9de; border: 1px solid #00a9de; color:#fff;}
.layer-popup_print .popup-print .close:hover {background:#c7c7c7; border: 1px solid #c7c7c7;}
.layer-popup_print .popup-print {width: 100%; height: 100%; margin-top: 0; margin-left: 0; overflow: auto;}
.layer-popup .popup-template {width: 900px; height: 500px; margin-top: -250px; margin-left: -450px;}
.layer-popup .popup-user .list-wrap {top: 60px;}
.layer-popup .popup-code .list-wrap {top: 60px;}
.layer-popup .popup-template .list-wrap {top: 130px; right: 570px;}
.layer-popup .popup-template .preview-area {position: absolute; right: 10px; left: 340px; top: 130px; bottom: 50px; border: 1px solid #e6e6e6; overflow: hidden;}
.layer-popup .popup-template .preview-area .inner {width: 1101px; height: 100%; position:  relative;}
.layer-popup .popup-template .preview-area iframe {width: 100%; height: 636px; border: 0; transform: scale(0.5); position: absolute; top: -159px; left: -278px;}
/* 수정 whshin
.layer-popup .popup-dept .list-wrap {top: 65px; padding: 10px;} */
.layer-popup .popup-dept .list-wrap {top: 10px; padding: 10px;}
.layer-popup .popup-dept .list-wrap > ul > li {margin: 10px 5px;}
.layer-popup .popup-dept .list-wrap > ul > li > p > span {color:#138de6;}
.layer-popup .popup-dept .list-wrap .ulload-file-btn {display: inline-block; cursor: pointer; background: #b3b3b3; color:#fff; border-radius: 3px; padding: 5px 10px;}
.layer-popup .popup-dept .list-wrap progress {width: 100%;}
.layer-popup .search-popup {width: 600px; height: 700px; margin-top: -350px; margin-left: -300px;}
.layer-popup .search-popup .list-wrap {top: 120px;}
.layer-popup .file-ctn {padding: 10px;}
.layer-popup .file-ctn .file-btn {display: inline-block; cursor: pointer; background: #b3b3b3; color:#fff; border-radius: 3px; padding: 10px 10px; width: 100%; text-align: center; transition: all 0.2s;}
.layer-popup .file-ctn .file-btn:hover {background: #00a9de;}
.layer-popup .file-ctn .file-list {margin-top: 10px;}
.layer-popup .file-ctn .file-list .list {position: relative; padding: 10px 45px 10px 10px; border: 1px solid #ccc; background:#fff; margin-top: 5px;}
.layer-popup .file-ctn .file-list p span {color:#4f4f4f;}
.layer-popup .file-ctn .file-list p span::before {content: '('}
.layer-popup .file-ctn .file-list p span::after {content: ')'}
.layer-popup .file-ctn .file-list .list .del {
    display: block;
    width: 40px;
    height: 41px;
    position: absolute;
    top:0;
    right: 0;
    cursor: pointer;
}
.layer-popup .file-ctn .file-list .list .del::before,
.layer-popup .file-ctn .file-list .list .del::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    margin-top: -1px;
    margin-left: -9px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    background:#333;
}
.layer-popup .file-ctn .file-list .list .del::before {transform: rotate(-45deg);}
.layer-popup .file-ctn .file-list .list .del::after {transform: rotate(45deg);}


/* 프로필추가 */
.popup-content {position: absolute; top: 55px; left:0; right:0; bottom: 41px; overflow: auto;}
.popup-content .desc {font-size: 13px; color: #ff4e4e; margin-top: 5px;}
.profile-edit .profile-thum {width: 80px; height: 80px; border-radius: 50%; background: #efefef; position: relative; margin: 60px auto 20px; display: flex; align-items: center; justify-content: center;}
.profile-edit .profile-thum img {width: 80px; border-radius: 50%; cursor: pointer;}
.profile-edit .profile-thum a {display: block; width: 25px; height: 25px; background:#454545 url('/images/ico_change.png') no-repeat center center; background-size: 15px; border-radius: 50%; position: absolute; right: -5px; bottom: 0;}
.profile-edit .row {padding: 30px 100px;}
.profile-edit .link {text-decoration: underline; color: #00a9de; font-size: 15px;}
.row .form-group {width: 100%;}
.row .form-group + .form-group {margin-top: 15px;}
.row .form-group .label {font-size: 14px; margin-bottom: 5px;}
.row .form-group input {padding: 10px; border: 1px solid #ddd; width: 100%;}
.row .form-group input:focus {border: 1px solid #00a9de;}
.row .form-group input:disabled {background:#f3f3f3;}
.layer-popup .small {transform: translate(-50%, -50%);width: 400px; height: 500px;}
.small .row {padding: 30px;}

/* 회원가입 */
.login-wrap .bottom-area .left {display: flex;}
.login-wrap .bottom-area .left > div + div {color:#fff; margin-left: 10px;}
.login-wrap .bottom-area .left a {display: inline-block; color:#fff; text-decoration: underline;}
.join-box {
    overflow: auto;
    padding: 40px;
    background:#fff;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
    -webkit-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
    -moz-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
    -ms-box-shadow: 0px 3px 12px 2px rgb(28, 67, 125);
}
.join-box .h2 {font-size: 30px; font-weight: 500; text-align: center;}
.join-box .h2 span {display: flex; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #c2c2c2; margin: 0 auto 10px; align-items: center; justify-content: center; color:#c2c2c2; font-size: 40px;}
.join-box .lang {display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.join-box .lang span {cursor: pointer; margin: 3px; text-decoration: underline; color:#999; display: block;}
.join-box .lang span.on {color: #00a9de;}
.join-box .btn-wrap {display: flex; justify-content: center; margin-top: 30px;}
.join-box .agree {margin-top: 20px;}
.join-box .agree textarea {height: 150px; background:#ddd;}
.join-box .desc {font-size: 20px;  margin: 20px 0;}
.join-box .desc span {color:#00a9de; font-weight: 500;}
.form-group .input-group {display: flex; align-items: center;}
.form-group input[type="checkbox"] {display: none;}
.form-group input[type="checkbox"] + label {display: inline-block; cursor: pointer; background: url('/images/ico_check01.png') no-repeat 0; line-height: 16px; padding-left: 20px; margin-right: 20px;}
.form-group input[type="checkbox"]:checked + label {background: url('/images/ico_check.png') no-repeat 0; line-height: 16px; padding-left: 20px;}

/*grid custom*/
.wj-cell select {background: url(/images/arrow02.png) no-repeat 93% center; border: 1px solid #d6d6d6; padding: 1.5px; width:100%;}
.wj-cell input[type="text"] {width: 100%;border:1px solid #d6d6d6;}
.wj-cell.wj-state-selected select {border: 1px solid #a1a1a1;}
.wj-cell .grid-pupup-btn {text-decoration: underline; cursor: pointer;}
.wj-cell .grid-pupup-btn::before {content:''; width: 15px; height: 15px; display: inline-block;vertical-align: middle;background: url(/images/ico_popup_1.png) no-repeat center center;}

/*jquery-ui custom*/
.ui-datepicker {z-index: 999 !important;}

/* 검색조건공통추가 */
.search-area .form-group input {padding: 7px 10px !important;}
.search-area .form-group > ul {display: flex; width: 100%;}
.search-area .form-group > ul > li {display: flex; align-items: center; flex: auto;}
.search-area .form-group > ul > li input + input {margin-left: 3px;}
.search-area .form-group > ul > li input {margin-left: 3px;}
.search-area .form-group .search-value {display: flex;}
.search-area .form-group .search-value li {display: flex; align-items: center;}
.search-area .form-group .search-value .search {position: relative; padding-right: 30px;}
.search-area .form-group .search-value .search .btn {
    width: 30px;
    bottom: 0;
    position: absolute; right:0; top:0;
    background-color: #e6e6e6;
    background-image: url('/images/ico03.png');
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    display: block;
    transition: all 0.2s;
}
.search-area .form-group .search-value .search .btn:hover {background-color: #bdbcbc;}
.search-area .form-group .swing {padding: 0 10px;}
.search-area .form-group .btn.default {
    width: 100%;
    display: flex;
    padding: 7px 10px 7px 33px;
    align-items: center;
    justify-content: center;
    background: #c2c2c2;
    color:#fff;
    cursor: pointer;
    background-image: url(/images/btn_style01.png);
    background-repeat: no-repeat;
    background-position: 10px -177px;
    white-space: nowrap;
    border-radius: 30px;
    margin-left: 5px;
    transition: all 0.2s;
}
.search-area .form-group .btn.default:hover {background-color: #00a9de;}

.ctn-section {position: absolute; top: 68px; left: 20px; right: 20px; bottom:30px; display: flex;}
.ctn-section .ctn-col {height: 100%; padding: 0 10px;}
.ctn-col .col-inner {
    width: 100%;
    height: 100%;
    background:#fff;
    box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -webkit-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -moz-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    -ms-box-shadow: 0px 3px 8px 1px rgba(181, 181, 181, 0.2);
    overflow: auto;
    /* padding: 20px; */
    /* 3px로 수정 whshin*/
    padding: 3px;
}
.ctn-section .ctn-col:last-child {position: relative;}
.ctn-section .ctn-col:last-child .col-inner {position: absolute; top: 0; left: 0; right: 0;  bottom: 50px; width: auto; height: auto;}
.ctn-section .ctn-col .send-btn-wrap {position: absolute; left: 0; bottom: 0; right: 0;}
.ctn-section .ctn-col .send-btn-wrap .btn-wrap {display: flex; width: 100%; margin-left: 0;}
.ctn-section .ctn-col .send-btn-wrap .btn-wrap li {width: 50%;}
.ctn-section .ctn-col .send-btn-wrap .btn-wrap li span {font-size: 15px; padding: 6px 20px; text-align: center; background-image: none;}
.ctn-section .ctn-col .send-btn-wrap .btn-wrap .btn-save {background: #00a9de;}
.ctn-section .ctn-col .send-btn-wrap .btn-wrap .btn-save:hover {background: #3767e4;}

.ctn-col {margin-top: 10px;}
.ctn-col.divide .input-area {display: flex; flex-wrap: wrap;}
.ctn-col.divide .input-area .form-group {padding: 5px;}
.ctn-col.divide .input-area .form-group .form {display: flex;}
.ctn-col.divide .input-area .form-group .form > div + div,
.ctn-col.divide .input-area .form-group .form > div + input,
.ctn-col.divide .input-area .form-group .form > div + ul {margin-top: 0;}
.ctn-col.divide .input-area .form-group + .form-group {margin-top: 0;}
.ctn-col .col-inner.col-4 .form-group {width: 25%;}
.ctn-col .col-inner.col-5 .form-group {width: 30%;}
.ctn-col .col-inner.col-6 .form-group {width: 35%;}

.input-area .form-group + .form-group {margin-top: 10px;}
.input-area .form-group input[type="text"],
.input-area .form-group input[type="number"] {width: 100%; transition: all 0.2s; background: #f3f3f3; border: 1px solid #f3f3f3; padding: 7px 10px 8px;}
.input-area .form-group input[type="text"]:focus,
.input-area .form-group input[type="number"]:focus,
.input-area .form-group select:focus {border: 1px solid #00a9de;}
.input-area .form-group select {
    width: 100%;
    border: 1px solid #f3f3f3;
    background-color:#f3f3f3;
    padding: 7px 20px 8px 10px;
    background-image: url("/images/arrow02.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s;
    height: 35px;
}
.input-area .form-group .label {width: 100%; font-size: 12px; color:#177694; margin-bottom: 3px;}
.input-area .form-group .form > div + div,
.input-area .form-group .form > div + input,
.input-area .form-group .form > div + ul {margin-top: 3px;}
.input-area .form-group .date {padding-right: 30px; background: #f3f3f3 url(/images/ico05_calendar.png) no-repeat right center}
.input-area .form-group .search {position: relative; padding-right: 30px;}
.input-area .form-group .search .btn {
    width: 30px;
    position: absolute; right:0; top:0; bottom:0;
    background-color: #e6e6e6;
    background-image: url('/images/ico03.png');
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    display: block;
    transition: all 0.2s;
}
.input-area .form-group .search .btn:hover {background-color: #bdbcbc;}
.input-area .form-group .btn.default {
    width: 100%;
    display: flex;
    padding: 7px 10px 7px 33px;
    align-items: center;
    justify-content: center;
    background: #c2c2c2;
    color:#fff;
    cursor: pointer;
    background-image: url(/images/btn_style01.png);
    background-repeat: no-repeat;
    background-position: 10px -177px;
    white-space: nowrap;
    border-radius: 30px;
    transition: all 0.2s;
}
.input-area .form-group .btn.default:hover {background-color: #00a9de;}
.input-area .form-group ul {display: flex; width: 100%;}
.input-area .form-group ul li {flex: 1; display: flex; align-items: center;}
.input-area .form-group ul li .swing {padding: 0 5px;}
.input-area .form-group ul li + li {margin-left: 3px;}
.ctn-section .ctn-col .col-title {font-size: 16px; text-transform: uppercase; position: relative; display: inline-block; padding-right: 15px;}
.ctn-section .ctn-col .col-title mark {position: relative; z-index: 1;}
.ctn-section .ctn-col .col-title::before {content: ''; display: block; width: 100%; height: 5px; background: #84d0f5; position: absolute; bottom:4px; left:0;}
.ctn-section .ctn-area {position: relative;}
.ctn-section .ctn-area .ctn-wrap {position: absolute; top: 50px; left:0; right:0; bottom:0; padding: 20px; overflow: auto;}
.ctn-section .ctn-area .ctn-box {border: 1px solid #ccc;}
.ctn-section .ctn-area .ctn-box:hover {border: 1px solid #15a4d6;}
.ctn-section .ctn-area .ctn-box + .ctn-box {margin-top: 15px;}
.ctn-section .ctn-area .ctn-box .title {width: 100%; padding: 10px; font-size: 15px; color:#15a4d6; border-bottom: 1px solid #15a4d6;}
.ctn-section .ctn-area .ctn-box.fold .title {
    cursor: pointer;
    padding-right: 50px;
    position: relative;
}
.ctn-section .ctn-area .ctn-box.fold .title::after {
    content: '';
    display: block;
    width: 15px; height: 8px;
    background: url('/images/arrow07.png') no-repeat center center;
    position: absolute;
    right: 10px; top: 17px;
    transform: rotate(180deg);
    transition: all 0.2s;
}
.ctn-section .ctn-area .ctn-box.fold .title.on::after {transform: rotate(0deg);}
/* .ctn-section .ctn-area .ctn-box.fold .ctn {display: none;} */
.ctn-section .ctn-area table {width: 100%;}
.ctn-section .ctn-area table th,
.ctn-section .ctn-area table td {border-top: 1px solid #ccc; padding: 5px 10px;}
.ctn-section .ctn-area table input {border: 1px solid #ccc; padding: 1px 5px; font-size: 13px; width: 100%; text-align: right;}
.ctn-section .ctn-area .total table th,
.ctn-section .ctn-area .total table td {background: #dfefff;}
.ctn-section .btn-wrap {display: flex; flex-wrap: wrap;}
.ctn-section .btn-wrap li {padding: 3px; margin-left: 0;}
.ctn-col .col-inner.col-2 .form-group {width: 50%;}
.ctn-col .col-inner.col-3 .form-group {width: 33.3333%;}
.ctn-col .col-inner.col-5 .form-group {width: 20%;}
.ctn-col {position: relative;}
/* 수정 whshin
.ctn-col.search .col-inner {display: flex; flex-wrap: wrap; padding: 20px 65px 20px 20px !important;} */
.ctn-col.search .col-inner {display: flex; flex-wrap: wrap; padding: 5px 5px 5px 5px !important;}
.ctn-col.search .search-btn-wrap  {position: absolute; right: 20px; bottom: 20px;}
.ctn-col.search .search-btn-wrap .search {
  display: block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s;
  box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -webkit-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -moz-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  -ms-box-shadow: 0px 4px 7px 1px rgba(181, 181, 181, 0.4);
  background-color:#f3f3f3;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('/images/ico02.png');
}
.ctn-col.search .search-btn-wrap .search:hover {background-color: #00a9de; background-image: url('/images/ico03.png');}

/* 수정 WHSHIN */
/* .ctn-col.divide .col-inner {padding: 20px;} */
.ctn-col.divide .col-inner {padding: 5px;}
.input-area .form-group .search {width: 100%;}
.ctn-section .ctn-col:last-child .col-inner,
.ctn-section .ctn-col .send-btn-wrap {left: 10px; right: 10px;}