@charset 'UTF-8';
html, body { margin: 0; padding: 0; height: 100%; }
/* 아이프레임 영역*/
.iframeBasicTab{
    display: block;
    width: 100%; 
    height: calc(100vh - 190px);
    margin: 0px;
    border: none;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    /* border:1px solid red; */
}

.iframeProfileTab{
    display: block;
    width: 100%; 
    /* 브레드크럼 유 */
    /* height: calc(100vh - 220px); */
    /* 브레드크럼 무 */
    height: calc(100vh - 182px);
    margin: 0px;
    border: none;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    /* border:1px solid red; */
}

.iframeInfoTab{
    display: block;
    width: 100%; 
    height: calc(100vh - 114px);
    margin: 0px;
    border: none;
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    /* border:1px solid red; */
}

/* component */
/* 업무화면 버튼 스타일 */
.butn{
    padding: 8px 14px 7px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
}
/* hover 스타일 다르게 */
/* .butn.deepblue:hover::before{
    background-color: #ffffff;
    opacity: 0.3;
}
.butn.blue:hover:before{
    background-color: #ffffff;
    opacity: 0.3;
} */
.butn.outline{padding:6px 16px; line-height: 18px;}
.butn.outline.thick{border: 1px solid #363c43}
.butn.fixed{width:105px;}
.butn i{
    width: 18px;
    margin-right: 4px; 
    font-size: 18px;
}
.butn_ico{
    width: 32px;
    height: 32px;
    line-height: 32px;
}
.butn_ico.outline{
    line-height: 32px;
}
/* radio 업무 페이지 custom */
.btn_radio label{
    font-size: 13px;
}
.btn_radio label::before{
    width: 18px;
    height: 18px;
}
.btn_radio input:checked + label:after{
    width: 9px;
    height: 9px;
    transform: translate(4.5px, -50%);
}
/* input-wrap 너비별 정의 */
.input-wrap.w-50{width: 50px!important;}
.input-wrap.w-60{width: 60px!important;}
.input-wrap.w-70{width: 70px!important;}
.input-wrap.w-80{width: 80px!important;}
.input-wrap.w-90{width: 90px!important;}
.input-wrap.w-100{width: 100px!important;}
.input-wrap.w-110{width: 110px!important;}
.input-wrap.w-120{width: 120px;}
.input-wrap.w-130{width: 130px;}
.input-wrap.w-140{width: 140px;}
.input-wrap.w-150{width: 150px;}
.input-wrap.w-160{width: 160px;}
.input-wrap.w-170{width: 170px;}
.input-wrap.w-180{width: 180px;}
.input-wrap.w-190{width: 190px;}
.input-wrap.w-200{width: 200px;}
.input-wrap.w-210{width: 210px;}
.input-wrap.w-220{width: 220px;}
.input-wrap.w-230{width: 230px;}
.input-wrap.w-240{width: 240px;}
.input-wrap.w-250{width: 250px;}
.input-wrap.w-300{width: 300px;}
.input-wrap.w-370{width: 370px;}

input::placeholder,
select::placeholder,
textarea::placeholder{
    color:#CACDCF !important;
    font-weight: normal;
}

/* checkbox task custom */
.checkbox input + label:before{
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 16px;
}
.check-wrap{
    padding: 16px 24px 12px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.check-wrap .radio-wrap .btn_radio{
    margin-left: 20px;
}

/* form-control */
.form-control{font-size: 12px;}

/* transparent */
.form-control.transparent{
    border:none!important;
    background:none!important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;}
.form-control.transparent::-ms-expand {
    display: none;
}

/* transparent placeholder일 때 */
.form-control.transparent::placeholder{
    color: transparent!important;
}
/* 달력 input box */
.input-wrap.date .form-control.transparent{
    padding: .375rem .75rem;
}
.input-wrap.date .form-control.transparent+button,
.input-wrap.date .form-control.transparent+a{
    display: none;
}

.form-inline .input-wrap input,
.form-inline .input-wrap select{width: 100%; color: #363c43; font-size: 12px; font-weight: normal;}
.form-group .input-wrap input,
.form-group .input-wrap select{
    color: #363c43;font-size: 12px; font-weight: normal;
}

.form-inline .date-wrap{
    display: flex;
}
.form-inline .input-wrap.date,
.form-group .input-wrap.date,
.form-inline .input-wrap.search,
.form-group .input-wrap.search{
    position: relative;
}
.form-inline .input-period{
    display: inline-block;
    padding: 6px;
}
.form-inline .date+.input-period{
    flex: 1 1 20px;
}
.form-inline .input-period::after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 1px;
    margin-bottom: 4px;
    background-color: #363c43;
}
.form-inline .input-period.type2{
    padding:0px;
}
.form-inline .input-period.type2::after{
    content: '~';
    background-color: transparent;
}

.form-inline .input-wrap.date button,
.form-inline .input-wrap.date a,
.form-group .input-wrap.date button,
.form-group .input-wrap.date a,
.form-inline .input-wrap.search button,
.form-inline .input-wrap.search a,
.form-group .input-wrap.search button,
.form-group .input-wrap.search a{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    line-height: 24px;
    background-color: #eff1f4;
}

.form-inline .input-wrap.search button,
.form-inline .input-wrap.search a,
.form-group .input-wrap.search button,
.form-group .input-wrap.search a{
    left: unset;
    right: 4px;
}
.form-inline .date .form-control,
.form-group .date .form-control{
    padding-left: 38px;
}
.form-inline .form-control,
.form-group .form-control{
    border: 1px solid #d5d8dc;
    border-radius: 6px;
}

.form-inline.form-addr .input-wrap{
    flex: 1 110px;
}
.form-inline.form-addr .butn{
    flex-basis: 110px;
}
.form-control:focus{
    border-color: #465166;
    box-shadow: none;
}


.contents-box .form-group {
    margin-bottom:0px;
}
.contents-box .form-group textarea.form-control{
    margin-top:12px;
    height: 110px;
    overflow-y: auto;
    resize: none;
    font-size: 13px;
}
.contents-box .form-group .form-control:disabled, 
.contents-box .form-group .form-control[readonly]{
    border:1px solid #e0e0e0;
    background-color: #f2f2f2;
}

/* select2 */
.select2-container{
    width: 100% !important;
    min-width: 120px;
}
.select2-container--default .select2-selection--multiple{
    min-height: 32px;
    padding-bottom: 4px;
    border: 1px solid #d5d8dc;
    border-radius: 6px;
}

/* select2 > dropdown style */
.select2-container--default .select2-results__option--selected{
    background-color: #f2f2f2;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #087ef7;
}

.select2-container--default .select2-search--inline .select2-search__field{
    color: transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    padding: 0px;
    color: #363c43;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    padding: 2px 26px 2px 12px;
    border: 0px;
    border-radius: 20px;
    margin-top: 4px;
    margin-left: 4px;
    background-color: #f5f6f7;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    padding: 2px 8px;
    border-right: 0px;
    left:unset;
    right:0;
    color: #777e87;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{
    background-color: transparent;
}

/* popover */
.guide-popover .mdo-ico{
    margin-left: 4px;
    font-size: 18px;
    color: #9ca3ab;
    vertical-align: text-top;
}
.popover{
    border:0px;
    max-width: 300px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.popover-body{
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    background-color: #384152;
    line-height: 1.5em;
    color: #fff;
}
.bs-popover-auto[x-placement^=bottom]>.arrow::before, 
.bs-popover-bottom>.arrow::before{
    border-bottom-color: #ffffff;
}
.bs-popover-auto[x-placement^=bottom]>.arrow::after, 
.bs-popover-bottom>.arrow::after{
    border-bottom-color: #384152;
}
.bs-popover-auto[x-placement^=top]>.arrow::after, 
.bs-popover-top>.arrow::after{
    border-top-color: #384152;
}

/* 근무유형관리 > 3. 근무패턴 */
.guide-popover{
    cursor: pointer;
}
.guide-popover .guide-bubble{
    display: none;
}
.guide-popover:hover .guide-bubble{
    display: block;
}

/* guide-bubble */
.guide-bubble{
    position: absolute;
    top: 18px;
    left: -11px;
    z-index: 333;
    width: 240px;
    border-radius: 6px;
    padding: 14px;
    background-color: #989ea8;
}
.guide-bubble::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 14px;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-bottom: 12px solid #989ea8;
    border-right: 10px solid transparent;
}

.guide-bubble .desc{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.36px;
    text-align: left;
    color: #fff;
}

/* loading spinner */
.dim-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2999;
    background: rgba(0, 0, 0, 0.3);
}
.dim-overlay .spinner-wrapper{
    position: relative;
    height: inherit;
}
.dim-overlay .spinner-wrapper .spinner-border{
    width: 30px;
    height: 30px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    color: #087EF7;
}

.dim-overlay .spinner-wrapper .percent{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 16px;
    font-weight: 700;
    color: #087EF7;
}

/* layout */
/* flexible layout */
.wrap_inner{width: 100%; margin:0px;}

@media only screen and (max-width: 1536px){
    .wrap_inner{width: 100%;}
}

.cont{
    padding-bottom: 0px;
    background-color: #f8f8f8;
}


/* 브레드크럼 */
.breadcrumb-wrap{background-color: #ffffff;}
.breadcrumb{padding:8px 10px; border-bottom: 1px solid #f4f6f8; margin-bottom:0px; background-color: transparent;}
.breadcrumb .mdo-ico{font-size: 20px;}
.breadcrumb .mdo-ico a{color:#9ca3ab;}
.breadcrumb-item+.breadcrumb-item::before{
    content:'\e5cc';
    font-size: 20px;
    padding-right: 4px;
    color:#cacdcf;
}
.breadcrumb-item+.breadcrumb-item{
    padding-left: 4px;
    color:#9ca3ab;
}
.breadcrumb-item.active,
.breadcrumb-item:last-child{
    font-weight: bold;
    color:#384152;
}



/* 브레드크럼과 contents 사이 공백 */
.cont .cont_row + .cont_row{
    margin-top: 8px;
}
/* 조회조건에 있는 form 태그의 flex 너비를 100% 으로 */
.cont_row form{
	flex: 1;
}

/* 조회박스 */
.box.box-search{
    display: flex;
    padding: 10px 24px;
    border-radius: 0px;
    box-shadow: 0 2px 3px 0 rgba(49, 54, 58, 0.08);
}
.box.box-search .form-inline .checkbox label{
    text-indent: 0px;
    margin-left: 0px;
}

/* 업무화면 인라인 form 스타일 정리 */
.form-inline label{
    margin-right: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.45px;
    color: #363c43;
}
.form-group .col-form-label{
    font-size: 13px;
    font-weight: 500;
    line-height: 1.43;
    letter-spacing: -0.42px;
    color: #363c43;
}



.box-search .form-inline+.form-inline{
    margin-left:24px;
}
.box-search.check-wrap .radio-wrap .btn_radio{
    margin-left: 10px;
}
.box-search .btn-search{
    min-width: 60px;
    padding: 7px 16px;
    font-weight: 500;
    letter-spacing: -0.45px;
    text-align: center;
    color: #ffffff;
    border-radius: 6px;
    line-height: 1.5;
    background-color: #465166;
}
.box-search .butn{
    margin-left:24px;
}

.box-search .profile-info{
    line-height: 35px;
}
.box-search .profile-info dt{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.45px;
    color: #363c43;
}
.box-search .profile-info dt::before{
    content: '';
    display: inline-block;
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: -2px;
    width: 2px;
    height: 15px;
    background-color: #d5d8dc;
}
.box-search .profile-info dt:first-child::before{
    display: none;
}
.box-search .profile-info dd{
    margin-left: 12px;
    font-size: 14px;
    letter-spacing: -0.28px;
    text-align: left;
    color: #363c43;
}


.contents-wrap{
    width:100%;
    background-color: #fff;
    box-sizing: border-box;
}

.contents-wrap{
    margin-left:0px;
    margin-right:0px;
}

.contents-wrap .contents-box{
    padding-right:24px;
    padding-left:24px;
}
.contents-wrap .contents-box+.contents-box{
    border-left:1px solid #e0e0e0;
}
.contents-wrap .contents-box.pr-slim{
    padding-right: 12px;
}
.contents-wrap .contents-box.pl-slim{
    padding-left: 12px;
    border-left: 0px;
}
/* .contents-box .slimScrollDiv{
    padding-right:24px!important;
    margin-right:-24px!important;
} */
.contents-box{
    padding-bottom:24px;
}
.contents-box .contents-wrap .contents-box{
    padding-bottom:0px;
}
.contents-box .sub-title{
    margin-top: 24px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.43;
    letter-spacing: -0.42px;
    color: #363c43;
}

.contents-header {
    padding-top: 16px;
    margin-bottom: 8px;
}
.contents-header .title{
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.48px;
    color: #363c43;
    line-height: 32px;
}

.contents-header .sub-title{
    margin-top:0px;
    font-size: 13px;
}
.contents-header .title small,
.contents-header .btn-wrap li small{
    position: relative;
    margin-left: 16px;
    font-size: 13px;
    line-height: 1.43;
    letter-spacing: -0.42px;
    color: #363c43;
}
/* .contents-header .title small::before{
    content: '';
    position: absolute;
    top: 0px;
    left: -12px;
    display: inline-block;
    width: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #087ef7;
    vertical-align: text-top;
} */

.contents-header .outline{
    border: solid 1px #d5d8dc;
}
.contents-header .outline .butn_ico{
    border-radius: 0px;
}
.contents-header .butn_ico>span{
    font-size: 20px;
}
.contents-header .btn-wrap{
    display: inline-block;
    border-radius: 6px;
    line-height: 1;
}
/* .contents-header .btn-wrap button{
    margin-bottom: -1px;
    margin-left: -1px;
} */
.contents-header .btn-wrap button+button,
.contents-header .btn-wrap a+a{
    border-left: 1px solid #d5d8dc;
    border-radius: 0px;
    margin-left: -4px;
}
.contents-header .btn-wrap .radio-wrap{
    padding-top: 6px;
}

.contents-header .btn-wrap .radio-wrap .btn_radio+.btn_radio{
    margin-left: 20px;
}
.contents-header .btn-wrap .radio-wrap .label-title{
    display: inline-block;
    margin-top: -8px;
    font-size: 14px;
    vertical-align: middle;
}

/* ibsheet 기본 class */
.ibsheet{ width:100%; height:150px;}


/* 발령 */
.issued-tab-wrap{
    padding-top: 16px;
    padding-right: 24px;
    padding-left: 24px;
}
.issued-tab-wrap .form-group-wrap{
    display: flex;
}
.issued-tab-wrap .form-group-wrap .radio-wrap{
    padding-top: 8px;
    margin-left: 24px;
}
.issued-tab-wrap .btn_radio label{
    font-weight: 400;
}
.issued-tab-wrap .btn_radio+.btn_radio{
    margin-left: 16px;
}

.contents-header .btn-outer-wrap{
    margin-top: 10px;
    line-height: 1;
}
.contents-header .butn_ico+.btn-outer-wrap{
    margin-top: 8px;
}

.contents-header .btn-wrap li{
    float: left;
    margin-left: 8px;
    padding-right: 0px;
    line-height: 1;
}
.contents-header .btn-wrap li:first-child{
    margin-left: 0px;
}
.contents-header .btn-wrap li small{
    display: inline-block;
    margin-left: 0px;
    padding: 8px 8px 0px 0px;
}
.contents-header .btn-wrap li .checkbox {
    padding: 6px 8px 0px 0px;
}
.contents-body{
    overflow-y: auto;
}
.contents-body .inner-wrap{
    /* height: calc(100% - 78px)!important; */
    padding-right: 24px;
}

.img-change-wrap{
    margin-top: -12px;
}
.img-change-wrap .img-wrap{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 200px;
    margin-top: 12px;
    padding: 0px 10px;
    border:1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
}
.img-change-wrap .img-wrap button,
.img-change-wrap .img-wrap a{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    background-color: #777E87;
    z-index: 999;
}
.img-change-wrap .img-wrap .info{
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    margin-top: -10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: -0.48px;
    color: #cacdcf;
}
.img-change-wrap .img-wrap .info i{
    font-style: normal;
    margin-right: 8px;
    vertical-align: text-top;
}

.img-change-wrap .img-crop{
    position: relative;
    height: 180px;
    overflow: hidden;
    margin: 10px auto;
    box-sizing: border-box;
    text-align: center;
}

.img-change-wrap .img-crop img{
    position: inherit;
    z-index: 99;
    display: inline-block;
    width: auto;
    height: 180px;
}

/* 법인 이미지 관리 */
#corpMgr .img-change-wrap{
    background-color: rgba(0,0,0,0.02);
}
#corpMgr .img-change-wrap:hover{
    background-color: rgba(0,0,0,0.05);
}
#corpMgr .img-change-wrap .img-wrap{
    padding: 0px;
}
#corpMgr .img-change-wrap .img-crop{
    height: 200px;
    margin: 0px auto;
}
#corpMgr .img-change-wrap .img-crop img{
    width: 100%;
    height: 200px;
}


