@charset "utf-8";

:root {
  --main-color: rgba(37,74,156,1);  /*#254a9c 메인색상*/
}


/* ------ system ------ */
.login-box-in::after {
  content: '\e87d';
  top: calc(50% - 100px);
  left: 45px;
  font-size: 200px;
  color: rgba(255,255,255,.1);
}
.box-set.c1 .box-set-tt {background-color: rgba(14,92,233,.05);}
.box-set.c2 .box-set-tt {background-color: rgba(0,137,59,.05);}

/* --- side-nav --- */
.system .top-header .on-service a i {
  width: 24px;
  height: 24px;
  margin: -4px -2px 0 28px;
  background: url('../images/uni-main-system2.svg') 0 0 no-repeat;
  background-size: 24px;
}
.system .top-header .on-service a i::before {display: none;}

/* 스크롤 추가 */
.side-nav .footer {
  position: inherit;
  margin-top: 40px;
}
.side-nav .footer::before {display: none;}
.side-nav .footer > a {padding: 12px 18px;}
.side-nav .footer > a + a {border-top: 1px solid rgba(255,255,255,.2);}
.side-nav .footer > a i {
  margin: 0px 15px 0 10px;
  font-size: 34px;
}
.nav-menu {height: calc(100% - 81px);}



/* 통합VOC관리 */
.process-info-tt {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px 8px 0 0;
  background-color: #fafafc;
  box-sizing: border-box;
}
.process-info-tt:only-child {
  margin: 10px 0;
  padding: 11px 10px;
  border-radius: 8px;
}
.process-info-cont {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
}
textarea.process-info-cont {
  min-height: 80px;
  margin-top: 0;
}

