@charset "utf-8";


/* --- font --- */
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Roboto&display=swap'); */
/* @font-face { font-family: 'SCD-3'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SCD-4'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SCD-5'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SCD-6'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SCD-7'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'SCD-8'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: normal; font-style: normal; } */
@font-face { 
  font-family: 'SCD-3'; 
  src: url('../font/S-CoreDream-3Light.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal;
}
@font-face { 
  font-family: 'SCD-4'; 
  src: url('../font/S-CoreDream-4Regular.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal;
}
@font-face { 
  font-family: 'SCD-5'; 
  src: url('../font/S-CoreDream-5Medium.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal;
}
@font-face { 
  font-family: 'SCD-6'; 
  src: url('../font/S-CoreDream-6Bold.woff') format('woff'); 
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'SCD-7'; 
  src: url('../font/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: normal; 
  font-style: normal;
}
@font-face { 
  font-family: 'SCD-8'; 
  src: url('../font/S-CoreDream-8Heavy.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal;
}
@font-face {
  font-family: 'Number';
  src: url('../font/GmarketSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* --- icon --- */
@font-face {
  font-family: "unifont";
  src: url('../font/fontello.eot?25674547');
  src: url('../font/fontello.eot?25674547#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?25674547') format('woff'),
       url('../font/fontello.ttf?25674547') format('truetype'),
       url('../font/fontello.svg?25674547#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.unicon {
  font-family: "unifont";
  font-style: normal;
  font-weight: normal;
  /* speak: none; */
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
[class^="ico-"]:before, [class*=" ico-"]:before {
  font-family: "unifont","ico-board";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* - icon-list - */
.ico-uni-approval:before { content: '\e800'; } /* '' */
.ico-uni-arrow-down:before { content: '\e801'; } /* '' */
.ico-uni-arrow-left:before { content: '\e802'; } /* '' */
.ico-uni-arrow-right:before { content: '\e803'; } /* '' */
.ico-uni-arrow-up:before { content: '\e804'; } /* '' */
.ico-uni-calc-receipt:before { content: '\e805'; } /* '' */
.ico-uni-calendar:before { content: '\e806'; } /* '' */
.ico-uni-caution:before { content: '\e807'; } /* '' */
.ico-uni-check:before { content: '\e808'; } /* '' */
.ico-uni-check-receipt:before { content: '\e809'; } /* '' */
.ico-uni-circle:before { content: '\e80a'; } /* '' */
.ico-uni-close:before { content: '\e80b'; } /* '' */
.ico-uni-company-f:before { content: '\e80c'; } /* '' */
.ico-uni-diamond:before { content: '\e80d'; } /* '' */
.ico-uni-diamond-f:before { content: '\e80e'; } /* '' */
.ico-uni-doc:before { content: '\e80f'; } /* '' */
.ico-uni-file:before { content: '\e810'; } /* '' */
.ico-uni-fin:before { content: '\e811'; } /* '' */
.ico-uni-help:before { content: '\e812'; } /* '' */
.ico-uni-help-f:before { content: '\e813'; } /* '' */
.ico-uni-info:before { content: '\e814'; } /* '' */
.ico-uni-main-lc:before { content: '\e815'; } /* '' */
.ico-uni-cart-check:before { content: '\e816'; } /* '' */
.ico-uni-main-approval:before { content: '\e817'; } /* '' */
.ico-uni-main-pds:before { content: '\e818'; } /* '' */
.ico-uni-main-pes:before { content: '\e819'; } /* '' */
.ico-uni-manage:before { content: '\e81a'; } /* '' */
.ico-uni-manage-alarm:before { content: '\e81b'; } /* '' */
.ico-uni-manage-client:before { content: '\e81c'; } /* '' */
.ico-uni-manage-doc:before { content: '\e81d'; } /* '' */
.ico-uni-manage-hand:before { content: '\e81e'; } /* '' */
.ico-uni-manage-monitor:before { content: '\e81f'; } /* '' */
.ico-uni-manage-order:before { content: '\e820'; } /* '' */
.ico-uni-manage-pds:before { content: '\e821'; } /* '' */
.ico-uni-manage-user:before { content: '\e822'; } /* '' */
.ico-uni-minus:before { content: '\e823'; } /* '' */
.ico-uni-monitor:before { content: '\e824'; } /* '' */
.ico-uni-move:before { content: '\e825'; } /* '' */
.ico-uni-org-chart:before { content: '\e826'; } /* '' */
.ico-uni-pin:before { content: '\e827'; } /* '' */
.ico-uni-pin-f:before { content: '\e828'; } /* '' */
.ico-uni-plus:before { content: '\e829'; } /* '' */
.ico-uni-popup:before { content: '\e82a'; } /* '' */
.ico-uni-progress:before { content: '\e82b'; } /* '' */
.ico-uni-purchase:before { content: '\e82c'; } /* '' */
.ico-uni-receipt:before { content: '\e82d'; } /* '' */
.ico-uni-ref:before { content: '\e82e'; } /* '' */
.ico-uni-report:before { content: '\e82f'; } /* '' */
.ico-uni-retrieve:before { content: '\e830'; } /* '' */
.ico-uni-sales:before { content: '\e831'; } /* '' */
.ico-uni-search:before { content: '\e832'; } /* '' */
.ico-uni-set:before { content: '\e833'; } /* '' */
.ico-uni-set-approval:before { content: '\e834'; } /* '' */
.ico-uni-storage:before { content: '\e835'; } /* '' */
.ico-uni-supply:before { content: '\e836'; } /* '' */
.ico-uni-thumb-user:before { content: '\e837'; } /* '' */
.ico-uni-thumb-user02:before { content: '\e838'; } /* '' */
.ico-uni-thumb-user03:before { content: '\e839'; } /* '' */
.ico-uni-thumb-user04:before { content: '\e83a'; } /* '' */
.ico-uni-upload:before { content: '\e83b'; } /* '' */
.ico-uni-user:before { content: '\e83c'; } /* '' */
.ico-uni-user02:before { content: '\e83d'; } /* '' */
.ico-uni-user02-f:before { content: '\e83e'; } /* '' */
.ico-uni-user-f:before { content: '\e83f'; } /* '' */
.ico-uni-view-receipt:before { content: '\e840'; } /* '' */
.ico-uni-wallet:before { content: '\e841'; } /* '' */
.ico-uni-write:before { content: '\e842'; } /* '' */
.ico-uni-write-f:before { content: '\e843'; } /* '' */
.ico-uni-confirm:before { content: '\e844'; } /* '' */
.ico-uni-confirm-f:before { content: '\e845'; } /* '' */
.ico-uni-write-modify:before { content: '\e846'; } /* '' */
.ico-uni-turn:before { content: '\e847'; } /* '' */
.ico-uni-doc-empty:before { content: '\e848'; } /* '' */
.ico-uni-img:before { content: '\e849'; } /* '' */
.ico-uni-arrow-line-down:before { content: '\e84a'; } /* '' */
.ico-uni-arrow-line-left:before { content: '\e84b'; } /* '' */
.ico-uni-arrow-line-right:before { content: '\e84c'; } /* '' */
.ico-uni-arrow-line-up:before { content: '\e84d'; } /* '' */
.ico-uni-card1:before { content: '\e84e'; } /* '' */
.ico-uni-card2:before { content: '\e84f'; } /* '' */
.ico-uni-cards:before { content: '\e850'; } /* '' */
.ico-uni-download:before { content: '\e851'; } /* '' */
.ico-uni-img-empty:before { content: '\e852'; } /* '' */
.ico-uni-receipt-f:before { content: '\e853'; } /* '' */
.ico-uni-view-detail-f:before { content: '\e854'; } /* '' */
.ico-uni-downsize-f:before { content: '\e855'; } /* '' */
.ico-uni-upsize-f:before { content: '\e856'; } /* '' */
.ico-uni-downsize:before { content: '\e857'; } /* '' */
.ico-uni-upsize:before { content: '\e858'; } /* '' */
.ico-uni-globe-f:before { content: '\e859'; } /* '' */
.ico-uni-folder-f:before { content: '\e85a'; } /* '' */
.ico-uni-folder-open-f:before { content: '\e85b'; } /* '' */
.ico-uni-content-empty:before { content: '\e85c'; } /* '' */
.ico-uni-excel1:before { content: '\e85d'; } /* '' */
.ico-uni-excel2:before { content: '\e85e'; } /* '' */
.ico-uni-excel3:before { content: '\e85f'; } /* '' */
.ico-uni-lock:before { content: '\e860'; } /* '' */
.ico-uni-unlock:before { content: '\e861'; } /* '' */
.ico-uni-user-business:before { content: '\e862'; } /* '' */
.ico-uni-mail:before { content: '\e863'; } /* '' */
.ico-uni-find-pw:before { content: '\e864'; } /* '' */
.ico-uni-caution02:before { content: '\e865'; } /* '' */
.ico-uni-caution02-f:before { content: '\e866'; } /* '' */
.ico-uni-clock:before { content: '\e867'; } /* '' */
.ico-uni-timer1:before { content: '\e868'; } /* '' */
.ico-uni-timer2:before { content: '\e869'; } /* '' */
.ico-uni-graph:before { content: '\e86a'; } /* '' */
.ico-uni-graph-f:before { content: '\e86b'; } /* '' */
.ico-uni-main-econ:before { content: '\e86c'; } /* '' */
.ico-uni-main-tax:before { content: '\e86d'; } /* '' */
.ico-uni-trash:before { content: '\e86e'; } /* '' */
.ico-uni-download-doc:before { content: '\e86f'; } /* '' */
.ico-uni-no-doc1:before { content: '\e870'; } /* '' */
.ico-uni-no-doc2:before { content: '\e871'; } /* '' */
.ico-uni-service-link1:before { content: '\e872'; } /* '' */
.ico-uni-service-link2:before { content: '\e873'; } /* '' */
.ico-uni-service-link3:before { content: '\e874'; } /* '' */
.ico-uni-service-link4:before { content: '\e875'; } /* '' */
.ico-uni-speech-bubble:before { content: '\e876'; } /* '' */
.ico-uni-speech-bubble-f:before { content: '\e877'; } /* '' */
.ico-uni-coin1:before { content: '\e878'; } /* '' */
.ico-uni-user-smile:before { content: '\e879'; } /* '' */
.ico-uni-user-smile-plus:before { content: '\e87a'; } /* '' */
.ico-uni-user-smile-check:before { content: '\e87b'; } /* '' */
.ico-uni-user-smile-talk:before { content: '\e87c'; } /* '' */
.ico-uni-protect:before { content: '\e87d'; } /* '' */
.ico-uni-doc-talk:before { content: '\e87e'; } /* '' */
.ico-uni-doc-user-smile:before { content: '\e87f'; } /* '' */
.ico-uni-doc-noti:before { content: '\e880'; } /* '' */
.ico-uni-doc-qna:before { content: '\e881'; } /* '' */
.ico-uni-cancle:before { content: '\e882'; } /* '' */
.ico-uni-cancle-f:before { content: '\e883'; } /* '' */
.ico-uni-pen:before { content: '\e884'; } /* '' */
.ico-uni-pen2:before { content: '\e885'; } /* '' */
.ico-uni-pen-f:before { content: '\e886'; } /* '' */
.ico-uni-calc-check:before { content: '\e887'; } /* '' */
.ico-uni-doc-check:before { content: '\e888'; } /* '' */
.ico-uni-doc-plus:before { content: '\e889'; } /* '' */
.ico-uni-card-user:before { content: '\e88a'; } /* '' */
.ico-uni-card-company:before { content: '\e88b'; } /* '' */
.ico-uni-temp-col1:before { content: '\e88c'; } /* '' */
.ico-uni-temp-col2-h:before { content: '\e88d'; } /* '' */
.ico-uni-temp-col2-v:before { content: '\e88e'; } /* '' */
.ico-uni-temp-col4:before { content: '\e88f'; } /* '' */
.ico-uni-arrow-first:before { content: '\e890'; } /* '' */
.ico-uni-arrow-last:before { content: '\e891'; } /* '' */
.ico-uni-manage-user2:before { content: '\e892'; } /* '' */
.ico-uni-manage-site:before { content: '\e893'; } /* '' */
.ico-uni-manage-org-chart:before { content: '\e894'; } /* '' */
.ico-uni-manage-org-chart2:before { content: '\e895'; } /* '' */
.ico-uni-home:before { content: '\e896'; } /* '' */
.ico-uni-refresh:before { content: '\e897'; } /* '' */
.ico-uni-menu:before { content: '\e898'; } /* '' */
.ico-uni-camera:before { content: '\e899'; } /* '' */
.ico-uni-camera-f:before { content: '\e89a'; } /* '' */
.ico-uni-rotate:before { content: '\e89b'; } /* '' */
.ico-uni-money:before { content: '\e89c'; } /* '' */
.ico-uni-trash-check:before { content: '\e89d'; } /* '' */
.ico-uni-add:before { content: '\e89e'; } /* '' */
.ico-uni-add-f:before { content: '\e89f'; } /* '' */
.ico-uni-subtract:before { content: '\e8a0'; } /* '' */
.ico-uni-subtract-f:before { content: '\e8a1'; } /* '' */
.ico-uni-company2:before { content: '\e8a2'; } /* '' */
.ico-uni-company2-f:before { content: '\e8a3'; } /* '' */
.ico-uni-receipt2:before { content: '\e8a4'; } /* '' */
.ico-uni-receipt2-f:before { content: '\e8a5'; } /* '' */
.ico-uni-user-doc:before { content: '\e8a6'; } /* '' */
.ico-uni-position-top:before { content: '\e8a7'; } /* '' */
.ico-uni-position-left:before { content: '\e8a8'; } /* '' */
.ico-uni-position-right:before { content: '\e8a9'; } /* '' */
.ico-uni-more-f:before { content: '\e8aa'; } /* '' */
.ico-uni-more:before { content: '\e8ab'; } /* '' */
.ico-uni-main-unidocu:before { content: '\e8ac'; } /* '' */
.ico-uni-main-unidocu-off:before { content: '\e8ad'; } /* '' */
.ico-uni-no-receipt1:before { content: '\e8ae'; } /* '' */
.ico-uni-no-receipt2:before { content: '\e8af'; } /* '' */
.ico-uni-no-receipt3:before { content: '\e8b0'; } /* '' */
.ico-uni-monitor2:before { content: '\e8b1'; } /* '' */
.ico-uni-coin2:before { content: '\e8b2'; } /* '' */
.ico-uni-doc-coin:before { content: '\e8b3'; } /* '' */
.ico-uni-cloud:before { content: '\e8b4'; } /* '' */
.ico-uni-cloud-arrow:before { content: '\e8b5'; } /* '' */
.ico-uni-check-bold-f:before { content: '\e8b6'; } /* '' */
.ico-uni-check-bold:before { content: '\e8b7'; } /* '' */
.ico-uni-face-normal:before { content: '\e8b8'; } /* '' */
.ico-uni-face-bad:before { content: '\e8b9'; } /* '' */
.ico-uni-face-good:before { content: '\e8ba'; } /* '' */
.ico-uni-upload2:before { content: '\e8bb'; } /* '' */
.ico-uni-upload3:before { content: '\e8bc'; } /* '' */
.ico-uni-upload4:before { content: '\e8bd'; } /* '' */
.ico-uni-main-salescon:before { content: '\e8be'; } /* '' */
.ico-uni-logo-symbol:before { content: '\e8bf'; } /* '' */
.ico-uni-logo-symbol-line:before { content: '\e8c0'; } /* '' */
.ico-uni-main-avs:before { content: '\e8c1'; } /* '' */
.ico-uni-manage-time:before { content: '\e8c2'; } /* '' */
.ico-uni-clock2:before { content: '\e8c3'; } /* '' */
.ico-uni-arrow-right2:before { content: '\e8c4'; } /* '' */
.ico-uni-arrow-right2-f:before { content: '\e8c5'; } /* '' */
.ico-uni-arrow-up2:before { content: '\e8c6'; } /* '' */
.ico-uni-arrow-up2-f:before { content: '\e8c7'; } /* '' */
.ico-uni-arrow-down2:before { content: '\e8c8'; } /* '' */
.ico-uni-arrow-down2-f:before { content: '\e8c9'; } /* '' */
.ico-uni-arrow-left2:before { content: '\e8ca'; } /* '' */
.ico-uni-arrow-left2-f:before { content: '\e8cb'; } /* '' */
.ico-uni-manage-write:before { content: '\e8cc'; } /* '' */
.ico-uni-clock-bold-f:before { content: '\e8cd'; } /* '' */
.ico-uni-clock-bold:before { content: '\e8ce'; } /* '' */
.ico-uni-users01-f:before { content: '\e8cf'; } /* '' */
.ico-uni-users02-f:before { content: '\e8d0'; } /* '' */
.ico-uni-users03-f:before { content: '\e8d1'; } /* '' */
.ico-uni-theme-line:before { content: '\e8d2'; } /* '' */
.ico-uni-theme-rectangle:before { content: '\e8d3'; } /* '' */
.ico-uni-money-in:before { content: '\e8d4'; } /* '' */
.ico-uni-money-out:before { content: '\e8d5'; } /* '' */
.ico-uni-report-user:before { content: '\e8d6'; } /* '' */
.ico-uni-box:before { content: '\e8d7'; } /* '' */
.ico-uni-purchase2:before { content: '\e8d8'; } /* '' */
.ico-uni-money-in-out:before { content: '\e8d9'; } /* '' */
.ico-uni-graph-up:before { content: '\e8da'; } /* '' */
.ico-uni-no-receipt4:before { content: '\e8db'; } /* '' */
.ico-uni-no-receipt4-f:before { content: '\e8dc'; } /* '' */
.ico-uni-doc-receive:before { content: '\e8dd'; } /* '' */
.ico-uni-print:before { content: '\e8de'; } /* '' */
.ico-uni-print-f:before { content: '\e8df'; } /* '' */
.ico-uni-print2:before { content: '\e8e0'; } /* '' */
.ico-uni-docs:before { content: '\e8e1'; } /* '' */
.ico-uni-doc-storage-check:before { content: '\e8e2'; } /* '' */
.ico-uni-doc-storage-plus:before { content: '\e8e3'; } /* '' */
.ico-uni-folder-doc:before { content: '\e8e4'; } /* '' */
.ico-uni-list:before { content: '\e8e5'; } /* '' */
.ico-uni-preview:before { content: '\e8e6'; } /* '' */
.ico-uni-preview2:before { content: '\e8e7'; } /* '' */
.ico-uni-list2:before { content: '\e8e8'; } /* '' */
.ico-uni-home2:before { content: '\e8e9'; } /* '' */
.ico-uni-home3:before { content: '\e8ea'; } /* '' */
.ico-uni-home4:before { content: '\e8eb'; } /* '' */
.ico-uni-home5:before { content: '\e8ec'; } /* '' */
.ico-uni-home6:before { content: '\e8ed'; } /* '' */
.ico-uni-doc-storage-upload:before { content: '\e8ee'; } /* '' */
.ico-uni-manage-doc2:before { content: '\e8ef'; } /* '' */
.ico-uni-signature:before { content: '\e8f0'; } /* '' */
.ico-uni-certificate:before { content: '\e8f1'; } /* '' */
.ico-uni-certificate2:before { content: '\e8f2'; } /* '' */
.ico-uni-main-wps:before { content: '\e8f3'; } /* '' */
.ico-uni-mobile:before { content: '\e8f4'; } /* '' */
.ico-uni-telephone:before { content: '\e8f5'; } /* '' */
.ico-uni-main-community:before { content: '\e8f6'; } /* '' */
.ico-uni-doc-tax-money:before { content: '\e8f7'; } /* '' */

/* - icon 두께 조절 - */
.ico-uni-diamond:before,
.ico-uni-arrow-down:before,
.ico-uni-arrow-left:before,
.ico-uni-arrow-right:before,
.ico-uni-arrow-up:before,
.ico-uni-arrow-first:before,
.ico-uni-arrow-last:before,
button .ico-uni-check:before,
button.btn-c1-bg .ico-uni-upload:before {font-weight: 600;}

/* - icon 사이즈 조절 - */
button i.ico-uni-excel1,
button i.ico-uni-excel2,
button i.ico-uni-excel3 {font-size: 18px;}

/* - icon 위치 조절 - */
i.ico-uni-find-pw {margin-left: 1px;}
i.ico-uni-calc-receipt:before,
i.ico-uni-download-doc:before {margin-left: 1px;}
i.ico-uni-manage-user2:before {margin-left: 2px;}


/* --- reset --- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
button,
fieldset, form, label, legend, select, option,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  font-family: "SCD-4", "Roboto", "Helvetica Neue", Helvetica, Sans-serif;
  margin:0;
  padding:0;
  /* font-size:100%; */
  border:0 none;
  background:transparent;
  outline:0;
  -webkit-print-color-adjust:exact;
  print-color-adjust: exact;
}
dl, ul, ol, menu, li {list-style:none;}
img {
  border: 0;
  vertical-align: middle;
}
table {
  width: 100%;
  margin:0;
  padding:0;
  font-family: "SCD-4", "Roboto", "Helvetica Neue", Helvetica, Sans-serif;
  font-size: 1em;
  /* border:0 none; */
  border-collapse: collapse;
  background-color: #fff;
  outline:0;
  -webkit-print-color-adjust:exact;
  print-color-adjust: exact;
}
table:not(.in-editor table) {border:0 none;}
table caption {display: none;}
a {color: inherit;}
a:link, a:visited {
  color: #555;
  text-decoration: none;
}
a:hover {
  color: #333;
  text-decoration: none;
  /* -moz-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  -webkit-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  -ms-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; */
}
a:focus,
a:active {
  text-decoration: none;
  outline: 0;
}
button {cursor: pointer;}
/* .disabled:not(label), */
/* .disabled:not(a), */
div.disabled,
input[disabled], 
input[readonly], 
input.disabled, 
input.readonly, 
fieldset[disabled],
fieldset.disabled,
/* select[disabled],
select.disabled, */
textarea[disabled],
textarea[readonly],
textarea.disabled,
textarea.readonly {
  background-color: #eee !important;
  /* opacity: 1; */
}
input[disabled].bg-fff,
input[readonly].bg-fff,
textarea[disabled].bg-fff,
textarea[readonly].bg-fff {
  background-color: #fff !important;
}
input[disabled].bg-c1,
input[readonly].bg-c1,
textarea[disabled].bg-c1,
textarea[readonly].bg-c1 {
  background-color: rgba(14,92,233,.06) !important;
}
input[disabled].bg-none,
input[readonly].bg-none {
  background-color: transparent !important;
}
textarea {resize: none;}
fieldset {border: 0;}
legend {display: none;}
select {
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
  appearance:none;
}
select::-ms-expand{display:none;}
input,
textarea {font-family: "굴림",gulim,Sans-serif !important;}


/* --- body --- */
html, body {scroll-behavior: smooth;}
body {
  min-height: 500px;
  font: 14px "SCD-4", "Roboto", "Helvetica Neue", Helvetica, Sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
  /* background-color: #f6f6f8; */
  -webkit-font-smoothing: subpixel-antialiased;
}
.wrap {
  margin: 0 auto;
  position: relative;
}
i.unicon {vertical-align: middle;}


/* --- side-btn --- */
/* .side-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  opacity: .5;
  z-index: 100;
  animation: fadeInSide .5s ease-in-out 1;
}
.side-btn:hover {opacity: 1;}
.side-btn .page-up i {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 19px;
  border: 1px solid #bbb;
  border-radius: 50%;
  background-color: #f6f6f8;
  cursor: pointer;
}
.side-btn .page-up i:hover {border: 1px solid #555;} */


/* --- header --- */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 3px solid #ebebeb;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 1000;
  -webkit-transition: height 0.15s, -webkit-transform 0.15s;
  transition: height 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}

/* top-header-in */
.top-header .top-header-in {
  display: inline-block;
  width: 100%;
  /* min-width: 1200px; */
  min-width: 990px;  /* 스크롤 생성이 어려워서 최소 사이즈로 지정 */
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
}
.top-header .top-header-in > * {float: left;}
.top-header .on-service {
  width: 220px;
  height: 100%;
}
.top-header .on-service a {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: -1px;
  vertical-align: top;
  font-size: 17px;
}
.top-header .on-service a span {
  margin-left: 10px;
  font-family: 'SCD-6';
  color: #222;
}
.top-header .on-service a i {
  margin: -5px 0 0 20px;
  font-size: 45px;
}
.top-header .user-area {
  overflow: hidden;
  /* margin-right: auto;
  margin-left: 40px; */
  margin-right: 20px;
}
.top-header.nav-top .user-area {
  margin-right: 20px;
  margin-left: 0;
}
.top-header .user-area > * {float: left;}
.top-header .user-area > * + * {margin-left: 8px;}
.top-header .user-area .user-info {
  margin-right: 5px;
  color: #999;
}
.top-header .user-area .user-info .user-name {
  margin-right: 5px;
  font-family: 'SCD-5';
  color: #222;
}
.top-header .user-area .btn-area {display: inline-block;}
.top-header .user-area .btn-area > * {
  float: left;
  height: 27px;
  margin-top: 16px;
  padding: 0 7px;
  line-height: 25px;
  font-size: 12px;
  color: #222;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  box-sizing: border-box;
}
.top-header .user-area .btn-area > *:hover {border-color: #999;}
.top-header .user-area .btn-area > * + * {margin-left: 8px;}
.top-header .user-area .user-logout {
  padding-right: 22px;
  background: url('../images/ico-btn-logout.svg') calc(100% - 5px) 7px no-repeat;
  background-size: 11px;
}
.top-header .user-area .session {
  display: flex;
  align-items: center;
  height: 27px;
  margin-top: 16px;
  padding: 0 7px;
  line-height: 27px;
  font-size: 12px;
  color: #0e5ce9;
  border-radius: 8px;
  background-color: rgba(14,92,233,.08);
}
.top-header .user-area .session * {animation: fadeIn 1s ease 1;}
.top-header .user-area .session i {margin-right: 6px;}
.top-header .user-area .session i::before {
  margin-top: -1px;
  font-weight: bold;
  font-size: 14px;
}
.top-header .right-area {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 220px);
}
.top-header .right-area > * {float: left;}
.top-header .right-area .link-btn-area {
  position: relative;
  padding: 0 20px;
}
.top-header .right-area .link-btn-area::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 57px;
  content: '';
  background-color: #f2f2f2;
}
.top-header .right-area .link-btn-area > * + * {margin-left: 8px;}
.top-header .right-area .link-btn-area button {
  float: left;
  height: 27px;
  margin-top: 16px;
  padding: 0 7px 0 25px;
  line-height: 25px;
  font-size: 12px;
  color: #222;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  box-sizing: border-box;
}
.top-header .right-area .link-btn-area button:hover {border-color: #999;}
.top-header .right-area .link-btn-area .myhome-btn {
  background: url('../images/ico-btn-myhome.svg') 9px 6px no-repeat;
  background-size: 12px 11px;
}
.top-header .right-area .link-btn-area .service-btn {
  background: url('../images/ico-btn-service.svg') 9px 7px no-repeat;
  background-size: 11px 11px;
}
.top-header .right-area .link-btn-area .service-link {
  display: flex;
  float: left;
}
.top-header .right-area .link-btn-area .service-link-in {
  position: absolute;
  top: 40px;
  right: 20px;
  padding-top: 12px;
}
.top-header .right-area .link-btn-area .service-link-area {
  display: none;
  position: relative;
  width: 125px;
  padding: 15px 20px;
  line-height: 29px;
  border: 1px solid #999;
  border-radius: 15px;
  background-color: #fff;
  box-sizing: border-box;
}
.top-header .right-area .link-btn-area .service-link:hover .service-link-area {display: block;}
.top-header .right-area .link-btn-area .service-link-area::before {
  position: absolute;
  top: -8px;
  right: 19px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #999;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.top-header .right-area .link-btn-area .service-link-area::after {
  position: absolute;
  top: -7px;
  right: 20px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.top-header .right-area .link-btn-area .service-link a {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 13px;
  color: #222;
}
.top-header .right-area .link-btn-area .service-link a:hover {color: #0e5ce9;}
.top-header .right-area .link-btn-area .service-link a::before {
  width: 4px;
  height: 4px;
  margin: 0 6px 0 -1px;
  content: '';
  border-radius: 50%;
  background-color: #ddd;
}
.top-header .right-area .link-btn-area .service-link a:hover::before {
  width: 5px;
  height: 5px;
  margin-left: -2px;
  background-color: #0e5ce9;
}
.top-header .right-area .link-btn-area .service-link a.divide {margin-top: 20px;}
.top-header .right-area .link-btn-area .service-link a.divide::after {
  position: absolute;
  top: -10px;
  left: -20px;
  width: calc(100% + 40px);
  height: 1px;
  content: '';
  background-color: #f2f2f2;
}
.top-header .nav-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 57px;
  height: 57px;
  cursor: pointer;
}
.top-header .nav-theme::before {
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 57px;
  content: '';
  background-color: #f2f2f2;
}
.top-header .nav-theme i {
  width: 17px;
  height: 16px;
  background: url('../images/ico-nav-theme.svg') 0 0 no-repeat;
  background-size: 17px 16px;
  cursor: pointer;
}
.top-header .nav-theme > i {display: none;}
.top-header .nav-theme > i.on {display: inline-block;}
.top-header .nav-theme > i.on.ico-uni-position-top {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  background-size: 21px;
}
.top-header .nav-theme > i.on.ico-uni-position-left {
  width: 21px;
  height: 20px;
  background-size: 21px 20px;
}
.top-header .nav-theme i.ico-uni-position-top {
  width: 17px;
  height: 17px;
  transform: rotate(90deg);
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.top-header .nav-theme i::before {display: none;}
.top-header .nav-theme .nav-theme-in {
  position: absolute;
  top: 40px;
  right: 5px;
  padding-top: 12px;
}
.top-header .nav-theme .nav-theme-in .theme-li-area {
  display: none;
  align-items: center;
  flex-direction: column;
  position: relative;
  width: 48px;
  padding: 10px 0;
  border: 1px solid #999;
  border-radius: 15px;
  background-color: #fff;
  box-sizing: border-box;
}
.top-header .nav-theme:hover .nav-theme-in .theme-li-area {display: flex;}
.top-header .nav-theme .nav-theme-in .theme-li-area::before {
  position: absolute;
  top: -8px;
  right: 16px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #999;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.top-header .nav-theme .nav-theme-in .theme-li-area::after {
  position: absolute;
  top: -7px;
  right: 17px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.top-header .nav-theme .nav-theme-in .theme-li-area > * + * {margin-top: 10px;}
.top-header .nav-theme .nav-theme-in .theme-li-area i {opacity: .5;}
.top-header .nav-theme .nav-theme-in .theme-li-area i:hover {opacity: 1;}

/* 사용자 전환 팝업 추가 */
.tbl-basic.user-change .tbl-area table td {
  height: 28px;
  padding: 10px;
  color: #555;
}
.tbl-basic.user-change .btn-change {
  height: 19px;
  padding: 0 6px;
  font-size: 13px;
  color: #fff;
  border: 1px solid #7a47aa;
  border-radius: 20px;
  background-color: #7a47aa;
  cursor: pointer;
}


/* --- menu-nav-bar top --- */
.menu-nav-bar.top {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 50px;
  /* border-bottom: 1px solid #fff; */
  /* box-sizing: border-box; */
  background-color: #f5f7fb;
  z-index: 999;
}
.menu-nav-bar.top .btn-close,
.menu-nav-bar.top .btn-open {
  display: none;
}
.menu-nav-bar.top .btn-close i,
.menu-nav-bar.top .btn-open i {
  font-weight: 600;
}
.menu-nav-bar.top .btn-area {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media (max-width: 1200px) {
  .menu-nav-bar.top .btn-area {
    /* display: block; */
    display: none;
  }
}
.menu-nav-bar.top .btn-area i {
  width: 30px;
  line-height: 50px;
  font-size: 22px;
  background-color: rgba(0,0,0,.05);
  cursor: pointer;
}
.menu-nav-bar.top .btn-area i:hover {background-color: rgba(0,0,0,.07);}
.menu-nav-bar.top .btn-area i.ico-uni-arrow-left {
  position: absolute;
  top: 0;
  left: 0;
}
.menu-nav-bar.top .btn-area i.ico-uni-arrow-right {
  position: absolute;
  top: 0;
  right: 0;
}
.menu-nav-bar.top .nav-menu {
  position: relative;
  display: inline-block;
  min-width: 1200px;
  height: 50px;
}
.menu-nav-bar.top .nav-menu .quick a {background-color: transparent;}
.menu-nav-bar.top .nav-menu .quick,
.menu-nav-bar.top .nav-menu .menu-dp1,
.menu-nav-bar.top .nav-menu .quick li,
.menu-nav-bar.top .nav-menu .menu-dp1 li {
  position: relative;
  float: left;
}
.menu-nav-bar.top .nav-menu .menu-dp1 {padding: 0;}
.menu-nav-bar.top .nav-menu .quick a,
.menu-nav-bar.top .nav-menu .menu-dp1 a {
  position: relative;
  display: inline-block;
  min-width: 150px;
  height: 50px;
  padding: 0 10px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #555;
  /* border-bottom: 1px solid #ccc; */
  box-sizing: border-box;
}
.menu-nav-bar.top .nav-menu .menu-dp1 a.on + .menu-dp2 {
  position: absolute;
  top: 45px;
  left: -1px;
  min-width: 170px;
  padding: 10px 0;
  border: 3px solid #ebebeb;
  border-radius: 20px;
  background-color: #fff;
}
.menu-nav-bar.top .nav-menu .menu-dp1 a.on + .menu-dp2::before {
  position: absolute;
  top: -9px;
  left: calc(50% - 9px);
  /* left: 72px; */
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #ebebeb;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.menu-nav-bar.top .nav-menu .menu-dp1 a.on + .menu-dp2::after {
  position: absolute;
  top: -5px;
  left: calc(50% - 8px);
  /* left: 73px; */
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.menu-nav-bar.top .nav-menu .menu-dp1 > li > a span::after,
.menu-nav-bar.top .nav-menu .menu-dp1 > li > a.on span::after,
.menu-nav-bar.top .nav-menu .menu-dp1 > li > a.no-dp2 span::after,
.menu-nav-bar.top .nav-menu .menu-dp1 > li > a.no-dp2.on span::after {
  display: none;
}
.menu-nav-bar.top .nav-menu .menu-dp2 {
  display: none;
  background-color: #fff;
}
.menu-nav-bar.top .nav-menu .menu-dp2 a {
  position: relative;
  display: flex;
  align-items: center;
  height: inherit;
  min-height: inherit;
  padding: 7px 20px;
  text-align: inherit;
  line-height: 18px;
  font-size: 13px;
  color: #999;
  border: 0;
}
.menu-nav-bar.top .nav-menu .menu-dp2 a:hover,
.menu-nav-bar.top .nav-menu .menu-dp2 a.on {
  color: #222;
  background-color: inherit;
}
.menu-nav-bar.top .nav-menu .menu-dp2 li {
  position: relative;
  width: 100%;
}
.menu-nav-bar.top .nav-menu .menu-dp2 li .badge-num {
  display: none;
  margin-left: 5px;
  padding: 2px 6px;
  line-height: 11px;
  font-size: 11px;
  color: #fff;
  border-radius: 15px;
  background-color: #ff4c5d;
}
.menu-nav-bar.top .nav-menu .menu-dp2 li .badge-num.on {display: inline-block;}
.menu-nav-bar.top .nav-menu .menu-dp3 {
  display: none;
  position: relative;
  margin: 5px 20px;
}
.menu-nav-bar.top .nav-menu .menu-dp2 a.on + .menu-dp3 {display: inline-block;}
.menu-nav-bar.top .nav-menu .menu-dp3 a {
  min-width: inherit;
  min-height: inherit;
  padding: 7px 10px;
  font-size: 12px;
}
.menu-nav-bar.top .nav-menu .menu-dp3 a.on,
.menu-nav-bar.top .nav-menu .menu-dp3 a.on:hover {
  background-color: transparent;
}
.menu-nav-bar.top .nav-menu .menu-dp3 a:hover::before,
.menu-nav-bar.top .nav-menu .menu-dp3 a.on::before {
  display: none;
}
.menu-nav-bar.top .nav-menu .menu-dp3 a span {white-space: nowrap;}
.menu-nav-bar.top .footer {display: none;}

/* 스크롤 추가 */
.menu-nav-bar.top .nav-menu .mCustomScrollBox,
.menu-nav-bar.top .nav-menu .mCSB_container {
  overflow: inherit;
}
.menu-nav-bar.top .nav-menu .mCSB_container {top: 0 !important;}
.menu-nav-bar.top .nav-menu .mCSB_scrollTools_vertical {display: none !important;}


/* --- menu-nav-bar side --- */
/* - open - */
.menu-nav-bar.side {
  position: fixed;
  top: 60px;
  left: 0;
  width: 220px;
  height: calc(100% - 60px);
  min-height: 750px;
  color: #fff;
  /* border-right: 1px solid #ccc; */
  background-color: #f5f7fb;
  box-sizing: border-box;
  -webkit-transition: width 0.15s, -webkit-transform 0.15s;
  transition: width 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
  z-index: 999;
}
.menu-nav-bar.side .btn-close,
.menu-nav-bar.side .btn-open {
  position: absolute;
  top: 0;
  right: -7px;
  width: 16px;
  height: 100%;
  z-index: 100;
  cursor: pointer;
}
/* .menu-nav-bar.side .btn-close:hover,
.menu-nav-bar.side .btn-open:hover {
  background-color: rgba(14,92,233,.03);
} */
.menu-nav-bar.side .btn-close:hover::before,
.menu-nav-bar.side .btn-open:hover::before {
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  height: 100%;
  content: '';
  border-left: 4px dotted #eee;
  border-left: 4px dotted rgba(14,92,233,.15);
}
.menu-nav-bar.side .btn-close i,
.menu-nav-bar.side .btn-open i {
  position: absolute;
  /* top: calc(50% - 71px); */
  bottom: 18px;
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .2s ease 0s;
}
.menu-nav-bar.side .btn-close:hover i,
.menu-nav-bar.side .btn-open:hover i {
  transform: scale(1.2);
  border-color: rgba(14,92,233,.6);
}
.menu-nav-bar.side .btn-close i::before,
.menu-nav-bar.side .btn-open i::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/ico-arrow-line.svg') 50% 50% no-repeat;
  background-size: 10px 8px;
  opacity: .4;
}
.menu-nav-bar.side .btn-open i::before {transform: rotate(180deg);}
.menu-nav-bar.side .btn-close:hover i::before,
.menu-nav-bar.side .btn-open:hover i::before {
  opacity: 1;
}
.menu-nav-bar.side .btn-open {display: none;}
.menu-nav-bar.side .btn-area {display: none;}
.menu-nav-bar.side a {color: #fff;}
.menu-nav-bar.side .nav-menu {height: calc(100% - 65px);}
.menu-nav-bar.side .nav-menu .quick a,
.menu-nav-bar.side .nav-menu .quick a:hover {
  color: #222;
  background-color: #fffced;
}
.menu-nav-bar.side .nav-menu .quick li,
.menu-nav-bar.side .nav-menu .menu-dp1 li {
  position: relative;
}
.menu-nav-bar.side .nav-menu .quick a,
.menu-nav-bar.side .nav-menu .menu-dp1 a {
  display: flex;
  align-items: center;
  position: relative;
  height: 55px;
  padding: 0 0 0 32px;
  line-height: 55px;
  font-size: 14px;
  color: #555;
  box-sizing: border-box;
}
.menu-nav-bar.side .nav-menu .menu-dp1 {padding-bottom: 30px;}
.menu-nav-bar.side .nav-menu .menu-dp1 a:hover {
  color: #222;
  background-color: transparent;
}
.menu-nav-bar.side .nav-menu .menu-dp1 a.on {
  color: #222;
  border-radius: 20px 0 0 0;
  background-color: #fff;
}
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.on {
  height: 50px;
  line-height: 50px;
}
.menu-nav-bar.side .nav-menu .menu-dp1:first-child > li:first-child > a.on {margin-top: 10px;}
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.on::before {
  position: absolute;
  top: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  content: '';
  background: url('../images/bg-menu-on.svg') 0 0 no-repeat;
  background-size: 100%;
}
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.on::after {
  position: absolute;
  bottom: 0;
  left: 30px;
  width: calc(100% - 50px);
  height: 1px;
  content: '';
  background-color: #f2f2f2;
}
.menu-nav-bar .nav-menu .quick > li > a:hover span,
.menu-nav-bar .nav-menu .menu-dp1 > li > a:hover span,
.menu-nav-bar .nav-menu .menu-dp1 > li > a.on span {font-family: "SCD-5";}
.menu-nav-bar.side .nav-menu .menu-dp1 a.on + .menu-dp2 {
  display: block;
  margin-bottom: 5px;
  padding: 10px 0 15px;
  border-top: 0;
  border-radius: 0 0 0 20px;
  background-color: #fff;
}
.menu-nav-bar.side .nav-menu .menu-dp1 a.on + .menu-dp2::before {
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  content: '';
  background: url('../images/bg-menu-on.svg') 0 0 no-repeat;
  background-size: 100%;
  transform: rotate(-90deg);
}
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a span::after,
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.on span::after,
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.no-dp2 span::after,
.menu-nav-bar.side .nav-menu .menu-dp1 > li > a.no-dp2.on span::after {
  display: none;
}
.menu-nav-bar .nav-menu .quick a i,
.menu-nav-bar .nav-menu .menu-dp1 a i {
  position: relative;
  margin: 0 12px 0 0;
  opacity: .4;
}
.menu-nav-bar .nav-menu .quick a:hover i,
.menu-nav-bar .nav-menu .menu-dp1 a:hover i,
.menu-nav-bar .nav-menu .quick a.on i,
.menu-nav-bar .nav-menu .menu-dp1 a.on i {
  opacity: 1;
}
.menu-nav-bar.side .nav-menu .menu-dp1 a i.ico-uni-arrow-up,
.menu-nav-bar.side .nav-menu .menu-dp1 a i.ico-uni-arrow-down {
  position: absolute;
  top: calc(50% - 7px);
  right: 30px;
  margin-right: 0;
  font-size: inherit;
  font-weight: 600;
}
.menu-nav-bar.side .nav-menu .menu-dp2 {
  display: none;
  background-color: #fff;
}
.menu-nav-bar.side .nav-menu .menu-dp2 a {
  position: relative;
  display: flex;
  align-items: center;
  height: inherit;
  padding: 7px 20px 7px 30px;
  line-height: 18px;
  font-size: 13px;
  color: #999;
  border: 0;
}
.menu-nav-bar .nav-menu .menu-dp2 a span {
  position: relative;
  display: inline-block;
}
.menu-nav-bar .nav-menu .menu-dp2 a:hover span,
.menu-nav-bar .nav-menu .menu-dp2 a.on span {
  text-decoration: underline solid rgba(255,240,0,.25) 10px;
  text-underline-offset: -4px;
  text-decoration-skip-ink: none;
}
/* .menu-nav-bar .nav-menu .menu-dp2 a:hover span::before,
.menu-nav-bar .nav-menu .menu-dp2 a.on span::before {
  position: absolute;
  top: 10px;
  left: 0;
  content: '';
  width: 100%;
  height: 10px;
  background-color: rgba(255,240,0,.25);
} */
.menu-nav-bar .nav-menu .menu-dp2 a:hover,
.menu-nav-bar .nav-menu .menu-dp2 a.on {
  color: #222;
  background-color: inherit;
}
.menu-nav-bar.side .nav-menu .menu-dp2 li {position: relative;}
.menu-nav-bar.side .nav-menu .menu-dp2 li .badge-num {
  display: none;
  margin-left: 5px;
  padding: 2px 6px;
  line-height: 11px;
  font-size: 11px;
  color: #fff;
  border-radius: 15px;
  background-color: #ff4c5d;
}
.menu-nav-bar.side .nav-menu .menu-dp2 li .badge-num.on {display: inline-block;}
.menu-nav-bar .nav-menu .menu-dp3 {
  display: none;
  overflow: hidden;
  position: relative;
  margin: 5px 20px 5px 30px;
  padding: 5px 0;
  border-radius: 8px;
  background-color: rgba(255,240,0,.05);
}
.menu-nav-bar.side .nav-menu .menu-dp2 a.on + .menu-dp3 {display: block;}
.menu-nav-bar .nav-menu .menu-dp2 li:last-child a.on + .menu-dp3 {margin-bottom: 20px;}
.menu-nav-bar.side .nav-menu .menu-dp3 a {
  min-height: inherit;
  padding: 7px 10px;
  font-size: 12px;
}
.menu-nav-bar.side .nav-menu .menu-dp3 a.on,
.menu-nav-bar.side .nav-menu .menu-dp3 a.on:hover {
  background-color: transparent;
}
.menu-nav-bar.side .nav-menu .menu-dp3 a:hover::before,
.menu-nav-bar.side .nav-menu .menu-dp3 a.on::before {
  display: none;
}
.menu-nav-bar .nav-menu .menu-dp3 a:hover span,
.menu-nav-bar .nav-menu .menu-dp3 a.on span {
  text-decoration: underline solid rgba(0,0,0,.3) 1px;
  text-underline-offset: 4px;
}
.menu-nav-bar .nav-menu .menu-dp3 a:hover span::before,
.menu-nav-bar .nav-menu .menu-dp3 a.on span::before {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #aaa;
}

/* 메뉴 아이콘 정리 */
.menu-nav-bar .nav-menu a i{position: relative;}
.menu-nav-bar .nav-menu a i {
  width: 16px;
  height: 18px;
}
.menu-nav-bar .nav-menu .quick a i::before,
.menu-nav-bar .nav-menu .menu-dp1 a i::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  content: '';
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-user,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-fin,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-certificate,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-receipt,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-check-receipt {
  width: 14px;
  height: 17px;
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-check,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-set,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-set-approval,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-tax-money,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-client,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-doc,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-doc2,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calc-receipt,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calc-check {
  width: 15px;
  height: 18px;
  margin-right: 11px;
}
.menu-nav-bar .nav-menu .quick a i.ico-uni-write {
  width: 16px;
  height: 18px;
  margin-left: -2px;
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-report,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-refresh,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-folder-doc,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-receive,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-timer1,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-thumb-user,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-time,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-monitor,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-monitor2,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-sprout2,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calendar-check {
  width: 16px;
  height: 18px;
  margin: 0 11px 0 -1px;
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-additional-time,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-user,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-user2 {
  width: 17px;
  height: 18px;
  margin-right: 9px;
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-approval,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-econ,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-clock2,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-ref,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-progress,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-purchase2,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-report-user,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-user-doc,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-site,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-org-chart2 {
  width: 17px;
  height: 18px;
  margin: 0 11px 0 -2px;
}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-avs,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-lc,
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-cards {
  width: 18px;
  height: 18px;
  margin: 5px 10px 0 -2px;
}
.menu-nav-bar .nav-menu a i.ico-uni-write::before {background: url('../images/uni-write.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-approval::before {background: url('../images/uni-main-approval.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-avs::before {background: url('../images/uni-main-avs.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-econ::before {background: url('../images/uni-main-econ.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-main-lc::before {background: url('../images/uni-main-lc.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-progress::before {background: url('../images/uni-progress.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-fin::before {background: url('../images/uni-fin.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-certificate::before {background: url('../images/uni-certificate.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-clock2::before {background: url('../images/uni-clock2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc::before {background: url('../images/uni-doc.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-check::before {background: url('../images/uni-doc-check.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-tax-money::before {background: url('../images/uni-doc-tax-money.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-doc-receive::before {background: url('../images/uni-doc-receive.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-client::before {background: url('../images/uni-manage-client.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-doc::before {background: url('../images/uni-manage-doc.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-time::before {background: url('../images/uni-manage-time.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-additional-time::before {background: url('../images/uni-additional-time.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-set::before {background: url('../images/uni-set.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-info::before {background: url('../images/uni-info.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-receipt::before {background: url('../images/uni-receipt.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-refresh::before {background: url('../images/uni-refresh.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-check-receipt::before {background: url('../images/uni-check-receipt.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calc-receipt::before {background: url('../images/uni-calc-receipt.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-report::before {background: url('../images/uni-report.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-ref::before {background: url('../images/uni-ref.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-folder-doc::before {background: url('../images/uni-folder-doc.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-monitor::before {background: url('../images/uni-monitor.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-monitor2::before {background: url('../images/uni-monitor2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-user::before {background: url('../images/uni-manage-user2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-report-user::before {background: url('../images/uni-report-user.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calc-check::before {background: url('../images/uni-calc-check.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-card1::before {background: url('../images/uni-card1.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-cards::before {background: url('../images/uni-cards.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-purchase2::before {background: url('../images/uni-purchase2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-site::before {background: url('../images/uni-manage-site.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-org-chart2::before {background: url('../images/uni-manage-org-chart2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-user2::before {background: url('../images/uni-manage-user2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-set-approval::before {background: url('../images/uni-set-approval.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-timer1::before {background: url('../images/uni-timer1.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-thumb-user::before {background: url('../images/uni-thumb-user.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-manage-doc2::before {background: url('../images/uni-manage-doc2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-money-in-out::before {background: url('../images/uni-money-in-out.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-user-doc::before {background: url('../images/uni-user-doc.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-sprout2::before {background: url('../images/uni-sprout2.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-calendar-check::before {background: url('../images/uni-calendar-check.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-user::before {background: url('../images/uni-user.svg') 0 0 no-repeat;}
.menu-nav-bar .nav-menu .menu-dp1 a i.ico-uni-link::before {background: url('../images/uni-link.svg') 0 0 no-repeat;}
.menu-nav-bar.side .footer {
  position: relative;
  width: 100%;
  height: 65px;
  background-color: #f5f7fb;
}
.menu-nav-bar.side .footer .copyright {
  position: absolute;
  bottom: 20px;
  left: 20px;
  letter-spacing: 0.15em;
  font-size: 11px;
  color: #bbb;
}

/* menu-group 추가 */
/* side */
.menu-nav-bar.side .nav-menu .menu-group {
  overflow: hidden;
  position: relative;
}
.menu-nav-bar.side .nav-menu .menu-group.on {margin-top: -7px;}
.menu-nav-bar.side .nav-menu .menu-group.on:first-child,
.menu-nav-bar.side .nav-menu .menu-group-slt + .menu-group.on {margin-top: 10px;}
.menu-nav-bar.side .nav-menu .menu-group.on::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  border: 6px solid #fff;
  border-right: 0;
  border-radius: 24px 0 0 24px;
  /* background-color: rgba(255,255,255,.5); */
  background-color: #f2f4f9;
  box-sizing: border-box;
}
.menu-nav-bar.side .nav-menu .menu-group h2 {
  position: relative;
  margin: 16px 20px 5px 30px;
  padding-bottom: 12px;
  font-family: 'SCD-5';
  font-size: 15px;
  color: #aaa;
  border-bottom: 2px solid #fff;
  cursor: pointer;
}
.menu-nav-bar.side .nav-menu .menu-group h2::before {
  position: absolute;
  top: calc(50% - 14px);
  right: 6px;
  width: 7px;
  height: 11px;
  content: '';
  background: url('../images/ico-bk-arrow-b.svg') 0 0 no-repeat;
  opacity: .3;
  -webkit-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
}
.menu-nav-bar.side .nav-menu .menu-group.on h2::before {
  top: calc(50% - 9px);
  right: 26px;
  opacity: 1;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.menu-nav-bar.side .nav-menu .menu-group h2:hover,
.menu-nav-bar.side .nav-menu .menu-group.on h2 {
  color: #222;
}
.menu-nav-bar.side .nav-menu .menu-group.on h2 {
  margin-top: 19px;
  margin-bottom: -1px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 12px 30px;
}
.menu-nav-bar.side .nav-menu .menu-group .menu-dp1 {display: none;}
.menu-nav-bar.side .nav-menu .menu-group.on .menu-dp1 {display: block;}
.menu-nav-bar.side .nav-menu .menu-group .menu-dp1 {padding-bottom: 20px;}
/* top */
.menu-nav-bar.top .nav-menu .menu-group-slt,
.menu-nav-bar.top .nav-menu .menu-group {
  float: left;
}
.menu-nav-bar.side .nav-menu .menu-group-slt,
.menu-nav-bar.top .nav-menu .menu-group-slt span {
  display: none;
}
.menu-nav-bar.top .nav-menu .menu-group-slt {
  position: relative;
  border-right: 1px solid #fff;
  /* background-color: #f0f2f7; */
  /* background-color: #f0f2f6; */
  background-color: #f2f4f9;
  box-sizing: border-box;
}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-on {
  position: relative;
  width: 100%;
  min-width: 100px;
  height: 50px;
  padding: 0 40px 0 20px;
  line-height: 50px;
  font-family: 'SCD-5';
  color: #222;
  box-sizing: border-box;
  cursor: pointer;
}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-on:hover {border-color: #999;}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-on::before {
  position: absolute;
  top: 20px;
  right: 17px;
  width: 7px;
  height: 11px;
  content: '';
  background: url('../images/ico-bk-arrow-b.svg') 0 0 no-repeat;
  opacity: .6;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-on:hover::before {opacity: 1;}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-list {
  display: none;
  position: absolute;
  top: 45px;
  left: -1px;
  min-width: 100%;
  padding: 10px 0;
  border: 3px solid #ebebeb;
  border-radius: 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.menu-nav-bar.top .nav-menu .menu-group-slt.on .slt-list {display: block;}
/* .menu-nav-bar.top .nav-menu .menu-group-slt .slt-list::before {
  position: absolute;
  top: -9px;
  right: 6px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #ebebeb;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-list::after {
  position: absolute;
  top: -5px;
  right: 7px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
} */
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-list span {
  position: relative;
  display: flex;
  align-items: center;
  height: inherit;
  min-height: inherit;
  padding: 7px 18px;
  text-align: inherit;
  line-height: 18px;
  white-space: nowrap;
  font-size: 13px;
  color: #999;
  border: 0;
  cursor: pointer;
}
.menu-nav-bar.top .nav-menu .menu-group-slt .slt-list span:hover {color: #222;}
.menu-nav-bar.top .nav-menu .menu-group h2 {display: none;}
.menu-nav-bar.top .nav-menu .menu-group .menu-dp1 {display: none;}
.menu-nav-bar.top .nav-menu .menu-group.on .menu-dp1 {display: block;}

/* menu-divide 추가 */
.menu-nav-bar .nav-menu .menu-dp1 .menu-divide-tt {pointer-events: none;}
.menu-nav-bar.side .nav-menu .menu-dp1 .menu-divide-tt:first-child {padding-top: 5px;}
.menu-nav-bar.side .nav-menu .menu-dp1 .menu-divide-tt {padding: 15px 20px 0 0;}
.menu-nav-bar.side .nav-menu .menu-dp1 li + .menu-divide-tt {
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.menu-nav-bar.side .nav-menu .menu-dp1 .menu-divide-tt + li > a.on {margin-top: 20px;}
.menu-nav-bar.side .nav-menu .menu-dp1 .menu-divide-tt p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px 2px 25px;
  font-size: 9px;
  color: #ccc;
  border-radius: 4px;
  background-color: #fff;

  /* 타이틀 제거 */
  display: none;
}
.menu-nav-bar.top .nav-menu .menu-dp1 {position: relative;}
.menu-nav-bar.top .nav-menu .menu-dp1 .menu-divide-tt {padding: 0;}
.menu-nav-bar.top .nav-menu .menu-dp1 li + .menu-divide-tt::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 50px;
  content: '';
  border-left: 1px solid #e5e5e5;
}
.menu-nav-bar.top .nav-menu .menu-dp1 .menu-divide-tt p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 1px;
  padding: 1px 3px;
  white-space: nowrap;
  font-size: 9px;
  color: #ccc;
  border-radius: 4px;
  background-color: #fff;

  /* 타이틀 제거 */
  display: none;
}
/* .menu-nav-bar .nav-menu .menu-dp1 li.separate {margin-top: 10px;}
.menu-nav-bar .nav-menu .menu-dp1 li + li.separate {margin-top: 30px;}
.menu-nav-bar .nav-menu .menu-dp1 li + li.separate::before {
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background-color: #e5e5e5;
}
.menu-nav-bar .nav-menu .menu-dp1 li.separate.on {margin-top: 50px;}
.menu-nav-bar .nav-menu .menu-dp1 li.separate.on::before {top: -35px;} */

/* - close - */
.menu-nav-bar.side.side-off {
  width: 0;
  -webkit-transition: width 0.15s, -webkit-transform 0.15s;
  transition: width 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}
.menu-nav-bar.side.side-off .btn-close {display: none;}
.menu-nav-bar.side.side-off .btn-open {
  display: block;
  right: -26px;
  width: 26px;
  transition: all .4s ease 0s;
}
.menu-nav-bar.side.side-off .btn-open::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  content: '';
  background-color: #f5f7fb;
  z-index: -1;
}
/* .menu-nav-bar.side.side-off .btn-open i {border-radius: 0 50% 50% 0;} */
.menu-nav-bar.side.side-off .nav-menu,
.menu-nav-bar.side.side-off .footer {
  display: none;
  width: max-content;
  white-space: nowrap;
}
.menu-nav-bar.side.side-off .help-btn {display: none;}

/* 스크롤 추가 */
.menu-nav-bar.side {min-height: inherit;}
.menu-nav-bar.side .footer::before {
	position: absolute;
	top: -30px;
	left: 0;
	display: inline-block;
	content: '';
	width: 100%;
	height: 30px;
	background: transparent;
  background-image: linear-gradient(rgba(245,247,251,0),rgba(245,247,251,0.7),#f5f7fb) !important;
	pointer-events: none;
}
.menu-nav-bar.side .nav-menu .mCSB_scrollTools_vertical {margin: 0 !important;}
.menu-nav-bar.side .nav-menu .mCSB_scrollTools_vertical .mCSB_dragger_bar {margin-right: 0 !important;}


/* --- 2201 바로가기 영역 수정 --- */
.menu-nav-bar.v2.side .nav-menu {height: calc(100% - 95px);}
.menu-nav-bar.v2.side .footer {
  display: block;
  height: 95px;
  border-top: 1px solid rgba(0,0,0,.1);
  box-sizing: border-box;
}
.menu-nav-bar.v2.side .footer::before {top: -31px;}
.menu-nav-bar.v2.top .footer {
  width: 100px;
  height: 60px;
  text-align: center;
}
.menu-nav-bar.v2.side .footer .btn-area {
  display: block;
  margin: 7px 0;
  text-align: left;
}
.menu-nav-bar.v2.top .footer .btn-area {
  display: block;
  width: 72px;
  top: calc(50% - 15px);
  left: calc(50% - 34px);
}
.menu-nav-bar.v2.side .footer .btn-area > li {
  position: relative;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}
.menu-nav-bar.v2.side .footer .btn-area > li + li::before {
  position: absolute;
  top: -1px;
  left: calc(50% - 90px);
  width: 180px;
  height: 1px;
  content: '';
  background-color: rgba(0,0,0,.08);
}
.menu-nav-bar.v2.top .footer .btn-area > li {float: left;}
.menu-nav-bar.v2.top .footer .btn-area > li + li {margin-left: 10px;}
.menu-nav-bar.v2.side .footer .btn-area .btn-link {
  position: relative;
  display: block;
  height: 40px;
  padding: 0 30px;
  line-height: 40px;
  text-decoration: none;
  color: #777;
  cursor: pointer;
}
.menu-nav-bar.v2.top .footer .btn-area .btn-link {
  position: relative;
  display: inline-block;
  width: 31px;
  height: 31px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #777;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}
.menu-nav-bar.v2 .footer .btn-area .btn-link:hover{color: #222;}
.menu-nav-bar.v2 .footer .btn-area .btn-link::before {
  position: absolute;
  width: 14px;
  height: 14px;
  content: '';
  background: url('../images/ico-bk-home.svg') 0 0 no-repeat;
  background-size: 13px 14px;
  opacity: .4;
}
.menu-nav-bar.v2.side .footer .btn-area .btn-link::before {
  top: 12px;
  right: 25px;
}
.menu-nav-bar.v2.top .footer .btn-area .btn-link::before {
  top: calc(50% - 8px);
  left: calc(50% - 7px);
}
.menu-nav-bar.v2 .footer .btn-area .btn-link.service::before {
  top: 13px;
  background: url('../images/ico-bk-dots.svg') 0 0 no-repeat;
  background-size: 13px 13px;
}
.menu-nav-bar.v2.top .footer .btn-area .btn-link.service::before {
  top: calc(50% - 7px);
  left: calc(50% - 7px);
}
.menu-nav-bar.v2 .footer .btn-area .btn-link:hover::before {opacity: .8;}
.menu-nav-bar.v2.top .footer .btn-area .btn-link > span {display: none;}
.menu-nav-bar.v2 .footer .btn-area .service-list {
  display: none;
  position: absolute;
  min-width: 140px;
  text-align: left;
  border: 1px solid #777;
  background-color: #fff;
  box-sizing: border-box;
}
.menu-nav-bar.v2.side .footer .btn-area .service-list {
  right: -140px;
  bottom: -8px;
}
.menu-nav-bar.v2.top .footer .btn-area .service-list {
  top: 30px;
  right: 0;
}
.menu-nav-bar.v2 .footer .btn-area .btn-link.service:hover .service-list {display: block;}
.menu-nav-bar.v2.side .footer .btn-area .service-list:before {
  position: absolute;
  left: -8px;
  bottom: 19px;
  width: 0;
  height: 0;
  content: '';
  border-right: 8px solid #555;
  border-top: 6px solid transparent;
  border-bottom: 7px solid transparent;
}
.menu-nav-bar.v2.side .footer .btn-area .service-list:after {
  position: absolute;
  left: -7px;
  bottom: 20px;
  width: 0;
  height: 0;
  content: '';
  border-right: 7px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 6px solid transparent;
}
.menu-nav-bar.v2.top .footer .btn-area .service-list:before {
  position: absolute;
  top: -8px;
  right: 8px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 8px solid #555;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.menu-nav-bar.v2.top .footer .btn-area .service-list:after {
  position: absolute;
  top: -7px;
  right: 9px;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.menu-nav-bar.v2 .footer .btn-area .service-list ul {padding: 11px 0;}
.menu-nav-bar.v2 .footer .btn-area .service-list ul + ul {border-top: 1px solid #e5e5e5;}
.menu-nav-bar.v2 .footer .btn-area .service-list li {
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.menu-nav-bar.v2 .footer .btn-area .service-list li a {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-left: 36px;
  color: #777;
  box-sizing: border-box;
}
.menu-nav-bar.v2 .footer .btn-area .service-list li a:hover {color: #222;}
.menu-nav-bar.v2 .footer .btn-area .service-list li a::before {
  position: absolute;
  top: calc(50% - 2px);
  left: 23px;
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 50%;
  background-color: #ccc;
}
.menu-nav-bar.v2 .footer .btn-area .service-list li a:hover::before {background-color: #222;}


/* --- side-nav 이전 --- */
/* - open - */
.side-nav {
  position: fixed;
  width: 220px;
  height: 100%;
  min-height: 750px;
  color: #fff;
  background-color: #0e5ce9;
  -webkit-transition: width 0.15s, -webkit-transform 0.15s;
  transition: width 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
  z-index: 50;
}
.side-nav .nav-title {
  position: relative;
  padding: 20px 0 20px 20px;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  background-color: #0065bd;
}
.side-nav .nav-title a {padding: 20px 0;}
.side-nav .nav-title i {
  margin: -5px 5px 0 0;
  font-size: 50px;
}
.side-nav .nav-title span {
  font-family: "SCD-5";
  font-weight: normal;
}
.side-nav .btn-close,
.side-nav .btn-open {
  position: absolute;
  top: 0;
  right: -22px;
  width: 22px;
  height: 22px;
  text-align: center;
  background-color: #0065bd;
  cursor: pointer;
}
.side-nav .btn-close i,
.side-nav .btn-open i {
  font-weight: 600;
}
.side-nav .btn-open {display: none;}
.side-nav a {
  color: #fff;
}
.nav-menu .quick {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-menu .quick a {
  background-color: #ff7000;
}
.nav-menu .quick li,
.nav-menu .menu-dp1 li {
  position: relative;
}
.nav-menu .quick li,
.nav-menu .menu-dp1 li {
  position: relative;
}
.nav-menu .quick a,
.nav-menu .menu-dp1 a {
  position: relative;
  display: block;
  padding: 18px 0 18px 30px;
}
.nav-menu .menu-dp1 {padding-bottom: 30px;}
.nav-menu .menu-dp1 a.on + .menu-dp2 {
  display: block;
  border-top: 1px solid rgba(255,255,255,.1);
}
.nav-menu .menu-dp1 > li > a span::after {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: calc(50% - 9px);
  right: 30px;
  content: '\e804';
  font-weight: 600;
}
.nav-menu .menu-dp1 > li > a.on span::after {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: calc(50% - 9px);
  right: 30px;
  content: '\e801';
  font-weight: 600;
}
.nav-menu .menu-dp1 > li > a.no-dp2 span::after,
.nav-menu .menu-dp1 > li > a.no-dp2.on span::after {
  display: none;
}
.nav-menu .quick a i,
.nav-menu .menu-dp1 a i,
.footer a i {
  margin: -2px 15px 0 0;
  font-size: 30px;
}
.nav-menu .menu-dp1 a i.ico-uni-arrow-up,
.nav-menu .menu-dp1 a i.ico-uni-arrow-down {
  position: absolute;
  top: calc(50% - 7px);
  right: 30px;
  margin-right: 0;
  font-size: inherit;
  font-weight: 600;
}
.nav-menu .menu-dp2 {
  display: none;
  background-color: #0077c7;
}
.nav-menu .menu-dp2 a {
  display: block;
  height: 19px;
  padding: 11px 0 11px 75px;
  font-size: 12px;
}
.nav-menu .menu-dp2 a:hover,
.nav-menu .menu-dp2 a.on {
  background-color: #0067bd;
}
.nav-menu .menu-dp2 li {position: relative;}
.nav-menu .menu-dp2 li .badge-num {
  display: none;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 15px;
  font-size: 11px;
  color: #fff45c;
  background-color: #0050ad;
}
.nav-menu .menu-dp2 li .badge-num.on {display: inline-block;}
.side-nav .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #0e5ce9;
}
.side-nav .footer > a {
  position: relative;
  display: block;
  padding: 8px 18px;
  color: #fff78d;
  background-color: rgba(255,247,141,.15);
}
.side-nav footer.footer > a:hover {
  background-color: #0067bd;
}
.side-nav .footer > a i {
  margin-right: 4px;
  font-size: 52px;
}
.side-nav .footer .copyright {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  border-top: 1px solid rgba(255,255,255,.2);
}
.side-nav .footer .copyright a {
  position: relative;
  display: block;
  height: 30px;
  padding: 19px 0 14px 28px;
  font-size: 14px;
}
.side-nav .footer .copyright a:hover {background-color: rgba(255,255,255,.1);}
.side-nav .footer .copyright a i {margin: -2px 10px 0 -4px;}

/* - close - */
.side-nav.side-off {
  width: 90px;
  -webkit-transition: width 0.15s, -webkit-transform 0.15s;
  transition: width 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}
.side-nav.side-off .btn-close {display: none;}
.side-nav.side-off .btn-open {display: block;}
.side-nav.side-off .nav-title span,
.side-nav.side-off .menu-dp1 > li > a span,
.side-nav.side-off .quick > li > a span,
.side-nav.side-off .footer span {
  display: none;
  width: max-content;
  white-space: nowrap;
  position: absolute;
  top: calc(50% - 11px);
  left: 80px;
  padding: 2px 8px;
  font-size: 11px;
  border: 2px solid #fff;
  border-radius: 15px;
  animation: fadeIn .5s ease-in-out 1;
}
.side-nav.side-off .footer .copyright a:hover::after {
  left: 50px;
  padding: 2px 8px;
  font-size: 11px;
  border: 2px solid #fff;
  border-radius: 15px;
}
.side-nav.side-off .menu-dp1 > li > a:hover span::after,
.side-nav.side-off .quick > li > a:hover span::after {
  display: none;
}
.side-nav.side-off .nav-title span {
  background-color: #0065bd;
}
.side-nav.side-off .quick > li > a span {
  background-color: #ff7000;
}
.side-nav.side-off .menu-dp1 > li > a span,
.side-nav.side-off .footer span {
  background-color: #0e5ce9;
}
.side-nav.side-off .nav-title a:hover span,
.side-nav.side-off .menu-dp1 > li > a:hover span,
.side-nav.side-off .quick > li > a:hover span,
.side-nav.side-off .footer a:hover span {
  display: block;
}
.side-nav.side-off .menu-dp1 a i.ico-uni-arrow-up,
.side-nav.side-off .menu-dp1 a i.ico-uni-arrow-down {display: none;}
.side-nav.side-off .menu-dp2 {
  position: absolute;
  top: 0;
  left: 80px;
  width: max-content;
  white-space: nowrap;
  border: 2px solid #fff;
  border-radius: 5px;
  z-index: 100;
  animation: fadeIn .5s ease-in-out 1;
}
.side-nav.side-off .menu-dp1 a.on + .menu-dp2 {border: 2px solid #fff;}
.side-nav.side-off .menu-dp2:before {
  content: '';
  width:0;
  height: 0;
  position: absolute;
  top: 10px;
  left: 0;
  margin-left:-10px;
  border-right: 10px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.side-nav.side-off .menu-dp2:after {
  content: '';
  width:0;
  height: 0;
  position: absolute;
  top: 12px;
  left: 0;
  margin-left:-8px;
  border-top: 8px solid transparent;
  border-right: 8px solid #0077c7;
  border-bottom: 8px solid transparent;
}
.side-nav.side-off .menu-dp2 a {
  padding: 5px 10px;
  font-size: 11px;
}
.side-nav.side-off .menu-dp2 li:first-child a:hover,
.side-nav.side-off .menu-dp2 li:first-child a.on {
  border-radius: 5px 5px 0 0;
}
.side-nav.side-off .menu-dp2 li:last-child a:hover,
.side-nav.side-off .menu-dp2 li:last-child a.on {
  border-radius: 0 0 5px 5px;
}
.side-nav.side-off .footer a span {display: none;}
.side-nav.side-off .footer .copyright {text-align: center;}
.side-nav.side-off .footer .copyright a {padding: 20px 0;}
.side-nav.side-off .footer .copyright a i {margin: 0;}
.side-nav.side-off .footer .copyright p {
  margin: 5px 0 0 0;
  font-size: 11px;
}

/* 스크롤 추가 */
.side-nav {min-height: inherit;}
.side-nav .footer::before {
	position: absolute;
	top: -30px;
	left: 0;
	display: inline-block;
	content: '';
	width: 100%;
	height: 30px;
	background: transparent;
	background-image: linear-gradient(rgba(14,92,233,0),rgba(14,92,233,0.7),#0e5ce9);
	pointer-events: none;
}
.nav-menu .mCSB_scrollTools_vertical {margin: 0 !important;}
.nav-menu .mCSB_scrollTools_vertical .mCSB_dragger_bar {margin-right: 0 !important;}
.side-nav.side-off .nav-title {z-index: 100;}
.side-nav.side-off .nav-menu .menu-dp1 a i {display: block;}
.side-nav.side-off .menu-dp1 > li > a:hover span, 
.side-nav.side-off .footer a:hover span {z-index: 50;}
.side-nav.side-off .mCustomScrollBox {overflow: inherit;}
.side-nav.side-off .mCSB_container {
  overflow: inherit;
  width: inherit !important;
}
.side-nav.side-off .mCSB_scrollTools_horizontal {display: none !important;}


/* --- main-container --- */
.side-nav + section {
  min-width: 900px;
  margin-left: 220px;
  padding: 15px 40px 40px;
}
.menu-nav-bar + section {
  min-width: 963px;
  /* 최소 사이즈 1280 기준. 스크롤바 17px 포함 적용 */
  padding: 15px 40px 40px;
}
.tax .menu-nav-bar + section {min-width: 1100px;}
.menu-nav-bar.side + section {margin-left: 220px;}
.top-header + .menu-nav-bar + section {padding-top: 60px;}
.top-header + .menu-nav-bar.top + section {padding-top: 110px;}
.menu-nav-bar.side.side-off + section,
.menu-nav-bar.side + section.side-off {margin-left: 0;}
.side-nav + section.side-off {margin-left: 90px;}

/* global-nav */
.global-nav {
  display: inline-block;
  width: 100%;
  /* min-height: 18px; */
  font-size: 12px;
  color: #999;
}
/* .top-header + .menu-nav-bar + section .global-nav {margin-top: 15px;} */
.global-nav .breadcrumbs {float: left;}
.menu-nav-bar + section .global-nav .breadcrumbs {
  float: none;
  margin-top: 15px;
  /* text-align: right; */
  color: #999;
}
.global-nav .breadcrumbs i {
  margin: -2px 2px 0 0;
  font-weight: 600;
}
.global-nav .breadcrumbs i:first-child {margin-left: 0;}
.menu-nav-bar + section .global-nav .breadcrumbs i:first-child {color: #555;}
.global-nav .breadcrumbs .on {color: #222;}
.global-nav .user-area {display: inline-block;}
.global-nav .user-area .user-name {
  color: #0e5ce9;
}
.global-nav .user-area a:hover {font-family: "SCD-5";}
.global-nav .user-area a:last-child::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 5px;
  background-color: #555;
}
.global-nav .session-area {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  animation: fadeIn 2s ease 1;
}
.global-nav .session-area i::before {
  position: absolute;
  top: 1px;
  left: 0;
  font-weight: bold;
  font-size: 17px;
  color: #2F79A6;
}
.global-nav .session-area span {
  margin-left: 8px;
  color: #2F79A6;
}
.global-nav .btn-area {
  overflow: visible;
  display: inline-block;
  margin-left: 10px;
}
.global-nav .btn-area a {
  display: inline-block;
  margin-top: -1px;
  padding: 1px 10px;
  vertical-align: top;
  font-size: 12px;
  color: #fff;
  border-radius: 18px;
  background-color: #ff4c5d;
}

/* content */
.container-in {
  position: relative;
  margin-top: 35px;
}
.container-in.approval-wrtie {min-width: 1270px;}
.container-in.min-wid {min-width: 1400px;}
.menu-nav-bar + section .container-in {margin-top: 15px;}
.menu-nav-bar + section .container-in.wid-standard {
  /* min-width: 1193px; */
  /* 우측 스크롤바 사이즈 포함 일부 브라우저에서 영수증 잘림 */
  min-width: 1210px;
  /* 우측 스크롤바 사이즈 미포함 */
}
.content-tt {
  display: flex;
  align-items: center;
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 21px;  
}
.content-tt i {display: none;}
/* 금주 출퇴근 현황 아이콘 추가 */
.content-tt .tt-info-icon i {
  display: block;
  padding-left: 5px;
  color: #0e5ce9;
}
.content-tt .tt-info-icon i::before {
  font-weight: 600;
}
.content-tt .add-explain {
  margin: 8px 0 0 12px;
  font-size: 13px;
  color: #777;
}
.content-tt .badge-area {
  display: flex;
  align-items: center;
  margin-left: 12px;
  font-size: 12px;
}
.content-tt .badge-area span {
  padding: 4px 8px;
  border-radius: 8px;
}
.content-tt .badge-area span:nth-child(1) {
  font-family: "SCD-5";
  color: #76bb7b;
  /* border: 1px solid rgba(118,187,123,.65); */
  background-color: rgba(118,187,123,.16);
  box-sizing: border-box;
}
.content-tt .badge-area span:nth-child(2) {
  font-family: "SCD-5";
  color: #7bb3f9;
  /* border: 1px solid rgba(123,179,249,.7); */
  background-color: rgba(123,179,249,.17);
  box-sizing: border-box;
}
.content-tt .badge-area span:nth-child(3) {
  font-family: "SCD-5";
  color: #ffa4a3;
  /* border: 1px solid rgba(255,164,163,.65); */
  background-color: rgba(255,164,163,.17);
  box-sizing: border-box;
}
.content-tt .badge-area span + span {margin-left: 6px;}
.content-tt-2 {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
}
.content-tt-2::before {
  position: absolute;
  top: 11px;
  left: 8px;
  width: 5px;
  height: 5px;
  content: '';
  border-radius: 50%;
  background-color: #999;
}
.tbl-tt {
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 17px;  
}
.modal-body .tbl-tt {font-size: 16px;}
.tbl-tt i {display: none;}
.content-tt-2 .add-explain,
.tbl-tt .add-explain {
  margin-left: 12px;
  font-size: 13px;
  color: #777;
}
.content-in {position: relative;}
.content-tt + .content-in > .btn-area:first-child {
  position: absolute;
  top: -49px;
  right: 0;
}
.content-box {
  position: relative;
  margin-top: 15px;
  padding: 40px 40px 60px;
  border: 1px solid #eee;
  border-radius: 15px;
}
.content-box.bo-none {
  margin-top: 10px;
  padding: 0;
  border: 0;
}
.content-box .cont-box-explain {
  position: absolute;
  top: 28px;
  left: 40px;
  font-size: 13px;
}
/* .content-box.user-set {padding: 20px;} */
.content-box .doc-view {
  position: relative;
  margin: 20px auto 0;
  padding: 40px 20px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.content-box .doc-view.print-area {padding: 20px;}
/* .content-box .doc-view::after {
  display: inline-block;
  content: '';
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding-bottom: 25px;
  border-bottom: 1px solid #eee;
} */
/* .detail-container .content-box .doc-view {
  border: 1px solid #ccc;
  padding: 40px 20px 20px;
} */
.detail-container .content-box .doc-view::after {display: none;}
.content-box .doc-view.down-size {
  /* width: 677px; */
  width: 720px;
  font-size: 13px;
}
.container-in.approval-wrtie .content-box .doc-view.down-size {width: 756px;}
.content-box .doc-view.down-size .in-editor {
  overflow: hidden;
  width: 680px;
}
.content-box .doc-view.down-size.op-border-n .in-editor {width: 720px;}
.content-box .doc-view .add-content .in-editor {
  transform: scale(1.0);
  transform-origin: top left;
}
.content-box .doc-view .btn-area,
.content-box .col-2nd-top .btn-area {
  position: absolute;
  /* top: -7px;
  right: 0; */
  top: 33px;
  right: 10px;
}
/* .detail-container .content-box .doc-view .btn-area,
.detail-container .content-box .col-2nd-top .btn-area {
  top: 33px;
  right: 10px;
} */
.content-box .doc-view .btn-area i,
.content-box .col-2nd-top .btn-area i {
  font-size: 45px;
  color: #ccc;
  cursor: pointer;
}
.content-box .doc-view .btn-area i:hover,
.content-box .col-2nd-top .btn-area i:hover {
  color: inherit;
}
.content-box .doc-view .btn-area i.ico-uni-upsize-f,
.content-box .doc-view.down-size .btn-area i.ico-uni-downsize-f, 
.content-box .row-box.up-size .col-2nd-top .btn-area i.ico-uni-upsize,
.content-box .col-2nd .col-2nd-top .btn-area i.ico-uni-downsize { 
  display: none;
}
.content-box .doc-view.down-size .btn-area i.ico-uni-upsize-f,
.content-box .doc-view .btn-area i.ico-uni-downsize-f, 
.content-box .col-2nd .col-2nd-top .btn-area i.ico-uni-upsize,
.content-box .row-box.up-size .col-2nd-top .btn-area i.ico-uni-downsize {  
  display: block;
}
.content-box .doc-top {overflow: hidden;}
.content-box .doc-top h3 {
  margin-bottom: 15px;
  text-align: center;
  font-family: "SCD-5";
  font-size: 22px;
}
.content-box .doc-top p {
  float: left;
  font-size: 12px;
  color: #999;
}
.content-box .doc-top p + p {float: right;}
.content-box .doc-top + .tbl-basic .tbl-area:first-child {padding-top: 10px;}
.content-box .tbl-basic .tbl-area table td > * {vertical-align: text-top;}
.content-box .tbl-basic .tbl-area table td.align-inh > * {vertical-align: inherit;}
.doc-view table tr {
  /* height: 48px; */
  height: 40px;
}
.doc-view .in-editor table tr {height: 0;}
.doc-view .add-template table tr {height: inherit;}
/* .doc-view table th .comp-user + span,
.doc-view table td .comp-user + span {
  padding-left: 5px;
} */
.doc-view .tbl-area table th .comp-user + span {padding-left: 5px;}
.doc-view .tbl-basic .tbl-area table td .progress-draft,
.doc-view .tbl-basic .tbl-area table td .progress-retr,
.doc-view .tbl-basic .tbl-area table td .progress-rej,
.doc-view .tbl-basic .tbl-area table td .progress-agree,
.doc-view .tbl-basic .tbl-area table td .progress-fin,
.doc-view .tbl-basic .tbl-area table td .progress-arbitrary {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  line-height: 36px;
  font-size: 12px;
  color: #fff;
  border-radius: 50%;
}
.doc-view table td .progress-draft.in-img,
.doc-view table td .progress-retr.in-img,
.doc-view table td .progress-rej.in-img,
.doc-view table td .progress-agree.in-img,
.doc-view table td .progress-fin.in-img,
.doc-view table td .progress-arbitrary.in-img {
  width: auto;
  max-width: 62px;
  height: auto;
  max-height: 36px;
  background-color: transparent;
}
.doc-view table td .progress-draft.in-img img,
.doc-view table td .progress-retr.in-img img,
.doc-view table td .progress-rej.in-img img,
.doc-view table td .progress-agree.in-img img,
.doc-view table td .progress-fin.in-img img,
.doc-view table td .progress-arbitrary.in-img img {
  /* width: inherit;
  max-width: 62px;
  height: inherit;
  max-height: 36px; */
  width: auto;
  max-width: 36px;
  height: auto;
  max-height: 36px;
  border-radius: 0;
}
.doc-view table td .progress-draft + span,
.doc-view table td .progress-retr + span,
.doc-view table td .progress-rej + span,
.doc-view table td .progress-agree + span,
.doc-view table td .progress-fin + span,
.doc-view table td .progress-arbitrary + span {
  display: inline-block;
  margin-top: 8px;
}
.doc-view table td .progress-draft {background-color: #f395a5;}
.doc-view table td .progress-draft + span {color: #f395a5;}
.doc-view table td .progress-retr {background-color: #8398B5;}
.doc-view table td .progress-retr + span {color: #8398B5;}
.doc-view table td .progress-rej {background-color: #ff4c5d;}
.doc-view table td .progress-rej + span {color: #ff4c5d;}
.doc-view table td .progress-agree {background-color: #00c0b5;}
.doc-view table td .progress-agree + span {color: #00c0b5;}
.doc-view table td .progress-fin {background-color: #ff7e00;}
.doc-view table td .progress-fin + span {color: #ff7e00;}
.doc-view table td .progress-arbitrary {background-color: #bd967e;}
.doc-view table td .progress-arbitrary + span {color: #bd967e;}
.content-box dl {margin-top: 40px;}
.content-box dl dt {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-family: "SCD-5";
  font-size: 17px;
  /* border-bottom: 1px solid #999; */
}
.content-box dl.add-ref dt,
.content-box dl.add-file dt,
.content-box dl.add-comment dt {
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}
.content-box dl dt span {
  font-family: "SCD-5";
  padding-left: 5px;
  font-size: 12px;
  color: #ff4c5d;
}
.content-box dl dt .btn-area.right {top: -5px;}
.content-box dl i:not(.btn-inp) {
  font-size: 18px;
  cursor: pointer;
}
/* .content-box dl i:not(.btn-inp)::before {font-weight: 600;} */
.content-box dl:not(.org-chart) i:not(.btn-inp)::before {font-weight: 600;}
.content-box dl .slt-area i {font-size: inherit;}
.content-box dl dt i {
  display: none;
  width: 9px;
  height: 9px;
  margin: -4px 8px 0 0;
  text-indent: -9999px;
  font-size: 0;
  border-radius: 50%;
  border: 1px solid #0e5ce9;
  box-sizing: border-box;
}
.content-box dl dt i.ico-btn {
  top: 6px;
  right: 8px;
  font-size: 18px;
  cursor: pointer;
}
.content-box dl dt i.ico-btn::before {color: #222;}
.content-box dl dt i.ico-btn:hover::before {
  color: #0e5ce9;
}
.content-box dl.slt-box dt,
.content-box dl.inp-box dt,
.content-box dl.title-box dt,
.content-box dl.form-box dt {
  margin: 0;
  border: 0;
}
.content-box dl dd .inp.next-check {width: calc(100% - 125px);}
.content-box dl dd .guide-in-link {
  padding: 10px;
  line-height: 20px;
  color: #222;
  border-radius: 4px;
  background-color: rgba(14,92,233,.06);
}
.content-box dl dd .guide-in-link a {
  text-decoration: underline;
  color: #0e5ce9;
}
.content-box dl.slt-user dt i.ico-btn::before {font-weight: normal;}
.content-box dl.slt-user dt .btn-area {
  position: absolute;
  top: -2px;
  right: 0;
}
.content-box dl.slt-user dt i.ico-btn {
  margin: -6px -10px 0 0;
  font-size: 25px;
}
.content-box dl.slt-user dt i.ico-btn::before {
  color: #ff8b00;
}
.content-box dl.slt-user ul {
  overflow: auto;
  min-height: 143px;
  margin-top: -11px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.content-box dl.slt-user ul.line-3 {min-height: 107px;}
.content-box dl.slt-user ul li {
  overflow: hidden;
  position: relative;
  padding: 8px;
  padding-right: 25px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content-box dl.slt-user ul li.default {background-color: #fffef2;}
.content-box dl.slt-user ul li.readonly {background-color: #f7f7f7;}
.content-box dl.slt-user ul li.required {background-color: rgba(255,240,0,.1);}
.content-box dl.slt-user ul li + li {border-top: 1px dashed #ddd;}
.content-box .slt-user dd ul li span:first-child {
  display: inline-block;
  width: 65px;
  margin: 0 5px;
  text-align: center;
}
.content-box .slt-user dd ul li span.basic {color: #555;}
.content-box .slt-user dd ul li span.approval {color: #ff8b00;}
.content-box .slt-user dd ul li span.agree {color: #00c0b5;}
.content-box dl.slt-user ul li .team-name {color: #999;}
.content-box dl.slt-user.ellipsis ul li .team-name {
  overflow: hidden;
  display: inline-block;
  max-width: 100px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}
.content-box .slt-user dd ul li .user-name {margin-left: 0;}
.content-box .slt-user dd ul li .user-name span {
  width: inherit;
  margin: 0 0 0 5px;
}
.content-box dl.slt-user ul li span + span {margin-left: 5px;}
/* .content-box dl.slt-user ul li span + span.op-name {margin-left: 10px;} */
.content-box dl.slt-user ul li .btn-inline {
  position: absolute;
  top: 8px;
  right: 10px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  line-height: 16px;
  font-size: 11px;
  border: 1px solid #555;
  border-radius: 20px;
  box-sizing: border-box;
}
.content-box dl.slt-user ul li i {
  top: 10px;
  right: 10px;
  font-size: 14px;
}
.content-box dl.slt-user ul li i:hover {color: #ff4c5d;}
/* .content-box dl.slt-user ul li.apvln-by-cond .team-name span,
.content-box dl.slt-user ul li.apvln-by-cond .op-label span,
.content-box dl.slt-user ul li.apvln-by-cond .op-name span {
  display: inline-block;
  width: inherit;
  margin: 0;
} */

/* 옵션별 설명 추가 */
.content-box dl.slt-user ul li .line-desc {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  height: 22px;
  padding: 0 5px;
  line-height: 22px;
  font-size: 12px;
  color: #ff4c5d;
  border-radius: 4px;
  background-color: rgba(255,76,93,.08);
}
/* .content-box dl.slt-user ul li.acl-line .ico-btn {display: none;} */
.content-box dl.slt-user ul li.acl-line .line-desc.acl {display: block;}

/* 조건별 결재선 추가 */
/* .apvln-by-cond 일단 삭제 */
.content-box dl.slt-user ul li {display: flex;}
.content-box dl.slt-user ul li .btn-area {
  display: flex;
  position: absolute;
  top: calc(50% - 9px);
  right: 9px;
}
.content-box dl.slt-user ul li .btn-area i {
  overflow: hidden;
  position: relative;
  top: auto;
  right: auto;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  color: #555;
  border-radius: 50%;
}
.content-box dl.slt-user ul li .btn-area i + i {margin-left: 1px;}
.content-box dl.slt-user ul li .btn-area i.ico-uni-pen {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1px;
  font-size: 33px;
}
.content-box dl.slt-user ul li .btn-area i:hover {color: #ff4c5d;}

/* 부서 선택 추가 */
.content-box .slt-user.op-team dd ul li span:first-child {
  overflow: hidden;
  width: inherit;
  max-width: 72%;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}
.content-box .slt-user.op-team dd ul li .checkbox-area {
  position: absolute;
  top: 8px;
  right: 30px;
}

/* 양식 설명 추가 */
.content-box .template-explain {
  padding: 20px;
  line-height: 19px;
  border-radius: 15px;
  background-color: #f9f9fa;
}
.content-box .template-explain dl {margin-top: 15px;}
.content-box .template-explain dt {
  margin-bottom: 5px;
  padding: 0;
  font-size: 14px;
  color: #222;
  border: 0;
}
.content-box .template-explain dt i {display: none;}
.content-box .template-explain dd {font-size: 13px;}

/* 규정 파일 다운로드 추가 */
.content-box .comp-file-down {
  margin-bottom: 10px;
  padding: 12px 20px;
  line-height: 19px;
  border-radius: 15px;
  /* background-color: rgba(255,240,0,.05); */
  background-color: #f9f9fa;
}
.content-box .comp-file-down dl {display: flex;}
.content-box .comp-file-down dt {
  margin-bottom: 0;
  padding: 0;
  font-size: 14px;
  color: #222;
}
.content-box .comp-file-down dt i {display: none;}
.content-box .comp-file-down dd {
  position: relative;
  margin-top: -2px;
  margin-left: auto;
  white-space: nowrap;
}
.content-box .comp-file-down dd .btn-area button.ico-only {
  width: 10px;
  height: 16px;
  padding: 2px 6px;
}
.content-box .comp-file-down dd .btn-area button.ico-only i {font-size: 16px;}

.content-box .title-box {
  overflow: hidden;
  margin: 0 -20px 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.content-box .title-box dt {
  width: 10%;
  padding: 0;
  line-height: 29px;
}
.content-box .title-box dd {width: 90%;}
.content-box .title-box .inp.wid-100 {
  width: calc(100% - 20px);
  padding: 1px 8px;
}
.content-box .title-box dt,
.content-box .title-box dd {
  float: left;
}
.content-box .add-ref p {
  position: relative;
  text-align: right;
  font-size: 13px;
}
.content-box .add-ref p a:first-child {
  position: absolute;
  top: 0;
  left: 0;
  color: #2F79A6;
}
.content-box .add-ref p a:first-child + span {color: #999;}
.content-box .add-ref span + i {margin: -2px 3px 0 5px;}
.content-box .add-file p {
  position: relative;
  font-size: 13px;
}
.content-box .add-file p > i:first-child {cursor: default;}
.content-box .add-file p > i:first-child::before {font-weight: normal;}
.content-box .add-ref p a {
  overflow: hidden;
  display: inline-block;
  max-width: 90%;
  vertical-align: top;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content-box .add-ref p a:hover,
.content-box .add-file p a:hover {
  text-decoration: underline;
}
.content-box .add-file p span {
  padding-left: 3px;
  font-size: 12px;
  color: #999;
}
.content-box .add-file p span + i {
  position: absolute;
  top: 2px;
  right: 0;
}
.content-box .add-file p .btn-area {
  position: absolute;
  top: 2px;
  right: 0;
  color: inherit;
}
.content-box .add-file p span + i:hover,
.content-box .add-file p .btn-area i:hover,
.content-box .add-comment .btn-area i:hover {
  color: #0e5ce9;
}
.content-box .add-comment dt{margin-bottom: 0;}
.content-box .add-comment .comment-list {
  position: relative;
  padding-top: 10px;
}
.content-box .add-comment .comment-list + .comment-list {
  margin-top: 10px;
  border-top: 1px dashed #ddd;
}
.content-box .add-comment .comment-list span {
  font-size: 12px;
  color: #999;
}
.content-box .add-comment .comment-list span + span {
  padding-left: 8px;
  color: #999;
}
.content-box .add-comment .comment-list p {
  position: relative;
  margin: 4px 0;
}
.content-box .add-comment .comment-list .file-list {
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #f5f5f5;
}
.content-box .add-comment .comment-list .file-list i {color: inherit;}
.content-box .add-comment .comment-list .file-list i:first-child::before {font-weight: normal;}
.content-box .add-comment .comment-list .file-list a {font-size: 12px;}
.content-box .add-comment .comment-list .file-list a:hover {text-decoration: underline;}
.content-box .add-comment .comment-list .file-list .btn-area {top: 0;}
.content-box .add-comment .comment-list .file-list .btn-area i::before {
  font-weight: 600;
  font-size: 17px;
  color: #555;
}
.content-box .add-comment .comment-list .file-list .btn-area i:hover::before {color: #0e5ce9;}
.content-box .add-comment .comment-list .btn-area {
  position: absolute;
  top: 10px;
  right: 0;
}
.content-box .add-comment .comment-write {
  margin-top: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.modal .content-box .add-comment .comment-write {margin-top: 0;}
.content-box .add-comment .comment-write textarea {
  width: calc(100% - 16px);
  margin: 0;
  border: 0;
}
.content-box .add-comment .comment-write textarea:focus {border: 0;}
.content-box .add-comment.process .comment-list-in {
  margin-top: 3px;
  line-height: 22px;
}
.content-box .add-comment.process .comment-list-in p {
  display: inline;
  margin-right: 20px;
}
.content-box .add-comment.process .comment-list-in p:last-child {margin-right: 0;}
.content-box .add-comment.process .comment-list-in p .op-tt {
  margin-right: 8px;
  font-size: 14px;
  color: rgba(14,92,233,.8);
}
.comment-write .comment-upload {
  position: relative;
  height: 40px;
  border-top: 1px solid #f5f5f5;
}
.comment-write .comment-upload p {
  margin-left: 20px;
  font-size: 12px;
  line-height: 40px;
  color: #999;
}
.comment-write .comment-upload p span {color: #222;}
.comment-write .comment-upload button {
  position: absolute;
  top: -1px;
  right: 0;
  height: 40px;
  line-height: 40px;
  border-radius: 0;
}
.content-box .row-box {
  /* overflow: hidden; */
  display: inline-block;
  width: 100%;
}
.content-box .row-box .col-1st {
  width: calc(32% - 40px);
  float: left;
  margin-right: 40px;
}
.content-box .row-box .col-1st dl:first-child {margin-top: 0;}
.content-box .row-box .col-1st .radio-area .radio-label {margin: 3px 10px 3px 0;}
.content-box .row-box .col-2nd {
  width: calc(68% - 50px);
  float: right;
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 15px;
  -webkit-transition: width 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s, transform 0.3s;  
}
.content-box .row-box.up-size .col-1st {display: none;}
.content-box .row-box.up-size .col-2nd {
  width: calc(100% - 50px);
  -webkit-transition: width 0.3s, -webkit-transform 0.3s;
  transition: width 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s, transform 0.3s;
}
.content-box .row-box .col-2nd-top {
  position: relative;
  height: 40px;
  margin: -20px -20px 0;
  padding: 0 20px;
  line-height: 35px;
  background-color: #ddd;  
}
.content-box .row-box .col-2nd-top p {
  text-align: center;
  font-size: 16px;
}
.content-box .row-box .col-2nd-top .btn-area {
  top: 0px;
  border-radius: 12px 12px 0 0;
  background: #fff;
}
.content-box .row-box .upload-file dt {
  margin: 0;
  border: 0;
}
.content-box.user-set .row-box .slt-user {
  display: inline-block;
  width: calc(50% - 22px);
  margin-top: 0;
  vertical-align: top;
}
.content-box.user-set .row-box .slt-user + .slt-user {margin-left: 40px;}
.content-box.user-set .row-box .slt-user:first-child ul {height: 179px;}
.content-box.user-set .row-box .slt-user:first-child dd + dd {
  margin: 15px -8px 0 0;
  text-align: right;
}

/* 양식 설정 추가 */
.set-form {padding: 20px;}
.set-form .panel-group {margin: 0;}
.set-form .btn-help {
  padding: 2px 6px;
  vertical-align: inherit;
  color: #fff;
}
.set-form dl:first-child {margin-top: 0;}
.set-form .accordion .panel {box-shadow: none;}
.set-form .accordion .panel > dt {
  position: relative;
  height: 40px;
  margin: 0 0 -1px 0;
  padding: 0 15px;
  line-height: 40px;
  font-family: 'SCD-5';
  font-size: 15px;
  color: rgba(14,92,233,.8);
  border: 1px solid rgba(14,92,233,.4);
  border-radius: 8px 8px 0 0;
  background-color: rgba(14,92,233,.08);
  cursor: pointer;
}
.set-form .accordion .panel > dt.collapsed {
  font-family: 'SCD-4';
  color: #999;
  border-color: #ccc;
  border-radius: 8px;
  background-color: #eee;
}
.set-form .accordion .panel > dt::after {
  position: absolute;
  top: 0;
  right: 15px;
  font-family: 'unifont';
  content: '\e804';
  font-weight: bold;
  font-size: 20px;
  color: #0e5ce9;
}
.set-form .accordion .panel > dt.collapsed::after {
  content: '\e801';
  color: #999;
}
.set-form .accordion .panel > dd {
  border: 1px solid rgba(14,92,233,.4);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.set-form .accordion .panel > dd .action-area {
  margin: inherit;
  padding: 5px;
  text-align: right;
  background-color: #f9f9fa;
}
.set-form .accordion .panel > dd .action-area button {background-color: #fff;}
.set-form .accordion .panel > dd .bg-line {
  overflow: hidden;
  position: relative;
}
.set-form .accordion .panel > dd .bg-line.wid-100 {width: 100%;}
.set-form .accordion .panel > dd .bg-line::before {
  position: absolute;
  top: 0;
  left: 50%;
  content: '';
  height: 100%;
  border-right: 1px solid rgba(14,92,233,.2);
}
.set-form .accordion .panel > dd .bg-line.wid-100::before {display: none;}
.set-form .accordion .panel > dd .bg-line.line-none::before {display: none;}
.set-form .accordion .panel > dd .no-cont {
  padding: 30px 0;
  text-align: center;
  font-size: 15px;
}
.set-form .bg-line .form-box {
  float: left;
  width: 50%;
  margin-top: 0;
  padding: 20px;
  box-sizing: border-box;
  border-top: 1px solid rgba(14,92,233,.2);
}
.set-form .bg-line.wid-100 .form-box,
.set-form .bg-line .form-box.wid-100 {
  width: 100%;
}
.set-form .bg-line:first-child .form-box:nth-child(1),
.set-form .bg-line:first-child .form-box:nth-child(2),
.set-form .bg-line .form-box .add-user-op {
  border-top: 0;
}
.set-form .bg-line .form-box dt {
  position: relative;
  font-family: 'SCD-5';
  font-size: 15px;
}
.set-form .bg-line .form-box dd {
  /* overflow: hidden; */
  position: relative;
  display: inline-block;
  width: 100%;
}
.set-form .bg-line .form-box dd.add-op {
  margin-top: 20px;
  border-radius: 0 0 8px 8px;
  background-color: rgba(14,92,233,.05);
}
.set-form .bg-line .form-box.add-user {
  width: calc(100% - 60px);
  min-height: 29px;
  padding: 0;
  margin-right: 6px;
  border-radius: 4px;
  background-color: rgba(14,92,233,.05);
}
.set-form .bg-line .form-box.add-user .add-explain {
  margin-left: 15px;
  line-height: 29px;
  font-size: inherit;
  color: #777;
}
.set-form .bg-line .form-box.add-user .op-user {padding: 15px;}
.set-form .bg-line .form-box.add-user-op {
  width: calc(100% - 55px);
  min-height: 29px;
  padding: 0;
  border-radius: 4px;
  background-color: rgba(14,92,233,.05);
}
.set-form .bg-line .form-box.add-user-op .add-explain {
  margin-left: 15px;
  line-height: 29px;
  font-size: inherit;
  color: #777;
}
.set-form .bg-line .form-box.add-form-op {
  position: relative;
  margin-top: 8px;
  padding: 5px 15px;
  border: 1px solid rgba(14,92,233,.25);
  border-radius: 4px;
}
.set-form .bg-line .form-box.add-form-op ul::after {
  display: block;
  content: '';
  clear: both;
}
.set-form .bg-line .form-box.add-form-op ul li,
.set-form .bg-line .form-box.add-form-op ul li > * {
  float: left;
}
.set-form .bg-line .form-box.add-form-op ul li + li {margin-left: 25px;}
.set-form .bg-line .form-box.add-form-op ul li .cont-tt {
  display: inline-block;
  margin-right: 10px;
  line-height: 28px;
  font-size: 13px;
}
.set-form .bg-line .form-box.add-form-op ul li .inp {
  width: 80px;
  height: 24px;
  line-height: 24px;
  font-family: "SCD-4", Sans-serif !important;
  font-size: 13px;
  color: #0e5ce9;
}
.set-form .bg-line .form-box.add-form-op ul li .after-text {
  margin-left: 8px;
  line-height: 28px;
  font-size: 13px;
  color: #0e5ce9;
}
.set-form .bg-line .form-box.add-form-op ul li .slt-area {margin-left: -1px;}
.set-form .bg-line .form-box.add-form-op ul li .slt {
  height: 26px;
  padding: 0 30px 0 8px;
  line-height: 26px;
  font-size: 13px;
  color: #0e5ce9;
}
.set-form .bg-line .form-box.add-form-op ul li .slt + i {margin: 0;}
.set-form .bg-line .form-box.add-form-op .btn-area.right {
  top: calc(50% - 10px);
  right: 9px;
}
.set-form .bg-line .form-box .inp {width: calc(100% - 12px);}
.set-form .bg-line .form-box .inp.next-btn {width: calc(100% - 70px);}
.set-form .bg-line .form-box .inp.top-right-num {
  position: absolute;
  top: -37px;
  right: 0;
  width: 70px;
  padding-right: 8px;
  text-align: center;
}
.set-form .bg-line .form-box .inp-area.next-btn,
.set-form .bg-line .form-box .slt-area.next-btn {
  width: calc(100% - 58px);
  vertical-align: top;
}
.set-form .bg-line .form-box .slt-area.next-btn-editor {width: calc(100% - 85px);}
.set-form .preview-box {
  margin-top: 10px;
  padding: 8px;
  font-size: 12px;
  /* color: #2ecc71; */
  color: #555;
  background-color: rgba(46,204,113,.06);
  /* color: #ff8b00;
  background-color: rgba(255,139,0,.05); */
}
.set-form .preview-box .box-tt {font-weight: bold;}
.set-form .preview-box .preview {margin: 5px 0 0 10px;}
.set-form .bg-line .form-box .add-explain {
  display: inherit;
  width: 100%;
  margin-top: 8px;
  line-height: 20px;
  font-size: 12px;
  color: #777;
}
.set-form .bg-line .form-box .add-explain:first-child {margin-top: 0;}
.set-form .bg-line .form-box .add-explain .add {color: #0e5ce9;}
.set-form .bg-line .form-box .add-explain .add-box {
  display: inline-block;
  width: 100%;
  margin-top: 5px;
  padding: 5px 12px;
  color: #0e5ce9;
  background-color: rgba(255,139,0,.05);
  box-sizing: border-box;
}
.set-form .bg-line .form-box .add-explain p::before {
  display: inline-block;
  margin-right: 5px;
  content: '-';
}
.set-form .bg-line .form-box .add-explain p.add::before {content: '*';}
.set-form .bg-line .form-box .add-explain p.add-box::before {display: none;}
.set-form .bg-line .form-box .add-explain .add-box dt,
.set-form .bg-line .form-box .add-explain .add-box dd {
  float: left;
}
.set-form .bg-line .form-box .add-explain .add-box dt {
  width: 40px;
  padding: 0;
  font-size: 12px;
}
.set-form .bg-line .form-box .add-explain .add-box dd {width: calc(100% - 40px);}
.set-form .bg-line dd.add-op .form-box {padding: 15px;}
.set-form .bg-line .form-box .add-op .form-box + .form-box {border-top: 1px solid rgba(255,139,0,.1);}
.set-form .bg-line .form-box.slt-user ul {
  height: 107px;
  margin-top: inherit;
  background-color: #fff;
}
.set-form .op-user {overflow: hidden;}
.set-form .op-user .user-type {
  float: left;
  margin: 0 5px 5px 0;
  padding: 0 28px 0 8px;
  line-height: 30px;
  color: #555;
  border: 1px solid #aaa;
  border-radius: 8px;
  background-color: #fff;
}
.set-form .op-user .user-type.type-user {border-color: #ff8b00;}
.set-form .op-user .user-type.type-dept {border-color: #25b753;}
.set-form .op-user .user-type.type-pos {border-color: #1b97d4;}
.set-form .op-user .user-type.type-roll {border-color: #c369ff;}
.set-form .op-user .user-type .delete {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}
.set-form .op-user .user-type .delete::before {
  position: absolute;
  top: 0;
  right: -22px;
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(85,85,85,.5);
}
.set-form .op-user .user-type .delete:hover::before {color: rgba(85,85,85,1);}
.set-form .file-box {
  display: flex;
  gap: 10px;
}
.set-form .file-box .file-area {
  display: flex;
  gap: 5px;
}
.set-form .file-box .file-set {
  display: flex;
  align-items: center;
  position: relative;
  width: auto;
  padding: 0 30px 0 10px;
  line-height: 31px;
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(14,92,233,.1);
}
.set-form .file-box .file-set .file-name:hover {cursor: pointer;}
.set-form .file-box .file-set .delete {
  position: absolute;
  top: 0;
  right: 7px;
  cursor: pointer;
}
.set-form .file-box .file-set .delete::before {
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(85,85,85,.5);
}
.set-form .file-box .file-set .delete:hover::before {color: rgba(85,85,85,1);}

/* 추가 입력 항목 이전 - 삭제 예정 */
.set-form .add-write-op {margin-top: 20px;}
.set-form .add-write-op ul li {
  overflow: hidden;
  position: relative;
  float: left;
  width: 50%;
  min-height: 46px;
  margin-top: 6px;
  padding: 4px 10px;
  border: 2px solid #eee;
  box-sizing: border-box;
  cursor: move;
}
.set-form .add-write-op ul li.col-50 {width: 50%;}
.set-form .add-write-op ul li.col-100 {width: 100%;}
.set-form .add-write-op ul li::before {
  position: absolute;
  top: 18px;
  left: 12px;
  width: 10px;
  height: 2px;
  content: '';
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
/* .set-form .add-write-op ul.col-5 li {
  float: left;
  width: calc(50% - 3px);
}
.set-form .add-write-op ul.col-5 li:nth-child(2n+1) {margin-right: 6px;} */
.set-form .add-write-op ul li:hover {
  border: 2px solid rgba(255,139,0,.25);
  background-color: rgba(255,139,0,.025);
}
.set-form .add-write-op ul li > * {float: left;}
.set-form .add-write-op .op-tt {
  display: inline-block;
  width: 170px;
  padding-left: 30px;
  line-height: 34px;
  box-sizing: border-box;
}
.set-form .add-write-op .preview {
  display: inline-block;
  width: calc(100% - 280px);
}
.set-form .add-write-op .preview > * {float: left;}
.set-form .add-write-op .preview *,
.set-form .add-write-op .preview *::placeholder {
  color: #2ecc71;
}
.set-form .add-write-op .preview input,
.set-form .add-write-op .preview select,
.set-form .add-write-op .preview textarea {
  border: 1px solid rgba(46,204,113,.5);
  background-color: #fff !important;
  pointer-events: none;
}
.set-form .add-write-op .preview .cal_area input {width: 82px;}
.set-form .add-write-op .preview .slt-area {width: 100%;}
.set-form .add-write-op .preview .slt-area select {width: calc(100% - 40px);}
.set-form .add-write-op .preview .slt-area .btn-slt {z-index: 30;}
.set-form .add-write-op .preview textarea {
  width: 100%;
  box-sizing: border-box;
}
.set-form .add-write-op .btn-area {
  position: absolute;
  top: 9px;
  right: 12px;
}
/* /추가 입력 항목 이전 - 삭제 예정 */

.set-form .toggle-area {
  position: absolute;
  top: -2px;
  right: 0;
}
.set-form .btn-toggle {
  overflow: hidden;
  width: 36px;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
}
.set-form .btn-toggle input {
  position: absolute;
  visibility: hidden;
}
.set-form .btn-toggle span {
  position: relative;
  left: 0%;
  display: block;
  width: 18px;
  height: 18px;
  padding: 0;
  text-align: center;
  color: #fff;
  -webkit-transition: left 200ms ease-out;
  -moz-transition: left 200ms ease-out;
  -o-transition: left 200ms ease-out;
  transition: left 200ms ease-out;
}
.set-form .btn-toggle :checked + span {left: 50%;}
.set-form .btn-toggle span:before {
  display: inline-block;
  width: 18px;
  height: 18px;
  content: '';
  background-color: #777;
  border-radius: 20px;
}
.set-form .btn-toggle :checked + span:before {background-color: #2ecc71;}
.set-form.content-box dl.slt-user dt .btn-area {top: -1px;}
.set-form.content-box dl.slt-user dt .btn-area.next-toggle {right: 48px;}
.set-form.content-box dl.slt-user dt .btn-area button {
  height: 18px;
  line-height: 18px;
  border-radius: 8px;
}
.set-form .bg-line .form-box .checkbox-area,
.set-form .bg-line .form-box .radio-area {
  position: relative;
}
.set-form .bg-line .form-box .checkbox-area + .checkbox-area,
.set-form .bg-line .form-box .radio-area + .radio-area {
  display: block;
  margin-top: 10px;
}
.set-form .bg-line .form-box .checkbox-area.right {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.set-form .bg-line .form-box .checkbox-area.right .check-label {font-size: 14px;}
.set-form .bg-line .form-box .checkbox-area + .checkbox-area .check-label {margin-left: 0;}
.set-form .form-box .speech-bubble-box::before {font-size: 12pt;}

/* 토글 버튼 추가 */
.set-form .bg-line .form-box.in-toggle-btn {
  padding: 10px 8px;
  background-color: rgba(46,204,113,.08);
}
.set-form .bg-line .form-box .toggle-btn-area {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
}
.set-form .bg-line .form-box .toggle-btn-area .toggle-btn {
  display: flex;
  margin-right: 10px;
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: #fff;
}
.set-form .bg-line .form-box .toggle-btn-area .toggle-btn.on {border-color: rgba(46,204,113,.6);}
.set-form .bg-line .form-box .toggle-btn-area .toggle-btn:last-child {margin-right: 0;}
.set-form .bg-line .form-box .toggle-btn-area .toggle-btn .btn-tt {margin-right: 10px;}

/* 조건별 결재선 추가 */
.set-form .form-box .apvln-by-cond .op-area ul {
  padding: 8px 15px;
  border: 1px solid rgba(14,92,233,.25);
  border-radius: 4px;
  background-color: rgba(14,92,233,.05);
}
.set-form .form-box .apvln-by-cond .op-area ul li {
  display: flex;
  align-items: center;
}
.set-form .form-box .apvln-by-cond .op-area ul .cont-tt {
  min-width: 180px;
  font-family: 'SCD-5';
}
.set-form .form-box .apvln-by-cond .tbl-basic .tbl-tt-area {
  position: absolute;
  top: 6px;
  left: 0;
}
.set-form .form-box .apvln-by-cond .tbl-basic .tbl-tt-area .cont-tt {
  position: relative;
  font-family: 'SCD-5';
  font-size: 15px;
}
/* .set-form .form-box .apvln-by-cond .tbl-basic .tbl-tt-area .add-explain {
  margin-top: 5px;
  line-height: 31px;
  font-size: 14px;
} */
.set-form .form-box .apvln-by-cond .tbl-area table tbody {position: relative;}
.set-form .form-box .apvln-by-cond .tbl-area table tbody::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  content: '';
  border-top: 1px solid #ccc;
}
.set-form .form-box .apvln-by-cond .tbl-area table th,
.set-form .form-box .apvln-by-cond .tbl-area table td {
  height: 32px;
  border-left: 1px solid #eee;
  border-right: inherit;
}
.set-form .form-box .apvln-by-cond .tbl-area table th:last-child,
.set-form .form-box .apvln-by-cond .tbl-area table td:last-child {
  border-right: 1px solid #eee;
}
.set-form .form-box .apvln-by-cond table td .li {
  display: flex;
  width: 100%;
  line-height: 20px;
}
.set-form .form-box .apvln-by-cond table td .li + .li {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #f5f5f5;
}
.set-form .form-box .apvln-by-cond table td .li .li-badge {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  top: 0;
  /* width: 32px; */
  min-width: 45px;
  height: 20px;
  margin-right: 10px;
  padding: 0 6px;
  text-align: center;
  line-height: 20px;
  font-size: 11px;
  /* border: 1px solid #ddd; */
  border-radius: 4px;
  background-color: rgba(34,34,34,.06);
  box-sizing: border-box;
}
.set-form .form-box .apvln-by-cond table td .li.approval .li-badge {
  color: #ff8b00;
  background-color: rgba(255,139,0,.1);
}
.set-form .form-box .apvln-by-cond table td .li.receive .li-badge {
  color: #4cba71;
  background-color: rgba(76,186,113,.1);
}
.set-form .form-box .apvln-by-cond table td .li.check-op .li-badge {
  color: #222;
  background-color: rgba(34,34,34,.06);
  box-sizing: border-box;
}
.apvln-by-cond table .li p > span {position: relative;}
.apvln-by-cond table .li p > span::after {
  display: inline-block;
  margin: 0 1px 0 4px;
  font-family: "unifont";
  font-weight: bold;
  color: #999;
  content: '\e803';
}
.apvln-by-cond table .li p > span.agree::after {
  display: inline-block;
  margin: -2px 4px 0 8px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  content: '|';
}
.apvln-by-cond table .li.check-op p > span::after,
.apvln-by-cond table .li.ref-view p > span::after {
  display: inline-block;
  margin: 0 2px;
  font-weight: bold;
  color: #999;
  content: ',';
}
.apvln-by-cond table .li p > span:last-child::after {display: none;}
.apvln-by-cond .tbl-basic table td .btn-area.func {
  display: flex;
  justify-content: center;
}
.apvln-by-cond table td .btn-area.func span {
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  line-height: 18px;
  font-size: 14px;
  color: #555;
  border: 1px solid #555;
  border-radius: 50%;
  cursor: pointer;
}
.apvln-by-cond table td .btn-area.func span.btn-del {
  color: #ff4c5d;
  border-color: #ff4c5d;
}
.apvln-by-cond table td .btn-area.func span.disabled {
  color: #ddd;
  border-color: #ddd;
  cursor: no-drop;
  /* color: #fff;
  border-color: #ddd;
  cursor: no-drop;
  background-color: #ddd; */
}
.apvln-by-cond table td .btn-area.func span.btn-modify {
  display: flex;
  align-items: center;
  justify-content: center;
}
.apvln-by-cond table td .btn-area.func span:last-child {margin-right: 0;}
.apvln-by-cond table td .btn-area.func span::before {
  font-family: "unifont";
  font-weight: bold;
}
.apvln-by-cond table td .btn-area.func span.btn-up::before {content: '\e804';}
.apvln-by-cond table td .btn-area.func span.btn-down::before {content: '\e801';}
.apvln-by-cond table td .btn-area.func span.btn-del::before {content: '\e80b';}
.apvln-by-cond table td .btn-area.func span.btn-modify::before {
  font-weight: normal;
  font-size: 35px;
  content: '\e884';
}
.apvln-by-cond table td .btn-area.func span.btn-select::before {
  font-size: 13px;
  content: '\e829';
}
.apvln-by-cond table td .btn-area.func.inline {
  display: inline;
  position: relative;
  right: 0;
  top: calc(50% - 12px);
}

/* modal 조건별 결재선 추가 */
.modal-body .apvln-by-cond .tbl-basic table td .op-slt-area {display: flex;}  /* 우선 순위 적용 */
.modal-body .apvln-by-cond .op-slt-area > button {min-width: 25px;}
.modal-body .apvln-by-cond .op-slt-area .op-area {
  width: inherit;
  margin: 0 0 -5px 0;
}
.modal-body .apvln-by-cond .op-slt-area .op-area .op-name {
  min-height: 22px;
  margin: 0 0 5px 5px;
  padding: 0 25px 0 8px;
  font-size: 12px;
}
.modal-body .apvln-by-cond .op-slt-area .op-area.view .op-name {padding-right: 8px;}
.modal-body .apvln-by-cond .op-slt-area .op-area .op-name .delete {
  top: calc(50% - 10px);
  right: 5px;
  line-height: inherit;
}
.modal-body .apvln-by-cond .op-slt-area .op-area .op-name .delete::before {font-size: 14px;}
.modal-body .apvln-by-cond .tbl-result {
  position: relative;
  margin-top: 30px;
  padding: 25px;
  border: 3px solid #eee;
  border-radius: 10px;
}
/* .modal-body .apvln-by-cond .tbl-result::before {
  position: absolute;
  top: -32px;
  left: 0;
  width: 100%;
  content: '';
  border-top: 1px dashed #999;
}
.modal-body .apvln-by-cond .tbl-result::after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -44px;
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  content: '\e801';
  font-family: "unifont";
  font-weight: bold;
  font-size: 15px;
  color: #222;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
} */
.modal-body .apvln-by-cond .tbl-result .approval .tbl-tt {color: #ff8b00;}
.modal-body .apvln-by-cond .tbl-result .receive .tbl-tt {color: #4cba71;}
.modal-body .apvln-by-cond .tbl-result .tbl-tt i {display: none;}

/* 토글 버튼 추가 - 모달 내부 */
.modal-body .content-box.apvln-by-cond .set-form {
  margin: -30px -30px 30px;
  padding: 0;
  /* border-bottom: 1px solid rgba(255,139,0,.2); */
}
.modal-body .apvln-by-cond .set-form .bg-line .form-box {
  float: inherit;
  width: 100%;
}

/* 프린트 사이즈 추가 - 이전 */
/* .doc-view.print-area .doc-top h3 {font-size: 22px;}
.doc-view.print-area .tbl-basic .tbl-area table tr {height: 30px;}
.doc-view.print-area .tbl-basic .tbl-area table tr.add-empty {display: none;}
.doc-view.print-area .tbl-basic .tbl-area table th, 
.doc-view.print-area .tbl-basic .tbl-area table td {
  height: 30px;
  font-size: 12px;
}
.doc-view.print-area table td .progress-draft, 
.doc-view.print-area table td .progress-retr, 
.doc-view.print-area table td .progress-rej, 
.doc-view.print-area table td .progress-agree, 
.doc-view.print-area table td .progress-fin, 
.doc-view.print-area table td .progress-arbitrary {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
}
.doc-view.print-area table td .progress-draft + span, 
.doc-view.print-area table td .progress-retr + span, 
.doc-view.print-area table td .progress-rej + span, 
.doc-view.print-area table td .progress-agree + span, 
.doc-view.print-area table td .progress-fin + span, 
.doc-view.print-area table td .progress-arbitrary + span {
  margin-top: 3px;
}
.doc-view.print-area table td .progress-draft.in-img img, 
.doc-view.print-area table td .progress-retr.in-img img, 
.doc-view.print-area table td .progress-rej.in-img img, 
.doc-view.print-area table td .progress-agree.in-img img, 
.doc-view.print-area table td .progress-fin.in-img img, 
.doc-view.print-area table td .progress-arbitrary.in-img img {
  max-height: 30px;
} */

/* 프린트 옵션 추가 */
.doc-view.print-area .tbl-basic .tbl-area > table {table-layout: fixed;}
.doc-view.print-area .tbl-basic .tbl-area table tr.add-empty {display: none;}
/* 글자 크기 - 작게 */
.doc-view.op-font-s .doc-top h3 {font-size: 20px;}
.doc-view.op-font-s .tbl-basic .tbl-area table th, 
.doc-view.op-font-s .tbl-basic .tbl-area table td {
  font-size: 12px;
}
.doc-view.op-font-s table td .progress-draft, 
.doc-view.op-font-s table td .progress-retr, 
.doc-view.op-font-s table td .progress-rej, 
.doc-view.op-font-s table td .progress-agree, 
.doc-view.op-font-s table td .progress-fin, 
.doc-view.op-font-s table td .progress-arbitrary {
  font-size: 12px;
}
/* 글자 크기 - 크게 */
.doc-view.op-font-l .doc-top h3 {font-size: 24px;}
.doc-view.op-font-l .tbl-basic .tbl-area table th, 
.doc-view.op-font-l .tbl-basic .tbl-area table td {
  font-size: 14px;
}
.doc-view.op-font-l table td .progress-draft, 
.doc-view.op-font-l table td .progress-retr, 
.doc-view.op-font-l table td .progress-rej, 
.doc-view.op-font-l table td .progress-agree, 
.doc-view.op-font-l table td .progress-fin, 
.doc-view.op-font-l table td .progress-arbitrary {
  font-size: 14px;
}
/* 여백 - 작게 */
.doc-view.op-margin-s .tbl-basic .tbl-area table tr {height: 31px;}
.doc-view.op-margin-s .tbl-basic .tbl-area table th, 
.doc-view.op-margin-s .tbl-basic .tbl-area table td {
  height: 31px;
}
.doc-view.op-margin-s table td .progress-draft, 
.doc-view.op-margin-s table td .progress-retr, 
.doc-view.op-margin-s table td .progress-rej, 
.doc-view.op-margin-s table td .progress-agree, 
.doc-view.op-margin-s table td .progress-fin, 
.doc-view.op-margin-s table td .progress-arbitrary {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
}
.doc-view.op-margin-s table td .progress-draft + span, 
.doc-view.op-margin-s table td .progress-retr + span, 
.doc-view.op-margin-s table td .progress-rej + span, 
.doc-view.op-margin-s table td .progress-agree + span, 
.doc-view.op-margin-s table td .progress-fin + span, 
.doc-view.op-margin-s table td .progress-arbitrary + span {
  margin-top: 3px;
}
.doc-view.op-margin-s table td .progress-draft.in-img img, 
.doc-view.op-margin-s table td .progress-retr.in-img img, 
.doc-view.op-margin-s table td .progress-rej.in-img img, 
.doc-view.op-margin-s table td .progress-agree.in-img img, 
.doc-view.op-margin-s table td .progress-fin.in-img img, 
.doc-view.op-margin-s table td .progress-arbitrary.in-img img {
  max-height: 30px;
}
/* 외곽선 - 없음 */
.doc-view.op-border-n {
  padding: 0 !important;
  border: none;
}

/* 프린트 상단 옵션 영역 추가 */
.print-op-area {
  margin-bottom: 20px;
  font-size: 13px;
  border: 1px solid rgba(14,92,233,.4);
  border-radius: 8px;
}
.print-op-area ul {
  overflow: hidden;
  margin: 0 0 -1px -1px;
}
.print-op-area ul li {
  overflow: hidden;
  float: left;
  width: 50%;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(14,92,233,.12);
  box-sizing: border-box;
}
.print-op-area ul li.wid-100 {width: 100%;}
.print-op-area ul li + li {
  border-left: 1px solid rgba(14,92,233,.12);
}
.print-op-area ul li > * {float: left;}
.print-op-area ul li .list-tt {
  width: 100px;
  font-family: 'SCD-5';
}
.print-op-area ul li.op-scale {
  height: 39px;
  padding: 0 20px;
  line-height: 39px;
}
.print-op-area ul li.op-scale .slt {
  height: 26px;
  line-height: 26px;
  font-size: 13px;
}
.print-op-area ul li.op-scale .slt + i {margin: 6px 2px 0 0;}

/* .row-box.v2 - 부서 관리 */
.content-box .row-box.v2 .col-1st {
  position: relative;
  width: calc(35% - 50px);
  float: left;
  margin-top: 45px;
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 15px;
}
.content-box .row-box.v2 .col-1st .btn-area {
  position: absolute;
  top: -50px;
  left: -5px;
  width: calc(100% + 10px);
}
.content-box .row-box.v2 .col-1st .btn-area .ico-only {width: 22px;}
.content-box .row-box.v2 .col-1st .btn-area .ico-only i {font-size: 18px;}
.content-box .row-box.v2 .col-1st .btn-area .ico-only i.ico-uni-arrow-line-up,
.content-box .row-box.v2 .col-1st .btn-area .ico-only i.ico-uni-arrow-line-down {font-size: 22px;}
.content-box .row-box.v2 .col-2nd {
  width: calc(65% - 40px);
  float: right;
  padding: 0;
  border: 0;
}
.content-box .row-box.v2 .org-chart {margin-top: 20px;}
.content-box .row-box.v2 .org-chart dt {display: none;}
.content-box .row-box.v2 .btn-area + dl {margin-top: 20px;}
.content-box .row-box.v2 .inp-box .inp.wid-100 {width: calc(100% - 10px);}
.content-box .row-box.v2 .inp-box textarea {
  width: calc(100% - 20px);
  margin: 0;
}
.content-box .row-box.v2 .tbl-grid {
  margin-top: 0;
  padding-top: 0;
  /* border-top: 1px solid #ddd; */
}
.content-box .row-box.v2 .tbl-grid .btn-area {min-height: 31px;}

/* 타이틀 내 토글 스위치 버튼 추가 */
.content-tt.in-toggle-switch {
  display: flex;
  align-items: center;
}
.content-tt.in-toggle-switch i {margin: 0 8px 0 0;}
.content-tt.in-toggle-switch .toggle-switch {
  display: inline-flex;
  margin-left: 20px;
}
.content-tt.in-toggle-switch .toggle-switch button {
  height: 32px;
  padding: 0 10px;
  font-family: "SCD-4";
  line-height: 32px;
  font-size: 13px;
  color: #999;
  border: 1px solid #ddd;
  background-color: transparent;
}
.content-tt.in-toggle-switch .toggle-switch button.on {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
  background-color: rgba(14,92,233,.06);
}
.content-tt.in-toggle-switch .toggle-switch button:first-child {border-radius: 12px 0 0 12px;}
.content-tt.in-toggle-switch .toggle-switch button:last-child {border-radius: 0 12px 12px 0;}
.content-tt.in-toggle-switch .toggle-switch button:only-child {border-radius: 12px;}


/* v2 */
.content-tt.in-toggle-switch.v2 .toggle-switch {
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  background-color: #f3f3f4;
}
.content-tt.in-toggle-switch.v2 .toggle-switch button,
.content-tt.in-toggle-switch.v2 .toggle-switch button.on {
  border: 0;
}
.content-tt.in-toggle-switch.v2 .toggle-switch button {
  height: 29px;
  line-height: 29px;
  border-radius: 4px;
  background-color: #f3f3f4;
}
.content-tt.in-toggle-switch.v2 .toggle-switch button.on {
  padding-left: 25px;
  font-family: 'SCD-5';
  border: 1px solid rgba(14,92,233,.5);
  background-color: #fff;
}
.content-tt.in-toggle-switch.v2 .toggle-switch button.on::before {
  position: absolute;
  top: 0;
  left: 5px;
  font-family: 'unifont';
  font-size: 18px;
  content: '\e8b7';
}

/* v2 이름 추가 */
.toggle-switch-tab.v2 {
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  background-color: #f3f3f4;
}
.toggle-switch-tab.v2 button,
.toggle-switch-tab.v2 button.on {
  border: 0;
}
.toggle-switch-tab.v2 button {
  height: 29px;
  padding: 0 10px;
  line-height: 29px;
  font-size: 13px;
  border-radius: 4px;
  background-color: #f3f3f4;
}
.toggle-switch-tab.v2 button.on {
  padding-left: 25px;
  font-family: 'SCD-5';
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
  background-color: #fff;
}
.toggle-switch-tab.v2 button.on::before {
  position: absolute;
  top: 0;
  left: 5px;
  font-family: 'unifont';
  font-size: 18px;
  content: '\e8b7';
}


/* --- board --- */
/* - basic - */
.tbl-basic {position: relative;}
.tbl-basic + .tbl-basic {
  /* margin-top: 20px; */
  margin-top: 10px;
}
.tbl-total,
.tbl-card,
.tbl-grid,
.tbl-chart {
  margin-top: 20px;
  padding-top: 20px;
}
.tbl-basic.no-blank {
  padding: 0;
  margin-top: -20px;
}
.content-box > .tbl-basic:first-child,
.tab-result .tbl-total,
.tab-result .tbl-grid,
.tab-result .tbl-chart {
  margin-top: 0;
  padding-top: 0;
}
/* .tbl-basic + .tbl-total,
.tbl-basic + .tbl-card,
.tbl-basic + .tbl-grid,
.tbl-basic + .tbl-chart {
  border-top: 1px solid #f5f5f5;
} */
.tbl-basic + .tbl-list {
  /* margin-top: 20px; */
  padding-top: 20px;
  /* border-top: 1px solid #f5f5f5; */
}
/* .tbl-basic + .tbl-list.theme-card {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
} */
.tbl-basic + .bo-none {
  padding-top: 10px;
  border-top: 0;
}
.tbl-grid .btn-area + .tbl-total {
  margin-top: 0;
  padding-top: 0;
  border: 0;
}
.content-tt + .tbl-basic .tbl-top {
  display: flex;
  align-items: center;
  position: absolute;
  top: -32px;
  right: 0;
}
.content-tt + .tbl-basic .tbl-top .btn-area {display: flex;}
.content-tt.in-toggle-switch + .tbl-basic .tbl-top {top: -35px;}
.tbl-tt + .tbl-basic .tbl-top {
  position: absolute;
  top: -28px;
  right: 0;
}
.content-top {
  position: absolute;
  top: -49px;
  right: 0;
}
.tbl-basic.fold-noti + .tbl-basic .tbl-top,
.tbl-basic.tbl-noti + .tbl-basic .tbl-top {
  text-align: right;
}
.tbl-basic .tbl-top *,
.content-top * {
  display: inline-block;
  vertical-align: middle;
}
/* .tbl-basic .tbl-top-line-1 {margin-bottom: 15px;} */
.tab-search-area {
  position: relative;
  margin-top: -20px;
}
.tab-search-area .tbl-top {
  position: absolute;
  top: -34px;
  right: 0;
}
.tbl-basic .tbl-top-line-1 .tbl-tt {
  float: left;
  line-height: 30px;
}
.tbl-op {
  height: 34px;
  margin: 0 6px;
  padding: 0 10px 0 15px;
  line-height: 32px;
  border-radius: 12px;
  background-color: rgba(14,92,233,.1);
}
.tbl-op * {vertical-align: middle;}
.btn-area .tbl-op.op2 {
  display: flex;
  align-items: center;
  height: 31px;
  margin: 0;
  padding: 0 10px;
  /* line-height: 26px; */
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(255,76,93,.07);
}
.tbl-op.op-total {
  display: flex;
  align-items: center;
  height: 31px;
  margin: 0;
  padding: 0 10px;
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(255,76,93,.07);
}
.tbl-op.op2 p i {
  padding: 0;
  color: rgba(255,76,93,.5);
  border: 1px solid #222;
  cursor: default;
}
.tbl-op.op2 p span {
  display: inline-block;
  margin: -3px 2px 0;
}
.tbl-op.op2 div {
  float: left;
  margin-left: 15px;
}
.tbl-op span {margin: -1px 10px 0 0;}
.tbl-op i {
  padding: 5px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
}
.tbl-op div i {padding: 4px;}
.tbl-op i + i {margin-left: 2px;}
.tbl-op > i:hover,
.tbl-op > i.on,
.tbl-op div i:hover,
.tbl-op div i.on {
  border-radius: 50%;
  background-color: #fff;
}
.tbl-op.detail-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: inherit;
  margin: inherit;
  padding: inherit;
  line-height: inherit;
  background-color: inherit;
  z-index: 1;
}
.tbl-area > * > .tbl-op.detail-btn {top: 15px;} /* padding-top 변경 시 함께 변경 */
.tbl-op.detail-btn .op-open,
.tbl-op.detail-btn .op-close {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 22px;
  font-style: normal;
  font-size: 0;
  color: #fff;
  border-radius: 0 0 8px 8px;
  background-color: #777f85;
}
.tbl-op.detail-btn .op-open {
  position: relative;
  width: inherit;
  padding: 0 20px 0 8px;
}
.tbl-op.detail-btn.on .op-open,
.tbl-op.detail-btn .op-close {
  display: none;
}
.tbl-op.detail-btn .op-open,
.tbl-op.detail-btn.on .op-close {
  display: inline-block;
}
.tbl-op.detail-btn .op-open::before,
.tbl-op.detail-btn .op-close::before {
  font-family: "unifont";
  font-weight: bold;
  content: '';
}
.tbl-op.detail-btn .op-open::before {
  position: absolute;
  top: 0;
  right: 5px;
  content: '\e829';
  font-size: 10px;
}
.tbl-op.detail-btn .op-open::after {
  display: inline-block;
  content: '상세검색';
  font-weight: normal;
  font-size: 11px;
  color: #fff;
}
.tbl-op.detail-btn .op-close::before {
  content: '\e80b';
  font-size: 12px;
}
.tbl-basic .tbl-area .tbl-op.detail-btn + table {
  display: block;
  padding-bottom: 20px;
  border-bottom: 0;
}
.tbl-basic .tbl-area .tbl-op.detail-btn.on + table {
  display: table;
  padding-bottom: 0;
  border-bottom: 2px solid #f2f2f2;
}
.tbl-op.detail-btn + table thead,
.tbl-op.detail-btn + table tbody {
  display: none;
}
.tbl-op.detail-btn.on + table thead {display: table-header-group;}
.tbl-op.detail-btn.on + table tbody {display: table-row-group;}

/* 상세 조건 버튼 추가 */
.tbl-op.po-top.only-btn {top: -5px;}
.tbl-op.only-btn {
  position: absolute;
  top: 14px;
  right: 0;
  margin: inherit;
  padding: inherit;
  background-color: inherit;
  z-index: 1;
}
.tbl-op.only-btn i {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: inherit;
  line-height: 34px;
  font-style: normal;
}
.tbl-op.only-btn i::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  font-family: 'unifont';
  font-weight: normal;
  font-size: 34px;
  color: #0e5ce9;
}
.tbl-op.only-btn i.op-close,
.tbl-op.only-btn.on i.op-open {display: none;}
.tbl-op.only-btn.on i.op-close,
.tbl-op.only-btn i.op-open {display: inline-block;}
.tbl-op.only-btn i.op-open::before {content: '\e89e';}
.tbl-op.only-btn i.op-open:hover::before {content: '\e89f';}
.tbl-op.only-btn i.op-close::before {content: '\e8a0';}
.tbl-op.only-btn i.op-close:hover::before {content: '\e8a1';}
.tbl-op.o#0e5ce9nly-btn i:hover {
  border-radius: inherit;
  background-color: inherit;
}

/* 상세 버튼 추가에 따른 테이블 수정 */
.tbl-op.only-btn + .tbl-area table tr:first-child td .wid-100 {width: calc(100% - 60px);}

.tbl-top .sort-list-area {
  position: relative;
  margin-left: 11px;
  padding-left: 11px;
  border-left: 1px solid #f2f2f2;
}
.tbl-top .sort-list-area:only-child {
  margin: 0;
  padding: 0;
  border: 0;
}
.tbl-top .sort-list-area button {padding: 0 2px 0 12px;}
.tbl-top .sort-list-area button span {vertical-align: top;}
.tbl-top .sort-list-area button i {margin-left: 5px;}
.tbl-top .sort-list-area .sort-list-in {
  position: absolute;
  top: 45px;
  right: 0;
  min-width: 150px;
  padding: 12px;
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
  border: 1px solid #999;
  background-color: #fff;
  border-radius: 15px;
  z-index: 100;
  animation: fadeIn .5s ease-in-out 1;
}
.tbl-top .sort-list-area .sort-list-in:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -8px;
  right: 10px;
  border-bottom: 8px solid #999;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.tbl-top .sort-list-area .sort-list-in:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -7px;
  right: 11px;
  border-bottom: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.tbl-top .sort-list-area .sort-list-in dl {
  position: relative;
  display: block;
}
.tbl-top .sort-list-area .sort-list-in dl + dl {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f2f2f2;
}
.tbl-top .sort-list-area .sort-list-in dl dd {
  position: absolute;
  top: -1px;
  right: 0;
}
.tbl-top .sort-list-area .sort-list-in dl + dl dd {top: 9px;}
.tbl-top .sort-list-area .sort-list-in dl dd i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  color: #bbb;
  border-radius: 50%;
  /* background-color: #f5f5f5; */
  cursor: pointer;
}
.tbl-top .sort-list-area .sort-list-in dl dd i::before {
  font-weight: bold;
  font-size: 21px;
}
.tbl-top .sort-list-area .sort-list-in dl dd i:hover,
.tbl-top .sort-list-area .sort-list-in dl dd i.on {
  color: #0e5ce9;
  background-color: rgba(14,92,233,.15);
}
.tbl-top .sort-list-area .sort-list-in dl dd i + i {margin-left: 4px;}

/* 메인 옵션 추가 */
.main-op::before {
  display: block;
  content: '';
  clear: both;
}
.main-op .op-list {
  float: left;
  margin-right: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 12px;
  background-color: #f3f3f4;
}
.main-op.bg-red .op-list {background-color: rgba(255,76,93,.06);}
.main-op .op-list label {
  margin: 0 8px;
  /* font-size: 13px; */
  color: #999;
}
.main-op.bg-red .op-list label {color: #ff4c5d;}
.main-op .op-list .inp,
.main-op .op-list .slt {
  box-sizing: border-box;
  border: 0;
}
.main-op .op-list.period-area .inp {width: 120px;}
.main-op .op-list .slt {width: 100%;}
.main-op .op-list .btn-inp {
  top: 0;
  right: 5px;
}
.main-op .op-list .slt + i {margin: 0;}
.main-op .op-list .btn-area {
  display: inline-flex !important;
  margin: 0 6px;
}
.main-op .op-list .btn-area button {
  position: relative;
  height: 29px;
  margin: 0 !important;
  padding: 0 6px;
  font-size: 12px;
  line-height: 29px;
  color: #555;
  background-color: #fff;
  cursor: pointer;
}
.main-op .op-list .btn-area button::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid #ddd;
}
.main-op .op-list .btn-area button:nth-child(1),
.main-op .op-list .btn-area button:nth-child(1)::before {
  border-radius: 4px 0 0 4px;
}
.main-op .op-list .btn-area button:nth-child(2),
.main-op .op-list .btn-area button:nth-child(2)::before {
  border-radius:  0 4px 4px 0;
}
.po-relative .main-op {
  position: absolute;
  top: auto;
  left: 0;
  z-index: 1;
}

/* 상단검색 sort 버튼 수정 */
.tbl-top.v2 .sort-list-area > button,
.tbl-top.v2 .sort-list-area.list-theme > button.on {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
  background-color: rgba(14,92,233,.06);
}
.tbl-top.v2 .sort-list-area > button i.ico-uni-arrow-down {display: none;}
.tbl-top.v2 .sort-list-area.list-theme > button {
  float: left;
  padding: 0 8px;
  color: #999;
  border: 1px solid #ddd;
  background-color: transparent;
}
.tbl-top.v2 .sort-list-area.list-theme > button:nth-child(1) {border-radius: 12px 0 0 12px;}
.tbl-top.v2 .sort-list-area.list-theme > button:nth-child(2) {border-radius: 0 12px 12px 0;}
.tbl-top.v2 .sort-list-area.list-theme > button i {
  margin: 0;
  color: inherit;
}

/* v2 이름 추가 */
.sort-list-area.list-theme-tab > button.on {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
  background-color: rgba(14,92,233,.06);
}
.sort-list-area.list-theme-tab > button {
  float: left;
  padding: 0 8px;
  color: #999;
  border: 1px solid #ddd;
  background-color: transparent;
}
.sort-list-area.list-theme-tab > button:nth-child(1) {border-radius: 12px 0 0 12px;}
.sort-list-area.list-theme-tab > button:nth-child(2) {border-radius: 0 12px 12px 0;}
.sort-list-area.list-theme-tab > button i {
  margin: 0;
  line-height: 20px;
  color: inherit;
}
.sort-list-area.list-theme-tab button .ico-theme::before {
  font-weight: normal;
  font-size: 15px;
}

/* 문서 이동 UI 변경 */
.tbl-op .count-area {
  display: inline-block;
  color: #555;
}
.tbl-op .count-area * {vertical-align: initial;}
.tbl-op .count-area i {
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 22px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #222;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.tbl-op .count-area .on {
  margin: 0;
  font-family: 'SCD-5';
  color: #222;
}

/* 2107 검색 조건 수정 */
.tbl-op .btn-op {
  width: 22px;
  height: 22px;
  margin: 0;
  text-align: center;
  line-height: 22px;
  font-weight: bold;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.tbl-op .btn-op::before {
  font-family: "unifont";
  content: '\e801';
}
.tbl-op.on .btn-op::before {content: '\e804';}

/* 2107 검색 조건 v2 - on/off */
/* .tbl-op.v2 {
  position: relative;
  padding: 0 50px 0 12px;
}
.tbl-op.v2 span {margin: -1px 6px 0 0;}
.tbl-op.v2 .btn-op {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 34px;
  margin: 0;
  text-align: center;
  line-height: 32px;
  letter-spacing: 0.08em;
  font-weight: bold;
  font-size: 13px;
  color: #999;
  border: 1px solid rgba(0,0,0,.25);
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.tbl-op.v2.on .btn-op {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
}
.tbl-op.v2 .btn-op::before {content: 'OFF';}
.tbl-op.v2.on .btn-op::before {content: 'ON';} */

/* 목록 테마 추가 */
.tbl-top .sort-list-area.list-theme:only-child {
  margin: 0;
  padding: 0;
  border: 0;
}
.tbl-top .sort-list-area.list-theme button {padding: 0 2px 0 5px;}
.tbl-top .sort-list-area.list-theme button .ico-theme {
  line-height: 20px;
  color: #0e5ce9;
}
.tbl-top .sort-list-area.list-theme button .ico-theme::before {
  font-weight: normal;
  font-size: 15px;
}
.tbl-top .sort-list-area.list-theme button .ico-uni-arrow-down {margin-left: 10px;}
.tbl-top .sort-list-area.list-theme .sort-list-in {min-width: 80px;}
.tbl-top .sort-list-area.list-theme .sort-list-in ul,
.tbl-top .sort-list-area.list-theme .sort-list-in li {
  display: block;
}
.tbl-top .sort-list-area.list-theme .sort-list-in li {
  position: relative;
  height: 22px;
  /* line-height: 22px; */
  cursor: pointer;
}
.tbl-top .sort-list-area.list-theme .sort-list-in li:hover {color: #0e5ce9;}
.tbl-top .sort-list-area.list-theme .sort-list-in li + li {margin-top: 10px;}
.tbl-top .sort-list-area.list-theme .sort-list-in li + li::before {
  position: absolute;
  top: -5px;
  left: 0;
  content: '';
  width: 100%;
  border-top: 1px solid #ddd;
}
.tbl-top .sort-list-area.list-theme .sort-list-in li i {
  position: absolute;
  top: 4px;
  right: 0;
  font-size: 15px;
}
.tbl-basic .tbl-area, 
.tbl-basic .tbl-noti,
.tbl-basic .grid-area,
.tbl-basic .chart-area {
  padding-top: 10px;
}
.grid-area .tbl-area {overflow: auto;}
.tbl-basic.in-search .tbl-area,
.content-box .tbl-basic:first-child .tbl-area {padding-top: 0;}
.content-box .tab-result .tbl-basic .tbl-area {padding-top: 10px;}
.tbl-basic .tbl-srch-area.line-1 {
  position: relative;
  margin: 15px 0;
}
.tbl-basic .tbl-srch-area.line-1 .tbl-top {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 10;
}
.tbl-basic .tbl-srch-area.line-1 .tbl-area {padding: 0;}
.tbl-basic .tbl-area table {position: relative;}

/* 수정 금지 - 우선 순위 */
/* .tbl-basic .tbl-area table {border-top: 1px solid #999;} */
/* .tbl-basic .tbl-area table:not(.in-editor table):not(.doc-view table) {border-top: 2px solid #ddd;} */
.tbl-basic .tbl-area table:not(.in-editor table,.doc-view table,.tbl-scroll table) {border-top: 2px solid #ddd;}

/* ie 테이블 상단 라인 추가용 */
.tbl-basic .tbl-area table::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #ddd;
}
.doc-view .tbl-basic .tbl-area table::before {display: none;}
.tbl-basic .tbl-area table:not(.in-editor table)::before {display: none;}
/* .tbl-c1 .tbl-area table::before {display: none;} */
.tbl-basic .tbl-area.bo-none table {border-top: 0;}
.tbl-basic.tbl-data .tbl-area table tr:hover td {background-color: #f6f6f8;}
.tbl-basic .tbl-area table th,
.tbl-basic .tbl-area table td {
  /* position: relative; */
  /* height: 48px; */
  height: 39px;
  word-break: break-all;
  font-weight: normal;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.tbl-basic .tbl-area.h40 table th,
.tbl-basic .tbl-area.h40 table td {
  height: 40px;
}
.tbl-basic .tbl-area table th:last-child,
.tbl-basic .tbl-area table td:last-child {
  border-right: 0;
}
.tbl-basic .tbl-area table th.bo-r,
.tbl-basic .tbl-area table td.bo-r {
  border-right: 1px solid #eee;
}
.tbl-basic .tbl-area table tr.bo-none th,
.tbl-basic .tbl-area table tr.bo-none td {
  border-bottom: 0;
}
.tbl-basic .tbl-area table th {
  text-align: center;
  color: #7e868d;
  background-color: #fcfcfd;
}
.tbl-basic .tbl-area table td {
  padding-left: 10px;
  color: #222;
}
.in-tbl-explain > .tbl-area table td {
  padding: 6px 0 6px 10px;
  box-sizing: border-box;
}
.tbl-basic .tbl-area table td.pd0 {padding: 0;}
.tbl-basic .tbl-area table td.in-pd {
  padding-top: 7px;
  padding-bottom: 7px;
  box-sizing: border-box;
}
.tbl-basic .tbl-area table td .add-pd {
  padding: 6px 0;
  line-height: 20px;
}
.tbl-basic .tbl-area table th.empty,
.tbl-basic .tbl-area table td.empty {
  background-image: linear-gradient(to top left,transparent 50%,#eee,transparent 51%);
}
.tbl-basic .tbl-area table td.bg-point {background-color: rgba(255,240,0,.05);}
.tbl-basic .tbl-area table td > * {
  margin-right: 5px;
  vertical-align: middle;
}
/* add-template 대신 doc-view로 변경 */
.tbl-basic table td:not(.tax-on.tbl-basic td,.tax.manage-mail-template td,.cal-area td,.doc-view td,.in-editor td) > * {
  display: inline-block;
}
/* right값에서 문제 있으니 다른 방향을 모색하기 */
/* .tbl-basic table td:not(.tax-on.tbl-basic td,.tax.manage-mail-template td,.cal-area td,.doc-view td,.in-editor td) > a,
.tbl-basic table td:not(.tax-on.tbl-basic td,.tax.manage-mail-template td,.cal-area td,.doc-view td,.in-editor td) > span,
.tbl-basic table td:not(.tax-on.tbl-basic td,.tax.manage-mail-template td,.cal-area td,.doc-view td,.in-editor td) > p,
.tbl-basic table td:not(.tax-on.tbl-basic td,.tax.manage-mail-template td,.cal-area td,.doc-view td,.in-editor td) > div {
  position: relative;
  top: -1px;
} */
/* add-template 문서 스타일 초기화 */
/* .doc-view .add-template table td > *,
.modal .doc-view .tbl-basic .tbl-area table .add-template > * {
  display: revert;
} */
.modal-body .write-area .tbl-basic .tbl-area table td .tbl-explain {
  /* 사용내역 작성 팝업 내 비용향목 설명 */
  display: block;
}
.tbl-basic .tbl-area table td > *:only-child,
.tbl-basic .tbl-area table td > *:last-child {
  margin-right: 0;
}
.tbl-basic .tbl-area table td > *.checkbox-area:only-child {gap: 0;}
/* .tbl-basic .tbl-area table td > div {
  display: inline-block;
  vertical-align: middle;
} */

/* 스몰 사이즈 추가 */
.tbl-s .tbl-area table *:not(i) {font-size: 13px;}
.tbl-s .tbl-area table th,
.tbl-s .tbl-area table td {height: 40px;}

/* x스몰 사이즈 추가 */
.tbl-xs .tbl-area table *:not(i) {font-size: 11px;}
.tbl-xs .tbl-area table th,
.tbl-xs .tbl-area table td {height: 39px;}

/* 프린트 사이즈 추가 */
.tbl-print .tbl-tt {font-size: 13px;}
.tbl-print .tbl-area {padding-top: 10px;}
.tbl-print .tbl-area table tr {height: inherit;}
.tbl-print .tbl-area table th,
.tbl-print .tbl-area table td {
  height: 30px;
  font-size: 12px;
}
.tbl-basic.tbl-print .tbl-area table th.total-line,
.tbl-basic.tbl-print .tbl-area table td.total-line {
  font-size: 13px;
}

/* 테이블 정렬 예외 */
/* .tbl-basic .tbl-area table td > span + input {vertical-align: top;} */
.doc-view .tbl-basic .tbl-area table td > div:not(.slt-area) {display: block;}

/* 한 줄 검색 - 기존 스타일 */
.tbl-basic.in-search .tbl-area {width: calc(100% - 90px);}
.tbl-basic.in-search .btn-area {
  position: absolute;
  top: 0;
  right: 0;
}
.tbl-basic.in-search .btn-area button {
  /* height: 48px;
  line-height: 48px; */
  height: 40px;
  line-height: 40px;
}
.tbl-s.in-search .btn-area button {
  height: 41px;
  line-height: 41px;
}

/* 한 줄 검색 - 박스 스타일 */
.in-tbl-srch {padding-top: 15px;}
.tbl-srch-box,
.top-op-box {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgba(34,34,34,.015);
}
.tbl-srch-box.bg,
.top-op-box.bg {
  border: 0;
  background-color: #f6f6f6;
}
.tbl-srch-box ul,
.top-op-box ul {overflow: hidden;}
.tbl-srch-box ul li,
.top-op-box ul li {
  overflow: hidden;
  float: left;
  padding: 3px 20px;
}
.tbl-srch-box.bg ul li,
.top-op-box.bg ul li {padding: 5px 18px;}
.tbl-srch-box ul li + li,
.top-op-box ul li + li {border-left: 1px solid #eee;}
.tbl-srch-box ul li > *,
.top-op-box ul li > * {float: left;}
.tbl-srch-box ul li input,
.top-op-box ul li input {
  height: 25px;
  line-height: 25px;
  font-size: 13px;
}
.tbl-srch-box ul li select,
.top-op-box ul li select {
  font-size: 13px;
}
.tbl-srch-box ul li .li-tt,
.top-op-box ul li .li-tt {
  margin-right: 20px;
  line-height: 30px;
  color: #777;
}
.tbl-srch-box .period-area .btn-inp,
.top-op-box .period-area .btn-inp {
  top: 1px;
  right: 4px;
  height: 26px;
  line-height: 26px;
  font-size: 23px;
}
.tbl-srch-box .btn-area.right,
.top-op-box .btn-area.right {
  top: 3px;
  right: 5px;
}
.tbl-srch-box.bg .btn-area.right,
.top-op-box.bg .btn-area.right {
  top: 6px;
  right: 6px;
}
.tbl-srch-box .btn-area button,
.top-op-box .btn-area button {
  height: 28px;
  line-height: 28px;
}

/* 테이블 내 도움말 */
.tbl-area table .board-help {margin-left: 5px;}
.tbl-area table .board-help i {
  position: static;
  top: 2px;
  left: 5px;
  vertical-align: text-top;
  font-size: 19px;
  color: #ff8b00;
  cursor: pointer;
}

/* 선택 목록 영역 */
.on-slt-area button + .slt-list {margin-top: 6px;}
.on-slt-area .slt-list {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
  background-color: #f6f6f6;
}

/* 양식 옵션 추가 */
.tbl-area table .op-slt-box {overflow: hidden;}
.tbl-area table .op-slt-box * {float: left;}
.tbl-area table .op-slt-box .slt-form {margin-left: 10px;}
.tbl-area table .op-slt-box .slt-form .form-name {
  position: relative;
  padding: 0 30px 0 10px;
  line-height: 31px;
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(14,92,233,.1);
}
.tbl-area table .op-slt-box .slt-form .form-name .delete {
  position: absolute;
  top: 0;
  right: 8px;
}
.tbl-area table .op-slt-box .slt-form .form-name .delete::before {
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(14,92,233,.6);
  cursor: pointer;
}
.tbl-area table .op-form {
  width: calc(100% - 10px);
  margin-top: 7px;
  box-sizing: border-box;
}
.tbl-area table .op-form .cont-tt {
  display: none;
  margin-bottom: 8px;
  font-size: 12px;
}
.tbl-area table .op-form .op {
  position: relative;
  display: inherit;
  margin: 0 15px 6px 0;
  /* vertical-align: middle; */
}
.tbl-area table .op-form .op::before {
  position: absolute;
  top: 0;
  right: -10px;
  height: 28px;
  content: '';
  border-right: 1px solid #aaa;
}
.tbl-area table .op-form .op:last-child:before {display: none;}
.tbl-area table .op-form .op.slt-area {
  display: inherit;
  line-height: 0;
}
.tbl-area table .op-form .op > div {display: inline-block;}
.tbl-area table .op-form .op *:not(i) {font-size: 12px;}
.tbl-area table .op-form .op .inp {
  display: inline-block;
  width: 105px;
  height: 29px;
  padding: 0 8px;
  line-height: 29px;
  box-sizing: border-box;
}
.tbl-area table .op-form .op.period-area input {
  width: 105px;
  padding-right: 30px;
}
.tbl-area table .op-form .op.period-area .btn-inp {
  top: calc(50% - 12px);
  right: 3px;
}
.tbl-area table .op-form .op select {
  min-width: 65px;
  height: 27px;
  line-height: 27px;
}
.tbl-area table .op-form .op select + i {margin: 0;}
/* .tbl-area table .op-form .op.checkbox-area,
.tbl-area table .op-form .op.radio-area {
  padding-right: 10px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.tbl-area table .op-form .op.radio-area {padding-left: 10px;}
.tbl-area table .op-form .op.checkbox-area + .op.radio-area,
.tbl-area table .op-form .op.radio-area + .op.checkbox-area {
  margin-left: -10px;
  border-left: 0;
} */
.tbl-area table .op-form .op.checkbox-area,
.tbl-area table .op-form .op.radio-area {
  display: inline-flex;
  align-items: center;
  height: 29px;
  /* padding-top: 4px; */
}
/* .tbl-area table .op-form .op.checkbox-area {margin-left: -10px;} */
.tbl-area table .op-slt-area {
  overflow: hidden;
  width: 100%;
  margin: 5px 0;
}
.tbl-area table .op-slt-area * {float: left;}
.tbl-area table .op-slt-area .op-area {
  width: 100%;
  margin-left: -5px;
}
.tbl-area table .op-slt-area .op-area .op-name {
  display: flex;
  align-items: center;
  position: relative;
  margin: 5px 0 0 5px;
  padding: 0 30px 0 10px;
  min-height: 31px;
  line-height: 21px;   /* 결재선 조건 버튼 사이즈 맞춤 */
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(14,92,233,.1);
}
.tbl-area table .op-slt-area .op-area .op-name .delete {
  position: absolute;
  top: 0;
  right: 8px;
  line-height: 31px;
}
.tbl-area table .op-slt-area .op-area .op-name .delete::before {
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(14,92,233,.6);
  cursor: pointer;
}
/* .tbl-area table .op-slt-area .op-area .op-name .delete:hover::before {color: rgba(255,139,0,1);} */
.tbl-area table .op-slt-area.size-s .op-area .op-name {
  min-height: 26px;
  line-height: 26px;
}
.tbl-area table .op-slt-area.size-s .op-area .op-name .delete {line-height: 26px;}

/* 증명서 목록 추가 */
.tbl-area table .ce-inp-list {font-size: 13px;}
.tbl-area table .ce-inp-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
}
.tbl-area table .ce-inp-list li .li-tt {width: 120px;}
.tbl-area table .ce-inp-list li .inp {
  display: inline-block;
  width: 40px;
  height: 26px;
  padding: 0 8px;
  line-height: 26px;
  text-align: right;
  box-sizing: border-box;
}

/* 사용자 작성 내용 */
.tbl-basic .tbl-area.user-bak p {
  margin-top: 20px;
  padding: 10px 0;
  color: #ff4c5d;
}
.tbl-basic .tbl-area.user-bak table {border: 1px dashed #ddd;}
.tbl-basic .tbl-area.user-bak table tr th {color: #aaa;}
.tbl-basic .tbl-area.user-bak table tr:last-child th,
.tbl-basic .tbl-area.user-bak table tr:last-child td {
  border-bottom: 1px dashed #ddd;
}

.tbl-noti,
.tbl-noti-box {
  overflow: hidden;
  position: relative;
  padding: 20px;
  line-height: 24px;
  border-radius: 15px;
  background-color: rgba(14,92,233,.05);
}
.tbl-noti::before,
.tbl-noti-box::before {
  position: absolute;
  right: 25px;
  top: 19px;
  width: 42px;
  height: 50px;
  content: '';
  background: url('../images/bg-noti-files-blue.svg') 0 0 no-repeat;
  background-size: 42px 50px;
  opacity: .15;
}
.tbl-noti.bg-red,
.tbl-noti-box.bg-red {
  background-color: rgba(255,76,93,.05);
}
.tbl-noti.bg-gray,
.tbl-noti-box.bg-gray {
  background-color: rgba(0,0,0,.03);
}
.tbl-noti.bg-red::before,
.tbl-noti-box.bg-red::before {
  background: url('../images/bg-noti-files-red.svg') 0 0 no-repeat;
  background-size: 42px 50px;
  opacity: .08;
}
.tbl-noti.bg-gray::before,
.tbl-noti-box.bg-gray::before {
  background: url('../images/bg-noti-files-black.svg') 0 0 no-repeat;
  background-size: 42px 50px;
  opacity: .08;
}
.tbl-noti {margin-top: 15px;}
.tbl-noti .noti-card p {
  line-height: 22px;
  /* color: #555; */
}
.tbl-noti .noti-card p + p {margin-top: 10px;}
.tbl-noti .noti-card p .noti-tt {color: #222;}
.tbl-noti .noti-card p span.block {
  display: block;
  margin-left: 12px;
}
.tbl-noti .noti-card p span.block span {display: block;}
.tbl-noti .noti-card p span i {font-size: 27px;}
.tbl-noti .noti-card p span a {
  margin-left: 5px;
  border-bottom: 1px solid #0e5ce9;
}
.tbl-noti .noti-step * {line-height: 22px;}
.tbl-noti .noti-step .step-1 + .step-1 {margin-top: 12px;}
.tbl-noti .noti-step .step-1 > p::before {
  display: inline-block;
  content: '*';
  margin-right: 5px;
}
.tbl-noti .noti-step .step-1 .step-2,
.tbl-noti .noti-step .step-1 .step-3 {
  margin-top: 0;
  /* color: #555; */
}
.tbl-noti .noti-step .step-1 .step-2 > p {margin-left: 12px;}
.tbl-noti .noti-step .step-1 .step-3 > p {margin-left: 24px;}
.tbl-noti .noti-step .step-1 .step-2 > p::before,
.tbl-noti .noti-step .step-1 .step-3 > p::before {
  display: none;
}
.tbl-noti-box .noti-tt {font-family: 'SCD-5';}
.tbl-noti-box dl.basic {margin: 0;}
.tbl-noti-box dl.basic + dl.basic {margin-top: 20px;}
.tbl-noti-box dl.basic dt {
  margin: 0 0 6px;
  padding: 0;
  font-size: inherit;
  color: #555;
  border: 0;
}
.tbl-noti-box dl.basic dd {
  margin-left: 20px;
  text-indent: -16px;
}
.tbl-noti-box .add-ico {
  position: relative;
  padding-left: 12px;
}
.tbl-noti-box .add-ico::before {
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 50%;
  background-color: #555;
}
.tbl-noti-box .noti + .noti {margin-top: 20px;}
.tbl-noti-box .noti h3 {
  margin-bottom: 5px;
  font-family: 'SCD-5';
  font-size: 16px;
}
.tbl-basic .tbl-area table .no-data {height: 100px !important;}
.tbl-total::after {
  display: block;
  content: '';
  clear: both;
}
.tbl-fixed .tbl-area table {
  table-layout: fixed;
  box-sizing: border-box;
}
.tbl-fixed .tbl-area {overflow: auto;}
.tbl-total .tbl-area table th,
.tbl-total .tbl-area table td,
.tbl-center .tbl-area table th,
.tbl-center .tbl-area table td {
  text-align: center;
}
.tbl-th-left .tbl-area table th {
  padding-left: 20px;
  text-align: left;
}
.tbl-total .tbl-area table td,
.tbl-center .tbl-area table td,
.tbl-th-center .tbl-area table th {
  padding-left: 0;
}
.period-area div {
  position: relative;
  display: inline-block;
}
.tbl-basic .tbl-area table th.point-line,
.tbl-basic .tbl-area table td.point-line {
  background-color: rgba(14,92,233,.05);
}
.tbl-basic .tbl-area table th.total-line,
.tbl-basic .tbl-area table td.total-line {
  font-family: "SCD-5";
  font-size: 15px;
  background-color: rgba(255,240,0,.05);
}
.tbl-basic .tbl-area table td.total-line {color: #ff4c5d;}
.tbl-basic .tbl-area table th.total-line-sub,
.tbl-basic .tbl-area table td.total-line-sub {
  font-family: "SCD-5";
  background-color: rgba(255,240,0,.03);
}
.tbl-basic .col-2,
.tbl-basic .col-3 {
  overflow: hidden;
}
.tbl-basic .btn-area + .col-2,
.tbl-basic .btn-area + .col-3 {
  margin-top: 30px;
}
.tbl-basic .col-2 > div,
.tbl-basic .col-3 > div {
  position: relative;
  float: left;
}
.tbl-basic .col-2 > div {width: calc(50% - 20px);}
.tbl-basic .col-2 > div:only-child {width: 100%;}
.tbl-basic .col-2.wid-40-60 > div:first-child {width: calc(40% - 20px);}
.tbl-basic .col-2.wid-40-60 > div:last-child {width: calc(60% - 20px);}
.tbl-basic .col-3 > div {width: calc(33.33333333% - 26.66666666px);}
.tbl-basic .col-2 > div + div,
.tbl-basic .col-3 > div + div {
  margin-left: 40px;
}
.tbl-basic .slt-data {
  position: relative;
  cursor: pointer;
}
.tbl-basic .slt-data:hover {
  color: #0e5ce9;
}
.tbl-basic .slt-data:hover::before {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -20px;
  font-family: "unifont";
  content: '\e808';
  font-size: 16px;
  font-weight: 600;
  color: #0e5ce9;
}
.tbl-basic .list-total,
.tbl-list .list-total,
.tbl-card .list-total,
.tbl-grid .grid-total {
  float: left;
  margin-right: 8px;
  line-height: 31px;
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 14px;
}
.tbl-grid .tbl-tt {
  float: left;
  margin-right: 8px;
  line-height: 31px;
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 16px;
}
.tbl-basic .list-total i,
.tbl-list .list-total i,
.tbl-card .list-total i,
.tbl-grid .grid-total i,
.tab-result .help-msg i {
  display: none;
  width: 9px;
  height: 9px;
  margin: -4px 8px 0 0;
  text-indent: -9999px;
  font-size: 0;
  border-radius: 50%;
  border: 1px solid #0e5ce9;
  box-sizing: border-box;
}
.tbl-basic .list-total + .tbl-area,
.tbl-grid .grid-total + .grid-area,
.tbl-grid .tbl-tt + .grid-area {
  margin-top: 31px;
}
.tbl-basic .list-total .point,
.tbl-list .list-total .point,
.tbl-card .list-total .point,
.tbl-grid .grid-total .point,
.tbl-grid .point {
  margin-top: -2px;
  font-size: 16px;
}
.tbl-basic .list-total .point:nth-child(3),
.tbl-card .list-total .point:nth-child(3),
.tbl-grid .grid-total .point:nth-child(3) {
  margin-left: 5px;
}
.tbl-basic .chart-area {
  position: relative;
  padding: 20px;
  border: 1px solid #eee;
  background-color: #fff;
}
.tbl-basic .chart-area .chart-tt {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #0e5ce9;
  z-index: 10;
}
.tbl-basic .chart-area .chart-tt i {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  line-height: 30px;
  font-size: 17px;
  color: #fff;
  border-radius: 50%;
  background-color: #0e5ce9;
}

/* 그리드 영역 라인 */
.unicloud-grid div {
  border: 1px solid #bbb;
  box-sizing: border-box;
}

/* - color - */
/* c1 스타일 변경 - 중간 라벨 스타일 없이, 이의철 상무님 요청 */
.tbl-c1 .tbl-area table tr.th-1 th,
.tbl-c1 .tbl-area table th.th-1 {
  background-color: #fcfcfd;
}
.tbl-c1 .tbl-area table th {background-color: #fff;}

/* 기존 c1 스타일 사용 시 */
.tbl-c1-restyle .tbl-area table tr.th-1 th,
.tbl-c1-restyle .tbl-area table th.th-1 {
  background-color: rgba(14,92,233,.12);
}
.tbl-c1-restyle .tbl-area table th {background-color: rgba(14,92,233,.04);}

.tbl-c1 .tbl-area table tr:last-child th,
.tbl-c1 .tbl-area table tr:last-child td,
.tbl-c1 .tbl-area table th.bo-b,
.tbl-c1 .tbl-area table td.bo-b {
  border-bottom: 1px solid #ddd;
}

/* - 목록 라인형 추가 - */
.tbl-list.theme-line {text-align: center;}

/* 테마 선택 */
.tbl-list .list-theme {
  display: inline-block;
  margin: 0 auto;
}
.tbl-list .list-theme li {
  float: left;
  width: 31px;
  height: 31px;
  border: 1px solid #eee;
  background-color: #eee;
  box-sizing: border-box;
  cursor: pointer;
}
.tbl-list .list-theme li.on {
  border: 1px solid #0e5ce9;
  background-color: #fff;
}
.tbl-list .list-theme li i {
  line-height: 31px;
  font-size: 18px;
  color: #c5c5c5;
}
.tbl-list .list-theme li.on i,
.tbl-list .list-theme li.on:hover i {
  color: #0e5ce9;
}
.tbl-list .list-theme li:hover i {color: #777;}

/* 테마 선택 - 토글 */
.tbl-list .btn-area .list-theme.op-toggle {
  position: relative;
  margin-left: 7px;
  padding-left: 11px;
  border-left: 1px solid #ddd;
}
.tbl-list .btn-area .list-theme.op-toggle .on {
  display: inline-block;
  width: 31px;
  height: 31px;
  text-align: center;
  line-height: 29px;
  border: 1px solid #0e5ce9;
  background-color: rgba(14,92,233,.05);
  box-sizing: border-box;
  cursor: pointer;
}
.tbl-list .btn-area .list-theme.op-toggle .on::before {
  display: inline-block;
  font-family: "unifont";
  font-size: 16px;
  color: #0e5ce9;
}
.tbl-list .btn-area .list-theme.op-toggle .on.line::before {content: '\e8d2';}
.tbl-list .btn-area .list-theme.op-toggle .list-op {
  display: none;
  position: absolute;
  top: 31px;
  left: 11px;
}
.tbl-list .btn-area .list-theme.op-toggle:hover .list-op {display: block;}
.tbl-list .btn-area .list-theme.op-toggle .list-op span {
  display: inline-block;
  width: 31px;
  height: 31px;
  text-align: center;
  line-height: 29px;
  font-size: 16px;
  color: #bbb;
  border: 1px solid #ccc;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.tbl-list .btn-area .list-theme.op-toggle .list-op span + span {margin-top: -1px;}
.tbl-list .btn-area .list-theme.op-toggle .list-op span.theme-line:hover,
.tbl-list .btn-area .list-theme.op-toggle .list-op span.theme-rectangle:hover {
  color: #0e5ce9;
}
.tbl-list .btn-area .list-theme.op-toggle .list-op span::before {
  display: inline-block;
  font-family: "unifont";
}
.tbl-list .btn-area .list-theme.op-toggle .list-op span.theme-line::before {content: '\e8d2';}
.tbl-list .btn-area .list-theme.op-toggle .list-op span.theme-rectangle::before {content: '\e8d3';}

/* 라인형 목록 */
.theme-line table {
  /* table-layout: fixed; */
  border: 1px solid #ddd;
  word-break: break-all;
}
.theme-line .on table {border: 0;}
.theme-line table .checkbox-area,
.theme-line table .checkbox-area * {
  margin: 0;
}
.theme-line table tr.line-th {border: 1px solid #f9f9fa;}
.theme-line table tr th,
.theme-line table tr td {
  text-align: center;
  font-weight: normal;
  font-size: 14px;
}
.theme-line table tr.line-th th {
  padding: 10px 0;
  background-color: #f9f9fa;
}
.theme-line table tr td {
  padding: 10px 0;
  vertical-align: top;
  /* line-height: 18px; */
  font-size: 12px;
  border-left: 1px solid #f5f5f5;
}
.theme-line table tr td:first-child,
.theme-line table tr td:last-child,
.theme-line table tr td.no-line + td {border-left: 0;}
.theme-line td .point-num {
  padding-right: 10px;
  text-align: right;
  font-family: 'SCD-5';
  color: #ff4c5d;
}
.theme-line td .list-thumbnail {
  display: table-cell;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  border: 1px solid #ddd;
  background-color: #ddd;
  box-sizing: border-box;
}
.theme-line td .list-thumbnail:hover {opacity: .9;}
.theme-line td .list-thumbnail.no-cont::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e8a4';
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.theme-line td .list-thumbnail img {
  max-width: 40px;
  max-height: 40px;
}
.theme-line td .cont-area {
  position: relative;
  padding: 0 20px;
  line-height: 20px;
}
.theme-line td .cont-area.no-padd {padding: 0;}
.theme-line td .cont-area.in-title {
  text-align: left;
  line-height: 18px;
}
.theme-line td .cont-area.in-add {text-align: left;}
.theme-line td .cont-area .line-3 {
  overflow: hidden;
  display: -webkit-box;
  max-height: 60px;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.theme-line td .cont-area .add-cont {overflow: hidden;}
.theme-line td .cont-area .add-cont + .add-cont {margin-top: 2px;}
.theme-line td .cont-area .add-cont > span {float: left;}
.theme-line td .cont-area .add-cont .cont-tt {
  overflow: hidden;
  display: inline-block;
  width: 65px;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #999;
}
.theme-line td .cont-area .add-cont .cont-tt + span {
  overflow: hidden;
  width: calc(100% - 65px);
  max-height: 20px;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.theme-line td .add-btn-area {display: inline-block;}
.theme-line td .add-btn-area .btn-theme-line {
  position: relative;
  float: left;
  height: 26px;
  margin-top: -3px;
  padding: 0 6px;
  line-height: 26px;
  font-size: 12px;
  border-radius: 6px;
  background-color: #eee;
  cursor: pointer;
}
.theme-line td .add-btn-area .btn-theme-line:hover {background-color: #e5e5e5;}
.theme-line td .add-btn-area .btn-theme-line + .btn-theme-line {margin-left: 10px;}
.theme-line td .add-btn-area .btn-theme-line + .btn-theme-line.add-line {margin-left: 20px;}
.theme-line td .add-btn-area .btn-theme-line + .btn-theme-line.add-line::before {
  position: absolute;
  top: 0;
  left: -10px;
  content: '';
  border-left: 1px solid #ddd;
  height: 100%;
}
.theme-line td .add-btn-area .btn-set .btn-theme-line {
  width: 26px;
  margin-top: 0;
  padding: 0;
  line-height: inherit;
}
.theme-line td .add-btn-area .btn-set .btn-theme-line i {
  padding: 0;
  line-height: 26px;
  font-size: 20px;
  background-color: transparent;
  cursor: default;
  pointer-events: none;
}
.theme-line td .add-btn-area .btn-set {
  display: inline-block;
  position: relative;
}
.theme-line td .add-btn-area .btn-set .btn-list {
  display: none;
  position: absolute;
  top: 39px;
  right: 0;
  padding: 12px;
  text-align: right;
  line-height: 22px;
  white-space: nowrap;
  font-size: 13px;
  border: 1px solid #555;
  background-color: #fff;
  border-radius: 5px;
  z-index: 100;
  animation: fadeIn .5s ease-in-out 1;
}
.theme-line td .add-btn-area .btn-set .btn-list::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -9px;
  right: 4px;
  border-bottom: 9px solid #555;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.theme-line td .add-btn-area .btn-set .btn-list::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -8px;
  right: 5px;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.theme-line td .add-btn-area .btn-set .btn-list li.add-line {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #ddd;
}
.theme-line td .add-btn-area .btn-set .btn-list li span {
  display: inline-block;
  color: #777;
  cursor: pointer;
}
.theme-line td .add-btn-area .btn-set .btn-list li span:hover {
  color: #222;
  text-decoration: underline;
}

/* 테이블형 목록 */
body .theme-table table {
  table-layout: fixed;
  border-bottom: 1px solid #ddd;
  word-break: break-all;
}
.theme-table .theme-th table {border-top: 1px solid #999;}
.theme-table table .checkbox-area,
.theme-table table .checkbox-area * {
  margin: 0;
}
.theme-table table tr th,
.theme-table table tr td {
  text-align: center;
  font-weight: normal;
  font-size: 13px;
}
.theme-table table tr.line-th th {
  padding: 8px 0;
  /* background-color: #f9f9fa; */
  background-color: rgba(34,34,34,.015);
}
.theme-table table tr.line-th th .sort-list-area {
  display: inline-block;
  position: relative;
  width: 10px;
  top: 2px;
  left: 2px;
  vertical-align: top;
}
.theme-table table tr.line-th th .sort-list-area .btn-sort {
  position: relative;
  overflow: hidden;
  float: left;
  width: 10px;
  height: 6px;
  /* text-indent: -9999px; */
  font-size: 0;
  cursor: pointer;
}
.theme-table table tr.line-th th .sort-list-area .btn-sort::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.theme-table table tr.line-th th .sort-list-area .btn-sort.ascending::before {border-bottom: 6px solid #bbb;}
.theme-table table tr.line-th th .sort-list-area .btn-sort.descending::before {border-top: 6px solid #bbb;}
.theme-table table tr.line-th th .sort-list-area .btn-sort.ascending:hover::before,
.theme-table table tr.line-th th .sort-list-area .btn-sort.ascending.on::before {
  border-bottom: 6px solid #222;
}
.theme-table table tr.line-th th .sort-list-area .btn-sort.descending:hover::before,
.theme-table table tr.line-th th .sort-list-area .btn-sort.descending.on::before {
  border-top: 6px solid #222;
}
.theme-table table tr.line-th th .sort-list-area .btn-sort + .btn-sort {margin-top: 2px;}
.theme-table table tr td {
  padding: 10px;
  /* vertical-align: top; */
  /* line-height: 0; */
  font-size: 12px;
  border-left: 1px solid #f5f5f5;
}
.theme-table table tr td:first-child {border-left: 0;}
.theme-table table tr td.bo-l {border-left: 1px solid #f5f5f5;}
.theme-table table tr td.bo-r {border-right: 1px solid #f5f5f5;}
.theme-table table tr th:last-child,
.theme-table table tr td:last-child {
  border-left: 0;
}
.theme-table td .point-num {
  text-align: right;
  font-family: 'SCD-5';
  color: #ff4c5d;
}
.theme-table table tr td.in-thumbnail {padding: 5px 8px;}
.theme-table td .list-thumbnail {
  display: table-cell;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  border: 1px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
/* .theme-table td .list-thumbnail:hover {opacity: .9;} */
.theme-table td .list-thumbnail.receipt::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e8a4';
  font-size: 25px;
  color: #0e5ce9;
  text-align: center;
}
.theme-table td .list-thumbnail.no-receipt::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e8db';
  font-size: 25px;
  color: #0e5ce9;
  text-align: center;
}
.theme-table td .list-thumbnail img {
  max-width: 30px;
  max-height: 30px;
}
.theme-table td .cont-area > p {
  /* overflow: hidden;
  display: -webkit-box;
  max-height: 20px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; */
  overflow: hidden;
  position: inherit;
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: text-top;
  font-size: inherit;
}
.theme-table td .cont-area .line-3 {
  overflow: hidden;
  display: -webkit-box;
  max-height: 60px;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* .theme-table td .cont-area .add-cont {overflow: hidden;}
.theme-table td .cont-area .add-cont > span {float: left;} */
.theme-table td .cont-area .add-cont .cont-tt {
  /* display: inline-block; */
  margin-right: 8px;
  color: #aaa;
}
.theme-table td .cont-area .add-cont + .add-cont {margin-left: 15px;}
.theme-table td .add-btn-area {
  display: inline-block;
  vertical-align: text-top;
}
.theme-table td .add-btn-area .btn-theme-line {
  position: relative;
  float: left;
  height: 26px;
  margin-top: -3px;
  padding: 0 6px;
  line-height: 26px;
  font-size: 12px;
  border-radius: 6px;
  background-color: #eee;
  cursor: pointer;
}
.theme-table td .add-btn-area .btn-theme-line:hover {background-color: #e5e5e5;}
.theme-table td .add-btn-area .btn-theme-line + .btn-theme-line {margin-left: 10px;}
.theme-table td .add-btn-area .btn-theme-line + .btn-theme-line.add-line {margin-left: 20px;}
.theme-table td .add-btn-area .btn-theme-line + .btn-theme-line.add-line::before {
  position: absolute;
  top: 0;
  left: -10px;
  content: '';
  border-left: 1px solid #ddd;
  height: 100%;
}

/* 게시판 내 sort-list-area 추가 */
th .sort-list-area.line-th {
  display: inline-block;
  position: relative;
  width: 10px;
  top: 2px;
  left: 2px;
  vertical-align: top;
}
th .sort-list-area.line-th .btn-sort {
  position: relative;
  overflow: hidden;
  float: left;
  width: 10px;
  height: 6px;
  /* text-indent: -9999px; */
  font-size: 0;
  cursor: pointer;
}
th .sort-list-area.line-th .btn-sort::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
th .sort-list-area.line-th .btn-sort.ascending::before {border-bottom: 6px solid #bbb;}
th .sort-list-area.line-th .btn-sort.descending::before {border-top: 6px solid #bbb;}
th .sort-list-area.line-th .btn-sort.ascending:hover::before,
th .sort-list-area.line-th .btn-sort.ascending.on::before {
  border-bottom: 6px solid #222;
}
th .sort-list-area.line-th .btn-sort.descending:hover::before,
th .sort-list-area.line-th .btn-sort.descending.on::before {
  border-top: 6px solid #222;
}
th .sort-list-area.line-th .btn-sort + .btn-sort {margin-top: 2px;}

/* label-value-cont 추가 */
table .label-value-cont .add-cont + .add-cont {margin-left: 12px;}
table .label-value-cont .add-cont .cont-tt {
  margin-right: 8px;
  color: #aaa;
}

/* 테마형 버튼 스타일 추가 */
.tbl-basic td .add-btn-area.theme .btn-theme-line {
  position: relative;
  float: left;
  height: 26px;
  margin-top: -3px;
  padding: 0 6px;
  line-height: 26px;
  font-size: 12px;
  border-radius: 6px;
  background-color: #eee;
  cursor: pointer;
}
.tbl-basic td .add-btn-area.theme .btn-theme-line:hover {background-color: #e5e5e5;}
.tbl-basic td .add-btn-area.theme .btn-theme-line + .btn-theme-line {margin-left: 10px;}
.tbl-basic td .add-btn-area.theme .btn-theme-line + .btn-theme-line.add-line {margin-left: 20px;}
.tbl-basic td .add-btn-area.theme .btn-theme-line + .btn-theme-line.add-line::before {
  position: absolute;
  top: 0;
  left: -10px;
  content: '';
  border-left: 1px solid #ddd;
  height: 100%;
}

/* tdody 스크롤 추가 */
.tbl-scroll {
  overflow-y: auto;
  height: 200px;
  padding-top: 0 !important;
  border-top: 2px solid #ddd;
}
.tbl-scroll table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.tbl-scroll table thead tr th {
  position: sticky;
  top: 0;
}
.tbl-scroll table thead tr th::before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #f2f2f2;
}


/* --- form --- */
input::-webkit-input-placeholder {color: #999;}
input::-moz-placeholder {color: #999;}
input:-moz-placeholder {color: #999;}
input:-ms-input-placeholder {color: #999;}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border: 1px solid #999;
}
*[disabled]:focus,
*[readonly]:focus {
  border: 1px solid #ddd;
}
input.error,
select.error,
textarea.error,
input.error:focus,
select.error:focus,
textarea.error:focus {
  /* text-decoration: underline;
  text-decoration-style: dashed; */
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
  background-color: rgba(255, 37, 58, .05);
}
.inp-area,
.slt-area {
  display: inline-block;
  position: relative;
}
.inp {
  font-family: "SCD-4";
  height: 25px;
  padding-left: 8px;
  /* padding-right: 8px; */
  font-size: 14px;
  /* line-height: 25px; */
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
}
table .inp,
.upload-area .inp {
  height: 25px;
  /* line-height: 25px; */
}
.inp.wid-100-bo-box {
  width: 100%;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
}
.inp.wid-basic {width: 120px;}
.inp.txt-cen {padding-right: 8px;}
.period-box > *,
.btn-box > * {
  display: inline-block;
  vertical-align: middle;
}
.period-box .period-area {
  margin-left: 5px;
  padding-left: 8px;
  border-left: 1px solid #eee;
}
.period-area .inp {width: 82px;}
.inp.inp-btn {padding-right: 30px;}
.inp.inp-btn.wid-on {width: calc(100% - 40px);}
.disabled-box {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  margin: 3px 0;
  padding: 5px 8px;
  line-height: 21px;
  font-family: "굴림",gulim,sans-serif;
  font-size: 14px;
  color: #555;
  border: 1px solid #ddd;
  background-color: #eee;
  box-sizing: border-box;
}
table .disabled-box {width: calc(100% - 10px);}
.in-password {position: relative;}
.in-password .inp {padding-right: 38px;}
.in-password .inp.wid-100 {width: calc(100% - 48px);}
.in-password .btn-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.in-password .btn-toggle::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/ico-eye1-close.svg') 50% calc(50% + 1px) no-repeat;
  background-size: 21px;
}
.in-password.open .btn-toggle::before {
  background: url('../images/ico-eye1-open.svg') 50% 50% no-repeat;
  background-size: 23px;
}
.slt {
  position: relative;
  width: calc(100% - 40px);
  /* min-width: 60px; */
  height: 27px;
  padding: 0 30px 0 8px;
  line-height: 27px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* background: url('../images/bg-slt.png') calc(100% - 9px) 50% no-repeat;
  background-color: #fff; */
  z-index: 20;
}
table .slt {
  height: 27px;
  line-height: 27px;
}
.slt-area.wid-100 {width: 100%;}
.slt-area.wid-min {width: 60px;}
.slt-area.wid-basic {width: 160px;}
.slt-area.wid-wide {width: 200px;}
.modal-body .slt-area.wid-100 {width: calc(100% - 10px);}
.slt-area.wid-100 .slt {width: calc(100% - 40px);}
.slt-area::after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #fff;
  z-index: 5;
}
.slt-area.disabled::after {background-color: #eee;}
.slt + i {
  /* margin: 2px 2px 0 0; */
  font-weight: 600;
  font-size: 14px;
  color: #222;
  z-index: 10;
}
.tbl-btn:hover,
/* .slt-area .slt:hover, */
.tbl-btn.on,
.slt-area .slt.on {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.5);
}
/* .slt:hover + i::before, */
.slt.on + i::before {
  color: #0e5ce9;
}
textarea::-webkit-input-placeholder {color: #999;}
textarea::-moz-placeholder {color: #999;}
textarea:-moz-placeholder {color: #999;}
textarea:-ms-input-placeholder {color: #999;}
textarea {
  /* width: 100%; */
  margin: 8px 0;
  padding: 8px;
  font-family: "SCD-4";  
  line-height: 18px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
table td textarea.wid-100 {
  width: calc(100% - 8px);
  box-sizing: border-box;
}


/* --- checkbox --- */
.tbl-total .checkbox-area,
.tbl-center .checkbox-area,
.inp + .checkbox-area,
div + .checkbox-area {
  margin: 0;
}
.checkbox-area {
  display: inline-block;
  /* margin: 0 8px 0 -10px; */
  margin: 0 8px 0 0;
}
.checkbox-area .bo-r {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ddd;
}
.checkbox-area .bo-l {
  /* margin-left: 10px; */
  padding-left: 10px;
  border-left: 1px solid #ddd;
}
.tbl-basic .checkbox-area.right {
  position: absolute;
  top: 5px;
  right: 0;
  margin-right: 0;
}
.checkbox-area * {
  /* float: left; */
  display: inline-block;
  /* margin-left: 10px; */
  margin-right: 10px;
}
/* .checkbox-area *:first-child {margin-left: 0;} */
.checkbox-area *:last-child {margin-right: 0;}
.checkbox-area::after {
  display: block;
  content: '';
  clear: both;
}
input[type=checkbox] { 
  opacity: 0; 
  position: absolute; 
  width: 16px; 
  height: 16px; 
}
input[type=checkbox] + .check-label {
  position: relative; 
  height: 16px;
  padding-left: 22px;
  cursor: pointer;
}
.sentence input[type=checkbox] + .check-label {
  margin: 0;
  padding-left: 26px;
}
input[type=checkbox]:checked + .check-label::before, 
input[type=checkbox]:checked + .check-label::after {
  content: '';
  left: 0;
  position: absolute;
}
input[type=checkbox]:checked + .check-label::before {
  top: 2px;
  left: 0;
  width: 4px;
  height: 8px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #0e5ce9;
  border-bottom: 2px solid #0e5ce9;
  background-color: transparent;
  z-index: 10;
  transform: rotate(39deg);
  -webkit-transform: rotateZ(39deg);
  transform: rotateZ(39deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  border-radius: 2px;
}
.check-red input[type=checkbox]:checked + .check-label::before {
  border-right: 2px solid #ff4c5d;
  border-bottom: 2px solid #ff4c5d;
}
input[type=checkbox]:checked + .check-label::after {
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #0e5ce9;
  border-radius: 4px;
  background-color: #fff;
  z-index: 0;
}
.check-red-bg input[type=checkbox]:checked + .check-label::after {
  border: 1px solid #ff4c5d;
  background-color: #ff4c5d;
}
.check-red input[type=checkbox]:checked + .check-label::after {
  border: 1px solid #ddd;
  background-color: #fff;
}
input[type=checkbox] + .check-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  z-index: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
input[type=checkbox] + .check-label.disabled::before, 
input[type=checkbox] + .check-label.readonly::before,
input[type=checkbox] + .check-label.disabled::after, 
input[type=checkbox] + .check-label.readonly::after {
  background-color: #eee;
}
input[type=checkbox]:checked + .check-label.disabled::before, 
input[type=checkbox]:checked + .check-label.readonly::before {
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #eee;
}
input[type=checkbox]:checked + .check-label.disabled::after, 
input[type=checkbox]:checked + .check-label.readonly::after {
  border: 1px solid #ddd;
  background-color: #eee;
}


/* --- radio --- */
.radio-area {
  display: inline-block;
  margin-right: 8px;
}
.radio-area.no-label {
  overflow: hidden;
  width: 17px;
}
.radio-area .radio-label {margin-right: 10px;}
.radio-area .radio-label:last-child {margin-right: 0;}
input[type=radio] { 
  opacity: 0; 
  position: absolute;
}
input[type=radio] + .radio-label {
  position: relative;
  padding-left: 22px;
  cursor: pointer;
}
input[type=radio]:checked + .radio-label::before, 
input[type=radio]:checked + .radio-label::after {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
}
input[type=radio]:checked + .radio-label::before {background-color: transparent;}
input[type=radio]:checked + .radio-label::after {
  top: 5px;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #0e5ce9;
  background-color: #0e5ce9;
  box-sizing: border-box;
  z-index: 0;
}
input[type=radio] + .radio-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  z-index: 0;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 50%;
}
input[type=radio] + .radio-label.disabled,
input[type=radio] + .radio-label.readonly {
  cursor: no-drop;
}
input[type=radio] + .radio-label.disabled::before, 
input[type=radio] + .radio-label.readonly::before,
input[type=radio] + .radio-label.disabled::after, 
input[type=radio] + .radio-label.readonly::after {
  background-color: #eee;
}
input[type=radio]:checked + .radio-label.disabled::before, 
input[type=radio]:checked + .radio-label.readonly::before {
  border-color: #eee;
  background-color: #eee;
}
input[type=radio]:checked + .radio-label.disabled::after, 
input[type=radio]:checked + .radio-label.readonly::after {
  border: 1px solid #bbb;
  background-color: #bbb;
}

/* tbl-tt 라인에 추가 */
.tbl-tt .radio-area {margin-left: 15px;}
.tbl-tt .radio-area input[type=radio] + .radio-label {line-height: 1;}
.tbl-tt .radio-area input[type=radio] + .radio-label::before,
.tbl-tt .radio-area input[type=radio]:checked + .radio-label::after {
  margin-top: -1px;
}


/* --- btn --- */
/* - 기본효과 - */
button {position: relative;}
button::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(255,255,255,.2);
  opacity: 0;
  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}
button:hover::after {opacity: 1;}
button.disabled {
  opacity: .2;
  cursor: no-drop;
}
.btn-hover {position: relative;}
.btn-hover::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(255,255,255,.2);
  opacity: 0;
  -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  transition: opacity 0.15s, -webkit-transform 0.15s, -moz-transform 0.15s, -o-transform 0.15s, transform 0.15s;
}
.btn-hover:hover::after {opacity: 1;}

/* - 추가 - */
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes flash {
  0%, 40%, 80% {
    opacity: 0;
  }
  20%, 60%, 100% {
    opacity: 1;
  }
}
@keyframes flash {
  0%, 40%, 80% {
    opacity: 0;
  }
  20%, 60%, 100% {
    opacity: 1;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInSide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
  }
}
@keyframes fadeInSide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
  }
}
.fadeInSide {
  -webkit-animation-name: fadeInSide;
  animation-name: fadeInSide;
}

@-webkit-keyframes fadeInMsg {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
  30% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: .9;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: .7;
  }
}
@keyframes fadeInMsg {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
  30% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: .9;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: .7;
  }
}
.fadeInMsg {
  -webkit-animation-name: fadeInMsg;
  animation-name: fadeInMsg;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes shake2 {
  0%, 50%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25%, 75% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
}
@keyframes shake2 {
  0%, 50%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  25%, 75% {
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px);
  }
}
.shake2 {
  -webkit-animation-name: shake2;
  animation-name: shake2;
}

@-webkit-keyframes opacity {
  0%, 100% {opacity: 0;} 
  50% {opacity: 1;}
} 
@keyframes opacity {
  0%, 100% {opacity: 0;} 
  50% {opacity: 1;}
}
.opacity {
  -webkit-animation-name: opacity;
  animation-name: opacity;
}

@-webkit-keyframes animate-line {
  0%, 100% {top: 0%;}
  50% {top: 100%;}
}
@keyframes animate-line {
  0%, 100% {top: 0%;}
  50% {top: 100%;}
}
.animate-line {
  -webkit-animation-name: animate-line;
  animation-name: animate-line;
}

/* - 기본 - */
.btn-area {
  display: block;
  position: relative;
  /* overflow: hidden; */
  text-align: center;
}
.btn-area::after {
  display: block;
  content: '';
  clear: both;
}
.btn-area.flex-end {
  display: flex;
  justify-content: flex-end;
}
.btn-area.po-r,
.btn-area.right {
  position: absolute;
  top: 0;
  right: 0;
}
.btn-area.bo-top {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid #eee;
}
/* .btn-area button + button,
.btn-area .tbl-op + button,
.btn-area .btn-op + button,
.btn-area button + .btn-op {
  margin-left: 5px;
} */
/* .btn-area button,
.btn-area .btn-op, */
body .wrap .btn-area .btn-fl-left > *,
body .wrap .btn-area .btn-fl-right > *:not(.btn-set,.add-line),
body .modal .btn-area .btn-fl-left > *,
body .modal .btn-area .btn-fl-right > *:not(.btn-set,.add-line),
.file-area .btn-area > *,
.content-tt + .tbl-basic .tbl-top .btn-area > *:not(.add-line) {
  margin-left: 5px;
}
/* .btn-area button:first-child,
.btn-area .btn-op:first-child, */
body .wrap .btn-area .btn-fl-left > *:first-child,
body .wrap .btn-area .btn-fl-right > *:first-child,
body .modal .btn-area .btn-fl-left > *:first-child,
body .modal .btn-area .btn-fl-right > *:first-child,
.file-area .btn-area > *:first-child,
.content-tt + .tbl-basic .tbl-top .btn-area > *:first-child {
  margin-left: 0;
}
.btn-area button.add-line,
.btn-area .btn-op.add-line {margin-left: 16px;}
.btn-area button.add-line::before,
.btn-area .btn-op.add-line::before {
  position: absolute;
  top: 0;
  left: -10px;
  content: '';
  height: 100%;
  border-left: 1px solid #ddd;
}
.btn-area div.in-btn {display: inline-block;}
.btn-area > * {align-items: center;}
.btn-fl-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  float: left;
}
.btn-fl-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  float: right;
}
.btn-center {display: inline-block;}
.btn-po-left {
  position: absolute;
  top: 0;
  left: 0;
}
.btn-po-right {
  position: absolute;
  top: 0;
  right: 0;
}
.btn-inp,
.btn-slt {
  position: absolute;
  cursor: pointer;
}
.btn-inp {
  top: 2px;
  right: 4px;
  font-size: 24px;
}
.btn-inp.ico-uni-search {
  top: 4px;
  right: 6px;
  font-size: 21px;
}
.btn-slt {
  top: 7px;
  right: 7px;
}
.btn-inp:hover {color: #0e5ce9;}
.btn-tbl-in {
  height: 27px;
  padding: 0 9px;
  /* vertical-align: inherit; */
  font-family: "SCD-4";
  font-size: 13px;
  line-height: 27px;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.btn-tbl-in i {margin-top: 2px;}
.btn-area .btn-set {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #ddd;
}
.btn-area .btn-set button + button {margin-left: -5px;}
.tbl-btn {
  position: relative;
  display: inline-block;
  height: 27px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 27px;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.btn-s .tbl-btn {
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  color: #999;
  background-color: #fff;
}
.btn-s .tbl-btn.on {background-color: rgba(14,92,233,.05);}
.btn-s .tbl-btn i {
  margin: inherit;
  line-height: inherit;
  font-size: inherit;
}
.tbl-btn.quarter {
  min-width: 35px;
  text-align: center;
}
.tbl-btn-drop {position: relative;}
.tbl-btn-drop .tbl-btn {padding-right: 30px;}
.tbl-btn + ul {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  width: max-content;
  min-width: 50px;
  white-space: nowrap;
  padding: 10px;
  border: 1px solid rgba(14,92,233,.5);
  border-radius: 4px;
  background-color: #fff;
  z-index: 25;
}
.tbl-btn.on + ul {display: block;}
.tbl-btn + ul li:hover {
  color: #0e5ce9;
  cursor: pointer;
}
.tbl-btn + ul li + li {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #ddd;
}
.tbl-btn-drop i {
  /* margin: 2px 2px 0 0; */
  font-weight: 600;
  color: #222;
}
.tbl-btn:hover + ul + i
.tbl-btn.on + ul + i {
  color: #0e5ce9;
}
.tbl-btn .ico-uni-arrow-line-up:before,
.tbl-btn .ico-uni-arrow-line-down:before {
  margin-top: -2px;
  line-height: 18px;
  font-weight: bold;
  font-size: 18px;
}
.btn-area .tbl-op {
  display: inline-block;
  margin-right: 0;
}
.tbl-top .btn-area .tbl-op{margin: 0 6px;}
.btn-help {
  position: relative;
  margin-left: 8px;
  padding: 2px 6px;
  vertical-align: middle;
  font-size: 12px;
  color: #fff;
  border-radius: 25px;
  background-color: #3cb878;
  cursor: pointer;
}
.btn-help:hover {opacity: .9;}
.btn-help.bg-c1 {background-color: #88a9b9;}
.btn-side {
  position: relative;
  height: 30px;
  padding: 0 12px;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
}
.btn-side:hover {opacity: .9;}

/* - size - */
.btn-xs {
  height: 19px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 19px;
  font-size: 12px;
  color: #fff;
  border-radius: 8px;
}
span.btn-xs {
  display: inline-block;
  height: 19px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 19px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-s {
  height: 29px;
  padding: 0 12px;
  font-family: "SCD-4";
  line-height: 29px;
  font-size: 13px;
  color: #fff;
  border-radius: 8px;
}
.btn-m {
  height: 32px;
  padding: 0 13px;
  font-family: "SCD-4";
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  border-radius: 12px;
}
.btn-l {
  height: 32px;
  padding: 0 13px;
  font-family: "SCD-4";
  line-height: 32px;
  font-size: 14px;
  color: #fff;
  border-radius: 12px;
}
.btn-xs i {
  margin: -3px 5px 0 0;
  line-height: 13px;
  font-size: 13px;
}
.btn-s i {
  margin: -3px 5px 0 0;
  line-height: 15px;
  font-size: 15px;
}
.btn-m i {
  margin: -2px 5px 0 0;
  line-height: 17px;
  font-size: 17px;
}
.btn-l i {
  margin: -4px 5px 0 0;
  line-height: 19px;
  font-size: 19px;
}
.btn-xs:not(.ico-only) i,
.btn-s:not(.btn-op .btn-s,.btn-s.ico-only) i,
.btn-m:not(.btn-op .btn-m,.sort-list-area .btn-m) i,
.btn-l i,
.btn-tbl-in i {display: none !important;}
.btn-c1-bg i {display: none;}

/* - color - */
.btn-c1-line {
  color: #0e5ce9;
  border: 1px solid #0e5ce9;
}
.btn-red-line {
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
}
.btn-blue-line {
  color: #0e5ce9;
  border: 1px solid #0e5ce9;
}
.btn-navy-line {
  color: #2F79A6;
  border: 1px solid #2F79A6;
}
.btn-555-line {
  color: #555d60;
  border: 1px solid #555d60;
}
.btn-777-line {
  color: #777f85;
  border: 1px solid #777f85;
}
.btn-aaa-line {
  color: #999;
  border: 1px solid #aaa;
}
.btn-no-line {
  color: #222;
  border: transparent;
}
.btn-c1-line i,
.btn-red-line i,
.btn-555-line i,
.btn-777-line i,
.btn-aaa-line i,
.btn-no-line i {
  font-weight: 600;
}
.btn-c1-line i::before,
.btn-red-line i::before,
.btn-555-line i::before,
.btn-777-line i::before,
.btn-aaa-line i::before,
.btn-no-line i::before {
  font-weight: 600;
}
.btn-c1-bg {
  background-color: #0e5ce9;
  border: 1px solid #0e5ce9;
}
.btn-red-bg {
  background-color: #ff4c5d;
  border: 1px solid #ff4c5d;
}
.btn-555-bg {
  color: #fff;
  background-color: #555d60;
  border: 1px solid #555d60;
}
.btn-777-bg {
  color: #fff;
  background-color: #777f85;
  border: 1px solid #777f85;
}
.btn-999-bg {
  color: #fff;
  background-color: #777f85;
  border: 1px solid #777f85;
}
.btn-org2-bg {
  color: #fff;
  background-color: #ff8b00;
  border: 1px solid #ff8b00;
}
.btn-c.btn-search {
  color: #fff;
  background-color: #464b5b;
  border: 1px solid #464b5b;
}

/* - icon only - */
.btn-xs.ico-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 14px; */
  width: 13px;
  height: 18px;
  /* padding: 0 4px; */
  padding: 0 3px;
}
.btn-s.ico-only {
  width: 19px;
  height: 27px;
  padding: 0 4px;
  line-height: inherit;
}
.btn-s.ico-only.ico-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slt-user .btn-s.ico-only {
  width: 16px;
  height: 24px;
}
.ico-only i {
  display: flex;
  margin: 0;
  font-size: 14px;
}
.ico-only i.ico-uni-arrow-line-up,
.ico-only i.ico-uni-arrow-line-down {
  font-size: 20px;
}
.ico-only i::before {
  font-weight: 600;
}
.ico-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.ico-btn i {
  font-size: 25px;
  cursor: pointer;
}
.ico-btn i:hover {
  color: #0e5ce9;
}
.tbl-ico-btn i {
  font-size: 25px;
  cursor: pointer;
  color: #555;
}
.tbl-ico-btn i:hover {
  color: #0e5ce9;
}
.tbl-ico-btn i.ico-uni-search {font-size: 24px;}
.tbl-ico-btn-line {
  display: inline-block;
  width: 27px;
  height: 27px;
  text-align: center;
  line-height: 27px;
  border-radius: 6px;
  /* box-sizing: border-box; */
  cursor: pointer;
}
.tbl-ico-btn-line i.ico-uni-search {
  margin-top: -4px;
  font-size: 18px;
}

/* step 버튼 */
.btn-area.btn-step button {position: relative;}
.btn-area.btn-step button::before {
  position: absolute;
  top: 0;
  font-family: "unifont";
  font-size: 32px;
}
.btn-area.btn-step .btn-prev {padding-left: 40px;}
.btn-area.btn-step .btn-prev::before {
  left: 5px;
  content: '\e84b';
}
.btn-area.btn-step .btn-next {padding-right: 40px;}
.btn-area.btn-step .btn-next::before {
  right: 5px;
  content: '\e84c';
}

/* 테이블 내 아이콘 버튼 */
.tbl-ico-box {
  position: relative;
  display: inline-block;
  width: 27px;
  height: 27px;
  line-height: 27px;
  color: #999;
  cursor: pointer;
}
.tbl-ico-box:hover {color: #222;}
.tbl-ico-box::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'unifont';
  font-size: 27px;
}
.tbl-ico-box.btn-view::before {content: '\e8e6';}
.tbl-ico-box.btn-memo::before {content: '\e80f';}
.tbl-ico-box.btn-delete::before {content: '\e80b';}
.tbl-ico-box.btn-delete2::before {content: '\e86e';}
.tbl-ico-box.btn-download::before {content: '\e851';}
.tbl-ico-box.btn-mass-transfer::before {content: '\e8ee';}

/* 테이블 내 아이콘 버튼2 */
.tbl-add-btn {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  color: #2F79A6;
  border-radius: 50%;
  background-color: rgba(47,121,166,.1);
  cursor: pointer;
}
.tbl-add-btn.btn-delete {
  color: #ff4c5d;
  background-color: rgba(255,76,93,.1);
}
.tbl-add-btn:hover {
  color: #fff;
  background-color: rgba(47,121,166,.7);
}
.tbl-add-btn.btn-delete:hover {background-color: rgba(255,76,93,.7);}
.tbl-add-btn::before {
  display: inline-block;
  font-family: 'unifont';
  font-weight: bold;
  font-size: 12px;
}
.tbl-add-btn.btn-delete::before {content: '\e80b';}

/* 옵션 버튼 추가 */
.btn-op {
  display: inline-block;
  position: relative;
}
.btn-op button {padding: 0 2px 0 8px;}
.btn-op button i {margin-left: 5px;}
.btn-op .btn-op-in {
  position: absolute;
  top: 30px;
  left: 0;
  min-width: calc(100% - 2px);
  text-align: left;
  line-height: 22px;
  white-space: nowrap;
  font-size: 13px;
  border: 1px solid #555;
  border-radius: 8px;
  background-color: #fff;
  z-index: 100;
  animation: fadeIn .5s ease-in-out 1;
}
.btn-op .btn-m + .btn-op-in {
  top: 33px;
  line-height: 24px;
}
.btn-op .btn-op-in ul li {
  padding: 4px 12px;
  cursor: pointer;
}
.btn-op .btn-op-in ul li:hover {
  background-color: rgba(14,92,233,.1);
}
.btn-op .btn-op-in ul li + li {border-top: 1px solid #f5f5f5;}
.btn-op.c1 button,
.btn-op.c1 .btn-op-in {
  color: #0e5ce9;
  border-color: #0e5ce9;
}

/* 타이틀과 동일 라인 버튼 추가 */
.in-btn-area {position: relative;}
.in-btn-area .btn-area {top: -5px;}
.in-btn-area .btn-area .checkbox-area {
  margin-top: 5px;
  font-size: 13px;
}
.in-btn-area .btn-area .checkbox-area label {margin-left: inherit;}

/* 그리드 내부 버튼 추가 */
.btn-area.in-grid {
  position: absolute;
  z-index: 1;
  top: inherit;
  right: 25px;
  bottom: 25px;
  border: 0;
}
.btn-area.in-grid .btn-upsize,
.btn-area.in-grid .btn-downsize {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  border-radius: 50%;
  background-color: #0e5ce9;
  cursor: pointer;
  opacity: .4;
}
.btn-area.in-grid .btn-upsize:hover,
.btn-area.in-grid .btn-downsize:hover {
  opacity: 1;
}
.btn-area.in-grid .btn-upsize::before,
.btn-area.in-grid .btn-downsize::before {
  display: inline-block;
  margin-left: -2px;
  font-family: "unifont";
  font-size: 35px;
}
.btn-area.in-grid .btn-upsize::before {content: '\e858';}
.btn-area.in-grid .btn-downsize::before {content: '\e857';}

/* 아이콘 이미지 추가 - 현재 h32 버튼에만 해당 */
/* .btn-ico {padding-left: 35px;} */
.btn-ico .ico {
  display: none;
  position: absolute;
  top: 0;
  left: 10px;
}
.btn-ico .ico::before {
  display: inline-block;
  font-family: "unifont";
  font-size: 22px;
}
.btn-ico .ico.fin::before {content: '\e811';}
.btn-ico .ico.preview::before {content: '\e8e6';}
.btn-ico .ico.list::before {
  content: '\e8e8';
  font-size: 19px;
}

/* 양식작성 상단 버튼 스크롤 시 고정 */
section .btn-area.top-fixed.fixed {
  position: fixed !important;
  top: 60px !important;
  right: 0 !important;
  width: calc(100% - 220px);
  padding: 13px 40px 12px;
  /* border-bottom: 1px solid #ddd; */
  background-color: rgba(255,255,255,.9);
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  z-index: 100;
  /* transition: top 0.2s !important; */
}
.menu-nav-bar.top + section .btn-area.top-fixed.fixed,
.menu-nav-bar.side.side-off + section .btn-area.top-fixed.fixed {
  width: 100%;
}
.menu-nav-bar.top + section .btn-area.top-fixed.fixed {top: 120px !important;}


/* --- tab --- */
.tab-area {
  position: relative;
  margin-bottom: 20px;
}
.tab-area .btn-area:first-child {
  position: absolute;
  top: 0;
  right: 0;
}
.tab-area.tab-02 {margin-bottom: 5px;}
.tab-area.tab-01 ul li {
  display: inline-block;
  padding-bottom: 5px;
  font-size: 16px;
  /* border-bottom: 2px solid #f6f6f8; */
  border-bottom: 2px solid rgba(255,255,255,0);
  cursor: pointer;
}
.tab-area.tab-01 ul li:hover,
.tab-area.tab-01 ul li.on {
  color: #0e5ce9;
  border-bottom: 2px solid #0e5ce9;
}
.tab-area.tab-01 ul li:hover a,
.tab-area.tab-01 ul li.on a {
  color: #0e5ce9;
}
.tab-area.tab-01 ul li + li {margin-left: 20px;}
.tab-area.tab-02 ul {border-bottom: 1px solid #ddd;}
.tab-area.tab-02 ul li {
  display: inline-block;
  padding: 7px 11px;
  font-size: 14px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 1px solid #ddd;
  border-radius: 10px 10px 0 0;
  background-color: transparent;
  cursor: pointer;
}
.tab-area.tab-02 ul li:hover,
.tab-area.tab-02 ul li.on {
  color: #0e5ce9;
  border-color: #ddd;
  /* border-bottom: 1px solid #f6f6f8; */
  border-bottom: 1px solid #fff;
}
.tab-area.tab-02 ul li + li {margin-left: 0;}
.tab-area.tab-03 ul li {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  font-size: 15px;
  border-radius: 10px;
  background-color: #eee;
  cursor: pointer;
}
.tab-area.tab-03 ul li:hover,
.tab-area.tab-03 ul li.on {
  color: #fff;
  background-color: #0e5ce9;
}
.tab-area.tab-03 ul li.on::before {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 7px);
  content: '';
  border-top: 6px solid #0e5ce9;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.tab-area.tab-03 ul li:hover a,
.tab-area.tab-03 ul li.on a {
  color: #fff;
}
.tab-area.tab-03 ul li + li {margin-left: 2px;}
.tab-result {
  position: relative;
  overflow: hidden;
}
.tab-result .help-msg {
  float: left;
  line-height: 36px;
}
.tab-result .help-msg + .grid-area {margin-top: 31px;}
.tab-result .help-msg::after {
  display: block;
  content: '';
  clear: both;
}
.tab-area + .tab-line::after {
  display: block;
  content: '';
  clear: both;
}
.tab-area + .tab-line .tbl-top {
  float: right;
  margin-top: -34px;
}


/* --- file uploader--- */
.tbl-basic .file-uploader:first-child {margin-top: 10px;}
.content-tt + div .tbl-basic .file-uploader {margin-top: 10px;}
.file-uploader {
  position: relative;
  overflow: hidden;
  /* border-top: 1px solid #999; */
  background-color: #fff;
}
.file-uploader .result-count {
  position: absolute;
  top: 0;
  right: 0;
}
.uploader-area {
  clear: both;
  margin-top: -1px;
}
.uploader-area .uploader-header {
  position: relative;
  height: 38px;
  border: 1px solid #eee;
  border-left: 0;
  border-right: 0;
  background-color: #fcfcfc;
}
.uploader-area .uploader-header span {
  position: absolute;
  top: 10px;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
}
.uploader-area .uploader-header span + span {border-left: 1px solid #ddd;}
/* .uploader-area .uploader-header span:nth-child(1) {
  left: 0;
  width: 10%;
} */
.uploader-area .uploader-header span:nth-child(1) {
  left: calc(0% - 3px);
  width: 40%;
}
.uploader-area .uploader-header span:nth-child(2) {
  left: calc(40% - 5px);
  width: 30%;
}
.uploader-area .uploader-header span:nth-child(3) {
  left: calc(70% - 5px);
  /* width: calc(30% - 15px); */
  width: 30%;
}
.uploader-area .uploader-body {
  min-height: 43px;
  margin-top: -1px;
  /* overflow-y: scroll; */
  border: 1px solid #eee;
  border-left: 0;
  border-right: 0;
}
.user-set .uploader-area .uploader-body {overflow-y: hidden;}
.uploader-file-info {border-bottom: 1px solid #eee;}
li:last-child .uploader-file-info {border-bottom: 0;}
.uploader-file-info span {
  display: inline-block;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #555;
  vertical-align: middle;
}
.uploader-file-info span .checkbox-area {margin-top: 8px;}
/* .uploader-file-info span:nth-child(1) {width: 10%;} */
.uploader-file-info span:nth-child(1) {
  overflow: hidden;
  width: calc(40% - 25px);
  padding-left: 20px;
  text-align: left;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.uploader-file-info span:nth-child(2) {width: 30%;}
.uploader-file-info span:nth-child(3) {width: calc(30% - 12px);}
/* .user-set .uploader-file-info span:nth-child(2) {
  width: 30%;
  margin-left: -10px;
}
.user-set .uploader-file-info span:nth-child(3) {
  width: 30%;
  margin-left: -10px;
} */
.uploader-file-info span button {line-height: normal;}
.file-uploader .tab-result {
  height: 22px;
  padding: 8px;
  border: 1px solid #eee;
  border-left: 0;
  border-right: 0;
  background-color: #fcfcfc;
}
.file-uploader .tab-result .result-count {
  top: 10px;
  right: 10px;
}
.content-box .row-box .upload-file .file-uploader {margin-top: 0;}
.upload-file .file-uploader .tab-result {padding: 5px;}
.upload-file .file-uploader .tab-result .result-count {
  top: 9px;
  font-size: 12px;
  color: #999;
}
.upload-file .file-uploader .tab-result .result-count span {color: #222;}
.upload-file .file-uploader .uploader-header {height: 34px;}
.upload-file .file-uploader .uploader-header span {top: 7px;}
.upload-file .file-uploader .uploader-body {min-height: 90px;}
.user-set .upload-file .file-uploader .uploader-body {min-height: 31px;}
.upload-file .file-uploader .uploader-body .uploader-file-info {border: 0;}
.upload-file .uploader-file-info span {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
}
.upload-file .file-uploader .uploader-file-info button {
  padding: 0 3px;
  line-height: normal;
  /* border: 1px solid transparent; */
}
.upload-file .file-uploader .uploader-file-info button.btn-c1-line:hover {
  border-color: #0e5ce9;
}
.upload-file .file-uploader .uploader-file-info button.btn-red-line:hover {
  border-color: #ff4c5d;
}
.upload-file .file-uploader .uploader-file-info button.btn-555-line:hover {
  border-color: #555;
}
.upload-file .file-uploader button i {
  font-size: 14px;
  /* margin-top: -4px; */
}

/* 파일 영역 숨김 */
.upload-area.file-none {
  display: flex;
  justify-content: center;
}
.upload-area.file-none input[type=file] {display: none;}


/* --- modal --- */
.modal-backdrop.in {
  /* filter: alpha(opacity=50); */
  opacity: .5;
}
.modal-dialog {width: 1200px;}
.modal.wid-1100 .modal-dialog {width: 1100px;}
.modal.wid-1000 .modal-dialog {width: 1000px;}
.modal.wid-950 .modal-dialog {width: 950px;}
.modal.wid-900 .modal-dialog {width: 900px;}
.modal.wid-800 .modal-dialog {width: 800px;}
.modal.wid-750 .modal-dialog {width: 750px;}
.modal.wid-700 .modal-dialog {width: 700px;}
.modal.wid-600 .modal-dialog {width: 600px;}
.modal.wid-500 .modal-dialog {width: 500px;}
.modal.wid-400 .modal-dialog {width: 400px;}
.modal.wid-300 .modal-dialog {width: 300px;}
.modal-content {
  /* overflow: hidden; */
  border: 0;
  border-radius: 20px;
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.2);
  box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
/* .modal-content::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  content: '';
  background-color: #0e5ce9;
} */
.modal-system-set-guide .modal-content::before {display: none;}
.modal-header {
  position: relative;
  padding: 18px 30px;
  border-bottom: 1px solid #fff;
  border-radius: 20px 20px 0 0;
  background-color: #f6f6f8;
}
.modal-title {
  margin: 0;
  line-height: inherit;
  font-family: "SCD-5";
  font-size: 18px;
  /* color: #7e868d; */
  color: #222;
}
.modal-header .close-btn-box {
  position: absolute;
  top: 6px;
  right: 11px;
  padding: 5px;
  cursor: pointer;
}
.modal-header .close-btn-box i {font-size: 26px;}
.modal-header i.btn-close {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 26px;
  height: 26px;
  font-size: 26px;
  cursor: pointer;
}
.modal-header .close-btn-box:hover i::before,
i.btn-close:hover::before {
  font-weight: bold;
}
.modal-body {
  overflow: hidden;
  padding: 30px;
}
.overflow-none .modal-body {overflow: inherit;}
.modal-body > div + div {margin-top: 10px;}
.modal-body .content-box > *:first-child {margin-top: 0;}
.modal-body .btn-area + .content-box {margin-top: 15px;}
.modal-body .content-tt {font-size: 16px;}
.modal-body .content-tt i {
  margin-top: -4px;
  margin-right: 5px;
  font-size: 16px;
  font-weight: 600;
  color: #0e5ce9;
}
.modal-body .tbl-basic:first-child .tbl-top {position: inherit;}
.modal-body .tbl-basic .tbl-top + .tbl-area {margin-top: 10px;}
.modal-body .tbl-basic .tbl-top.tt-s + .tbl-area {
  margin-top: 5px;
  padding-top: 10px;
}
.modal-body p + p {margin-top: 6px;}
.modal-body td .add-pd p {margin-top: 0;}
.modal-body .tbl-basic:first-child .tbl-area,
.modal-body .tbl-basic:first-child .grid-area,
.modal-body .tbl-basic:first-child .chart-area {
  padding-top: 0;
}
.modal-body .tbl-basic:first-child .btn-area + .tbl-area,
.modal-body .tbl-basic:first-child .btn-area + .grid-area,
.modal-body .tbl-basic:first-child .btn-area + .chart-area {
  padding-top: 10px;
}
.modal-body .tbl-basic:first-child .tbl-tt + .tbl-area,
.modal-body .tbl-basic:first-child .tbl-tt + .legend-area + .tbl-area {
  padding-top: 10px;
}
.modal-body .tbl-total:first-child, 
.modal-body .tbl-grid:first-child {
  margin-top: -20px;
}
.modal-body .tbl-total, 
.modal-body .tbl-grid {
  border: 0;
}
.modal-body .tbl-summary + .tbl-basic {margin-top: 10px;}
.modal-body .tbl-summary {
  overflow: hidden;
  position: relative;
  padding: 20px;
  line-height: 24px;
  border-radius: 15px;
  background-color: rgba(14,92,233,.05);
}
.modal-body .tbl-summary::before {
  position: absolute;
  right: 25px;
  top: 19px;
  width: 42px;
  height: 50px;
  content: '';
  background: url('../images/bg-noti-files-blue.svg') 0 0 no-repeat;
  background-size: 42px 50px;
  opacity: .15;
}
.modal-body .tbl-summary dl {overflow: hidden;}
.modal-body .tbl-summary dl + dl {margin-top: 5px;}
.modal-body .tbl-summary dl dt {
  float: left;
  width: 80px;
  color: #555;
}
.modal-body .tbl-summary dl dd {
  float: left;
  width: calc(100% - 80px);
  color: #0e5ce9;
}
.modal-body .tbl-summary.summary-explain dl dd {color: #777;}
.modal-body .tbl-basic.preview {margin-top: 0;}
.modal-body .tbl-basic.preview .tbl-area + .tbl-area {
  margin-top: -1px;
  padding-top: 0;
}
.modal-body .tbl-basic.preview .tbl-area.point {
  border: 1px dashed #0e5ce9;
  border-top: 0;
}
.modal-body .tbl-basic.preview .tbl-area.point tr:first-child th,
.modal-body .tbl-basic.preview .tbl-area.point tr:first-child td {
  border-top: 1px dashed #0e5ce9;
}
.modal-body .tbl-basic.preview .tbl-area.point table,
.modal-body .tbl-basic.preview .tbl-area.point + .tbl-area table {
  border-top: 0;
}
.modal-body .tbl-basic.preview .tbl-area.point + .tbl-area {margin-top: 0;}
.modal-body .tbl-basic.preview .tbl-area.point table th {
  background-color: rgba(14,92,233,.05);
}
.modal-body .card-memo {
  position: relative;
  padding: 20px;
  background-color: #FFF78D;
}
.modal-body .card-memo::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #ecdd13 #fff;
}
.modal-body .card-memo .card-memo-in {position: relative;}
.modal-body .card-memo .card-memo-in + .card-memo-in {
  margin-top: 20px;
  padding-top: 20px;
  /* border-top: 1px dashed #999; */
}
.modal-body .card-memo .card-memo-in + .card-memo-in::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, #777, #777 3px, transparent 0, transparent 5px);
}
.modal-body .card-memo .card-memo-in p:first-child {font-family: "SCD-5";}
.modal-body .noti-area {
  line-height: 26px;
  font-size: 16px;
}
.modal-body .noti-area .slt-box {
  margin-top: 8px;
}
.modal-footer {
  padding: 0 0 30px 0;
  text-align: center;
  border-top: 0;
}
.modal-header:after, .modal-header:before,
.modal-footer:after, .modal-footer:before {
  display: initial;
}
.modal-footer .btn-area {
  display: flex;
  justify-content: center;
  gap: 5px;
}

/* - modal basic white - */
body .modal-basic-w .modal-content {
  overflow: hidden;
  margin: 0 auto;
  border: 0;
  border-radius: 20px;
}
body .modal-basic-w .modal-header {
  padding: 0 20px;
  height: 62px;
  text-align: center;
  line-height: 62px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-sizing: border-box;
}
.modal-basic-w .modal-header .modal-title {
  font-family: 'SCD-5';
  font-size: 20px;
  color: #222;
}
.modal-basic-w .modal-header i.btn-close {
  top: calc(50% - 13px);
  font-size: 25px;
  color: #222;
  opacity: .4;
  animation: none;
}
.modal-basic-w .modal-header i.btn-close:hover {opacity: 1;}
.modal-basic-w .modal-header i.btn-close::before {font-weight: bold;}

/* - modal-in-modal - */
.modal-in {background-color: rgba(0,0,0,.2);}
.modal-in .modal-dialog {width: 600px;}
.modal-in .modal-content {border: 2px solid #fff;}
.modal-in .modal-content::before {display: none;}

/* - 결재선 - */
.modal-body .content-box.approval-line dl {margin-top: 15px;}
.modal-body .content-box .check-line {
  margin-bottom: 15px;
  padding: 20px;
  background-color: #f6f6f8;
}
/* .modal-body .content-box .check-line .check-label {margin-left: 20px;} */
.modal-body .org-chart {
  position: relative;
  margin-top: 0;
}
.modal-body .org-chart .inp-area {
  position: absolute;
  top: -6px;
  right: 0;
}
.modal-body .org-chart .inp-area.left {
  right: inherit;
  left: 80px;
}
/* .modal-body .org-chart .inp-area i {font-size: 24px;}
.modal-body .org-chart .inp-area i::before {font-weight: normal;} */
.modal-body .org-chart .inp-area + div {
  overflow: auto;
  height: 250px;
  margin-top: -11px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.org-chart .org-tree .org-level {margin-left: -.1em;}
.org-chart .org-tree,
.org-chart .org-tree ul {
  /* margin:0 0 0 1em; */
  padding:0;
  list-style:none;
  color:#222;
  position:relative;
}
.org-chart .org-tree ul {margin-left:.5em}
.org-chart .org-tree:before,
.org-chart .org-tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:4px;
  border-left:1px dashed #999;
}
.org-chart ul.org-tree:before {border-left:none}
.org-chart .org-tree li {
  margin: 0;
  /* padding:0 1.5em; */
  padding-left: 1.5em;
  line-height:2em;
  position:relative;
}
.org-chart .org-tree > li {padding-left: 1.2em;}
.org-chart .org-tree .org-level i,
.org-chart .org-tree .folder-level i,
.org-chart .org-tree .user-level i {
  margin: -4px 4px 0 2px;
  font-size: 22px;
}
.org-chart .org-tree i::before {font-weight: normal;}
.org-chart .org-tree .org-level i {color: #0e5ce9;}
.org-chart .org-tree .folder-level i {color: #f69325;}
.org-chart .org-tree .user-level i {color: #fec83e;}
.org-chart .org-tree div.on {background-color: #fffdde;}
.org-chart .org-tree div:hover {  
  background-color: #fffdde;
  cursor: pointer;
}
.org-chart .org-tree li:before {
  content: "";
  display: block;
  position: absolute;
  top: 1em;
  left: 4px;
  width: 10px;
  height: 0;
  margin-top: -1px;
  border-top: 1px dashed #999;
}
.org-chart ul.org-tree > li:before {border-top: none;}
.org-chart .org-tree li:last-child:before {
  height: auto;
  top: 1em; /* (line-height/2) */
  bottom: 0;
  background: #fff;
}

/* 결재선 변경본 jstree - 다른 위치에 첨부 */
/* .jstree ul li {
  line-height: 27px;
}
.jstree ul li:last-child {
  background-image: none;
}
.jstree .jstree-default .jstree-hovered {
  background: #fffdde;
  border-radius: 0;
  box-shadow: none;
}
.jstree .jstree-default .jstree-anchor {
  width: calc(100% - 30px);
}
.jstree .jstree-anchor > .jstree-themeicon {
  margin-right: 4px;
  font-style: normal;
}
.jstree .jstree-anchor > .jstree-themeicon.fa-user {
  margin-right: 0;
}
.jstree .jstree-anchor > .jstree-themeicon.fa-folder,
.jstree .jstree-anchor > .jstree-themeicson.fa-folder-open {
  margin-right: 3px;
}
.content-box .jstree i::before {
  font-weight: 100;
}
.jstree .fa-building::before {
  font-family: "unifont";
  content: "\e859";
  margin-left: -2px;
  font-size: 22px;
  color: #4196d4;
}
.jstree .fa-folder::before {
  font-family: "unifont";
  content: "\e85a";
  font-size: 22px;
  color: #f69325;
}
.jstree .fa-folder-open::before {
  font-family: "unifont";
  content: "\e8d0";
  font-size: 22px;
  color: #6fcbae;
}
.jstree .fa-user::before {
  font-family: "unifont";
  content: "\e83e";
  font-size: 22px;
  color: #fec83e;
} 
.jstree-default .jstree-last {
  background: transparent;
  background-image: none !important;
}
.jstree.jstree-default .jstree-search {
  font-style: inherit;
  color: inherit;
  font-weight: inherit;
} 
.jstree-node.jstree-closed > i.jstree-icon.jstree-ocl::before {
  display: inline-block;
  content: '\e89e';
  font-family: "unifont";
  font-size: 21px;
  font-style: normal;
  background-color: #fff;
  color: #0583f2;
}
.jstree-node.jstree-open > i.jstree-icon.jstree-ocl::before {
  display: inline-block;
  content: '\e8a0';
  font-family: "unifont";
  font-size: 21px;
  font-style: normal;
  background-color: #fff;
  color: #999;
} */

/* jstree - 결재 양식 폴더 트리 변경. 순서 변경 금지 */
.tree-chart .jstree-default .jstree-hovered {
  border-radius: 0;
  background: #fffdde;
  box-shadow: none;
}
.tree-chart .jstree-default .jstree-clicked {
  border-radius: 0;
  background: #fffaaa;
  box-shadow: none;
}
.tree-chart .jstree .jstree-anchor .fa-folder-open::before {
  font-family: "unifont";
  content: "\e85a";
  font-size: 22px;
  color: #ffa233;
}
.tree-chart .jstree .jstree-anchor .syscategory.fa-folder-open::before {color: #6fcbae;}
.tree-chart .jstree .jstree-open > .jstree-anchor .fa-folder-open::before {content: "\e85b";}
.tree-chart .jstree .jstree-anchor .document::before {
  font-family: "unifont";
  content: "\e8a5";
  font-size: 24px;
  font-style: normal;
  color: #acaded;
}
.tree-chart .jstree .jstree-anchor .n-document::before {
  font-family: "unifont";
  content: "\e8a5";
  font-size: 24px;
  font-style: normal;
  color: #bebec0;
}
.tree-chart .jstree .jstree-anchor .p-document::before {
  font-family: "unifont";
  content: "\e8a5";
  font-size: 24px;
  font-style: normal;
  color: #36c8da;
}
.tree-chart .jstree .jstree-anchor .p-meeting-room::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/ico-jstree-meeting-room.svg') 50% 50% no-repeat;
  background-size: 14px;
}
.tree-chart .jstree .jstree-anchor .p-car::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/ico-jstree-car.svg') 50% 50% no-repeat;
  background-size: 18px;
}
.tree-chart .jstree .jstree-anchor .p-equipment::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/ico-jstree-equipment.svg') 50% 50% no-repeat;
  background-size: 16px;
}
.modal-body .content-box.approval-line dl.slt-user ul {min-height: inherit;}
.modal-body .slt-user dd {position: relative;}
.modal-body .slt-user dd .btn-area {
  position: absolute;
  top: -36px;
  right: 0;
}
.modal-body .slt-user dd .btn-area .btn-set {
  margin: 0;
  padding: 0;
  border: 0;
}
.modal-body .slt-user dd ul li:hover {
  background-color: #f6f6f8;
  cursor: pointer;
}
.modal-body .slt-user dd ul li.on {background-color: rgba(14,92,233,.08);}
.modal-body .row-box .col-50 {
  width: calc(50% - 20px);
  float: left;
}
.modal-body .row-box .col-50 + .col-50 {margin-left: 40px;}
.modal-body .row-box .col-50 .radio-area,
.modal-body .row-box .col-50 .checkbox-area {
  display: block;
}
.modal-body .row-box .col-50 .radio-area label,
.modal-body .row-box .col-50 .checkbox-area label {
  width: calc(100% - 15px);
}
.modal-body .row-box .col-50 .radio-area label {margin-top: 7px;}
.modal-body .row-box .col-50 .checkbox-area label {margin-top: 10px;}
.modal-body .row-box .col-50 .radio-area input:first-child + label,
.modal-body .row-box .col-50 .checkbox-area input:first-child + label {
  margin-top: 0;
}
.modal-body .row-box.preview .col-50 > div:first-child {padding-top: 0;}
.modal-body .row-box.preview .col-50 .radio-area,
.modal-body .row-box.preview .col-50 .checkbox-area {
  display: inline-block;
}
.modal-body .row-box.preview .col-50 + .col-50 {margin-left: 30px;}
.modal-body .row-box.preview .col-50.preview {
  border: 5px solid #ddd;
  border-radius: 4px;
}
.modal-body .row-box.preview .col-50.preview .col-2nd-top + div {padding-top: 0;}
.modal-body .row-box.preview .col-50.preview .col-2nd-top + div table {border-top: 0;}
.modal-body .row-box.preview .col-50.preview .col-2nd-top {
  height: 40px;
  padding: 0 20px;
  text-align: center;
  line-height: 35px;
  background-color: #ddd;
}
.modal-body .row-box.preview .col-50.preview .col-2nd-top p {
  text-align: center;
  font-size: 16px;
}

/* 내 결재선 */
.approval .my-approval-line.slt-box {
  position: relative;
  margin: 40px 0;
  padding: 15px 20px;
  border-radius: 15px;
  background-color: rgba(14,92,233,.05);
}
.approval .my-approval-line.slt-box::after {
  position: absolute;
  left: 0;
  top: -20px;
  width: 100%;
  content: '';
  border-bottom: 1px dashed #eee;
}
.approval .my-approval-line.slt-box dt {display: none;}
.modal-body .content-box .my-approval-line dt {display: none;}
.modal-body .content-box .my-approval-line dd .slt-area.wid-100 {width: 100%;}
.modal-body .content-box .my-approval-line dd .guide-in-link {
  font-size: 13px;
  color: #777;
}
.modal-body .content-box .my-approval-line dd .guide-in-link a {
  margin-left: 5px;
  color: #ff8b00;
}

/* 합의 옵션 추가 - 사용 안함 */
.modal-body .row-box .col-50 .radio-area .op-agreement {
  width: calc(100% - 35px);
  height: 33px;
  margin: 8px 0 0 20px;
  padding: 1px 10px;
  background-color: rgba(255,139,0,.05);
}
.modal-body .row-box .col-50 .radio-area .op-agreement .radio-area {transform: scale(0.95);}
.modal-body .row-box .col-50 .radio-area .op-agreement label {width: inherit;}


/* --- datepicker 공통 --- */
body .ui-datepicker {padding: .4em .4em 0;}
body .ui-datepicker .ui-datepicker-header {margin: calc(-.4em - 1px) calc(-.4em - 1px) 0;}
body .ui-datepicker .ui-widget {font-size: 1em;}
body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {height: 2.3em;}
body .ui-datepicker .ui-datepicker-title {
  padding-left: 1em;
  line-height: 2.1em;
}
body .ui-datepicker .ui-icon-circle-triangle-w {background-position: -96px 0;}
body .ui-datepicker .ui-icon-circle-triangle-e {background-position: -32px 0;}
body .ui-datepicker .ui-widget-header .ui-icon {
	background-image: url("../images/ui-icons_222222_256x240.png");
}
body .ui-datepicker .ui-state-hover .ui-icon,
body .ui-datepicker .ui-state-focus .ui-icon,
body .ui-datepicker .ui-button:hover .ui-icon,
body .ui-datepicker .ui-button:focus .ui-icon {
	background-image: url("../images/ui-icons_222222_256x240.png");
}
body .ui-datepicker.ui-corner-all,
body .ui-datepicker .ui-corner-all {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
body .ui-datepicker select {font-family: "SCD-4";}
body .ui-datepicker select.ui-datepicker-month,
body .ui-datepicker select.ui-datepicker-year {width: 24%;}
body .ui-datepicker select.ui-datepicker-month {margin-left: 25px;}
body .ui-datepicker select option {color: #555;}
body .ui-datepicker .ui-datepicker-buttonpane {margin: 0;}
body .ui-widget-content {border: 0;}

/* 추가 */
body .ui-datepicker.ui-widget.ui-widget-content {
  overflow: hidden;
  margin-top: -1px;
  border: 1px solid #999;
  border-radius: 8px;
}
body .ui-datepicker .ui-widget-header {
  color: #222;
  border: 1px solid #999;
  background: #f5f7fb;
}
body .ui-datepicker .ui-state-default,
body .ui-datepicker .ui-widget-content .ui-state-default,
body .ui-datepicker .ui-widget-header .ui-state-default,
body .ui-datepicker .ui-button,
html .ui-datepicker .ui-button.ui-state-disabled:hover,
html .ui-datepicker .ui-button.ui-state-disabled:active {
	min-width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
  border: 1px solid transparent;
  border-radius: 28px;
  background: #fff;
	font-weight: bold;
	color: #555;
}
body .ui-datepicker .ui-state-hover,
body .ui-datepicker .ui-widget-content .ui-state-hover,
body .ui-datepicker .ui-widget-header .ui-state-hover,
body .ui-datepicker .ui-state-focus,
body .ui-datepicker .ui-widget-content .ui-state-focus,
body .ui-datepicker .ui-widget-header .ui-state-focus,
body .ui-datepicker .ui-button:hover,
body .ui-datepicker .ui-button:focus {
	border: 1px solid rgba(255,255,255,0);
  background: rgba(14,92,233,.1);
}
body .ui-datepicker .ui-state-active,
body .ui-datepicker .ui-widget-content .ui-state-active,
body .ui-datepicker .ui-widget-header .ui-state-active,
body .ui-datepicker a.ui-button:active,
body .ui-datepicker .ui-button:active,
body .ui-datepicker .ui-button.ui-state-active:hover {
  background: rgba(14,92,233,.1);
  color: #0e5ce9;
}
body .ui-datepicker .ui-icon-background,
body .ui-datepicker .ui-state-active .ui-icon-background {
	background-color: #ff8b00;
}
body .ui-datepicker .ui-state-active a,
body .ui-datepicker .ui-state-active a:link,
body .ui-datepicker .ui-state-active a:visited {
	color: #ff8b00;
}
body .ui-datepicker input:focus,
body .ui-datepicker select:focus,
body .ui-datepicker textarea:focus {
  border: 0;
}

/* 스타일 재선언 - 위치 고정! */
body .ui-datepicker .ui-state-highlight,
body .ui-datepicker .ui-widget-content .ui-state-highlight,
body .ui-datepicker .ui-widget-header .ui-state-highlight {
	border: transparent;
	background: rgba(255,240,0,.2);
	color: #444444;
}


/* --- dialog 공통 --- */
body .ui-dialog {
	padding: 1em;
  border-radius: 20px;
	box-shadow: 0 10px 5px rgba(85,85,85,.05), 
							0 20px 10px rgba(85,85,85,.05), 
							0 40px 30px rgba(85,85,85,.2);
}
/* body .ui-dialog.ui-corner-all,
body .ui-dialog .ui-corner-all {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
} */
body .ui-dialog .ui-widget-header {
	font-weight: normal;
	color: #222;
	border: 0;
	border-bottom: 1px solid #ddd;
	background: #fff;
}
body .ui-dialog .ui-dialog-titlebar {padding: .6em;}
body .ui-dialog .ui-dialog-title {padding-left: 10px;}
body .ui-dialog .ui-dialog-titlebar-close {right: 10px;}
body .ui-dialog .ui-widget-content {
	padding: 1em .6em;
	font-size: 16px;
	border: 0;
}
body .ui-dialog button {
  font-family: 'SCD-4';
  outline: 0;
}
body .ui-dialog .ui-dialog-buttonpane {
  margin: 0;
  padding: 1em 0;
}
body .ui-dialog .ui-dialog-buttonpane button:last-child {margin: 0;}
body .ui-dialog .ui-button {
	top: .6em;
	right: 0;
	border: 0;
	background: transparent;
}
body .ui-dialog .ui-dialog-buttonpane button {
	height: 29px;
	padding: 0 12px;
	line-height: 29px;
  font-size: 14px;
	color: #777;
	border: 1px solid transparent;
	border: 1px solid rgba(119,119,119,.3);
  border-radius: 8px;
}
body .ui-dialog .ui-dialog-buttonpane button:hover {
  color: #222;
  border-color: rgba(119,119,119,1);
}
body button.ui-button.ui-dialog-titlebar-close {
  top: 1.5em;
  right: 0.5em;
}
body button.ui-button.ui-dialog-titlebar-close::after {
  display: inline-block;
  font-family: "unifont";
  content: '\e80b';
  font-size: 22px;
  font-weight: 600;
  color: #222;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 1;
}
body .ui-state-default span.ui-icon-closethick {background: none;}
body .ui-dialog pre {
  font-size: 16px;
  white-space: normal;
  color: #555;
}
body .ui-dialog .ui-widget-content i.ico-uni-caution02,
body .ui-dialog .ui-widget-content i.ico-uni-caution02-f {
  display: block;
  margin: 12px auto 0;
  font-size: 80px;
  color: #fed410;
  animation: shake .5s ease-in-out 1;
  -webkit-animation: shake .5s ease-in-out 1;
  /* animation: Color 4s linear infinite;
  -webkit-animation: Color 4s ease-in-out infinite; */
}
@keyframes Color{
  0%{color:#ff4c5d;}
  10%{color:#ff5f50;}
  20%{color:#ff8b00;}
  30%{color:#fed410;}
  40%{color:#51b300;}
  50%{color:#00c0b5;}
  60%{color:#0e5ce9;}
  70%{color:#004180;}
  80%{color:#6540b6;}
  90%{color:#ff2596;}
  100%{color:#ff4c5d;}
}
@-moz-keyframes Color{
  0%{color:#ff4c5d;}
  10%{color:#ff5f50;}
  20%{color:#ff8b00;}
  30%{color:#fed410;}
  40%{color:#51b300;}
  50%{color:#00c0b5;}
  60%{color:#0e5ce9;}
  70%{color:#004180;}
  80%{color:#6540b6;}
  90%{color:#ff2596;}
  100%{color:#ff4c5d;}
}
@-webkit-keyframes Color{
  0%{color:#ff4c5d;}
  10%{color:#ff5f50;}
  20%{color:#ff8b00;}
  30%{color:#fed410;}
  40%{color:#51b300;}
  50%{color:#00c0b5;}
  60%{color:#0e5ce9;}
  70%{color:#004180;}
  80%{color:#6540b6;}
  90%{color:#ff2596;}
  100%{color:#ff4c5d;}
}

/* 미리보기 추가 */
body .ui-dialog.dialog-pre .ui-dialog-titlebar {margin: -1em -1em 1em -1em;}
body .ui-dialog.dialog-pre .ui-widget-content {text-align: center;}
body .ui-dialog.dialog-pre .ui-dialog-titlebar-close::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e80b';
  font-size: 20px;
  font-weight: 600;
  color: #222;
}


/* --- tooltip 공통 --- */
.tooltip-inner {
  max-width: 700px;
  padding: 3px 8px;
  /* white-space: nowrap; */
  text-align: left;
  font-family: 'SCD-5';
  color: #222;
  background-color: #ffe155;
}
.tooltip-inner * {font-family: 'SCD-5';}
.tooltip.top .tooltip-arrow {border-top-color: #ffe155;}
.tooltip.right .tooltip-arrow {border-right-color: #ffe155;}
.tooltip.bottom .tooltip-arrow {border-bottom-color: #ffe155;}
.tooltip.left .tooltip-arrow {border-left-color: #ffe155;}
/* .time-box .btn-avs + .tooltip .tooltip-inner {
  color: #fff;
  background-color: #0583F2;
}
.time-box .btn-avs + .tooltip.top .tooltip-arrow {border-top-color: #0583F2;}
.time-box .btn-avs + .tooltip.right .tooltip-arrow {border-right-color: #0583F2;}
.time-box .btn-avs + .tooltip.bottom .tooltip-arrow {border-bottom-color: #0583F2;}
.time-box .btn-avs + .tooltip.left .tooltip-arrow {border-left-color: #0583F2;}
.time-box .btn-etc + .tooltip .tooltip-inner {
  color: #fff;
  background-color: #333;
}
.time-box .btn-etc + .tooltip.top .tooltip-arrow {border-top-color: #333;}
.time-box .btn-etc + .tooltip.right .tooltip-arrow {border-right-color: #333;}
.time-box .btn-etc + .tooltip.bottom .tooltip-arrow {border-bottom-color: #333;}
.time-box .btn-etc + .tooltip.left .tooltip-arrow {border-left-color: #333;} */
.time-box .btn-ico + .tooltip .tooltip-inner {
  color: #000;
  border: 1px solid #555;
  background-color: #fff;
}
.time-box .btn-avs + .tooltip .tooltip-inner {
  color: #0e5ce9;
  border-color: #0e5ce9;
}
.time-box .btn-etc + .tooltip .tooltip-inner {
  color: #ff253a;
  border-color: #ff253a;
}
.time-box .btn-ico + .tooltip.top .tooltip-arrow {border-top-color: #fff;}
.time-box .btn-ico + .tooltip.right .tooltip-arrow {border-right-color: #fff;}
.time-box .btn-ico + .tooltip.bottom .tooltip-arrow {border-bottom-color: #fff;}
.time-box .btn-ico + .tooltip.left .tooltip-arrow {border-left-color: #fff;}

/* 경비처리 영수증 추가내용 툴팁 영역 */
.theme-table .receipt-area .add-cont-box + .tooltip .tooltip-inner > span {display: block;}
.theme-table .receipt-area .add-cont-box + .tooltip .tooltip-inner > span span:first-child {
  display: inline-block;
  width: 70px;
  margin-right: 5px;
}

/* 결재처리 결재선 툴팁 영역 */
.theme-table .current-user .add-cont-box + .tooltip .tooltip-inner > span::after {color: inherit;}
.theme-table .current-user .add-cont-box + .tooltip .tooltip-inner > span i::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e828';
  font-style: normal;
}

/* 카드목록 툴팁 영역 */
.theme-table .card-num + .tooltip .tooltip-inner > span {margin-left: 8px;}

/* 결재처리 추가항목 툴팁 영역 */
.theme-table .add-cont-box.form-input-val + .tooltip .tooltip-inner > span {display: block;}
.theme-table .add-cont-box.form-input-val + .tooltip .tooltip-inner > span span:first-child {
  display: inline-block;
  width: 70px;
  margin-right: 5px;
}


/* - 게시판 pagination 공통 - */
.pagination-area {
  margin-top: 30px;
  text-align: center;
}
.pagination-area .btn-prev,
.pagination-area .btn-next {
  display: inline-block;
  font-size: 20px;
}
.pagination-area .btn-prev {margin-right: 20px;}
.pagination-area .btn-next {margin-left: 20px;}
.pagination-area .btn-prev a,
.pagination-area .btn-next a {
  line-height: 26px;
}
.pagination-area a:hover {color: #0e5ce9;}
.pagination-area a {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  line-height: 26px;
  border-radius: 8px;
  box-sizing: border-box;
}
.pagination-area a.on,
.pagination-area a.current {
  color: #0e5ce9;
  border: 1px solid #0e5ce9;
}
.pagination-area a.disabled,
.pagination-area a.disabled:hover {color: #ccc;}


/* --- pes --- */
/* - 대시보드 - */
.dashboard .comp-card-list ul {
  margin-top: 15px;
  border: 5px solid #f9f9fa;
  border-radius: 15px;
  box-sizing: border-box;
}
.dashboard .comp-card-list ul li {
  height: 50px;
  padding: 0 15px;
  line-height: 50px;
}
.dashboard .comp-card-list ul li + li {border-top: 1px solid #f5f5f5;}
.dashboard .comp-card-list ul li span {position: relative;}
.dashboard .comp-card-list ul li .card-logo {
  display: inline-block;
  width: 140px;
}
.dashboard .comp-card-list ul li > span::after {
  position: absolute;
  top: 3px;
  right: -20px;
  content: '';
  width: 1px;
  height: 13px;
  background-color: #ddd;
}
.dashboard .comp-card-list ul li > .card-logo::after,
.dashboard .comp-card-list ul li > span:last-child::after {
  display: none;
}
.dashboard .comp-card-list ul li .card-logo img {margin-top: -5px;}
.dashboard .comp-card-list ul li > span + span {margin-left: 35px;}
.dashboard .comp-card-list ul li .list-tt {
  display: inline-block;
  margin-right: 8px;
  color: #777;
}
.dashboard .flow-chart .flow-chart-comp,
.dashboard .flow-chart .flow-chart-user {
  float: left;
  width: calc(50% - 20px);
  margin-top: 20px;
}
.dashboard .flow-chart .flow-chart-comp h3,
.dashboard .flow-chart .flow-chart-user h3,
.dashboard .flow-chart .flow-chart-tax h3 {
  position: relative;
  padding-left: 20px;
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 17px;
}
.dashboard .flow-chart .flow-chart-comp h3::before,
.dashboard .flow-chart .flow-chart-user h3::before,
.dashboard .flow-chart .flow-chart-tax h3::before {
  position: absolute;
  top: 11px;
  left: 8px;
  width: 5px;
  height: 5px;
  content: '';
  border-radius: 50%;
  background-color: #222;
}
.dashboard .flow-chart .flow-chart-user {margin-left: 40px;}
.dashboard .flow-chart .flow-chart-comp .flow-chart-in,
.dashboard .flow-chart .flow-chart-user .flow-chart-in {
  text-align: center;
}
.dashboard .flow-chart .flow-chart-user .flow-chart-in {background-color: rgba(0,192,181,.08);}
.dashboard .flow-chart .flow-chart-comp .flow-chart-in .flow-chart-list dl,
.dashboard .flow-chart .flow-chart-user .flow-chart-in .flow-chart-list dl {
  width: 170px;
  height: 170px;
}
.dashboard .flow-chart .flow-chart-comp .list-total,
.dashboard .flow-chart .flow-chart-user .list-total {
  display: inline-block;
  width: 100%;
  margin-top: 8px;
  text-align: center;
  font-size: 18px;
}

/* 세금계산서 현황 추가 */
.dashboard .flow-chart.v2 .flow-chart-set {
  float: left;
  width: calc(33.33333333% - 20px);
  margin-top: 20px;
}
.dashboard .flow-chart.v2.col-50 .flow-chart-set {width: calc(50% - 15px);}
.dashboard .flow-chart.v2.col-50 .flow-chart-tax {display: none;}
.dashboard .flow-chart.v2 .flow-chart-set + .flow-chart-set {margin-left: 30px;}
.dashboard .flow-chart .flow-chart-tax .flow-chart-in {background-color: rgba(10,181,72,.08);}
.dashboard .flow-chart.v2 .flow-chart-set .flow-chart-in .flow-chart-list {width: 100%;}
.dashboard .flow-chart.v2 .flow-chart-set .flow-chart-in .flow-chart-list dl {
  float: inherit;
  width: inherit;
  height: inherit;
  padding: 15px 20px;
  border-radius: 10px;
  box-sizing: border-box;
}
.dashboard .flow-chart.v2 .flow-chart-set .flow-chart-in .flow-chart-list dl + dl {margin: 5px 0 0 0;}
.dashboard .flow-chart.v2 .flow-chart-in .flow-chart-list dl + dl::before {display: none;}
.dashboard .flow-chart.v2 dl::after {
  display: block;
  content: '';
  clear: both;
}
.dashboard .flow-chart.v2 dl dt {
  margin-bottom: 15px;
  padding: 0;
  text-align: left;
  font-size: 16px;
}
.dashboard .flow-chart.v2 dl:first-child dt {
  float: left;
  margin: 0;
}
.dashboard .flow-chart.v2 dl:first-child dd {
  float: right;
  width: auto;
  line-height: inherit;
  /* color: #0e5ce9; */
}
.dashboard .flow-chart.v2 dl:nth-child(2) dd {width: 100%;}
.dashboard .flow-chart.v2 .flow-chart-set .list-total {
  margin-top: 0;
  font-size: 16px;
}

/* - 영수증 목록 - */
.theme-card .receipt-area {
  overflow: hidden;
  margin: 0 0 0 -40px;
}
.theme-card .receipt-box {
  overflow: hidden;
  float: left;
  width: 280px;
  height: 532px;
  margin-left: 40px;
  margin-bottom: 40px;
  border-radius: 4px;
  background-color: #ebecef;
  box-sizing: border-box;
}
.receipt-box.cancel {background-color: rgba(255,76,93,.1);}
.receipt-box.pass {background-color: #f9ebd7;}
.receipt-box.receive {background-color: #d9efe1;}
.result-empty {
  /* overflow: hidden; */
  position: relative;
  float: left;
  width: 100%;
  height: 120px;
  margin-top: 40px;
  border-radius: 8px;
  background-color: rgba(229,229,233,.3);
  box-sizing: border-box;
}
.result-empty::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  border-top: 1px solid #f5f5f5;
}
.result-empty p {
  overflow: hidden;
  position: relative;
  margin-left: -40px;
  text-align: center;
  line-height: 120px;
  z-index: 10;
}
.result-empty p::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e807';
  margin: -4px 5px 0 0;
  vertical-align: middle;
  font-size: 22px;
  font-weight: 600;
  color: #999;
}
.result-empty p::after {
  display: inline-block;
  position: absolute;
  top: 24px;
  right: 47px;
  font-family: "unifont";
  content: '\e85c';
  vertical-align: middle;
  font-size: 150px;
  /* font-weight: 600; */
  color: rgba(255,255,255,.7);
}
.receipt-box .select-area {
  position: relative;
  cursor: pointer;
}
.receipt-box .select-area:hover::after,
.receipt-box.on .select-area::after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 276px;
  height: 528px;
}
.receipt-box .select-area:hover::after,
.receipt-box.on .select-area:hover::after {
  border: 2px solid #222;
  border-radius: 4px;
}
.receipt-box.on .select-area::after {
  border: 2px solid #0e5ce9;
  border-radius: 4px;
}
.receipt-box .select-area .progress-ing,
.write-area-in .receipt-comp .progress-ing {
  /* display: none; */
  width: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  margin-top: 203px;
  text-align: center;
  z-index: 10;
  animation: fadeInUp .5s ease-in-out 1;
}
.write-area-in .receipt-comp .progress-ing {margin-top: 164px;}
.receipt-box .select-area .progress-ing span,
.write-area-in .receipt-comp .progress-ing span {
  font-family: 'SCD-8';
  font-size: 60px;
  color: rgba(255,76,93,.1);
  /* color: rgba(0,0,0,.1); */
}
.receipt-box .select-area .btn-area {
  display: none;
  position: absolute;
  width: calc(100% - 20px);
  top: calc(50% - 25px);
  left: 0;
  text-align: center;
  z-index: 20;
}
.receipt-box .select-area:hover .btn-area {display: block;}
.receipt-box .select-area .btn-area span {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 100px;
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  background-color: #222;
  cursor: pointer;
}
.receipt-box .select-area .btn-area span + span {margin-left: 20px;}
.receipt-box .select-area .btn-area span:hover {
  background-color: #0e5ce9;
}
.receipt-box .select-area .btn-area span::before {
  position: absolute;
  top: -23px;
  left: 0;
  width: 100%;
  font-family: "unifont";
  text-align: center;
  font-size: 30px;
}
.receipt-box .select-area .btn-area span.receipt-select::before {
  left: 1px;
  content: '\e808';
}
.receipt-box .select-area .btn-area span.receipt-detail::before {content: '\e82a';}
.receipt-box .select-area .btn-area i {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 72px;
  cursor: pointer;
}
.receipt-box .select-area .btn-area i:hover {
  color: #0e5ce9;
  background-color: transparent;
}
.receipt-box .select-area .btn-area i::after {
  display: inline-block;
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  z-index: -10;
}
.receipt-badge {
  display: inline-block;
  padding: 4px 10px 4px 7px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  background-color: #0e5ce9;
}
.badge-receipt {background-color: #8485D5;}
.receipt-box.on .receipt-badge {background-color: #222;}
.receipt-badge i {
  margin: -1px 2px 0 0;
  font-size: 14px;
}
.receipt-badge.badge-etax i {
  margin: -2px 2px 0 0;
  font-size: 15px;
}
.receipt-badge i.ico-uni-receipt-f {margin-top: -3px;}
.receipt-box.on .badge-comp i,
.receipt-box.on .badge-user i,
.receipt-box.on .badge-etax i {color: #0e5ce9;}
.receipt-box.on .badge-receipt i {color: #8485D5;}
.receipt-in {
  position: relative;
  margin: 15px 10px 0;
  background-color: #fff;
  box-shadow: 0 5px 5px rgba(0,0,0,.05);
}
.receipt-in::before {
  display: block;
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: url('../images/bg-receipt-top.png') 0 0 repeat-x;
}
.receipt-in::after {
  display: block;
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: url('../images/bg-receipt-bott.png') 0 0 repeat-x;
}
.receipt-in.receipt-etax {
  background-color: transparent;
  box-shadow: none;
}
.receipt-in.receipt-no {background-color: rgba(255,255,255,.5);}
.receipt-in.receipt-no::before {
  /* filter: alpha(opacity=50); */
  opacity: .5;
}
.receipt-in.receipt-no::after {
  /* filter: alpha(opacity=50); */
  opacity: .5;
}
.receipt-comp {
  height: 390px;
  padding: 20px;
}
.receipt-write {position: relative;}
.receipt-comp > p:first-child,
.receipt-comp .progress-ing + p,
.receipt-write > p:first-child,
.receipt-comp .tag-project + p,
.receipt-write .tag-project + p,
.receipt-write .tag-project + p {
  /* padding: 10px 0 20px; */
  padding: 14px 0 16px;
  font-family: "SCD-5";
  text-align: center;
  font-size: 16px;
}
.receipt-comp > p:first-child,
.receipt-comp .progress-ing + p,
.receipt-comp .tag-project + p {
  border-bottom: 3px double #ddd;
}
.receipt-comp dt.point {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-comp dt.point + dd {display: none;}
.receipt-write p:first-child,
.receipt-write .tag-project + p {
  /* padding: 12px 0 21px; */
  padding: 16px 0 17px;
  border-bottom: 1px solid #999;
}
.receipt-write .tag-project {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 11px;
  color: #fff;
}
.receipt-write .tag-project span {
  display: inline-block;
  padding: 0 5px;
  line-height: 19px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.receipt-write .tag-project .tag-01 {
  width: 60px;
  background-color: #BB8C62;
}
.receipt-write .tag-project .tag-02 {
  max-width: calc(100% - 30px);
  background-color: #FF6E6C;
}
.receipt-comp .line-1st {margin-top: 15px;}
.receipt-comp div + div {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}
.receipt-write div + div {
  margin-top: -1px;
  border-top: 1px solid #999;
}
.receipt-write div:last-child {border-bottom: 1px solid #999;}
.receipt-comp div dl,
.receipt-write div dl {
  overflow: hidden;
  font-size: 12px;
}
.receipt-comp div dl {line-height: 26px;}
.receipt-write div dl {
  line-height: 34px;
  border-bottom: 1px solid #ddd;
}
.receipt-write div dl:last-child {border-bottom: 0;}
.receipt-comp div dl *,
.receipt-write div dl * {
  float: left;
}
.receipt-comp div dl dt {width: 40%;}
.receipt-write div dl dt {
  width: calc(30% - 1px);
  color: #555;
}
.receipt-write div dl dt {
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
.receipt-comp div dl dd {width: 60%;}
.receipt-comp div dl dd.business-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-comp div dl dd.address {
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  margin: 3px 0 4px 0;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: normal;
  -o-text-overow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  -webkit-box-orient: vertical;
}
.receipt-write div dl dd {
  overflow: hidden;
  /* width: calc(70% - 15px); */
  width: 70%;
  padding-left: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  -o-text-overow: ellipsis;
  box-sizing: border-box;
}
.receipt-comp .line-2nd dl dt,
.receipt-comp .line-3rd dl dt {
  color: #777;
}
.receipt-comp .line-3rd dl dd {text-align: right;}
.receipt-user,
.receipt-no {
  display: table;
  width: 240px;
  padding: 10px;
}
.receipt-user .photo-area,
.receipt-no .photo-area {
  display: table-cell;
  height: 410px;
  text-align: center;
  vertical-align: middle;
}
.receipt-area.etax .receipt-user .photo-area,
.receipt-area.etax .receipt-no .photo-area {
  height: 393px;
}
.receipt-user .photo-area img {
  max-width: 240px;
  max-height: 410px;
}
.receipt-area.etax .receipt-user .photo-area img {max-height: 393px;}
.receipt-user .img-empty::after {
  display: inline-block;
  font-family: "unifont";
  content: '\e852';
  font-size: 100px;
  color: #ebecef;
}
.receipt-no .photo-area img {
  width: 120px;
  height: 120px;
  /* filter: alpha(opacity=30); */
  opacity: .3;
}
.receipt-write {
  position: relative;
  height: 393px;
  margin: 13px 10px 0;
  padding: 20px;
  background-color: #fffef2;
  box-shadow: 0 5px 5px rgba(0,0,0,.05);
}
.receipt-write.dots::after {
  display: inline-block;
  content: '. . . .';
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.receipt-area .btn-area {padding: 13px 10px 10px 10px;}
.receipt-area .btn-area i {
  padding: 5px;
  font-size: 27px;
  cursor: pointer;
}
.receipt-area .btn-area i + i {margin-left: 10px;}
.receipt-area .btn-area i:hover,
.receipt-area .btn-area i.on {
  border-radius: 50%;
  background-color: #fff;
}

/* 전자세금계산서 추가 */
.theme-card .receipt-area.etax .receipt-box {height: 520px;}
.theme-card .receipt-area.etax .receipt-box .select-area:hover::after,
.theme-card .receipt-area.etax .receipt-box.on .select-area::after {
  height: 516px;
}
.theme-card .receipt-area.etax .receipt-box .select-area .progress-ing span,
.write-area-in .receipt-etax .progress-ing span {
  color: rgba(255,76,93,.3);
}
.theme-card .receipt-area.etax .receipt-box .select-area .btn-area {top: calc(50% - 30px);}
.theme-card .receipt-area.etax .receipt-in::before,
.theme-card .receipt-area.etax .receipt-in::after {display: none;}
.theme-card .receipt-area.etax .receipt-in table {
  table-layout: fixed;
  border: 2px solid #2F5496;
}
.theme-card .receipt-area.etax .receipt-in table th,
.theme-card .receipt-area.etax .receipt-in table td {
  height: 25px;
  padding: 0 4px;
  font-size: 12px;
  color: #555;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
  box-sizing: border-box;
}
.theme-card .receipt-area.etax .receipt-in table th.provider,
.theme-card .receipt-area.etax .receipt-in table td.provider {
  border-color: #f77573;
}
.theme-card .receipt-area.etax .receipt-in table th.receiver,
.theme-card .receipt-area.etax .receipt-in table td.receiver {
  border-color: #5B9adf;
}
.theme-card .receipt-area.etax .receipt-in table th:last-child,
.theme-card .receipt-area.etax .receipt-in table td:last-child {
  border-right: 0;
}
.theme-card .receipt-area.etax .receipt-in table tr:first-child th,
.theme-card .receipt-area.etax .receipt-in table tr:first-child td {
  border-top: 0;
}
.theme-card .receipt-area.etax .receipt-in table th {
  text-align: center;
  font-weight: normal;
  background-color: #eee;
}
.theme-card .receipt-area.etax .receipt-in table th.provider {
  color: #d04b50;
  background-color: #fff6f7;
}
.theme-card .receipt-area.etax .receipt-in table th.provider.tt {background-color: #ffdbde;}
.theme-card .receipt-area.etax .receipt-in table th.receiver {
  color: #4279ad;
  background-color: #f7f7ff;
}
.theme-card .receipt-area.etax .receipt-in table th.receiver.tt {background-color: #c6dbf7;}
.theme-card .receipt-area.etax .receipt-in table td {
  overflow: hidden;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.theme-card .receipt-area.etax .receipt-in table .invoice-tt {
  height: 38px;
  padding: 0 4px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #2f5496;
}
.theme-card .receipt-area.etax .receipt-in table .invoice-tt .badge-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 8px;
  height: 20px;
  padding: 0 6px;
  text-align: center;
  font-size: 10px;
  color: #2f5faa;
  border: 1px solid #2f5496;
  border-radius: 10px;
  box-sizing: border-box;
}

/* - 영수증 목록 (라인형 추가) - */
.theme-line .receipt-area {
  overflow: inherit;
  margin: 20px 0 0;
}
.theme-line .receipt-area .receipt-box {
  width: 100%;
  margin-top: 5px;
}
.theme-line .receipt-area .receipt-box.on {border: 1px solid #0e5ce9;}
.theme-line .receipt-area td .cont-area .badge-area {
  overflow: hidden;
  margin: 0 10px 6px 0;
}
.theme-line .receipt-area td .cont-area .badge-area span {
  overflow: hidden;
  float: left;
  height: 22px;
  padding: 0 4px;
  line-height: 22px;
  font-size: 11px;
  color: #fff;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
}
.theme-line .receipt-area td .cont-area .badge-area .receipt-badge {
  width: 55px;
  text-align: center;
  background-color: #00c0b5;
}
.theme-line .receipt-area td .cont-area .badge-area .receipt-badge i {display: none;}
.theme-line .receipt-area td .cont-area .badge-area .tag-project {
  max-width: calc(100% - 60px);
  margin-left: 5px;
}
.theme-line .receipt-area td .cont-area .badge-area .tag-project.tag-02 {background-color: #ff6e6c;}
.theme-line .receipt-area td .cont-area.in-title .cont-tt {
  overflow: hidden;
  max-height: 20px;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.theme-line .receipt-area td .cont-area.in-receipt {overflow: hidden;}
.theme-line .receipt-area td .cont-area.in-receipt > * {float: left;}
.theme-line .receipt-area td .cont-area.in-receipt .receipt-cont {
  overflow: hidden;
  display: -webkit-box;
  max-height: 42px;
  width: calc(100% - 70px);
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}
.cont-area.in-receipt .receipt-cont .cont-set .cont-tt {color: #aaa;}
.cont-area.in-receipt .receipt-cont .cont-set span {margin-right: 8px;}
.theme-line .receipt-area .receipt-box.cancel td {background-color: rgba(255,76,93,.05);}
.theme-line .receipt-area .receipt-box.cancel td {position: relative;}
/* .theme-line .receipt-area .receipt-box.cancel td:last-child::after {
  display: inline-block;
  content: "취소";
  position: absolute;
  bottom: 10px;
  right: 15px;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255,76,93,.7);
} */

/* - 영수증 목록 (테이블형 추가) - */
.theme-table .receipt-area {
  overflow: inherit;
  margin: 20px 0 0;
}
.theme-table .receipt-area .receipt-box.cancel,
.theme-table .receipt-area .receipt-box.pass,
.theme-table .receipt-area .receipt-box.receive {
  background-color: inherit;
}
.theme-table .receipt-area .receipt-box.pass table {background-color: rgba(249,235,215,.5);}
.theme-table .receipt-area .receipt-box.receive table {background-color: rgba(217,239,225,.5);}
.theme-table .receipt-area .receipt-box.cancel table {background-color: rgba(255,76,93,.04);}
.theme-table .receipt-area .receipt-box.on table {background-color: rgba(14,92,233,.05);}

/* - 영수증 작성 메모 - */
.receipt-area .receipt-memo {
  position: absolute;
  top: 10px;
  left: 10px;
  margin-right: 10px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #FFF78D;
}
.receipt-area .receipt-memo p:first-child {
  margin-right: 8px;
  font-weight: 600;
}
.receipt-area .receipt-memo::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: #ecdd13 #fff;
}

/* - 영수증 팝업 - */
.modal-body .write-area .write-area-in,
.modal-body .write-detail-area .write-detail-area-in {
  display: table;
  width: 100%;
  margin-top: 20px;
}
.modal-body .write-detail-area .write-detail-area-in:first-child {margin-top: 0;}
.modal-body .write-area-in > div {display: table-cell;}
.modal-body .write-area-in > div:first-child {
  position: relative;
  overflow: hidden;
  /* overflow-x: auto; */
  width: 557px;
  max-width: 557px;
  padding: 30px 0;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ebecef;
}
.modal-body .write-area-in.etax > div:first-child {
  width: 652px;
  max-width: 652px;
}
.modal-body .write-area-in > div:first-child .btn-area.right,
.modal-body .write-area-in > div:first-child .btn-area.add-right {
  position: absolute;
  top: -1px;
  right: -1px;
}
.modal-body .write-area-in > div:first-child .btn-area.right button,
.modal-body .write-area-in > div:first-child .btn-area.add-right .qq-upload-button {
  height: 27px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 27px;
  font-size: 12px;
  color: #555;
  border: 1px solid #999;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
}
.modal-body .write-area-in > div:first-child .btn-area.right .btn-scan {
  margin-left: 0;
  color: #0e5ce9;
}
.modal-body .write-area-in > div:first-child .btn-area.right button i {margin-right: 8px;}
.modal-body .write-area-in > div:first-child .btn-area.right button i::before {
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  line-height: 10px;
}
.modal-body .write-area-in > div:first-child .btn-area.right button.btn-scan i::before {content: '\e8e6';}
.modal-body .write-area-in > div:first-child .btn-area.add-right .qq-upload-button {padding: 0 8px 0 28px;}
.modal-body .write-area-in > div:first-child .btn-area.add-right .qq-upload-button i {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 24px;
}
.modal-body .write-area-in > div:first-child .btn-area.add-right .qq-upload-button p {display: inline-block;}
.modal-body .write-area-in > div:first-child img {max-height: 500px;}
.modal-body .write-area-in > div:first-child .btn-area.add {
  display: table-cell;
  width: 557px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
  color: #777;
  box-sizing: border-box;
  cursor: pointer;
}
.modal-body .write-area-in > div:first-child .btn-area.add:hover {
  transform: scale(1.05);
  color: #222;
}
.modal-body .write-area-in > div:first-child .btn-area.add i {font-size: 150px;}
.modal-body .write-area-in > div:first-child .btn-area.add p {
  font-size: 26px;
  margin-top: -15px;
}
.modal-body .write-area-in > div:first-child .btn-area.add input {height: inherit !important;}
.modal-body .write-area-in.etax > div:first-child .btn-area.add {
  width: 650px;
  cursor: default;
}
.modal-body .write-area-in.etax > div:first-child .btn-area.add:hover {
  transform: scale(1);
  color: #777;
}
.modal-body .write-area-in.etax > div:first-child .btn-area.add .btn-add {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding-top: 30px;
  border: 1px solid #999;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.modal-body .write-area-in.etax > div:first-child .btn-area.add .btn-add + .btn-add {margin-left: 20px;}
.modal-body .write-area-in.etax > div:first-child .btn-area.add .btn-add::before {
  font-family: "unifont";
  content: '\e89f';
  font-size: 48px;
}
.modal-body .write-area-in.etax > div:first-child .btn-area.add .btn-add:hover {
  transform: scale(1.05);
  color: #222;
  border-color: #222;
}
.modal-body .write-area-in.etax > div:first-child .btn-area.add .btn-add p {
  font-size: 21px;
  margin-top: -2px;
}
.modal-body .write-area-in .tbl-basic {padding-left: 30px;}
.modal-body .write-area-in form .tbl-basic {padding-left: 0;}
.modal-body .write-area-in .tbl-basic .tbl-area + .tbl-area {margin-top: -2px;}
.modal-body .write-area-in .tbl-basic .tbl-area + .tbl-area table {border-top: 2px solid #ddd;}
/* .modal-body .write-area-in .tbl-basic textarea, */
.modal-body .tbl-basic textarea {width: calc(100% - 28px);}
.modal-body .write-area-in .receipt-in,
.modal-body .write-detail-area-in .receipt-in,
.modal-body .write-detail-area-in .receipt-write {
  width: 220px;
  margin: 0 auto;
}
.modal-body .write-area-in .tbl-basic .tbl-area {padding-top: 0;}
.modal-body .write-area-in .photo-area,
.modal-body .write-detail-area-in .photo-area {
  position: relative;
  width: inherit;
  text-align: center;
}
.modal-body .write-area-in .receipt-in.receipt-etax,
.modal-body .write-detail-area-in .receipt-in.receipt-etax {
  position: relative;
  width: 650px;
  text-align: center;
}
.modal-body .write-area-in .receipt-in.receipt-etax::before,
.modal-body .write-area-in .receipt-in.receipt-etax::after,
.modal-body .write-detail-area-in .receipt-in.receipt-etax::before,
.modal-body .write-detail-area-in .receipt-in.receipt-etax::after {
  display: none;
}
.modal-body .write-area-in .receipt-memo,
.modal-body .write-detail-area-in .receipt-memo{
  padding: 20px;
  background-color: #FFF78D;
}
.modal-body .write-area-in .receipt-memo p:first-child,
.modal-body .write-detail-area-in .receipt-memo p:first-child{
  font-weight: 600;
}
.modal-body .write-area-in .receipt-memo p + p,
.modal-body .write-detail-area-in .receipt-memo p + p{
  margin-top: 5px;
}
/* .modal-body .receipt-memo p:first-child {font-weight: 600;} */
.modal-body .memo-area {
  padding-top: 30px;
  border-top: 1px dashed #eee;
}
.modal-body .memo-area .tbl-basic {margin: 10px 20px  0 0;}
.modal-body .memo-area textarea {width: 100%;}
.modal-body .content-box {
  margin: 0;
  padding: 0;
  border: 0;
}
.modal-body .content-box .doc-view {margin: 0 auto;}
.modal-body .content-in.detail .content-box .doc-view,
.modal-body .content-in.write .content-box .doc-view {
  margin: 40px auto 0;
}
.modal-body .content-box .doc-view .btn-area {display: none;}
.modal-body .content-in.detail .content-box .doc-view .btn-area,
.modal-body .content-in.write .content-box .doc-view .btn-area {
  display: inherit;
}
.modal-body .content-box .doc-view p + p {margin-top: 0;}
.modal-body .content-box .doc-view table {font-size: 13px;}
.modal-body .write-detail-area-in > div {
  display: table-cell;
  /* width: 557px; */
  /* width: 100%; */
  /* max-width: 677px; */
  max-width: 720px;
  padding: 30px 0;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ebecef;
}
.modal-body .write-detail-area-in .usage-area {
  overflow: hidden;
  position: relative;
  width: 260px;
  padding: 0;
  vertical-align: top;
  border-left: 0;
  background-color: #fffef2;
}
.modal-body .write-detail-area-in .usage-area .receipt-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.modal-body .write-detail-area-in .receipt-write {
  height: 100%;
  box-shadow: none;
}
.modal-body .write-detail-area-in .receipt-write div dl dt {border-right: 0;}
.modal-body .write-detail-area-in .receipt-write div dl dd {
  min-height: 21px;
  padding: 8px 0 8px 15px;
  text-overflow: inherit;
  /* white-space: normal; */
  white-space: pre-line;
  line-height: 20px;
  border-left: 1px solid #ddd;
}
.modal-body .write-detail-area-in .photo-area * {
  max-width: 100%;
  max-height: 450px;
}

/* 분할작성 추가 */
.receipt-write .tag-project + p.in-tag {
  position: relative;
  padding-left: 37px;
}
.receipt-write div dl dd.in-tag {position: relative;}
.receipt-write .tag-project + p.in-tag .tag-add-division {
  display: inline-block;
  position: relative;
  top: -2px;
  right: 0;
  height: 16px;
  margin-left: 8px;
  padding: 0 3px;
  font-family: 'SCD-5';
  line-height: 16px;
  font-size: 11px;
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
  border-radius: 4px;
}
.receipt-write div dl dd.in-tag .tag-add-division {
  display: inline-block;
  float: none;
  position: absolute;
  top: 8px;
  left: inherit;
  height: 16px;
  margin-left: 10px;
  padding: 0 3px;
  font-family: 'SCD-5';
  line-height: 16px;
  font-size: 11px;
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
  border-radius: 4px;
}
.theme-table td .cont-area > p.in-tag {position: relative;}
/* .theme-table td .cont-area > p.in-tag .tag-add-division {
  position: absolute;
  top: 0px;
  left: 0;
  height: 14px;
  padding: 0 2px;
  font-family: 'SCD-5';
  line-height: 14px;
  font-size: 11px;
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
  border-radius: 4px;
} */
.theme-table td .cont-area > p.in-tag .tag-add-division {
  display: block;
  width: 22px;
  height: 14px;
  margin-left: auto;
  padding: 0 2px;
  font-family: 'SCD-5';
  line-height: 14px;
  font-size: 11px;
  color: #ff4c5d;
  border: 1px solid #ff4c5d;
  border-radius: 4px;
}
.modal-body .write-area.add-division .write-area-in > div:first-child {
  width: 100%;
  /* padding: 0; */
}
.modal-body .write-area.add-division .write-area-in > .tbl-basic {display: none;}
.modal-body .write-area.add-division .write-area-in > div:first-child .btn-area.add {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}
.modal-body .write-division-area {position: relative;}
.modal-body .write-division-area .po-right .total-num p {
  position: relative;
  display: inline-block;
}
.modal-body .write-division-area .po-right .total-num p + p {margin-left: 20px;}
.modal-body .write-division-area .po-right .total-num p + p::before {
  position: absolute;
  top: 3px;
  left: -10px;
  width: 1px;
  height: 13px;
  content: '';
  background-color: #aaa;
}
.modal-body .write-division-area .po-right .total-num span + span {margin-left: 5px;}
.modal-body .write-division-area .po-right .total-num .point {color: #ff4c5d;}
.modal-body .write-division-area .write-division-area-in {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 15px;
  padding: 0 25px;
  border: 4px solid rgba(14,92,233,.1);
  border-radius: 4px;
  box-sizing: border-box;
}
.modal-body .write-division-area .write-division-area-in::after {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  content: '';
  border-left: 1px dashed rgba(14,92,233,.3);
}
.modal-body .write-division-area .write-division-area-in .tbl-basic {
  position: relative;
  /* width: 544px; */
  width: calc(50% - 25px);
  margin: 0;
  padding: 25px 0;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic::before {
  position: absolute;
  top: 0;
  left: -25px;
  width: calc(100% + 50px);
  content: '';
  border-top: 1px dashed  rgba(14,92,233,.3);
}
.modal-body .write-division-area .write-division-area-in .tbl-basic:nth-child(1)::before,
.modal-body .write-division-area .write-division-area-in .tbl-basic:nth-child(2)::before {
  display: none;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic.cal-sts-10::after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px;
  left: -24px;
  width: calc(100% + 48px);
  height: calc(100% - 1px);
  font-size: 50px;
  color: rgba(14,92,233,.3);
  content: '확정';
  background-color: rgba(255,255,255,0.7);
  z-index: 100;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic.cal-sts-20::after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px;
  left: -24px;
  width: calc(100% + 48px);
  height: calc(100% - 1px);
  font-size: 50px;
  color: rgba(255,40,60,.3);
  content: '제외';
  background-color: rgba(255,255,255,0.7);
  z-index: 100;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic:nth-child(2n) {margin-left: 50px;}
.modal-body .write-division-area .write-division-area-in .tbl-basic .tbl-area {padding-top: 0;}
.modal-body .write-division-area .write-division-area-in .tbl-basic > .btn-area.top {
  position: absolute;
  top: 15px;
  right: -5px;
  z-index: 10;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic > .btn-area.top .btn-del {
  display: inline-block;
  position: relative;
  width: 21px;
  height: 21px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic > .btn-area.top .btn-del:hover {
  width: 23px;
  height: 23px;
  margin: -1px -1px 0 0;
  font-size: 16px;
  background-color: #333;
}
.modal-body .write-division-area .write-division-area-in .tbl-basic > .btn-area.top .btn-del::before {
  position: absolute;
  top: 3px;
  left: 4px;
  content: '\e80b';
  font-weight: bold;
  font-family: 'unifont';
}
.modal-body .write-division-area .write-division-area-in .tbl-basic:first-child > .btn-area.top .btn-del {display: none;}
.modal-body .write-division-area .write-division-area-in .tbl-basic.in-btn-del > .btn-area.top .btn-del {display: inline-block;}
.modal-body .write-division-area .write-division-area-in .tbl-area .btn-area > * {vertical-align: top;}
.modal-body .write-detail-area.add-division .write-detail-area-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.modal-body .write-detail-area.add-division .write-detail-area-in > div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: inherit;
  box-sizing: border-box;
}
.modal-body .write-detail-area.add-division .write-detail-area-in .usage-area {
  width: 100%;
  margin-top: 30px;
  padding: 30px 30px 13px;
  border: 1px solid #999;
  /* border-top: 0; */
  background-color: #fff;
  border: 4px solid rgba(14,92,233,.1);
  border-radius: 4px;
}
.modal-body .write-detail-area.add-division .write-detail-area-in .usage-area > div {
  position: relative;
  margin: 0 17px 17px 0;
  border: 1px solid #999;
  border-radius: 4px;
}
.modal-body .write-detail-area.add-division .write-detail-area-in .usage-area > div:nth-child(3n) {margin-right: 0;}
.modal-body .write-detail-area.add-division .write-detail-area-in .usage-area > div.on::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  content: '';
  border: 2px solid #0e5ce9;
  border-radius: 4px;
  z-index: 1;
}
.modal-body .write-detail-area.add-division .write-detail-area-in .receipt-write {
  width: 260px;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}
.modal-body .write-detail-area.add-division .write-detail-area-in div.on .receipt-write {background-color: #fffef2;}

/* - 정산 팝업 - */
.modal-body .action-area {
  position: relative;
  min-height: 34px;
  margin: -30px -30px 20px;
  padding: 10px 30px;
  text-align: center;
  background-color: #f6f6f8;
}
.modal-body .action-area .memo-box {
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: 10;
}
.modal-body .action-area .memo-box label {
  display: none;
  margin-right: 8px;
}
.modal-body .action-area .memo-box .inp {width: 220px;}
.modal-body .action-area .memo-box .inp-area + .btn-area {
  float: right;
  margin-left: 5px;
}
.modal-body .action-area .count-area {
  display: inline-block;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
}
.modal-body .action-area .count-area i {
  margin: -2px 10px 0;
  padding: 5px;
  font-weight: 600;
  font-size: 18px;
  color: #222;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
.modal-body .action-area .count-area i:hover {
  border-radius: 50%;
  background-color: #fff;
}
.modal-body .action-area > .btn-area:last-child {
  position: absolute;
  top: 10px;
  right: 30px;
}
.modal-body .action-area > .print-op-check {
  position: absolute;
  top: inherit;
  left: 30px;
}

/* 총금액 영역 추가 */
.modal-body .action-area .total {
  display: flex;
  align-items: center;
  gap: 3px;
  position: absolute;
  top: 10px;
  left: 30px;
  line-height: 34px;
  z-index: 10;
}
.modal-body .action-area .total span.point {
  margin-left: 5px;
  font-size: 16px;
}

/* - 사용내역 작성 팝업 내 - */
.inp-area.in-search {width: calc(100% - 81px);}
.inp-area.in-search .inp.inp-btn {
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.inp-area.in-search .btn-inp {right: -33px;}
.slt-area.after-check {width: calc(100% - 81px);}
.slt-area.after-check .slt {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.slt-area.after-check .slt + i {right: -33px;}

/* - 계정과목/비용항목 조회 팝업 - */
.modal-body .select-account-title-op {
  margin: -15px;
  padding: 20px;
  border-radius: 15px;
  background-color: #f9f9fa;
}
.modal-body .select-account-title-op .op-line {
  /* overflow: hidden; */
  display: inline-block;
  margin-left: -20px;
}
.modal-body .select-account-title-op .op-line + .op-line {
  position: relative;
  padding-top: 40px;
}
.modal-body .select-account-title-op .op-line + .op-line::before {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 20px);
  content: '';
  border-top: 1px dashed #e5e5e5;
}
.modal-body .select-account-title-op .op-line dl {
  float: left;
  width: 120px;
  margin-left: 20px;
  line-height: 22px;
}
.modal-body .select-account-title-op .op-line dl dt {
  margin-bottom: 2px;
  font-size: 14px;
}
.modal-body .select-account-title-op .op-line dl dd {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  color: #0e5ce9;
  cursor: pointer;
}
.modal-body .select-account-title-op .op-line dl dd:hover {text-decoration: underline;}
.modal-body .select-account-title-op .op-line dl dd::before {
  position: absolute;
  top: 0;
  left: -2px;
  font-family: "unifont";
  content: '\e8b7';
  font-size: 15px;
  color: #ddd;
}
.modal-body .select-account-title-op .op-line dl dd:hover::before {color: #0e5ce9;}

/* - 영수증 인쇄 팝업 (이전) - */
/* .action-area .btn-area.grid i {
  font-size: 32px;
  cursor: pointer;
}
.action-area .btn-area.grid i:hover {
  color: #0e5ce9; 서비스 컬러
}
.action-area .btn-area.grid i.on::before {
  font-weight: bold;
  color: #0e5ce9; 서비스 컬러
}
.print-area-in {
  position: relative;
  display: table;
  margin: 0 auto;
  width: 593px;
  height: 840px;
  text-align: center;
  border: 1px solid #ddd;
}
.print-area-in + .print-area-in {margin-top: 30px;}
.print-area-in .data-info {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 40px);
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  background-color: #f6f6f8;
}
.print-area-in .data-info + div {padding-top: 43px;}
.print-area-in .data-info + div div.img-box {
  position: relative;
  height: 777px;
  max-height: 777px;
  padding: 10px;
  vertical-align: top;
}
.print-area-in .data-info + .temp-col-2 div.img-box,
.print-area-in .data-info + .temp-col-2 div.receipt-box {
  display: table-cell;
  width: 276px;
}
.print-area-in .data-info + .temp-col-2 div.img-box:first-child,
.print-area-in .data-info + .temp-col-2 div.receipt-box:first-child {border-right: 1px solid #ddd;}
.print-area-in .data-info + .temp-col-2.vtl div.img-box {
  display: block;
  width: inherit;
  height: 378px;
}
.print-area-in .data-info + .temp-col-2.vtl div.img-box:first-child {
  border-bottom: 1px solid #ddd;
  border-right: 0;
}
.print-area-in .data-info + .temp-col-4 div.img-box {
  float: left;
  width: calc(50% - 21px);
  height: 377px;
}
.print-area-in .data-info + .temp-col-4 div.img-box + div.img-box {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.print-area-in .data-info + .temp-col-4 div.img-box + div.img-box:nth-child(2n+1) {border-left: 0;}
.print-area-in .data-info .user-name {font-family: "SCD-5";}
.print-area-in .data-info .data-count {
  position: absolute;
  top: 12px;
  right: 20px;
  color: #999;
}
.print-area-in .data-info .data-count span {color: #222;}
.print-area-in .data-info span + span {margin-left: 15px;}
.print-area-in img {
  max-width: 100%;
  max-height: 100%;
}
.print-area-in .data-info + .temp-col-1 img {max-height: 779px;}
.print-area-in .data-info + div div.receipt-box {
  display: table-cell;
  float: none;
  width: 593px;
  height: 797px;
  margin: 0 auto;
  padding: 0 20px;
  background-color: transparent;
}
.print-area-in .data-info + div div.receipt-in {
  width: 220px;
  margin: 20px auto 0;
  text-align: left;
  border: 1px solid #ddd;
  box-shadow: none;
}
.print-area-in .data-info + div div.receipt-in::before,
.print-area-in .data-info + div div.receipt-in::after {display: none;} */

/* - 영수증 인쇄 팝업 - */
.action-area .btn-area.grid i {
  font-size: 32px;
  cursor: pointer;
}
.action-area .btn-area.grid .btn-print {
  position: relative;
  margin-left: 15px;
}
.action-area .btn-area.grid .btn-print::after {
  position: absolute;
  top: 5px;
  left: -10px;
  width: 1px;
  height: 22px;
  content: '';
  background-color: #ccc;
}
.action-area .btn-area.grid i:hover {
  color: #0e5ce9;
}
.action-area .btn-area.grid i.on::before {
  font-weight: bold;
  color: #0e5ce9;
}
.modal-body > div + .print-area {
  width: 708px;
  margin: 20px auto 0;
}
.print-area-in {
  overflow: hidden;
  position: relative;
  display: table;
  margin: 0 auto;
  width: 100%;
  height: 1044px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.print-area-in + div,
 div + .print-area-in {margin-top: 30px;}
.print-area-in .data-info {
  padding: 6px 8px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  background-color: #f6f6f8;
}
.print-area-in .data-info .user-name {font-family: "SCD-5";}
.print-area-in .data-info .data-count {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #999;
}
.print-area-in .data-info .data-count span {color: #222;}
.print-area-in .data-info span + span {margin-left: 15px;}
.print-area-in .data-info + div .print-box {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.print-area-in .data-info + .temp-col-2 .print-box {
  float: left;
  width: 50%;
  /* width: 354px; */
  height: 1012px;
}
.print-area-in .data-info + .temp-col-2 .print-box:first-child {border-right: 1px solid #ddd;}
.print-area-in .data-info + .temp-col-2-vtl .print-box {
  float: left;
  width: 100%;
  height: 506px;
}
.print-area-in .data-info + .temp-col-2-vtl .print-box:last-child {border-top: 1px solid #ddd;}
.print-area-in .data-info + .temp-col-4 .print-box {
  float: left;
  width: 50%;
  /* width: 354px; */
  height: 506px;
}
.print-area-in .data-info + .temp-col-4 .print-box + div.print-box {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.print-area-in .data-info + .temp-col-4 .print-box + .print-box:nth-child(2) {border-top: 0;}
.print-area-in .data-info + .temp-col-4 .print-box + .print-box:nth-child(2n+1) {border-left: 0;}
.print-area-in .print-box.img {padding: 10px;}
.print-area-in .print-box img {
  max-width: 328px;
  max-height: 100%;
}
.print-area-in .print-box .print-summary + img {max-height: calc(100% - 50px);}
.print-area-in .print-box.width-100 img {
  width: 100%;
  max-width: inherit;
  max-height: inherit;
}
.print-area-in .print-box.height-100 img {
  max-width: 100%;
  height: 1000px;
  max-height: inherit;
}
.print-area-in .print-box.height-100 .print-summary + img {height: 940px;}
.print-area-in .print-box .receipt-in {
  width: 220px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid #ddd;
  /* box-shadow: none; */
}
.print-area-in .print-box .receipt-in.receipt-etax {
  width: inherit;
  border: 0;
}
.print-area-in .print-box .receipt-in::before,
.print-area-in .print-box .receipt-in::after {display: none;}
.print-area-in .print-box .receipt-comp div + div {
  margin-top: 12px;
  padding-top: 12px;
}
.print-area-in .print-box .receipt-comp .line-2nd {
  height: 125px;
  box-sizing: border-box;
}
.print-area-in .print-box .receipt-comp .line-2nd dl dd.address {
  height: inherit;
  margin: 3px 0 0 0;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

/* 상단 요약 추가 */
.print-area-in .print-box .print-summary {
  position: relative;
  margin: -10px -10px 10px;
  text-align: left;
}
.print-area-in .print-box .print-summary .summary-attach {
  position: absolute;
  top: 0;
  right: 5px;
}
.print-area-in .print-box .print-summary .summary-attach span {
  font-size: 11px;
  color: #999;
}
.print-area-in .print-box .print-summary ul {
  padding: 2px 0;
  /* border: 1px solid #ccc; */
  background-color: #fffcd2;
}
.print-area-in .print-box .print-summary ul li {
  overflow: hidden;
  height: 18px;
  padding: 0 6px;
  line-height: 18px;
  /* word-wrap: break-word; */
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  font-size: 12px;
  /* background-color: #fff78d; */
  /* border: 1px solid #ccc; */
}
/* .print-area-in .print-box .print-summary ul li + li {margin-top: 1px;} */
.print-area-in .print-box .print-summary ul li .summary-op {
  overflow: hidden;
  position: relative;
  display: inline-block;
  max-width: 75%;
  margin-right: 16px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.print-area-in .print-box .print-summary ul li .summary-op.cost-total {font-family: 'SCD-5';}
.print-area-in .print-box .print-summary ul li .summary-op:last-child {margin-right: 0;}
.print-area-in .print-box .print-summary ul li .add-line {
  display: inline-block;
  position: relative;
  top: -3px;
  left: -8px;
  width: 1px;
  height: 11px;
  background-color: #999;
}

/* print.css */
/* @media print {
  html, body,
  .modal-body > div + .print-area,
  .modal-body .print-area-in {
    width: 210mm;
    height: 297mm;
    margin: 0;
  }
  .page {
    margin: 0;
    border: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  .print-area-in .data-info + div .print-box {padding: 0;}
} */
@media print {
  html, body {
    width: 210mm;
    /* height: 297mm; */
    margin: 0;
  }
  .content-box .doc-view {
    width: 210mm;
    /* height: 297mm; */
    margin: 0!important;
    padding: 20px;
    box-sizing: border-box;
  }
  .print-area-in {
    width: 210mm;
    height: 297mm;
    margin: 0;
    box-sizing: border-box;
  }
}
@page {margin: 0!important;}

/* - 시스템 공지 팝업 - */
.modal-open .modal.modal-noti .modal-content {background-color: #f6f6f8;}
.modal-open .modal.modal-noti .modal-header {
  position: relative;
  padding: 35px 0 30px;
  color: #222;
  background-color: inherit;
}
.modal.modal-noti .modal-header .modal-title {
  text-align: center;
  font-size: 24px;
}
.modal.modal-noti .modal-header .modal-title i {
  margin-right: 12px;
  padding: 5px;
  font-size: 34px;
  color: #fff;
  background-color: #ff4c5d;
  border-radius: 36px;
}
.modal.modal-noti .modal-body {
  overflow: auto;
  height: 460px;
  margin: 0 30px;
  padding-right: 15px;
  background-color: #fff;
}
.modal.modal-noti .noti-box {
  overflow: hidden;
  max-width: 840px;
}
.modal.modal-noti .noti-box + .noti-box {margin-top: 60px;}
.modal.modal-noti .noti-box.img-only {
  padding-right: 15px;
  text-align: center;
}
.modal.modal-noti .noti-box .img-area,
.modal.modal-noti .noti-box .cont-area {
  float: left;
}
.modal.modal-noti .noti-box.col-50 .img-area,
.modal.modal-noti .noti-box.col-50 .cont-area {
  width: 50%;
}
.modal.modal-noti .noti-box .img-area {
  display: inline-block;
  margin-bottom: 20px;
  text-align: center;
}
.modal.modal-noti .noti-box.col-50 .img-area {
  width: calc(50% - 20px);
  margin: 0 10px 0 0;
}
.modal.modal-noti .noti-box.col-50.align-r .img-area {margin: 0 0 0 10px;}
.modal.modal-noti .noti-box.col-50 .cont-area {
  width: calc(50% - 10px);
  margin: 0 0 0 10px;
}
.modal.modal-noti .noti-box.col-50.align-r .cont-area {margin: 0 10px 0 0;}
.modal.modal-noti .noti-box .img-area img {width: 100%;}
.modal.modal-noti .noti-box .cont-area {line-height: 20px;}
.modal.modal-noti .noti-box .cont-area p {
  padding-left: 17px;
  text-indent: -17px;
}
.modal.modal-noti .modal-footer {padding: 0;}
.modal.modal-noti .btn-area {
  overflow: hidden;
  margin: 30px 30px 0;
}
.modal.modal-noti .btn-area button {
  position: relative;
  float: left;
  width: 50%;
  height: 55px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  color: #222;
  border: 1px solid #ddd;
}
.modal.modal-noti .btn-area button.btn-not-again {color: #ff4c5d;}
.modal.modal-noti .btn-area button:hover::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e808';
  margin-right: 5px;
  font-weight: bold;
  font-size: 20px;
}
.modal.modal-noti .btn-area button + button {margin-left: -1px;}
.modal.modal-noti .btn-area + p {
  padding: 15px;
  font-size: 13px;
  color: #999;
}
.modal.modal-noti .btn-area + p i {font-size: 18px;}
.modal.modal-noti .mCSB_container_wrapper {margin: 0;}
.modal.modal-noti .mCSB_scrollTools a + .mCSB_draggerContainer {margin: 0;}
.modal.modal-noti .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger {height: 10px;}
.modal.modal-noti .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  width: 10px;
  margin: 0 3px;
}
.modal.modal-noti .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  /* filter: alpha(opacity=10); */
  opacity: 0.1;
}

/* - 세팅 안내 팝업 - */
.system-set-guide .top-area {
  /* margin: 70px auto 0; */
  margin-top: 10px;
  text-align: center;
  line-height: 25px;
  font-size: 21px;
  color: #fff;
}
.system-set-guide .top-area p {font-family: 'SCD-3';}
.system-set-guide .top-area button {
  position: relative;
  height: 48px;
  margin-top: 30px;
  padding: 0 25px 0 48px;
  line-height: 48px;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #222;
}
.system-set-guide .top-area button i {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 28px;
}
.system-set-guide .flow-chart {margin-top: -25px;}
.system-set-guide .flow-chart ul,
.system-set-guide .flow-chart > div {
  overflow: hidden;
  width: 830px;
  margin: 0 auto;
  padding: 60px 55px 55px 70px;
  border: 1px dashed #999;
  border-radius: 30px;
}
.system-set-guide .flow-chart ul {padding: 60px 55px 55px 70px;}
.system-set-guide .flow-chart ul li {
  position: relative;
  float: left;
  width: 145px;
  height: 145px;
  padding: 10px;
  border-radius: 50%;
  background-color: #fff0ac;
}
.system-set-guide .flow-chart ul li.no-cont {background-color: #fff;}
.system-set-guide .flow-chart ul li::after {
  position: absolute;
  top: 65px;
  right: -40px;
  content: '\e803';
  font-family: "unifont";
  font-weight: bold;
  font-size: 32px;
  color: #fff;
}
.system-set-guide .flow-chart ul li:last-child::before,
.system-set-guide .flow-chart ul li:last-child::after {
  display: none;
}
.system-set-guide .flow-chart ul li + li {margin-left: 50px;}
.system-set-guide .flow-chart ul li:nth-child(5) {margin-left: 0;}
.system-set-guide .flow-chart ul li:nth-child(n + 5) {margin-top: 25px;}
.system-set-guide .flow-chart ul li p {
  text-align: center;
  letter-spacing: -0.05em;
  font-family: 'SCD-5';
  font-size: 17px;
}
.system-set-guide .flow-chart ul li p span {
  display: block;
  margin-top: 20px;
  font-family: 'SCD-7';
  font-size: 25px;
  color: #222;
}
.system-set-guide .flow-chart ul li button {
  margin: 10px 0 0 36px;
  padding: 5px 10px;
  color: #fff;
  border-radius: 25px;
}
.system-set-guide .flow-chart ul li .btn-modify {background-color: #222;}
.system-set-guide .flow-chart ul li .btn-new {background-color: #0e5ce9;}
.system-set-guide .flow-chart > div {padding: 60px 55px 55px;}
.system-set-guide .flow-chart .btn-area.step-link {position: relative;}
.system-set-guide .flow-chart .btn-area.step-link button {
  position: absolute;
  height: 29px;
  margin-left: 5px;
  padding: 0 10px;
  line-height: 29px;
  font-size: 13px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 29px;
  background-color: #222;
}
.system-set-guide .flow-chart .btn-area.step-link .no-btn {
  height: 0;
  text-indent: -9999px;
  color: rgba(255,255,255,0);
}

 /* 모달 스타일 추가 */
.modal.modal-system-set-guide {
  /* background-color: rgba(0,0,0,.6); */
  background-color: #333;
}
.modal-system-set-guide .modal-dialog {
  width: inherit;
  margin: 0;
}
.modal-system-set-guide .modal-header, 
.modal-system-set-guide .modal-content {
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
.modal-system-set-guide .modal-header {height: 30px;}
.modal-system-set-guide .modal-header i.btn-close {
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
}
.modal-system-set-guide .modal-header i.btn-close::before {font-weight: bold;}
.modal-system-set-guide .modal-body {
  min-width: 900px;
  padding: 0;
}
.modal-system-set-guide .modal-dialog {
  width: inherit;
  margin: 0;
}
.modal-system-set-guide .modal-footer {
  width: 830px;
  margin: 20px auto 0;
  padding: 20px;
}
.modal-system-set-guide .modal-footer button {
  height: 48px;
  padding: 0 25px;
  line-height: 48px;
  font-size: 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
}
.modal-system-set-guide .modal-footer button:hover {border: 1px solid rgba(255,255,255,1);}
.modal-system-set-guide .modal-footer button::after,
.modal-system-set-guide .modal-footer button:hover::after {
  background-color: transparent;
}

 /* 개인비용처리 담당자, 사용자 팝업 추가 */
.system-set-guide .flow-chart .pes-admin {width: 965px;}
.system-set-guide .flow-chart .pes-admin .btn-area  {
  width: 965px;
  height: 405px;
  background: url('../images/bg-pes-admin-guide.png') 0 0 no-repeat;
  background-size: 965px 405px;
}
.system-set-guide .flow-chart .pes-admin .btn-area.step-link .step-start {top: 231px; left: 40px;}
.system-set-guide .flow-chart .pes-admin .btn-area.step-link .step1-2 {top: 107px; left: 441px;}
.system-set-guide .flow-chart .pes-admin .btn-area.step-link .step1-3 {top: 107px; left: 648px;}
.system-set-guide .flow-chart .pes-admin .btn-area.step-link .step1-4 {top: 107px; left: 855px;}
.system-set-guide .flow-chart .pes-admin .btn-area.step-link .step2-1 {top: 328px; left: 234px;}
.system-set-guide .flow-chart .pes-user {width: 874px;}
.system-set-guide .flow-chart .pes-user .btn-area  {
  width: 874px;
  height: 474px;
  background: url('../images/bg-pes-user-guide-2024.png') 0 0 no-repeat;
  background-size: 874px 474px;
}

/* - 이벤트 이미지 팝업 - */
.modal.modal-event-img {background-color: rgba(0,0,0,.4);}
.modal.modal-event-img .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: -30px 0 0 0;
  padding: 0;
}
.modal.modal-event-img .modal-header {
  padding: 0;
  border: 0;
  background-color: transparent;
}
.modal.modal-event-img .modal-header i.btn-close {
  top: 18px;
  right: 18px;
  font-size: 28px;
  z-index: 1;
}
.modal.modal-event-img .modal-content {
  overflow: hidden;
  width: 700px;
  height: 655px;
  border: 0;
  background-color: transparent;
}
.modal.modal-event-img .modal-body,
.modal.modal-event-img .modal-body .cont-area {
  width: 100%;
  height: 610px;
  padding: 0;
}
.modal.modal-event-img .modal-body .cont-area {position: relative;}
.modal.modal-event-img .modal-body .cont-area .event-img {
  width: 100%;
  height: 100%;
}
.modal.modal-event-img .modal-body .cont-area.event-2209-pes .event-img {
  background: url('../images/2209-event-pes.jpg') 0 0 no-repeat;
  background-size: 700px 610px;
}
.modal.modal-event-img .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 45px;
  padding: 0 25px;
  color: #fff;
  background-color: #222;
}
.modal.modal-event-img .modal-footer .checkbox-area input[type=checkbox] + .check-label {padding-left: 25px;}
.modal.modal-event-img .modal-footer .checkbox-area input[type=checkbox] + .check-label::before {background-color: transparent;}
.modal.modal-event-img .modal-footer .checkbox-area input[type=checkbox]:checked + .check-label::before {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.modal.modal-event-img .modal-footer .checkbox-area input[type=checkbox] + .check-label::after {
  border-color: #fff;
  background-color: transparent;
}
.modal.modal-event-img .modal-footer .btn-area .btn-close {cursor: pointer;}
.modal.modal-event-img .modal-footer .btn-area .btn-close::before {
  display: inline-block;
  position: relative;
  top: 1px;
  height: 13px;
  padding-left: 10px;
  content: '';
  border-left: 1px solid rgba(255,255,255,.5);
}
.modal.modal-event-img .modal-body .cont-area.event-2209-pes .mailto {
  position: absolute;
  bottom: 49px;
  left: 228px;
  width: 192px;
  height: 20px;
}

/* - 사용가능 카드 리스트 - */
.credit-card-list {margin: -15px 0 0 -10px;}
.credit-card-list a {
  position: relative;
  display: inline-block;
  width: 122px;
  margin: 15px 0 0 10px;
  padding: 35px 25px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.credit-card-list a:hover {border-color: #999;}
.credit-card-list a:hover img {
  position: relative;
  top: -2px;
}
.credit-card-list a::after {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: inline-block;
  content: '';
}
.credit-card-list a:hover::after {
  font-family: "unifont";
  content: '\e82a';
  font-size: 26px;
}

/* - 카드 관리 - */
.tbl-card {
  overflow: hidden;
  position: relative;
}
/* .tbl-card .list-total {margin-bottom: 15px;} */
/* .tbl-card > .btn-area {margin-bottom: 20px;} */
.tbl-card.theme-card .my-card-list {
  /* margin: 50px 0 0 -40px; */
  /* margin-left: -40px; */
  margin: 20px 0 0 -40px;
  clear: both;
}
.tbl-card.theme-card .my-card-set {
  position: relative;
  display: inline-block;
  width: 400px;
  margin: 0 0 40px 40px;
  vertical-align: top;
  animation: fadeIn .5s ease-in-out 1;
}
.tbl-card .my-card-set .my-card {
  position: relative;
  /* float: left; */
  display: inline-block;
  width: 358px;
  height: 200px;
  padding: 18px 20px 20px;
  vertical-align: top;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 7px 7px rgba(0,0,0,.02);
  z-index: 20;
}
.tbl-card .my-card-set .my-card.unused {background-color: #fafafa;}
.tbl-card .my-card-set .my-card.card-temp {background-color: #fffef2;}
/* .tbl-card .my-card-set .my-card.card-ing {background-color: #fff9f2;} */
.tbl-card .my-card-set .my-card.unused::after {
  display: inline-block;
  content: "사용 안함";
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 48px;
  color: rgba(34,34,34,.07);
}
.tbl-card .my-card-set .my-card.card-temp::after {
  display: inline-block;
  content: "임시저장";
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 48px;
  color: rgba(34,34,34,.07);
}
.tbl-card .my-card-set .my-card.unused *,
.tbl-card .my-card-set .my-card.card-temp * {color: #bbb;}
.tbl-card .my-card-set .my-card.unused img,
.tbl-card .my-card-set .my-card.unused .card-badge,
.tbl-card .my-card-set .my-card.card-temp img,
.tbl-card .my-card-set .my-card.card-temp .card-badge {opacity: 0.25;}
.tbl-card .my-card img {display: block;}
.tbl-card .my-card .card-memo {
  position: absolute;
  bottom: 19px;
  right: 18px;
  padding: 1px 6px;
  padding-right: 15px;
  font-size: 12px;
  background-color: #FFF78D;
}
.tbl-card .my-card .card-memo.empty {
  color: #999;
  background-color: #eee;
}
.tbl-card .my-card .card-memo::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: #ecdd13 #fff;
}
.tbl-card .my-card .card-memo.empty::before {border-color: #ddd #fff;}
.tbl-card .my-card .last-update {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 12px;
  color: #999;
}
.tbl-card .my-card .last-update.caution {color: #ff4c5d;}
.tbl-card .my-card .last-update.caution::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e807';
  margin: -2px 3px 0 0;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 600;
}
.tbl-card .my-card .last-update span {margin-left: 5px;}
.tbl-card .my-card .card-badge.right {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tbl-card .my-card .card-badge .badge {
  float: left;
  padding: 4px 10px;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  border-radius: 20px;
}
.tbl-card .my-card .card-badge .badge + .badge {margin-left: 5px;}
.badge-certify {background-color: #999;}
.badge-idpw {background-color: #ff8b00;}
.badge-if {background-color: #5bc14d;}
.tbl-card .card-nick,
.tbl-card .card-user {
  display: inline-block;
  color: #0e5ce9;
}
.tbl-card .my-card .card-nick {
  overflow: hidden;
  max-width: 185px;
  margin-bottom: -3px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tbl-card .my-card .card-nick.block {
  display: block;
  max-width: inherit;
}
.tbl-card .my-card .card-user {
  display: inline-block;
  margin-top: 5px;
  font-size: 15px;
}
.tbl-card .my-card .card-num {
  display: inline-block;
  margin: 2px 0;
  font-family: "SCD-3";
  font-size: 16px;
  color: #555;
}
.tbl-card .my-card .write-status {
  position: absolute;
  top: 22px;
  right: 20px;
  font-size: 12px;
}
.tbl-card .my-card .write-status p {
  display: inline-block;
  height: 21px;
  padding: 0 8px;
  line-height: 21px;
  border-radius: 20px;
}
.tbl-card .my-card .write-status .fin {background-color: #ebecef;}
.tbl-card .my-card .write-status .ing {background-color: rgba(14,92,233,.15);}
.tbl-card .my-card .write-status p span {
  margin-left: 5px;
  font-family: "SCD-5";
}
.tbl-card .receipt-total,
.tbl-card .write-total,
.tbl-card .limit-total,
.tbl-card .use-num-total,
.tbl-card .use-cost-total,
.tbl-card .issue-date,
.tbl-card .expiry-date {
  position: relative;
  font-size: 15px;
  color: #777;
}
.tbl-card .receipt-total,
.tbl-card .use-num-total {
  /* margin-top: 14px; */
  position: absolute;
  width: calc(100% - 40px);
  top: 122px;
  left: 20px;
}
.tbl-card .write-total,
.tbl-card .use-cost-total {
  /* margin-top: 2px; */
  position: absolute;
  width: calc(100% - 40px);
  top: 148px;
  left: 20px;
}
.tbl-card .expiry-date {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 76px;
  left: 20px;
}
.tbl-card .issue-date {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 48px;
  left: 20px;
}
.tbl-card .limit-total {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 20px;
  left: 20px;
}
.tbl-card .receipt-total .total-cost,
.tbl-card .write-total .total-cost,
.tbl-card .limit-total .total-cost,
.tbl-card .use-cost-total .total-cost,
.tbl-card .use-num-total .total-num {
  position: absolute;
  top: 0;
  right: 0;
  /* font-family: "SCD-5"; */
  color: #ff4c5d;
}
.tbl-card .receipt-total .total-num,
.tbl-card .write-total .total-num {
  position: absolute;
  top: 0;
  left: 122px;
  font-family: 'SCD-5';
  color: #222;
}
.tbl-card .expiry-date span,
.tbl-card .issue-date span {
  position: absolute;
  top: 0;
  right: 0;
  /* font-family: "SCD-5"; */
  color: #222;
}
.tbl-card .use-num-total .total-num {color: #222;}
.tbl-card .issue-date span {color: #999;}
.tbl-card .total-num .uni-red {font-size: 14px;}
.tbl-card .receipt-total .total-cost,
.tbl-card .write-total .total-cost,
.tbl-card .limit-total .total-cost,
.tbl-card .use-cost-total .total-cost,
.tbl-card .use-num-total .total-num,
.tbl-card .expiry-date span,
.tbl-card .issue-date span {
  top: -1px;
  font-family: 'SCD-5';
  font-size: 17px;
}
.tbl-card .my-card-set .btn-area {
  height: 36px;
  margin-top: -10px;
  padding: 18px 15px 10px;
  border-radius: 12px;
  background-color: #ebecef;
  z-index: 10;
}
.tbl-card .my-card-set .btn-area span {
  margin-top: 5px;
  padding: 4px 8px;
  /* line-height: 36px; */
  font-size: 13px;
  border-radius: 6px;
  background-color: rgba(255,255,255,.5);
  cursor: pointer;
}
.tbl-card .my-card-set .btn-area span:hover {background-color: rgba(255,255,255,1);}
.tbl-card .my-card-set .btn-area i {
  padding: 5px;
  font-size: 27px;
  cursor: pointer;
}
.tbl-card .my-card-set .btn-area i + i {margin-left: 10px;}
.tbl-card .my-card-set .btn-area i:hover,
.tbl-card .my-card-set .btn-area i.on {
  border-radius: 50%;
  background-color: #fff;
}

/* 법인카드 정산 옵션 추가 */
.tbl-card .my-card.comp-calculate .receipt-total {top: 106px;}
.tbl-card .my-card.comp-calculate .receipt-status {
  position: absolute;
  top: 135px;
  left: 20px;
  width: calc(100% - 60px);
  padding: 5px 10px;
  font-size: 13px;
  color: #777;
  /* border-top: 1px solid #ddd; */
  background-color: #f5fbff;
}
.tbl-card .my-card.comp-calculate .receipt-status p {
  float: left;
  position: relative;
  width: calc(50% - 10px);
  margin: 2px 0;
  color: #999;
}
.tbl-card .my-card.comp-calculate .receipt-status p:nth-child(2n) {margin-left: 20px;}
.tbl-card .my-card.comp-calculate .receipt-status p .total-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #0e5ce9;
}

/* - 카드 관리 (라인형 추가) - */
.tbl-card.theme-line {overflow: inherit;}
.tbl-card.theme-line .my-card-list {margin: inherit;}
.tbl-card.theme-line .my-card-list .my-card-set {
  position: inherit;
  display: inherit;
  width: inherit;
  margin: inherit;
  margin-top: 10px;
  vertical-align: inherit;
  animation: none;
}
.tbl-card.theme-line .my-card-list .my-card-set.on {border: 1px solid #0e5ce9;}
.tbl-card.theme-line .my-card-list .my-card-set.unused {background-color: #fafafa;}
.tbl-card.theme-line .my-card-list .my-card-set.card-temp {background-color: #fffef2;}
.tbl-card.theme-line .my-card-list .my-card-set table {background-color: inherit;}
.tbl-card.theme-line .my-card-list .my-card-set.unused td,
.tbl-card.theme-line .my-card-list .my-card-set.card-temp td {position: relative;}
.tbl-card.theme-line .my-card-list .my-card-set.unused td:last-child::after {
  display: inline-block;
  content: "사용안함";
  position: absolute;
  bottom: 10px;
  right: 15px;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255,76,93,.7);
}
.tbl-card.theme-line .my-card-list .my-card-set.card-temp td:last-child::after {
  display: inline-block;
  content: "임시저장";
  position: absolute;
  bottom: 10px;
  right: 15px;
  white-space: nowrap;
  font-size: 13px;
  color: rgba(255,76,93,.7);
}
.tbl-card.theme-line .my-card-list .my-card-set.unused img,
.tbl-card.theme-line .my-card-list .my-card-set.unused .card-badge,
.tbl-card.theme-line .my-card-list .my-card-set.card-temp img,
.tbl-card.theme-line .my-card-list .my-card-set.card-temp .card-badge {opacity: .25;}
.tbl-card.theme-line .my-card-list .my-card-set.unused p,
.tbl-card.theme-line .my-card-list .my-card-set.card-temp p {color: #bbb;}
.tbl-card.theme-line table tr td {
  padding: 15px 0;
  font-size: 14px;
}
.tbl-card.theme-line .my-card-list td .list-card {
  margin: -6px 0 0 10px;
  text-align: left;
}
.tbl-card.theme-line .my-card-list td .card-nick {
  overflow: hidden;
  display: -webkit-box;
  margin-top: 5px;
  text-overflow: ellipsis;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tbl-card.theme-line .my-card-list td .issue-date {
  position: inherit;
  width: inherit;
  bottom: inherit;
  left: inherit;
  font-size: inherit;
  color: #999;
}
.tbl-card.theme-line .my-card-list td .card-badge {
  overflow: hidden;
  margin-top: 2px;
}
.tbl-card.theme-line .my-card-list td .card-badge .badge {
  float: left;
  font-weight: normal;
  font-size: 11px;
}
.tbl-card.theme-line .my-card-list td .card-badge .badge + .badge {margin-left: 5px;}
.tbl-card.theme-line .my-card-list td .add-btn-area {
  float: right;
  padding: 0 20px;
}

/* - 카드 관리 (테이블형 추가) - */
.tbl-card.theme-table .my-card-list {margin-top: inherit;}
/* .tbl-card.theme-table .my-card-list .my-card-set.card-ing table, */
.tbl-card.theme-table .my-card-list .my-card-set.card-temp table {
  background-color: #fffef2;
}
.tbl-card.theme-table .my-card-list .my-card-set.unused table {background-color: #fafafa;}
.tbl-card.theme-table .my-card-list .my-card-set.on table {background-color: rgba(14,92,233,.05);}
.tbl-card.theme-table .my-card-list .my-card-set.unused img,
.tbl-card.theme-table .my-card-list .my-card-set.unused .card-badge,
.tbl-card.theme-table .my-card-list .my-card-set.card-temp img,
.tbl-card.theme-table .my-card-list .my-card-set.card-temp .card-badge {
  opacity: .25;
}
.tbl-card.theme-table .my-card-list .my-card-set.unused p,
.tbl-card.theme-table .my-card-list .my-card-set.unused p *,
.tbl-card.theme-table .my-card-list .my-card-set.card-temp p,
.tbl-card.theme-table .my-card-list .my-card-set.card-temp p * {
  color: #bbb;
}
.tbl-card.theme-table .my-card-list td.in-logo {
  padding: 5px 8px;
  text-align: left;
}
.tbl-card.theme-table .my-card-list td.in-logo .list-logo {
  width: inherit;
  height: 26px;
}
.tbl-card.theme-table .my-card-list td.in-logo .list-logo img {max-height: 26px;}
.tbl-card.theme-table .my-card-list .card-badge .badge {
  padding: 3px 6px;
  font-weight: normal;
  font-size: 11px;
}
.tbl-card.theme-table .card-nick {
  display: inline;
  margin-left: 8px;
}
.tbl-card.theme-table td .add-btn-area {float: right;}

/* - 정산완료 - */
/* 카드 - 이전 */
.total-area {
  margin-bottom: 40px;
  padding: 20px;
  background-color: rgba(229,229,233,.3);
}
.total-area .total-area-in {
  overflow: hidden;
  width: 810px;
  margin: 0 auto;
  padding: 10px;
}
.total-area .total-area-in > * {float: left;}
.total-area dl {
  position: relative;
  width: 200px;
  height: 100px;
  padding: 20px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 7px 7px rgba(0,0,0,.02);
}
.total-area dl.card-total {background-color: #fffef2;}
.total-area dl.card-total::before {
  position: absolute;
  top: 37px;
  left: calc(50% - 45px);
  display: inline-block;
  font-family: "unifont";
  content: '\e83e';
  line-height: 65px;
  font-size: 45px;
  color: #e5e5e5;
}
.total-area dl::after {
  position: absolute;
  top: 37px;
  left: calc(50% - 20px);
  display: inline-block;
  font-family: "unifont";
  line-height: 65px;
  font-size: 45px;
  color: #e5e5e5;
}
.total-area dl.user-card-total::after {
  content: '\e83e';
  /* color: rgba(0,192,181,.2); */
}
.total-area dl.comp-card-total::after {
  content: '\e80c';
  /* color: rgba(14,92,233,.2); */
}
.total-area dl.card-total::after {
  left: inherit;
  right: calc(50% - 45px);
  content: '\e80c';
}
.total-area dl dd {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 15px;
  color: #ff4c5d;
}
.total-area dl.card-total dd {font-family: "SCD-5";}
.total-area .total-area-in > span {
  margin: 0 15px;
  line-height: 142px;
  font-family: "SCD-3";
  font-size: 20px;
}

/* 변경 */
.total-area-line {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  padding: 20px;
  text-align: center;
  border: 3px solid #eee;
  border-radius: 15px;
  background-color: #fff;
}
.total-area-line::after {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-block;
  font-family: "unifont";
  content: '\e805';
  font-size: 68px;
  color: #eee;
}
.total-area-line dl,
.total-area-line dl dt,
.total-area-line dl dd {
  display: inline-block;
}
.total-area-line dl {
  position: relative;
  margin: 0 15px;
  font-size: 16px;
}
.total-area-line dl.card-total {margin-left: 0;}
.total-area-line dl::before {
  position: absolute;
  top: 0;
  left: -28px;
  font-family: "unifont";
  font-size: 24px;
  color: rgba(14,92,233,.5);
}
.total-area-line dl.user-card-total::before {
  left: -26px;
  content: '\e83e';
}
.total-area-line dl.comp-card-total::before {content: '\e80c';}
.total-area-line dl.etax-total::before {content: '\e853';}
.total-area-line dl + span {margin-right: 22px;}
/* .total-area-line dl.etax-total + span {margin-right: 0;} */
.total-area-line dl dd {
  margin-left: 5px;
  color: #ff4c5d;
}
.total-area-line dl.card-total dd {
  font-family: "SCD-5";
  font-size: 18px;
}
.no-settle {
  display: inherit !important;
  position: absolute;
  top: auto;
  left: 10px;
  color: rgba(255,76,93,.8);
}
.no-settle i {
  font-size: 24px;
  margin: -2px -1px 0 0;
}


/* --- approval --- */
/* - 결재목록 (카드) - */
.theme-card .card-list-area {
  overflow: hidden;
  /* margin: 20px 0 0 -40px; */
}
/* .theme-card .card-list-area::before {
  display: inline-block;
  content: '';
  width: 100%;
  margin-left: 40px;
  padding-top: 20px;
  border-top: 1px solid #f5f5f5; 
} */
.theme-card .card-list-area .card-box {
  overflow: hidden;
  position: relative;
  float: left;
  width: 370px;
  height: 225px;
  margin: 0 0 40px 40px;
  border: 1px solid #ddd;
  border-left: 2px solid #999;
  border-radius: 4px;
  background-color: #fff;
}
.tbl-list .card-list-area .card-box.on {border: 1px solid #ff8b00;}
.tbl-list .card-list-area .card-box.focus {border: 1px solid #2980de !important;}
.tbl-list .card-list-area .card-box {position: relative;}
.theme-card .card-list-area .card-box:hover {
  /* margin-top: -5px; */
  margin-top: 35px !important; /* custom에서 반영된 값 적용 */
  padding-bottom: 5px;
  box-shadow: 0 7px 7px rgba(0, 0, 0, .07);
  /* cursor: pointer; */
}
.tbl-list .card-list-area .card-box:hover * {z-index: 20;}
.tbl-list .card-list-area .card-box::before,
.tbl-list .card-list-area .card-box::after {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  content: '';
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s, -o-transform 0.4s, transform 0.4s;
}
.tbl-list .card-list-area .card-box::before {
  border-top: 1px double #555;
  border-bottom: 1px double #555;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
.tbl-list .card-list-area .card-box::after {
  border-right: 1px double #555;
  /* border-left: 1px double #555; */
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}
.tbl-list .card-list-area .card-box:hover::before,
.tbl-list .card-list-area .card-box:hover::after {
  opacity: 0.7;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.theme-card .card-list-area .card-box:hover .current-user {min-height: 61px;}
.card-list-area .card-box.progress-ing {border-left: 2px solid #ff8b00;}
.card-list-area .card-box.progress-rej {border-left: 2px solid #ff4c5d;}
.card-list-area .card-box.progress-agree {border-left: 2px solid #00c0b5;}
.card-list-area .card-box.progress-save {border-left: 2px solid #4C9675;}
.card-list-area .card-box.progress-cancel {border-left: 2px solid #A77581;}
.card-list-area .card-box.progress-retr {border-left: 2px solid #8398B5;}
.card-box > div {
  position: relative;
  z-index: 20;
}
.card-box .badge-area {margin-top: -1px;}
.card-box .badge-area * {vertical-align: middle;}
.card-box .badge-area::after {
  display: block;
  content: '';
  clear: both;
}
.card-box .badge-area span {
  display: inline-block;
  height: 25px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 25px;
  color: #777;
  border: 1px solid #999;
}
.card-box .badge-area .progress {
  margin: 0;
  color: #fff;
  border: 0;
  border-radius: 0;
  border: 1px solid #999;
  background-color: #999;
}
.card-box .badge-area .progress i {
  margin: -1px 2px 0 0;
  font-size: 18px;
  font-weight: 600;
}
.card-box.progress-ing .badge-area .progress {
  border: 1px solid #ff8b00;
  background-color: #ff8b00;
}
.card-box.progress-rej .badge-area .progress {
  border: 1px solid #ff4c5d;
  background-color: #ff4c5d;
}
.card-box.progress-agree .badge-area .progress {
  border: 1px solid #00c0b5;
  background-color: #00c0b5;
}
.card-box.progress-save .badge-area .progress {
  border: 1px solid #4C9675;
  background-color: #4C9675;
}
.card-box.progress-cancel .badge-area .progress {
  border: 1px solid #A77581;
  background-color: #A77581;
}
.card-box.progress-retr .badge-area .progress {
  border: 1px solid #8398B5;
  background-color: #8398B5;
}
.card-box .click-area {cursor: pointer;}
.card-box .title-area {
  overflow: hidden;
  padding-top: 20px;
}
.card-box .title-area > div {float: left;}
.card-box .title-area .card-title {
  width: 45%;
  margin: 0 15px 0 20px;
  font-size: 16px;
}
.card-box .title-area .card-title p:first-child {
  font-size: 12px;
  color: #999;
}
.card-box .title-area .card-title p + p {
  font-family: 'SCD-5';
  overflow: hidden;
  max-height: 70px;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: left;
  word-wrap: break-word; 
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-box .level-1 {
  display: inline-block;
  color: #ff4c5d;
}
.card-box .level-2 {
  display: inline-block;
  color: #0e5ce9;
}
.card-box .level-4 {display: inline-block;}
.card-box .title-area .card-title + div {
  position: relative;
  margin-top: -2px;
  padding-left: 16px;
  font-size: 12px;
  border-left: 1px solid #eee;
}
.title-area .card-title + div dl {line-height: 20px;}
.card-box .title-area .card-title + div .line-1st,
.card-box .title-area .card-title + div .line-2nd {
  height: 40px;
}
.title-area .card-title + div .line-2nd {
  overflow: hidden;
  margin-top: 20px;
}
.title-area .card-title + div .line-2nd dl {float: left;}
.title-area .card-title + div .line-2nd .total-cost {float: none;}
.title-area .card-title + div .line-2nd dl:last-child {margin-left: 12px;}
.title-area .card-title + div .line-2nd .total-cost dd {
  font-family: 'SCD-5';
  color: #ff4c5d;
}
.title-area .card-title + div dl * {display: inline-block;}
.title-area .card-title + div dt {
  margin-right: 5px;
  color: #999;
}
.title-area .card-title + div i {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 30px;
  cursor: pointer;
}
.title-area .card-title + div i:hover {color: #0e5ce9;}
.card-box .current-user {
  overflow: auto;
  height: 56px;
  margin-top: 15px;
  padding: 10px 7px 0 20px;
  font-size: 12px;
  line-height: 22px;
  background-color: #fbfbfc;
}
.card-box .current-user span {position: relative;}
.card-box .current-user span::after {
  display: inline-block;
  font-family: "unifont";
  content: '\e803';
  margin: 0 1px 0 4px;
  font-weight: bold;
  color: #ccc;
}
.card-box .current-user b + span::after {
  height: 15px;
  margin: 0 0 0 2px;
  content: '\e823';
  transform: rotate(90deg);
  transform: rotateZ(90deg);
}
.card-box .current-user u + span::after {
  height: 15px;
  margin: 0 0 0 2px;
  content: '▶';
}
.card-box .current-user span.agree::after {
  display: inline-block;
  content: '|';
  margin: -2px 4px 0 8px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 600;
  color: #ccc;
}
/* 화살표형으로 변경할 경우
.card-box .current-user span.receive::after {margin: 0 0 0 9px;}
.card-box .current-user span.receive + span::before {
  position: absolute;
  top: 8px;
  left: -17px;
  width: 9px;
  height: 1px;
  content: '';
  background-color: #ccc;
} */
.card-box .current-user span.receive::after {
  display: inline-block;
  content: '▶';
  margin: -2px 0 0 5px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 600;
  color: #ccc;
}
.card-box .current-user span:last-child::after {display: none;}
.card-box .current-user .fin {color: #999;}
.card-box.progress-ing .current-user .on {color: #ff8b00;}
.card-box.progress-rej .current-user .on {color: #ff4c5d;}
.card-box.progress-agree .current-user .on {color: #00c0b5;}
.card-box.progress-save .current-user .on {color: #4C9675;}
.card-box.progress-cancel .current-user .on {color: #A77581;}
.card-box.progress-retr .current-user .on {color: #8398B5;}
.card-box.progress-ing .current-user .on i {
  margin-top: -2px;
  font-size: 14px;
}

/* 결재목록 (카드) 체크박스 추가 */
.theme-card.in-check .checkbox-area {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 30;
}
.theme-card.in-check .card-list-area .card-box:hover .checkbox-area {z-index: 30;}

/* 결재목록 (카드) 즐겨찾기 추가 */
.theme-card.in-mark .mark-area {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 30;
}
.theme-card.in-mark .card-list-area .card-box:hover .mark-area {z-index: 30;}
.theme-table .card-list-area .mark-area .ico-mark {vertical-align: bottom;}
.card-list-area .mark-area .ico-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('../images/img-mark-star.svg') 0 0 no-repeat;
  background-size: 18px;
  cursor: pointer;
}
.card-list-area .mark-area .ico-mark:hover {
  background: url('../images/img-mark-star-on.svg') 0 0 no-repeat;
  background-size: 18px;
  opacity: .4;
}
.card-list-area .mark-area.on .ico-mark,
.card-list-area .mark-area.on .ico-mark:hover {
  background: url('../images/img-mark-star-on.svg') 0 0 no-repeat;
  background-size: 18px;
  opacity: 1;
}

/* - 결재목록 (카드) v2 추가 - */
.theme-card.v2 .card-box .badge-area .progress {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
.theme-card.v2.on-progress .card-box .badge-area .progress {display: inline-block;}
.theme-card.v2 .card-box .badge-area .progress i {display: none;}
.theme-card.v2 .card-box .badge-area span + span {
  overflow: hidden;
  max-width: 100%;
  height: 27px;
  color: #222;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 27px;
  border: 0;
  background-color: rgba(255,140,0,.1);
  box-sizing: border-box;
}
.theme-card.in-check.v2 .card-box .badge-area span + span,
.theme-card.in-mark.v2 .card-box .badge-area span + span {
  padding-left: 30px;
}
.theme-card.v2.on-progress .card-box .badge-area span + span,
.theme-card.in-check.v2.on-progress .card-box .badge-area span + span,
.theme-card.in-mark.v2.on-progress .card-box .badge-area span + span {
  max-width: 335px;
}

/* - 결재목록 (라인형 추가) - */
.theme-line .card-list-area .card-box {
  width: 100%;
  /* margin-top: 10px; */
  border: 1px solid #ddd;
  border-left: 2px solid #999;
}
.theme-line .card-list-area .card-box:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, .07);
  cursor: pointer;
}
.theme-line .card-list-area .card-box table {border: 0;}
.theme-line .card-list-area .card-box .in-title .cont-tt {
  overflow: hidden;
  max-height: 20px;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 14px;
}
.theme-line .card-list-area .card-box .in-title .badge-area {
  overflow: hidden;
  margin-top: 10px;
}
.theme-line .card-list-area .card-box .in-title .badge-area span {float: left;}
.theme-line .card-list-area .card-box .in-title .point-num {
  position: absolute;
  bottom: 0;
  right: 10px;
}
.theme-line .card-list-area .card-box .current-user {
  overflow: inherit;
  height: inherit;
  margin-top: inherit;
  padding: 0 20px;
  line-height: 20px;
  text-align: left;
  font-size: inherit;
  background-color: inherit;
}

/* - 결재목록 (테이블형 추가) - */
.theme-table .card-list-area .card-box {border-left: 0 !important;}
.theme-table .card-list-area .card-box:hover {
  background-color: transparent;
  cursor: pointer;
}
.theme-table .card-list-area .card-box.focus {border: 0 !important;}
.theme-table .card-list-area .card-box:hover table {background-color: rgba(34,34,34,.015);}
.theme-table .card-list-area .card-box.focus table {background-color: rgba(14,92,233,.08);}
.theme-table .card-list-area .card-box:hover::before,
.theme-table .card-list-area .card-box:hover::after {
  display: none;
}
.theme-table .card-list-area .card-box .progress {
  height: inherit;
  margin: 0;
  color: #999;
  background-color: transparent;
  box-shadow: none;
}
.theme-table .card-list-area .card-box.progress-ing .progress {color: #ff8b00;}
.theme-table .card-list-area .card-box.progress-rej .progress {color: #ff4c5d;}
.theme-table .card-list-area .card-box.progress-save .progress {color: #4C9675;}
.theme-table .card-list-area .card-box.progress-cancel .progress {color: #A77581;}
.theme-table .card-list-area .card-box.progress-retr .progress {color: #8398B5;}
.theme-table .card-list-area .card-box .current-user {
  height: inherit;
  margin-top: inherit;
  padding: 0;
  line-height: 16px;
  background-color: inherit;
}
.theme-table .card-list-area .card-box.progress-ing .current-user .on i {
  margin: inherit;
  font-size: inherit;
}

/* - 결재 문서 추가내용 스타일 추가 - */
/* .doc-view .tbl-basic.add-form .tbl-area table + table {margin-top: -1px;} */
.doc-view .tbl-basic .tbl-area table th {
  color: #555;
  background-color: rgba(34,34,34,.03);
}
.doc-view .doc-top + .tbl-basic .tbl-area:first-child,
.doc-view .tbl-basic .tbl-area table tr .add-content {padding-top: 20px;}
.doc-view .doc-top + .tbl-basic > .tbl-area:first-child {padding-top: 15px;}
.doc-view .tbl-basic .tbl-area table tr {height: 40px;}
.doc-view .tbl-basic .tbl-area table th,
.doc-view .tbl-basic .tbl-area table td {
  height: 40px;
  font-size: 13px;
}
.doc-view .tbl-basic .tbl-area table th,
.doc-view .tbl-basic .tbl-area table td {
  border: 1px solid #e5e5e5;
}
/* .doc-view.v2 .tbl-basic .tbl-area table th,
.doc-view.v2 .tbl-basic .tbl-area table td {
  border: 1px solid #e5e5e5;
} */
.doc-view .tbl-basic.in-tbl-explain .tbl-area table th,
.doc-view .tbl-basic.in-tbl-explain .tbl-area table td {
  border: 0;
  border-top: 1px solid #e5e5e5;
}
.doc-view .tbl-basic.in-tbl-explain.add-form .tbl-area table th,
.doc-view .tbl-basic.in-tbl-explain.add-form .tbl-area table td {
  border: 1px solid #e5e5e5;
}
.doc-view .in-tbl-explain > .tbl-area table td {padding: 2px 0 2px 10px;}
.doc-view .in-tbl-explain .tbl-explain {margin: 5px 0;}

/* 결재 양식 모달 미리보기 영역 */
.approval-form-select .tbl-noti-box {padding: 10px 20px;}
.approval-form-select .line-box {padding-top: 30px;}
.approval-form-select .doc-view::after {display: none;}

/* - 의견글 팝업 내 추가 - */
.content-box .upload-file.comment dt {
  margin: 0;
  border: 0;
}
.content-box .upload-file.comment dd .file-uploader:first-child {margin-top: 0;}
.set-comment-noti .noti-user {
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.set-comment-noti .noti-user ul {padding: 10px 10px 10px 30px;}
.set-comment-noti .noti-user ul + ul {border-top: 1px solid #eee;}
.set-comment-noti .noti-user ul li.check-all {
  margin: -10px -10px 10px -30px;
  padding: 8px 10px;
  background-color: #fafafa;
}
.set-comment-noti .noti-user ul li + li {margin-top: 8px;}
.set-comment-noti .noti-user ul li.check-all .check-label {font-family: 'SCD-5';}


/* --- avs --- */
/* - 대시보드 - */
.quick-btn.avs-register {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 15;
}
.quick-btn.avs-register button {
  width: 70px;
  height: 70px;
  font-family: 'SCD-5';
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  background-color: #ff8b00;
  box-sizing: border-box;
}
/* squre 추가 */
.quick-btn.avs-register.squre {
  position: absolute;
  left: 30px;
  top: 60px;
  z-index: 15;
  width: 70px;
  height: 70px;
}
.quick-btn.avs-register.squre button {
  width: 70px;
  height: 70px;
  font-family: 'SCD-5';
  font-size: 13px;
  color: #fff;
  border-radius: 15px;
  background-color: #ff8b00;
  box-sizing: border-box;
}
.quick-btn.avs-register button::before {
  display: block;
  margin-top: -9px;
  content: '\e843';
  font-family: "unifont";
  font-size: 22px;
}
.quick-btn.avs-register button span {
  display: inline-block;
  margin-top: 2px;
}
.dashboard .avs-summary {position: relative;}
.dashboard .avs-summary .summary-area {
  overflow: hidden;
  margin-top: 15px;
  padding: 40px;
  border-radius: 15px;
  background-color: #f6f6f8;
}
.dashboard .avs-summary .summary-area .col-1st,
.dashboard .avs-summary .summary-area .col-2nd {
  float: left;
}
.dashboard .avs-summary .summary-area .col-1st {width: 220px;}
.dashboard .avs-summary .summary-area .col-2nd {
  width: calc(100% - 260px);
  margin-left: 40px;
  padding-left: 40px;
  border-left: 1px solid rgba(0,0,0,.07);
  box-sizing: border-box;
}
.avs-summary .summary-area .col-1st .set-period {font-size: 16px;}
.avs-summary .summary-area .set-period .slt-box {
  overflow: hidden;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-family: 'SCD-5';
  border: 1px solid #999;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
}
.avs-summary .summary-area .set-period .slt-box * {
  font-family: 'SCD-5';
  font-size: 16px;
}
.avs-summary .summary-area .set-period .slt-box .slt-tt,
.avs-summary .summary-area .set-period .slt-box .slt-area {
  float: left;
  width: 50%;
}
.avs-summary .summary-area .set-period .slt-box .slt-tt {
  width: calc(50% - 20px);
  padding-left: 20px;
}
.avs-summary .summary-area .set-period .slt-box .slt-area select {
  width: calc(100% - 45px);
  height: 100%;
  padding: 0 30px 0 15px;
  line-height: 45px;
  border: 0;
  border-left: 1px solid #eee;
}
.avs-summary .summary-area .set-period .slt-box .slt-area select + i {margin-top: 7px;}
.avs-summary .summary-area .set-period p {
  margin-left: 10px;
  line-height: 26px;
}
.avs-summary .summary-area .set-period .op-tt {
  margin-top: 22px;
  font-family: 'SCD-5';
}
.avs-summary .summary-area .set-period + button {
  width: 100%;
  height: 45px;
  margin-top: 22px;
  line-height: 45px;
  font-family: 'SCD-5';
  font-size: 18px;
  color: #fff;
  background-color: #ff8b00;
}
.avs-summary .summary-area .col-2nd .avs-list {
  overflow: hidden;
  height: 186px;
}
.avs-summary .summary-area .avs-list li {
  position: relative;
  float: left;
  width: calc(25% - 9px);
  height: 100%;
  text-align: center;
  background-color: #fff;
}
.avs-summary .summary-area .avs-list li::before {
  position: absolute;
  top: 10px;
  left: 10px;
  content: '\e8cd';
  font-family: "unifont";
  font-size: 26px;
  color: #555;
}
.avs-summary .summary-area .avs-list li + li {margin-left: 12px;}
.avs-summary .summary-area .avs-list li h3 {
  margin-top: 50px;
  font-family: 'SCD-5';
  font-size: 17px;
  color: #777;
}
.avs-summary .summary-area .avs-list li .total-num {
  margin-top: 5px;
  font-family: 'SCD-5';
  font-size: 24px;
}
.avs-summary .summary-area .avs-list li button {
  width: 90px;
  height: 30px;
  margin-top: 22px;
  line-height: 30px;
  color: #999;
  border: 1px solid #ddd;
}
.avs-summary .summary-area .avs-list li.op-use::before,
.avs-summary .summary-area .avs-list li.op-use .total-num {
  color: #0e5ce9;
}
.avs-summary .summary-area .avs-list li.op-remain::before,
.avs-summary .summary-area .avs-list li.op-remain .total-num {
  color: #ff8b00;
}
.avs-summary .summary-area .avs-list li.op-except::before,
.avs-summary .summary-area .avs-list li.op-except .total-num {
  color: #999;
}

.avs-summary .summary-area .col-2nd .avs-list-basic {overflow: hidden;}
.avs-summary .summary-area .avs-list-basic dl {
  position: relative;
  overflow: hidden;
  float: left;
  width: 25%;
  height: 100%;
  text-align: center;
  border-radius: 8px;
}
.avs-summary .summary-area .avs-list-basic dl.avs-basic {width: calc(75% - 2px);}
.avs-summary .summary-area .avs-list-basic dl + dl {
  width: calc(25% - 20px);
  margin-left: 20px;
}
.avs-summary .summary-area dl dt {
  position: relative;
  /* max-width: 200px; */
  padding: 10px 0 10px 35px;
  text-align: left;
  background-color: rgba(255,255,255,.5);
}
.avs-summary .summary-area dl dt::before {
  position: absolute;
  top: 8px;
  left: 8px;
  content: '\e8cd';
  font-family: "unifont";
  font-size: 21px;
  color: #0e5ce9;
}
.avs-summary .summary-area dl dt .period,
.col-set.in-summary.v2 .summary-area dl dt .period {
  padding: 0 0 0 12px;
  font-family: "SCD-4";
  font-size: 12px;
  color: #999;
  background: none;
}
.avs-summary .summary-area.join-year .avs-list-basic dl dt .period {
  display: block;
  padding: 2px 0 0 0;
}
.avs-summary .summary-area .avs-list-basic dl dd {
  position: relative;
  float: left;
  width: 100%;
  height: 147px;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.avs-summary .summary-area .avs-list-basic dl.avs-basic dd {width: 33.33333333%;}
.avs-summary .summary-area .avs-list-basic dl dd + dd {border-left: 1px dashed #ddd;}
.avs-summary .summary-area .avs-op h3 {
  font-size: 15px;
  color: #777;
}
.avs-summary .summary-area .avs-op .total-num {
  margin-top: 5px;
  font-family: 'SCD-5';
  font-size: 22px;
}
.avs-summary .summary-area .avs-op button {
  height: 30px;
  margin-top: 15px;
  padding: 0 8px;
  line-height: 30px;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.avs-summary .summary-area .avs-op.op-use::before,
.avs-summary .summary-area .avs-op.op-use .total-num {
  color: #0e5ce9;
}
.avs-summary .summary-area .avs-op.op-remain::before,
.avs-summary .summary-area .avs-op.op-remain .total-num {
  color: #ff8b00;
}
/* .avs-summary .summary-area .avs-op.op-except::before,
.avs-summary .summary-area .avs-op.op-except .total-num {
  color: #999;
} */
.avs-summary .summary-area .avs-list-op dl {
  overflow: hidden;
  margin-top: 20px;
  border-radius: 8px;
}
.avs-summary .summary-area .avs-list-op dd {
  overflow: hidden;
  background-color: #fff;
}
.avs-summary .summary-area .avs-list-op dd .avs-op {
  position: relative;
  float: left;
  width: 33.33333333%;
  padding: 20px;
  box-sizing: border-box;
}
.avs-summary .summary-area .avs-list-op dd .avs-op + .avs-op {border-left: 1px dashed #ddd;}
.avs-summary .summary-area .avs-list-op dd .avs-op > * {display: inline-block;}
.avs-summary .summary-area .avs-list-op dd .avs-op .total-num {
  display: inline-block;
  position: absolute;
  right: 20px;
  margin-top: -1px;
  font-size: 17px;
}
.avs-summary .summary-area .avs-list-op dd .avs-all .todal-num {right: 110px;}
.avs-summary .summary-area .avs-list-op dd .avs-op button {
  position: absolute;
  left: 90px;
  top: 17px;
  height: 27px;
  margin: 0;
  line-height: 27px;
  font-size: 13px;
}

/* 사용 연도 선택 - v2 추가 */
.dashboard .avs-summary .summary-area.v2 {
  padding: 25px; 
  position: relative;
}
.dashboard .avs-summary .summary-area.v2 .col-1st {
  width: 180px;
  margin-right: auto;
}
/* .dashboard .avs-summary .summary-area.v2 .col-1st .set-period {width: 110px;} */
.dashboard .avs-summary .summary-area.v2 .col-2nd {
  /* width: calc(100% - 140px);
  margin-left: 30px;
  padding-left: 30px; */
  width: calc(100% - 180px);
  margin: 0;
  padding: 0;
  border: 0;
}
.avs-summary .summary-area.v2 .set-period .slt-box {
  height: inherit;
  line-height: inherit;
  border: 0;
  background-color: inherit;
}
.avs-summary .summary-area.v2 .set-period .slt-box .slt-tt {
  float: none;
  /* display: block; */
  display: none;
  position: relative;
  width: inherit;
  margin: 0 0 12px 0;
  padding: 0;
  font-family: "SCD-4";
  font-size: 14px;
}
/* .avs-summary .summary-area.v2 .set-period .slt-box .slt-tt::before {
  position: absolute;
  top: calc(50% - 3px);
  left: -12px;
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0e5ce9;
} */
.summary-area.v2 .set-period .slt-box .slt-area {
  float: none;
  width: 100%;
  /* text-align: center; */
  border-left: 0;
  box-sizing: border-box;
}
.summary-area.v2 .set-period .slt-box .slt-area::after {display: none;}
.summary-area.v2 .set-period .slt-box .slt-area span {
  display: inline-block;
  /* width: 90px; */
  /* margin: 10px; */
  padding: 3px 10px;
  font-size: 15px;
  color: #bbb;
  border: 1px solid #fff;
  border-radius: 31px;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.summary-area.v2 .set-period .slt-box .slt-area span:first-child {margin-top: 0;}
/* .summary-area.v2 .set-period .slt-box .slt-area span.on {
  color: #fff;
  border: 1px solid #ff8b00;
  background-color: #ff8b00;
} */
.summary-area.v2 .set-period .slt-box .slt-area span.on {
  color: #222;
  border: none;
  background-color: inherit;
}
.summary-area.v2 .set-period .slt-box .slt-area span:not(.on):hover {color: #ff8b00;}

/* 팝업 내 변경 */
.set-period.slt-area::after {display: none;}
.set-period.slt-area span {
  display: inline-block;
  padding: 2px 8px;
  color: #bbb;
  border: 1px solid #fff;
  border-radius: 31px;
  box-sizing: border-box;
  cursor: pointer;
}
.set-period.slt-area span.on {
  color: #fff;
  border: 1px solid #ff8b00;
  background-color: #ff8b00;
}
.set-period.slt-area span:not(.on):hover {color: #ff8b00;}

.content-box .col-set {
  /* overflow: hidden; */
  position: relative;
  display: inline-block;
  width: 100%;
}
.content-box .col-set .col-1st {
  position: relative;
  width: calc(30% - 40px);
  float: left;
}
.content-box .col-set.in-summary .col-1st {
  width: 280px;
  margin-right: 40px;
}
.col-set .col-1st .tab-area {margin-bottom: 15px;}
.col-set .col-1st .tab-area ul {
  /* overflow: hidden; */
  display: inline-block;
  width: 100%;
}
.col-set .col-1st .tab-area ul li {
  position: relative;
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  text-align: center;
}
.col-set .col-1st .tab-area ul li.on::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 8px);
  border-top: 8px solid #0e5ce9;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.col-set .col-1st .tab-area ul li a {
  display: block;
  padding: 7px 10px;
  -moz-transition: none;
  -webkit-transition: none;
  -ms-transition: none;
  transition: none;
}
.col-set .org-chart,
.col-set .tree-chart {
  width: 100%;
  border: 5px solid #ddd;
  border-radius: 15px;
  box-sizing: border-box;
}
.col-set .org-chart-tt,
.col-set .tree-chart-tt {
  position: relative;
  height: 45px;
  padding: 0 20px;
  line-height: 40px;
  background-color: #ddd;
}
.col-set .org-chart-tt p,
.col-set .tree-chart-tt p {
  text-align: center;
  font-size: 16px;
}
.col-set .org-search,
.col-set .tree-search {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.col-set .org-search .inp-area,
.col-set .tree-search .inp-area {
  display: block;
}
.col-set .org-search .inp-area .inp,
.col-set .tree-search .inp-area .inp {
  width: calc(100% - 40px);
}
.col-set .org-tree-area,
.col-set .tree-area {
  overflow: auto;
  padding: 10px;
}

/* 공통 트리 구조 추가 */
.col-set * + .tree-chart {margin-top: 15px;}
.col-set .tree-area.min-h {min-height: 545px;}

/* 공통 카테고리 구조 추가 */
.col-set * + .category-box {margin-top: 15px;}
.col-set .category-box {
  width: 100%;
  border: 5px solid #ddd;
  border-radius: 15px;
  box-sizing: border-box;
}
.col-set .category-box-tt {
  position: relative;
  height: 45px;
  padding: 0 20px;
  line-height: 40px;
  background-color: #ddd;
}
.col-set .category-box-tt p {
  text-align: center;
  font-size: 16px;
}
.col-set .category-search {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.col-set .category-search .inp-area {display: block;}
.col-set .category-search .inp-area .inp {width: calc(100% - 40px);}

.col-set .col-1st .summary-area {
  overflow: hidden;
  padding: 30px;
  background-color: #f6f6f8;
}
.col-set .col-1st .summary-area .set-period {font-size: 16px;}
.col-set .col-1st .summary-area .set-period .slt-box {
  overflow: hidden;
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-family: 'SCD-5';
  border: 1px solid #999;
  background-color: #fff;
  box-sizing: border-box;
}
.col-set .col-1st .summary-area .set-period .slt-box * {
  font-family: 'SCD-5';
  font-size: 16px;
}
.col-set .col-1st .summary-area .set-period .slt-box .slt-tt, 
.col-set .col-1st .summary-area .set-period .slt-box .slt-area {
  float: left;
  width: 50%;
}
.col-set .col-1st .summary-area .set-period .slt-box .slt-tt {
  width: calc(50% - 20px);
  padding-left: 20px;
}
.col-set .col-1st .summary-area .set-period .slt-box .slt-area select {
  width: calc(100% - 45px);
  height: 100%;
  padding: 0 30px 0 15px;
  line-height: 45px;
  border: 0;
  border-left: 1px solid #eee;
}
.col-set .col-1st .summary-area .set-period .slt-box .slt-area select + i {margin-top: 7px;}
.col-set .col-1st .summary-area .set-period p {
  margin-left: 10px;
  line-height: 26px;
}
.col-set .col-1st .summary-area .set-period .op-tt {
  margin-top: 22px;
  font-family: 'SCD-5';
}
.col-set .col-1st .summary-area .avs-list {
  overflow: hidden;
  margin-top: 25px;
  padding-top: 30px;
  border-top: 1px solid rgba(0,0,0,.07);
  box-sizing: border-box;
}
.col-set .col-1st .summary-area .avs-list li {
  position: relative;
  width: 100%;
  padding: 11px 0 11px 40px;
  text-align: inherit;
  background-color: #fff;
  box-sizing: border-box;
}
.col-set .col-1st .summary-area .avs-list li::before {
  position: absolute;
  top: 10px;
  left: 10px;
  content: '\e8cd';
  font-family: "unifont";
  font-size: 22px;
  color: #555;
}
.col-set .col-1st .summary-area .avs-list li + li {margin: 12px 0 0 0;}
.col-set .col-1st .summary-area .avs-list li h3,
.col-set .col-1st .summary-area .avs-list li .total-num {
  display: inline-block;
  margin: 0;
  font-family: 'SCD-5';
  font-size: 16px;
  color: #777;
}
.col-set .col-1st .summary-area .avs-list li .total-num {
  position: absolute;
  top: 11px;
  right: 11px;
}
.col-set .col-1st .summary-area .avs-list li.op-use::before, 
.col-set .col-1st .summary-area .avs-list li.op-use .total-num {
  color: #0e5ce9;
}
.col-set .col-1st .summary-area .avs-list li.op-remain::before, 
.col-set .col-1st .summary-area .avs-list li.op-remain .total-num {
  color: #ff8b00;
}
.col-set .col-1st .summary-area .avs-list li.op-except::before, 
.col-set .col-1st .summary-area .avs-list li.op-except .total-num {
  color: #999;
}
.col-set .col-2nd {
  width: 70%;
  float: right;
  padding: 0;
  border: 0;
}
.content-box .col-set.in-summary .col-2nd {width: calc(100% - 320px);}
.col-set.list-cal .col-2nd .btn-area {
  margin-top: -42px;
  text-align: left;
}
.col-set .btn-area .avs-label {
  display: inline-block;
  height: 29px;
  margin: 0 0 5px 0px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 29px;
  white-space: nowrap;
  font-size: 12px;
  color: #222;
  border: 1px solid #bbb;
  border-radius: 8px;
  cursor: pointer;
}
.col-set .btn-area .avs-label.off {
  color: #aaa;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
}
.col-set .btn-area .avs-label .avs-c-swatch {
  display: inline-block;
  margin: -3px 5px 0 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.col-set .btn-area .avs-label.off .avs-c-swatch {opacity: .5;}
.col-set .btn-area .avs-label span:last-child {
  margin-left: 5px;
  vertical-align: top;
}
.col-set .cal-area {margin-top: 15px;}
.col-set .col-2nd .tbl-basic .tbl-srch-area.line-1 {margin-top: 0;}

/* 휴가 현황 내 요약 */
.col-set.in-summary.v2 .summary-area {
  overflow: hidden;
  padding: 30px;
  background-color: #f6f6f8;
}
.col-set.in-summary.v2 .summary-area .col-1st {
  width: 220px;
  margin: 0;
}
.col-set.in-summary.v2 .summary-area .col-2nd {
  float: left;
  width: calc(100% - 250px);
  margin-left: 30px;
  padding-left: 30px;
  border-left: 1px solid rgba(0,0,0,.07);
  box-sizing: border-box;
}
.col-set.in-summary.v2 .summary-area dl {margin-top: 15px;}
.col-set.in-summary.v2 .summary-area dl.avs-basic {width: calc(75% - 15px);}
.col-set.in-summary.v2 .summary-area dl.avs-basic + dl {margin-left: 15px;}
.col-set.in-summary.v2 .summary-area dl dt {
  margin: 0;
  padding: 8px 0 8px 35px;
  font-size: inherit;
  border: 0;
}
.col-set.in-summary.v2 .summary-area dl dt::before {top: 6px;}
.col-set.in-summary.v2 .summary-area .avs-list-basic dl {
  margin-top: 0;
  text-align: inherit;
}
.col-set.in-summary.v2 .summary-area .avs-list-basic dl dd {height: inherit;}
.col-set.in-summary.v2 .summary-area dl .avs-op {padding: 8px 15px;}
.col-set.in-summary.v2 .summary-area dl .avs-op > * {
  display: inline-block;
  font-size: 14px;
}
.col-set.in-summary.v2 .summary-area dl .avs-op .total-num {
  display: inline-block;
  position: absolute;
  right: 15px;
  margin: 0;
}

/* 캘린더 내 공휴일 위치 변경 */
.cal-area td.fc-day-top {position: relative;}
.cal-area td.fc-day-top span.fc-day-title {
  overflow: hidden;
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  max-width: 60%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 팝업 추가 */
.avs-user-list {
  float: left;
  position: relative;
  margin-top: 5px;
  margin-right: 8px;
  font-family: "SCD-4";
  line-height: 24px;
  font-size: 12px;
}
.avs-user-list:last-child {margin-bottom: 5px;}
.avs-user-list .avs-c-swatch {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  opacity: .2;
}
.avs-user-list .user-name {
  position: relative;
  padding: 0 8px;
}
.avs-user-list button {
  color: #999;
  border: 1px solid #bbb;
  background-color: #fff;
}
.modal-body .avs-upload {
  display: inline-block;
  width: 100%;
}
.modal-body .avs-upload > * {float: left;}
.modal-body .avs-upload .col-1st {width: 50%;}
.modal-body .avs-upload .col-2nd {
  width: calc(50% - 20px);
  margin: 54px 0 0 20px;
}
.modal-body .avs-upload .org-search .inp-area {
  display: block;
  width: calc(100% - 10px);
}
.modal-body .avs-upload .org-search .inp-area .inp {width: calc(100% - 40px);}
.modal-body .cal-area .fc-toolbar.fc-header-toolbar {width: 200%;}
.modal-body .cal-area .fc-day-grid-container {height: auto !important;}
.modal-body .cal-area .fc-dayGrid-view .fc-body .fc-row {min-height: 4.5em;}

/* 근태관리 추가 */
.commute-c1 {color: #0e5ce9 !important;}
.commute-c2 {color: #ff253a !important;}
.commute-summary-board .tbl-area table .fc-sat,
.commute-setting .tbl-area table .fc-sat {
  color: #0583f2;
}
.commute-summary-board .tbl-area table .fc-sun,
.commute-setting .tbl-area table .fc-sun,
.commute-setting .tbl-area table .fc-holiday {
  color: #ff253a;
}
.commute-summary-board .tbl-area table .omit,
.tbl-basic.monthly-commute .tbl-area table .time-box .omit {
  color: #ff253a;
}
.tbl-basic .tbl-area table tbody tr.th-2 td {background-color: rgb(232,241,255,0.3);}
.commute-summary-board .tbl-area table .blue {color: #0e5ce9;}
.commute-summary-board .tbl-area table .blue2 {color: #8fb9ff;}

/* 대시보드 */
.dashboard .commute-summary {
  overflow: hidden;
  margin-bottom: 40px;
}
.dashboard .commute-summary .summary-area {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 15px;
  padding: 25px;
  border-radius: 15px;
  /* background-color: #f6f6f8; */
  background-color: rgba(14,92,233,.05);
}
.dashboard .commute-summary .summary-area .summary-tt {
  width: 180px;
  margin-right: auto;
}
.dashboard .commute-summary .summary-area .summary-tt p {
  font-family: "SCD-5";
  font-size: 15px;
}
.dashboard .commute-summary .summary-area .summary-tt .cont-tt {
  margin-bottom: 2px;
  font-family: "SCD-4";
  font-size: 14px;
  color: #0e5ce9;
}
.dashboard .commute-summary .summary-area .summary-tt p + .cont-tt {margin-top: 20px;}
.dashboard .commute-summary .summary-area .summary-tt .slt-area + .cont-tt {margin-top: 15px;}
.dashboard .commute-summary .summary-area .summary-tt .slt-area {margin-top: 2px;}
.dashboard .commute-summary .summary-area .summary-tt .slt-area select {
  width: 90px;
  font-family: "SCD-5";
  font-size: 15px;
  border-color: rgba(14,92,233,.3);
  cursor: pointer;
}
.dashboard .commute-summary .summary-area .summary-tt .slt-area .btn-slt {
  top: 8px;
  /* right: 7px;
  width: 17px;
  height: 17px; */
}
/* .dashboard .commute-summary .summary-area .summary-tt .slt-area .ico-uni-arrow-down:before {
  width: 17px;
  height: 17px;;
  content: '';
  background: url('../images/ico-calendar-c1.svg') 0 0 no-repeat;
  background-size: 100%;
  opacity: .6;
} */
.dashboard .commute-summary .summary-area .summary-tt .add-explain {font-family: "SCD-4";}
.dashboard .commute-summary .summary-area ul {
  display: flex;
  gap: 20px;
  width: calc(100% - 180px);
}
.dashboard .commute-summary .summary-area ul li {
  position: relative;
  width: 100%;
  height: 130px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
}
.dashboard .commute-summary .summary-area ul li::before {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 23px;
  height: 21px;
  content: '';
}
.dashboard .commute-summary .summary-area ul li.start-time::before ,
.dashboard .commute-summary .summary-area ul li.end-time::before {
  background: url('../images/ico-commute-summary1.svg') 0 0 no-repeat;
  background-size: 23px 21px;
}
.dashboard .commute-summary .summary-area ul li.over-time::before {
  background: url('../images/ico-commute-summary2.svg') 0 0 no-repeat;
  background-size: 23px 21px;
}
.dashboard .commute-summary .summary-area ul li.avs-info::before {
  background: url('../images/ico-commute-summary3.svg') 0 0 no-repeat;
  background-size: 23px 21px;
}
.dashboard .commute-summary .summary-area ul li .cont-tt {
  margin-bottom: 2px;
  color: #777;
}
.dashboard .commute-summary .summary-area ul li .time {
  font-family: 'SCD-5';
  font-size: 21px;
}
/* .dashboard .commute-summary .summary-area ul li.start-time .time,
.dashboard .commute-summary .summary-area ul li.end-time .time {
  color: #0e5ce9;
} */
.dashboard .commute-summary .summary-area ul li.over-time .time {color: #ff8b00;}
.dashboard .commute-summary .summary-area ul li.avs-info .time {color: #777;}
.dashboard .commute-summary .summary-area ul li .btn-link {
  display: inline-block;
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 28px;
  padding: 0 10px;
  line-height: 28px;
  text-decoration: none;
  color: #fff;
  border-radius: 8px;
  background-color: #0e5ce9;
  cursor: pointer;
}
.dashboard .commute-summary .summary-area ul li .btn-link.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.dashboard .commute-summary .summary-area ul li .btn-link.time-record {
  color: #888;
  border-color: #f1f1f1;
  background-color: #f1f1f1;
  pointer-events: none;
}
.dashboard .commute-summary .summary-area ul li .btn-link.time-record .time {
  margin-right: 5px;
  font-family: inherit;
  font-size: inherit;
  color: #111;
}
.dashboard .commute-summary .summary-area ul li .btn-link.line {
  color: #999;
  border: 1px solid #ddd;
  background-color: transparent;
}
.dashboard .commute-summary-board {position: relative;}
.dashboard .commute-summary-board .time-total {
  position: absolute;
  top: 8px;
  right: 0;
  font-size: 15px;
}
.dashboard .commute-summary-board .time-total .cont-tt {margin-right: 5px;}
.dashboard .commute-summary-board .time-total span:last-child {font-family: "SCD-5";}

/* 테이블 인 테이블 */
.tbl-area .tbl-in-tbl {padding: 0;}
.tbl-area .tbl-in-tbl table {
  table-layout: fixed;
  border-top: 0 !important;
}
.tbl-area .tbl-in-tbl table tr th,
.tbl-area .tbl-in-tbl table tr td {
  height: 42px;
  padding: 0 5px;
  text-align: center;
  /* border-right: 0; */
  background-color: transparent;
}
.tbl-area .tbl-in-tbl table tr:last-child td {border-bottom: 0;}
.tbl-area .tbl-in-tbl table .file-name {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0 30px 0 10px;
  text-align: left;
  line-height: 34px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #555;
  background-color: rgba(30,136,227,.08);
  box-sizing: border-box;
}
.tbl-area .tbl-in-tbl table .file-name span {cursor: pointer;}
.tbl-area .tbl-in-tbl table .file-name .delete {
  position: absolute;
  top: 0;
  right: 8px;
}
.tbl-area .tbl-in-tbl table .file-name .delete::before {
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(30,136,227,.6);
  cursor: pointer;
}

.commute-setting .tbl-area table tr th {background-color: #fcfcfd;}
.commute-setting .tbl-area table .count {
  margin-left: 6px;
  font-size: 12px;
  color: rgba(255,76,93,.8);
}
.tbl-area.schedule-work.full table tr th:nth-child(7),
.tbl-area.schedule-work.full table tr td:nth-child(7),
.tbl-area.schedule-work.time table tr th:nth-child(3),
.tbl-area.schedule-work.time table tr td:nth-child(3),
.tbl-area.schedule-work.time table tr:last-child td:nth-child(2),
.tbl-area.schedule-rest table tr th:nth-child(2),
.tbl-area.schedule-rest table tr td:nth-child(2) {
  border-right: 0;
}
.tbl-area.schedule-work .time-total {
  font-family: "SCD-5";
  color: #ff4c5d;
}
.commute-setting .content-box .col-set .col-1st {width: calc(40% - 40px);}
.commute-setting .content-box .col-set .col-2nd {width: 60%;}
.commute-setting .col-set.list-cal .col-2nd .btn-area {margin: 0;}
.commute-setting .col-set.list-cal .col-2nd .btn-area + .tbl-area {padding-top: 10px;}

/* 월별현황 */
.tbl-basic.monthly-commute {margin-top: 20px;}
.tbl-basic.monthly-commute .tbl-area {
  overflow: auto;
  position: relative;
  /* max-height: 400px; */
  max-height: calc(100vh - 306px);
  padding-top: 0;
  border-top: 2px solid #ddd;
}
.tbl-basic.monthly-commute .tbl-area table {
  table-layout: fixed;
  border-top: 0 !important;
  box-sizing: border-box;
}
.tbl-basic.monthly-commute .tbl-area table thead {
  position: -webkit-sticky; 
  position: sticky; 
  top: 0;
  z-index: 2;
}
.tbl-basic.monthly-commute .tbl-area table thead th {height: 42px;}
.tbl-basic.monthly-commute .tbl-area table tbody tr:hover {background-color: #f8fbff;}
.tbl-basic.monthly-commute .tbl-area table tbody tr:hover td:first-child {font-family: "SCD-5";}
.tbl-basic.monthly-commute .tbl-area table thead tr th:first-child,
.tbl-basic.monthly-commute .tbl-area table tbody tr td:first-child {
  position: -webkit-sticky; 
  position: sticky; 
  left: 0;
  background-color: #f8fbff;
  z-index: 1;
}
.tbl-basic.monthly-commute .tbl-area table .time-box {
  padding: 5px 0;
  cursor: pointer;
}
.tbl-basic.monthly-commute .tbl-area table .time-box > div {
  height: 19px;
  font-size: 13px;
}
.tbl-basic.monthly-commute .tbl-area table .time-box .status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tbl-basic.monthly-commute .tbl-area table .time-box .status .btn-ico {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor: pointer;
}
.tbl-basic.monthly-commute .tbl-area table .time-box .status .btn-ico.btn-avs {
  background: url('../images/ico-commute-setting-avs.svg') 0 0 no-repeat;
  /* background-size: 10px; */
  /* background-color: #6099ff; */
}
.tbl-basic.monthly-commute .tbl-area table .time-box .status .btn-ico.btn-etc {
  background: url('../images/ico-commute-setting-etc.svg') 0 0 no-repeat;
  /* background-size: 10px; */
  /* background-color: #FFC107; */
}

/* 일별 출퇴근 상태 라벨 스타일 추가 */
.commute-label {
  display: inline-block;
  height: 25px;
  margin: 0px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 25px;
  white-space: nowrap;
  font-size: 12px;
  color: #222;
  border: 1px solid #bbb;
  border-radius: 8px;
  cursor: pointer;
}
.commute-label-no-line {
  display: inline-block;
  height: 25px;
  margin: 0px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 25px;
  white-space: nowrap;
  font-size: 12px;
  color: #222;
  cursor: pointer;
}
.commute-c-swatch {
  display: inline-block;
  margin: -3px 5px 0 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.commute-label .commute-c-swatch.avs-c1,
.commute-label-no-line .commute-c-swatch.avs-c1 {background-color: #FF8B00;}
.commute-label .commute-c-swatch.avs-c2,
.commute-label-no-line .commute-c-swatch.avs-c2 {background-color: #ff253a;}
.commute-label .commute-c-swatch.avs-c3,
.commute-label-no-line .commute-c-swatch.avs-c3 {background-color: #008bff;}
.commute-label .commute-c-swatch.avs-c4,
.commute-label-no-line .commute-c-swatch.avs-c4 {background-color: #7E4C65;}
.commute-label .commute-c-swatch.avs-c5,
.commute-label-no-line .commute-c-swatch.avs-c5 {background-color: #00C0B5;}
.commute-label .commute-c-swatch.avs-c6,
.commute-label-no-line .commute-c-swatch.avs-c6 {background-color: #02BB43;}
.commute-label .commute-c-swatch.avs-c7,
.commute-label-no-line .commute-c-swatch.avs-c7 {background-color: #FF5FB7;}
.commute-label .commute-c-swatch.avs-c8,
.commute-label-no-line .commute-c-swatch.avs-c8 {background-color: #E6E6E6;}

/* 지도 검색 */
.commute-map-area {
  display: block !important;
  position: relative;
}
.commute-map-area .address-list {
  /* overflow: hidden; */
  position: absolute;
  top: 1px;
  left: 1px;
  width: 271px;
  height: calc(100% - 2px);
  border-right: 1px solid #000;
  z-index: 1;
  box-sizing: border-box;
}
.commute-map-area .address-list .btn-close {
  position: absolute;
  top: 0;
  right: -30px;
}
.commute-map-area .address-list .btn-close span {
  display: flex;
  width: 30px;
  height: 28px;
  border-radius: 0 20px 20px 0;
  background-color: #333;
  cursor: pointer;
}
.commute-map-area .address-list .btn-close span:hover {background-color: #000;}
.commute-map-area .address-list .btn-close span::before {
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/img-delete.svg') calc(100% - 10px) center no-repeat;
  background-size: 10px;
}
.commute-map-area .address-list #menu_wrap {
  width: 270px;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

/* 카카오 지도 목록 스타일 추가 */
.map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
.map_wrap {position:relative;width:100%;height:500px;}
#menu_wrap {position:absolute;top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
.bg_white {background:#fff;}
#menu_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}
#menu_wrap .option{text-align: center;}
#menu_wrap .option p {margin:10px 0;}  
#menu_wrap .option button {margin-left:5px;}
#placesList li {list-style: none;}
#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
#placesList .item span {display: block;margin-top:4px;}
#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#placesList .item .info{padding:10px 0 10px 55px;}
#placesList .info .gray {color:#8a8a8a;}
#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
#placesList .info .tel {color:#009900;}
#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}
#placesList .item .marker_1 {background-position: 0 -10px;}
#placesList .item .marker_2 {background-position: 0 -56px;}
#placesList .item .marker_3 {background-position: 0 -102px}
#placesList .item .marker_4 {background-position: 0 -148px;}
#placesList .item .marker_5 {background-position: 0 -194px;}
#placesList .item .marker_6 {background-position: 0 -240px;}
#placesList .item .marker_7 {background-position: 0 -286px;}
#placesList .item .marker_8 {background-position: 0 -332px;}
#placesList .item .marker_9 {background-position: 0 -378px;}
#placesList .item .marker_10 {background-position: 0 -423px;}
#placesList .item .marker_11 {background-position: 0 -470px;}
#placesList .item .marker_12 {background-position: 0 -516px;}
#placesList .item .marker_13 {background-position: 0 -562px;}
#placesList .item .marker_14 {background-position: 0 -608px;}
#placesList .item .marker_15 {background-position: 0 -654px;}
#pagination {margin:10px auto;text-align: center;}
#pagination a {display:inline-block;margin-right:10px;}
#pagination .on {font-weight: bold; cursor: default;color:#777;}


/* --- admin --- */
/* 관리자 스타일 추가 */
.admin input[type=file],
.upload-area input[type=file] {display: none;}
.register-area .file-add {
  display: inline-block;
  position: relative;
}
.register-area .file-add input[type=file] {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 34px;
  cursor: pointer;
}
.register-area .file-add input[type=file] {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: 31px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.board-help {
  position: relative;
  display: inline;
}
.board-help i {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 19px;
  color: #777;
  cursor: pointer;
}
.board-help i:hover {color: #555;}
.board-help-in {
  position: absolute;
  top: 35px;
  left: 5px;
  padding: 15px;
  white-space: nowrap;
  background-color: #ffe155;
  z-index: 10;
}
.board-help-in::before {
  content: '';
  width:0;
  height: 0;
  position: absolute;
  top: -15px;
  left: 5px;
  border-left: 10px solid #ffe155;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotateZ(-90deg);
}
.board-help-in p {
  font-size: 14px;
  line-height: 22px;
}
.menu-nav-bar .help-btn {
  position: absolute;
  z-index: 1;
}
.menu-nav-bar.side .help-btn {
  bottom: 85px;
  left: 22px;
}
.menu-nav-bar.top .help-btn {
  top: 9px;
  right: 15px;
}
.menu-nav-bar .help-btn button {
  position: relative;
  height: 30px;
  padding: 0 40px 0 10px;
  line-height: 30px;
  color: #fff;
  border-radius: 8px;
  background-color: #3cb878;
}
.menu-nav-bar.side .help-btn button + button {margin-top: 10px;}
.menu-nav-bar .help-btn button::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e82a';
  padding: 0 5px;
  font-size: 20px;
  background-color: rgba(255,255,255,.1);
}


/* --- 시스템 --- */
/* - 역할 관리 - */
.system .content-tt + .row-box {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 15px;
  background-color: #fff;
}
.system .row-box .col-50 {
  width: calc(50% - 42px);
  float: left;
  padding: 20px;
}
.system .row-box .col-50 + .col-50 {border-left: 1px dashed #eee;}
.system .row-box .col-50 .tab-area {margin-bottom: -1px;}
.system .row-box .col-50 .tbl-grid {
  margin-top: 20px;
  padding-top: 0;
  border: 0;
}
.system .row-box .col-50 .tbl-grid + .tbl-basic {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f5f5f5;
}


/* --- 기타설정 --- */
.etc-set {
  position: relative;
  margin-top: 15px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 15px;
}
.etc-set + .etc-set {margin-top: 40px;}
.avs .etc-set + .etc-set {margin-top: 15px;}
.etc-set .btn-area.right {
  position: absolute;
  top: 20px;
  right: 20px;
}
.etc-set .set-list {
  position: relative;
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #f8f8f9;
}
.etc-set .set-list + .set-list {margin-top: 15px;}
.etc-set .set-list > dl > dt,
.etc-set .set-list .bott-area dt {
  color: #0e5ce9;
}
.etc-set .set-list > dl > dt > .btn-area {
  display: inline-block;
  margin-left: 5px;
  vertical-align: bottom;
  line-height: 0;
}
.etc-set .set-list > dl > dt .btn-area .doc-help {
  height: 19px;
  padding: 0 10px;
  line-height: 19px;
  font-size: 11px;
  color: #fff;
  border-radius: 20px;
  background-color: #3cb878;
}
.etc-set .set-list dl dt {font-family: 'SCD-5';}
.etc-set .set-list dl dd {
  margin-top: 5px;
  line-height: 22px;
  color: #777;
}
.etc-set .set-list > dl > dd {max-width: 85%;}
.etc-set .set-list dl dd .step-1 + .step-1 {margin-top: 5px;}
.etc-set .set-list dl dd .step-2 > p {margin-left: 12px;}
.etc-set .set-list .right-area,
.etc-set .set-list .toggle-area {
  position: absolute;
  top: 20px;
  right: 20px;
}
.etc-set .set-list .right-area .slt {min-width: 180px;}
.etc-set .set-list .bott-area .right-area {right: 0;}
.etc-set .set-list .bott-area .toggle-area {
  top: 15px;
  right: 0;
}

/* 설정 박스 스타일 추가 */
.set-area.flex-box {
  display: flex;
  gap: 20px;
 }
 .set-area.flex-box .set-list {
  width: 33.33333333%;
  padding-top: 24px;
 }
 .set-area.flex-box .set-list + .set-list {margin-top: 0;}
 .set-area.flex-box .set-list > dl > dd {
  max-width: inherit;
  margin-top: 15px;
  line-height: 26px;
 }
 
/* 도장 미리보기 영역 추가 */
.etc-set .set-list dl dd.viewer-stamp {
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 5px;
  border: 1px dashed rgba(255,139,0,.4);
  background-color: #fff;
}
.etc-set .set-list dl dd.viewer-stamp img {
  width: 34px;
  height: 34px;
  padding: 10px;
  background-color: rgba(255,139,0,.08);
}
.etc-set .set-list dl dd.viewer-stamp p {
  margin-left: 20px;
  font-size: 13px;
  color: #999;
}

.set-list .btn-toggle {
  overflow: hidden;
  display: inline-block;
  width: 90px;
  padding: 2px;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
}
.set-list .btn-toggle input {
  position: absolute;
  visibility: hidden;
}
.set-list .btn-toggle span {
  position: relative;
  left: 0%;
  display: block;
  text-align: center;
  color: #fff;
  -webkit-transition: left 200ms ease-out;
  -moz-transition: left 200ms ease-out;
  -o-transition: left 200ms ease-out;
  transition: left 200ms ease-out;
}
.set-list .btn-toggle :checked + span {left: 50%;}
.set-list .btn-toggle span::before {
  /* content: attr(data-unchecked); */
  content: '미사용';
  display: block;
  width: 50%;
  padding: 3px 0;
  font-size: 11px;
  background-color: #777;
  border-radius: 20px;
}
.set-list .btn-toggle :checked + span::before {
  /* content: attr(data-checked); */
  content: '사용';
  background-color: #2ecc71;
}
.set-list .btn-toggle.data-name span::before {content: attr(data-unchecked);}
.set-list .btn-toggle.data-name :checked + span::before {content: attr(data-checked);}
.set-list .btn-toggle + i {
  width: max-content;
  margin-left: 5px;
  white-space: nowrap;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}
.set-list .btn-toggle + i:hover {color: #222;}
.set-list .toggle-op,
.set-list .bott-area {
  position: relative;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
}
.set-list .toggle-op.in-check {overflow: hidden;}
.set-list .toggle-op * {
  display: inline-block;
  vertical-align: top;
}
.set-list .toggle-op dd .radio-area {
  display: flex;
  align-items: center;
  gap: 6px;
  /* vertical-align: sub;
  vertical-align: -webkit-baseline-middle; */
}
.set-list .toggle-op .op-box {
  overflow: hidden;
  width: 100%;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: rgba(255,255,255,.6);
  box-sizing: border-box;
}
.set-list .toggle-op .op-box * {display: inherit;}
.set-list .toggle-op .op-box + .op-box {margin-top: 15px;}
.set-list .toggle-op .op-box .btn-area {
  width: calc(100% + 20px);
  margin: -20px -20px 15px;
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px dashed #eee;
  background-color: #fff;
}
.set-list .toggle-op .op-box .op-block {
  display: flex;
  align-items: center;
}
.set-list .toggle-op .op-box .op-block + .op-block {margin-top: 5px;}
.set-list .toggle-op .op-box .op-block dt {
  width: 190px;
  margin-top: 0;
}
.set-list .toggle-op .op-box .op-block dd {
  width: calc(100% - 190px);
  margin-top: 0;
}
.set-list .toggle-op .op-box .add-explain {
  margin-top: 15px;
  line-height: 22px;
  font-size: 13px;
  color: #777;
}
.set-list .toggle-op dl.op-block {
  display: block;
  margin: 0;
}
.set-list .toggle-op dl + dl {margin-left: 20px;}
.set-list .toggle-op dl dt {margin: 10px 5px 0 0;}
.set-list.payment-date .toggle-op dl dt {
  width: 190px;
}
.set-list .toggle-op.in-check dl dt {
  float: left;
  width: 80px;
  margin: 3px 0 0 0;
}
.set-list .toggle-op.in-check dl dd {
  float: left;
  width: calc(100% - 80px);
}
.set-list .toggle-op dd .add-explain {
  margin-left: 5px;
  line-height: 34px;
}
.set-list .toggle-op.in-check dd .checkbox-area {margin: 0 8px 8px 0;}
.set-list .toggle-op.in-check dd .checkbox-area label {
  margin-left: 0;
  line-height: 18px;
}
.set-list .toggle-op dd ul li {display: block;}
.set-list .toggle-op dd ul li + li {margin-top: 5px;}
.set-list .toggle-op dd ul li i {
  margin-left: 10px;
  font-size: 20px;
  margin-top: 8px;
  cursor: pointer;
}
.set-list .toggle-op dd ul li i.ico-uni-minus {color: #ff4c5d;}
.set-list .toggle-op .file-add {
  position: relative;
  display: block;
}
.set-list .toggle-op .file-add input[type=file] {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 34px;
  /* opacity: 0; */
  cursor: pointer;
}
.set-list .toggle-op .file-name {
  /* display: inline-block; */
  overflow: hidden;
  width: calc(100% - 100px);
  margin-left: 10px;
  line-height: 34px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #2F79A6;
}
.set-list .toggle-op .file-name:hover {text-decoration: underline;}
.set-list .toggle-op .set-box {display: block;}
.set-list .toggle-op .set-box .set-name {
  /* display: inline-block; */
  overflow: hidden;
  width: calc(100% - 100px);
  margin-left: 10px;
  line-height: 34px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.set-list .toggle-op .op-user-box,
.set-list .toggle-op .op-file-box {
  overflow: hidden;
  width: 100%;
}
.set-list .toggle-op .op-user-box > *,
.set-list .toggle-op .op-file-box > * {
  float: left;
}
.set-list .toggle-op .op-user-box .op-user,
.set-list .toggle-op .op-file-box .op-file {
  overflow: hidden;
  width: calc(100% - 150px);
  margin-left: 20px;
}
.set-list .toggle-op .op-user-box .op-user .user-name,
.set-list .toggle-op .op-file-box .op-file .file-name {
  float: left;
  width: auto;
  margin: 0 5px 5px 0;
  padding: 0 30px 0 10px;
  line-height: 31px;
  font-size: 13px;
  color: #555;
  border-radius: 8px;
  background-color: rgba(14,92,233,.1);
}
.set-list .toggle-op .op-file-box .op-file .file-name {
  text-decoration: underline;
  color: #2F79A6;
  cursor: pointer;
}
.set-list .toggle-op .op-user-box .op-user .user-name .delete,
.set-list .toggle-op .op-file-box .op-file .file-name .delete {
  position: relative;
}
.set-list .toggle-op .op-user-box .op-user .user-name .delete::before,
.set-list .toggle-op .op-file-box .op-file .file-name .delete::before {
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  text-align: center;
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 16px;
  color: rgba(14,92,233,.6);
  cursor: pointer;
}
.set-list .toggle-op .op-user-box .op-user .user-name .delete:hover::before,
.set-list .toggle-op .op-file-box .op-file .file-name .delete:hover::before {
  color: rgba(14,92,233,1);
}
.set-list .toggle-op .user-set,
.set-list .toggle-op .user-set .row-box {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.set-list .toggle-op .user-set dl.slt-user {
  position: relative;
  width: 50%;
  margin: 0;
}
.set-list .toggle-op .user-set .col-2 dl.slt-user {
  width: calc(50% - 22px);
  margin-top: 20px;
}
.set-list .toggle-op .user-set .col-2 dl.slt-user:nth-child(1),
.set-list .toggle-op .user-set .col-2 dl.slt-user:nth-child(2) {
  margin-top: 0;
}
.set-list .toggle-op .user-set .col-2 dl.slt-user + dl.slt-user:nth-child(2n+1) {margin-left: 0;}
.set-list .toggle-op .user-set dl.slt-user dt {
  position: absolute;
  top: -8px;
  right: -50px;
}
.set-list .toggle-op .user-set .col-2 dl.slt-user dt {
  position: relative;
  top: inherit;
  right: inherit;
  width: 100%;
  font-size: 14px;
  border: 0;
}
.set-list .toggle-op .user-set dl.slt-user dt .btn-area {
  right: -10px;
  white-space: nowrap;
}
.set-list .toggle-op .user-set .col-2 dl.slt-user dt .btn-area {right: -2px;}
.set-list .toggle-op .user-set dl.slt-user dt i.ico-btn {margin: 0;}
.set-list .toggle-op .user-set dl.slt-user dd {
  width: 100%;
  margin: 0;
}
.set-area .set-list .toggle-op .user-set dl.slt-user dd ul {
  margin-top: inherit;
  width: 100%;
  height: 116px;
  min-height: inherit;
  background-color: #fff;
}
.set-area .set-list .toggle-op .user-set dl.slt-user ul li + li {margin-top: 0;}
.set-noti {
  padding: 18px 20px;
  border-radius: 10px;
  background-color: rgba(14,92,233,.05);
}
.set-noti-in {position: relative;}
.set-noti-in .right-area {
  position: absolute;
  top: -5px;
  right: 0;
}
.set-noti-in dl {overflow: hidden;}
.set-noti-in dl * {
  /* display: inline-block; */
  line-height: 24px;
}
.set-noti-in dl + dl {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
}
.set-noti-in dl .board-help {
  position: absolute;
  top: 0;
  left: 0;
}
.set-noti-in dl .board-help i {
  position: static;
  /* color: #ff8b00; */
  color: #0e5ce9;
}
.set-noti-in dl .board-help i::before {font-weight: bold;}
.set-noti-in dl dt {
  float: left;
  width: 100px;
  padding-left: 5px;
  vertical-align: top;
}
.set-noti-in dl dd {
  float: left;
  width: calc(100% - 120px);
  /* margin-left: 10px; */
  color: #777;
}
.set-noti-in dl dd > div {
  position: relative;
  padding-left: 25px;
}
.set-noti-in dl dd > div p span {
  margin-right: 5px;
  color: #222;
}
.set-authority .tbl-top {
  margin: 10px 0;
  text-align: right;
}
.set-authority .tbl-top + .tbl-area {padding-top: 0;}
.set-authority tr.admin-line {background-color: rgba(255,240,0,.05);}
.set-authority td .btn-area {
  display: inline-block;
  vertical-align: middle;
}
.set-authority td .btn-area * {float: left;}
.set-authority td span {
  padding: 3px 9px;
  font-size: 12px;
  color: #fff;
  border-radius: 30px;
  background-color: #bbb;
  cursor: pointer;
}
.set-authority td span.btn-modal {
  padding: 2px 8px;
  color: #555;
  border: 1px solid #999;
  background-color: transparent;
}
.set-authority td span.on.btn-modal {
  color: #2ecc71;
  border-color: #2ecc71;
  background-color: transparent;
}
.set-authority td span + span {margin-left: 5px;}
.set-authority td span:hover,
.set-authority td span.on {
  color: #fff;
  background-color: #2ecc71;
}
.set-authority td span.fix-on {
  color: #fff;
  background-color: rgba(46,204,113,.5);
  cursor: default;
}
.set-authority td span.disabled,
.set-authority td span.disabled:hover {
  opacity: .5;
  cursor: default;
}
.set-authority td span:not(.on).disabled:hover {background-color: #bbb;}
.set-authority tr.admin-line td p {font-family: 'SCD-5';}
.set-area .tbl-tt-area .tbl-tt {
  margin: 0 10px 0 30px;
  font-size: inherit;
}
/* 메뉴 접근 2차 인증 스타일 추가 */
.page-secondary-auth {margin-top: 15vh;}
.page-secondary-auth .page-in-wrap {
  position: relative;
  width: 700px;
  margin-bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  border: 3px solid #ddd;
  border-radius: 25px;
  padding: 50px 10px;
}
.page-secondary-auth .page-in-wrap::after {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 67px;
  content: '';
  background: url(../images/2-auth-icon.svg) 0 0 no-repeat;
  background-size: 80px 67px;
}
.page-secondary-auth .page-in-wrap h2 {
  text-align: center;
  font-family: 'SCD-5';
  margin-bottom: 30px;
}
.page-secondary-auth .uni-blu {
  font-family: 'SCD-5';
  margin: 20px 0;

}
.page-secondary-auth .page-in-wrap .auth-box-area {
  margin: 10px 0 30px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}
.page-secondary-auth .page-in-wrap .session {    
  display: flex;
  align-items: center;
  height: 28px;
  margin-top: 16px;
  padding: 0 7px;
  line-height: 28px;
  font-size: 12px;
  color: #0e5ce9;
  border-radius: 8px;
  background-color: rgba(14, 92, 233, .08);
}
.page-secondary-auth .page-in-wrap .session span {margin-left: 6px;}
.page-secondary-auth .page-in-wrap button {
  padding: 0 15px;
  height: 28px;
  line-height: 28px;
}
.page-secondary-auth .page-in-wrap .noti-tt span{font-family: 'SCD-5';}

/* 기본 설정 내 예시 스타일 추가 */
.etc-set .set-form {
  width: 100%;
  padding: 0;
}
.etc-set .set-form * {display: block;}
.etc-set .set-form .form-box .wid-100 {width: calc(100% - 12px);}
.etc-set .set-form .form-box .inp-area.next-btn .inp {
  display: inline-block;
  width: calc(100% - 70px);
}
.etc-set .set-form .form-box .inp-area.next-btn button {display: inline-block;}
.set-form .form-box .add-explain {
  display: inherit;
  width: 100%;
  margin-top: 8px;
  line-height: 20px;
  font-size: 12px;
  color: #777;
}
.set-form .form-box .add-explain p::before {
  display: inline-block;
  margin-right: 5px;
  content: '-';
}
.set-form .form-box .add-explain p.add {color: #ff8b00;}
.set-form .form-box .add-explain p.add::before {content: '*';}

/* 휴가 관리 설정 추가 */
.set-area .tbl-area td .avs-op {
  display: block;
  color: #2F79A6;
  cursor: pointer;
}
.set-area .tbl-area td .avs-op:hover {font-family: "SCD-5";}
.set-area .tbl-area td .avs-c-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-top;
  border-radius: 18px;
  /* background-color: #ddd; */
}
.avs-c-swatch.c-1 {background-color: #0e5ce9;}
.avs-c-swatch.c-2 {background-color: #81f3b5;}
.avs-c-swatch.c-3 {background-color: #ffa6bc;}
.avs-c-swatch.c-4 {background-color: #d7a8d8;}
.avs-c-swatch.c-5 {background-color: #fec049;}
.avs-c-swatch.c-6 {background-color: #ff6e6c;}
.avs-c-swatch.c-7 {background-color: #fef52c;}
.avs-c-swatch.c-8 {background-color: #9d9ed7;}
.avs-c-swatch.c-9 {background-color: #bad466;}
.avs-c-swatch.c-10 {background-color: #cda275;}
.modal-body .avs-c-swatch-slt {
  width: calc(100% - 20px);
  cursor: pointer;
}
.avs-c-swatch-13 {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

/* erp 다운로드 설정 추가 */
.erp-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f5f5f5;
}
.erp-list ul {
  display: inline-block;
  /* width: 100%; */
  margin: 0 0 0 -40px;
}
.erp-list ul li {
  float: left;
  min-width: 200px;
  min-height: 155px;
  margin: 0 0 40px 40px;
  padding: 20px 40px;
  border: 2px solid #eee;
}
.erp-list ul li .comp-name {
  position: relative;
  margin: -20px -40px 15px;
  padding: 10px 20px;
  font-size: 16px;
  border-bottom: 1px dashed #ddd;
  background-color: #fcfcfc;
}
.erp-list ul li .comp-name a {
  position: absolute;
  top: 9px;
  right: 10px;
  height: 22px;
  padding: 0 8px;
  font-family: "SCD-4";
  line-height: 22px;
  font-size: 12px;
  color: #999;
  border: 1px solid #999;
  border-radius: 8px;
}
.erp-list ul li .product-name {
  margin: 0 0 15px -20px;
  font-size: 16px;
  color: #0e5ce9;
}
.erp-list ul li .btn-area + .btn-area {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
}
.erp-list ul li .btn-download {
  position: relative;
  display: block;
  width: 100%;
  /* min-width: 115px; */
  margin: 0 auto;
  padding: 5px 35px 5px 15px;
  text-align: left;
  color: #555;
  border: 1px solid #999;
  border-radius: 8px;
  box-sizing: border-box;
}
.erp-list ul li .btn-download.project {min-width: 220px;}
.erp-list ul li .btn-download.project.on {border: 1px solid rgba(14,92,233,.6);}
.erp-list ul li .btn-download::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e851';
  padding: 3px;
  font-size: 21px;
  color: #0e5ce9;
  background-color: rgba(14,92,233,.05);
}
.erp-list ul li .btn-download + .btn-download {margin-top: 10px;}


/* --- 로그인 --- */
.login-box {
  position: relative;
  margin-top: 20vh;
}
.login-box-in {
  overflow: hidden;
  position: relative;
  width: 340px;
  margin: 0 auto;
  padding: 45px 40px 45px 240px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 10px 10px rgba(85,85,85,.05),
              0 30px 20px rgba(85,85,85,.05),
              0 50px 40px rgba(85,85,85,.1);
}
.login-box-in::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #0e5ce9;
}
.login-box-in::after {
  display: inline-block;
  position: absolute;
  top: 42px;
  left: 0;
  font-family: 'unifont';
  content: '\e819';
  font-size: 280px;
  color: rgba(255,255,255,.15);
}
.login-box .login-tt {
  padding-bottom: 20px;
  border-bottom: 1px dashed #bbb;
}
.login-box .login-tt h2 {
  font-family: 'SCD-5';
  font-size: 30px;
  color: #0e5ce9;
}
.login-box .login-tt p {
  margin-top: 3px;
  color: #555;
}
.login-area {margin-top: 30px;}
.login-area div + div {margin-top: 20px;}
.login-area .inp {
  width: 300px;
  margin-left: -2px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background-color: transparent;
}
.login-area i {font-size: 28px;}
.login-area + .btn-area {margin-top: 40px;}
.login-area + .btn-area + a {
  position: relative;
  display: inline-block;
  margin-top: 15px;
  color: #999;
}
.login-area + .btn-area + a:hover {color: #222;}
.login-area + .btn-area + a:hover::after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -3px;
  right: -25px;
  font-family: "unifont";
  content: '\e84c';
  font-size: 25px;
  color: #222;
  animation: rotateIn .5s ease-in-out 1;
}
.login-area + .btn-area button {
  width: 300px;
  height: 40px;
  line-height: 40px;
}
.find-info .login-box-in {width: 720px;}
.login-area .find-id {overflow: hidden;}
.login-area .find-id,
.login-area .find-pw {
  position: relative;
  display: inline-block;
  width: 720px;
}
.login-area .find-id h3,
.login-area .find-pw h3 {
  margin-bottom: 15px;
  font-size: 18px;
}
.login-area .find-id > div,
.login-area .find-pw > div {
  float: left;
  margin-top: 0;
}
.login-area .find-id > div + div,
.login-area .find-pw > div + div {
  margin-left: 10px;
}
.login-area .find-pw > div.rows {margin: 10px 0 0 0;}
.login-area .find-id .btn-area,
.login-area .find-pw .btn-area {
  position: absolute;
  bottom: 0;
  right: 0;
}
.login-area .find-id .btn-area::before,
.login-area .find-pw .btn-area::before {
  display: block;
  content: '';
  clear: both;
}
.login-area .find-id .btn-area button,
.login-area .find-pw .btn-area button {
  width: 90px;
  padding: 0 10px;
}
.login-area .find-pw {margin-top: 50px;}
.login-area .find-pw .radio-area {
  width: 555px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.login-area .find-pw .radio-area .radio-label {margin-left: 10px;}
.find-info .login-area .inp {width: 250px;}

/* 세션 만료 로그인 추가 */
.login-pop.open .overlay-bg,
.login-pop.open .pop-in {
  opacity: 1;
  z-index: 1200;
}
.login-pop .overlay-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(0,0,0,.5);
  opacity: 0;
}
.login-pop .pop-in {
  overflow: hidden;
  position: fixed;
  top: 125px;
  left: 50%;
  width: 450px;
  margin-left: -225px;
  border: 0;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 15px 40px rgba(0,0,0,.1);
  opacity: 0;
  -webkit-transition: opacity .25s ease-out;
  -moz-transition: opacity .25s ease-out;
  -o-transition: opacity .25s ease-out;
  transition: opacity .25s ease-out;
}
.login-pop .pop-in .top-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 270px;
  padding: 48px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background-color: #002e55;
  box-sizing: border-box;
}
.login-pop .pop-in .top-area::before {
  position: absolute;
  top: 50px;
  left: calc(50% - 33px);
  width: 65px;
  height: 84px;
  content: '';
  background: url('../images/ico-lock.svg') 0 0 no-repeat;
  background-size: 65px 84px;
}
.login-pop .pop-in .top-area h2 {
  margin-bottom: 10px;
  font-family: "SCD-6";
  font-size: 24px;
}
.login-pop .pop-in .top-area p {font-size: 13px;}
.login-pop .pop-in .top-area .btn-close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
}
.login-pop .pop-in .top-area .btn-close::before {
  font-family: 'unifont';
  font-weight: bold;
  content: '\e80b';
  font-size: 20px;
}
.login-pop .pop-in .form-area {padding: 50px;}
.login-pop .pop-in .form-area .inp-id {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  background-color: rgba(14,92,233,.1);
  box-sizing: border-box;
}
.login-pop .pop-in .form-area .inp-id .inp-tt {
  margin-right: 25px;
  color: #999;
}
.login-pop .pop-in .form-area .inp-pw {margin-top: 10px;}
.login-pop .pop-in .form-area .inp-pw .inp {
  width: 100%;
  height: 42px;
  padding-right: 20px;
  padding-left: 20px;
  line-height: 42px;
  box-sizing: border-box;
}
.login-pop .pop-in .form-area .btn-area {margin-top: 40px;}
.login-pop .pop-in .form-area .btn-area .btn-login {
  width: 120px;
  height: 42px;
  line-height: 42px;
  font-family: "SCD-5";
  font-size: 16px;
  color: #fff;
  background-color: #002e55;
}


/* --- 대시보드 --- */
.dashboard {overflow: hidden;}
.dashboard .my-card-list {
  position: relative;
  overflow: hidden;
  /* height: 267px; */
  margin-bottom: 40px;
  padding: 40px 40px 30px;
  background-color: #ececef;
}
.dashboard .my-card-list-in .my-card {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 130px;
  padding: 20px;
  vertical-align: top;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 7px 7px rgba(0,0,0,.07);
  animation: fadeIn .5s ease-in-out 1;
}
.dashboard .my-card-list-in .my-card.empty {background-color: rgba(255,255,255,.5);}
.dashboard .my-card-list-in .my-card.empty p {
  margin-top: 55px;
  text-align: center;
  color: #999;
}
.dashboard .my-card-list-in .my-card.empty p::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e807';
  margin: -4px 5px 0 0;
  vertical-align: middle;
  font-size: 22px;
  font-weight: 600;
  color: #999;
}
.dashboard .my-card-list-in .my-card + .my-card {margin-left: 20px;}
.dashboard .my-card-list-in .my-card img + span {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 11px;
}
.dashboard .my-card-list-in .card-num {
  display: inline-block;
  font-family: "SCD-3";
  font-size: 14px;
  color: #555;
}
.dashboard .my-card-list-in .card-nick {
  display: inline-block;
  max-width: 83px;
  font-size: 13px;
  color: #0e5ce9;
}
.dashboard .my-card-list-in .use-total,
.dashboard .my-card-list-in .limit-total {
  position: absolute;
  width: calc(100% - 40px);
  left: 20px;
  font-size: 12px;
  color: #999;
}
.dashboard .my-card-list-in .use-total {top: 82px;}
.dashboard .my-card-list-in .limit-total {top: 102px;}
.dashboard .my-card-list-in .use-total span,
.dashboard .my-card-list-in .limit-total span {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'SCD-5';
  font-size: inherit;
  color: #ff4c5d;
}

/* 버튼 영역 - 나중에 제거 */
.dashboard .my-card-list .btn-area {
  float: left;
  width: 100%;
  margin-top: 225px;
  text-align: center;
}
.dashboard .my-card-list .btn-area li {
  overflow: hidden;
  display: inline-block;
  width: 10px;
  height: 10px;
  text-indent: -9999px;
  border-radius: 10px;
  background-color: #999;
  cursor: pointer;
}
.dashboard .my-card-list .btn-area li:hover {
  background-color: #0e5ce9;
}
.dashboard .my-card-list .btn-area li + li {margin-left: 6px;}
.dashboard .my-card-list .btn-area li.on {
  width: 30px;
  border-radius: 10px;
  background-color: #0e5ce9;
}

.dashboard .my-summary {
  position: relative;
  float: left;
  width: calc(100% - 42px);
  padding: 30px 20px;
  border: 1px solid #eee;
}
.my-summary > dl {
  position: relative;
  float: left;
  width: calc(33.33333333% - 26.66666666px);
}
.my-summary.col-2 > dl {width: calc(50% - 20px);}
.my-summary.col-4 > dl {width: calc(25% - 30px);}
.my-summary > dl + dl {margin-left: 40px;}
.my-summary > dl > dt {
  margin-bottom: 20px;
  padding-bottom: 15px;
  font-size: 18px;
  border-bottom: 1px solid #999;
}
.my-summary > dl > dt i {
  margin: -5px 5px 0 -15px;
  font-size: 29px;
  color: #0e5ce9;
}
.my-summary dl dt {text-align: center;}
.my-summary dl dd {margin: 0 5px;}
.my-summary dl dd + dd {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #ccc;
}
.my-summary dl dd > span + *:last-child {float: right;}
.my-summary dl dd a:last-child:hover {
  color: #ff4c5d;
  text-decoration: underline;
}
.my-summary dd dl dt {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #eee;
}
.my-summary dd:last-child dl {margin-top: 10px;}
.my-summary dl:nth-child(4) > dd + dd {border-top: 0;}
.my-summary dl dd span span.badge-area {
  position: relative;
  margin-right: 18px;
  padding: 3px 3px 3px 8px;
  font-size: 13px;
}
.my-summary dl dd span span.badge-area.pes {
  color: #0e5ce9;
  background-color: rgba(14,92,233,.1);
}
.my-summary dl dd span span.badge-area.approval {
  color: #ff8b00;
  background-color: rgba(255,139,0,.1);
}
.my-summary dl dd span span.badge-area::after {
  position: absolute;
  top: 0;
  right: -12px;
  display: inline-block;
  content: '';
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.my-summary dl dd span span.badge-area.pes::after {border-left: 12px solid rgba(14,92,233,.1);}
.my-summary dl dd span span.badge-area.approval::after {border-left: 12px solid rgba(255,139,0,.1);}


/* --- 내 정보 관리: 나의 문의 내역 추가 --- */
.admin .my-inquiry-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
.admin .my-inquiry-toggle {border-top: 2px solid #ddd;}
.my-inquiry-list dl {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.my-inquiry-list dl.on {background-color: rgba(14, 92, 233, 0.05);}
.my-inquiry-list dl.on #toggle-btn i::before {content: '\e8c6' !important;}
.my-inquiry-list dl.on .inquiry-contents-area {display: block;}
.my-inquiry-list dl dt {
  position: relative;
  margin-bottom: 10px;
}
.my-inquiry-list dl dt p {
  font-size: 16px;
  font-family: 'SCD-5';
  padding-left: 30px;
}
.my-inquiry-list dl dt p::before {
  content: 'Q';
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 35px;
  background-color: #0E5CE9;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.my-inquiry-list dl dt p span {
  float: right;
  font-size: 14px;
  font-family: 'SCD-5';
}
.my-inquiry-list dl dt p span.state-01 {color: #999;}
.my-inquiry-list dl dd .division {
  font-size: 12px;
  color: #999;
}
.my-inquiry-list dl dd .division span.on {color: #222;}
.inquiry-bottom-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 0;
}
.inquiry-bottom-area p.date {
  font-size: 12px;
  color: #999;
  font-family: 'SCD-5';
}
.inquiry-bottom-area #toggle-btn {
  font-size: 30px;
  line-height: 30px;
}
.inquiry-bottom-area #toggle-btn i {vertical-align: bottom !important;}
.inquiry-contents-area {display: none;}
.inquiry-contents-area .inquiry-contents {
  line-height: 24px;
  margin-top: 10px;
}
.inquiry-contents-area .file-attach {
  margin: 20px 0;
  font-size: 12px;
  color: #555;
}
.inquiry-contents-area .file-attach span {padding-right: 15px;}
.inquiry-contents-area .file-attach span i {margin: 0 5px 0 0;}
.inquiry-answer-area {
  position: relative;
  margin: 20px 0 0;
  border-top: 1px solid #ddd;
}
.inquiry-answer-area .inquiry-title {
  font-size: 16px;
  font-family: 'SCD-5';
  padding-left: 30px;
  margin-top: 20px;
}
.inquiry-answer-area .inquiry-title::before {
  content: 'A';
  position: absolute;
  top: 20px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 35px;
  background-color: #222;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}
.inquiry-answer-area p.date {
  font-size: 12px;
  color: #999;
  font-family: 'SCD-5';
  margin: 20px 0;
}
.inquiry-contents-area {line-height: 24px;}
.answer-bottom-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 20px;
}
.answer-bottom-area p i {
  font-size: 18px;
  vertical-align: inherit !important;
}


/* --- 대시보드 신규 --- */
.dashboard.v2 > * + * {margin-top: 45px;}
.dashboard .top-guide {position: relative;}
.dashboard .top-guide .btn-area {
  position: absolute;
  top: 0;
  right: 0;
}
.dashboard .top-guide .btn-area button {
  position: relative;
  height: 30px;
  padding: 0 40px 0 10px;
  line-height: 30px;
  font-size: 13px;
  color: #fff;
  border-radius: 8px;
  background-color: #777;
}
.dashboard .top-guide .btn-area button::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e808';
  padding: 0 5px;
  font-size: 20px;
  background-color: rgba(255,255,255,.1);
}
.pes .dashboard .top-guide .btn-area .doc-rule {background-color: #0e5ce9;}
.pes .dashboard .top-guide .btn-area .doc-rule::before {content: '\e851';}
.pes .dashboard .top-guide .btn-area .doc-help {background-color: #3cb878;}
.pes .dashboard .top-guide .btn-area .doc-help::before {content: '\e82a';}
.dashboard .top-guide .guide-area {
  margin-top: 15px;
  padding: 18px 20px;
  line-height: 24px;
  border-radius: 15px;
  background-color: #f9f9fa;
}
.dashboard .top-guide .guide-area .guide-point {
  font-family: 'SCD-5';
  font-size: 16px;
  color: #ff4c5d;
}
.dashboard .flow-chart {
  display: inline-block;
  width: 100%;
  /* min-width: 1050px; */
}
.dashboard .flow-chart .content-tt .add-explain {
  margin-left: 12px;
  font-size: 17px;
  color: #777;
}
.dashboard .flow-chart .flow-chart-in {
  margin-top: 15px;
  padding: 20px;
  border-radius: 15px;
  background-color: rgba(14,92,233,.08);
}
.dashboard .flow-chart .flow-chart-in .flow-chart-list {display: inline-block;}
.dashboard .flow-chart .flow-chart-in .flow-chart-list dl {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
}
.dashboard .flow-chart .flow-chart-in .flow-chart-list dl + dl {
  position: relative;
  margin-left: 40px;
}
.dashboard .flow-chart .flow-chart-in .flow-chart-list dl + dl::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: calc(50% - 12px);
  left: -32px;
  content: '\e803';
  font-weight: bold;
  font-size: 24px;
  color: #999;
}
.dashboard .flow-chart dl dt {
  margin-bottom: 12px;
  padding-top: 30px;
  text-align: center;
  font-family: "SCD-5";
  font-size: 18px;
}
.dashboard .flow-chart dl dd {
  position: relative;
  width: 76%;
  margin: 0 auto;
  text-align: left;
  line-height: 29px;
  font-size: 14px;
}
.dashboard .flow-chart dl:nth-child(2) dd {width: 78%;}
.dashboard .flow-chart dl:nth-child(3) dd {width: 60%;}
.dashboard .flow-chart dl:nth-child(4) dd {width: 50%;}
.dashboard .flow-chart dl dd.add-line {
  margin-top: 5px;
  padding-top: 3px;
  border-top: 1px solid #ccc;
}
.dashboard .flow-chart dl dd .list-tt::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  content: '';
  margin: -3px 5px 0 0;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #999;
}
.dashboard .flow-chart dl dd .total-num,
.dashboard .flow-chart dl dd .btn-write {
  position: absolute;
  top: 0;
  right: 0;
}
.dashboard .flow-chart dl dd.add-line .total-num,
.dashboard .flow-chart dl dd.add-line .btn-write {
  top: 2px;
}
.dashboard .flow-chart dl dd .total-num {color: #222;}
.dashboard .flow-chart dl dd a.total-num {text-decoration: underline;}
.pes .dashboard .flow-chart dl dd .total-num {color: #0e5ce9;}
.dashboard .flow-chart dl dd a.btn-write {
  right: 4px;
  height: 22px;
  margin: 2px -5px 0 0;
  padding: 0 5px;
  line-height: 22px;
  font-size: 12px;
  color: #222;
  border: 1px solid #222;
  border-radius: 8px;
}
.pes .dashboard .flow-chart dl dd a.btn-write {
  color: #0e5ce9;
  border: 1px solid #0e5ce9;
}
.dashboard .bott-guide {
  border: 5px solid #f9f9fa;
  border-radius: 15px;
}
.dashboard .bott-guide dl dt {
  position: relative;
  padding: 10px 0 10px 45px;
  font-family: "SCD-5";
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
}
.dashboard .bott-guide dl dt::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 11px;
  left: 20px;
  content: '\e814';
  font-weight: bold;
  font-size: 20px;
  color: #999;
}
.dashboard .bott-guide dl dd {
  padding: 20px 20px 20px 45px;
  line-height: 26px;
  color: #555;
}
.dashboard .bott-guide dl dd p {position: relative;}
.dashboard .bott-guide dl dd p::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: -12px;
  content: '-';
}
.dashboard .bott-guide dl dd p.no-dash::before {display: none;}


/* ---  메세지 화면 --- */
.page-progress-msg {margin-top: 35vh;}
.page-progress-msg.relative {
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
.page-progress-msg .progress-msg-in .msg-area {margin-bottom: 25px;}
.page-progress-msg .progress-msg-in .msg-area p {
  text-align: center;
  line-height: 36px;
  font-size: 22px;
}
.page-progress-msg .progress-msg-in .btn-area button {
  height: 38px;
  line-height: 38px;
}
.page-progress-msg .progress-msg-in .btn-area button i {font-size: 28px;}


/* ---  세금계산서 --- */
.receipt-etax .tbl-invoice {
  position: relative;
  width: 650px;
  margin: 0 auto;
  border: 2px solid #2F5496;
}
.receipt-etax table {border: 0;}
.receipt-etax table,
.receipt-etax table tbody,
.receipt-etax table tr,
.receipt-etax table th,
.receipt-etax table td {margin: 0;padding: 0;}
.receipt-etax .tbl-invoice table th,
.receipt-etax .tbl-invoice table td {
  height: 21px;
  text-align: center;
  font-size: 12px;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  background-color: inherit;
}
.receipt-etax .tbl-invoice table th.txt-left,
.receipt-etax .tbl-invoice table td.txt-left {padding-left: 5px;}
.receipt-etax .tbl-invoice table th.txt-right,
.receipt-etax .tbl-invoice table td.txt-right {padding-right: 5px;}
.receipt-etax .tbl-invoice table th {border-right: 1px solid #999;}
.receipt-etax .tbl-invoice table th:last-child {border-right: 0;}
.receipt-etax .tbl-invoice .tbl-last tr td:last-child,
.receipt-etax .tbl-invoice .tbl-last tr:last-child td {border-bottom: 0;}
.receipt-etax .tbl-invoice table th.provider,
.receipt-etax .tbl-invoice table td.provider {
  height: 21px;
  font-size: 12px;
  border-left: 1px solid #F77573;
  border-bottom: 1px solid #F77573;
}
.receipt-etax .tbl-invoice table th.provider {
  color: rgb(208, 75, 80);
  border-right: 1px solid #F77573;
  background-color: #FFF6F7;
}
.receipt-etax .tbl-invoice table th.provider.tt {background-color: #FFDBDE;}
.receipt-etax .tbl-invoice table th.receiver,
.receipt-etax .tbl-invoice table td.receiver {
  height: 21px;
  font-size: 12px;
  border-left: 1px solid #5B9ADF;
  border-bottom: 1px solid #5B9ADF;
}
.receipt-etax .tbl-invoice table th.receiver {
  color: rgb(66, 121, 173);
  border-right: 1px solid #5B9ADF;
  background-color: #F7F7FF;
}
.receipt-etax .tbl-invoice table th.receiver.tt {background-color: #C6DBF7;}
.receipt-etax .tbl-invoice .invoice-tt-area {background-color: #eee;}
.tbl-invoice .invoice-tt-area .invoice-tt {font-size: 24px;border-bottom: 1px solid #F77573;}
.tbl-invoice .invoice-tt-area tr:last-child td {border-bottom: 1px solid #5B9ADF;}


/* ---  공지 팝업 --- */
.basic-pop.open .overlay-bg,
.basic-pop.open .pop-in {
  opacity: 1;
  z-index: 1200;
}
.overlay-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0,0,0,.5);
  opacity: 0;
  /* transition: .5s; */
}
.pop-in {
  position: fixed;
  top: 125px;
  left: 50%;
  width: 800px;
  /* height: 500px; */
  margin-left: -400px;
  background-color: #fff;
  border: 5px solid #222;
  box-sizing: border-box;
  opacity: 0;
  -webkit-transition: opacity .25s ease-out;
  -moz-transition: opacity .25s ease-out;
  -o-transition: opacity .25s ease-out;
  transition: opacity .25s ease-out;
}
.basic-pop.noti-pop .pop-in {
  width: 700px;
  margin-left: -350px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,.1);
}
.basic-pop.noti-pop .pop-in .top-area {
  position: relative;
  height: 70px;
}
.basic-pop.noti-pop .pop-in .top-area .btn-close {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 28px;
  height: 28px;
  opacity: .5;
  cursor: pointer;
}
.basic-pop.noti-pop .pop-in .top-area .btn-close::before {
  font-family: 'unifont';
  font-weight: bold;
  content: '\e80b';
  font-size: 28px;
  color: #222;
}
.basic-pop.noti-pop .pop-in .top-area .btn-close:hover {opacity: 1;}
.basic-pop.noti-pop .pop-in .img-area {text-align: center;}
.basic-pop.noti-pop .pop-in .img-area .img-noti {
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
}
.basic-pop.noti-pop .pop-in .img-area.noti-approval-2203 .img-noti {
  width: 700px;
  height: 310px;
  background: url('../images/2203-noti-approval.png') 0 0 no-repeat;
  background-size: 100%;
}
.basic-pop.noti-pop .pop-in .bott-area {
  display: flex;
  justify-content: center;
  height: 70px;
  margin-top: 50px;
  border-radius: 0 0 20px 20px;
  background-color: #f5f5f5;
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area {
  display: flex;
  align-items: center;
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .checkbox-area {
  margin-right: 33px;
  transform: scale(1.2);
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .check-red input[type=checkbox]:checked + .check-label::before {
  border-right-color: #222;
  border-bottom-color: #222;
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .btn-close {
  position: relative;
  display: inline-block;
  width: 70px;
  padding: 8px 0;
  font-size: 17px;
  color: #999;
  cursor: pointer;
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .btn-close:hover {color: #222;}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .btn-close::before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 1px;
  height: 17px;
  content: '';
  background-color: #bbb;
}
.basic-pop.noti-pop .pop-in .bott-area .btn-area .btn-close:hover::after {
  position: absolute;
  top: 9px;
  right: -8px;
  font-family: 'unifont';
  font-weight: bold;
  content: '\e80b';
  font-size: 21px;
}


/* ---  설치페이지 --- */
.page-install {margin-top: 15vh;}
.page-install .page-install-in {
  position: relative;
  width: 700px;
  margin-bottom: 10px;
  margin-left: calc(50% - 350px);
}
.page-install .page-install-in::after {
  display: inline-block;
  position: absolute;
  bottom: -65px;
  left: 0;
  width: 100%;
  font-family: 'unifont';
  content: '\e84a';
  text-align: center;
  font-weight: bold;
  font-size: 50px;
  color: #ccc;
  animation: fadeIn .5s ease-in-out infinite;
}
.install-tt {
  overflow: hidden;
  margin-left: 40px;
}
.install-tt * {float: left;}
.install-tt i {
  font-size: 90px;
  color: #ff4c5d;
}
.install-msg-tt {
  margin: 15px 0 0 10px;
  font-size: 21px;
}
.install-content {
  margin-top: 20px;
  padding: 25px 20px;
  border: 4px solid #eee;
  border-radius: 15px;
  background-color: #fff;
}
.install-content dt {
  margin-bottom: 10px;
  padding-bottom: 15px;
  text-align: center;
  font-family: 'SCD-5';
  font-size: 18px;
  border-bottom: 1px solid #999;
}
.install-content dd {padding: 15px 10px;}
.install-content dd + dd {border-top: 1px dashed #ccc;}
.install-content dd .step {
  margin-right: 15px;
  color: #aaa;
}
.page-install .btn-area {margin-top: 75px;}
.page-install .btn-area button {
  height: 42px;
  padding: 0 16px;
  line-height: 42px;
  font-family: 'SCD-5';
  font-size: 16px;
}
.page-install .btn-area button i {
  display: inline-flex;
  font-size: 26px;
}


/* --- 빈페이지 --- */
.wrap.in-blank-box {
  min-height: 100vh;
  background-color: #f6f6f8;
}
.blank-box {
  position: relative;
  padding-top: 20vh;
  text-align: center;
}
.blank-box .blank-box-in {
  position: relative;
  display: inline-block;
  width: 600px;
  text-align: left;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 10px 10px rgba(85,85,85,.05),
              0 30px 20px rgba(85,85,85,.05),
              0 50px 40px rgba(85,85,85,.1);
}
.blank-box .blank-box-in.wid-1000 {width: 1000px;}
.blank-box .blank-box-in .modal-body {padding: 0;}
.blank-box .blank-box-in .content-box {
  margin: 0;
  padding: 0;
  border: 0;
}
.blank-box .blank-box-in .content-box dl {margin: 0;}


/* --- 에러페이지 --- */
/* - v1 사용안함 - */
.page-err {
  position: relative;
  margin-top: 20vh;
}
.page-err .err-tt {
  text-align: center;
}
.page-err .err-tt p {
  font-family: 'SCD-8'; 
  font-size: 160px;
  /* color: rgba(255,76,93,.1); */
  color: #fff;
  opacity: .7;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               /* 0 0 5px rgba(0,0,0,.1), */
               /* 0 1px 3px rgba(0,0,0,.3), */
               /* 0 3px 5px rgba(0,0,0,.2), */
               /* 0 5px 10px rgba(0,0,0,.25), */
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.2);
  animation: fadeInMsg .5s ease-in-out 1;
}
.page-err .page-err-in {
  display: inline-block;
  /* width: 530px; */
  margin-bottom: 50px;
  margin-left: calc(50% - 260px);
}
.page-err .page-err-in .err-img,
.page-err .page-err-in .err-msg {
  float: left;
  /* margin-top: 10px; */
}
.err-img span {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 68px;
  color: #fff;
  border-radius: 50%;
  background-color: #ff4c5d;
}
.err-img span + span {margin-left: 7px;}
.page-err .page-err-in .err-img span i {font-size: 42px;}
.page-err .page-err-in .err-msg {
  margin-left: 40px;
  padding-left: 20px;
  border-left: 1px dashed #ff4c5d;
}
.err-msg .err-msg-tt {
  margin-bottom: 10px;
  font-family: 'SCD-5';
  font-size: 24px;
  color: #ff4c5d;
}
.err-msg p a {
  display: inline-block;
  margin-top: 10px;
  color: #999;
}

/* - v2 - */
.page-err.v2 {margin-top: 30vh;}
.page-err.v2 .page-err-in {
  /* width: 450px; */
  margin-bottom: 10px;
  margin-left: calc(50% - 225px);
}
.page-err.v2 .page-err-in .err-img {
  text-align: center;
  animation: shake .5s ease-in-out 1;
}
.page-err.v2 .page-err-in .err-img span {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.page-err.v2 .page-err-in .err-img span i {
  font-size: 60px;
}
.page-err.v2 .page-err-in .err-img i {
  font-size: 130px;
  color: #fed410;
}
.page-err.v2 .page-err-in .err-msg {
  margin: 18px 0 0 20px;
  padding: 0;
  border: 0;
}
.page-err.v2 .page-err-in .err-msg .err-msg-tt {
  font-size: 30px;
  color: inherit;
}
.page-err.v2 .page-err-in .err-msg p + p {margin-top: 2px;}
/* .page-err.v2 .btn-area {margin-left: 35px;} */


/* --- loading --- */
.loading-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
.loading-area .overlay-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  /* background: rgba(255,255,255,.8); */
  background: transparent;
  opacity: 1;
}
.loading-area .loading-area-in {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
}
.loading-area .loading-area-in .loader {text-align: center;}
/* .spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%,#25b09b);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: s3 1s infinite linear;
}
@keyframes s3 {to{transform: rotate(1turn)}} */
.spinner {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #9be347;
  border-radius: 50%;
} 
.spinner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  border: 0px solid white;
  transform: translate(-50%, -50%);
  animation: spinner 1000ms ease-out forwards infinite;
}
@keyframes spinner {
  0% {
    border: 0px solid white;
  }
  20% {
    border: 8px solid white;
    width: 0%;
    height: 0%;
  }
  100% {
    border: 8px solid white;
    width: 100%;
    height: 100%;
  }
}

.loading-area .loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading-area .container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  filter: url('#dot-blur');
  animation: rotate-move 2s ease-in-out infinite;
}
.loading-area .dot { 
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loading-area .dot-3 {
  background-color: #0e5ce9;
  animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}
.loading-area .dot-2 {
  background-color: #10beae;
  animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}
.loading-area .dot-1 {
  background-color: #ffe386;
  animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}
@keyframes dot-3-move {
  0% {transform: scale(1)}
  10% {transform: scale(.55)}
  20% {transform: scale(1)}
  45% {transform: translateY(-18px) scale(.55)}
  60% {transform: translateY(-90px) scale(.55)}
  80% {transform: translateY(-90px) scale(.55)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-2-move {
  0% {transform: scale(1)}
  10% {transform: scale(.55)}
  20% {transform: scale(1)}
  45% {transform: translate(-16px, 12px) scale(.55)}
  60% {transform: translate(-80px, 60px) scale(.55)}
  80% {transform: translate(-80px, 60px) scale(.55)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-1-move {
  0% {transform: scale(1)}
  10% {transform: scale(.55)}
  20% {transform: scale(1)}
  45% {transform: translate(16px, 12px) scale(.55)}
  60% {transform: translate(80px, 60px) scale(.55)}
  80% {transform: translate(80px, 60px) scale(.55)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes rotate-move {
  55% {transform: translate(-50%, -50%) rotate(0deg)}
  80% {transform: translate(-50%, -50%) rotate(360deg)}
  100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@keyframes index {
  0%, 100% {z-index: 3}
  33.3% {z-index: 2}
  66.6% {z-index: 1}
}


/* --- etc --- */
::-webkit-file-upload-button {cursor: pointer;}
.n {font-weight: normal !important;}
.b {font-weight: bold !important;}
.scd-4 {font-family: 'SCD-4' !important;}
.scd-5 {font-family: 'SCD-5' !important;}
.scd-6 {font-family: 'SCD-6' !important;}
.scd-7 {font-family: 'SCD-7' !important;}
.font-form {font-family: "굴림",gulim,Sans-serif !important;}
.block {display: block !important;}
.in-block {display: inline-block !important;}
.flex {display: flex !important;}
.hide,
.none {display: none !important;}
.pre-wrap {white-space: pre-wrap !important;}
.txt-left {text-align: left !important;}
.txt-cen {text-align: center !important;}
.txt-right {text-align: right !important;}
.flex-h-cen {align-items: center !important;}
.align-text {vertical-align: text-top;}
.align-top {vertical-align: top !important;}
.align-base {vertical-align: baseline !important;}
.fl-left {float: left;}
.fl-right {float: right;}
.po-relative {position: relative;}
.po-left {
  position: absolute;
  top: 0;
  left: 0;
}
.po-right {
  position: absolute;
  top: 0;
  right: 0;
}
.tbl-fixed {table-layout: fixed;}
.tbl-basic .tbl-area table tr .txt-left {
  /* padding-left: 10px; */
  padding: 0 10px;
  text-align: left;
}
.tbl-basic .tbl-area table tr .txt-cen {
  padding-left: 0;
  text-align: center;
}
.tbl-basic .tbl-area table tr .txt-right {
  /* padding-right: 10px; */
  padding: 0 10px;
  text-align: right;
}
.tbl-basic .tbl-area table tr .add-content {
  padding: 10px 0 0;
  text-align: left;
  vertical-align: top;
  border: 0;
}
/* .tbl-basic .tbl-area table tr .add-content-in {min-height: 80px;} */
.tbl-basic .tbl-area table tr .add-content-in pre {white-space: pre-wrap;}
.tbl-basic .tbl-area table tr .add-template {
  padding: 10px;
  text-align: left;
  border: 1px solid #eee;
}
.tbl-basic .tbl-area table tr.add-empty,
.tbl-basic .tbl-area table tr.add-empty td {
  /* height: 48px; */
  height: 40px;
  border: 0;
}
.tbl-basic .tbl-area table th.border-line,
.tbl-basic .tbl-area table td.border-line {
  border: 1px solid #eee;
}
.td-relative td {position: relative;}
.period,
.anchor-date {
  padding: 15px 20px;
  border-radius: 10px;
  background-color: rgba(14,92,233,.08);
}
.anchor-date::before,
.end-date::before {
  display: inline-block;
  font-family: "unifont";
  content: '\e807';
  margin: -4px 5px 0 0;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 600;
  color: #999;
}
.period span:nth-child(2) {
  margin-left: 20px;
  color: #0e5ce9;
}
.anchor-date span.c1 {
  margin-left: 8px;
  color: #0e5ce9;
}
.end-date {
  position: relative;
  margin-bottom: 10px;
  padding: 15px 20px;
  background-color: rgba(255,76,93,.08);
}
.end-date .point {
  margin-left: 8px;
  font-family: inherit;
  color: #ff4c5d;
}
.end-date .add-explain {
  margin: 5px 0 0 22px;
  font-size: 13px;
  color: #777;
}
.end-date .rule-book {
  position: absolute;
  top: 15px;
  right: 20px;
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  color: #ff4c5d;
  border: 1px solid rgba(255,76,93,.3);
  background-color: #fff;
}
.anchor-date + .tbl-basic {margin-top: 0;}
.tbl-explain {
  margin: 10px 0;
  font-size: 13px;
  color: #777;
}
.pes-erp-mapping .etc-set .tbl-basic .tbl-area table td > * {vertical-align: initial;}
.pes-erp-mapping .etc-set .tbl-basic table td .tbl-explain {display: flex;}
.tbl-basic.in-tbl-explain .tbl-explain {
  display: block;
  margin-bottom: 0;
}
.tbl-explain.indent {
  margin: 10px 0 10px 16px;
  text-indent: -16px;
}
.tbl-explain + .tbl-explain {margin: -5px 0 10px;}
.tbl-in-explain {
  padding: 0 20px 12px 0;
  color: #777;
}
.tab-noti {
  padding: 12px 20px;
  border-radius: 8px;
  background-color: rgba(14,92,233,.05);
}
.list-explain {
  position: relative;
  top: 5px;
  margin-bottom: 10px;
}
.tab-noti p .block {
  display: block;
  margin-left: 12px;
}
.tab-noti p .block span {display: block;}
.point {font-family: "SCD-6" !important;}
/* .m-hgt-600px {min-height: 600px !important;} */
.hgt-100 {height: 100% !important;}
.wid-800px {width: 800px !important;}
.wid-700px {width: 700px !important;}
.wid-600px {width: 600px !important;}
.wid-500px {width: 500px !important;}
.wid-450px {width: 450px !important;}
.wid-400px {width: 400px !important;}
.wid-350px {width: 350px !important;}
.wid-300px {width: 300px !important;}
.wid-100-f {width: 100% !important;}
.wid-100 {width: calc(100% - 20px);}
.wid-95 {width: 95% !important;}
.wid-90 {width: 90% !important;}
.wid-85 {width: 85% !important;}
.wid-80 {width: 80% !important;}
.wid-75 {width: 75% !important;}
.wid-70 {width: 70% !important;}
.wid-65 {width: 65% !important;}
.wid-60 {width: 60% !important;}
.wid-55 {width: 55% !important;}
.wid-50 {width: 50% !important;}
.wid-45 {width: 45% !important;}
.wid-40 {width: 40% !important;}
.wid-35 {width: 35% !important;}
.wid-30 {width: 30% !important;}
.wid-25 {width: 25% !important;}
.wid-20 {width: 20% !important;}
.wid-15 {width: 15% !important;}
.wid-10 {width: 10% !important;}
.wid-5 {width: 5% !important;}
.mt60 {margin-top: 60px !important;}
.mt50 {margin-top: 50px !important;}
.mt45 {margin-top: 45px !important;}
.mt40 {margin-top: 40px !important;}
.mt35 {margin-top: 35px !important;}
.mt30 {margin-top: 30px !important;}
.mt25 {margin-top: 25px !important;}
.mt20 {margin-top: 20px !important;}
.mt15 {margin-top: 15px !important;}
.mt10 {margin-top: 10px !important;}
.mt-25 {margin-top: -25px !important;}
.mt-20 {margin-top: -20px !important;}
.mt-15 {margin-top: -15px !important;}
.mt-10 {margin-top: -10px !important;}
.mt-5 {margin-top: -5px !important;}
.mt-1 {margin-top: -1px !important;}
.mt5 {margin-top: 5px !important;}
.mt0 {margin-top: 0 !important;}
.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.ml2 {margin-left: 2px !important;}
.ml10 {margin-left: 10px !important;}
.mr10 {margin-right: 10px !important;}
.ml-basic {margin-left: 5px !important;}
.mr-basic {margin-right: 5px !important;}
.m0 {margin: 0 !important;}
.mp0 {
  margin: 0 !important;
  padding: 0 !important;
}
.p0 {padding: 0 !important;}
.pl0 {padding-left: 0 !important;}
.pr0 {padding-right: 0 !important;}
.pt0 {padding-top: 0 !important;}
.pb80 {padding-bottom: 80px !important;}
.p10 {
  padding: 10px !important;
  box-sizing: border-box;
}
.p20 {
  padding: 20px !important;
  box-sizing: border-box;
}
.pt6-pb6 {padding: 6px 0 !important;}
.clearfix {clear: both;}
.clearfix::after {
  display: block;
  content: '';
  clear: both;
}
.over-auto {overflow: auto;}
.box-border {box-sizing: border-box;}
.point-yel {color: #ffe400 !important;}
.uni-red {color: #ff4c5d !important;}
/* .uni-org1 {color: #ff5f50 !important;}
.uni-org2 {color: #ff8b00 !important;}
.uni-yel {color: #fed410 !important;}
.uni-grn {color: #51b300 !important;}
.uni-grn2 {color: #00893b !important;}
.uni-tur {color: #00c0b5 !important;}
.uni-sky {color: #1ac6ed !important;}
.uni-pur {color: #6540b6 !important;} */
.uni-approval {color: #ff8b00 !important;}
.uni-blu {color: #0e5ce9 !important;}
.uni-cloud {color: #0e5ce9 !important;}
.uni-222 {color: #222 !important;}
.uni-555 {color: #555 !important;}
.uni-777 {color: #777 !important;}
.uni-999 {color: #999 !important;}
.uni-aaa {color: #aaa !important;}
.uni-bbb {color: #bbb !important;}
.bg-uni-red {background-color: rgba(255,76,93,.1) !important;}
.bg-uni-yel {background-color: rgba(255,240,0,.1) !important;}
.bg-uni-grn {background-color: rgba(81,179,0,.1) !important;}
.bg-uni-grn2 {background-color: rgba(92,187,157,.2) !important;}
.bg-fff {background-color: #fff !important;}
.bg-g {background-color: #f6f6f8;}
.c1 {color: #0e5ce9;}
.indent-basic {text-indent: 12px !important;}
.indent-num {
  padding-left: 24px !important;
  text-indent: -17px !important;
}
.f14 {font-size: 14px !important;}
.f13 {font-size: 13px !important;}
.f12 {font-size: 12px !important;}
.line-h-24 {line-height: 24px;}
.line-h-text {line-height: 34px;}
.underline {text-decoration: underline !important;}
.bo0 {border: 0 !important;}
.bo-ddd {border: 1px solid #ddd;}
.bo-eee {border: 1px solid #eee;}
a.uni-link,
.uni-link {
  display: block;
  color: #2F79A6;
  cursor: pointer;
}
a.uni-link-btn,
.uni-link-btn {
  display: inline-block;
  padding: 2px 6px;
  color: #2F79A6;
  border-radius: 6px;
  background-color: rgba(47,121,166,.1);
  cursor: pointer;
}
a.uni-link-btn.c1-bg,
.uni-link-btn.c1-bg {
  color: #fff;
  background-color: #0e5ce9;
}
a.uni-link-btn.red,
.uni-link-btn.red {
  color: #ff4c5d;
  background-color: rgba(255,76,93,.1);
}
a.uni-link-btn.btn-s,
.uni-link-btn.btn-s {
  height: 26px;
  padding: 0 6px;
  line-height: 26px;
  font-size: 12px;
}
a.uni-link:hover,
.uni-link:hover,
a.uni-link-btn:hover,
.uni-link-btn:hover {font-family: "SCD-5";}
/* .red-star::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  margin-left: -10px;
  vertical-align: middle;
  background-color: #ff4c5d;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
} */
.red-star::before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  margin-left: -10px;
  font-size: 13px;
  color: #ff4c5d;
}
.ico-move {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.ico-move::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 12px;
  height: 3px;
  content: '';
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}
.bg-save {background-color: rgba(14,92,233,.05);}
.bg-write {background-color: rgba(255,228,0,.05);}
.line-box {
  padding: 20px;
  border: 1px solid #ddd;
}
.count-box {
  position: fixed;
  bottom: 25px;
  left: 0;
  width: calc(100% - 300px);
  margin-left: 260px;
  margin-right: 40px;
  text-align: center;
  z-index: 50;
  /* filter: alpha(opacity=50); */
  opacity: .5;
  animation: fadeInSide 2s ease 1;
  pointer-events: none;
} 
.menu-nav-bar.top + section .count-box,
section.side-off .count-box {
  width: calc(100% - 80px);
  margin-left: 40px;
}
.count-box-in {
  display: inline-block;
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  background-color: #eee;
}
.count-box-in span:first-child {color: #ff4c5d;}
.count-box-in span + span {margin-left: 4px;}
.btn-box-in {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  padding: 2px 6px;
  font-size: 12px;
  color: #222;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}
.explain-box .btn-box-in.right {
  position: absolute;
  top: 18px;
  right: 20px;
}
.doc-download {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 5px 35px 5px 10px;
  color: #fff;
  border-radius: 8px;
  background-color: #777;
}
.doc-download::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e851';
  padding: 3px;
  font-size: 21px;
  background-color: rgba(255,255,255,.1);
}
.btn-form-download,
.btn-help-pop {
  display: inline-block;
  position: relative;
  height: 22px;
  margin-left: 10px;
  padding: 0 22px 0 6px;
  line-height: 20px;
  text-indent: 0;
  font-size: 12px;
  color: #222;
  border: 1px solid #999;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-form-download::before {
  position: absolute;
  top: 0;
  right: 4px;
  content: '\e851';
  font-family: 'unifont';
  font-weight: bold;
  font-size: 15px;
  color: #ff4c5d;
}
.btn-help-pop::before {
  position: absolute;
  top: 0;
  right: 4px;
  content: '\e82a';
  font-family: 'unifont';
  font-weight: bold;
  font-size: 15px;
  color: #ff4c5d;
}
.btn-popup {
  display: flex;
  position: relative;
}
.btn-popup.btn-s {padding-right: 30px;}
.btn-popup.btn-s::before {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 12px;
  height: 12px;
  content: '';
  background: url('../images/ico-popup-blue.svg') 0 0 no-repeat;
  background-size: 12px;
}
.btn-popup.btn-xs {padding-right: 24px;}
table .btn-popup.btn-xs {
  display: inline-block;
  margin: 0 5px;
}
.btn-popup.btn-xs::before {
  position: absolute;
  top: calc(50% - 5px);
  right: 7px;
  width: 10px;
  height: 10px;
  content: '';
  background: url('../images/ico-popup-blue.svg') 0 0 no-repeat;
  background-size: 10px;
}

/* 게시판 목록 댓글 숫자 추가 */
.comment-num {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #ff6225;
}
a .comment-num,
.uni-link .comment-num {
  position: relative;
  top: 2px;
}
.comment-num::before {
  width: 16px;
  height: 16px;
  margin: 0 2px 0 6px;
  content: '';
  background: url('../images/ico-speech-bubble.svg') 0 0 no-repeat;
  background-size: 16px;
}

/* 게시판 목록 작성 필요 아이콘 추가 */
.tbl-badge {
  /* display: inline-flex;
  align-items: center;
  justify-content: center; */
  position: relative;
  top: -1px;
  padding: 3px 6px;
  font-family: "SCD-5";
  font-size: 11px;
  color: #999;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .06);
  box-sizing: border-box;
}
.tbl-badge.c-p-red {
  color: #ffa4a3;
  background-color: rgba(255,164,163,.17);
}
.tbl-badge.c-p-green {
  color: #76bb7b;
  background-color: rgba(118,187,123,.16);
}
.tbl-badge.c-p-blue {
  color: #7bb3f9;
  background-color: rgba(123,179,249,.17);
}
.tbl-badge.c-p-violet {
  color: #c4a3ff;
  background-color: rgba(196,163,255,.17);
}
.tbl-badge.c-p-brown {
  color: #c9ada2;
  background-color: rgba(201,173,162,.17);
}
.write-necessary {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 2px;
}
.write-necessary:before {
  width: 17px;
  height: 15px;
  margin-left: 8px;
  content: '';
  background: url('../images/ico-write-necessary.svg') 0 0 no-repeat;
}

/* 가이드 모달 버튼 */
.top-guide .btn-area {
  position: absolute;
  top: 0;
  right: 0;
}
.top-guide .btn-area button {
  position: relative;
  height: 30px;
  padding: 0 40px 0 10px;
  line-height: 30px;
  color: #fff;
  border-radius: 8px;
  background-color: #777;
}
.top-guide .btn-area button::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e808';
  padding: 0 5px;
  font-size: 20px;
  background-color: rgba(255,255,255,.1);
}
.pes .top-guide .btn-area .doc-rule {background-color: #008fd5;}
.pes .top-guide .btn-area .doc-rule::before {content: '\e851';}
.pes .top-guide .btn-area .doc-help {background-color: #3cb878;}
.pes .top-guide .btn-area .doc-help::before {content: '\e82a';}

/* 파일 업로더 추가 - 드래그 가능 */
.file-upload-box {
  display: flex !important;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 100px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafc;
  box-sizing: border-box;
}
table .file-upload-box {
  width: calc(100% - 8px);
  margin: 10px 10px 10px 0;
}
.file-upload-box .box-top {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 15px 20px;
  color: #999;
}
.file-upload-box .box-top > p {
  position: relative;
  padding-left: 23px;
}
.file-upload-box .box-top > p::before {
  position: absolute;
  top: -1px;
  left: -1px;
  font-family: "unifont";
  content: '\e810';
  font-size: 18px;
  color: #2F79A6;
}
.file-upload-box .box-top .btn-add {
  position: relative;
  margin-left: 6px;
}
.file-upload-box .box-top .btn-add span {
  text-decoration: underline;
  color: #2F79A6;
}
.file-upload-box .box-top .btn-add input[type=file] {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  opacity: 0;
}
.file-upload-box .file-list li {
  display: flex;
  align-items: center;
  padding: 6px 20px;
  font-size: 13px;
  background-color: #fff;
}
.file-upload-box .file-list li:first-child {
  padding-top: 15px;
  border-top: 1px dashed #eee;
}
.file-upload-box .file-list li:last-child {padding-bottom: 15px;}
.file-upload-box .file-list li > * + * {margin-left: 8px;}
.file-upload-box .file-list li .btn-del {cursor: pointer;}
.file-upload-box .file-list li .btn-del::before {
  font-family: "unifont";
  content: '\e80b';
  font-weight: bold;
  font-size: 14px;
  color: #ff4c5d;
  border-radius: 50%;
}
.file-upload-box .file-list li .btn-del:hover::before {
  position: relative;
  margin: -2px;
  padding: 2px;
  background-color: rgba(255,76,93,.1);
}
.file-upload-box .file-list li .file-size {
  font-size: 12px;
  color: #aaa;
}
.file-upload-box .file-list li .btn-download {
  display: inline-block;
  cursor: pointer;
}
.file-upload-box .file-list li .btn-download::before {
  font-family: "unifont";
  font-weight: bold;
  font-size: 18px;
  color: #222;
  content: '\e851';
}
.file-upload-box .file-list li .btn-download:hover::before {color: #0e5ce9;}

/* 에디터 내부 초기화 */
.in-editor div,.in-editor span,.in-editor object,.in-editor iframe,
.in-editor h1,.in-editor h2,.in-editor h3,.in-editor h4,.in-editor h5,.in-editor h6,.in-editor p,.in-editor blockquote,.in-editor pre,
.in-editor abbr,.in-editor address,.in-editor cite,.in-editor code,
.in-editor del,.in-editor dfn,.in-editor em,.in-editor img,.in-editor ins,.in-editor kbd,.in-editor q,.in-editor samp,
.in-editor small,.in-editor strong,.in-editor sub,.in-editor sup,.in-editor var,
.in-editor b,.in-editor i,
.in-editor dl,.in-editor dt,.in-editor dd,.in-editor ol,.in-editor ul,.in-editor li,
.in-editor button,
.in-editor fieldset,.in-editor form,.in-editor label,.in-editor legend,.in-editor select,.in-editor option,
.in-editor caption,.in-editor tbody,.in-editor tfoot,.in-editor thead,.in-editor tr,.in-editor th,.in-editor td,
.in-editor article,.in-editor aside,.in-editor canvas,.in-editor details,.in-editor figcaption,.in-editor figure, 
.in-editor footer,.in-editor header,.in-editor hgroup,.in-editor menu,.in-editor nav,.in-editor section,.in-editor summary,
.in-editor time,.in-editor mark,.in-editor audio,.in-editor video {
  font-family: sans-serif;
  margin: inherit;
  padding: inherit;
  border: initial;
  background: inherit;
  outline: inherit;
  margin: revert;
  padding: revert;
  border: revert;
  background: revert;
  outline: revert;
}
.in-editor dl,.in-editor ul,.in-editor ol,.in-editor menu,.in-editor li {list-style: revert;}
.in-editor img {
  border: revert;
  vertical-align: revert;
}
.in-editor .tox-tinymce {border: inherit;}
/* .tbl-basic .tbl-area table tr .in-editor {font-family: sans-serif;} */
/* .tbl-basic .tbl-area table tr .in-editor * {
  height: inherit;
  margin: inherit;
  padding: inherit;
  text-align: inherit;
  list-style: inherit;
  font-family: sans-serif;
} */
.tbl-basic .tbl-area table tr .in-editor dl * {
  font-family: sans-serif;
  font-size: inherit;
  border: inherit;
}
/* .tbl-basic .tbl-area table tr .in-editor ul {list-style-type: disc;}
.tbl-basic .tbl-area table tr .in-editor ol {list-style-type: decimal;} */
.tbl-basic .tbl-area table tr .in-editor pre {
  font-size: inherit;
  color: inherit;
}
.tbl-basic .tbl-area table tr .in-editor *::before {display: none;}
.tbl-basic .tbl-area table .in-editor th, 
.tbl-basic .tbl-area table .in-editor td {
  height: inherit;
  margin: inherit;
  padding: inherit;
  text-align: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  border: 1px solid;
  background-color: inherit;
}
.tbl-basic .tbl-area table .in-editor .doc-template th,
.tbl-basic .tbl-area table .in-editor .doc-template td {
  padding: 0;
  border: 0;
}
.tbl-basic .tbl-area table .in-editor .doc-template span {
  padding: 0;
  font-family: 'SCD-4',Malgun Gothic,sans-serif;
}
.tbl-basic .tbl-area table .in-editor .doc-template table td > * {display: table;}

/* 영역 분할 스타일 추가 */
.col-set {
  display: inline-block;
  width: 100%;
}
.col-set .col-1 {
  float: left;
  width: calc(50% - 40px);
}
.col-set .col-2 {
  width: 50%;
  float: right;
}
.col-set.col-25-75 .col-1 {width: calc(25% - 40px);}
.col-set.col-25-75 .col-2 {width: 75%;}
.col-set.col-65-35 .col-1 {width: calc(65% - 40px);}
.col-set.col-65-35 .col-2 {width: 35%;}
.col-set.col-3-7 .col-1 {width: calc(30% - 40px);}
.col-set.col-3-7 .col-2 {width: 70%;}
.col-set.col-4-6 .col-1 {width: calc(40% - 40px);}
.col-set.col-4-6 .col-2 {width: 60%;}
.col-set.col-6-4 .col-1 {width: calc(60% - 40px);}
.col-set.col-6-4 .col-2 {width: 40%;}
.col-set.col-7-3 .col-1 {width: calc(70% - 40px);}
.col-set.col-7-3 .col-2 {width: 30%;}
.col-set.col-tree .col-1 {width: 300px;}
.col-set.col-tree .col-2 {width: calc(100% - 340px);}
.modal .col-set.col-tree .col-2 {width: calc(100% - 330px);}
.col-set .cols {
  float: left;
  width: calc(50% - 20px);
  box-sizing: border-box;
}
.col-set .cols:nth-child(2) {margin-left: 40px;}
.modal .col-set .cols:nth-child(2) {margin-left: 30px;}

/* 상단 도움말 버튼 추가 */
.btn-area.top-guide {
  position: absolute;
  top: 0;
  right: 0;
}
.btn-area.top-guide button {
  position: relative;
  height: 30px;
  padding: 0 40px 0 10px;
  line-height: 30px;
  text-decoration: none;
  font-size: 13px;
  color: #fff;
  border-radius: 8px;
}
.btn-area.top-guide button::before {
  font-family: 'unifont';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  content: '\e851';
  padding: 0 5px;
  font-size: 20px;
  background-color: rgba(255,255,255,.1);
}
.btn-area.top-guide .doc-help {background-color: #3cb878;}
.btn-area.top-guide .doc-help::before {content: '\e82a';}
/* 추가 */
.btn-area.top-guide .btn-link {background-color: #3cb878;}
.btn-area.top-guide .btn-link::before {content: '\e82a';}
.btn-area.top-guide .btn-download {background-color: #0e5ce9;}
.btn-area.top-guide .btn-download::before {content: '\e851';}
.btn-area.top-guide .btn-check {background-color: #777;}
.btn-area.top-guide .btn-check::before {content: '\e808';}

/* 합계 영역 추가 */
.list-total-box {
  float: left;
  height: 32px;
  margin-right: 8px;
  padding: 0 10px 0 8px;
  line-height: 32px;
  border: 1px solid rgba(255,76,93,.3);
}

/* 설명 박스 추가 */
.explain-box {
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9fa;
}
.explain-box.c1 {
  background-color: rgba(14,92,233,.05);
}
.explain-box.dd-c1 {
  color: #0e5ce9;
}
.explain-box.red {background-color: rgba(255,76,93,.05);}
.explain-box .detail {
  margin-top: 3px;
  line-height: 22px;
  font-size: 13px;
}
.explain-box .detail.indent {
  margin-left: 12px;
  text-indent: -9px;
}
.explain-box dl {overflow: hidden;}
.explain-box dl + dl {margin-top: 5px;}
.explain-box dl dt {
  float: left;
  width: 80px;
  color: #555;
}
.explain-box dl dd {
  float: left;
  width: calc(100% - 80px);
}

/* 한줄 설명 추가 */
.explain-line {
  font-size: 12px;
  color: #999;
}

/* 공통 박스 구조 추가 */
.box-set {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 15px;
  box-sizing: border-box;
}
.box-set .box-set-tt {
  position: relative;
  padding: 0 20px;
  line-height: 40px;
  font-size: 15px;
  color: #222;
  background-color: #ddd;
}
.box-set .cont-area {box-sizing: border-box;}

/* 상단 요약 박스 */
.total-top + .tbl-basic {padding-top: 0;}
.total-top {
  height: 48px;
  padding-left: 20px;
  line-height: 50px;
  border: 1px dashed rgba(14,92,233,0.3);
  border-radius: 15px;
}
.total-top p {
  display: inline-block;
  font-size: 15px;
  line-height: 15px;
  color: #0e5ce9;
}
.total-top p + p {margin-left: 50px;}
.total-top p span:first-child {
  padding-right: 10px;
  color: #999;
}

/* 범례 추가 */
.legend-area {
  height: 30px;
  font-size: 13px;
}
.legend-area::after {
  display: block;
  content: '';
  clear: both;
}
.tbl-tt + .legend-area {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 26px;
}
.legend-area p {
  display: flex;
  align-items: center;
  justify-content: end;
}
.legend-area p .ico {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #d9efe1;
  box-sizing: border-box;
}

/* 버튼라인 범례 추가 */
.btn-area .legend-box {
  display: inline-block;
  height: 31px;
  padding: 0 10px;
  line-height: 31px;
  font-size: 13px;
  color: #ff4c5d;
  background-color: #fff;
}
.btn-area .legend-box {margin-left: 5px;}
.btn-area .legend-box .legend-list {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 30px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid rgba(255,76,93,.4);
  border-radius: 4px;
}
.btn-area .legend-box .legend-list.write {background-color: #FFFFE9;}

/* 시간 선택 스타일 추가 */
.period-area .tp {
  position: relative;
  font-family: "SCD-4";
  padding: 6px 28px 6px 6px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.period-area .tp input {background-color: transparent;}
.period-area .tp input:focus {
  color: #ff4c5d;
  border-radius: 3px;
  background-color: rgba(255,76,93,.1);
}
.period-area .tp input::selection {background: transparent;}
.period-area .tp .tp_spinners {
  position: absolute;
  top: 4px;
  right: 0;
  height: 100%;
  padding: 9px 6px;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
.period-area .tp .tp_spinners .tp_spinup:hover {border-bottom-color: #ff4c5d;}
.period-area .tp .tp_spinners .tp_spindown:hover {border-top-color: #ff4c5d;}

/* 팝업 내 첨부파일 스타일 추가 */
.file-add.v2 {
  position: relative;
  width: 100%;
}
td .file-add.v2 {width: calc(100% - 10px);}
.file-add.v2 input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 76px;
  height: 31px;
  margin: 0;
  opacity: 0;
}
.file-add.v2 .file-area {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed #eee;
  box-sizing: border-box;
}
.file-add.v2 .file-area .file-name {
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 80px);
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 13px;
  color: #2f79a6;
}
.file-add.v2 .file-area .btn-area {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}
.file-add.v2 .file-area .btn-area * {margin: 0;}
.file-add.v2 .file-area .btn-area span {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.file-add.v2 .file-area .btn-area span::before {
  display: inline-block;
  font-family: "unifont";
  font-weight: bold;
  font-size: 19px;
  color: #999;
}
.file-add.v2 .file-area .btn-area span.btn-view::before {content: '\e832';}
.file-add.v2 .file-area .btn-area span.btn-download::before {content: '\e851';}
.file-add.v2 .file-area .btn-area span.btn-del::before {content: '\e80b';}
.file-add.v2 .file-area .btn-area span:hover::before {color: #2f79a6;}

/* 팝업 내 프린트 옵션 영역 추가 */
.modal-body > .check-op-area {margin-top: 30px;}
.check-op-area .check-op-in {
  margin-top: 10px;
  padding: 20px;
  border-radius: 15px;
  background-color: rgba(14,92,233,.05);
}
.check-op-area .check-op-in .checkbox-area {
  display: block;
  margin: 10px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.check-op-area .check-op-in .checkbox-area:first-child {
  margin: 0;
  padding: 0;
  border: 0;
}
.check-op-area .check-op-in .checkbox-area.indent {
  position: relative;
  padding-left: 20px;
}
.check-op-area .check-op-in .checkbox-area.indent::before {
  position: absolute;
  top: 15px;
  left: 12px;
  content: '';
  width: 5px;
  height: 5px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
.check-op-area .check-op-in .checkbox-area .check-label {width: 190px;}
.check-op-area .check-op-in .checkbox-area.indent .check-label {width: 170px;}
.check-op-area .check-op-in .checkbox-area .add-explain {color: #999;}
.check-op-area .btn-area {margin-top: 20px;}

/* 팝업 내 증빙 버튼 세트 수정 및 추가 */
/* .noSel {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 66px;
  background-color: rgba(0,0,0,.55);
} */
.noSel .controlsBg {border-radius: 8px !important;}
#_zinorm,
#_ziover,
#_zonorm,
#_zoover {border-radius: 50% !important;}
.photo-area .btn-set {
  position: absolute;
  right: 20px;
  top: 86px;
  width: 36px;
  z-index: 20;
}
.photo-area .btn-set .btn-area {
  position: relative;
  border-radius: 8px;
}
.photo-area .btn-set .btn-area + .btn-area {margin-top: 10px;}
.photo-area .btn-area.rotate {
  height: 66px;
  background-color: rgba(0,0,0,.55);
}
.photo-area .btn-area.download {
  height: 36px;
  background-color: rgba(0,0,0,.55);
}
.photo-area .btn-area.rotate span,
.photo-area .btn-area.download span {
  overflow: hidden;
  position: absolute;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  text-indent: -9999px;
  border-radius: 50%;
  cursor: pointer;
}
.photo-area .btn-area.rotate span.rotate-r {
  top: 6px;
  left: 6px;
  background: url('../images/img-rotate-r.svg') 50% 50% no-repeat;
  background-size: 16px;
  background-color: rgba(255,255,255,.7);
}
.photo-area .btn-area.rotate span.rotate-l {
  top: 36px;
  left: 6px;
  background: url('../images/img-rotate-l.svg') 50% 50% no-repeat;
  background-size: 16px;
  background-color: rgba(255,255,255,.7);
}
.photo-area .btn-area.download span {
  top: 6px;
  left: 6px;
  background: url('../images/img-download.svg') 50% 50% no-repeat;
  background-size: 14px;
  background-color: rgba(255,255,255,.7);
}
.photo-area .btn-set .btn-area span:hover {background-color: rgba(255,255,255,1);}
.photo-area .btn-set .btn-area span:active {
  width: 26px;
  height: 26px;
  background-color: rgba(255,255,255,1);
}
.photo-area .btn-area.rotate span.rotate-r:active,
.photo-area .btn-area.download span:active {
  top: 5px;
  left: 5px;
  line-height: 26px;
}
.photo-area .btn-area.rotate span.rotate-l:active {
  top: 35px;
  left: 5px;
  line-height: 26px;
}
.photo-area .btn-area.in-btn-scan {
  position: absolute;
  bottom: 20px;
  right: 20px;
  /* display: flex;
  align-items: end;
  justify-content: right;
  width: 100%;
  height: 100%; */
}
.photo-area .btn-area.in-btn-scan .btn-scan {
  position: relative;
  height: 28px;
  padding: 0 12px;
  padding-left: 35px;
  line-height: 28px;
  font-family: 'SCD-5';
  font-size: 13px;
  border: 1px solid #999;
  border-radius: 28px;
  background-color: #fff;
}
.photo-area .btn-area.in-btn-scan .btn-scan::before {
  position: absolute;
  top: 5px;
  left: 12px;
  width: 16px;
  height: 17px;
  content: '';
  background: url('../images/ico-text-scan.svg') 50% 50% no-repeat;
}
.photo-area .btn-area.in-btn-scan .btn-scan::after {border-radius: 28px;}

/* 영수증 스캔 추가 */
.photo-area .scanning-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.photo-area .scanning-box::before {
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #3fefef;
  opacity: .2;
}
.photo-area .scanning-box .scanning-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-area .scanning-box .scanning-bar::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  border-radius: 5px;
  background: #3fefef;
  filter: drop-shadow(0 0 5px #3fefef) drop-shadow(0 0 10px #3fefef);
  animation: animate-line 8s ease-in-out infinite;
}
.photo-area .scanning-box p {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 80px;
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 13px;
  color: #3fefef;
  background-color: #222;
}
.photo-area .scanning-box p span {animation: opacity 1s ease-in-out infinite;}

/* 파일 리스트 */
.file-list-box ul li + li {margin-top: 10px;}
.file-list-box ul li .file-name {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0 30px 0 10px;
  text-align: left;
  line-height: 34px;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: rgba(14,92,233,.08);
  box-sizing: border-box;
}
.file-list-box ul li .file-name:hover {
  border: 1px solid rgba(14,92,233,.4);
  background-color: #fff;
}
.file-list-box ul li .file-name.file-down {cursor: pointer;}
.file-list-box ul li .file-name.file-down::after {
  position: absolute;
  top: 0;
  right: 8px;
  font-family: 'unifont';
  content: '\e851';
  font-size: 22px;
  color: #0e5ce9; /* 서비스 컬러 - 필요 시 추가 */
}

/* 안내 메세지 */
.status-message {
  margin-bottom: 15px;
  padding: 10px 20px;
  border-radius: 4px;
  color: #0e5ce9;
  border: 1px solid transparent;
  background-color: rgba(14,92,233,.05);
}
.status-message.save,
.status-message.save,
.status-message.pes {
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.3);
  background-color: #f2f9fd;
}
/* .status-message.approval {
  margin-bottom: 0;
  color: #ff8b00;
  border: 1px solid rgba(255,139,0,.3);
  background-color: rgba(255,139,0,.05);
}
.status-message.avs {
  margin-bottom: 0;
  color: #1ac6ed;
  border: 1px solid rgba(26,198,237,.3);
  background-color: rgba(26,198,237,.05);
} */
.status-message.red {
  color: #ff4c5d;
  border: 1px solid rgba(255,76,93,.3);
  background-color: rgba(255,76,93,.05);
}

/* 안내 메세지 추가 */
.status-message-area .status-message {
  margin: inherit;
  color: #0e5ce9;
  border: 1px solid rgba(14,92,233,.3);
  background-color: #f2f9fd;
}
.status-message-area .status-message.danger {
  color: #ff4c5d;
  border: 1px solid rgba(255,76,93,.2);
  background-color: rgba(255,76,93,.05);
}
.status-message-area .status-message.success {
  color: #129a55;
  border: 1px solid rgba(18,154,85,.3);
  background-color: rgba(18,154,85,.05);
}
.status-message-area .status-message p span:last-child {
  display: inline-block;
  margin-left: 8px;
}
.status-message-area .status-message pre {white-space: pre-wrap;}

/* 도움말 말풍선 추가 */
table .in-speech-bubble-box {
  position: relative;
  display: table-cell;
}
.speech-bubble-box {
  display: inline-flex;
  position: relative;
  margin-left: 5px;
  cursor: pointer;
}
table .speech-bubble-box {
  position: absolute;
  /* top: calc(50% - 10px); */
  top: auto;
  right: 10px;
}
.speech-bubble-box.total-line {
  float: left;
  top: 5px;
  z-index: 1;
}
.speech-bubble-box::before {
  font-family: "unifont";
  content: "\e812";
  font-weight: bold;
  font-size: 14pt;
  color: #0e5ce9;
  /* color: #ff4c5d; */
}
table .speech-bubble-box::before {margin-top: -1px;}
.speech-bubble-box.bubble-bk-bg::before {
  content: "\e813";
  font-weight: normal;
  font-size: 15pt;
  color: #0a2a5a;

  /* 기본 디자인과 동일하게 변경 */
  font-family: "unifont";
  content: "\e812";
  font-weight: bold;
  font-size: 14pt;
  color: #0e5ce9;
}
.speech-bubble-box .cont-area:before {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: 9px;
}
.speech-bubble-box.on-top .cont-area:before,
.speech-bubble-box.on-bottom .cont-area:before {
  left: calc(50% - 9px);
}
.speech-bubble-box.on-top .cont-area:before {
  bottom: -18px;
  border-color: #0a2a5a transparent transparent;
}
.speech-bubble-box.on-bottom .cont-area:before {
  top: -18px;
  border-color: transparent transparent #0a2a5a;
}
.speech-bubble-box.on-left .cont-area:before,
.speech-bubble-box.on-right .cont-area:before {
  top: 13px;
}
.speech-bubble-box.on-left .cont-area:before {
  right: -18px;
  border-color: transparent transparent transparent #0a2a5a;
}
.speech-bubble-box.on-right .cont-area:before {
  left: -18px;
  border-color: transparent #0a2a5a transparent transparent;
}
.speech-bubble-box .cont-area {
  display: none;
  position: absolute;
  width: 420px;
  padding: 15px;
  line-height: 19px;
  text-align: left;
  color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  background: #0a2a5a;
  box-shadow: 0 4px 10px rgba(0,0,0,.05),
              0 8px 40px rgba(0,0,0,.12);
  z-index: 1000;
} 
.speech-bubble-box.on-top .cont-area,
.speech-bubble-box.on-bottom .cont-area {
  left: calc(50% - 210px);
} 
.speech-bubble-box.on-top .cont-area {
  bottom: 35px;
  animation: fadeInUp .3s cubic-bezier(.4,.0,.2,1) 1;
}
.speech-bubble-box.on-bottom .cont-area {
  top: 35px;
  animation: fadeInDown .3s cubic-bezier(.4,.0,.2,1) 1;
}
.speech-bubble-box.on-left .cont-area,
.speech-bubble-box.on-right .cont-area {
  top: -12px;
} 
.speech-bubble-box.on-left .cont-area {
  right: 35px;
  animation: fadeInLeft .3s cubic-bezier(.4,.0,.2,1) 1;
}
.speech-bubble-box.on-right .cont-area {
  left: 35px;
  animation: fadeInRight .3s cubic-bezier(.4,.0,.2,1) 1;
}
.speech-bubble-box .cont-area h3 {
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 14px;
}
.speech-bubble-box .cont-area p {font-size: 13px;}
.speech-bubble-box .cont-area .indent {
  padding-left: 12px;
  text-indent: -10px;
}
.speech-bubble-box .cont-area .indent-reference {
  padding-left: 16px;
  text-indent: -16px;
}
.speech-bubble-box .cont-area .add-explain {
  font-size: 12px;
  color: #999;
}



/* 도움말 말풍선 추가-v2 */
.in-speech-bubble-box-v2 {
  position: relative;
  display: table-cell;
}
.speech-bubble-box-v2 {
  position: absolute;
  top: -15px;
  right: -30px;
}
.speech-bubble-box-v2::before {
  font-family: "unifont";
  content: "\e814";
  font-weight: bold;
  font-size: 14pt;
  color: #0e5ce9;
}
.speech-bubble-box-v2 .cont-area:before {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: 9px;
}
.speech-bubble-box-v2.on-top .cont-area:before {
  bottom: -17px;
  border-color: #0a2a5a transparent transparent;
}
.speech-bubble-box-v2 .cont-area {
  display: none;
  position: absolute;
  width: 550px;
  padding: 15px;
  line-height: 19px;
  text-align: left;
  color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  background: #0a2a5a;
  box-shadow: 0 4px 10px rgba(0,0,0,.05),
              0 8px 40px rgba(0,0,0,.12);
  z-index: 1000;
} 
.speech-bubble-box-v2.on-top .cont-area {
  left: calc(50% - 210px);
} 
.speech-bubble-box-v2.on-top .cont-area {
  bottom: 35px;
  left: -15px;
  animation: fadeInUp .3s cubic-bezier(.4,.0,.2,1) 1;
}
.speech-bubble-box-v2 .cont-area p {font-size: 13px;}
.speech-bubble-box-v2 .cont-area .indent-reference {
  padding-left: 16px;
  text-indent: -16px;
}

/* 연차촉진 이미지 경로 추가 */
table .promote_check {background: url('/resources/design/v1/images/promote-bg-check1-red.png') center center no-repeat;}
table .promote_check_half {background: url('/resources/design/v1/images/promote-bg-check1-blue.png') center center no-repeat;}
table .promote_check_half_half {background: url('/resources/design/v1/images/promote-bg-check1-green.png') center center no-repeat;}
table .promote_check_1hr {background: url('/resources/design/v1/images/bg-check1-1hr.png') center center no-repeat;}
table .promote_check_2hr {background: url('/resources/design/v1/images/bg-check1-2hr.png') center center no-repeat;}
table .promote_check_3hr {background: url('/resources/design/v1/images/bg-check1-3hr.png') center center no-repeat;}
table .promote_check_4hr {background: url('/resources/design/v1/images/bg-check1-4hr.png') center center no-repeat;}
table .promote_check_5hr {background: url('/resources/design/v1/images/bg-check1-5hr.png') center center no-repeat;}
table .promote_check_6hr {background: url('/resources/design/v1/images/bg-check1-6hr.png') center center no-repeat;}
table .promote_check_7hr {background: url('/resources/design/v1/images/bg-check1-7hr.png') center center no-repeat;}
table .promote_check_0_5hr,
table .promote_check_1_5hr,
table .promote_check_2_5hr,
table .promote_check_3_5hr,
table .promote_check_4_5hr,
table .promote_check_5_5hr,
table .promote_check_6_5hr,
table .promote_check_7_5hr {
  background: url('/resources/design/v1/images/promote-bg-check1-yellow.png') center center no-repeat;
}
table .img-label {
  display: inline-block;
  position: relative;
  top: 2px;
  width: 13px;
  height: 13px;
}
table .img-label.promote_check {
  background: url('/resources/design/v1/images/promote-bg-check1-red.png') 0 0 no-repeat;
  background-size: 100%;
}
table .img-label.promote_check_half {
  background: url('/resources/design/v1/images/promote-bg-check1-blue.png') 0 0 no-repeat;
  background-size: 100%;
}
table .img-label.promote_check_half_half {
  background: url('/resources/design/v1/images/promote-bg-check1-green.png') 0 0 no-repeat;
  background-size: 100%;
}
table .img-label.promote_check_0_5hr {
  background: url('/resources/design/v1/images/promote-bg-check1-yellow.png') 0 0 no-repeat;
  background-size: 100%;
}


/* --- 서비스 도움말 --- */
#scrollspy-menu {
  position: absolute;
  top: 60px;
  left: auto;
  width: 280px;
  height: calc(100vh - 60px);
  padding: 20px;
  box-sizing: border-box;
}
#scrollspy-menu.top-fixed {
  position: fixed !important;
  top: 0 !important;
}
.service-help-page {
  position: relative;
  padding-bottom: 150px;
  background-color: rgba(246,246,248,.5);
}
.service-help-page::after {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  content: '';
  background: url('../images/bg-service-help-page.png') 0 0 no-repeat;
  background-size: cover;
  opacity: .5;
  z-index: -1;
}
.service-help-page .service-help-tt {
  height: 60px;
  padding: 0 25px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  background-color: #0e5ce9;
}
.service-help-page .service-help-tt h1 {
  font-family: 'SCD-5';
  font-size: 22px;
}
.service-help-page .service-help-cont {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.service-help-page .accordion-area .panel {
  margin-top: 8px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
.service-help-page .accordion-area .panel:first-child {margin-top: 0;}
.service-help-page .accordion-area .panel dt,
.service-help-page .accordion-area .panel dd li {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 38px;
  font-size: 15px;
  border-radius: 8px;
  box-sizing: border-box;
}
.service-help-page .accordion-area .panel dt {
  position: relative;
  padding: 8px 10px;
  background-color: rgba(14,92,233,.12);
  cursor: pointer;
}
.service-help-page .accordion-area .panel.no-list dt {padding: 0;}
.service-help-page .accordion-area .panel dt.collapsed {background-color: rgba(14,92,233,.04);}
.service-help-page .accordion-area .panel dt.accordion-toggle::after {
  position: absolute;
  top: calc(50% - 10px);
  right: 10px;
  font-family: 'unifont';
  content: '\e804';
  font-weight: bold;
  font-size: 18px;
}
.service-help-page .accordion-area .panel dt.accordion-toggle.collapsed::after {content: '\e801';}
.service-help-page .accordion-area .panel dd li + li {border-top: 1px solid rgba(14,92,233,.12);}
.service-help-page .accordion-area .panel a {
  overflow: hidden;
  display: block;
  position: relative;
  width: 100%;
  padding: 8px 35px 8px 10px;
  line-height: 21px;
  word-wrap: break-word;
}
.service-help-page .accordion-area .panel a.on {color: #0e5ce9;}
.service-help-page .accordion-area .panel a.on::after {
  position: absolute;
  top: calc(50% - 2px);
  right: 16px;
  width: 5px;
  height: 5px;
  content: '';
  border-radius: 50%;
  background-color: #0e5ce9;
}
.service-help-page .service-help-cont .cont-area {
  width: calc(100% - 280px);
  margin-left: 280px;
  padding: 20px;
}
.service-help-page .service-help-cont .section {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px dashed transparent;
  border-radius: 8px;
  background-color: rgba(255,255,255,.4);
  backdrop-filter: blur(15px);
  -webkit-box-shadow: 0 5px 20px rgba(0,0,0,.1);
  box-shadow: 0 5px 20px rgba(0,0,0,.1);
  box-sizing: border-box;
}
.service-help-page .service-help-cont .section.bg-point {border-color: #0e5ce9;}
.service-help-page .service-help-cont .section h3 {
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 18px;
}


/* --- sample --- */
.sample-grid {
  overflow-x: auto;
  background-color: #f0f0f0;
}
.sample-chart {
  text-align: center;
  background-color: #fff;
}


/* --- ui kit --- */
.ui-kit {padding: 20px 40px;}
.ui-kit .main-tt {text-align: center;}
.ui-kit-in {margin-top: 30px;}
.ui-kit-in > div + div {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #999;
}
.ui-kit-in h3 {
  margin-bottom: 30px;
  font-family: "SCD-6";
  font-size: 30px;
  font-weight: normal;
}
.ui-kit-in h3 i {margin: -4px 3px 0 0;}
.ui-kit-in h4 {
  font-size: inherit;
  color: #999;
  margin-bottom: 10px;
}
.ui-kit-in .uni-icon h4 {margin-left: 10px;}
.ui-kit-in > div > div {margin-bottom: 10px;}
.ui-kit-in > div > div + div {margin-top: 20px;}
.ui-kit .uni-form .tbl-basic {
  overflow: hidden;
  margin-left: -10px;
}
.ui-kit .uni-form .tbl-basic > * {
  float: left;
  margin: 0 0 10px 10px im !important;
}
.ui-kit .uni-form .tbl-basic .checkbox-area {margin-left: 0;}
.ui-kit .tbl-total,
.ui-kit .tbl-grid,
.ui-kit .tbl-chart {
  margin-top: 0;
  padding-top: 0;
}
.ui-kit .tbl-basic .tbl-area {padding-top: 0;}
.ui-kit .uni-icon div {margin-left: -10px;}
.ui-kit .uni-icon div i {
  margin: 0 0 10px 10px;
  font-size: 42px;
}
.ui-kit .uni-icon div.service-icon i {font-size: 100px;}
.ui-kit .uni-chart-color-in {margin-left: -20px;}
.ui-kit .uni-chart-color-in p {
  display: inline-block;
  width: 100px;
  margin-left: 20px;
  line-height: 32px;
}
.ui-kit .uni-chart-color .bg-chart {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
}


/* 미디어쿼리 */
@media (max-width: 1450px) {
  .content-box .row-box .col-1st {
    width: 100%;
  }
  .content-box .row-box.v2 .col-1st {
    width: calc(100% - 50px);
  }
  .content-box .row-box .col-2nd {
    width: calc(100% - 50px);
    margin-top: 40px;
  }
  .content-box .row-box.v2 .col-2nd {
    width: 100%;
    margin-top: 40px;
  }
  .modal-body .content-box .row-box .col-1st {
    width: calc(32% - 40px);
  }
  .modal-body .content-box .row-box .col-2nd {
    width: calc(68% - 50px);
    margin-top: 0;
  }
}
@media (max-width: 800px) {
  .ui-kit .btn-area {
    text-align: left;
  }
  .ui-kit .btn-area > div {
    float: inherit;
    display: block;
  }
  .ui-kit .btn-area > div + div {
    margin-top: 10px;
  }
}


/* tox-tinymce 상속 없애기 */
/* .doc-view .tbl-basic .tbl-area table td > .tox, */
/* .tox {
  display: flex !important;
  vertical-align: inherit !important;
} */
.tox button::after {display: none !important;}


/* bootstrap 상속 없애기 */
body * {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
body *:before,
body *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
body label {font-weight: inherit;}
body dt {font-weight: inherit;}
body dd, 
body dt {line-height: inherit;}
body h1, body h2, body h3, body h4, body h5, body h6 {line-height: inherit;}
body .ui-datepicker {z-index: 1052 !important;}


/* 자동완성 스타일 수정 */
body .ui-autocomplete {
  font-size: 14px;
  border: 1px solid #ddd !important;
  border-radius: 0;
}
body .ui-autocomplete .ui-menu .ui-menu-item {padding: 5px;}
body .ui-autocomplete li a {color: #999;}
body .ui-autocomplete .ui-state-focus {
  border: 0;
  border-bottom: 1px solid #999;
  border-radius: 0;
  background: none;
}