/* toggle button */
/* 급여 선택형 토글 */
.btn-group-toggle .btn{
    padding: 6px 12px;
    border-radius: 6px;
    border:1px solid #cacdcf;
    margin:0px;
    color: #cacdcf;
    font-weight: bold;
    font-size: 13px;
    box-shadow: none;
}
.btn-group-toggle>.btn:not(:first-child){
    margin-left: -1px;
}
.btn-group-toggle .active{
    border: solid 1px #363c43;
    background-color: #fff;
    color: #465166
}
.btn-group-toggle .single{
    width: 168px;
}
.btn-group-toggle .double{
    width: 84px;
}

/* 급여 수식 */
.formula .example{
    font-size: 15px;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: -0.45px;
    color: #777e87;
}
/* 분자, 분모 */
.formula .numerator,
.formula .denominator{
    font-size: 12px;
    font-weight: bold;
    line-height: 1.67;
    letter-spacing: -0.36px;
    text-align: center;
    color: #777e87;
}
.formula .bottom-line{
    border-color: #777e87 !important;
}

/* 업무화면 tab custom */
.wrap_tab.task .nav-tabs{border-bottom: 0px;}
.wrap_tab.task .wrap_tab_btn{padding-left:0px;}
.wrap_tab.task .tab_btn{padding: 0px;}
.wrap_tab.task .tab_btn:first-child{padding-left: 24px;}
.wrap_tab.task .tab_btn:last-child{padding-right: 24px;}
.wrap_tab.task .tab_btn+.tab_btn{margin-left: 0px; padding-left:20px;}
.wrap_tab.task .tab_btn.open{border-bottom: 0px;}
.wrap_tab.task .tab_btn a{padding: 16px 0px 12px; border:0px; border-radius: 0px; font-size: 13px; line-height: 22px; font-weight: 700; letter-spacing: -0.45px; text-align: left; color: #9ca3ab}
.wrap_tab.task .tab_btn a:focus,.wrap_tab.task .tab_btn a:hover{border:0px;}
.wrap_tab.task .tab_btn a.active{color: #363c43; border:0px; border-bottom:2px solid #363c43; }
.wrap_tab.task .tab_btn a:hover{color: #363c43;}
.wrap_tab.task .scrtabs-tab-container,
.wrap_tab.task .scrtabs-tabs-fixed-container{height: 52px;}
.wrap_tab.task .scrtabs-tab-scroll-arrow{width:36px; height: 64px; padding: 14px 0px; border:0px; color:#9ca3ab;}
.wrap_tab.task .scrtabs-tab-scroll-arrow:hover{background-color: transparent;}
.wrap_tab.task .scrtabs-tab-scroll-arrow>.butn_ico{box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);}


/* custom table */
.contents-box .table-wrap .slimScrollDiv{
    padding-right: 0px!important;
    margin-right: 0px!important;
}

/* 업무 > 급여 table */
table.basic.slim th,
table.basic.slim td{
    padding: 4px 8px;
}

table.basic.normal th,
table.basic.normal td{
    padding: 8px 16px;
}


/* table 내부 button */
table .butn{padding: 4px 8px; font-size: 12px;}
table .butn.big{padding: 7px 14px; font-size: 13px;}
table .butn.outline{padding: 6px 8px;}
table .butn i{margin-left: -2px;}

/* table 내부 input */
table .form-wrap{
    display: flex;
    flex-wrap: wrap;
}
table .form-wrap .form-inline.form-search{
    flex: 1 58px;
}
/* date - date 같이 쓸 때 */
table .form-inline .input-wrap.date,
table .form-group .input-wrap.date{
    flex: 1 1 calc((100% - 20px)/2);
}
/* date 시간이랑 같이 쓸 때 */
table .form-inline .input-wrap.date.type2,
table .form-group .input-wrap.date.type2{
    flex: initial;
}

/* table 안에 toggle 버튼 2022.05.19 */
table.basic.type3 td div.btn-group-toggle .btn {padding: 5px 14px; font-size:12px; width:auto;}

/* 프로필 테이블 */
.profile-table .img-wrap{
    width: 130px;
}
.profile-table .img-wrap img{
    display: inline-block;
    width: 100%;
    height: auto;
}
.profile-table .table-wrap{
    width: 390px;
}

/* 인사기본 프로필 */
.profile-box{
    position: relative;
    width: 100%;
    padding: 16px 0px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: #465166;
}
.profile-box .groupChartBtn,
.groupChart-bar .closeBtn{
    position: absolute;
    top: 12px;
    left: 0px;
    z-index: 99;
    width: 40px;
    height: 96px;
    background-color: #ffffff;
    color: #465166;
    border-radius: 0px 12px 12px 0px; 
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.17);
}
.rotate {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;

    position: absolute;
    top: 18px;
    left: 30px;
    white-space: nowrap;
    font-size: 13px;
}
.profile-box .key-info{
    display: flex;
    padding-left: 68px;
}
.profile-box .key-info .img-wrap{
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30px;
    text-align: center;
    background: #fff url('../img/profile.png') no-repeat center center;
    background-size: auto 90px;
}
.profile-box .key-info img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 90px;
    height: auto;
    transform: translate(-50%, -50%);
}
.profile-box .key-info .name{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.45;
    letter-spacing: -0.4px;
    color: #ffffff;
}
.profile-box .key-info .team{
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #98a1b4;
}
.profile-box .key-info .search-wrap{
    position: relative;
    width: 110px;
    border-bottom: 1px solid #8f96a3;
    margin-top: 10px;
}
.profile-box.hrInfo-box .key-info .search-wrap{
    width: 160px;
}
.profile-box .key-info .wrap_autoTXT{
    border-radius: 0px;
    border: 0px;
    padding: 0px;
}

.profile-box .key-info .btn-wrap{
    width: 108px;
    margin-top: 10px;
}
.profile-box .key-info .butn{
    padding: 7px 14px;
    color: #ffffff;
}
.profile-box .key-info .disabled,
.profile-box .key-info button:disabled{
    color: #a5aab4;
    background-color: #646D7F;
    border:1px solid #646D7F;
    cursor: not-allowed;
}

.profile-box .key-info .search-wrap i{
    position: absolute;
    bottom: 7px;
    left: 0px;
    font-style: normal;
    font-size: 18px;
    color: #F2F2F2;
}
.profile-box .key-info .search-wrap input{
    width: 100%;
    padding: 6px 0;
    border:0px;
    background-color: transparent;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.43;
    letter-spacing: -0.42px;
    text-indent: 24px;
}
.profile-box .key-info .search-wrap input ~ .focus-border{position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background-color: #d6d6d6; transition: 0.4s;}
.profile-box .key-info .search-wrap input:focus ~ .focus-border{width: 100%; transition: 0.4s;}

.wrap_autoTXT .autoTXTList{
    width: 392px;
    height: 290px;
    overflow-y: auto;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
}
.wrap_autoTXT .autoTXTList li:hover{
    background-color: rgba(53, 53, 58, 0.1);
}
.wrap_autoTXT .autoTXTList li .inner-wrap{
    width: 100%;
}
.wrap_autoTXT .autoTXTList .name,
.wrap_autoTXT .autoTXTList .num{
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.69;
    color: #363c43;
}
.wrap_autoTXT .autoTXTList .num{
    font-family: 'Lato';
}
.wrap_autoTXT .autoTXTList .position,
.wrap_autoTXT .autoTXTList .status,
.wrap_autoTXT .autoTXTList .team{
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.83;
    color: #777e87;
}

/* autocomplete */
.ui-widget.ui-widget-content{
    border:0px;
}
.ui-autocomplete{
    width: 392px;
    height: 290px;
    padding: 8px 0;
    border:0px;
    border-radius: 6px;
    overflow-y: auto;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
    background-color: #ffffff;
}
.ui-menu .ui-state-active{
    margin: 0px;
}
.ui-autocomplete li:hover,
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover{
    border:0px;
    background-color: rgba(53, 53, 58, 0.06);
}
.ui-autocomplete li .inner-wrap{
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 1.5;
    font-size: 13px;
    font-weight: 400;
    color: #363c43;
}
.ui-autocomplete .name,
.ui-autocomplete .num{
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.69;
    color: #363c43;
}
.ui-autocomplete .num{
    font-family: 'Lato';
}
.ui-autocomplete .position,
.ui-autocomplete .status,
.ui-autocomplete .team{
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.83;
    color: #777e87;
}


.profile-box .info-desc{
    position: relative;
    padding-left: 16px;
    padding-right: 0px;
}
.profile-box .info-desc::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 1px;
    height: 96px;
    background-color: #293140;
}

.profile-box.hrInfo-box{
    padding: 12px 0px;
}
.profile-box.hrInfo-box .info-desc{
    justify-content: center;
    align-self: center;
}
.profile-box.hrInfo-box .info-desc::before{
    top: -4px;
    height: 30px;
}
.profile-box.hrInfo-box .key-info .search-wrap{
    margin-top: 0px;
}
.profile-box.hrInfo-box .key-info .search-wrap input{
    padding-bottom: 6px;
}
.profile-box .info-desc .info-item:nth-child(n+7) {
    margin-top: 10px;
}
.profile-box .info-desc .info-item {
    position: relative;
    padding: 0px;
    padding-left: 13px;
}
.profile-box .info-desc .info-item::before{
    content: '';
    position: absolute;
    top: 7px;
    left: 0px;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #293140;
}
.profile-box .info-desc .info-item dt{
    font-size: 12px;
    line-height: 1.67;
    letter-spacing: -0.36px;
    color: #cacdcf;
}
.profile-box .info-desc .info-item dd{
    font-size: 13px;
    font-weight: bold;
    line-height: 1.47;
    letter-spacing: -0.3px;
    color: #ffffff;
}

/* 조직도 sideBar */
.groupChart-bar{
    display: block;
    width: 630px;
    position: fixed;
    top: 0px;
    left: -630px;
    height: 100%;
    /* margin-top: 37px; */
    margin-top: 0px;
    z-index: 999;
    color: #272740;
    transition: all 0.3s;
    background-color: #ffffff;
}

.groupChart-bar.active {
    left: 0;
    box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.16);
}