/* 조치개선요청청 */
.tbl-tt.in-accordion {display: block;}
.tbl-tt.in-accordion .accordion-toggle {
  display: inline-block;
  font-family: "SCD-5";
  font-weight: normal;
  font-size: 17px;
}
.accordion-toggle .btn-area {
  display: inline-flex;
  margin-left: 5px;
}
.accordion-toggle .btn-area .btn-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #999;
  border-radius: 50%;
  box-sizing: border-box;
}
.accordion-toggle .btn-area .btn-accordion-toggle::after {
  font-family: 'unifont';
  content: '\e801';
  font-weight: bold;
  font-size: 14px;
}
.tbl-tt.in-accordion .accordion-toggle:hover,
.tbl-tt.in-accordion .accordion-toggle:hover * {
  color: #0e5ce9;
  cursor: pointer;
}
.tbl-tt.in-accordion .accordion-toggle:hover .btn-area .btn-accordion-toggle {border-color: #0e5ce9;}
.tbl-tt.in-accordion .accordion-toggle.on .btn-area .btn-accordion-toggle::after {
  position: relative;
  top: -1px;
  content: '\e804';
}

/* 문의분류관리 */
.content-box.voc-category {padding: 40px;}
.content-box.voc-category .row-box {
  display: flex;
  gap: 10px;
}
.content-box.voc-category .row-box .col-2nd-top {
  height: 36px;
  margin: -20px 0 0;
}
.content-box.voc-category .row-box.v2 .col-1st {
  width: 30%;
  padding: 20px 0;
}
.content-box.voc-category .row-box.v2 .col-2nd {width: 70%;}
.content-box.voc-category .tbl-basic .tbl-area {padding: 0;}
.content-box.voc-category .tbl-basic .tbl-area tr:hover td {background-color: #f6f6f8;}

/* 메일문의관리 */
.content-tt + .tbl-basic .tbl-top.after-noti {top: -45px;}
.tbl-basic .tbl-top + .tbl-noti-box {margin-top: 15px;}
.tbl-basic .tbl-top + .tbl-noti-box *:only-child {margin: -5px 0;}
.op-mail-ask-list.row-box {
  display: flex;
  gap: 20px;
}
.op-mail-ask-list.row-box .col-1st {width: 40%;}
.op-mail-ask-list.row-box .col-1st > .tbl-basic {
  position: sticky;
  top: 80px;
}
.op-mail-ask-list.row-box .col-2nd {width: 60%;}
.op-mail-ask-list.row-box .col-2nd .in-editor {
  overflow: auto;
  width: 100%;
}



/* - 개발에서 추가 - */
/* 첨부 파일 영역 */
.attached-file-area {
  display: block !important;
  /* margin: 60px 0 20px; */
  padding: 12px 20px;
  color: #2F79A6;
  border-radius: 8px;
  background-color: #fafafc;
}
.attached-file-area a {
  position: relative;
  padding-left: 20px;
  line-height: 26px;
  /* font-size: 13px; */
  color: #2F79A6;
}
.attached-file-area a::before {
  display: inline-block;
  overflow: hidden;
  font-family: "unifont";
  content: '\e810';
  position: absolute;
  top: auto;
  left: 0;
  font-size: 18px;
}
.attached-file-area a:hover .file-name {text-decoration: underline;}
.attached-file-area a .file-size {
  margin-left: 6px;
  font-size: 12px;
  color: #aaa;
}
.attached-file-area .btn-area {
  display: inline-block;
  margin-left: 2px;
}
.attached-file-area .btn-area .btn-download {
  display: inline-block;
  cursor: pointer;
}
.attached-file-area .btn-area .btn-download::before {
  font-family: "unifont";
  font-weight: bold;
  font-size: 18px;
  color: #222;
  content: '\e851';
}
.attached-file-area .btn-area .btn-download:hover::before {color: #0e5ce9;}

/* 의견글 영역 */
.comment-area {
  position: relative;
  margin-top: 60px;
}
.comment-area dt {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.comment-area dt .badge-num {
  margin-left: 8px;
  font-family: "SCD-5";
  color: #ff4c5d;
}
.comment-area dt .btn-area {
  margin-left: auto;
  margin-right: 6px;
}
.comment-area dt .btn-area .btn-on-off {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 25px;
  cursor: pointer;
}
.comment-area dt .btn-area .btn-on-off::before {
  content: '의견글 열기';
  font-size: 12px;
  color: #aaa;
}
.comment-area.on dt .btn-area .btn-on-off::before {content: '의견글 닫기';}
.comment-area dt .btn-area .btn-on-off:hover::before {color: #222;}
.comment-area dt .btn-area .btn-on-off::after {
  position: absolute;
  top: calc(50% - 11px);
  right: 0;
  font-family: "unifont";
  content: '\e801';
  font-weight: bold;
  font-size: 20px;
}
.comment-area.on dt .btn-area .btn-on-off::after {content: '\e804';}
.comment-area dd {display: none;}
.comment-area.on dd {display: block;}
.comment-area dd + dd {margin-top: 20px;}
.comment-area dd .comment-list {
  position: relative;
  padding: 15px 10px;
}
.comment-area dd .comment-list + .comment-list {border-top: 1px dashed #eee;}
.comment-area dd .comment-list .write-user {
  font-size: 12px;
  color: #777;
}
.comment-area dd .comment-list .write-date {
  padding-left: 8px;
  font-size: 12px;
  color: #aaa;
}
.comment-area dd .comment-list p {margin-top: 5px;}
.comment-area dd .comment-list .file-list {
  display: flex;
  position: relative;
  margin-top: 20px;
  padding-left: 20px;
}
.comment-area dd .comment-list .file-list::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "unifont";
  content: '\e810';
  font-size: 18px;
}
.comment-area dd .comment-list .file-list a {
  display: inline-block;
  margin: 2px 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: #777;
  border-radius: 2px;
  background-color: #f5f5f5;
}
.comment-area dd .comment-list .file-list a:hover .file-name {color: #555;}
.comment-area dd .comment-list .file-list a .file-size {
  margin-left: 3px;
  color: #aaa;
}
.comment-area dd .comment-list .btn-area {
  display: flex;
  position: absolute;
  top: 15px;
  right: 5px;
}
.comment-area dd .comment-list .btn-area i {
  margin: 2px;
  font-size: 18px;
  cursor: pointer;
  opacity: .6;
}
.comment-area dd .comment-list .btn-area i:hover {opacity: 1;}
.comment-area dd .comment-list .btn-area i::before {font-weight: bold;}
.comment-area dd .comment-write {margin-top: 10px;}
  
/* step 버튼 하단 고정 */
.system .next-btn-fixed {margin-bottom: 70px;}
.system .btn-area.bott-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% - 220px);
  padding: 14px 40px 15px;
  border-top: none;
  background-color: rgba(255,255,255,.9);
  backdrop-filter: blur(1px);
  box-sizing: border-box;
  z-index: 100;
}
.system .menu-nav-bar.top + section .btn-area.bott-fixed,
.system .menu-nav-bar.side.side-off + section .btn-area.bott-fixed {
  width: 100%;
}