@charset "utf-8";

/************************************** import **************************************/

@import url("common.css");
@import url("../common/layout.css");

/************************************** 버튼 **************************************/
/* 버튼 스타일 */
.btn-wrap {position: relative; margin: 7px 0;}
.btn-wrap.inline { display: inline-block; }
.btn-wrap .left-btn {float: left; }
.btn-wrap .right-btn {float: right; }
.btn-wrap .center-btn {text-align:center}

.btn-wrap button {display: inline-block; margin-right: 5px; font-weight: 500; border:0; background:#aeaeae; color:#fff; line-height: 28px; padding:0 25px; min-width: 55px; font-size: 1.2rem; font-weight: 400; -webkit-transition: background .3s, color .3s; -o-transition: background .3s,color .3s;transition: background .3s, color .3s; cursor: pointer; border-radius: 3px; }
.btn-wrap button:last-child {margin-right:0;}
.btn-wrap button[disabled],
.btn-wrap button[disabled]:hover { opacity: 0.5; cursor: no-drop; }
.btn-wrap button.small-btn {padding: 0 15px; line-height: 23px;}

/* 버튼 색상 */
.btn-wrap button.bg-white {background:#fff; border: 1px solid #bdbdbd; color:#484848;}
.btn-wrap button.bg-white:hover {background:#F9F9F9;}
.btn-wrap button.bg-navy {background:#040d2f; border: 1px solid #040d2f;}
.btn-wrap button.bg-dark-navy {background: #252334; border: 1px solid  #252334}
.btn-wrap button.bg-sky {background:#688bfe; border:1px solid #688bfe}


/* 버튼 정렬 */
.btn-list-wrap { margin-bottom:5px;}
.btn-list-wrap .btn-wrap { margin-top: 0;}


/************************************** 페이지 타이틀, 검색결과 **************************************/
.content-wrap { position: relative; width: 100%; }
.content-wrap .content-title { position: relative; font-size: 1.7rem; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #dee3eb; }
.content-wrap .content-title .btn-wrap { position: absolute; top: 0; right: 0; margin-top: 0;}

/* 검색결과 토탈 */
.table-set {font-size: 1.2rem; color: #040d2f; margin: 7px 0; padding-top: 7px; border-top: 1px solid #c8cacd;}
.table-set .result-stats {display: inline-block; font-weight: 400; font-size: 1.2rem; position: relative; top:3px;}
.table-set span.bold { font-weight: 600; }
.table-set .page-num {display: inline-block; font-weight: 400; margin-left: 15px; font-size: 1.2rem;position: relative; top:3px;}
.table-set .select-list {float: right;}
.table-set .select-list > .select-box {display: inline-block; margin-right: 5px;}
.table-set .select-list > .select-box:nth-child(2) {margin-right:20px;}
.table-set .select-list > .list-wrap {display: inline-block}
.table-set .select-list > .list-wrap p {display: inline-block; margin-right: 5px; line-height: 24px; }
.table-set .select-list > .list-wrap > .select-box {display: inline-block}
.table-set .btn-wrap { float: left; margin-top: 0;}

/* 필터 */
.table-set .filter-wrap { float: right; margin-left: 20px;}
.table-set .filter-wrap .filter-area { background: #fff; display: inline-block; border: 1px solid #dee3eb; border-radius: 3px; position: relative; height: 26px; padding: 3px 20px 3px 8px; transition: border-color .2s ease, box-shadow .2s ease; cursor: pointer; }
.table-set .filter-wrap .filter-area:hover { border-color: 2px rgba(26, 165, 64, 0.1); }
.table-set .filter-wrap .filter-area:after { content: "";  position: absolute; top: 48%; right: 10px; width: 0; height: 0; margin-top: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #ccc; transition: border-top .25s ease; }
.table-set .filter-wrap .filter-area:hover:after { border-top: 6px solid #aaa; }
.table-set .filter-wrap .filter-area .title { font-size: 11px; display: inline-block; margin-right: 8px; }
.table-set .filter-wrap .filter-area .filter-content { display: inline-block; }
.table-set .filter-wrap .filter-area .filter-content .filter-type { display: inline-block; margin-right: 8px; font-size:1.2rem; }
.table-set .filter-wrap .filter-area .filter-content .filter-name { color: #555; }
.table-set .filter-wrap .filter-area .filter-content .select { color: #1652F0; font-weight: 300; }
.table-set .filter-wrap .filter-area label.filter-toggle { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; display: block; }

.table-set .filter-wrap .filter-area .filter-detail-set-layer { display: none; position: absolute; right: -1px; top: 27px; z-index: 2; width: 100%; background: #fff; border: 1px solid #dee3eb; height: auto; padding: 10px 15px; overflow: hidden; cursor: default; }
.table-set .filter-wrap .filter-area .filter-detail-set-layer .filter-type { margin-bottom: 10px; }
.table-set .filter-wrap .filter-area .filter-detail-set-layer .filter-type .filter-name { font-weight: bold; display: block; margin-bottom: 3px; font-size: 1.3rem;}
.table-set .filter-wrap .filter-area .filter-detail-set-layer .filter-type ul li { display: inline-block; }
.table-set .filter-wrap .filter-area.on .filter-detail-set-layer .btn-wrap {margin-top: 15px; float: none;}
.table-set .filter-wrap .filter-area.on .filter-detail-set-layer .btn-wrap button {width:48%; min-width: auto; }

.table-set .filter-wrap .filter-area.on .filter-detail-set-layer { display: block; }
.table-set .filter-wrap .filter-area.on:after {border-bottom: 6px solid #ccc; border-top: 0}

/************************************** 테이블 **************************************/


/* 기본 테이블 */
table.normal-table { width: 100%; table-layout: fixed;  margin-bottom:10px; border-top: 1px solid #999; background: #fff;}
table.normal-table tr { border-bottom: 1px solid #e5e5e5 }
table.normal-table tr:last-child {border-bottom: 0}
table.normal-table tr:not(thead tr, .row-tr):hover {background-color: #f9f9f9}
table.normal-table tr th { font-size: 1.2rem; font-weight: 600; word-break: break-all; color: #4d4d4d; text-align: center; background: #f2f2f2; padding: 5px 0;}
table.normal-table tr th.th-sort {cursor: pointer;}
table.normal-table tr th.th-sort .sort-arr { display: inline-block; padding:0 5px; } 
table.normal-table tr th.th-sort .sort-arr.up { transform: rotate(180deg);}
table.normal-table tr td { padding:5px 0; font-size: 1.2rem; word-break: break-all; color: #4d4d4d; line-height: 20px; text-align: center; }
table.normal-table tr td.table-tit {text-align: left !important; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
table.normal-table tr td a.a-link { color: #1c66c3;}
table.normal-table tr td .a-link:hover { text-decoration: underline;}
table.normal-table tr th.thead02 {width: 110px}
table.normal-table tr th.thead03 {width: 77px;}
table.normal-table tr th.thead04 {width:200px}
table.normal-table .txt-left { text-align: left;}
table.normal-table .txt-right { text-align: right;}

/* ellipsis text */
table.normal-table tr td.ellipsis-value { position: relative; cursor: pointer; transition: background 0.25s ease; }
table.normal-table tr td.ellipsis-value:hover { background: rgba(0,0,0,0.075); }
table.normal-table tr td.ellipsis-value .ellipsis-box { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; }
table.normal-table tr td.ellipsis-value .ellipsis-box i { margin-right: 5px; color: #666; }
table.normal-table tr td.ellipsis-value .ellipsis-box i.fa-eye { display: none; }
table.normal-table tr td.ellipsis-value:hover .ellipsis-box i.fa-eye { display: inline-block; }
table.normal-table tr td.ellipsis-value:hover .ellipsis-box i.fa-eye-slash { display: none; }
table.normal-table tr td.ellipsis-value .ellipsis-view-layer { position: absolute; right: 0; top: 100%; z-index: 2; width: 100%; max-height: 85px; overflow: auto; overflow-x: initial; background: #fff; border: 1px solid #dee3eb; padding: 8px 10px; cursor: auto; display: none; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05); }
table.normal-table tr td.ellipsis-value:hover .ellipsis-view-layer { display: block; }
table.normal-table tr td.ellipsis-value .ellipsis-view-layer.company {left:50%; transform: translateX(-50%); width:200%; right:auto; }
table.normal-table .btn-wrap { margin:0;}
table.normal-table .link-ico .material-icons {font-size:13px; background:#6fa3e3; color:#fff; border-radius:5px; padding:2px 3px; margin-right:2px;transition: opacity .3s ease}
table.normal-table .link-ico .material-icons:hover {opacity:.8;}

/* 버티컬 테이블 */
table.vertic-table { table-layout: fixed; width: 100%; border-bottom: 1px solid #e5e5e5; border-right:0; border-top:1px solid #999 }
table.vertic-table tr {border-bottom: 1px solid #e5e5e5;}
table.vertic-table tr th { width:120px; padding: 5px 10px; font-size: 1.3rem; word-break: keep-all; border-bottom: 1px solid #e5e5e5; color: #3e3e3e; font-weight: 600; background: #e9e9e9;}
table.vertic-table tr th span.th-important { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; background: #f05050;}
table.vertic-table tr td { padding:5px 10px; font-size: 1.3rem; word-break: keep-all; color: #7e7e7e; background: #fff; word-break: break-all;}
table.vertic-table tr td .check-list {padding:5px; font-size:1.3rem; line-height:22px}
table.vertic-table .btn-wrap { margin:0;}
table.vertic-table  tr td a.a-link { color: #1c66c3;}
table.vertic-table  tr td .a-link:hover { text-decoration: underline;}


/* 테이블 안에 버튼 */
.table-wrap .btn-wrap.table-btn { display: inline-block; margin: 0; margin-left: 5px;}
.table-wrap .btn-wrap.table-btn button {font-size: 1.1rem; padding: 0 10px; min-width:auto; line-height: 22px;}


table.normal-table th.th-check .check-input input[type="checkbox"] + label {top: 1px; margin-right: 0}
table.normal-table th.th-check,
table.normal-table td.td-check {width: 25px; padding-left: 5px;}

/************************************** 페이징 **************************************/
.paging { text-align: center; margin-top: 15px;}
.paging ul {display: inline-block;}
.paging ul li {display: inline-block; height: 20px; line-height: 20px; width:20px; text-align: center; margin:0 2px; font-size: 1.2rem;}
.paging ul li.arrow {position: relative; top: -4px;}
.paging ul li.arrow span.material-icons {font-size: 1.5rem; position:relative; top:2px}
.paging ul li:hover a { background: #eaeaea; }
.paging ul li.select a {background: #040d2f; color: #fff; }
.paging ul li a {display: block; width: 100%; height: 100%; color: #4d4d4d; border-radius: 5px;}


/************************************** 인풋, 셀렉트박스, 첨부파일 **************************************/

/* 즐겨찾기 버튼 */
.star-toggle {position: absolute; right: 10px; top: 5px;}
.star-toggle .star-toggle-input { display: none; }
.star-toggle .star-toggle-btn { width: 18px; height: 18px; background: url(../../img/common/star_toggle_img.png) no-repeat; display: block; background-size: 18px 36px; background-position: 0 0; }
.star-toggle .star-toggle-input:checked + .star-toggle-btn { background: url(../../img/common/star_toggle_img.png) no-repeat; background-size: 18px 36px; background-position: 0 -18px; }

/* 셀렉트박스 */
.select-box { position: relative; height: 25px; width: 300px;}
.select-box select { display: inline-block; border: 1px solid #e0e0e0; border-radius: 3px; width: 100%; height: 100%; padding: 0 10px; background: url(../../img/common/select_arrow.png) calc(100% - 10px); background-repeat: no-repeat; -webkit-background-size: 7px 5px; background-size: 7px 5px; padding-right: 30px; color: #4C4C4C;background-color: #fff; font-size: 1.2rem;}
.select-box select:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }


/* 인풋 텍스트 */
input[type="text"].text-input { height: 25px; width: 600px; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #e0e0e0; color: #333; border-radius: 3px; margin-right: 3px;}
input[type="text"].text-input:hover { box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee;}
input[type="text"].text-input::placeholder {font-size: 1.2rem;}
input[type="text"].text-input:disabled:hover { box-shadow: none; border-color:#e0e0e0;}

/* 인풋 패스워드 */
input[type="password"].text-input { height: 30px; width: 600px; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid #e0e0e0; color: #333; border-radius: 3px;}
input[type="password"].text-input:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }

/* textarea */
.text-area-wrap {position: relative;}
textarea {width: 100%; resize: none; padding:10px; font-size: 1.3rem; min-height: 200px; border:1px solid #e0e0e0; border-radius: 3px; position: relative;}
textarea:hover {box-shadow: 0 0 0 3px #d7e4fa; border-color: #adc4ee; }
.text-area-wrap .text-limit-wrap { position: absolute; z-index: 2; bottom: 6px; right: 20px; color: #999; cursor: default; display: inline-block; background: #fff; }
.text-area-wrap .text-limit-wrap span { font-family: 'Arial','dotum'; font-size: 1.1rem; }
.text-area-wrap .text-limit-wrap span.excess { color: #F05050; font-weight: bold; }
.text-area-wrap .text-limit-wrap span.unit { font-size: 11px; margin-left: 2px; }


/* 셀렉트+인풋 텍스트 */
.search-select .select-box { float: left; margin-right: 5px; }
.search-select input[type="text"].text-input { float: left; }
.search-select .check-input { margin-left: 10px; }
.search-select .check-input input[type="checkbox"] + label { top: 5px; }

/* 날짜 선택 */
.date-select-wrap { display: inline-block; }
.date-select-wrap .date-select { display: inline-block; position: relative; cursor: pointer;}
.date-select-wrap .date-select .calendar-btn { position: absolute; display: block; top: 4px; right: 10px; opacity: 0.5; z-index: 1; transition: opacity .2s ease; font-size: 16px;}
.date-select-wrap .date-select .calendar-btn:hover { opacity: 1; }
span.unit { font-size: 1.2rem; padding: 0 5px; font-weight: 500; color: #999; position:relative; }
.date-select-wrap .check-input { margin-left: 10px;}

/* 파일첨부 */
.file-set-wrap:not(:last-child) { margin-bottom: 8px; }
.file-set-wrap .added-file { display: inline-block; cursor: pointer; background: #f5f5f5; height: 26px; line-height: 24px; padding: 0 10px; border-radius: 5px; border: 1px solid #f5f5f5; margin-right: 10px; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2); font-size: 1.2rem; color: #7f7f7f;}
.file-set-wrap .added-file:last-of-type { margin-right: 0; }
.file-set-wrap .added-file span.material-icons { font-size: 15px; margin-right: 5px; color: #2f73ea;}
.file-set-wrap .added-file.deleted { background: #ccc; border-color: #ccc; opacity: 0.25; }
.file-set-wrap { margin-bottom: 5px; }
.file-set-wrap:last-child { margin-bottom: 0; }
.file-set-wrap .file-add, 
.file-set-wrap .file-modify, 
.file-set-wrap .modify-cancel, 
.file-set-wrap .file-delete,
.file-set-wrap .img-expand { font-size: 11px; margin-left: 3px; display: inline-block; color: #999; padding: 2px 6px; border-radius: 3px; border: 0; background: transparent;}
.file-set-wrap .file-add:hover, 
.file-set-wrap .modify-cancel:hover, 
.file-set-wrap .file-modify:hover, 
.file-set-wrap .file-delete:hover,
.file-set-wrap .img-expand:hover { background:#f0f0f0; }
.file-set-wrap .file-add i, 
.file-set-wrap .modify-cancel i, 
.file-set-wrap .file-modify i, 
.file-set-wrap .file-delete i,
.file-set-wrap .img-expand i { margin-right: 3px; }
.file-set-wrap.disabled .added-file { box-shadow: none; border: 1px solid #e0e0e0; background: #f0f0f0; opacity: .5; }



/************************************** 체크박스, 라디오 버튼 **************************************/
/* 체크박스 */
.check-input {display: inline-block; }
.check-input input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.check-input input[type="checkbox"] + label {display: inline-block; position: relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none; margin-right:15px; font-size:1.3rem; letter-spacing:-0.05em; color:#555; line-height:14px; }
.check-input input[type="checkbox"] + label:before { content: ''; display: inline-block; width: 14px; height: 14px; line-height: 14px; margin: -4px 7px 0 0; text-align: center; vertical-align: middle; border: 1px solid #cacece; border-radius: 3px; background:url("../../img/common/check.svg")no-repeat center; background-size: 8px 6px; background-color:#cbd0d8; }
.check-input input[type="checkbox"]:checked + label:before { content: ' '; color: #333; background-color:#2f73ea; border-color:#2f73ea;}
.check-input input[type="checkbox"]:hover + label:before {box-shadow: 0 0 0 2px #d7e4fa; border-color: #adc4ee; }

/* 라디오 */
.check-input input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.check-input input[type="radio"] + label {display: inline-block; position: relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none; margin-right:15px; font-size:1.3rem; letter-spacing:-0.05em; color:#555; line-height:12px;}
.check-input input[type="radio"] + label:before { content: ''; display: inline-block; width: 14px; height: 14px; line-height: 14px; margin: -4px 7px 0 0; text-align: center; vertical-align: middle; border: 1px solid #cacece; border-radius: 30px; background:url("../../img/common/radio.png")no-repeat center; background-size: 6px 6px; background-color:#cbd0d8; }
.check-input input[type="radio"]:checked + label:before { content: ' '; color: #333; background-color:#2f73ea; border-color:#2f73ea;}
.check-input input[type="radio"]:hover + label:before {box-shadow: 0 0 0 2px #d7e4fa; border-color: #adc4ee; }
.check-input input[type="radio"]:disabled + label {color:#bbb; cursor:no-drop}
.check-input input[type="radio"]:disabled:hover + label:before {box-shadow: none; border-color:#cacaca}


/************************************** width size **************************************/
.width-full { width: 100% !important; }
.width-600 { width: 600px !important; }
.width-300 { width: 300px !important; }
.width-200 { width: 200px !important; }
.width-150 { width: 150px !important; }
.width-100 { width: 100px !important; }
.width-60 { width: 60px !important; }

/************************************** 올 메뉴 **************************************/

.all-menu-container { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100vh; padding: 0 80px 50px 310px; overflow-y: auto; background:#f5f5f5; }
.all-menu-container .all-menu-wrap { position: relative}
.all-menu-container .all-menu-wrap .all-menu-tit {font-size:1.7rem; padding: 30px 20px 30px 0; position: relative;}
.all-menu-container .all-menu-wrap .all-menu-tit .close-btn { position: absolute; top: 30px; right: 0; cursor: pointer; width: 50px; height: 50px; background: rgba(0,0,0,0.05); border-radius: 50%; text-align: center; transition: background .2s;}
.all-menu-container .all-menu-wrap .all-menu-tit .close-btn img { width: 24px; height: 24px; margin-top: 13px;}
.all-menu-container .all-menu-wrap .all-menu-tit .close-btn:hover { background: rgba(0,0,0,0.1); }
.all-menu-container .all-menu-wrap .menu-box {height:300px; float: left; width: calc(33.33% - 10px); margin-right: 15px; background: #fff;  padding: 15px 20px; margin-bottom: 15px;border: 1px solid #e7e7e7;}
.all-menu-container .all-menu-wrap .menu-box:nth-child(3n) {margin-right: 0;}
.all-menu-container .all-menu-wrap .menu-box > .box-tit {font-weight: 400; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #cbcbcb; color:#5d5d5d; position: relative;}
.all-menu-container .all-menu-wrap .menu-box > .box-tit span.material-icons {font-size: 1.7rem; border-radius: 20px; margin-right: 5px; padding: 4px; position: relative; top: -1px}
.all-menu-container .all-menu-wrap .menu-box ul.sub-menu { max-height: 200px;/* -ms-overflow-style: none; scrollbar-width: none;*/}
/*.all-menu-container .all-menu-wrap .menu-box ul.sub-menu::-webkit-scrollbar {display: none}*/
.all-menu-container .all-menu-wrap .menu-box ul.sub-menu li {padding: 6px 20px 6px 0; border-bottom: 1px solid #ededed; font-size: 1.3rem; position: relative;}
.all-menu-container .all-menu-wrap .menu-box ul.sub-menu li > a > span.material-icons {margin-right: 5px; font-size: 1.8rem; position:relative; top: -1px}

/************************************** 알림, 레이어팝업 **************************************/

/* alert */
.alert-pop-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 0; z-index: 999; transition: height 0.7s cubic-bezier(1, 0.09, 0.18, 0.66),padding 0.7s cubic-bezier(1, 0.09, 0.18, 0.66),opacity 0.7s cubic-bezier(1, 0.09, 0.18, 0.66); box-shadow: 0 2px 5px 5px rgba(0,0,0,0.05); padding: 0 20px; overflow: hidden; opacity: 0; }
.alert-pop-wrap.on { height: 50px; padding: 14px 20px; opacity: 1; }
.alert-pop-wrap.blue-bg { background: rgba(47,115,234,0.95); }
.alert-pop-wrap.red-bg { background: rgba(243,71,74,0.95); }
.alert-pop-wrap.green-bg { background: rgba(51,190,98,0.95); }
.alert-pop-wrap span.material-icons { color: #fff; margin-right: 5px; font-size:1.45rem; text-shadow: 0 0 1px 1px rgba(0,0,0,0.05);  }
.alert-pop-wrap .messege { color: #fff; font-size: 13px; font-weight: 300; display: inline-block; cursor: default; text-shadow: 0 0 1px 1px rgba(0,0,0,0.05); }
.alert-pop-wrap .close-btn { float: right; color: #fff; cursor: pointer; transition: opacity .25s ease; }
.alert-pop-wrap .close-btn:hover { opacity: 0.7; }

/* 컨펌 팝업 */
.confirm-pop-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,0.2); min-width: 960px; }
.confirm-pop-wrap .confirm-pop-area { position: relative; width: 100%; height: 100%; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop { width: 320px; min-height: 50px; position: absolute; background: #fff; left: 50%; top: 50px; margin-left: -160px; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.1); }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .content { padding: 40px 30px 15px; text-align: center; font-size: 13px; position: relative; letter-spacing: -0.5px; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .content p { white-space: pre-wrap; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .content .close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; opacity: 0.3; transition: opacity .25s ease; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .content .close-btn span.material-icons {font-size: 2rem;}
.confirm-pop-wrap .confirm-pop-area .confirm-pop .content .close-btn:hover { opacity: .7; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap {text-align: center; padding: 10px 0; border-top: 1px solid #e5e5e5}
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap button {float: none;}

/* 레이어 팝업 */
.pop-wrap {position: fixed; z-index: 9990; top:0; left:0; width:100%; height:100%;}
.pop-wrap .pop-bg { position:relative; width:100%; height: 100%;  background:rgba(0,0,0,0.7);}
.pop-wrap .pop-bg .pop-layer {position:absolute; top:50%; left:50%; width:auto; max-height:800px; overflow-y: auto; background:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.3); border-radius: 5px; min-width:450px; padding:20px;
-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.pop-wrap .pop-bg .pop-layer .pop-close-btn {position:relative; width:100%; height:100%;}
.pop-wrap .pop-bg .pop-layer .pop-close-btn .close-btn {position: absolute; right:0; top:-10px; font-size:20px; cursor: pointer; color: #bbb;}
.pop-wrap .pop-bg .pop-layer .pop-close-btn .close-btn:hover { color: #888;}
.pop-wrap .pop-bg .pop-layer .pop-content .cont-title { font-size: 14px; display: block; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
.pop-wrap .pop-bg .pop-layer .pop-content .cont-title:first-child { margin-top: 0; }
.pop-wrap .pop-content .cont {text-align:center; padding:20px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;max-height:400px;}
.pop-wrap .file-input { display: inline-block; text-align: left; width: 100%; position: relative; padding: 7px 15px; vertical-align: middle; background-color: #f0f0f0; cursor: pointer; font-weight: 400;  height:40px; border-radius:8px}
.pop-wrap .file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.pop-wrap .file-input > .button { position: absolute; z-index: 2; top: 5px; right: 7px; display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: #642eff; cursor: pointer; border-radius: 8px; color: #fff; text-align: center; padding: 0 15px; height:30px; line-height:27px;}
.pop-wrap .file-input > .button .material-icons { font-size: 16px; padding-right: 5px; }
.pop-wrap .file-input > .label { color: #a7a9b8;  white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 100px; display: block; line-height:27px}
.pop-wrap .file-row:not(:first-child) { margin: 5px 0 0; }
.pop-wrap .btn-wrap {margin-top:20px}
.pop-wrap .pop-content .cont .state-wrap .material-icons {font-size: 27px; padding: 9px;border-radius: 50%; margin-bottom: 15px; color: #fff; background: #90d985;}
.pop-wrap .pop-content .cont .state-wrap p {font-size:1.5rem;}
.pop-wrap .pop-content .cont .state-wrap.error .material-icons {background:#ff7171;}
.pop-wrap .pop-content .cont .state-wrap .state-info {background:#f0f0f0; padding:7px; border-radius:5px; margin-top:10px}
.pop-wrap .pop-content .cont .state-wrap .state-info li span {position:relative; padding-left:9px; display:inline-block;}
.pop-wrap .pop-content .cont .state-wrap .state-info li span:after {position:absolute; content:''; width:2px ;height:2px; border-radius:50%; background:#444; top:9px; left:0}
.pop-wrap .pop-content .cont .radio-input-box {margin-top:20px}
.pop-wrap .pop-content .cont .cont-txt {font-weight:600; font-size:1.4rem}

.pop-wrap.search-pop-wrap .pop-bg .pop-layer { width:600px; max-height:600px}
.pop-wrap.search-pop-wrap table.vertic-table tr td { text-align: center;}
.pop-wrap.search-pop-wrap table.vertic-table thead tr td .sch-tit { vertical-align: middle; font-weight: 600; margin-right: 5px; display: inline-block;}
.pop-wrap.search-pop-wrap table.vertic-table tbody { height:300px; overflow-y: auto; display: block; width: 100%;}
.pop-wrap.search-pop-wrap table.vertic-table tbody tr { display:block;width:100%;}
.pop-wrap.search-pop-wrap table.vertic-table tbody tr td { display: block; width:100%;}
.pop-wrap.search-pop-wrap table.vertic-table tbody tr td .a-link { text-decoration: underline;}

.pop-wrap.add .pop-bg .pop-layer {min-width:600px}
.pop-wrap.add .pop-content .cont .radio-input-box {margin-top:0px; text-align:left}
.pop-wrap.add .pop-content .cont .add-wrap {text-align:left; margin-top:20px}
.pop-wrap.add .pop-content .cont .add-wrap ul li {margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #e5e5e5;}
.pop-wrap.add .pop-content .cont .add-wrap ul li:last-child {border-bottom:0; margin-bottom:0}
.pop-wrap.add .pop-content .cont .add-wrap .add p {float:left; margin-right:5px}
.pop-wrap.add .pop-content .cont .add-wrap .add .add-input {float:left; width: calc(100% - 20px)}
.pop-wrap.add .pop-content .cont .add-wrap .add .full-input {margin-bottom:7px}
.pop-wrap.add .pop-content .cont .add-wrap .add .input-box {float:left; width:calc(100% - 77px)}
.pop-wrap.add .pop-content .cont .add-wrap .add .file-row {margin-bottom:7px}
.pop-wrap.add .pop-content .cont .add-wrap .add .file-input {height:25px; background:#fff; border:1px solid #e0e0e0; border-radius:3px; padding: 0 10px; cursor:pointer}
.pop-wrap.add .pop-content .cont .add-wrap .add .file-input > .label {line-height: 23px; font-weight: 300;font-size: 1.2rem; color:#ccc;}
.pop-wrap.add .pop-content .cont .add-wrap .add .file-input .file-btn {background:#642eff; padding: 0 10px; display:inline-block; font-size:1.1rem; border-radius:0 3px 3px 0; color:#fff; cursor:pointer; position:absolute ;right:0; top:-1px; font-weight:300; height:24px; line-height:22px;}
.pop-wrap.add .pop-content .cont .add-wrap .add .file-input .file-btn .material-icons {font-size:13px;margin-right:3px; position:relative; top:-1px}
.pop-wrap.add .pop-content .cont .add-wrap .add .btn-wrap {margin-top:0; float:left; margin-left:5px}
.pop-wrap.add .pop-content .cont .add-wrap .add .btn-wrap button {height:25px; line-height:23px; padding: 0 13px}
.pop-wrap.add .pop-content .cont .add-wrap .add-btn {text-align:center;border:1px solid #524adc; color:#524adc; padding:5px; font-size:1.3rem; font-weight:600; cursor:pointer; line-height:30px; border-radius:5px; transition: background .3s ease, color .3s ease;}
.pop-wrap.add .pop-content .cont .add-wrap .add-btn .material-icons {font-size:20px; margin-right:3px;}
.pop-wrap.add .pop-content .cont .add-wrap .add-btn:hover {background:#524adc; color:#fff;}

/************************************** scroll bar custom **************************************/

.scroll { overflow-y: auto;
  /* ie scrollbar css */
  scrollbar-arrow-color: #efefef;
  scrollbar-Track-Color: #efefef;
  scrollbar-base-color: #dfdfdf;
  scrollbar-Face-Color: #dfdfdf;
  scrollbar-3dLight-Color: #dfdfdf;
  scrollbar-DarkShadow-Color: #dfdfdf;
  scrollbar-Highlight-Color: #dfdfdf;
  scrollbar-Shadow-Color: #dfdfdf
}
.scroll::-webkit-scrollbar { width: 6px; } 
.scroll::-webkit-scrollbar-thumb { height: 17%; background: rgba(0,0,0,0.2); border-radius: 10px; }
.scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0); }



/* loading */
.col-sm-2 {position: fixed; background: rgba(0,0,0,0.1);z-index: 99;width: 100%; height: 100%}
.sp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)}

.sp-3balls,.sp-3balls:before,.sp-3balls:after {  border-radius: 50%; background-color:#642eff; width: 18px; height: 18px; transform-origin: center center; display: inline-block;}
.sp-3balls { position: relative; background-color: #642eff; opacity: 1; -webkit-animation: spScaleAlpha 1s infinite linear; animation: spScaleAlpha 1s infinite linear;}
.sp-3balls:before,.sp-3balls:after { content: ""; position: relative; opacity: 0.25;}
.sp-3balls:before { left: 30px; top: 0px; -webkit-animation: spScaleAlphaBefore 1s infinite linear; animation: spScaleAlphaBefore 1s infinite linear;}
.sp-3balls:after { left: -49px;  top: 0px; -webkit-animation: spScaleAlphaAfter 1s infinite linear; animation: spScaleAlphaAfter 1s infinite linear;}

@-webkit-keyframes spScaleAlpha {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.45;
  }
  66% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

@keyframes spScaleAlpha {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0.45;
  }
  66% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes spScaleAlphaBefore {
  0% {
    opacity: 0.25;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.25;
  }
}

@keyframes spScaleAlphaBefore {
  0% {
    opacity: 0.25;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 0.25;
  }
}

@-webkit-keyframes spScaleAlphaAfter {
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

@keyframes spScaleAlphaAfter {
  33% {
    opacity: 0.25;
  }
  66% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

.mg-b5 { margin-bottom: 5px !important;}