.groupChart-bar .closeBtn {
    display: none;
    left: 630px;
}
.groupChart-bar .closeBtn .rotate{
    top: 20px;
}
.groupChart-bar .closeBtn .rotate i{
    margin-right: 10px;
}

.groupChart-bar .groupChart-header{
    padding: 24px 32px 16px;
    border-bottom: 1px solid #f4f6f8;
}
.groupChart-bar .groupChart-header .title{
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.54px;
    color: #363c43;
}
.groupChart-bar .groupChart-header .box-search{
    display: flex;
}
.groupChart-bar .groupChart-body{
    padding: 20px 32px 35px;
    margin-right: 0px;
    margin-left: 0px;
}
.groupChart-bar .groupChart-body .sub-title{
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: -0.45px;
    color: #363c43;
}
.groupChart-bar .groupChart-body .group-chart{
    padding-left: 0px;
    padding-right: 7px;
}
.groupChart-bar .groupChart-body .group-table{
    padding-right: 0px;
    padding-left: 7px;
}

/* 인사기본 */
.hrbasic{
    border-top:1px solid #cacdcf;
    margin-left: 0px;
    margin-right: 0px;
}
.top-line{
    border-top:1px solid #cacdcf!important;
}
.top-line.thick{
    border-top:2px solid #cacdcf!important;
}
.bottom-line{
    border-bottom:1px solid #cacdcf!important;
}
.bottom-line.thick{
    border-bottom:2px solid #cacdcf!important;
}
.right-line{
    border-right:1px solid #cacdcf!important;
}
.right-line.thick{
    border-right:2px solid #cacdcf!important;
}
.left-line{
    border-left:1px solid #cacdcf!important;
}
.left-line.thick{
    border-left:2px solid #cacdcf!important;
}

