@charset "UTF-8";
/* Groupware - style.css */
@import "layout.css";
@import "common.css";
@import "icofont.css";
@import "webpart_kyobo.css";

body {
  font-family: 'Noto Sans KR', sans-serif;
 scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef
}


/* scrollbar - chrome, safari */
::-webkit-scrollbar {width: 8px; height: 8px; border:none; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: none;}
::-webkit-scrollbar-track {background: #f1f1f1; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 1px rgba(241,241,241,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(225,225,225,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}

/* link */
a.underline { color: #007bff; text-decoration: underline; }
a.underline:hover { color: #007bff; text-decoration: underline;}
a.underline:hover, a.underline:focus {outline:none; text-decoration: underline;}

a.hoverb { color: #444; text-decoration: none; }
a.hoverb:hover { color: #007bff; font-weight:700; text-decoration: underline;}

/* Data-table */
table.display thead th, table.display thead td {  padding:8px 18px; border-bottom:1px solid; border-top:1px solid;}
table.display, table.display th, table.display td { font-size:14px;}
.dataTables_length, .dataTables_filter { margin-bottom:3px; display:none;}
table.display tfoot th {  padding:8px 18px 8px 18px;}
/* .dataTables_info,  .dataTables_paginate { font-size:12px;}
.dataTables_paginate .paginate_button:hover {background: rgba(45,153,241,0.2); color: #2d99fb; } */

.display tbody tr:hover { cursor:pointer;}
table.display tbody tr.odd { background:#fff !important;}
table.display tbody tr:hover>.sorting_1, 
table.display tbody tr.even>.sorting_1, 
table.display tbody tr.odd>.sorting_1 { background:#fafafa !important; }
table.display tfoot td { border-top:none;border-top:1px solid #ddd;}

.dataTables_paginate .paginate_button.current { padding:.5rem .75rem; border:1px solid #ddd; background:#fff;}
.dataTables_paginate .paginate_button.current:hover, .dataTables_paginate .paginate_button:hover { background:rgba(45,153,241,0.2); color:#2d99fb !important; border:1px solid #ddd;}

table.display { border-bottom:1px solid #ddd;}

.no-sort thead th.sorting_asc, .no-sort thead th.sorting, .no-sort thead th.sorting_desc { background:none; cursor:pointer;} 
table.dataTable { table-layout: fixed;}
table.dataTable.no-footer { border-bottom:1px solid #ddd;}

table.display tbody tr.sum>.sorting_1 { background:#ffffe6 !important;}
table.display tbody tr.total>.sorting_1 { background:#fff1e6 !important;}

/* ui - table */
.tbl-basic th, .tbl-basic td, .tbl-green th, .tbl-green td, .tbl-gray th, .tbl-gray td, .tbl-white th, .tbl-white td, .tbl-lightblue th, .tbl-lightblue td  { border:1px solid #ddd;  padding:5px 10px; line-height:1.5;  text-align:left;}  
.tbl-basic td, .tbl-green td, .tbl-gray td, .tbl-white td, .tbl-lightblue td { background:#fff; padding:5px 10px;}
.tbl-basic th { background:#f1f6fc;}
.tbl-green th { background:#eef8f6; color:#598179;}
.tbl-gray th { background:#f7f7f7;}
.tbl-white th { background:#fff; color:#999; font-weight: normal;}
.tbl-lightblue th { background:#f1f6fc; color:#444; font-weight: normal;}
.tbl-white td, .tbl-lightblue td { font-weight: bold;}
.tbl-fixed {table-layout: fixed;}

.tbl-basic-bdr, .tbl-bdr-view {  line-height:1.8; padding:6px 10px; text-align:left;}  
.tbl-basic-bdr th, .tbl-bdr-view th { text-align:right; padding:6px 8px;}
.tbl-basic-bdr td, .tbl-bdr-view td { padding:6px 10px;}
.box-green .tbl-basic-bdr th {  color:#598179;}
.tbl-bdr-view th { font-weight:500;}
.tbl-bdr-view td  { font-weight:500;}
th.tbl-2dep { text-align:center;}
.tbl-basic th.tbl-2dep, .box-blue > .tbl-basic-bdr th.tbl-2dep { background:#daeafd;}
.tbl-green th.tbl-2dep, .box-green > .tbl-basic-bdr th.tbl-2dep { background:#c8e9e2;}
.tbl-gray th.tbl-2dep, .box-gray > .tbl-basic-bdr th.tbl-2dep{ background:#e1e0e0;}
  /* table-accent */
  table th.accent-gray, table td.accent-gray {background-color: rgba(231, 231, 231, 0.4);}
  table th.accent-blue, table td.accent-blue {background-color: rgba(4, 88, 249, 0.08);}
  table th.accent-orange, table td.accent-orange {background-color: rgba(255, 133, 21, 0.10);}

/* table style -- 라이선스할당 회사추가 모달 table*/

#modal-sep > div {
  /* width: calc((100% / 4) - 30px); */
  width:100%;
  height:420px;
  border-right:1px dotted #c5cad1;
  padding-right:20px;
  margin-right:20px;
}

#modal-sep div:last-child{ margin-right:0px; padding-right:0px; border-right:0px;}

.tbl-style2 th {
  font-size: 14px;
  padding: 0 0 5px 0px;
  background: none;
  display: block;
  border: none; color: #222; 
  text-align:left;
  white-space: normal;
}

.tbl-style2  td {
  font-size: 14px;
  padding: 0 0 10px 0px;
  display: block;
  /* border-bottom: 1px solid #E7E7E7; */
  margin-bottom: 10px;
}

/* search-tbl */
.search-tbl th {text-align: right;height: 35px;padding: 0 12px;font-size: 14px;font-weight: 500;line-height: 100%;}

/* table-row */
.table-row {margin-right: -20px;margin-left: -20px;}
.table-row [class*="col-"] {padding-right: 20px;padding-left: 20px;}

/* grid */
/* .grd-wrap {overflow: auto;} */
.grd-wrap {display: flex; flex-direction: column; justify-content: flex-start;}
.grd-wrap.overflow-auto {overflow:auto;}
.grd thead th { padding: 8px 20px;font-weight: 400;background: #003770;color: #FFF; }
.grd thead th.sub {background: #205ABF;}
/* .grd tbody td { padding: 7px 20px;font-weight: 400;border-bottom: 1px solid #E7E7E7; } */
.grd tbody td { padding: 5px 10px; height: 35px; font-weight: 400;border-bottom: 1px solid #E7E7E7; }
.grd tbody tr:hover { background: rgba(4, 88, 249, 0.08); /*cursor:pointer;*/ }
tr.grd-2dep th { background:#d7f6ff; border-bottom:none !important;}
tr.grd-3dep th { background:#3c74aa; color:#fff; border-bottom:0px !important;}
tr.selected th, tr.selected td { background:#E6EDF8;}
tr.sum th, tr.sum td { background:#ffffe6; color:#de5490; font-weight:700;}
tr.total th, tr.total td { background:#fff1e6; color:#ef2a54; font-weight:700;}
.grd tbody tr.active {background: rgba(147,147,147,0.1);}

.sub-grd thead th {padding: 8px 20px;font-weight: 500;background: #F7F7F7;color: #222222;border-width: 2px 0px 1px 0px;border-style: solid;border-color: #222222;}
.sub-grd tbody td {padding: 7px 20px;font-weight: 400;border-bottom: 1px solid #E7E7E7;}
.sub-grd tbody tr:hover { background: rgba(4, 88, 249, 0.08); /*cursor:pointer;*/ }
/* ui - grid (line) */
.grd-line th { border:1px solid #acacac;}
.grd-line th:last-child { border-right:1px solid #acacac;}
.grd-line td{ border-left:1px solid #ddd; border-top:1px solid #ddd; position: relative;}
.grd-line td:last-child{ border-right:1px solid #ddd;}

/* ui - grid (color) */
.grd-bgbasic thead th { background:#f1f6fc; color:#1082ea; border-color:#1082ea;} 
.grd-bgbasic tbody tr:hover, .grd-bgbasic tbody tr.odd:hover { background:rgba(241,246,252,0.7) !important;}
.grd-bgblue thead th { background:#E6EDF8; color: #007bff; border-color:#007bff;} 
.grd-bgblue-dark thead th { background-color:#007bff; color:#fff; border-color:#007bff; }
.grd-bggreen thead th { background:#eff9f2; color: #00a126; border-color:#00a126;} 
.grd-bggreen-dark thead th { background-color:#00a126; color:#fff; border-color:#00a126; }
.grd-bgpurple thead th { background:#f7f6fe; color: #6a4ff6; border-color:#6a4ff6;} 
.grd-bgpurple-dark thead th { background-color:#6a4ff6; color:#fff; border-color:#6a4ff6; }
.grd-bgred thead th { background:#ffdfe6; color: #d92550; border-color:#fb607f;} 
.grd-bgred-dark thead th { background-color:#ef3e61; color:#fff; border-color:#ef3e61; }
.grd-bggray thead th { background:#f7f7f7; color: #444; border-color:#939393;} 
.grd-bggray-dark thead th { background-color:#aaa; color:#fff; border-color:#999; }

.grd-bgblue tbody tr:hover, .grd-bgblue-dark tbody tr:hover, .grd-bgblue tbody tr.odd:hover, .grd-bgblue-dark tbody tr.odd:hover { background:rgba(241,246,252,0.7) !important;}
.grd-bggreen tbody tr:hover, .grd-bggreen-dark tbody tr:hover, .grd-bggreen tbody tr.odd:hover, .grd-bggreen-dark tbody tr.odd:hover { background:rgba(238,248,246,0.7) !important;}
.grd-bgpurple tbody tr:hover, .grd-bgpurple-dark tbody tr:hover, .grd-bgpurple tbody tr.odd:hover, .grd-bgpurple-dark tbody tr.odd:hover { background:rgba(247,246,254,0.7) !important;}
.grd-bgred tbody tr:hover, .grd-bgred-dark tbody tr:hover, .grd-bgred tbody tr.odd:hover, .grd-bgred-dark tbody tr.odd:hover { background:rgba(254,227,216,0.7) !important;}
.grd-bggray tbody tr:hover, .grd-bggray-dark tbody tr:hover, .grd-bggray tbody tr.odd:hover, .grd-bggray-dark tbody tr.odd:hover { background:rgba(247,247,247,0.7) !important;}

.grd-bggray-dark tr.grd-2dep th{background-color: #6f818f; border-bottom: 1px solid !important; border-top: 1px solid #6f818f !important;}
.grd-bggray-dark tr.grd-1dep th{border-right: 1px solid #fff !important;}
.grd-bggray-dark tr.grd-1dep th:last-child{border-right: none !important;}

.grd-bggray tr.grd-2dep th{background-color: #e5e5e5; border-top: none !important; border-bottom: 1px solid #000 !important;}
.grd-bggray tr.grd-1dep th{border-right: 1px solid #000 !important;}
.grd-bggray tr.grd-1dep th:last-child{border-right: none !important;}

/* ui - grid (border) */
.grd-border tbody tr:hover {background:none !important;}
.grd-border tbody td { padding:8px 12px 4px 0px;}

/* ui - grid (wrap) */
.grd-head {padding-right:8px; position: relative;}
/* .grd-head .grd:after {content:''; background:#fff; border-width:1px 0 1px 0; border-style:solid; border-top-color: #000; border-bottom-color:#acacac; width:8px; height:100%; position: absolute; top:0; right:0;}
.grd-head .display.grd-bggray.grd-bdr-side-none:after {content:''; background:#f7f7f7; border-width:1px 0 1px 0; border-style:solid; border-color:#939393; width:8px; height:100%; position: absolute; top:0; right:0;} */
.grd-head .grd-bggray-dark:after {content:''; background:#aaa; border-width:1px 0 1px 0; border-style:solid; border-color:#999; width:8px; height:100%; position: absolute; top:0; right:0;}
.grd-head .grd-bgblue:after {content:''; background:#f1f6fc; border-width:1px 0 1px 0; border-style:solid; border-color:#007bff; width:8px; height:100%; position: absolute; top:0; right:0;}

.grd-content {overflow-y: scroll; flex:1;}
.grd-content::-webkit-scrollbar {width: 8px; background:#fff; border-width:0 1px; border-style:solid; border-color:transparent;}
.grd-content::-webkit-scrollbar-button:start:decrement, .grd-content::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: none;}
.grd-content::-webkit-scrollbar-track {background: #fff; border-width:0 1px; border-style:solid; border-color:transparent; border-radius: 0;}
.grd-content::-webkit-scrollbar-thumb {background-color: rgba(225,225,225,.8); border-width:0 1px; border-style:solid; border-color:transparent; box-shadow: 0 0 0 0 #fff inset; }

.grd-wrap .grd-bggray:not(.grd-list), .grd-wrap .grd-bggray-dark:not(.grd-list), .grd-wrap .grd-bgblue:not(.grd-list), .grd-wrap .grd:not(.grd-list){border-collapse: initial; border-spacing: 0;}
.grd-wrap .grd-bggray:not(.grd-list) td, .grd-wrap .grd-bggray-dark:not(.grd-list) td, .grd-wrap .grd-bgblue:not(.grd-list) td, .grd-wrap .grd:not(.grd-list) td {border-top: none;}

/* page - organization */
.org-chart-user .grd-content::-webkit-scrollbar {width: 8px; height: 8px; border:none; background:transparent;}
.org-chart-user .grd-content::-webkit-scrollbar-track {background: #fff; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 1px rgba(241,241,241,.2); border:none;}
.org-chart-user .grd-content::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(225,225,225,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2);}

.grd-head table, .grd-content table {table-layout: fixed;}
.grd-head table td, .grd-body table td {word-break: break-all;}
.grd-second tbody tr:hover {background: transparent;}
.grd-second tbody tr td {border-bottom:none;}
.grd-nopadding td {padding:0 !important;}

/* ui - grid (list) */
.grd-head .grd-list {border-spacing: 0;}
.grd-list {border-collapse: separate; border-spacing:0 8px;}
.grd-list tbody th, .grd-list tbody td {padding:4px 8px;}
.grd-list tbody td {border-top:1px solid #ddd; height:33px;}
.grd-list tbody td:first-child {border-left:1px solid #ddd; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.grd-list tbody td:last-child {border-right:1px solid #ddd; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}

/* ui - grid (size) */
.grd-th-sm thead th {padding-top:6px; padding-bottom:6px; font-weight:500;}
.grd-td-sm tbody td {padding-top:6px; padding-bottom:6px;}
.grd-th-none thead th {padding:0;}
.grd-td-none tbody td {padding:0;}

/* ui - grid (no border) */
.grd-bdr-side-none th, .grd-bdr-side-none td {border-left:none; border-right:none;}

/* ui - grid (tbody scroll) */
.scrolltbody {border-bottom:1px solid #ddd;}
.scrolltbody table { display: flex;  flex-flow: column;  height: 100%; width: 100%;}
.scrolltbody thead {flex: 0 0 auto; width: calc(100% - 16px); }
.scrolltbody table tbody { flex: 1 1 auto;  display: block;  overflow-y: scroll;}
.scrolltbody table tbody tr { width: 100%;}
.scrolltbody table thead, .scrolltbody table tbody tr {display: table; table-layout: fixed;}

/* required */
.required { display: inline-block; width: 5px; height: 5px; background: #E24243; border-radius: 99px; margin-left: 6px;vertical-align: middle; }

/* ui - grid (tbl no border) */
.no-border {border:none !important;}
.no-border th, .no-border td {border:none !important;}

/* ui - grid (sort) */
.column-sort:hover {cursor: pointer; background:#f1f1f1;}
.column-sort .icon-fux-sorting {color:#ccc;}

/* page - 전자결재 결재선 */
.grd-approval thead th {border-width:1px 0;}
.grd-approval thead th:first-child {border-left-width: 1px;}
.grd-approval tbody td:nth-child(1) {background:#eee; border-color:#ddd; border-width:0 1px; }
.grd-approval tbody td:nth-child(1) {border-left:1px solid #ddd;}
.grd-approval tbody tr:hover {background: transparent !important; cursor: default;}

.grd-approval tbody tr.tr-1depth td:nth-child(1) {border-top-width:1px;}
.grd-approval tbody tr:nth-child(n+2) td {background:#f8f8f8; color:#888;}
.grd-approval tbody tr:nth-child(n+2) td:nth-child(1) {background:#eee;}

.grd-approval tbody td:nth-child(2) {border-left-color:#ccc;}
.grd-approval tbody:last-child tr:last-child td:nth-child(1) {border-bottom-width: 1px;}

.grd-approval .f-left {position: absolute; left:5px;}
.grd-approval .f-left .icon-fux-user {font-size:15px;}
.grd-approval .f-left .icon-fux-arrow-down2 {font-size:10px; position: relative; top:-5px;}
.grd-approval .f-left .circle {position: absolute; left:10px; bottom:2px;}

.grd-approval .tr-3depth td:nth-child(n+2) {background: #fdfdfd !important;}

.grd-approval .opinion th {font-weight:bold; color:#444;} 
.grd-approval .opinion td {padding-top:0; padding-bottom:0; color:#999 !important;}
.grd-approval .tr-1depth.opinion td {background: #fff;} 
.grd-approval .tr-2depth.opinion td {background: #f8f8f8;} 

/* page - 전자결재 기안하기 */
.approval-wide-wrap {height:calc(100vh - 70px);}
.sub-content.no-margin .approval-wide-wrap {margin-left:-40px; width:calc(100% + 20px);} /* 통합아이디관리센터 팝업에서 쓰임 */

.approval-wide-wrap .approval-right {border-left:1px solid #ddd; }
.approval-wide-wrap .approval-left {width:250px; background:#f1f6fc; border-left:1px solid #ccc;}
.approval-wide-wrap .approval-left > .p-all-l {height:calc(100% - 40px); overflow-y:auto; overflow-x:hidden; }
.approval-wide-wrap .approval-left .m-tree {max-height:21vh; background:rgba(255,255,255,0.8);}
.approval-wide-wrap .approval-left .m-tree .selected {color:#000;}
.approval-wide-wrap .approval-left .m-tree .selected, .approval-wide-wrap .approval-left .m-top:hover {background:rgba(255,162,0,0.3);}
.approval-wide-wrap .approval-left .m-tree .m-node .m-top {min-height:33px;}
.approval-wide-wrap .approval-left .m-tree .m-node .m-top .menu-name {font-size:14px;}
.approval-wide-wrap .approval-right {flex:1; position: relative;}
.approval-wide-wrap .approval-right #approval-wrap {height:calc(100% - 40px); position: relative;}
.approval-wide-wrap #approval-header {position: absolute; top:0; border:none; padding:10px 20px 0 20px; background:#f1f6fc; border-bottom:1px solid #ddd;}
.approval-wide-wrap #approval-header .dp-flex {width:100%;}
.approval-wide-wrap #approval-body {width:100%; height:calc(100% - 40px); overflow: auto; margin:0; padding: 40px 30px 60px 30px; position: absolute; top:40px;}

.approval-wide-wrap .approval-left .step-item {background:#B8CDF2;}
.approval-wide-wrap .approval-left .step-item:after {content: ''; display: block; position: absolute; top:0; right:-30px; width: 0; height: 0; border-top: 20px solid transparent; border-left: 30px solid #B8CDF2; border-bottom: 20px solid transparent; z-index:1;}
.approval-wide-wrap .approval-right .step-item {padding-left:40px; background:#D6E4FC;}

.step-item {padding:0 15px; height:40px; position: relative;}
.step-item h6 {padding:0;}

/* page - 전자결재 기안하기 (인트로) */
.approval-guide-intro {display: flex; flex-direction: column; height:calc(100% - 40px); overflow: auto; align-content: center; align-items: center; justify-content: center; background: #fff; padding-bottom:80px;}
.approval-guide-intro .bg-yellow {background:#ffa200; color:#fff;}

@media (max-width: 1600px){
    .approval-guide-intro * {zoom:0.85;}
}

/* page - 전자결재 (badge) */
.fx-label {display: inline-block; min-width: 45px; text-align: center; font-size: 13px; height: 24px; color: #fff; border-radius: 5px; line-height: 24px; word-wrap: normal; word-break: keep-all;}
.fx-sta-green, .fx-feed-green {background: #44bd32;}
.fx-sta-yellow, .fx-feed-yellow {background: #fbc531;}
.fx-sta-darkgray, .fx-feed-darkgray {background:#516173;}
.fx-sta-purple, .fx-feed-purple {background: purple;}
.fx-sta-lightgray, .fx-feed-lightgray {background:#c2cad4;}
.fx-feed-blue {background:#5b7bec;}

.fx-status-group {display: inline-block; position: relative;}
.fx-status-group span {margin-left: 5px; letter-spacing: 1.2px; color:#888; font-size:13px;}
.fx-status-group span b {color:#000;}
.fx-status-panel {width: 80px; height: 8px; display: inline-block; background: #ddd; border-radius:100px; overflow:hidden;}
.fx-status-panel > div {height: 8px; float: left; margin: 0; padding: 0; border: none;}
.fx-status-green {background: #44bd32;}
.fx-status-red {background: #516173;}
.fx-status-yellow {background: #fbc531;}
.fx-status-purple {background: purple;}

/* ui - not found */
.notfound-tbl {width:100%; height:300px; display: flex; justify-content: center; align-items: center;}
.notfound-item {display: flex; flex-direction: column; height:100%; overflow: auto; align-content: center; align-items: center; justify-content: center;  padding:60px 0;} /* 회의체 홈에서 쓰임 */

/* ui - circle (size) */
.circle {display: inline-block; border-radius: 100px; text-align: center;}
.circle-sm {width:14px; height:14px;}
.circle-md {width:26px; height:26px;} /* 전자결재 기안하기 단계ui에서 쓰임 */
.circle-lg {width:40px; height:40px;} /* GNB 알림창에서 쓰임 */

/* ui - circle (color) */
.circle-darkblue {background:#086bc4; color:#fff;}
.circle-blue { background-color:#007bff; color:#fff;}
.circle-green { background-color:#23d692; color:#fff;}
.circle-red { background-color:#d92550; color:#fff;}
.circle-purple { background-color:#6a4ff6; color:#fff;}
.circle-gray { background-color:#506372; color:#fff;}

/* ui - required */
.required { color: red; font-size: 1rem; vertical-align: middle; padding-left:5px; }

/* ui - form */
form { margin-top:0px;}
.fm-group { margin-right:-15px; margin-left:-15px;}
.fm-horizontal .fm-group:before, .fm-horizontal .fm-group:after { content:" "; display:table;}
.control-label { margin-top:0; padding-bottom:.3rem; padding-top:.3rem; font-weight:400; display:inline; font-size:0.85rem; color:#6994be;}
.fm-horizontal .control-label { margin-top:0; padding-bottom:.3rem; padding-top:.3rem; font-weight:500; display:inline; }
.fm-inblock {display: inline-block;}
.fm-inblock label {font-weight: 500;vertical-align: middle;margin: 0 3px;}

/* ui - form (element) */
.fm-def { display:inline-block; padding:2px .3rem 4px .6rem;  font-weight:400; line-height:normal; border:1px solid #ddd; vertical-align: middle; border-radius: 3px;-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; font-size:0.85rem;}
.fm-def-view { display:inline-block; width:100%; padding:.375rem; font-size:13px; font-weight:400; line-height:1.5; vertical-align: middle; }
.fm-def.input {min-height:29px;}
input.fm-def {padding: 4px 12px 3px 12px;border: 1px solid #DDD;}
select.fm-def {padding: 2px 24px 3px 5px;border: 1px solid #E7E7E7;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
textarea.fm-def {padding: 4px 12px 4px 12px;border: 1px solid #E7E7E7;}

.fm-def:focus { border:1px solid #000; outline:0;}
.fm-def:-moz-placeholder {color: #c8c8c8;}
.fm-def::-moz-placeholder {color: #c8c8c8;}
.fm-def:-ms-input-placeholder {color: #c8c8c8;}
.fm-def::-webkit-input-placeholder {color: #c8c8c8;}
.fm-def[readonly], .fm-def.readonly {cursor: default;background-color: #f7f7f7; color:#000; border:1px solid #ddd; opacity: 1;}
.fm-def[disabled], fieldset[disabled] .fm-def  {cursor: default;background-color: #f7f7f7; color:#aaa; border:1px solid #ddd; opacity: 1;}
.fm-def[required] { background-color:#fdffde;}

.disabled {touch-action: none; pointer-events: none; background:#f7f7f7 !important;}
.disabled input[type="text"] {background:#f7f7f7 !important;}
.disabled * {color:#aaa !important;}

.fm-label-flex {display: flex !important; vertical-align: top; align-items: flex-start;}
.fm-label-flex input[type='checkbox'] {margin-top:5px; margin-right:6px;}
.fm-label-flex.line-clamp-2 {max-height:2.8em; height:auto !important;}

/* ui - form (validation) */
.fm-validation-error, .fm-validation-warning{ margin:5px 0; display:block; font-style:italic; font-weight:bold;font-size:.85rem;}
.fm-validation-error { color:red; }
.fm-validation-warning { color:#00a0df; }
.fm-validation-success { color:#2db177; }

/* ui - form (게시글 작성에서 쓰임) */
.fm-empty {display:inline-block; font-weight:400; line-height:1.5; vertical-align: middle; border: none; -webkit-transition: box-shadow ease-in-out .15s;}
.fm-empty:focus { border:none; outline:0;}
.fm-empty:-moz-placeholder {color: #c8c8c8;}
.fm-empty::-moz-placeholder {color: #c8c8c8;}
.fm-empty:-ms-input-placeholder {color: #c8c8c8;}
.fm-empty::-webkit-input-placeholder {color: #c8c8c8;}

/* ui - select */
select[readonly], select.readonly {background:none; pointer-events: none;}
.sidenav-select {padding:.4rem .3rem .5rem .6rem !important; border-radius: 0.25rem; font-size:1rem; font-weight: 500; height: auto;} /* 관리자화면 > 최고관리자계정으로 접속 시, 좌측메뉴에 계열사선택UI 생성 */
.select-l{padding: .4rem .3rem .5rem .6rem !important; height: auto; font-size: 1rem;}

/* ui - text field */
.fm-group-i { position:relative;}
.fm-group-i i { position: absolute; top:20px; left:27px; font-size: 1.5rem}
.fm-group-i input {font-size:1.286rem;padding:18px 15px 18px 58px;display:block;border:1px solid #ddd; border-radius:.357rem;}
.fm-group-i input:focus { outline:none;}

/* ui - text field (label) */
.fm-group-i label {color:#777; font-size:1rem;font-weight:normal;position:absolute;pointer-events:none;left:5px;top:10px;transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}

/* ui - text field (active state) */
.fm-group-i input:focus ~ label, .fm-group-i input:valid ~ label {top:-10px;font-size:0.75rem;color:#259aef;}

/* ui - text field (bottom bars) */
.fm-group-i .bar { position:relative; display:block; width:auto; }
.fm-group-i .bar:before, .fm-group-i .bar:after {content:'';height:2px; width:0;bottom:0; position:absolute;background:#003770; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}
.fm-group-i .bar:before {left:0%;}
.fm-group-i .bar:after {right:0%;}

/* ui - text field (active state) */
.fm-group-i input:focus ~ .bar:before, .fm-group-i input:focus ~ .bar:after {width:100%;}

/* ui - text field (highlighter) */
.fm-group-i .highlight {position:absolute;height:60%; width:100%; top:25%; left:0;pointer-events:none;opacity:0.5;}

/* ui - checkbox */
.checkbox.large input[type="checkbox"] {width:20px; height:20px;vertical-align: middle; margin-right:5px; }
.checkbox.large .label {vertical-align: top;}
/* .checkbox input[type="checkbox"] {-webkit-appearance: none;-webkit-box-sizing: border-box;position: relative;width: 18px;height: 18px;cursor: pointer;outline: none !important;border-radius: 2px;border: 1px solid #989BA8;vertical-align: sub;background-color: #fff;} */
td div.checkbox{padding-left: 8px;}
.checkbox input[type="checkbox"] {cursor: pointer;outline: none !important;border-radius: 2px;border: 1px solid #989BA8;vertical-align: sub;background-color: #fff;}
/* .checkbox input[type="checkbox"]:checked {background-color: #0458F9;background-image: url(../images/check.svg);background-size: 16px 16px; border-color: #0458F9;} */
.checkbox input[type="checkbox"]:disabled {background-color: #f7f7f7;border-color: #ccc;cursor: default;}
.checkbox input[type="checkbox"]:checked:disabled {background-color: #ccc;border-color: #ccc;}
.checkbox > span {font-size: 14px;color: #717171;font-weight: 400;}

/* ui - radio */
.radio {display: inline-block;vertical-align: middle;}
.radio.large input[type="radio"] {width:20px; height:20px;vertical-align: middle; margin-right:5px;}
.radio .image {padding-left:25px;}
.radio input[type="radio"] {-webkit-appearance: none;-webkit-box-sizing: border-box;position: relative;width: 18px;height: 18px;cursor: pointer;outline: none !important;border-radius: 99px;border: 1px solid #989BA8;vertical-align: sub;background-color: #fff;}
.radio input[type="radio"]:checked {border: 5px solid #0458F9;}

@supports not (appearance: none) { /* ie전용 */
    .radio.large input[type="radio"]:disabled{opacity: 0.35; background-color: #fff;}
    .checkbox.large input[type="radio"]:disabled{opacity: 0.35; background-color: #fff;}
}

/* ui - checkbox */
.check-check {display: inline-flex; position: relative;padding-left: 25px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; vertical-align: top;height:25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.check-check input {position: absolute;opacity: 0;cursor: pointer;}
.check-check .checkmark {position: absolute;top: 2px;left: 0;height: 25px;width: 25px;background-color: #eee;border-radius: 100px; border:1px solid #ccc;}
.check-check:hover input ~ .checkmark {background-color: #ccc;}
.check-check input:checked ~ .checkmark {background-color: #003770;}
.check-check .checkmark:after {content: "";position: absolute;display: none;}
.check-check input:checked ~ .checkmark:after {display: block;}
.check-check .checkmark:after {left: 8px;top: 4px;width: 9px;height: 13px;border: solid white;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.check-check .label {margin-left:25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right:1px;}

/* ui - check (small size) */
.check-check.check-s {padding-left:0px;}
.check-check.check-s{height:auto;}
.check-check.check-s .checkmark {width:16px; height:16px;}
.check-check.check-s .checkmark:after {left: 5px;top: 1px;width: 5px;height: 10px;}

/* ui - check (circle shape) */
.radio-check {display: inline-block;position: relative;padding-left: 25px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; vertical-align: top;}
.radio-check input {position: absolute;opacity: 0;cursor: pointer;}
.radio-check .checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;border-radius: 50%;border:1px solid #ddd;}
.radio-check:hover input ~ .checkmark {background-color: #ccc;}
.radio-check input:checked ~ .checkmark {background-color: #003770;}
.radio-check .checkmark:after {content: "";position: absolute;display: none;}
.radio-check input:checked ~ .checkmark:after {display: block;}
.radio-check .checkmark:after {left: 8px;top: 4px;width: 9px;height: 13px;border: solid white;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.radio-check .checkmark.white{background-color: #fff;}

/* ui - check disabled*/
input:disabled ~ .checkmark{background-color: #eee !important;}
input:checked:disabled ~ .checkmark{background-color: #dedede !important;}
input:checked:disabled ~ .checkmark:after{border-color: #999 !important;}
.check-check .checkmark.white{background-color: #fff;}

/* ui - radio (일정 반복일정에서 쓰임) */
.radio-letter {display: inline-block;position: relative;padding-left: 25px;margin-bottom: 12px;cursor: pointer;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; vertical-align: top;}
.radio-letter input {position: absolute;opacity: 0;cursor: pointer;}
.radio-letter .checkmark {position: absolute;top: 0;left: 0;height: 26px;width: 26px;background-color: #eee;border-radius: 50%; padding-left:6px;}
.radio-letter:hover input ~ .checkmark {background-color: #ccc;}
.radio-letter input:checked ~ .checkmark {background-color: #2196F3;}
.radio-letter .checkmark:after {content: "";position: absolute;display: none;}
.radio-letter input:checked ~ .checkmark {color:#fff;}

/* ui - radio (전자결재 > 환경설정 > 메인 결재함 탭 순서에서 쓰임) */
.label-bgblue {background:#d9e5f3;}

.radio-label {line-height: normal;}
.radio-label input[type="radio"] {display: none;}
.radio-label input[type="radio"] + label {display: block; padding:5px;}
.radio-label input[type="radio"] + label:hover {background: #4ba2f0;color: #fff;}
.radio-label input[type="radio"]:checked + label {background: #086bc4; color: #fff;}

/* ui - text field (group) */
.fm-group-input {display: flex; align-items: center;}
.fm-group-input .fm-def {flex:1;}
.fm-group-input .addon {display: block;}
.fm-group-input .addon-gray {background:#f7f7f7;}

/* ui - label-wrap (전자결재 문서이관관리에서 쓰임) */
.label-wrap {border:1px solid #ddd; border-radius:3px; height:28px; line-height: 0.5; background:#fff; padding:0 12px; }
.label-wrap label {position: relative; transform: translateY(-50%); top: 50%;}
.label-wrap input[type="checkbox"] {vertical-align: middle;}

/* ui - switch */
.switch {position: relative;display: inline-block;width: 45px;height: 24px;}
.switch input { opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute;content: "";height: 16px;width: 16px; left: 4px; bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background-color: #003770;}
input:focus + .slider {box-shadow: 0 0 1px #003770;}
input:checked + .slider:before {-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}
.switch .label {position: absolute; left:55px; white-space: nowrap;}
.switch-letter {position: relative;display: inline-block;width: 115px;height: 24px;}
.switch-letter input { opacity: 0;width: 0;height: 0;}
.slider-letter {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0; background-color: #ccc;-webkit-transition: .4s;transition: .4s; text-align:right;}
.slider-letter:before {position: absolute;content: "";height: 16px;width: 16px; left: 4px; bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}

input:checked + .slider-letter {background-color: #2d99fb; color:#fff; text-align:left;}
input:focus + .slider-letter {box-shadow: 0 0 1px #2d99fb;}
input:checked + .slider-letter:before {-webkit-transform: translateX(88px);-ms-transform: translateX(88px);transform: translateX(88px);}

.slider.round {border-radius: 24px;}
.slider.round:before {border-radius: 50%;}

/* ui - card */
.card-wrap {display:flex; display: -ms-flexbox; display: -webkit-flex;}
.card-wrap [class*="width-"] {margin:10px;}
.card { position:relative; display:flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: column; background:#fff; border:1px solid #ddd; border-radius: 10px;}
.card-body { flex:1 1 auto; padding:20px; padding-top:0; overflow-y:auto; flex-basis: 0;}
.card-title {display:flex !important; display: -ms-flexbox !important; display: -webkit-flex !important;  align-items: center; font-weight:700; font-size:1rem; margin-bottom:15px; padding:25px 20px 0; padding-bottom:0;}
.card-title h6 {font-size:1.1rem; font-weight:700; display: inline;}
.card-title h6 {font-size:1.1rem; font-weight:700; display: inline;}
.card-subtitle { margin-bottom:.3rem; font-size:.968rem; color:#20a8ef;}

/* ui - card (background) */
.card-gray{background-color: #f3f3f3; border: none;}
.card-gray .tree-bind .m-sub>.m-node:last-child:before{background-color: #f3f3f3;}
.card-gray .bg-white .tree-bind .m-sub>.m-node:last-child:before{background-color: #fff;}

/* ui - button */
.btn { display:inline-block; text-align:center; vertical-align: middle; border:none; line-height:1.5; font-weight:300; border-radius:.357rem; white-space: nowrap; margin:0 1px;}
.btn-round { display:inline-block; text-align:center; vertical-align: middle; border:none; font-weight:300; border-radius:50%; width:30px; height:30px;}
.btn-round-s {display:inline-block; border-radius:50%; width:25px; height:25px; text-align:center; padding:2px 5px !important; vertical-align: middle}
.btn-round-l {display:inline-block; border-radius:50%; width:76px; height:76px; text-align:center; padding:0px !important; font-size:1.4rem !important; box-shadow: 3px 5px 7px 0px rgba(0, 0, 0, 0.2);}
.btn-round-l i {font-size:3rem !important;}

.mainbtn {font-weight:400 !important; border:2px solid #fff !important; font-size:22px !important;}
.mainbtn.btn-purple {background:#33006d;}

/* ui - button (style) */
.main-btn { padding:5px 12px; color:#fff; font-size:1.2rem; font-weight:700;}
.page-btn { padding:3px 10px 3px 10px; color:#fff; font-size:0.95rem; font-weight:600;}
.sub-btn { padding:2px 6px 4px 6px; color:#fff; font-size:.85rem; font-weight:600;}
.sm-btn { padding:3px 6px 3px 6px; font-size:.75rem; font-weight:400;}
.ghost-btn { padding:0 25px; height:46px; color:#fff; font-size:1.1rem; font-weight:600; border-radius:10rem; vertical-align: middle;}
.ghost-btn .time {font-size:12px !important; letter-spacing: 0.2px; font-weight: 400;} 
.move-btn:hover { background-color: #f4f4f4; border:1px solid #666666; color:inherit; }
button {margin:0 1px;}

/* ui - button (icon) */
button.ico-btn {background:transparent; border:none; outline:none;}
.ico-btn {padding:2px 10px;}
.ico-s {font-size:0.9rem;}
.ico-m {font-size:1rem;}
.ico-l {font-size:1.2rem;}

/* ui - button (sidenav) */
.sidenav-btn {padding:5px 0 6px 0; color:#fff; font-size:1rem; font-weight:600; text-align:center;}
.sidenav-btn img {margin-right:8px;height: 20px;display:none;}

/* ui - button (background) */
.btn-basic { background-color:#2d99fb; border:1px solid #1082ea; color:#fff; }
.btn-basic:hover { background-color: #1082ea; border-color:#086bc4; color:#fff; }

.btn-blue { background-color:#007bff; border:1px solid #007bff; }
.btn-blue:hover { background-color: #007bff; border-color:#086bc4; color:#fff;}
.btn-red { background-color:#fb607f; border:1px solid #ef3e61; }
.btn-red:hover { background-color: #ef3e61; border-color:#e53659; color:#fff;}
.btn-green { background-color:#00a126; border:1px solid #01831f; }
.btn-green:hover { background-color: #01831f; border:1px solid #01701b; color:#fff;}
.btn-purple { background-color:#6a4ff6; border:1px solid #3f1fe3; }
.btn-purple:hover { background-color: #3f1fe3; border:1px solid #2808ce; color:#fff;}
.btn-gray { background-color:#ededf1; border:1px solid #ededf1; color:#444;}
.btn-gray:hover { background-color: #d8d8e0; border:1px solid #d8d8e0; }
.btn-gray:active { background-color: #c8c8d3; border:1px solid #c8c8d3; }
.btn-white { background-color:#fff; border:1px solid #fff; color:#3f1fe3;}
.btn-white:hover { background-color: rgba(255,255,255,0.8); border:1px solid #fff;}
.btn-darkgray { background-color:#666; border:1px solid #333; }
.btn-darkgray:hover { background-color: #555; border:1px solid #444; color:#fff;}
.btn-yellow { background-color:#ffa200; border:1px solid #ffa200; }
.btn-yellow:hover { background-color: #ED8F07; border-color:#ED8F07; color:#fff;}

/* ui - button (outline) */
.btn-basic-outline { background-color:#fff; color:#086bc4; border:1px solid #a6cbff; }
.btn-basic-outline:hover { background-color: #dbeaff; border:1px solid #a6cbff; }

.btn-blue-outline { background-color:#fff; color:#086bc4; border:1px solid #a6cbff; }
.btn-blue-outline:hover { background-color: #e3ebf6; border:1px solid #a6cbff; }
.btn-red-outline { background-color:#fff; color:#d92550; border:1px solid #ffa6a6; }
.btn-red-outline:hover { background-color: #f6e3e8; border:1px solid #ffa6a6;  }
.btn-green-outline { background-color:#fff; color:#01831f; border:1px solid #b3d6c2; }
.btn-green-outline:hover { background-color: #e3f6eb; border:1px solid #b3d6c2; }
.btn-purple-outline { background-color:#fff; color:#8c18c2; border:1px solid #dabfe1; }
.btn-purple-outline:hover { background-color: #f2e3f6; border:1px solid #dabfe1;  }
.btn-gray-outline { background-color:#fff; color:#000; border:1px solid #d9d9d9; }
.btn-gray-outline:hover { background-color: #f4f4f4; border:1px solid #d9d9d9; }

/*엑셀업로드 버튼에 사용*/
.btn-file {cursor: pointer;}
.btn-file input[type="file"]{display: none;}

/* ui - badge (size) */
.badge { font-family: sans-serif; min-width:10px;vertical-align: baseline; white-space: nowrap; text-align:center; border-radius: 10px; font-size:12px; font-weight:600; padding:1px 6px 2px 6px; color:#fff; min-height:12px;}
.badge.letter {padding:2px 10px 3px 10px ; font-size:14px; border-radius:100px; font-weight:500;}
.badge.letter-s {padding:0 10px 2px 10px ; font-size:.8rem; border-radius:100px; font-weight:400;}
.badge.letter-l {padding:5px 20px; font-size:1rem; border-radius:100px;}
.badge.badge-square {border-radius: 0;}
.badge.radius-s {border-radius: 2px;} 

/* ui - badge (color) */
.badge-blue { background-color:#007bff; }
.badge-green { background-color:#23d692;}
.badge-red { background-color:#d92550; }
.badge-purple { background-color:#6a4ff6; }
.badge-gray { background-color:#506372; }
.badge-lightgray {background:#ababab;}
.badge-yellow {background:#ffa200;}
.badge-dark {background:#777;}
.badge-orange {background:orange;}
.badge-light-blue {background:#f1f6fc; color:#007bff !important;}
.badge-light-blue2 { background-color:#E1EFF9; border:1px solid #8CBEE4; color:#000;}
.badge-light-orange2 { background-color:#ffefd3; border:1px solid #ffa200; color:#000;}
.badge-light-green {background:#eef6f3; color:#35ba5f !important;}
.btn-badge { position:relative; font-size:1.2rem;}
.btn-badge>span.badge { position:absolute; top:-5px; left:10px;}


/* ui - badge (border) */
[class*="badge-bdr-"] {border-width:1px; border-style:solid; background:#fff;}
.badge-bdr-gray {border-color:#ddd; color:#888;}
.badge-bdr-blue {border-color:#007bff; color:#007bff;}

/* select-view */
.select-view {display: inline-block;background: #f1f6fc;border-radius: 3px;padding: 5px;margin: 3px;}
.select-view .remove-btn {background: none;color: #d92550;border: none;vertical-align: middle;}
.select-view .checkbox label {padding-right: 0;}
.select-view .checkbox input[type="checkbox"] {margin-right: 3px;}


/* ui - calendar */
.calendar-wrap{ width:230px;border:1px solid #ddd; border-radius:5px; font-size:12px; padding:10px; font-family:arial; background:#fff;  z-index:99; position:absolute;}
.calendar-present { font-size:0.95rem; font-weight:700; padding-right:25px !important;}
.calendar-tbl { width:100% !important; text-align:center !important;}
.calendar-tbl th {font-weight: 600 !important;}
.calendar-tbl th, .calendar-tbl td { padding:3px 0px !important; border: none !important; text-align: center !important; background-color: transparent !important;}
.calendar-tbl td.out { color:#939393 !important;}
.calendar-tbl td.today { border:1px solid #2808ce !important; background: rgba(217,210,250,0.2) !important; color: #6a4ff6 !important; font-weight:700 !important;}
.calendar-tbl td:hover { background:#003770 !important; color:#fff !important; cursor: pointer !important;}
.calendar-y td { padding:10px 0px !important;}
.calendar-wrap-to { margin-left:-1px !important;}

/* ui - tab */
.nav { display:flex; display: -ms-flexbox; display: -webkit-flex; padding-left:0px; margin-bottom:0px; list-style:none; font-size:1rem;}
.nav-tabs { border-bottom:1px solid #003770;}
.nav-tabs>li { float:left; margin-bottom:-1px; white-space: nowrap;}
.nav>li { position:relative; display:block; }
.nav-tabs>li>a { margin-right:2px; line-height:1.5; border:1px solid transparent; border-radius:4px 4px 0 0;}
.nav>li>a { position:relative; display:block; padding:8px 16px;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color:#003770; background-color:#fff; border:1px solid #003770; border-bottom-color:#fff; font-weight:700;}
.tab-head {position: relative;}
.tab-head .btn-wrap {position: absolute;top: 2px;right: 0;}
.tab-content::before{ content:""; display:block; padding-bottom:20px; } 
.tab-content>.tab-pane { display:none;}
.tab-content>.active { display:block;}

.tabcontent {display: none;} /* 일정에서 쓰임(월간,주간,일간) */
.tablink.active.btn-gray-outline,
.tablink.active.btn-basic-outline {    background-color: #1082ea;  border-color: #086bc4; color:#fff;}
.nav-tabs-fixed {height: 100%;display: flex;flex-direction: column;}
.nav-tabs-fixed .tab-content {flex: 1;overflow: auto;}

#tab-select {display:none; padding:5px; font-size:1.2rem;} /*반응형 tab */
/* ui - tab (bar) */
.tab-bar>li>a { padding:8px 25px; white-space: nowrap;}
.tab-bar>li.active>a, .tab-bar>li.active>a:focus, .tab-bar>li.active>a:hover { border:none; border-bottom:3px solid #003770; }
.tab-bar>li>a { border:none;}

/* ui - tab (white) */
.tab-bar-white>li>a { padding:8px 25px; white-space: nowrap; color:rgba(255,255,255,.4); border-radius: 0; }
.tab-bar-white>li.active>a, .tab-bar-white>li.active>a:focus, .tab-bar-white>li.active>a:hover {border:none; border-bottom:3px solid rgba(255,255,255,.8); background: transparent; color:#fff;}
.tab-bar-white>li>a:hover {background:rgba(255,255,255,.1);}
.tab-bar-white>li>a:active {background:rgba(255,255,255,.3);}
.tab-bar-white>li>a { border:none;}

/* ui - tab (bgcolor) */
.tab-bgcolor>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgcolor>li>a:hover { color:#000;}

/* ui - tab (bgfull) */
.tab-bgfull-blue>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-blue>li.active>a, .tab-bgfull-blue>li.active>a:focus, .tab-bgfull-blue>li.active>a:hover { background: rgba(45,153,241,0.7); color: #fff; border:1px solid #003770; }

/* ui - tab (full) */
.tab-full>li { width:calc(100% / 3); text-align:center; }

/* ui - tab (color) */
.tab-bgfull-green { border-bottom:1px solid #00a126;}
.tab-bgfull-green>li>a { background:rgba(225,225,225,0.2);  color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-green>li.active>a, .tab-bgfull-green>li.active>a:focus, .tab-bgfull-green>li.active>a:hover {background: #00a126; color: #fff; border:1px solid #00a126; }

.tab-bgfull-purple { border-bottom:1px solid #6a4ff6;}
.tab-bgfull-purple>li>a { background:rgba(225,225,225,0.2);  color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-purple>li.active>a, .tab-bgfull-purple>li.active>a:focus, .tab-bgfull-purple>li.active>a:hover { background: #6a4ff6;  color: #fff; border:1px solid #6a4ff6; }

.tab-bgfull-red { border-bottom:1px solid #d92550;}
.tab-bgfull-red>li>a { background:rgba(225,225,225,0.2);  color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-red>li.active>a, .tab-bgfull-red>li.active>a:focus, .tab-bgfull-red>li.active>a:hover { background:#ef3e61;   color: #fff; border:1px solid #ef3e61; }

.tab-bgfull-gray { border-bottom:1px solid #939393;}
.tab-bgfull-gray>li>a { background: rgba(225,225,225,0.2); color: #939393; border-color:#ccc; border-width:1px 1px 0 1px;}
.tab-bgfull-gray>li.active>a, .tab-bgfull-gray>li.active>a:focus, .tab-bgfull-gray>li.active>a:hover { background: #506372;  color: #fff; border:1px solid #2c3740; }

.tab-bgfull-blue>li>a:hover, .tab-bgfull-green>li>a:hover, .tab-bgfull-purple>li>a:hover, .tab-bgfull-red>li>a:hover, .tab-bgfull-gray>li>a:hover { color:#000;}  

/* ui - tab (equality) */
.tab-equal {justify-content: space-around;} /* GNB 알림창 탭메뉴에서 쓰임 */

/* ui - pagination */
.pagination-wrap {display: flex; vertical-align: top; justify-content: center;}
.pagination-wrap [class*="align-"] {flex:1; display: flex;}
.pagination { display:flex; display:-ms-flexbox; display:-webkit-flex; border-radius:.35rem; padding-left:0px; font-size:13px; margin:0 auto; }
.pagination li a { position:relative; display:block; padding:.45rem .6rem; line-height:1.25; background:#fff; border-radius:6px; margin:0 2px; min-width: 30px;}
.pagination li a i {font-size:10px;}
.pagination li a:hover, .pagination a.active { color: #003770; font-weight: 600;}
.pagination li a.first, .pagination li a.prev, .pagination li a.next, .pagination li a.last { background:#f1f6fc; color:#888;}
.pagination li a.disabled:hover, .pagination li a.disabled { background:#f4f7fa; cursor: default; color:#d3d3db;}
.pagination li a:active {background:#f1f3fc;}

.pagination-expand li a{ border:none;}
.pagination-expand li a:hover, .pagination-expand li.active a { background:#fff; color: #003770;  }

/* fileUploader */
.dropzone {background:#f1f6fc; color:#086bc4; border-radius:4px; border:2px dashed #a6cbff; padding:10px 0; text-align:center;}
.dropzone i {display: block; color:#086bc4; font-size: 30px; opacity: 0.4; margin-bottom: 5px;}
.dropzone span {color:#086bc4; font-weight: bold; opacity: 0.4;}
.dropzone:hover, .dropzone.hover {background:#f1f1f1; border-color:#ccc;}
.dropzone:hover *, .dropzone.hover * {color:#000;}
.pagination { display:flex; display:-ms-flexbox; display:-webkit-flex; border-radius:.35rem; padding-left:0px; font-size:13px; margin:0 auto; }
.pagination li a { position:relative; display:block; padding:.45rem .6rem; line-height:1.25; background:#fff; border-radius:6px; margin:0 2px; min-width: 30px;}
.pagination li a i {font-size:10px;}
.pagination li a:hover, .pagination a.active { color: #003770; font-weight: 600;}
.pagination li a.first, .pagination li a.prev, .pagination li a.next, .pagination li a.last { background:#f1f6fc; color:#888;}
.pagination li a.disabled:hover, .pagination li a.disabled { background:#f4f7fa; cursor: default; color:#d3d3db;}
.pagination li a:active {background:#f1f3fc;}

.pagination-expand li a{ border:none;}
.pagination-expand li a:hover, .pagination-expand li.active a { background:#fff; color: #003770;  }

/* ui - bullet (color) */
.bullet { display:inline-block; width:4px; height:4px; margin-right:5px; vertical-align:middle; position:relative; top:-1px;}
.bullet-blue { background:#007bff;}
.bullet-red { background:#d92550;}
.bullet-green { background:#78b02a;}
.bullet-purple { background:#6a4ff6;}
.bullet-gray { background:#ccc;}
.bullet-darkgray { background:#999;}
.bullet-black { background:#000;}

/* ui - list (thumb) */
.list-thumb li { margin:0; border-bottom:1px dashed #ddd; display: flex;}
.list-thumb li a.link:hover {color:inherit; text-decoration: none;}
.list-thumb.hover li:hover {background:#f7f7f7; cursor: pointer; transition: 0.2s;}
.list-thumb.hover li:active {background:#eaeaea;}

.list-thumb-head {display: flex; align-content: center; width:100%; padding:10px 15px; background:#f3f3f3; border-width:1px 0; border-style: solid; border-color:#ddd;}

/* ui - thumb (size) */
.thumb{ display:inline-block; width:36px; height:36px; border-radius:50%; overflow:hidden; text-align:center; flex:none; position: relative;}
.thumb-sm {width:23px; height:23px;} /* 게시판 읽기 작성자 이미지 */
.thumb-md {width:40px; height:40px;} /* GNB 알림창 */
.thumb-lg {width:60px; height:60px;} /* 통합검색결과 조직도 이미지 */
.thumb img { width: 100%; height: auto;position: relative;}
.thumb i {font-size:24px;}
.thumb-r { display:inline-block; padding-left:15px; vertical-align: top; /* overflow:hidden; */}

.thumb.user {border:1px solid #ddd; border-radius:100px; background:#fff;}
.thumb.user img {width:inherit; height:auto; top:0; position: absolute; transform: translate(-50%, -50%); top:55%; left:50%;}

/* (썸네일) 사이즈 */
.thumbnail-m {position: relative; width:40px; height:40px !important; background:#ebedf3; overflow: hidden;}
/* (썸네일) 종류 */
[class*="thumbnail-"] {display: flex; align-items: center; align-content: center; justify-content: center;}
[class*="thumbnail-"] img {position: absolute; transform: translate(50%, -50%); top:50%; right:50%; width:100%;}
.thumbnail-user img {position: absolute; transform: translate(0, 0); top:0; right:0; width: 100%; height:auto;}
/* (썸네일) 모양 */
.thumbnail-radius {border-radius:8px;}
/* (사용자사진) 포탈, 조직도 상세정보에서 쓰임 */
.photo {position: relative; width:90px; height:90px; border-radius:10px; background:#ebedf3; overflow: hidden; flex-shrink: 0; border:1px solid #eaeaea;}
.photo img {position: absolute; width:100%; height:auto;}

/* page - notification */
.list-thumb.notification li {padding-top:15px; padding-bottom:15px; margin-bottom:0; border-bottom:1px solid #ddd;}
.list-thumb.notification li:hover {cursor: pointer; background:rgba(147,147,147,0.1);}

/* page - idcard (통합검색결과 조직도) */
.list-idcard {margin:0 -10px;}
.list-idcard li {width:calc(25% - 20px); margin:10px; float:left; border:1px solid #ddd; border-radius:10px;}
.list-group-item {  border-bottom:1px solid #ddd; padding:10px 15px 10px 0px;}
.list-group-item>.badge { float:right; margin-left:10px;}
.list-group-item>.box-round-s {  padding:3px 8px; border-radius:5px; margin-right:10px; margin-left:-10px; font-size:.85rem; font-weight:700;}

.service>ul li{position: relative; padding-left: 23px;}
.service>ul li i{position: absolute; left: 0; top: 4px;}

/* collapse */
.collapse-item { padding:10px; border-bottom:1px solid #ddd;}
.collapse-item a.trigger{ display:block; padding:10px 10px 10px 0px; font-weight:700; color:#2d99fb; text-align:left; }
.collapse-item p.collapse-content { background:#f7f7f7; padding:10px;}

/* breadcrumb */
.breadcrumb { padding: 10px 16px; list-style: none; }
.breadcrumb li { display: inline; font-size: 13px;}
.breadcrumb li+li:before { padding: 8px; content: "/";}
.breadcrumb li a { color: #0275d8; text-decoration: none;}
.breadcrumb li a:hover { color: #01447e; text-decoration: underline;}

/* page - list summary (통합검색결과 요약형게시판) */
.list-summary li {display: flex; align-items: flex-start; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #eee; justify-content: space-between;}
.list-summary .dec-thumb a {position: relative; display: block;  overflow: hidden; width:150px; height:100px; border-radius:4px; background:#f9f9f9; white-space: nowrap; text-align: center; font-size:0;}
.list-summary .dec-thumb img {width:100%; height:auto; vertical-align: middle;}

/* page - list summary (요약형게시판) */
.list-board-summary li {display: flex; align-items: flex-start; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eee; justify-content: space-between;}
.list-board-summary .dec-thumb a {position: relative; display: block;  overflow: hidden; width:150px; height:100px; border-radius:4px; background:#f9f9f9; white-space: nowrap; text-align: center; font-size:0;}
.list-board-summary li .image {width:180px; height:130px; border-radius:10px; overflow:hidden; position:relative; background:#f1f1f1; flex:none;}
.list-board-summary li .image img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;}

/* page - list album (앨범형게시판) */
.list-board-album {display: block; margin:0 -10px;}
.list-board-album:after {content:""; display:block; clear:both;}
.list-board-album li { width:calc(20% - 20px); margin:10px; float:left; height: 300px;}
.list-board-album li h6 {margin:10px 0 0 0 ;}
.list-board-album li .image {width:100%; height:182px; border-radius:10px; overflow:hidden; position:relative; background:#f1f1f1;}
.list-board-album li .image img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;}

@media (max-width: 1600px){
    .list-board-album > li {width:calc(25% - 20px);}
}

/* ui - tooltip  */
.tooltip { position: relative; display: inline-block; padding-right: 5px;}
.tooltip .tooltiptext {visibility: hidden;position: absolute;max-width: 600px;background-color: #333;color: #fff;font-size: 12px;text-align: left;padding: 12px 6px 12px 12px;border-radius: 0 10px 10px 10px;z-index: 1;opacity: 0;transition: opacity .6s;border: 1px solid #000;box-shadow: 3px 5px 7px 0px rgba(0, 0, 0, 0.4);z-index: 10; white-space: nowrap;}
.tooltip .tooltiptext ul {max-height: 180px;overflow: auto;padding-right: 10px;}
.tooltip .tooltiptext ul::-webkit-scrollbar {width: 3px;}
.tooltip .tooltiptext ul::-webkit-scrollbar-track {background: transparent;}
.tooltip .tooltiptext ul::-webkit-scrollbar-thumb {background: #555;}
.tooltip .tooltiptext ul::-webkit-scrollbar-button {display: none;}
.tooltip:hover .tooltiptext { visibility: visible;  opacity: 1;}
.tooltip-right { top: 8px; left: 100%;}
.tooltip-bottom { top: 135%; left: 50%;   margin-left: -60px;}
.tooltip-top {bottom: 125%; left: 50%;   margin-left: -60px;}
.tooltip-left { top: -5px;  bottom:auto; right: 128%; }
.tooltip .tooltip-orange {display: inline-block;font-size: 12px;font-weight: 500;line-height: 100%;color: #F87700;border-radius: 100px;border: 1px solid #FF9C41;background: #FFF;padding: 2px 7px;}
.tooltip:hover .tooltip-orange {background: #FFECDA;}
.tooltip .tooltiptext .order {flex-shrink: 0;padding-right: 5px;}
.tooltip .tooltiptext li {margin-bottom: 4px;}
.tooltip .tooltip-depth1 > li {display: flex;}
.tooltip .tooltip-depth1 > li:last-child {margin-bottom: 0;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 {padding-left: 15px;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 > li {display: flex;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 > li:last-child {margin-bottom: 0;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 > li > .tooltip-depth3 {padding-left: 15px;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 > li > .tooltip-depth3 > li {display: flex;}
.tooltip .tooltip-depth1 > li > .tooltip-depth2 > li > .tooltip-depth3 > li:last-child {margin-bottom: 0;}
 
/* ui - content tooltip */
.content-tooltip { display: inline; position: relative; z-index: 9999; }
.content-tooltip .tooltip-item { cursor: pointer; display: inline-block; font-weight: 500; padding-bottom:5px; }
.content-tooltip .tooltip-content { position: absolute; z-index: 9999; background:#333; white-space: nowrap; left: 50%; margin: 0 0 20px -80px; top: 100%; text-align: left; font-size: 14px; line-height: 20px;   opacity: 0; cursor: default; pointer-events: none; padding:20px; border-radius: 6px; }
.content-tooltip:hover .tooltip-content { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); }
.tooltip-effect .tooltip-content { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; color: #fff; }
.content-tooltip .tooltip-content .tooltip-text ul { margin:0px; padding:0px; }
.content-tooltip .tooltip-content .tooltip-text ul li.tit { list-style: none; border-bottom:1px solid #fff; padding-bottom:5px; margin-bottom:5px; font-weight:700;}

/* ui - loading */
.lds-wrap {position: fixed; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,.5); z-index:9999;}
.lds-wrap>div {position: absolute; left:50%; top:50%; width:150px; height:150px; transform: translate(-50%, -50%);}

/* ui - loading (roller) */
.lds-roller { display: inline-block; position: relative;width: 80px; height: 80px;}
.lds-roller div {animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;transform-origin: 40px 40px;}
.lds-roller div:after { content: " ";display: block;position: absolute;width: 7px;height: 7px; border-radius: 50%; background: #111; margin: -4px 0 0 -4px;}
.lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
.lds-roller div:nth-child(2) {animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after { top: 68px; left: 56px;}
.lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after { top: 71px; left: 48px;}
.lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after { top: 72px; left: 40px;}
.lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after { top: 71px; left: 32px;}
.lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after { top: 68px; left: 24px;}
.lds-roller div:nth-child(7) { animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after { top: 63px; left: 17px;}
.lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after { top: 56px; left: 12px;}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ui - loading (ring) */
.lds-ring {display: inline-block;}
.lds-ring div {box-sizing: border-box;display: block;position: absolute;width: 150px;height: 150px;margin: 8px;border: 16px solid #003770;border-radius: 50%;animation: lds-ring 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color: #003770 transparent transparent transparent;}
.lds-ring div:nth-child(1) {animation-delay: -0.3s;}
.lds-ring div:nth-child(2) {animation-delay: -0.2s;}
.lds-ring div:nth-child(3) {animation-delay: -0.1s;}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ui - loading (bar) */
.lds-bar { display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-bar div { display: inline-block; position: absolute; left: 8px; width: 16px;  background: #cef; animation: lds-bar 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.lds-bar div:nth-child(1) { left: 8px; animation-delay: -0.24s;}
.lds-bar div:nth-child(2) { left: 32px; animation-delay: -0.12s;}
.lds-bar div:nth-child(3) { left: 56px; animation-delay: 0;}
@keyframes lds-bar {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}

/* ui - loading (ellipsis) */
.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px;}
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #00a126; animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite;}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/* ui - alert */
.alert { padding:10px 20px; border-radius:6px; font-weight:600; font-size:16px; }
.alert > .box-white {border-radius: 3px;background: #fff;}
.alert-error { background: rgba(252,96,127,0.4); color: #e53659; }
.alert-error > h6 {color: #E24243;}
.alert-info { background: rgba(45,153,241,0.3); color: #003770;}
.alert-success { background: rgba(35,214,146,0.4); color: #00a126;}
.alert-success > h6 {color: #01B075;}
.alert-danger { background: rgba(255,171,25,0.4); color: #ff6600;}

/* ui - chart */
.chart-img { display:inline-block; width:15px; height:15px;}
.chart-blue { background: #007bff; }
.chart-green { background: #23d692}
.chart-red { background: #d92550; }
.chart-purple {background: #6a4ff6; }
.chart-orange { background: rgba(255,162,0,0.8);}
.chart-gray { background: rgba(187,187,187,0.4); }
.chart-darkblue { background: rgba(57,53,223,0.8);}
.chart-yellow { background: rgba(247,185,36,0.8);}
.chart-darkgreen { background: rgba(58,196,125,0.8);}
.chart-jaju { background: rgba(217,37,80,0.8);}
.chart-gradient { background-image: linear-gradient(to right, #f0fe17, #23ffd0);}

/* ui - progress */
.progress-wrap {width:100%;}
.progress { width:100%; display:flex; display: -ms-flexbox; display: -webkit-flex; height:.8rem;  border-radius:.50rem; border:1px solid #ddd; background:#f7f7f7;}
.progress.height-l {height:38px;}
.progress.height-l .progress-bar:last-child {border-radius:.50rem 0 0 .50rem;}
.progress-bar { display: inline-block; flex-direction: column; justify-content: center; white-space: nowrap;  height: 100%;  margin-left:1px;}
.progress-bar:first-child { border-radius:.50rem 0 0 .50rem; margin-left:0px;}
.progress-bar:last-child {border-radius: 0 .50rem .50rem 0; margin-left: 0px; }
.progress-bar span {display: block; margin-top: 10px; font-size:0.9rem; color:#787878;}
.progress-bar.circle {position: relative;}
.progress-bar.circle:after {content:''; display: block; position: absolute; right:-25px; top:-7px; width:50px; height:50px; background:#fff; border:4px solid #6b4cf1; border-radius:100px; box-shadow: 3px 5px 7px 0px rgba(0, 0, 0, 0.2);}
.a-axis {display: flex;}
.a-axis p {font-size:0.9rem; color:#787878; margin-bottom:0;}
.a-axis p b {margin-right:10px;}

/* ui - gauge */
.gauge-wrap li { display:inline-block; margin-right:30px; vertical-align: top;}
.gauge {  position: relative;  border-radius: 50%/100% 100% 0 0;  overflow: hidden; width: 180px;}
.gauge.large {width: 190px;}
.gauge.large .value{font-size: 24px;}
.gauge:before {  content: "";  display: block;  padding-top: 50%; }
.gauge .chart {overflow: hidden;  }
.gauge .mask { position: absolute; left: 5%;  right: 5%; bottom: 0; top: 10%; background-color: #fff; border-radius: 50%/100% 100% 0 0; border-bottom:1px solid #fff;}
.gauge .percentage { position: absolute;   top: -1px; left: -1px;
    bottom: 0px;  right: -1px;  background-color: #f7f7f7; transform-origin: bottom center;}
.gauge .value {  position: absolute;   bottom: 0%; left: 0; width: 100%;
    text-align: center; font-size: 18px; font-weight:400;  }
.gauge .min {  position: absolute;  bottom: 0; left: 5%;}
.gauge .max { position: absolute; bottom: 0; right: 5%;  }

/* ui - gauge (main) */
.maingauge {margin-top:30px; margin-bottom:20px; padding:40px 0; position: relative;}
.maingauge .gauge {width:300px;}
.maingauge .gauge .mask {background:#7733e1; left: 3%;  right: 3%; bottom: 0; top: 6%; border-bottom:1px solid #7733e1; }

.gauge-text {width:360px; position: absolute; top:180px; display: flex; left:-30px;}
.gauge-text > div span {display: inline-block; position: relative; font-size:13px;}

.gauge-text .half-left {width:50%;}
.gauge-text .half-left > div {transform-origin: 122% 0%;}
.gauge-text .half-left > div span:after {content: ''; display: block; width:20px; height:1px; background:#fff; position: absolute; top:8px; right:-23px;} 

.gauge-text .half-right {width:50%; transform: rotate(180deg); position: absolute; left:-75%; top:-19px;}
.gauge-text .half-right > div {transform-origin: -122% 0%;}
.gauge-text .half-right > div span:after {content: ''; display: block; width:20px; height:1px; background:#fff; position: absolute; top:10px; left:-25px;} 

/* ui - graph */
.graph-wrap {overflow: hidden;}
.graph { display:flex; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
.graph li { text-align:center; margin:0 auto; padding:0 30px;}
.graph li:first-child { margin-left:20px;}
.graph li .graph-bar { position:relative; width:15px; height:200px; background:#f7f7fe; border-radius: 10px 10px 0 0; text-align:center; margin:0 auto;  }
.graph li div span { position:absolute; left:0; right:0; bottom:0; background:#acaef5;border-radius: 10px 10px 0 0;}
.graph li div span.over{ position:absolute;  background:#4b49e9; left:0; bottom:50%; border-radius: 10px;}
.graph li p { margin-top:5px; font-size:12px; color:#aaaaaa; }
.graph:before { content:"8h"; display:block; position:relative; top:90px;font-size:12px; color:#aaaaaa;}
.graph li .graph-bar:hover .graph-value{display:block;}
.graph li .graph-value { display:none;position:fixed; padding:10px; background:#fff; border-radius:10px; border:1px solid #ddd; box-shadow: 3px 5px 7px 0px rgba(0,0,0,0.2); z-index:99; white-space:nowrap; }
.graph li .graph-value > p { color:#1800ff; margin-bottom:0px; }

.y-axis { display:flex; position:relative; height:200px;}
.y-axis .value { display:block; position:absolute; font-size:12px; color:#aaaaaa;}
.y-axis .value-dotted {display: block;position: absolute;background:url(../images/main-chart-bg.png) repeat-x; width:100%; height: 2px; margin: 0 0 21px 30px;}

/* ui - summary */
.summary { margin:0; padding:0; display:flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: row;}
.summary li { flex:1; -webkit-flex: 1;  -ms-flex: 1; flex-basis: inherit; flex-grow: 1;  width:fit-content;  margin-right:10px; background:#fff; padding:0 10px; margin:15px 0; border:1px solid #e3e3e3; border-radius:10px; color:#aaa; white-space: nowrap; }
.summary li:last-child { margin-right:0px;}
.summary li p { font-size:30px; color:#444; font-weight:bold; margin-bottom:0px;}

.table-layer-wp .summary li {padding: 0 30px;}
.table-layer-wp .summary li > span {font-weight: 500;margin-bottom: 5px;}
.table-layer-wp .summary li > p {font-size: 36px;}

/* ui - popup */
.fux-popup {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; background: rgba(255, 255, 255, .1);} /* vue에서 팝업과 모달을 묶는 용도 */

.pop-header {background: #003770;}
.pop-header > .dp-flex > .mr-auto {flex:1;}
.pop-header .title {font-size:1.1rem; font-weight:600; color:#fff; margin:0; padding:9px 10px 9px 20px;}
.pop-header .optional-close {padding-right:10px;}
.pop-content {overflow: auto;}
.pop-content .optional-pop-padding {padding:20px;}
.pop-footer > .dp-flex { padding:0 20px 20px 20px; }
.inner-frame #pop-wrapper .pop-header, .inner-frame #pop-wrapper .pop-footer{display: none;}

/* ui - popup (background) */
.pop-bggray {background:#f3f6f9;}

/* ui - popup (flex : height 100% full) */
#pop-wrapper {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch;}
.pop-content {height: 100%;}
.pop-content, .pop-content .optional-pop-h-full {display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; flex:auto;}
.pop-content .optional-pop-h-full .row {flex:1; overflow: auto;}
.pop-content .optional-pop-h-full .row [class*="col-"] {height: 100%; overflow: auto;}
.pop-content .optional-pop-h-full .row [class*="col-"] .card {margin-bottom: 0; height: 100%; overflow: auto;}

/* ui - scroll (flex 스크롤영역) */
.area-flex-column {display: flex; flex-direction: column; justify-content: flex-start; height: 100%;}
.area-flex-column .grd-wrap {height: 100%;}
.area-scroll-active {overflow-y:auto; overflow-x:hidden; flex:auto; flex-basis: 0;}
.area-scroll-hide {overflow-y:hidden; overflow-x:hidden; flex-shrink: 0;}

/* ui - tree type(1) */
.tree { min-height:20px; padding:15px 15px 20px 15px; background-color:#fbfbfb; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;   -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
.tree ul { margin-bottom:0px;}
.tree li { list-style-type:none; margin:0; padding:10px 5px 0 5px; position:relative;}

.tree li::before, .tree li::after {content:''; left:-20px; position:absolute; right:auto;}
.tree li::before { border-left:1px solid #999; bottom:50px; height:100%; top:0; width:1px;}
.tree li::after { border-top:1px solid #999; height:20px; top:30px; width:25px;}
.tree li span { -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ddd;  border-radius:5px; display:inline-block; padding:3px 8px; text-decoration:none; background:#fff;}
.tree li span i { margin-right:5px;}
.tree li.parent_li>span { cursor:pointer; }
.tree li>span { cursor:pointer; }
.tree>ul>li::before, .tree>ul>li::after { border:0;}
.tree li:last-child::before { height:30px;}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span { background:#f7f7f7;  border:1px solid #999;
    color:#000; }
.tree li>span:hover, .tree li>span:hover+ul li span { background:#f7f7f7; border:1px solid #999; color:#000; }
.tree li.selected>span{border: 1px solid #2d99fb; color: #2d99fb; background-color: #f1f6fc;}

.tree-arrow, .tree-arrow ul { margin:0; padding:0; list-style:none; }
.tree-arrow ul { margin-left:1em; position:relative; }
.tree-arrow ul ul { margin-left:.5em; }
.tree-arrow ul:before { content:""; display:block; width:0; position:absolute; top:0;  bottom:0; left:0; border-left:1px solid;}
.tree-arrow li { margin:0; padding:0 1em; line-height:2em;   position:relative;display: list-item; }
.tree-arrow ul li:before {content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0;}
.tree-arrow ul li:last-child:before {background:#fff; height:auto; top:1em; bottom:0; }
.indicator { margin-right:5px;}
.tree-arrow li i { font-size:10px;}
.tree-arrow li button, .tree-arrow li button:active, .tree li button:focus {text-decoration: none; color:#369; border:none; background:transparent;   margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0;}

/* ui - tree type(2) */
.m-tree-wrap {width: 100%;min-width: 300px;height: 600px;padding: 5px;border: 1px solid #ddd;border-radius: 10px;}
.m-tree {height: 100%;overflow-x:hidden; overflow-y:auto; font-size:14px;}
.m-tree .selected, .m-tree .selected:hover {background:#E6EDF8; color:#003770; cursor: pointer;}
.m-tree.no-hover .m-top:hover {background: none;cursor: initial;}
.m-top:hover {background:#E6EDF8; cursor: pointer;}

.m-node {padding-left:1rem;}
.m-node .m-top {display:flex; align-items:center; padding-left:100%; margin-left:-100%; padding-right:100%; margin-right:-100%; padding-top:5px; padding-bottom:6px;}
.m-node .m-sub {padding-left:1rem;}
.m-node .m-top .menu-icon {display:flex; align-items: center; font-size:1.8rem;}
.m-node .m-top .menu-name {display:inline-block; margin-left:10px; user-select: none; white-space: pre-line;}
.m-node .m-top .menu-name.ellipsis {white-space: nowrap;}
.m-node .m-top .menu-icon-arrow {padding-right:1rem}
.m-node .m-top .remove-btn {margin-left: auto;margin-right: 5px;flex-shrink: 0;width: 22px;height: 22px;padding: 1px;border-radius: 6px;border: 1px solid transparent;background-color: transparent;}
.m-node .m-top .remove-btn > i {font-size: 16px;}
.m-node .m-top .remove-btn:hover {border: 1px solid #F3595A;background: #F3595A;}
.m-node .m-top .remove-btn:hover > i {color: #fff;}
.m-node .m-top .remove-btn {border-color: #FDDADA;}
.m-node .m-top .remove-btn > i {color: #E24243;}

/* ui - tree type(2) - line */
.tree-line .m-top {border-width:0 0 1px 0; border-style:solid; border-color:#ddd;}

/* ui - tree type(2) - round */
.tree-round .m-top {padding-left:0; margin-left:0; padding-right:0; margin-right:0;}
.tree-round .m-top {border-width:1px; border-style:solid; border-color:#ddd; border-radius:100px; margin-bottom:10px;}
.tree-round .m-top .menu-icon-arrow {padding-left:1rem; padding-right:0;}
.tree-round .m-top .menu-icon {padding-left:1.5rem;}
.tree-round .m-top .menu-name {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-round .m-sub {position: relative;}
.tree-round .m-sub:before {content:"";display:block;width:0;position:absolute;top: -10px;bottom: 20px;left:25px;border-left:1px solid #aaa;}
.tree-round .m-sub>.m-node>.m-top {position: relative;}
.tree-round .m-sub>.m-node>.m-top:before {content:"";display:block;width: 32px;height:0;border-top:1px solid #aaa;margin-top:-1px;position:absolute;top: 19px;left: -39px;}

/* ui - tree type(3) - bind */
.tree-bind .m-node {padding-left:0;}
.tree-bind .m-top {padding-left:0;margin-left:0;padding-right:0;margin-right:0;min-height: 33px;}
.tree-bind .m-top .menu-icon-arrow {padding-left:0; padding-right:0;}
.tree-bind .m-top .menu-icon {padding-left: 0.5rem;}
.tree-bind .m-top .menu-icon > i {font-size: 20px;color: #aaa;}
.tree-bind .m-top .menu-name {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-bind .m-sub {position: relative;padding-left: 1.65rem;}
.tree-bind .m-sub:before {content:"";display:block;width:0;position:absolute;top: 0;left: 12px;border-left:1px solid #aaa;height: calc(100% - 16px);}
.tree-bind .m-sub>.m-node>.m-top {position: relative;}
.tree-bind .m-sub>.m-node>.m-top:after {content:"";display:block;width: 14px;height:0;border-top:1px solid #aaa;margin-top:-1px;position:absolute;top: 17px;left: -11px;}
.tree-bind .m-sub>.m-node {position: relative;}
.tree-bind .m-sub>.m-node:last-child:before {content:''; position: absolute; top:16px; bottom:16px; left:-12px; width:10px; background:#fff;}

/* page - 조회조건 */
.search-wrap li {display:inline-block; margin-right:0.3rem; vertical-align: bottom;}
.search-wrap li .form-label .control {display: flex; align-items: center;}
.wave-between-date:before {content:'~'; display: inline-block; margin:0 2px; font-weight:600;}

/* ui - search */
.search-input {display:flex; align-items: center; justify-content: space-between; border:1px solid #ddd; padding-right:10px; background:#fff;}
.search-input i {display: block;  vertical-align: middle; cursor: pointer; margin-left:10px;}
.search-input input[type="text"] {display: block; width:calc(100% - 20px); border:none;}

/* ui - search-bar */
.search-bar {display: flex; align-content: center; align-items: center; position: relative;}
.search-bar input {padding:3px 35px 5px 15px; line-height:normal; font-size:14px; border:1px solid #ddd; border-radius: 4px;}
.search-bar a {position: absolute; right:0; top:50%; transform: translate(-50%, -50%);}
.search-bar.large input {padding:8px 56px 10px 25px; font-size:16px;}
.search-bar.large a {padding:10px 22px;}

/* page - main-search-bar */
.main-search-wrap {display: flex; align-items: flex-end; }
.main-search-bar {display: flex; align-content: center; align-items: center; position: relative;}
.main-search-bar input {padding:15px 60px 15px 30px; font-weight:600; font-size:1.2rem; border-radius:100px; border:1px solid transparent; background:#f1f1f1;}
.main-search-bar a {position: absolute; right:30px; top:15px;}

.main-search-wrap {height:290px; margin-bottom:60px;}
.bg-search {position: absolute; top:0; left:0; width:100%;}
.bg-search.item-1 img {position: absolute; top:80px; right:20%; width:270px; height:auto; }
    @media (max-width: 1280px){
        .bg-search.item-1 img {right:30px;}
    }

/* ui - notFound */
.not-found {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:38px; height:100%;}

/* ui - date */
.date-wrap {display:inline-block; vertical-align: middle; height:28px;}
.date-input {display:inline-flex; align-items: center; justify-content: space-between; border:1px solid #ddd; padding-right:.8rem; background: #fff; border-radius: 3px; }
.date-input i {display: block;  vertical-align: middle; cursor: pointer; line-height:26px;}
.date-input input[type="text"], .date-input input[type="date"] {display: block; width:calc(100% - 20px); border:none;}
.date-wrap .date-input:first-child {margin-right: 3px;}
.date-wrap .date-input:last-child {margin-left: 3px;}

/* ui - divide-border */
.divide-row {display:block; width:100%; height:1px;}
.divide-hor{display: inline-block; width: 1px; height: 1em; position: relative; top: 0.15em;}
.divide-gray {background:#ddd;}
.divide-black {background:#000;}
.divide-blue {background:#007bff;}

.dp-flex>.divide-hor{top: auto;}

/* ui - opacity */
.opacity-30 {opacity:0.3;}
.opacity-40 {opacity:0.4;}
.opacity-50 {opacity:0.5;}
.opacity-60 {opacity:0.6;}
.opacity-70 {opacity:0.7;}
.opacity-80 {opacity:0.8;}

/* ui - position */
.position-fixed {position: fixed; z-index: 1;}
.position-absolute {position: absolute;}
.position-relative {position: relative;}
[class*="position"].right {right:20px;}
[class*="position"].bottom {bottom:20px;}

/* ui - dropdown type(1) (전자결재 양식에서 쓰임) */
.dropdown-wrap {display: none; position: absolute;top:40px;right:-15px;z-index:10;box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.1); z-index:10;}
.dropdown-wrap:before {content: "";position: absolute;box-sizing: border-box;width: 11px;height: 11px;border: 5px solid #fff;border-width: 10px 10px;border-color: transparent transparent #d5d5d5 transparent;top: -20px;right: 13px;}
.dropdown-wrap:after {content: "";position: absolute;box-sizing: border-box;width: 10px;height: 10px;border: 5px solid #fff;border-width: 10px 10px; border-color: transparent transparent #fff transparent; top: -18px;right: 13px;} 

.dropdown-menu {background:#fff; border:1px solid #d5d5d5; border-radius:4px; overflow:hidden;}
.dropdown-menu li {margin-bottom:0;}
.dropdown-menu li a {display:block; padding:15px 25px 15px 21px; border-bottom:1px solid #ddd; white-space: nowrap; border-left:4px solid transparent;}
.dropdown-menu li a:hover {border-left-color:#003770;}
.dropdown-menu li:last-child a {border-bottom:none;}

/* ui - dropdown type(2) (회의체 홈에서 쓰임) */
.dropdown-list-wrap {position: relative;}
.dropdown-list {position: absolute; background: #fff; z-index:1; box-shadow: 3px 5px 7px 0px rgba(0,0,0,0.15); border:1px solid #ddd; border-radius:4px; overflow: hidden; display: none;}
.dropdown-list > li {margin:0;}
.dropdown-list > li > a {display: block; padding:8px 16px; border-bottom:1px solid #ddd; white-space: nowrap; font-size:0.9rem;}
.dropdown-list > li > a:hover {background:#f1f6fc;}
.dropdown-list > li:last-child > a {border:none;}
.dropdown-list.right {right:0;} /* 회의체 홈에서 쓰임 */  
.dropbtn {background:transparent; border:none;}
.show {display: block;}

/* ui - layer (일정 공유 버튼에서 쓰임) */
.ly-wrap {display:inline-block; position: relative;}
.ly-inner {background: gray; position: absolute; border:1px solid #ddd; background:#fff; z-index:2; text-align: left; box-shadow: 3px 5px 7px 0px rgb(0 0 0 / 10%);}
.ly-inner.ly-right {right:0;}
.ly-wrap .active.btn-gray-outline {border-color: #003770; background:#003770; color:#fff;}

/* gnb - sidePannel */
.side-pannel {display:none; z-index:99;}
.gnbclose, .gnbclose:hover {background:#0053a5; color:#fff; height:100%;}
.gnbclose i {vertical-align: bottom;}

.gnb-ly {position: fixed; top:0; right:0; width:391px; height:100vh; background:#fff; border-left:1px solid #ddd; z-index: 1;}
#gnbLyMask {position: fixed; top:0; bottom:0; right:0; left:0; background: rgba(0,0,0,0.5); z-index:1;}
.gnb-ly-head {position: relative; padding:10px 15px; border-bottom:1px solid #ddd; z-index: 2; background: #fff;}
.gnb-ly-body {position: relative; height:100%; overflow-y:auto; z-index: 2; background: #fff;}
.gnb-ly-body .tab-content {height:calc(100vh - 125px); overflow: auto;}

.gnb-ly.auto {position: absolute; top:60px; right:10px; min-width:520px; background:#fff; border:1px solid #013a72; border-radius:10px;}

/* gnb - search */
#gnbSearch .gnb-ly-body {height:calc(100vh - 110px);}

/* gnb - quickmenu */
#gnbQuick {width: 457px;}
#gnbQuick .dp-flex.vertical-top.flex-between>div ul li {display: flex;}
#gnbQuick .dp-flex.vertical-top.flex-between>div ul li a {flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height:1.4; max-height:2.8em; white-space:normal;  word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#gnbQuick .dp-flex.vertical-top.flex-between>div ul li span {margin-top:10px;}

.gnbclose, .gnbclose:hover {background:#0053a5; color:#fff; height:100%;}
.gnbclose i {vertical-align: bottom;}

/* gnb - system 20221205 */
#gnbSystem .gnb-ly-head h6 {font-weight: 700;letter-spacing: -1px;color: #000073;}
#gnbSystem .gnb-ly-head h6 span {font-weight: 400;}
#gnbSystem .gnb-ly-body {height: calc(100% - 75px);}
#gnbSystem .system-list-wp {padding: 0 17px 38px 24px;}
#gnbSystem .system-list-wp .system-list {overflow: auto;}
#gnbSystem .system-list-wp .system-list li {display: flex;border-bottom: 1px dashed #DADCE0;margin: 0;padding: 12px 0;}
#gnbSystem .system-list-wp .system-list li .system-icon {width: 44px;height: 44px;background: #EDF2FF;border-radius: 99px;text-align: center;line-height: 40px;margin-right: 12px;overflow: hidden}
#gnbSystem .system-list-wp .system-list li .system-icon img {width: 100%}
#gnbSystem .system-list-wp .system-list li .system-link a {font-weight: 500;font-size: 15px;line-height: 100%;letter-spacing: -1px;color: #000000;}
#gnbSystem .system-list-wp .system-list li .system-link a:hover {color: #003770;}
#gnbSystem .system-list-wp .system-list li .system-link p {font-weight: 400;font-size: 12px;letter-spacing: -1px;color: #747474;margin: 0;}
#gnbSystem .system-list-wp .system-list li .system-bookmark {font-size: 17px;color: #C0C0C0;margin-left: auto;padding: 0;border: none;background: none;}
#gnbSystem .system-list-wp .system-list li .system-bookmark .icon-fux-star-fill {color: #FF8A00;}



/* gnb - 알림 */
#gnbNoti .circle i {position: relative; top:2px;}

/* gnb - siteMap */
#siteMap {position:fixed; display: none; width:50%; height:100%; top:0; right:0; left:0; bottom:0; overflow-y: auto; overflow-x:hidden; z-index: 1; transition:0.5s;}
#siteMapMask {display: none; position: fixed; top:0; left:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 1;}

@media (max-width: 1200px){
    #siteMap {width:100%;}
}

.sitemap-container {position: relative; display: flex; flex-direction: column; width:100%; height: 100%; padding:10px 0 30px 30px; background: #fff; z-index: 2; white-space: nowrap;}

.sitemap-head {display: flex; align-items: center;}
.sitemap-head .sitemap-nav {display: flex;}
.sitemap-head .sitemap-nav .sitemap-link {display: block; padding:2px 15px 3px 15px; margin-right:10px; border:1px solid #ddd; border-radius:100px;}
.sitemap-head .ml-auto .btn {padding:20px;}

.sitemap-body {flex:1; overflow-y: auto; overflow-x: hidden; padding-right:30px;}
.sitemap-body .section {display: flex; align-items: flex-start; padding-top:15px; border-top:1px dotted #000;}
.sitemap-body .section .heading {width:110px; margin-right:20px; padding-top:3px; white-space: initial; word-break: break-all;}
.sitemap-body .section .heading h3 {color: #b7b7bb; font-weight: 300; font-size:1.4rem; padding-bottom:20px;}

.list-sitemap {position: relative; border-radius:4px; flex:1;}
.list-sitemap:after {content:""; display:block; clear:both;}
.list-sitemap li {margin:0;}
.list-sitemap li a {width:100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 
.list-sitemap li ul li .menu {display: flex; width:100%;}
.list-sitemap li ul li .menu .name {padding:3px 0 3px 10px; font-size:14px;}
.list-sitemap li ul li .menu .name:hover {background:#003770; color:#fff;}
.list-sitemap>li {width:25%; float:left; overflow: hidden; margin-bottom:30px;}
.list-sitemap>li:nth-child(4n+1) {clear: both;}
.list-sitemap>li>.menu {display: flex; align-items: center; margin-bottom:5px;}
.list-sitemap>li>.menu>.name {padding:5px 0 5px 10px; font-weight:600; width: auto;}
.list-sitemap>li>.menu>.more {margin-left:5px; font-size:12px; cursor: pointer;}
/*.list-sitemap>li:first-child>.menu:after {content:''; display: block; position: absolute; top:34px; width:100%; height:1px; background:#000;}*/

/* organization */
.bg-org {background:#f3f6f9;}
.org-btn-gp {display: flex; flex:none; justify-content: center; align-content: center; align-items: center; flex-direction: column; margin-right:20px;}
.org-btn-gp button {margin:5px 0;}

/* organization - tabcontent */
.tab-content .org-wrap>[class*="col"]>.card {max-height:calc(100vh - 152px);}

/* organization - 합의 */
.org-gp td:first-child {border: 0 !important;}
.org-gp td:nth-child(2) {border-left:1px solid #ddd; border-top-left-radius: 4px; border-bottom-left-radius: 4px; position: relative;}
.org-gp td:nth-child(2):before {content:''; position: absolute; width:0; height:100%; border-left:1px solid #aaa; top:-9px; left:-14px;}
.org-gp td:nth-child(2):after {content:''; position: absolute; width:13px; border-top:1px solid #aaa; top:21px; left:-14px;}
.org-gp.selected td:first-child, .org-gp.selected td:first-child:hover {background:transparent;}

.org-chart-dept .area-flex-column, .org-chart-user .area-flex-column {background:#fff; border-radius: 6px; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.15); }
.org-chart-dept .area-flex-column {padding:10px;}
.org-chart-user .area-flex-column .area-scroll-hide {padding:10px 10px 0 10px;}
.org-chart-user .area-flex-column .grd-wrap {padding:0 10px;}
.org-chart-dept .tree-bind > .m-node:first-child > .m-top > .menu-name {font-weight: 600;}
.org-chart-user .grd-content {flex-basis: 0;}

.org-target-wrap { display: flex; flex-direction: column; justify-content: flex-start;flex: 1; height: 100%; overflow: auto;}
.org-target-head {font-size:14px; padding:15px 0 4px 6px;}
.org-target-body {overflow-y:auto; flex:1; flex-basis: 0; border-width:2px; border-style: solid; border-color:#a1abb7; background: #fff;}
.org-target-list {font-size:14px;}
.org-target-list li {margin:0;}
.org-target-list li .dp-flex { padding:3px 6px 5px 6px;}
.org-target-list li .dp-flex, .org-target-list li .dp-flex label {cursor: pointer;}
.org-target-list>li>.dp-flex {border-bottom:1px solid #ddd;}
.org-target-list li.selected >.dp-flex {background:#d7dde5;}
.org-target-list li ul {border-bottom:1px solid #ddd;}
.org-target-list li ul li {border-bottom:none; padding-left:25px; }
.org-target-list li .checkbox label {padding-right:0;}
.org-target-none {font-size:14px; color:#828da7; display: flex; justify-content: center; align-items: center; height: 100%; font-weight: 300;}

.org-container .area-flex-column > .dp-flex:first-child .org-target-head {padding-top:3px;}

/* organization :: 사용자 상세정보 */
.org-user-detail {display: flex; flex-direction: column; border-top:1px solid #ccc; padding:20px 15px 15px 20px; box-shadow: 0px -10px 10px 0 rgb(0 0 0 / 5%);  border-top-right-radius: 20px; border-top-left-radius: 20px; max-height:210px;}
.org-user-detail .photo {width:70px; height:70px;}
.org-user-detail table {word-break: break-all;}

/* editor - 윤컴즈 */
.kk_editor .kk_editor_toolbar .menus .menu .menu_selectbox {height:auto !important;}
.kk_editor .kk_editor_toolbar .menus .menu .menu_selectbox:hover {color:#444 !important;}
.kk_editor .kk_editor_toolbar .menus .menu .menu_selectbox .ui_selectbox .arrow {top:0 !important;}

/* ui - autocomplete */
.autocomplete-wrap {position: relative;}
.list-autocomplete {position: absolute; width:100%; max-height:250px; overflow-y: auto; overflow-x: hidden; margin-top:-1px; background: #fff; z-index: 1; border:1px solid #ddd; box-shadow: 3px 5px 7px 0px rgba(0, 0, 0, 0.1);}
.list-autocomplete li {border-bottom:1px solid #ddd; margin:0; padding:5px 10px 5px 15px; display: block;}
.list-autocomplete li:last-child {border-bottom:none}
.list-autocomplete li:hover {background:#f3f3f3; cursor: pointer;}
.list-autocomplete li h6 {padding:0;}
.list-autocomplete li * {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/* page - 게시판(답글) */
.reply{margin-top: 20px; background-color: rgba(0,0,0,0.03); padding-left: 50px; padding-right: 15px;}

/* page - 게시판(게시글 작성 본문) */
.board-main-text{flex: 1;min-height: 150px;}
.board-main-text textarea{height: 100%;}

/* page - 게시판(댓글입력창) */
.comment-write-wrap{display: flex; width:100%;}
.comment-write-wrap textarea{flex: 1;border-right: none;padding: 8px;}
.comment-write-wrap .btn{margin: 0;padding: 0 20px;border-radius: 0 .25rem .25rem 0;}

/* page - 게시판(댓글, 추천 탭) */
.nav-tabs.arrow>li>a:after{content:'';display: inline-block;width: 10px;height: 10px;border-width: 3px 3px 0 0; border-style: solid;border-color: #000;margin-left: 8px;transform: translateY(-4px) rotate(135deg);}
.nav-tabs.arrow>li.active>a:after{transform: translateY(1px) rotate(-45deg);border-color: #0053a5;}

/* ui - fileUploader */
.dropzone {background:#f1f6fc; color:#086bc4; border-radius:4px; border:2px dashed #a6cbff; padding:10px 0; text-align:center;}
.dropzone:hover, .dropzone.hover {background:#f1f1f1; border-color:#ccc;}
.dropzone:hover *, .dropzone.hover * {color:#000;}

/* ui - marquee */
.marquee {overflow:hidden; margin-bottom:10px; position:relative;}
.marquee p:hover {-moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused;}
.marquee p:after {content:""; white-space:nowrap; padding-right:50px;}
.marquee p {
  margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/* ui - accordion */
.accordion {position: relative;}
.accordion input {display: none;}
.accordion label {cursor: pointer;}
.accordion .accordion-content {overflow: hidden;transition: max-height 0.3s;max-height: 0;}
.accordion input:checked ~ .accordion-content { max-height: 100vh; }
.accordion.pre-arrow label {padding-left:20px;}
.accordion.pre-arrow label::before {content: "\25b6";position: absolute;left:0; top:0;display: block;transition: all 0.4s; font-size:0.9em;}
.accordion.pre-arrow input:checked ~ label::before {transform: rotate(90deg);}

/* page - 일정(월간, 주간, 일간) */
.tbl-schedule-month, .tbl-schedule-week, .tbl-schedule-day {height:100%; flex:1; table-layout: fixed; border-collapse: collapse;}
.tbl-schedule-month thead th, .tbl-schedule-week thead th, .tbl-schedule-day thead th { border-top:1px solid #ddd; border-bottom:1px solid #acacac; padding:5px 10px; line-height:1.5; background:#f1f1f1; text-align: left;}
.tbl-schedule-month tbody tr td, .tbl-schedule-week tbody tr td, .tbl-schedule-day tbody tr td { border-width:1px 0; border-style:solid; border-color:#ddd; vertical-align: top; overflow:hidden;}
.tbl-schedule-month tbody tr td:first-child, .tbl-schedule-week tbody tr td:first-child, .tbl-schedule-day tbody tr td:first-child {border-left:none;} 

/* page - 일정(월간) */
.tbl-schedule-month tbody {flex:1; height:100%;}
.tbl-schedule-month tbody tr td:last-child {border-right:none;} 
.tbl-schedule-month tbody tr td.selected {background:rgba(45, 153, 251, 0.2);}
.tbl-schedule-month tbody tr td .td-wrap {height:1px; position: relative;}
.tbl-schedule-month tbody tr td.today .td-wrap:before {content:''; display: block; width:100%; height:4px; position: absolute; top:-1px; background:#003770;}
.tbl-schedule-month tbody tr td .td-wrap .date {padding:5px 10px 2px 10px;}
.tbl-schedule-month tbody tr td .td-wrap .item-wrap .item {white-space: nowrap; text-overflow: ellipsis; overflow:hidden; position: relative; padding:2px 1px 3px 8px; position: relative; font-size:13px; border-radius:3px; margin-bottom:4px; letter-spacing: 0.4px;}
.tbl-schedule-month tbody tr td .td-wrap .item-wrap .item .text {font-weight: 500;}
.tbl-schedule-month tbody tr td .td-wrap .item-wrap .item.line-clamp-2 {white-space: normal;}
.tbl-schedule-month tbody tr td .td-wrap .item-wrap .item .category {width:4px; height:100%; top:0; left:0; position: absolute; display: inline-block;}
.tbl-schedule-month tbody tr td .td-wrap .item-wrap .item .item-detail {position: absolute;}

.tbl-schedule-month tbody .last-month, .tbl-schedule-month tbody .next-month {background:#fafafa;}
.tbl-schedule-month tbody .last-month *, .tbl-schedule-month tbody .next-month * {opacity: 0.7;}

/* page - 일정(주간, 일간) */
.tbl-schedule-week thead tr th:first-child, .tbl-schedule-week tbody tr td:first-child, .tbl-schedule-day thead tr th:first-child, .tbl-schedule-day tbody tr td:first-child {text-align:right;}
.tbl-schedule-week tbody tr td, .tbl-schedule-day tbody tr td {height:24px;}
.tbl-schedule-week tbody tr td .td-wrap .item-wrap, .tbl-schedule-day tbody tr td .td-wrap .item-wrap {display: flex;}

/* page - 일정(공통) */
.schedule-month,
.schedule-week,
.schedule-day {display: flex; flex-direction: column; flex:1; height:100%; font-size:13px;}

.schedule-month .head,
.schedule-week .head,
.schedule-day .head {font-weight:500;}

.schedule-month .head-wrap,
.schedule-week .head-wrap,
.schedule-day .head-wrap {display: flex; align-items: center; width:100%; border-top:1px solid #ddd; border-bottom:1px solid #acacac; line-height:1.5; background:#f1f1f1;}

.schedule-month .head-wrap .head,
.schedule-week .head-wrap .head {width:100%; padding:1px 0 2px 10px;}

.schedule-month .body-wrap {overflow-y: auto; overflow-x:hidden; display: flex; flex-direction: column; justify-content: space-between; flex:1; height: 100%;}
.schedule-month .body-wrap .week {display: flex; flex:1; height: 100%; min-height: 116px;}
.schedule-month .body-wrap .week:last-child {border-bottom:none;}

.schedule-month .body-wrap .week .day.selected,
.schedule-week .body-wrap .rows .data.selected {background:rgba(45, 153, 251, 0.2);}

.schedule-month .body-wrap .item-wrap .item:hover,
.schedule-week .body-wrap .item-wrap .item:hover {cursor: default;}

.schedule-month .body-wrap .item-wrap .item .time,
.schedule-month .body-wrap .item-wrap .item .contents,
.schedule-week .body-wrap .item-wrap .item .time,
.schedule-week .body-wrap .item-wrap .item .contents {font-family:'malgun gothic', sans-serif, '돋움','dotum','굴림';}

.schedule-month .body-wrap .item-wrap .item .contents,
.schedule-week .body-wrap .item-wrap .item .contents {font-weight: 600;}

.schedule-month .body-wrap .item-wrap .item .item-detail,
.schedule-week .body-wrap .item-wrap .item .item-detail {position: absolute; background: #fff; border:1px solid #eaeaea; border-radius:6px; padding:10px; box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px; z-index: 1; width:380px; visibility: hidden; opacity: 0; }
.schedule-month .body-wrap .item-wrap .item:hover .item-detail,
.schedule-week .body-wrap .item-wrap .item:hover .item-detail {visibility: visible; opacity: 1;transition:0.2s; transition-delay: 0.8s;}
.schedule-month .body-wrap .item-wrap .item .item-detail table th,
.schedule-week .body-wrap .item-wrap .item .item-detail table th {font-size:13px;}
.schedule-month .body-wrap .item-wrap .item .item-detail table td,
.schedule-week .body-wrap .item-wrap .item .item-detail table td {font-size:13px; word-break: break-all;}
.schedule-month .body-wrap .item-wrap .item .item-detail table td span,
.schedule-week .body-wrap .item-wrap .item .item-detail table td span {color:#000;}

/* page - 일정(월간) */
.schedule-month .body-wrap .week .day {display: flex; flex-direction: column; justify-content: space-between; flex:1; border-bottom:1px solid #ddd; width:100%; height:100%; min-height:116px; cursor: default; position: relative;}
.schedule-month .body-wrap .week:last-child .day {border-bottom: none;}
.schedule-month .body-wrap .week .day.last-month {background:#faf9f8;}
.schedule-month .body-wrap .week .day.next-month {background:#faf9f8;}
.schedule-month .body-wrap .week .day.today:before {content:''; position: absolute; top:-1px; width:100%; height:2px; background:#259aef;}
.schedule-month .body-wrap .week .day .date {font-size:13px; font-weight:400; padding:0 10px; color:#666;}
.schedule-month .body-wrap .week .day .more {text-align:right; font-size:13px; font-weight:500;}
.schedule-month .body-wrap .week .day .more {text-align:right; font-size:13px; font-weight:500;}

.schedule-month .body-wrap .week .day .item-wrap {flex:1;}
.schedule-month .body-wrap .week .day .item-wrap .item {margin:0 1px 3px 1px; position: relative; transition:0.2s; border-radius: 2px; letter-spacing: 0.2px; padding:3px 6px;}
.schedule-month .body-wrap .week .day .item-wrap .item .line-clamp-1 {display: flex; justify-content: space-between;}
.schedule-month .body-wrap .week .day .item-wrap .item .line-clamp-1 .time {flex:none; margin-right:5px;}
/*.schedule-month .body-wrap .week .day .item-wrap .item .line-clamp-2 .rotate {position: absolute; top:22px; right:2px;}*/
.schedule-month .body-wrap .week .day .item-wrap .item .contents {word-break: break-all;}

/* page - 일정(주간) */
.schedule-week .body-wrap {display: flex; flex-direction: column; justify-content: flex-start; overflow: auto;}
.schedule-week .head-wrap .head:first-child {text-align: right;}

.schedule-week .head-wrap .head:first-child,
.schedule-week .body-wrap .rows .data:first-child{width: 65px; flex:none;}

.schedule-week .head-wrap .head:first-child,
.schedule-week .body-wrap .rows .data:first-child {padding-right:6px;}

.schedule-week .body-wrap .rows {display: flex; width:100%;}
.schedule-week .body-wrap .rows .data {width:100%; height: 30px; border-width:0 1px 1px 0; border-style:solid; border-color:#ddd;}
.schedule-week .body-wrap .rows .data .time {font-weight:400; text-align: right; font-size:13px;}
.schedule-week .body-wrap .rows .data .item-wrap {display: flex; align-items: flex-start;}
.schedule-week .body-wrap .rows .data .item-wrap .item {overflow: hidden; line-height:1.16; letter-spacing: 0.6px; width:100%; word-break:break-word; transition:0.2s;}


.schedule-week .body-wrap .timeline {height: 100%; align-items: flex-start; overflow-y:scroll;}
.schedule-week .body-wrap .timeline .rows .data .item-wrap {position: relative;}
.schedule-week .body-wrap .timeline .rows .data .item-wrap .item {margin:0 1px;}
.schedule-week .body-wrap .timeline .rows:nth-child(2n-1) .data {border-bottom-style:dashed;}
.schedule-week .body-wrap .timeline .rows:nth-child(2n-1) .data:first-child {border-bottom:none;}


.schedule-week .body-wrap .all-day {display: flex; flex:none; background: #faf9f8; overflow-y:scroll;}
.schedule-week .body-wrap .all-day .rows .data {height:60px;}
.schedule-week .body-wrap .all-day .rows .data .item-wrap {flex-direction: column;}
.schedule-week .body-wrap .all-day .rows .data .item-wrap .item {margin-bottom:2px;}
.schedule-week .body-wrap .all-day .rows .data .item-wrap .item:last-child {margin-bottom:0;}





/* page - 일정(일간) */
.schedule-day .body-wrap .column .data .item-wrap .item {width:100%;}

.list-schedule li {padding:8px 10px 10px 16px; margin:0; border-bottom:1px solid #eaeaea; position: relative;}
.list-schedule li:hover {background:#f1f1f1; cursor: pointer;}
.list-schedule li .category {width:6px; height:100%; position: absolute; top:0; left:0;}
.list-schedule li .flex-shrink-0 {width:62px;}

.list-schedule.reservation li:hover {background:transparent;}
.list-schedule.reservation il.selected:hover, .list-schedule li.selected {background:#f1f1f1 !important;}
.list-schedule.reservation .flex-shrink-0 {text-align: right;}

/* page - 일정(좌측메뉴 미니캘린더) */
.mini-calendar .calendar-head {margin-bottom:10px;}
.mini-calendar .calendar-head a {font-size:1rem;}
.mini-calendar .calendar-body .tbl-calendar td {height:30px;}
.mini-calendar .calendar-body .tbl-calendar td a {font-size:13px; width:auto; height:auto; border-radius:0; display: block;}
.mini-calendar .calendar-body .tbl-calendar td.today a {border:1px solid #003770; background:#fff; color:inherit;}
.mini-calendar .calendar-body .tbl-calendar td.selected a {background:#003770; color:#fff;}

/* page - 일정(범주) */
.schedule-category {display: inline-block;  width:16px; height:16px; border-radius:100px;}

/* page - 일정(항목 hover시, 화살표 모양) */
.schedule-month .body-wrap .week .day .item-wrap .item .item-detail.direction-right {top:-100%; left:calc(100% + 20px);}
.schedule-month .body-wrap .week .day .item-wrap .item .item-detail.direction-left {top:-100%; right:calc(100% + 20px);}
.schedule-week .body-wrap .item-wrap .item .item-detail.direction-right {bottom:-20%; left:calc(100% + 20px);}
.schedule-week .body-wrap .item-wrap .item .item-detail.direction-down {bottom:calc(100% + 20px)}
.schedule-week .body-wrap .item-wrap .item .item-detail.direction-down .arrow-down {width:0; height:0; border-left:10px solid transparent; border-right: 10px solid transparent; border-top:20px solid #ddd; top:100%; left:calc(50% - 20px);}

.arrow-up {width:0; height:0; border-left:10px solid transparent; border-right: 10px solid transparent; border-bottom:20px solid #555;}
.arrow-down {width:0; height:0; border-left:10px solid transparent; border-right: 10px solid transparent; border-top:20px solid #555;}
.arrow-left {width:0; height:0; border-top:10px solid transparent; border-right: 20px solid #ddd; border-bottom:10px solid transparent;}
.arrow-right {width:0; height:0; border-top:10px solid transparent; border-left: 20px solid #ddd; border-bottom:10px solid transparent;}

.arrow-left .empty {position: absolute; top:-9px; left:2px; width:0; height:0; border-top:9px solid transparent; border-right: 18px solid #fff; border-bottom:9px solid transparent;}
.arrow-right .empty {position: absolute; top:-9px; right:2px; width:0; height:0; border-top:9px solid transparent; border-left: 18px solid #fff; border-bottom:9px solid transparent;}
.arrow-down .empty {position: absolute; bottom:2px; left:-9px; width:0; height:0; border-left:9px solid transparent; border-right: 9px solid transparent; border-top:18px solid #fff;}

.arrow-up {position: absolute; left:-20px; top:calc(50% - 10px);}
.arrow-down {position: absolute; left:-20px; top:calc(50% - 10px);}
.arrow-left {position: absolute; left:-20px; top:calc(50% - 10px);}
.arrow-right {position: absolute; right:-20px; top:calc(50% - 10px);}

/* page - 예약현황조회 */
.gantt {display: flex; flex-direction: column; height: 100%;}
.gantt ul li {margin:0;}
.gantt .head {border:1px solid #ccc; border-left:0; border-right:0;}
.gantt .content {flex:1;}
.gantt .head, .gantt .content {display: flex; overflow-y: scroll; overflow-x:hidden;}
.gantt .head .area-sticky {display: flex; align-items: center; justify-content: center;}
.gantt .head .area-sticky, .gantt .content .area-sticky {width:147px; flex-shrink: 0;}
.gantt .head .area-scroll, .gantt .content .area-scroll {flex:1;}

.gantt-head-top {text-align: center; background:#f1f1f1; border:1px solid #ccc; border-top:0; border-right:0; padding:3px 0 5px 0;}
.gantt-head-second {display: flex; justify-content: space-between;}
.gantt-head-second li {display: block; width:100%; padding:8px 0; text-align:center; border-left:1px solid #eee;}
.gantt-head-second li.holiday {background:#ffedf3; color:red;}

.gantt-item li, .gantt-item-content li {display: flex; align-items: center; width:100%; height:40px; border:1px solid #eee; border-right:0; border-top:0;}
.gantt-item-content {display: flex; justify-content: space-between;}
.gantt-item-content li > span {display: block; width:100%; height:100%;}
.gantt-item-content li > span.true {background:#ceeaff;}
.gantt-item-content li.selected > span {background:#f1f1f1; border:3px solid #bbb;}
.gantt-item-content li.selected > span.true {background:#6aafe2; border:3px solid #0263aa;}
.gantt-item li {overflow: hidden; border-left-color:transparent;}
.gantt-item li span {text-indent: 10px;}
.gantt-head-second li:first-child, .gantt-item-content li:first-child {border-left-color: #ccc;}

/* page - 예약 */
.resource-info-wrap .right {margin-bottom:30px;}
.resource-info-swipe {width: 250px !important;} /* 예약 자원정보팝업 */
.resource-info-swipe .item {height: 150px; background: #ddd; position: relative;}
.resource-info-swipe .item img {position: absolute; transform:translate(50%, -50%); top:50%; right:50%; width: 100% !important; height: 100% !important;}

/* page - 아이콘 토글색상 (서브페이지상단 즐겨찾기, 예약자원정보 즐겨찾기) */
.icon-toggle.off{color: #ddd;}
.icon-toggle.on{color: #ffa200;}

/* page - 환경설정 */
.setting-wrapper {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; border-top:1px solid #ddd;}
.setting-wrapper .nested-tab-wrap.vertical .nested-tab-nav .search-bar {margin:10px;}

/* ui - nested-tab vertical (환경설정에서 쓰임) */
/* ui - 탭 구조 */
.nested-tab-wrap.vertical {display: flex; height: 100%;}
.nested-tab-wrap.vertical .nested-tab-nav {width:200px; background:#f3f6f9; border-right:1px solid #ddd; overflow: auto; flex-shrink: 0;}
.nested-tab-wrap.vertical .nested-tab-content {height:100%; flex:1;}
.nested-tab-wrap.vertical .nested-tab-content .nested-tab-panel {display: none; width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; overflow: hidden; word-break: break-all;}
.nested-tab-wrap.vertical .nested-tab-content .nested-tab-panel.active {display: flex;}

/* ui - 탭 메뉴 */
.nested-tab-wrap.vertical .nested-tab-nav li {margin:0;}
.nested-tab-wrap.vertical .nested-tab-nav .menu-icon {margin-right:8px;}
.nested-tab-wrap.vertical .nested-tab-nav .nested-tab {display: block; padding: 7px 15px 9px 15px; transition:0.2s;}
.nested-tab-wrap.vertical .nested-tab-nav .nested-tab:hover {background:#f1f1f1; color:inherit;}
.nested-tab-wrap.vertical .nested-tab-nav .nested-tab:active {background:#eaeaea;}
.nested-tab-wrap.vertical .nested-tab-nav .nested-tab.active, .nested-tab-wrap.vertical .nested-tab-nav .nested-tab.active:hover {background: #ceeaff; color: #003770; font-weight:600;}

/* ui - 탭 콘텐츠 (환경설정) */
.setting-wrapper .nested-tab-panel .panel-header {padding:15px 20px 10px 20px;}
.setting-wrapper .nested-tab-panel .panel-header .subject {margin:0; font-size:1.4rem;}
.setting-wrapper .nested-tab-panel .panel-content {padding:0 20px; overflow: auto; flex:auto;}
.setting-wrapper .nested-tab-panel .panel-content > .item {border-bottom:1px solid #ddd; margin-top:20px; padding-bottom:20px;}
.setting-wrapper .nested-tab-panel .panel-content > .item:last-child {border-bottom:none;}
.setting-wrapper .nested-tab-panel .panel-content > .item.no-border {margin-bottom:0;}
.setting-wrapper .nested-tab-panel .panel-content > .item .heading {margin-bottom:10px;}
.setting-wrapper .nested-tab-panel .panel-content > .item .heading > span.title {font-weight:600;}
.setting-wrapper .nested-tab-panel p.description {font-size:14px; margin-bottom:10px;}

.setting-wrapper .nested-tab-panel .panel-footer {border-top:1px solid #ddd; padding:15px 20px;}

/* page - 프로필사진추가 (관리자, 마이페이지에서 쓰임) */
.user-profile-uplode{width: 140px; height: 179px; background-color: #ddd; position: relative;}
.user-profile-uplode img{width: 100%;}
.user-profile-uplode .btn{position: absolute; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3); color: #fff; width: 100%; height: 30%; border-radius: 0; margin: 0;}
.user-profile-uplode .btn:hover{background-color: rgba(0,0,0,0.5);}

/* page - error */
.error-wrap {width:100%; height:100%; position: fixed; top:0; left:0; right:0; bottom:0; overflow: auto; background:#f3f3f3;}
.error-container {margin:0 auto; max-width:960px; padding:100px 40px 40px 40px;}

/* page - login */
.container-login {width:100%; height:100%; position: absolute; display: flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.bg-login {z-index:-1; background-image: url(../images/bg_login.jpg); background-repeat: no-repeat; background-size:cover; position: fixed; top:0; left:0; width:100%; height:100%; animation-name:bg-login-scale; animation-duration:4s; animation-fill-mode:forwards;}
    @keyframes bg-login-scale {
      0%   {transform: scale(1.0);}
      100% {transform: scale(1.1);}
    }
.form-login {width:100%; max-width:520px; border-radius:10px; overflow:hidden; padding:40px 25px 45px 25px; }
.login-bg-white {background:rgba(255,255,255,.95);}

.logo-login img {vertical-align: middle;}
.logo-login .divide-hor {height:60px; vertical-align: middle; top:2px;}
.login-service-name {font-size:1.6rem; vertical-align: middle; font-weight: 400; color:#888;}

.login-btn { padding:14px; color:#fff; font-size: 1.714rem; font-weight:500;}

.bg-logout {background-image: url(../images/bg_logout.jpg);}
.bg-sso {background-image: url(../images/bg_sso.jpg);}
.bg-error {background-image: url(../images/bg_error.jpg);}
.bg-logout, .bg-sso, .bg-error {z-index:-1; background-repeat: no-repeat; background-size:cover; position: fixed; top:0; left:0; width:100%; height:100%; animation-name:bg-logout-scale; animation-duration:4s; animation-fill-mode:forwards;}
    @keyframes bg-logout-scale {
      0%   {transform: scale(1.1);}
      100% {transform: scale(1.0);}
    }

@media (max-width: 520px){
    #wrapper-login .login-text { font-size: 1.2rem; }
    #wrapper-login .login-text p { font-size: 2rem; }
}


/* page - main */
.w-row {width:100%; display: flex; align-items: flex-start; justify-content: space-between;}
.w-col {width:100%; display: flex; flex-direction: column; flex:1;}
.wpart {width:100%;}

/* wpart - calendar */
.calendar-head {display: flex; justify-content: space-between; align-items: center; margin-bottom:20px; font-weight:600;}
.calendar-head a {font-size:16px;}
.calendar-body .tbl-calendar th, .calendar-body .tbl-calendar td {text-align: center; vertical-align: top; font-weight:400;}
.calendar-body .tbl-calendar td {height:47px;}
.calendar-body .tbl-calendar td a {display: inline-block; width:30px; height:30px; border-radius:100px; padding:2px; font-size:15px;}
.calendar-body .tbl-calendar td a:hover {background:#f1f1f1;}
.calendar-body .tbl-calendar td.holiday a,
.calendar-body .tbl-calendar th.holiday {color:red;}
.calendar-body .tbl-calendar td.today a {background:#32bce9; color:#fff; margin-bottom:4px;}
.calendar-body .tbl-calendar td.selected a {background:#bbb; color:#fff; margin-bottom:4px;}
.calendar-body .tbl-calendar td.next-month a, .calendar-body .tbl-calendar td.prev-month a, .calendar-body .tbl-calendar td.last-month a {color:#ccc;}
.calendar-body .tbl-calendar td .plan-wrap.m-t-s {margin-top:-2px !important;}

.list-calendar {border-top:1px solid #ddd; height:228px; overflow:auto;}
.list-calendar h6 {padding:0;}
.list-calendar li {margin-bottom:0;}
.list-calendar li a {display: block; border-bottom:1px solid #ddd; padding:5px 0;}

.plan-wrap {display: flex; justify-content: center;}
.plan-circle {display: inline-block; width:7px; height:7px; border-radius:100px; margin:0 2px;}
.plan-line {display: inline-block; width:3px; height:40px; vertical-align: middle;}
.plan-orange {background:#f4a016;}
.plan-green {background:#00ac4f;}
.plan-blue {background:#007bff;}
.plan-red {background:#d92550;}
.plan-purple {background:#6a4ff6;}
.plan-gray {background:gray;}

.progress-bar {display: block; width:100%; height:5px; position: relative; background:#ddd;}
.filled {position: absolute; top:0; left:0; height:100%;}
.progress-green {background:#00ac4f;}
.progress-blue {background:#259aef;}

/**** pc media query ****/
@media (min-width: 500px) and (max-width: 767px){
    
}

@media (min-width: 768px) and (max-width: 1024px){

}

@media (min-width: 1025px) and (max-width: 1250px){
    
}

@media (min-width: 1251px) and (max-width: 1280px){
    
}

@media (min-width: 1281px) and (max-width: 1366px){
    
}

@media (min-width: 1367px) and (max-width: 1535px){
    
}

@media (min-width: 1536px) and (max-width: 1600px){
    
}

@media (min-width: 1601px){
    
}
/**/
.new-category label {margin-bottom:30px;}

/* page - 일정, 예약 항목 컬러 */
.bg-category-1 {background:rgba(55, 195, 254, 1);}
.bg-category-2 {background:rgba(1, 207, 201, 1);}
.bg-category-3 {background:rgba(255, 119, 119, 1);}
.bg-category-4 {background:rgba(255, 164, 81, 1);}
.bg-category-5 {background:rgba(255, 200, 10, 1);}
.bg-category-6 {background:rgba(157, 233, 107, 1);}
.bg-category-7 {background:rgba(255, 175, 254, 1);}
.bg-category-8 {background:rgba(254, 121, 169, 1);}
.bg-category-9 {background:rgba(162, 156, 254, 1);}
.bg-category-10 {background:rgba(102, 96, 232, 1);}

.bg-category-1-o {background:rgba(55, 195, 254, 1) !important;}
.bg-category-2-o {background:rgba(1, 207, 201, 1) !important;}
.bg-category-3-o {background:rgba(255, 119, 119, 1) !important;}
.bg-category-4-o {background:rgba(255, 164, 81, 1) !important; }
.bg-category-5-o {background:rgba(255, 200, 10, 1) !important;}
.bg-category-6-o {background:rgba(157, 233, 107, 1) !important;}
.bg-category-7-o {background:rgba(255, 175, 254, 1) !important;}
.bg-category-8-o {background:rgba(254, 121, 169, 1) !important;}
.bg-category-9-o {background:rgba(162, 156, 254, 1) !important;}
.bg-category-10-o {background:rgba(102, 96, 232, 1) !important;}

.item[class*="bg-category-"] {border-width:0 0 0 5px; border-style:solid;}

.item.bg-category-1-o {background:rgba(55, 195, 254, 0.3) !important; border-color:rgba(55, 195, 254, 1); color:rgba(0, 96, 137, 1);}
.item.bg-category-2-o {background:rgba(1, 207, 201, 0.3) !important; border-color:rgba(1, 207, 201, 1);  color:rgba(0, 82, 80, 1);}
.item.bg-category-3-o {background:rgba(255, 119, 119, 0.3) !important; border-color:rgba(255, 119, 119, 1); color:rgba(220, 67, 67, 1);}
.item.bg-category-4-o {background:rgba(255, 164, 81, 0.3) !important; border-color:rgba(255, 164, 81, 1); color:rgba(169, 90, 19, 1);}
.item.bg-category-5-o {background:rgba(255, 200, 10, 0.3) !important; border-color:rgba(255, 200, 10, 1); color:rgba(116, 94, 17, 1);}
.item.bg-category-6-o {background:rgba(157, 233, 107, 0.3) !important; border-color:rgba(157, 233, 107, 1); color:rgba(81, 156, 31, 1);}
.item.bg-category-7-o {background:rgba(255, 175, 254, 0.3) !important; border-color:rgba(255, 175, 254, 1); color:rgba(201, 48, 199, 1);}
.item.bg-category-8-o {background:rgba(254, 121, 169, 0.3) !important; border-color:rgba(254, 121, 169, 1); color:rgba(220, 41, 106, 1);}
.item.bg-category-9-o {background:rgba(162, 156, 254, 0.3) !important; border-color:rgba(162, 156, 254, 1); color:rgba(87, 65, 255, 1);}
.item.bg-category-10-o {background:rgba(102, 96, 232, 0.3) !important; border-color:rgba(102, 96, 232, 1); color:rgba(70, 64, 201, 1);}

.item.bg-category-1-o:hover {background:rgba(55, 195, 254, 0.5) !important;}
.item.bg-category-2-o:hover {background:rgba(1, 207, 201, 0.5) !important;}
.item.bg-category-3-o:hover {background:rgba(255, 119, 119, 0.5) !important;}
.item.bg-category-4-o:hover {background:rgba(255, 164, 81, 0.5) !important;}
.item.bg-category-5-o:hover {background:rgba(255, 200, 10, 0.5) !important;}
.item.bg-category-6-o:hover {background:rgba(157, 233, 107, 0.5) !important;}
.item.bg-category-7-o:hover {background:rgba(255, 175, 254, 0.5) !important;}
.item.bg-category-8-o:hover {background:rgba(254, 121, 169, 0.5) !important;}
.item.bg-category-9-o:hover {background:rgba(162, 156, 254, 0.5) !important;}
.item.bg-category-10-o:hover {background:rgba(102, 96, 232, 0.5) !important;}

/* ui - ellipsis */
.ellipsis {overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap;}
.ellipsis {table-layout: fixed;} /* table 태그에 클래스 추가 */
.ellipsis td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* ui - ellipsis (multiLine) */
.ellipsis.line-clamp-1 {line-height:1.4; max-height:1.4em; white-space:normal;  word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis.line-clamp-2 {line-height:1.4; max-height:2.8em; white-space:normal;  word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis.line-clamp-3 {line-height:1.4; max-height:4.8em; white-space:normal;  word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;}

/* 전자결재 td 두줄 */
.td-line-2 tbody td{height: 51px;}

/* 전자결재 - 환경 설정 */
.setting-tab-order .radio-label input[type="radio"] + label {min-width:200px; padding:0 10px;}
.setting-tab-order .radio-label label {height:28px;}

.setting-tab-order-num {margin-right:5px;}
.setting-tab-order-num li {display: block;width: 28px;height: 28px;background:#fff;border:1px solid #ccc;border-radius:4px;text-align:center;margin: 0 0 5px 0;line-height: 25px;font-size: 14px;}

/* 전자결재 - 대결자 설정 */
.delegator-wrap {justify-content: space-around; align-items: flex-end !important;}
.delegator-wrap .fm-group {width: calc(100% / 5); padding: 0 5px 5px 5px; margin:0;}
.delegator-wrap .fm-group > .block > select {width:100% !important;}
.delegator-wrap .fm-group > .block > input[type="text"] {width:100% !important;}
.delegator-wrap .fm-group .date-wrap {width:100%;}

@media (max-width: 1680px){
    .delegator-wrap {display: block !important; padding:20px;}
    .delegator-wrap .fm-group {width:33.3333%; display: inline-block; margin-left:0;}
}

/* 일정 좌측메뉴 펼침/접힘 */

.sidenav-off#snb {display: none;}	
.sidenav-on#snb {display: flex;}

#snb {z-index: 999; width:230px; height:100%; display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; transition:0.4s; border-left:1px solid #eaeaea;}

.snb-mask{position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.5); display: none; z-index: 998;}

/*@media (max-width: 1600px){
    #snb{position: absolute; left: -1px; top: 50px; bottom: 0; height: auto;}
    .sidenav-on .snb-mask{display: block;}
}*/


/* 2024-09-11 전결규정 css 추가 */

a.file-link {display: inline-block;color: #565656;font-size: 14px;font-weight: 500;line-height: 100%;border-radius: 100px;background: #F2F2F2;padding: 5px 14px;white-space: nowrap;}
a.file-link > i {font-size: 18px;color: #009797;margin-left: 4px;vertical-align: text-bottom;}
a.file-link:hover {color: #009797;background: #E3F9F9;text-decoration: none;}

.bdr {display: inline-block;width: 2px;height: 16px;background: #DDD;margin: 0 5px;vertical-align: middle;}

/* more-lyr-wp */
.more-lyr-wp {position: relative;}
.more-lyr-wp .more-btn {display: inline-block;width: 20px;height: 20px;}
.more-lyr-wp .more-btn i {font-size: 20px;color: #0071BC;}
.more-lyr-wp .more-lyr {position: absolute;left: calc(100% + 8px);top: -9px;white-space: nowrap;z-index: 5;border: 1px solid #0071BC;background: #FFF;box-shadow: 4px 4px 6px 0px rgba(188, 188, 188, 0.6);}
.more-lyr-wp .more-lyr ul li {margin-bottom: 0;}
.more-lyr-wp .more-lyr ul li a {display: block;color: #333F54;font-size: 13px;font-weight: 500;line-height: 100%;padding: 10px 11px;text-align: left;}
.more-lyr-wp .more-lyr ul li a:hover {background-color: #F5F9FC;color: #0071BC;}

/* indent-txt */
.indent-text {display: flex;word-break: break-word;}
.indent-text > p {margin: 0;}
.indent-text > .order {flex-shrink: 0;padding-right: 5px;}
.indent-text.text-depth1 {font-weight: 500;}
.indent-text.text-depth2 > .order {text-indent: 15px;}
.indent-text.text-depth3 > .order {text-indent: 30px;}
.indent-text.text-depth4 > .order {text-indent: 45px;}
.indent-text.text-depth5 > .order {text-indent: 60px;}
.indent-text.text-depth6 > .order {text-indent: 75px;}

/* 2024-09-11 전결규정 css 추가 */

/* 메인화면 팝업 */
.ad-pop-wrap {position: fixed;left: 0;top: 0;width: calc(100% - 0px);padding-left: 70px;height: 100%;background-color: rgba(0,0,0,0.75);z-index: 99;overflow: auto;}
.ad-pop-wrap::-webkit-scrollbar-thumb {background: #fff;}
.ad-pop-outer {width: 100%;height: 100%;min-width: 1372px;padding-top: 41px;}
.ad-pop-inner {width: 100%;max-width: 1284px;margin: 0 auto;}
.ad-pop-inner::after {content: '';display: block;clear: both;}
.ad-pop {display: flex;position: relative;float: left;border-radius: 16px;margin: 9px;flex-direction: column;}
.ad-pop-head {position: relative;height: 56px;background: #EBF5FF;padding: 14px 55px 14px 32px;border-radius: 16px 16px 0 0;}
.ad-pop-head .pop-title {display: block;color: #373740;font-size: 19px;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.ad-pop-head .pop-close {position: absolute;top: 16px;right: 20px;}
.ad-pop-head .pop-close i {font-size: 16px;color: #9999A3;}
.ad-pop-head .pop-close:hover i {color: #3756F9;}
.ad-pop-cont {flex: 1;overflow: auto;background-color: #fff;padding: 20px;}
.ad-pop-cont > img {max-width: 100%;}
.ad-pop-btm {height: 48px;background-color: #4A556E;padding: 12px 20px;border-radius: 0 0 16px 16px;}
.ad-pop-btm .today-close {float: right;color: #EBF5FF;font-size: 14px;font-weight: 400;}
.ad-pop-btm .today-close .icon-em-close {display: inline-block;width: 24px;height: 24px;background: url(../images/emart/pc/ico_close_sky.png) no-repeat center;background-size: 24px 24px;margin-left: 10px;vertical-align: middle;}
.ad-pop-btm .today-close:hover {color: #FFD11A;}
.ad-pop-btm .today-close:hover .icon-em-close {background: url(../images/emart/pc/ico_close_yellow.png) no-repeat center;}
/* 메인화면 팝업 */