@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* -----------------------------------
    common
----------------------------------- */
/*body {font-family: '맑은 고딕', dotum, sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: -.05em; color: #222;}*/
body, table, th, td {font-family: 'Noto Sans KR', '맑은 고딕', dotum, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: -.06em;font-weight: 400;color: #2E2E2E;}
input, textarea, select, button {height: 26px; padding: 0 5px; border: 1px solid #ddd; background-color: #fff; letter-spacing: -.05em;}
input:focus, textarea:focus, select:focus, button:focus {outline: 0;}
select {min-width: 120px; padding: 0;}

/* -----------------------------------
    layout
----------------------------------- */
.mcd-wrap {min-width: 1400px; /* height: 100%; */}

.header {position: relative; height: 80px; border-bottom: 3px solid #d9e6f1;}
.header:before, .header:after {content: ''; display: table; clear: both;}
.header .logo {float: left; position: relative; width: 250px; height: 100%;}
.header .logo > a {position: absolute; top: 4px; left: 22.5%; display: block; width: 150px; height: 53px; background: url(/images/mcd/logo.jpg) no-repeat center center;}
.header .gnb {position: relative; height: 100%;}
.header .gnb .nav {float: left; padding-left: 20px;}
.header .gnb .nav > li {float: left; line-height: 76px;}
.header .gnb .nav > li ~ li {margin-left: 45px;}
.header .gnb .nav > li > a {font-size: 16px; font-weight: bold;}
.header .gnb .nav > li > .btn-lnb {display: block; width: 20px; height: 16px; margin-top: 33px; background: url(/images/mcd/btn_gnb.png) no-repeat center center;}

.user-group {position: absolute; top: 0; right: 0;}
.user-group:before, .user-group:after {content: ''; display: table; clear: both;}
.user-group > li {float: left;}
.user-group > li a, .user-group > li span {display: block; padding: 5px 15px 8px;}
/* .user-group > li .logout {padding-left: 30px; background: #f4f4f4 url(/images/mcd/btn_logout.png) no-repeat 15px 8px; font-weight: bold;} */
/* .user-group > li .user-type {min-width: 125px; padding-right: 30px; background: #d9e6f1 url(/images/mcd/btn_dropdown.png) no-repeat right 15px center; fon */t-weight: bold; cursor: pointer;}
.user-group > li .dropdown {z-index: 1000; display: block; position: absolute; right: 0; min-width: 125px; border: 1px solid #d9e6f1; background-color: #fff;}
.user-group > li .dropdown > li ~ li {border-top: 1px solid #ddd;}
.user-group > li .dropdown > li a {background: #fff;}
.user-group > li .dropdown > li a:hover {background: #f4f4f4;}

.container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: calc(100vh - 80px);}

/*.lnb {width: 250px; overflow-y: auto; border-right: 1px solid #ddd;}
.lnb .one-depth {height: 55px; padding-top: 15px; background-color: #d9e6f1; font-size: 16px; font-weight: bold; text-align: center;}
.lnb .nav .two-depth > li > a {display: block; padding: 12px 15px 15px 45px; border-bottom: 1px solid #e4e4e4; background: url(/images/mcd/bullet_ham.png) no-repeat 20px 18px; font-size: 14px; font-weight: bold;}
.lnb .nav .two-depth > li > a:hover {background-image: url(/images/mcd/bullet_ham_active.png);}
.lnb .nav .two-depth > li > a.active {background-image: url(/images/mcd/bullet_ham_active.png);}
.lnb .nav .two-depth > li .three-depth {display: none; padding: 15px 0; border-bottom: 1px solid #e4e4e4; background-color: #f6f6f6;}
.lnb .nav .two-depth > li .three-depth.active {display: block;}
.lnb .nav .two-depth > li .three-depth > li {position: relative;}
.lnb .nav .two-depth > li .three-depth > li:hover {background-color: #eaeaea;}
.lnb .nav .two-depth > li .three-depth > li > a {display: block; padding: 5px 8px 8px 45px;}
.lnb .nav .two-depth > li .three-depth > li > a.active {background-color: #eaeaea; font-weight: bold;}
.lnb .nav .two-depth > li .three-depth > li > a.new-tab {position: absolute; top: 9px; right: 15px; width: 12px; height: 12px; padding: 0; background: url(/images/mcd/btn_newtab.png) no-repeat;}*/

.leftToggle.toggle{width:0px;}

.content {-webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: hidden;}
.content .page-title {font-size: 16px; font-weight: bold;}

/* -----------------------------------
    contents
----------------------------------- */
.contents-wrap {padding: 20px;}

.page-top-group {position: relative; margin-bottom: 12px;}
.page-top-group:before, .page-top-group:after {content: ''; display: table; clear: both;}
.page-top-group .page-title {float: left; display: block; font-size: 16px; font-weight: bold;}
.page-top-group .page-title > label {font-weight: bold;}
.page-top-group .search-btn {display: block; position: absolute; right: 0; min-width: 44px; height: 26px; padding: 4px 10px; border-radius: 2px; background: #666; line-height: 16px; color: #fff;}


.searchbox {padding: 5px; border: 1px solid #ddd; background-color: #f6f6f6;}
.searchbox table {border-collapse: separate; border-spacing: 5px;}
.searchbox table .search-btn {display: block; position: absolute; top: 0; right: 0; min-width: 44px; height: 26px; padding: 4px 10px; border-radius: 2px; background: #666; line-height: 16px; color: #fff;}
.searchbox table .search-btn > label {cursor: pointer;}
.searchbox table .search-btn-01 {display: block; position: absolute; top: 0; right: 58px; min-width: 44px; height: 26px; padding: 4px 10px; border-radius: 2px; background: #d9e6f1; line-height: 16px; color: #fff;}
.searchbox table .search-btn-01 > label {cursor: pointer;color: #222;}

.titlebox {position: relative; margin: 20px 0 12px;}
.titlebox:before, .titlebox:after {content: ''; display: table; clear: both;}
.titlebox .page-subtitle {float: left; width: 30%; font-size: 16px;}
.titlebox .page-subtitle > label {font-weight: bold;}
.titlebox .btn-group {float: right; width: 70%; text-align: right;}
.titlebox .btn-group li {float: right; margin-left: 5px;}
/*.titlebox .btn-group li > a {display: block; height: 26px; padding: 4px 10px; border-radius: 2px; /background: #d9e6f1;/ background:rgba(183, 156, 129, 0.5019607843137255);font-weight:bold; line-height: 16px;}*/
.titlebox .btn-group li.special > a {background: #d9e6f1;}



.btn-group {float: right; width: 50%; text-align: right;}
.btn-group li {float: right; margin-left: 5px;}
.btn-group li > a {display: block; height: 26px; padding: 4px 10px; border-radius: 2px; background: #d9e6f1; line-height: 16px;}


.mcd-btn {display: block; height: 26px; padding: 4px 10px; border: 0; border-radius: 2px; background: #d9e6f1; line-height: 16px;}

.tbtn-down {display: inline-block; vertical-align: middle;}
.tbtn-down > li {float: left;}
.tbtn-down > li > a {display: block; width: 27px; height: 26px; border-radius: 2px; background: #ffc000 url(/images/mcd/btn_download.png) no-repeat center; font-size: 0;}

/* .table01 th > label, .table01 td > label, .table02 th > label, .table02 td > label {padding: 0 17px;} */

.table01.contentsBox .table01.contentsBox {width: 100%; margin-top: 5px; border: 1px solid #ddd;}
.table01.contentsBox .table01.contentsBox td {text-align: center;}

/* -----------------------------------
    grid custom
----------------------------------- */
.ui-widget {font-family: inherit; font-size: inherit;}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {min-width: auto; font-family: inherit; font-size: inherit;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border: 0; background: none; color: #222;}

.slick-header {border-bottom: 1px solid #ddd;}
.slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default {border-right: 1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.slick-header-column > input[type="checkbox"] {position: absolute; top: 6px; left: 8px; width: 13px; height: 13px; margin: 0;}
.slick-row.ui-widget-content, .slick-row.ui-state-active {border-bottom: 1px solid #e4e4e4;}
.ui-widget-content.slick-row.active {background-color: #fffbeb;}
.slick-cell, .slick-headerrow-column, .slick-footerrow-column {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-right: 1px dotted #ddd;}
.slick-cellcheckbox-container > input[type="checkbox"] {position: absolute; top: 6px; left: 8px; width: 13px; height: 13px; margin: 0;}
/* .slick-cell > input[type="text"], .slick-cell > select {width: calc(100% + 12px); height: 25px; margin-top: 0px; margin-left: 0px; padding: 0; border: 0; background-color: transparent;} */
.slick-cell > input[type="text"], .slick-cell > select {width: calc(100% -1px); height: 25px; margin-top: 0px; margin-left: 0px; padding: 0; border: 0; background-color: transparent;}
.slick-cell > input[type="text"]:focus, .slick-cell > select:focus {outline: none;}
.slick-cell > .editor-text + .datepicker-btn {position: absolute; top: 3px; right: 7px;}
.slick-cell.selected {background-color: #9a6b6b2e;}
.slick-cell.active {border-color: #d9e6f1;}

.slick-columnpicker {padding: 8px 12px 10px; border-radius: 4px; background: #2b3033; color: #fff;}
.slick-columnpicker:before {content: ''; display: block; position: absolute; top: -10px; left: -6px; width: 10px; height: 10px; border: 10px solid transparent; border-top-color: #2b3033; transform: rotate(-135deg);}
.slick-columnpicker li {list-style: none;}
.slick-columnpicker li ~ li {margin-top: 5px; padding-top: 5px; border-top: 1px solid #313639;}
.slick-columnpicker li input[type="checkbox"] {margin-right: 5px;}
.slick-columnpicker hr {border-bottom: 0;}
.slick-columnpicker hr + li {margin-top: 0; padding-top: 0; border-top: 0;}

.slick-cell-btn {padding: 1px 5px 1px; border: 0; background: #d9e6f1;}

.slick-footerrow-column.ui-state-default {border-right-color: #ddd;}

#divGrid01, #divGrid02, #divDtlGrid01, #grdInputVars, #grdOutputVars, #grdFuncs, .slick-grid-container {border: 1px solid #ddd; border-top: 2px solid #d9e6f1; cursor: default;}

/* -----------------------------------
    main
----------------------------------- */
.inner {position: relative; width: 1200px; margin: 0 auto; padding: 0 15px;}
.inner:before, .inner:after {content: ''; display: table; clear: both;}

.main-header {position: relative; border-bottom: 1px solid #ddd;}
.main-header .top {height: 31px; background: #d9e6f1;}
.main-header .top .user-group > li .logout {background-color: transparent;}
.main-header .top .user-group > li .user-type {background-color: transparent;}
.main-header .gnb {position: relative;}
.main-header .gnb .logo > a {display: block; position: absolute; top: 22px; width: 150px; height: 53px; background: url(/images/mcd/logo.jpg) no-repeat center center;}
.main-header .gnb .nav {width: 100%; text-align: center;}
.main-header .gnb .nav > li {display: inline-block; position: relative; width: 135px; line-height: 80px;}
.main-header .gnb .nav > li > a {font-size: 16px; font-weight: bold;}
.main-header .gnb .nav > li > .btn-lnb {display: block; width: 20px; height: 16px; margin-top: 33px; background: url(/images/mcd/btn_gnb.png) no-repeat center center;}
.main-header .gnb .nav > li .two-depth {z-index: 100; display: none; position: absolute; top: 0; left: 0; width: 100%; margin-top: 81px; padding-bottom: 10px; border: 1px solid #ddd; border-top-color: #fff; background-color: #fff;}
.main-header .gnb .nav > li .two-depth > li {padding: 5px 15px; line-height: 1.5; text-align: left;}
.main-header .gnb .nav > li .two-depth > li > a {padding-bottom: 1px;}
.main-header .gnb .nav > li .two-depth > li > a:hover {border-bottom: 1px solid #d9e6f1;}
.main-header .gnb .nav > li:hover .two-depth {display: block;}
.main-header .gnb .open-all {display: block; position: absolute; top: 32px; right: 15px; width: 20px; height: 16px; background: url(/images/mcd/btn_gnb.png) no-repeat; cursor: pointer;}
.main-header .gnb .all-menu {z-index: 101; position: absolute; top: 81px; width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff;}
.main-header .gnb .all-menu .menu-group {display: table; table-layout: fixed; width: 100%;}
.main-header .gnb .all-menu .menu-group > li {display: table-cell; position: relative; padding-top: 30px; padding-left: 30px; padding-right: 20px; border-right: 1px solid #ddd;}
.main-header .gnb .all-menu .menu-group > li:first-child {border-left: 1px solid #ddd;}
.main-header .gnb .all-menu .menu-group > li:hover {background-color: #fafafa;}
.main-header .gnb .all-menu .menu-group > li:hover:before {content: ''; display: block; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background-color: #d9e6f1;}
.main-header .gnb .all-menu .menu-group > li > a {font-size: 16px; font-weight: bold;}
.main-header .gnb .all-menu .menu-group > li > .two-depth {padding: 15px 0 60px;}
.main-header .gnb .all-menu .menu-group > li > .two-depth > li ~ li {margin-top: 10px;}
.main-header .gnb .all-menu .menu-group > li > .two-depth > li > a {display: block; position: relative; padding-left: 6px; font-size: 13px; color: #666;}
.main-header .gnb .all-menu .menu-group > li > .two-depth > li > a:before {content: ''; position: absolute; top: 9px; left: 0; width: 2px; height: 2px; background-color: #aaa;}
.main-header .gnb .all-menu .menu-group > li > .two-depth > li > a:hover {color: inherit;}

.row {margin: 0 -20px; padding: 30px 0;}
.row:before, .row:after {content: ''; display: table; clear: both;}
.row .col {float: left; width: 33.33333333%;}
.row .col .box {position: relative; padding: 20px 0;}
.row .col .box:first-child {padding-top: 0;}
.row .col .box ~ .box:after {content: ''; display: block; position: absolute; top: 0; width: 100%; height: 1px; background-color: #ddd;}
.row .col .box .box-inner {position: relative; height: 210px; padding: 5px 20px;}
.row .col .box.x2 .box-inner {height: 460px;}
.row .col ~ .col .box .box-inner:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #ddd;}
.row .col .box .box-title {position: relative; font-size: 18px; font-weight: bold; margin-bottom: 25px;}
.row .col .box .box-title a.edit {display: block; position: absolute; bottom: 0; right: 0; padding: 0 5px 2px; border: 1px solid #b79c81; border-radius: 5px; font-size: 13px; font-weight: normal; transition: .1s;}
.row .col .box .box-title a.edit:hover {background-color: #b79c81; color: #fff;}

.row .col-3 {float: left; width: 25%;}
.row .col-6 {float: left; width: 50%;}
.row .col-3 .box, .row .col-6 .box {float: left; padding: 10px;}
.row .col-3 .box {width: 100%;}
.row .col-3 .box .box-inner, .row .col-6 .box .box-inner {position: relative; width: 100%; height: 280px; padding: 32px 30px 40px; cursor: default;}
.row .col-3 .box .box-inner strong, .row .col-6 .box .box-inner strong {font-size: 23px; font-weight: bold;}
.row .col-3 .box .box-inner .link, .row .col-6 .box .box-inner .link {display: block; position: absolute; left: 30px; bottom: 40px; padding-right: 16px; font-size: 16px; font-weight: bold;}
.row .col-3 .box .box-inner.red {background-image: url(/images/mcd/bg_box-1.png); background-position: bottom right; background-repeat: no-repeat; background-color: #db0008; color: #fff;}
.row .col-3 .box .box-inner.red .link:after {content: ''; display: block; position: absolute; top: 7px; right: 0; width: 6px; height: 11px; background: url(/images/mcd/btn_link_w.png) no-repeat;}
.row .col-3 .box .box-inner.yellow {background-color: #ffbc0d; color: #fff;}
.row .col-3 .box .box-inner.yellow > span {display: block; width: 140px; height: 140px; margin: 28px auto 0; border: 20px solid #f5b50c; border-radius: 50%; background-color: #ebae0c; font-size: 55px; font-weight: bold; line-height: 1.7; text-align: center;}
.row .col-6 .box .box-inner.charcoal {background-image: url(/images/mcd/bg_box-2.png); background-position: bottom right; background-repeat: no-repeat; background-color: #2e2e2e; color: #fff;}
.row .col-6 .box .box-inner.charcoal .link:after {content: ''; display: block; position: absolute; top: 7px; right: 0; width: 6px; height: 11px; background: url(/images/mcd/btn_link_w.png) no-repeat;}
.row .col-6 .box .box-inner.lgray {padding: 22px 20px 30px; border: 10px solid #eee; background-image: url(/images/mcd/bg_box-3.png); background-position: bottom -10px right -10px; background-repeat: no-repeat;}
.row .col-6 .box .box-inner.lgray .link {left: 20px; bottom: 30px;}
.row .col-6 .box .box-inner.lgray .link:after {content: ''; display: block; position: absolute; top: 7px; right: 0; width: 6px; height: 11px; background: url(/images/mcd/btn_link.png) no-repeat;}
.row .col-6 .box .box-inner.lgray-2 {padding-bottom: 30px; background-color: #eee;}
.row .col-6 .box .box-inner.lgray-2 .notice-list {height: 160px; overflow: auto; margin-top: 25px;}
.row .col-6 .box .box-inner.lgray-2 .notice-list li {padding: 12px 18px; border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .05); background-color: #fff; font-size: 14px;}
.row .col-6 .box .box-inner.lgray-2 .notice-list li ~ li {margin-top: 10px;}
.row .col-6 .box .box-inner.lgray-2 .notice-list li > a {display: table; width: 100%;}
.row .col-6 .box .box-inner.lgray-2 .notice-list li > a .text {display: table-cell; width: 80%;}
.row .col-6 .box .box-inner.lgray-2 .notice-list li > a .date {display: table-cell; width: 20%; text-align: right; color: #666;}
.row .col-3 .box .box-inner.kraft {background-image: url(/images/mcd/bg_box-4.png); background-position: top right; background-repeat: no-repeat; background-color: #b79c81; color: #fff;}
.row .col-3 .box .box-inner.kraft .fav-menu {position: absolute; left: 30px; bottom: 30px; width: calc(100% - 60px);}
.row .col-3 .box .box-inner.kraft .fav-menu > a {display: block; position: relative; padding: 13px 0 15px; font-size: 16px; font-weight: bold;}
.row .col-3 .box .box-inner.kraft .fav-menu > a ~ a {border-top: 1px solid #c9b5a1;}
.row .col-3 .box .box-inner.kraft .fav-menu > a:after {content: ''; display: block; position: absolute; top: 21px; right: 0; width: 6px; height: 11px; background: url(/images/mcd/btn_link_w.png) no-repeat;}
.row .col-3 .box .box-inner.kraft .btn-setting {display: block; position: absolute; top: 40px; right: 30px; width: 22px; height: 22px; background: url(/images/mcd/btn_setting.png) no-repeat; cursor: pointer;}
.row .col-3 .box .box-inner.kraft .fav-setting {z-index: 1; display: block; position: absolute; width: calc(100% - 60px); height: 450px; margin-top: 15px; padding: 10px 15px 45px; border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); background-color: #fff; color: #666;}
.row .col-3 .box .box-inner.kraft .fav-setting:before {content: ''; display: block; position: absolute; top: -4px; right: 8px; width: 8px; height: 8px; background-color: #fff; transform: rotate(-135deg);}
.row .col-3 .box .box-inner.kraft .fav-setting ul {height: 390px; overflow: auto;}
.row .col-3 .box .box-inner.kraft .fav-setting li > label:hover {color: #333;}
.row .col-3 .box .box-inner.kraft .fav-setting .btn-save {text-align: center;}
.row .col-3 .box .box-inner.kraft .fav-setting .btn-save > a {display: inline-block; padding: 3px 8px 5px; border-radius: 5px; background-color: #b79c81; color: #fff;}
.row .col-6 .box {width: 50%;}
.row .col-6 .box.h-two {width: 100%;}
.row .col-3 .box.v-two .box-inner {height: 580px;}

.user-box {padding-top: 15px; padding-left: 30px;}
.user-box .user-img {float: left; position: relative; width: 100px; height: 100px; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 999em;}
.user-box .user-img img {position: absolute; top: -15%; width: 100px;}
.user-box .user-info {float: left; margin-top: 5px; margin-left: 30px;}
.user-box .user-info span {display: block; font-size: 14px;}
.user-box .user-info .user-name {margin-bottom: 10px; font-size: 18px; font-weight: bold;}

.my-menu-box .my-menu {display: block; height: 60px;}
.my-menu-box .my-menu ~ .my-menu {margin-top: 15px;}
.my-menu-box .my-menu li {float: left; width: 47.5%;}
.my-menu-box .my-menu li ~ li {margin-left: 15px;}
.my-menu-box .my-menu li a {display: block; padding: 20px 0; border-radius: 5px; background-color: #eee; font-size: 14px; font-weight: bold; text-align: center; transition: .1s;}
.my-menu-box .my-menu li a:hover {background-color: #b79c81; color: #fff;}

.leave-box .leave-graph {position: relative; overflow: hidden;}
.leave-box .leave-graph ~ .leave-graph {margin-top: 15px;}
.leave-box .leave-graph .graph {float: left; position: relative; width: 50%; height: 45px; overflow: hidden; border-radius: 999em; background-color: #eee;}
.leave-box .leave-graph .graph .bar {display: block; width: 0%; height: 45px; background-color: #d9e6f1;}
.leave-box .leave-graph .graph .percent {position: absolute; top: 8px; left: 25px; font-size: 18px;}
.leave-box .leave-graph .graph-info {float: left; width: 50%; padding-left: 25px;}
.leave-box .leave-graph .graph-info span {display: block; font-size: 20px; line-height: 1.4;}
.leave-box .leave-graph .graph-info .graph-title {font-size: 14px;}

.leave-box .leave-graph.only {margin-bottom: 25px; padding-left: 45px;}
.leave-box .leave-graph.only .graph {height: 75px;}
.leave-box .leave-graph.only .graph .bar {height: 75px;}
.leave-box .leave-graph.only .graph .percent {top: 22px;}
.leave-box .leave-graph.only .graph-info {padding-top: 10px; padding-left: 35px;}
.leave-box .leave-graph.only .graph-info span {line-height: 1.5;}

.leave-box .leave-info {width: 100%; margin-top: 20px; text-align: center;}
.leave-box .leave-info .legend {display: inline-block;}
.leave-box .leave-info .legend .icon {display: inline-block; width: 18px; height: 10px; border-radius: 999em; background-color: #eee;}
.leave-box .leave-info .legend .text {margin-left: 5px; font-size: 14px;}
.leave-box .leave-info .legend.used {margin-right: 15px;}
.leave-box .leave-info .legend.used .icon {background-color: #d9e6f1;}

.hr-box .hr-list {float: left; display: block; width: 33.33333333%; text-align: center;}
.hr-box .hr-list span {display: inline-block; font-size: 14px;}
.hr-box .hr-list .title {padding: 4px 15px 6px; border: 1px solid #ffb81c; border-radius: 999em; font-weight: bold;}
.hr-box .hr-list .icon {display: block; width: 55px; height: 55px; margin: 18px auto 15px; background-size: cover;}
.hr-box .hr-list.approval-1 .icon {background-image: url(/images/mcd/icon_011.png);}
.hr-box .hr-list.approval-2 .icon {background-image: url(/images/mcd/icon_012.png);}
.hr-box .hr-list.approval-3 .icon {background-image: url(/images/mcd/icon_013.png);}
.hr-box .hr-list.news-1 .icon {background-image: url(/images/mcd/icon_014.png);}
.hr-box .hr-list.news-2 .icon {background-image: url(/images/mcd/icon_015.png);}
.hr-box .hr-list.news-3 .icon {background-image: url(/images/mcd/icon_016.png);}

.academy-box li {overflow: hidden; font-size: 14px; line-height: 1.2;}
.academy-box li ~ li {margin-top: 15px;}
.academy-box li a {float: left; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.academy-box li a:hover {text-decoration: underline;}
.academy-box li .date {float: left; width: 20%; text-align: right; color: #666;}

.admin-menu-box .admin-menu {display: block; height: 55px; padding: 15px; padding-left: 80px; background-repeat: no-repeat; background-size: contain; background-position: center left; font-size: 14px; transition: .1s;}
.admin-menu-box .admin-menu:hover {text-decoration: underline;}
.admin-menu-box .admin-menu ~ .admin-menu {margin-top: 20px;}
.admin-menu-box .admin-menu.menu-1 {background-image: url(/images/mcd/icon_021.png);}
.admin-menu-box .admin-menu.menu-1:hover {background-image: url(/images/mcd/icon_021_1.png);}
.admin-menu-box .admin-menu.menu-2 {background-image: url(/images/mcd/icon_022.png);}
.admin-menu-box .admin-menu.menu-2:hover {background-image: url(/images/mcd/icon_022_1.png);}
.admin-menu-box .admin-menu.menu-3 {background-image: url(/images/mcd/icon_023.png);}
.admin-menu-box .admin-menu.menu-3:hover {background-image: url(/images/mcd/icon_023_1.png);}

.site-box .site-list {float: left; display: block; width: 25%; height: 110px; padding-top: 62px; border: 1px solid #b79c81; border-left-width: 0; background-repeat: no-repeat; background-position: center 23px; font-size: 14px; text-align: center; transition: .1s;}
.site-box .site-list:first-child {border-left-width: 1px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.site-box .site-list:last-child {border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.site-box .site-list:hover {background-color: #b79c81;}
.site-box .site-list.site-1 {padding-top: 55px; background-image: url(/images/mcd/icon_031.png); line-height: 1.3; letter-spacing: 0;}
.site-box .site-list.site-1:hover {background-image: url(/images/mcd/icon_031_1.png); color: #fff;}
.site-box .site-list.site-2 {background-image: url(/images/mcd/icon_032.png);}
.site-box .site-list.site-2:hover {background-image: url(/images/mcd/icon_032_1.png); color: #fff;}
.site-box .site-list.site-3 {background-image: url(/images/mcd/icon_033.png);}
.site-box .site-list.site-3:hover {background-image: url(/images/mcd/icon_033_1.png); color: #fff;}
.site-box .site-list.site-4 {background-image: url(/images/mcd/icon_034.png); letter-spacing: 0;}
.site-box .site-list.site-4:hover {background-image: url(/images/mcd/icon_034_1.png); color: #fff;}

.main-footer {padding-top: 15px; border-top: 1px solid #ddd;}
.main-footer p {font-size: 13px; text-align: center; letter-spacing: 0; color: #888;}


/**
calendar 추가
**/

input.calendar_input {width:82px; text-align: center;}

/* -----------------------------------
    grid formatter column color
----------------------------------- */
.grid-col-sat{color:red;z-index:-1;}
.grid-col-sun{color:red;z-index:-1;}

.modal {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; outline: 0; background-color: rgba(0, 0, 0, .5);}
.modal-dialog {position: relative; width: 850px; margin: 90px auto;}
.modal-content {width: 100%; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; background-color: #fff; font-size: 14px;}
.modal-header {padding: 20px; border-bottom: 1px solid #e4e4e4;}
.modal-title {position: relative; font-size: 18px; font-weight: bold;}
.modal-title .close {display: block; position: absolute; top: 5px; right: 0; width: 16px; height: 16px; background: url(/images/mcd/btn_close.png) no-repeat; cursor: pointer;}
.modal-body {padding: 20px;}
.modal-body hr {margin: 20px 0; border: 0; border-top: 1px dotted #e4e4e4;}
.modal-body select {height: auto; padding-bottom: 5px; border: 0;}
.modal-footer {padding: 20px; border-top: 1px solid #e4e4e4; text-align: right;}
.modal-footer button {height: auto; padding: 5px 10px; border: 0; border-radius: 2px; background-color: #ffc000;}

.menu-setting {display: table; width: 100%;}
.menu-setting .content {display: table-cell; width: 50%;}
.menu-setting .content:nth-child(1) {padding-right: 10px;}
.menu-setting .content:nth-child(2) {padding-left: 10px;}
.menu-setting .content h4 {position: relative; margin-bottom: 10px; padding-left: 12px; font-weight: bold;}
.menu-setting .content h4:before {content: '•'; display: block; position: absolute; top: 0; left: 0; color: #ffc000;}
.menu-setting .menu-list {height: 400px; overflow-y: auto; padding: 15px; background-color: #f6f6f6;}
.menu-setting .menu-list a {display: block;}
.menu-setting .menu-list .level-1 {border-radius: 5px; background-color: #eee;}
.menu-setting .menu-list .level-1 > a {padding: 8px 12px 10px; font-weight: bold;}
.menu-setting .menu-list .level-1 ~ .level-1 {margin-top: 10px;}
.menu-setting .menu-list .level-2 {padding: 8px 20px 10px; border-top: 1px solid #ddd; font-size: 12px;}
.menu-setting .menu-list .level-2 li ~ li {margin-top: 5px;}
.menu-setting .menu-list .level-3 > a {position: relative; padding-left: 12px; color: #666;}
.menu-setting .menu-list .level-3 > a:hover {text-decoration: underline;}
.menu-setting .menu-list .level-3 > a:before {content: ''; display: block; position: absolute; top: 6px; left: 3px; width: 6px; height: 6px; border-left: 1px solid #bbb; border-bottom: 1px solid #bbb;}
.menu-setting .menu-list .select-list li {display: table; width: 100%; padding: 8px 12px 10px; border-radius: 5px; background-color: #eee; font-weight: bold;}
.menu-setting .menu-list .select-list li ~ li {margin-top: 10px;}
.menu-setting .menu-list .select-list li a {display: table-cell; width: 95%;}
.menu-setting .menu-list .select-list li .delete {display: table-cell; width: 5%; background: url(/images/mcd/btn_delete.png) no-repeat center center; cursor: pointer;}


#self-wrap {padding: 25px 0px 0px;}
.page-info {margin-bottom: 20px; border-bottom: 1px solid #f0f0f0;}
.page-info .page-info-title {display: table; position: relative; width: 100%; margin-bottom: 20px;}
.page-info .page-info-title h2 {display: table-cell; width: 50%; padding-left: 18px; font-size: 16px; vertical-align: top;}
.page-info .page-info-title h2:before {content: ''; display: block; position: absolute; top: 7px; left: 0; width: 12px; height: 12px; border: 3px solid #c3a279;}
.page-info .page-info-title h2 > label {position: relative; padding-right: 15px; font-weight: bold;}
.page-info .page-info-title h2 > label > span {display: inline-block; margin-left: 8px; padding: 0 5px 3px; border: 1px solid #ddd; border-radius: 3px; background-color: #f8f8f8; font-size: 13px; vertical-align: middle; color: #666; cursor: pointer;}
.page-info .page-info-title .right {display: table-cell; width: 50%; text-align: right; vertical-align: middle;}
.page-info .page-info-title .right .represent-info {display: inline-block; position: relative; padding-left: 22px; font-size: 14px; font-weight: bold;}
.page-info .page-info-title .right .represent-info:before {content: ''; display: block; position: absolute; top: 2px; left: 0; width: 18px; height: 18px; background: url(/images/inc/icon_info.png) no-repeat;}
.page-info .page-info-title .right input[type="button"] {height: 24px; padding: 0; padding: 0 5px 3px; border-radius: 3px; font-size: 12px; vertical-align: top;}
.page-info .page-guide {margin-bottom: 25px; padding: 20px 20px 23px; background-color: #f8f8f8;}
.page-info .page-guide .guide-img {margin: 10px 0 25px; text-align: center;}
.page-info .page-guide strong {display: block; position: relative; margin-bottom: 8px; padding-left: 12px; font-size: 14px; font-weight: bold;}
.page-info .page-guide strong:before {content: '•'; display: block; position: absolute; top: 0; left: 0;}
.page-info .page-guide strong.important:before {content: ''; top: 50%; width: 6px; height: 2px; background-color: #fd7e14;}
.page-info .page-guide strong span {font-weight: bold; color: #fd7e14;}
.page-info .page-guide strong ~ strong {margin-top: 20px;}
.page-info .page-guide p {padding-left: 12px;}
.page-info .page-guide p ~ p {margin-top: 5px;}
.page-info .prog-content {margin-top: 15px; padding: 20px; border: 5px solid #f4f4f4; border-radius: 20px; background: url(/images/inc/bg_001.png) no-repeat bottom 35px right 50px;}
.page-info .prog-content .box {display: table; width: 100%;}
.page-info .prog-content .box ~ .box {margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0;}
.page-info .prog-content .box .left {display: table-cell; width: 70%;}
.page-info .prog-content .box .left strong {display: block; position: relative; margin-bottom: 8px; padding-left: 12px; font-size: 14px; font-weight: bold;}
.page-info .prog-content .box .left strong:before {content: ''; display: block; position: absolute; top: 50%; left: 0; width: 6px; height: 2px; background-color: #ec008b;}
.page-info .prog-content .box .left ul li {position: relative; padding-left: 12px; color: #666;}
.page-info .prog-content .box .left ul li:before {content: '•'; display: block; position: absolute; top: 0; left: 0;}
.page-info .prog-content .box .right {display: table-cell; width: 30%; text-align: right; vertical-align: middle;}
.page-info .prog-content .box .right .apply-btn {display: inline-block; height: 30px; padding: 4px 10px 5px; border-radius: 3px; background-color: #ec008b; color: #fff; transition: background-color .1s ease-in-out;}
.page-info .prog-content .box .right .apply-btn:hover {background-color: #d90080;}
.page-info table td > b {font-weight: bold;}

.workplan-top {position: relative; height: 30px;}
.workplan-top:before, .workplan-top:after {content: ''; display: table; clear: both;}
.workplan-top .left {float: left;}
.workplan-top .left .table.btn li:first-child {margin-left: 0;}
.workplan-top .right {float: right;}
.workplan-top .center {display: inline-block; position: absolute; top: 0; left: 47%;}
.workplan-top .center i {display: block; position: absolute; top: 5px; width: 20px; height: 20px; background-repeat: no-repeat; cursor: pointer;}
.workplan-top .center i.btn-prev {left: -30px; background-image: url(/images/inc/btn_calendar_prev.png); background-position: center;}
.workplan-top .center i.btn-next {right: -30px; background-image: url(/images/inc/btn_calendar_next.png); background-position: center;}
.workplan-top .center h2 {display: inline-block; font-size: 19px; font-weight: bold; vertical-align: middle; letter-spacing: 0;}
.workplan-top .center .btn-calendar {display: inline-block; width: 17px; height: 28px; margin-left: 8px; background: url(/images/inc/btn_calendar.png) no-repeat top 5px center; vertical-align: middle; cursor: pointer;}

.workplan-time {margin: 20px 0;}
.workplan-time:before, .workplan-time:after {content: ''; display: table; clear: both;}
.workplan-time li {float: left; width: 20%; padding: 0 10px;}
.workplan-time li:nth-child(1) {padding-left: 0; padding-right: 15px;}
.workplan-time li:nth-child(2) {padding-left: 5px;}
.workplan-time li:nth-child(4) {padding-right: 5px;}
.workplan-time li:nth-child(5) {padding-left: 15px; padding-right: 0;}
.workplan-time li .worktime {min-height: 72px; padding: 22px 15px 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f8f8f8; text-align: center;}
.workplan-time li .worktime label, .workplan-time li .worktime .time {display: inline-block; font-weight: bold; vertical-align: middle;}
.workplan-time li .worktime .time {margin-left: 10px; font-size: 18px;}
.workplan-time li .worktime.two-row, .workplan-time li .worktime.three-row {padding: 9px 15px 10px;}
.workplan-time li .worktime.two-row > div, .workplan-time li .worktime.three-row > div {font-weight: bold;}
.workplan-time li .worktime.two-row > div ~ div, .workplan-time li .worktime.three-row > div {position: relative; margin-top: 5px; padding-top: 3px; border-top: 1px solid #ddd;}
.workplan-time li .worktime.two-row .time, .workplan-time li .worktime.three-row .time {font-size: 14px;}
.workplan-time li .worktime.three-row > label {display: block; margin-bottom: 8px;}
.workplan-time li .worktime.three-row > div > span {display: block; position: absolute; top: 4px; left: 0; color: #666;}
.workplan-time li .worktime.three-row > div .time {margin-left: 0;}
.workplan-time li:nth-child(2) .worktime {background-color: #fff5f5;}
.workplan-time li:nth-child(3) .worktime {background-color: #fef9ee;}
.workplan-time li:nth-child(4) .worktime {background-color: #fef9ee;}
.workplan-time li:nth-child(5) .worktime {background-color: #fef9ee;}

.workplan-calendar {border: 1px solid #d9d9d9; border-radius: 8px; cursor: default;}
.workplan-calendar table thead th {padding: 15px 0 18px; border-bottom: 2px solid #e4e4e4; font-weight: bold;}
.workplan-calendar table thead th:first-child {color: #e03131;}
.workplan-calendar table thead th:last-child {color: #888;}
.workplan-calendar table tbody td {width: 14.28%; height: 100px; padding: 18px 15px; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;}
.workplan-calendar table tbody td:last-child {color: #888;}
.workplan-calendar table tbody td .today {display: table; width: 100%;}
.workplan-calendar table tbody td .today .event {display: table-cell; width: 80%; font-weight: bold;}
.workplan-calendar table tbody td > .event {display: table; font-weight: bold;}
.workplan-calendar table tbody td > .event .rewrktime {display: table-cell; width: 65%; font-weight: normal; letter-spacing: 0;}
.workplan-calendar table tbody td .today .date {display: table-cell; width: 20%; text-align: right;}
.workplan-calendar table tbody td .today .wrkkind {margin-top: 5px; font-weight: normal;}
.workplan-calendar table tbody td .worktime {margin-top: 5px; letter-spacing: 0;}
.workplan-calendar table tbody td .hour {margin-top: 5px;}
.workplan-calendar table tbody td.hol .today {color: #e03131;}
.workplan-calendar table tbody tr td:last-child {border-right: 0;}

.table-sub-title {display: table; width: 100%; height: 30px; margin-bottom: 5px;}
.table-sub-title h2 {display: table-cell; position: relative; width: 50%; padding-left: 15px; font-size: 15px; vertical-align: top;}
.table-sub-title h2:before {content: ''; display: block; position: absolute; top: 10px; left: 0; width: 10px; height: 3px; background-color: #fd7e14;}
.table-sub-title h2.none {padding-left: 0;}
.table-sub-title h2.none:before {content: none;}
.table-sub-title h2 > label {font-weight: bold;}
.table-sub-title h2 > label {font-weight: bold;}


/* 2021.11.08 pitapat add */
/* 좌측 메뉴 */
.header .logo > a {position: absolute; top: 50%; left: 22.5%; display: block; width: 150px; height: 53px;margin-top: -26.5px; background: url(/images/images_new/logo_2023.png) no-repeat center center;background-size: 100% 100%;}
.header .nav > li > .btn-lnb{display: none !important;}
.container .lnb {width: 250px; overflow-y: auto; border-right: 1px solid #E5E5E5;}
.container .lnb .one-depth {height: 78px;line-height: 78px;padding: 0 30px;background-color: #D62300;font-size: 26px;font-weight: bold;text-align: left;color: #ffffff;}
.container .lnb .nav .two-depth > li > a {display: flex;align-items: center;height: 62px;padding: 0 30px;border-bottom: 1px solid #E1E1E1;background: #ffffff;font-size: 18px;font-weight: bold;color: #2E2E2E;word-break: keep-all;}
.container .lnb .nav .two-depth > li .three-depth {display: none; padding: 15px 0; border-bottom: 1px solid #E1E1E1;background-color: #ffffff;}
.container .lnb .nav .two-depth > li .three-depth.active {display: block;}
.container .lnb .nav .two-depth > li .three-depth > li {position: relative;}
.container .lnb .nav .two-depth > li .three-depth > li:hover {background-color: none;}
.container .lnb .nav .two-depth > li .three-depth > li > a {display: block; padding: 5px 42px 5px 30px;font-size: 14px;background-color: #ffffff;font-weight: 400;}
.container .lnb .nav .two-depth > li .three-depth > li > a.active {background-color: #ffffff;font-weight: 400;color: #D62300;}
.container .lnb .nav .two-depth > li .three-depth > li > a.new-tab{position: absolute;top: 9px; right: 30px; width: 12px; height: 12px; padding: 0; background: url(/images/mcd/btn_newtab.png) no-repeat;}


.searchbox{padding: 21px 0;border: 1px solid #E1E1E1;background-color: #FFFFFF;}
.searchbox .titleNoti{width: 100%;height: auto;padding: 0 25px;}
.searchbox table.SearchInfo th{font-size: 16px;font-weight: 400;color: #222222;vertical-align: middle;word-break: keep-all;}
.searchbox table.SearchInfo th.tableTh{width: 120px;}
.searchbox table.SearchInfo td{font-size: 14px;font-weight: 400;color: #222222;vertical-align: middle;word-break: keep-all;}
.searchbox table.SearchInfo td.btn{min-width: 75px;padding: 0 10px;text-align: right;vertical-align: middle;}
.searchbox select{padding: 0 10px;font-size: 14px;font-weight: 400;}
/* .searchbtn{margin: 0 10px 5px 0;} */
.searchbtn{margin: 2px 2px 2px 0;}
.searchbox table .search-btn,
.searchbox table .search-btn-01{position: unset;display: inline-block;width: 55px;height: 38px;line-height: 38px;text-align: center;padding: 0;border-radius: 5px;background: #5B5B5B;font-weight: 400;color: #ffffff;}
.searchbox table .search-btn-01{background: #9B9B9B;}
.searchbox table .search-btn-01 label{color: #ffffff;}
#divGridLeft, #divGridMiddle, #divGridRight, #divGrid04, #divGrid06, #divGrid07 ,#divGridMaster, #divGrid02_1, #divGrid01_1, #divSumGrid01, #divMstGrid, #divDisptcGrid01, #divDisptcGrid02, #divRestMangMan01, #divGridDetail, #divGridMds, #divGridFixHour, 
#divDtlGrid01, #divGrid01, #divGrid02, #divGrid03, #divPlanGrid010, #divGridDtl01, #divDisptcGrid, #divAbscGrid,
#divPlanGrid01, #divMstGrid01, #divRestMangMan02, #divDtlGrid02, #divDetailGrid01, #divGridEdu01, .table01, .table02, .inputTable{border-top: 2px solid #D62300;border-right: 1px solid #e4e4e4;}
#grdInputVars, #grdOutputVars, #grdFuncs, .slick-grid-container{border-top: 1px solid #E5E5E5;}
.wrap_new .table01{border-top: 1px solid #E5E5E5;}
.table01 tbody th, .table02 tbody th, .inputTable tbody th{padding: 0 10px;border-left: 1px solid #e4e4e4;}
.table01 tbody td, .table02 tbody td, .inputTable tbody td{padding: 4px 10px;}
.titlebox .page-subtitle{float: none;display: inline-block;width: auto;font-size: 26px;font-weight: bold;letter-spacing: -1px;}
.titlebox .btn-group{width: auto;}
.titlebox .btn-group li > a {display: flex;align-items: center;height: 38px;padding: 5px 10px;border-radius: 5px;background: #9B9B9B;font-size: 14px;font-weight: 400;color: #ffffff;}
.titlebox .btn-group li.special > a{background: #198737;font-size: 14px;}
.table01 tbody td #imgPic, .table02 tbody td #imgPic, .inputTable tbody td #imgPic{border: 2px solid #D62300;}
.table01 th > label, .table01 td > label, .table02 th > label, .table02 td > label{font-size: 14px;font-weight: 400;color: #222222;word-break: keep-all;}
.sta-tabcontrol-tab.active{background: #D62300;color: #ffffff;}
.sta-tabcontrol-tab.active:hover{background: #D62300;}
.slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default{font-size: 14px;color: #222222;}
#divInput{height: auto;margin-top: 23px;}
#divInput p{line-height: 28px;font-size: 14px;font-weight: 400;color: #222222;margin-bottom: 10px;}
.notiText{margin-top: 20px;}
.notiText span{display: block;line-height: 28px;font-size: 14px;font-weight: 400;color: #9B9B9B;}
/* 2021.11.08 pitapat add */

/* 2022.05.10 - id가 HRORG, id가 txtHRORG, id가 EMPNO 인 input box의 text는 좌측정렬 처리*/
/* input#HRORG {text-align: left;}
input#txtHRORG {text-align: left;}
input#EMPNO {text-align: left;} */