.border-line{
    border:1px solid #cacdcf!important;
}
.hrbasic-header{
    padding: 12px 16px;
    border-top:1px solid #cacdcf;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #f7f7f7;
}
.hrbasic-header .title{
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: -0.45px;
    color: #363c43;
}
.hrbasic .cell{
    padding: 8px 16px;
    border-left:1px solid #cacdcf;
    font-size: 13px;
    line-height: 1.46;
    letter-spacing: -0.26px;
    color: #363c43;
}
.hrbasic .cell:first-child{border-left:0px;}
.hrbasic .cell .data+.data::before{
    content: '';
    display: inline-block;
    width:1px;
    height: 14px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: -2px;
    background-color: #c1c1c1;
}
.hrbasic .cell .input-wrap{display: flex; padding-right: 4px; padding-left: 4px;}
.hrbasic .cell .input-wrap .input-wrap-btn{flex: 1 76px;}
.hrbasic .cell .input-wrap .btn-search{width: 100%;}
.hrbasic .cell .input-wrap:last-child{padding-right: 16px;}
.hrbasic .cell .col-form-label{
    padding-right: 0px;
}
.hrbasic .cell .data{
    font-size: 12px;
}
.hrbasic .cell .form-group .input-wrap.date button,
.hrbasic .cell .form-group .input-wrap.date a{
    top: 4px;
    left: 9px;
}

.hrbasic .cell .checkbox,
.hrbasic .cell .btn_radio label{line-height: 32px;}


.hrbasic.pop-up .cell{
    padding: 6px 0px 6px 8px;
    border-left: 0px;
}
.hrbasic.pop-up .cell .col-form-label{
    padding-left: 8px;
}

/* 발령 */
.appointment-wrap{
    padding: 24px;
    border: 1px solid #e0e0e0;
}
.appointment-wrap .sub-title-wrap{
    margin-top: 40px;
    margin-bottom: 16px;
}

.appointment-wrap .key-info{
    display: flex;
}
.appointment-wrap .key-info .inner-wrap{
    width: 120px;
}
.appointment-wrap .key-info .img-wrap{
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid #dedede;
    overflow: hidden;
    margin: 0px auto;
    text-align: center;
    background: #fff url('../img/profile.png') no-repeat center center;
    background-size: auto 106px;
}
.appointment-wrap .key-info img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 106px;
    height: auto;
    transform: translate(-50%, -50%);
}

.appointment-wrap .key-info .search-wrap{
    position: relative;
    width: 130px;
    padding: 2px 6px 1px;
    border-radius: 0px;
    border: 0px;
    border-bottom: 1px solid #cacdcf;
    margin-top: 0px;
}
.appointment-wrap .key-info .search-wrap i{
    position: absolute;
    bottom: 7px;
    left: 0px;
    font-style: normal;
    font-size: 18px;
    color: #465166;
}
.appointment-wrap .key-info .search-wrap input{
    width: 100%;
    padding: 6px 0;
    background-color: transparent;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: -0.42px;
    color: #363c43;
    border: 0; 
    text-indent: 46px;
}
.appointment-wrap .key-info .search-wrap input.text-center{
    text-align: center;
    text-indent: 0px;
}
.appointment-wrap .key-info .search-wrap input ~ .focus-border{position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background-color: #8f96a3; transition: 0.4s;}
.appointment-wrap .key-info .search-wrap input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.appointment-wrap .key-info .search-wrap .autoTXTList{
    top: 45px;
}

.appointment-wrap .key-info .table-wrap{
    flex: 1;
    margin-left: 20px;
}


/* 근무유형 말풍선 탭 */
.attendance-tab li{
    position: relative;
}
.attendance-tab li+li{margin-left:20px;}
.attendance-tab .nav-pills .nav-link.active, 
.attendance-tab .nav-pills .show>.nav-link,
.attendance-tab .nav-pills .nav-link.done{
    border:1px solid #087ef7;
    color:#087ef7;
    background-color: transparent;
}
.attendance-tab .nav-pills .nav-link{
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid #dedede;
    color:#dedede;
    font-weight: 500;
    font-size: 13px;
    background-color: transparent;
}
.attendance-tab .nav-pills .nav-link.large{
    padding: 8px 16px;
    height: 60px;
}

.attendance-tab .nav-pills .nav-link .sub-desc{
    display: block;
    font-size: 12px;
}
.attendance-tab>ul{
    counter-reset: tab;
}
.attendance-tab>ul>li a{
    position: relative;
    padding: 10px 20px;
}
.attendance-tab>ul>li a::before{
    counter-increment: tab;
    content: counter(tab);
    margin-right: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -0.54px;
    font-family: Lato;
    vertical-align: top;
}
.attendance-tab>ul>li::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -9px;
    display: inline-block;
    width: 0px;
    height: 0px;
    margin-top: -7px;
    border-top: 7px solid transparent;
    border-left: 11px solid #ffffff;
    border-bottom: 7px solid transparent;
}
.attendance-tab>ul>li:last-child::after{
    display: none;
}
.attendance-tab>ul>li a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    display: inline-block;
    width: 0px;
    height: 0px;
    margin-top: -8px;
    border-top: 8px solid transparent;
    border-left: 12px solid #dedede;
    border-bottom: 8px solid transparent;
}
.attendance-tab>ul>li a.active::after,
.attendance-tab>ul>li a.done::after{
    border-top: 8px solid transparent;
    border-left: 12px solid #087ef7;
    border-bottom: 8px solid transparent;
}

.attendance-tab>ul>li:last-child a::after{
    display: none;
}

.attendance-step>ul>li{position: relative; overflow: hidden; padding-right: 30px}
.attendance-step>ul>li+li{margin-left: -26px}
.attendance-step>ul>li+li>a{padding-left: 30px}
.attendance-step>ul>li>a{position:relative; padding:8px 8px 8px 10px; border: 1px solid #ced5db; border-left:0; border-right: 0; background-color: #f7f7f8; line-height: 22px; font-size: 13px; font-weight: 500; color: #8a9096;}
.attendance-step>ul>li>a .step{display: inline-block; margin-right: 8px; font-size: 14px; line-height: 20px; font-weight: 700; vertical-align: text-bottom}
.attendance-step>ul>li>a:before, .attendance-step>ul>li>a:after{content: ''; position: absolute; top: 0; display: block; width: 36px; height: 36px; border-top:1px solid #ced5db; border-right:1px solid #ced5db; background-color: #fff;}
.attendance-step>ul>li>a:before{left: 2px; transform: rotate(45deg) translate(-48%, 50%)}
.attendance-step>ul>li>a:after{right: -38px; transform: rotate(45deg) translate(-48%, 50%); background-color: #f7f7f8}
.attendance-step>ul>li>a.active, .attendance-step>ul>li>a.active:before, .attendance-step>ul>li>a.active:after, .attendance-step>ul>li>a.end, .attendance-step>ul>li>a.end:before, .attendance-step>ul>li>a.end:after{border-color: #087ef7; color: #087ef7}
.attendance-step>ul>li>a:after, .attendance-step>ul>li>a.active:after{z-index: -1}
.attendance-step>ul>li>a.active, .attendance-step>ul>li>a.active:after, .attendance-step>ul>li>a.end.active, .attendance-step>ul>li>a.end.active:after{background-color: #087ef7; color: #fff}
.attendance-step>ul>li>a.end, .attendance-step>ul>li>a.end:after{background-color: #fff}
.attendance-step>ul>li>a .date{font-size: 12px; vertical-align: bottom;}
.attendance-step>ul>li:first-child>a{border-left: 1px solid #ced5db;}
.attendance-step>ul>li:first-child>a:before{display: none}
.attendance-step>ul>li:first-child>a.active, .attendance-step>ul>li:first-child a.end{border-left: 1px solid #087ef7}

.attendance-step>ul>li:nth-child(1){z-index: 10}
.attendance-step>ul>li:nth-child(2){z-index: 9}
.attendance-step>ul>li:nth-child(3){z-index: 8}
.attendance-step>ul>li:nth-child(4){z-index: 7}
.attendance-step>ul>li:nth-child(5){z-index: 6}
.attendance-step>ul>li:nth-child(6){z-index: 5}
.attendance-step>ul>li:nth-child(7){z-index: 4}
.attendance-step>ul>li:nth-child(8){z-index: 3}
.attendance-step>ul>li:nth-child(9){z-index: 2}
.attendance-step>ul>li:nth-child(10){z-index: 1}


/* 동적오브젝트관리 */
.wrap_category{padding: 24px; border: 1px solid #e0e0e0;}
.wrap_category .category + .category{margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;}
.wrap_category .category .list_txt li{font-size: 14px;}

/* 할일알림관리 */
.accordion .card-header{padding: 0; background-color: #fff}
.accordion .card-header .btn{padding: 16px 32px; font-weight: 700; font-size: 16px; color: #777e87}
.accordion .card-header .btn:before{content:'\e5cf'; display: inline-block; margin-right: 16px; font-family: 'Material Icons'; font-size: 24px; line-height: 1; vertical-align: bottom}
.accordion .card-header .btn:not(.collapsed):before{content:'\e5ce'}
.accordion .card-header .btn:not(.collapsed){color: #363c43}
.accordion .card-header .btn:focus{outline: 0 !important}
.module-card{padding: 24px 32px 32px 83px}
.module-card .title{font-size: 16px; font-weight: 700; text-indent: -10px}
.module-card .title:before{content:''; display: inline-block; width: 4px; height: 4px; margin-right: 6px; border-radius: 4px; background-color: #363c43; vertical-align: middle;transform: translateY(-2px)}
.module-card .sub-title{margin-top: 0}
.module-card + .module-card{border-top: 1px solid #e0e0e0}
.module-card .module-list li{font-size: 14px; color: #777e87}
.module-card .module-list li + li{margin-top: 27px;}
.module-card .module-list .caution{font-size: 12px}
.module-card .module-set{margin:8px 0}
.module-card .module-card-head{display: flex; justify-content: space-between; align-items: center; margin-top: 11px}
.module-card .module-card-cont{padding-right: 83px}
.module-card .module-list li, .module-card .module-card-cont{margin-left: 16px}
.module-card .module-list .editor-wrap{margin-top: 16px;}
.module-card .module-list .editor-wrap li + li{margin-top: 0; margin-left: 12px}
.module-card .module-list .editor-wrap li:first-child{margin-left: 5px}

/* 개인근무 스케줄 현황 */
.scheduleStatus-box{
    padding: 16px 15px;
    background-color: #f7f7f7;
    border-radius: 8px;
}
.scheduleStatus-box .total-title{
    font-size: 12px;
    font-weight: bold;
    line-height: 1.67;
    letter-spacing: -0.36px;
    color: #9ca3ab;
}
.scheduleStatus-box .item-title{
    /* margin-top: 6px; */
    font-size: 12px;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: -0.45px;
    color: #363c43;
}
.scheduleStatus-box .item-desc{
    margin-top: 6px;
    font-family: Lato;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.02px;
    color: #363c43;
}
.scheduleStatus-box .remainder{
    margin-left: 6px;
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.11;
    letter-spacing: -0.54px;
    color: #777e87;
}
.scheduleStatus-box .unit{
    margin-left: 8px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.33;
    letter-spacing: -0.45px;
    color: #777e87;
}
.scheduleStatus-box .date{
    margin-top: 6px;
    font-family: Lato;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -1.02px;
    color: #363c43;
}
.scheduleStatus-box .bar{
    position:relative;
}
.scheduleStatus-box .bar::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1px;
    display: inline-block;
    height: 42px;
    background-color: #d6d6d6;
}
/* full calendar custom */
.calendar-wrap{
    position: relative;
    height: calc(100vh - 237px);
}
.calendar-wrap .btn-group-toggle{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
}
.calendar-wrap>.inner-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
}

.fc-toolbar-chunk>div{
    position: relative;
}
.fc .fc-toolbar-chunk .fc-toolbar-title{
    font-size: 18px;
}
.fc-toolbar-chunk>div .fc-button.fc-today-button{
    position: absolute;
    top: -4px;
    right: -90px;
    color: #087ef7!important;
    font-size: 14px;
    font-weight: bold;
    border-color: transparent!important;
    background-color: transparent!important;
    text-decoration: underline;
    opacity: 1;
}
.fc-toolbar-chunk>div .fc-today-button:focus,
.fc-toolbar-chunk>div .fc-today-button:active:focus{
    box-shadow: none!important;
}
.fc-toolbar-chunk>div .fc-prev-button,
.fc-toolbar-chunk>div .fc-next-button{
    position: absolute;
    top: -4px;
    background: transparent;
    border-color: transparent;
    color: #35353a;
}
.fc-toolbar-chunk>div .fc-prev-button:hover,
.fc-toolbar-chunk>div .fc-prev-button:active,
.fc-toolbar-chunk>div .fc-next-button:hover,
.fc-toolbar-chunk>div .fc-next-button:active{
    color: #35353a;
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.06);
}
.fc-toolbar-chunk>div .fc-button.fc-prev-button:focus,
.fc-toolbar-chunk>div .fc-button.fc-prev-button:active:focus,
.fc-toolbar-chunk>div .fc-button.fc-next-button:focus,
.fc-toolbar-chunk>div .fc-button.fc-next-button:active:focus{
    box-shadow: none;
    color:#35353a;
    border-color: transparent;
    background-color: transparent;
}
.fc-toolbar-chunk>div .fc-prev-button{
    left: -50px;
}

.fc-toolbar-chunk>div .fc-next-button{
    right: -50px;
}

/* calendar custom */
th.fc-col-header-cell.fc-day{
    border-bottom-color: #b1b1b1;
}
/* 일요일 */
.fc-day-sun{
    color: #ff5c5c!important;
}
/* 토요일 */
.fc-day-sat{
    color: #087ef7!important;
}


/* ibsheet calendar custom */
.ib-custom-calendar-nav {
    position: relative;
}
.ib-custom-calendar-nav .today{
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.42px;
    color: #087ef7;
    text-decoration: underline;
}
.ib-custom-calendar-nav .butn_ico{
    vertical-align: middle;
    font-size: 20px;
    color: #465166;
}
.ib-custom-calendar-nav .title{
    padding: 0px 24px;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.11;
    letter-spacing: -0.54px;
    color: #465166;
}
.ib-custom-calendar-nav .period{
    padding: 0px 4px;
}

/* 근태 코드 */
.code-box{
    display: inline-block;
    text-align:center;
    font-size: 12px;
	color:#384152;
	padding: 4px 8px;
    border-radius: 5px;
    box-sizing: border-box;
}
.code-box.wide{
    width: 100%;
}

/* 에러페이지 */
.error-page{
    width: 620px;
    padding: 72px 0px 0px 28px;
}

.error-page .title{
    font-size: 14px;
    font-weight: bold;
    line-height: 1.43;
    text-align: left;
    color: #363c43;
}
.error-page .title>strong{
    margin-right: 8px;
    font-family: Lato;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.21;
    text-align: left;
    color: #363c43;
}
.error-page .desc{
    margin-top: 18px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.46;
    text-align: left;
    color: #777e87;
}

.error-page .btn-wrap{
    margin-top: 26px;
}
.error-page .btn-wrap .butn+.butn{
    margin-left: 12px;
}

/* 게시판 pagination */
.pagination{margin-top:0px; align-items: center;}
.pagination li:first-child{margin-right: 0px;}
.pagination li:last-child{margin-left: 0px;}
.pagination li{vertical-align :middle; }
.pagination li a{line-height: 34px; font-weight: 700; color:#363c43;}
.pagination li.mdo-ico a{ font-size: 20px; font-weight: 500; color:#9ca3ab;}
.pagination li.active a{color:#087ef7;}

/* 말풍선스타일(근태코드관리,근무코드관리 사용) 2022.05.20 */
.balloon {position:relative; display:inline-block; line-height:25px;}
.balloon span {display:inline-block; padding:10px; color:#fff; background:#f4f4f4; border-radius:20px;}
.balloon:after { 
	content:''; position:absolute; width:0; height:0; border-style:solid;
	border-width:15px 15px; top:50%; margin-top:-15px;
	border-color:transparent #f4f4f4 transparent transparent; left:-45px;
}
.balloon h2 {font-weight:700; padding-top:10px;}
.balloon ul {padding-top:10px;padding-bottom:4px;}
.balloon ul li {padding-left:10px;}
.balloon ul li.title {font-weight:700; font-size:1.1em;}
.balloon ul li.title::after {
    content: '·'; position:absolute; left:0; width:10px;font-weight:700; font-size:1.5em;
}