@charset "utf-8";
/* 컴포넌트 */
.label { display: inline-block; height: 14px; vertical-align: middle; line-height: 14px; min-width: 15px; text-align: center; padding: 0 3px 0 3px; font-size: 10px; font-family: 'arial','dotum'; font-weight: 700; color: #fff; border-radius: 3px; margin-left: 5px; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.dot { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; }

/* 테이블 */
.normal-table { margin-top: 25px; }
.normal-table table { width: 100%; font-size: 12px; border-top: 1px solid #aaa; table-layout: fixed; }
.normal-table table thead tr { background: #ECECEC; border-bottom: 1px solid #dee3eb; }
.normal-table table thead tr th { vertical-align: middle; padding: 5px; font-weight: bold; text-align: center; }
.normal-table table tbody tr { background: #fff; transition: background .25s ease; border-bottom: 1px solid #dee3eb; }
.normal-table table tbody tr:hover { background: #f8f8f8; }
.normal-table table tbody tr td { vertical-align: middle;  padding: 5px; min-width: 100px; word-break: break-word; word-wrap: break-word;}

.search-table { border-top: 1px solid #aaa; }
.search-table table { width: 100%; font-size: 12px; }
.search-table table tr { border-bottom: 1px solid #dee3eb; }
.search-table table tr th { vertical-align: middle; font-weight: bold; padding: 5px 10px 5px 10px; width: 150px; background: #ECECEC; }
.search-table table tr td { padding: 5px 10px; vertical-align: middle; background: #fff; }
.search-table table tr td .unit { font-size: 12px; color: #999; margin: 0 5px; }
.search-table table tr td .selectbox { margin-right: 10px; }
.search-table table tr td .search-txt-input { width: 330px; }
.search-table table tr td .check-input { display: inline-block; }

.info-detail .info-title { font-size: 14px; display: block; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
.info-detail .info-title:first-child { margin-top: 0; }
.info-detail .info-table { border-top: 1px solid #aaa; }
.info-detail .info-table table { width: 100%; font-size: 12px; }
.info-detail .info-table table tr { border-bottom: 1px solid #dee3eb; }
.info-detail .info-table table tr th { vertical-align: middle; font-weight: bold; padding: 5px 10px 5px 10px; width: 150px; background: #ECECEC; }
.info-detail .info-table table tr td { padding: 5px 10px; vertical-align: middle; background: #fff; }
.info-detail .info-table table tr td .unit { font-size: 12px; color: #999; margin: 0 5px; }
.info-detail .info-table table tr td .selectbox { margin-right: 10px; }
.info-detail .info-table table tr td .search-txt-input { width: 330px; }
.info-detail .info-table table tr td .check-input { display: inline-block; }
.info-detail .info-table table tr td .inline { display: inline-block; float: left; padding-right: 10px;}

.statistics-table { border-top: 1px solid #aaa; overflow-x: auto; margin-top: 10px; margin-bottom: 20px; }
.statistics-table table { min-width: 100%; font-size: 12px; }
.statistics-table table thead tr th { border-right: 1px solid #dcdcdc; text-align: center; vertical-align: middle; font-weight: bold; padding: 5px 7px; min-width: 90px; background: #ECECEC; border-bottom: 1px solid #dcdcdc; }
.statistics-table table thead tr th:last-child { border-right: none; }
.statistics-table table thead tr th.date { width: 300px; }
.statistics-table table tbody tr { border-bottom: 1px solid #dee3eb; }
.statistics-table table tbody tr td { padding: 5px 7px; text-align: right; font-size: 11px; background: #fff; border-right: 1px solid #eee; letter-spacing: 0; }
.statistics-table table tbody tr td:last-child { border-right: none; }
.statistics-table table tbody tr td.imp { font-weight: bold; background: #F8FAFD; }
.statistics-table table tbody tr td.date { text-align: center; font-weight: normal; width: 300px; }
.statistics-table table tbody tr td.sum { background: #F6FFF9; font-weight: bold; }
.statistics-table table thead tr th.imp { background: #E1E5EC; border-right: 1px solid #CDD2DB; border-bottom: 1px solid #CDD2DB; }
.statistics-table table thead tr th.sum { background: #E3F7EB; border-right: 1px solid #D1E4CE; border-bottom: 1px solid #D1E4CE; }
.statistics-table table thead tr th.sum:last-child { border-right: none; }

.statistics-table table tbody  tr.integrated td { background: #E3F7EB; border-right: 1px solid #D1E4CE; border-top: 1px solid #D1E4CE; border-bottom: 2px solid #B5CCB1; font-weight: bold; }
.statistics-table table tbody  tr.integrated td:first-child { text-align: center; }

.rank-table { border-top: 1px solid #aaa; margin-top: 10px; margin-bottom: 20px; }
.rank-table.border { border: none;}
.rank-table.border table { border-top: 1px solid #aaa;}
.rank-table table { width: 100%; font-size: 12px; }
.rank-table table tbody tr { border-bottom: 1px solid #dee3eb; }
.rank-table table thead tr th { border-right: 1px solid #dee3eb; text-align: center; vertical-align: middle; font-weight: bold; padding: 5px 7px; min-width: 90px; background: #ECECEC; border-bottom: 1px solid #dee3eb; }
.rank-table table thead tr th.rank { width: 130px; }
.rank-table table thead tr th:last-child { border-right: none; }
.rank-table table tbody tr td { padding: 5px 7px; text-align: center; background: #fff; border-right: 1px solid #eee; letter-spacing: 0; }
.rank-table table tbody tr td:last-child { border-right: none; }
.rank-table table tbody tr td a { color: #1D70E1; }
.rank-table table tbody tr td a:hover {  text-decoration: underline; }

/* 통계 필터 */
.filter-wrap .range-filter { height: 28px; }
.filter-wrap .range-filter .range-btn-wrap { height: 28px; float: left; }
.filter-wrap .range-filter .range-btn-wrap.right { float: right;}
.filter-wrap .range-filter .range-btn-wrap .range-btn { height: 28px; background: #fff; display: inline-block; transition: border-color .2s ease, box-shadow .2s ease; cursor: pointer; border: 1px solid #dee3eb; line-height: 26px; font-size: 11px; padding: 0 10px; border-radius: 3px; color: #555; }
.filter-wrap .range-filter .range-btn-wrap .range-btn:hover { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); }
.filter-wrap .range-filter .range-btn-wrap .range-btn.select { border-color: #33BE62; color: #fff; background: #33BE62; }
.filter-wrap .range-filter .date-select-wrap { float: right; }
.filter-wrap .range-filter .date-select-wrap .unit { color: #999; margin: 0 5px; }
.filter-wrap .range-filter .date-select-wrap .date-select { vertical-align: top; }
.filter-wrap .range-filter .date-select-wrap .date-select input { width: 110px; }
.filter-wrap .range-filter .date-select-wrap .view-btn { height: 28px; line-height: 26px; display: inline-block; width: 50px; margin-left: 5px; text-align: center; border-radius: 3px; font-size: 11px; color: #fff; }

.filter-wrap .rank-range-select { display: block; height: 28px; width: 160px; margin-bottom: 5px; }
.filter-wrap .rank-range-select .selectbox { background: #fff; }

/* 결과 테이블 */
.result-table { border-top: 2px solid #dee3eb; border-bottom: 2px solid #dee3eb; background: #fff; padding: 15px 20px; margin-top: 15px; }
.result-table .search-result { font-size: 12px; }
.result-table .search-result p .result { font-weight: bold; color: #25974C; }

/* 텍스트 정렬 속성 */
.txt-left { text-align: left; }
.txt-right { text-align: right; }
.txt-center { text-align: center; }

/* 텍스트 스타일 */
.txt-link { text-decoration: underline; }
.txt-red { color: #f05050; }

/* form validation */
.txt-invalid { color: #f05050; margin-left: 10px; display: none; vertical-align: middle; }

/* 백그라운드 */
.sky-bg { background: #23b7e5; transition: background 0.2s ease; }
.purple-bg { background: #7266ba; transition: background 0.2s ease; }
.green-bg { background: #33be62; transition: background 0.2s ease; }
.deep-green-bg { background: #19554d; transition: background 0.2sease;}
.yellow-bg { background: #fad733; transition: background 0.2s ease; }
.red-bg { background: #f05050; transition: background 0.2s ease; }
.blue-bg { background: #4a54ff; transition: background 0.2s ease; }
.white-bg { line-height: 28px; border: 1px solid #dcdcdc; color: #999; font-weight: 400; transition: background .2s ease,border-color .3s ease; background: #fff; }
.white-bg:hover { border-color: #dcdcdc; background: #f8f8f8;}


.grd-bg { background-image: -webkit-linear-gradient(120deg, #3e47d7 26%, #4a54ff 74%); background-image: -moz-linear-gradient(120deg, #3e47d7 26%, #4a54ff 74%); background-image: -o-linear-gradient(120deg, #3e47d7 26%, #4a54ff 74%); background-image: linear-gradient(-30deg, #3e47d7 26%, #4a54ff 74%); }

.green-bg:hover { background: #1FAD4F; }
.red-bg:hover { background: #E52B2B; }
.sky-bg:hover { background: #0DA5D4; }
.purple-bg:hover { background: #6155AD; }

/* 인풋 */
.normal-txt-input { height: 28px; border: 1px solid #dee3eb; border-radius: 3px; outline: 0; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; padding: 0 30px 0 10px; line-height: 26px; font-weight: 300; color: #2d2d2d; }
.normal-txt-input:focus,
.normal-txt-input:active { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); }
.date-select { display: inline-block; position: relative; }
.date-select .calendar-btn { position: absolute; display: block; width: 14px; height: 20px; top: 4px; right: 10px; opacity: 0.5; z-index: 1; transition: opacity .2s ease; }
.date-select .calendar-btn:hover { opacity: 1; }


/*버튼*/
.content-box .btn-wrap { margin-top: 10px; height: 30px; }
.content-box .btn-wrap ul { display: inline-block; }
.content-box .btn-wrap ul.right-btn-list { float: right; }
.content-box .btn-wrap ul.left-btn-list { float: left; }
.content-box .btn-wrap ul.center-btn-list { text-align: center; width: 100%; }
.content-box .btn-wrap ul li { display: inline-block; float: left; margin-left: 10px; }
.content-box .btn-wrap ul.center-btn-list li { float: none; }
.content-box .btn-wrap .normal-btn { font-size: 12px; height: 30px; display: block; line-height: 30px; padding: 0 25px; border-radius: 3px;  cursor: pointer; color: #fff; transition: background .2s ease; font-weight: 300; }
.content-box .btn-wrap .small-btn { font-size: 12px; height: 25px; display: block; line-height: 25px; padding: 0 15px; border-radius: 3px; cursor: pointer; color: #fff; transition: background .2s ease; font-weight: 300; }
.content-box .btn-wrap ul li:first-child,
.content-box .btn-wrap ul li:first-child .small-btn { margin-left: 0; }
.normal-btn.blue-bg:hover { background: #3A44F0; }
.content-box .btn-wrap .small-btn.white-bg { line-height: 23px; border: 1px solid #eaeaea; color: #999; font-weight: 400; transition: background .2s ease,border-color .2s ease; }
.content-box .btn-wrap .small-btn.white-bg:hover { border-color: #dcdcdc; background: #f8f8f8; }
.content-box .btn-wrap .normal-btn.white-bg { line-height: 28px; border: 1px solid #dcdcdc; color: #999; font-weight: 400; transition: background .2s ease,border-color .3s ease; background: #fff; }
.content-box .btn-wrap .normal-btn.white-bg:hover { border-color: #dcdcdc; background: #f8f8f8;}
.content-box .btn-wrap .normal-btn.ansewer-bg { background: #1B2627; height: 100%;padding: 0 30px;border-radius: 3px;line-height: 100px;font-size: 15px;font-weight: 500;}
.content-box .btn-wrap.mg-0 { margin: 0;}


/* 상세페이지 공통 인풋*/
table .normal-btn { display: inline-block; height: 28px; line-height: 26px; font-weight: 400; transition: background .2s ease,border-color .2s ease; padding: 0 15px; border-radius: 3px; cursor: pointer; color: #fff; }
table .check-input-wrap li { display: inline-block; }
table textarea { border: 1px solid #dee3eb; resize: none; border-radius: 3px; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; font-size: 12px; width: 100%; height: 150px; padding: 5px 10px 25px; }
table textarea:active,
table textarea:focus { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); }

@media all and (max-width: 960px)
{
	table textarea { width: 100%; }
}

/*체크박스 커스텀*/
.check-label i.far.fa-star { color: #fff; font-size: 13px; }
.check-label i.fas.fa-star { color: #fad733; display: none; font-size: 13px; }

input[type=checkbox],
input[type=radio] { display: none; }
input[type=checkbox] + .check-label,
input[type=radio] + .check-label { display: inline-block; cursor: pointer; position: relative; font-size: 15px; line-height: 25px; color: #fff; font-weight: bold; margin-right: 10px; }
input[type=checkbox]:checked + .check-label i.far.fa-star { display: none; }
input[type=checkbox]:checked + .check-label i.fas.fa-star { display: inline-block; }

.check-input .check-label { color: #2d2d2d; }
.check-input input[type=checkbox] + .check-label,
.check-input input[type=radio] + .check-label { color: #2d2d2d; font-size: 12px; font-weight: normal; padding-left: 20px; position: relative; letter-spacing: -0.5px; }
.check-input input[type=checkbox] + .check-label:before { width: 15px; height: 15px; background: url(../../img/check_box_bg.png); background-size: 15px 45px; position: absolute; content: ''; left: 0; top: 50%; margin-top: -7px; }
.check-input input[type=checkbox]:checked + .check-label:before { background: url(../../img/check_box_bg.png); background-size: 15px 45px; background-position: 0 -15px; }
.check-input input[type=checkbox]:disabled + .check-label:before { background: url(../../img/check_box_bg.png); background-size: 15px 45px; background-position: 0 -30px; }
.check-input input[type=radio] + .check-label:before { width: 15px; height: 15px; background: url(../../img/radio_box_bg.png); background-size: 15px 30px; position: absolute; content: ''; left: 0; top: 50%; margin-top: -7px; }
.check-input input[type=radio]:checked + .check-label:before { background: url(../../img/radio_box_bg.png); background-size: 15px 30px; background-position: 0 -15px; }

/* 셀렉트박스 커스텀 */
.selectbox { position: relative; z-index: 1; display: inline-block; border: 1px solid #dee3eb; height: 28px; float: left; width: 20%; min-width: 160px; border-radius: 3px; transition: border-color .2s ease, box-shadow .2s ease; background: #fff; }
.selectbox:focus,
.selectbox:active,
.selectbox:hover { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); }
.selectbox:before { 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; }
.selectbox:hover:before { border-top: 6px solid #AAAAAA; }
.selectbox label { position: absolute; top: 1px; left: 0; color: #2d2d2d;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 12px; line-height: 25px; text-align: left; width: 80%; padding-left: 10px; font-weight: 400; }
.selectbox select { width: 100%; line-height: 28px;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 28px; }
.selectbox select option { font-size: 13px; }

/* 필터 */
.filter-wrap {  }
.filter-wrap .filter-area { background: #fff; display: inline-block; border: 1px solid #dee3eb; border-radius: 3px; position: relative; height: 28px; margin-bottom: 10px; padding: 3px 20px 3px 8px; transition: border-color .2s ease, box-shadow .2s ease; cursor: pointer; }
.filter-wrap .filter-area:hover { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); }
.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; }
.filter-wrap .filter-area:hover:after { border-top: 6px solid #aaa; }
.filter-wrap .filter-area.right-filter-area { float: right; }
.filter-wrap .filter-area .title { font-size: 11px; display: inline-block; margin-right: 8px; }
.filter-wrap .filter-area .filter-content { display: inline-block; }
.filter-wrap .filter-area .filter-content .filter-type { display: inline-block; margin-right: 8px; }
.filter-wrap .filter-area .filter-content .filter-name { color: #555; }
.filter-wrap .filter-area .filter-content .select { color: #25974C; font-weight: 300; }
.filter-wrap .filter-area label.filter-toggle { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; display: block; }

.filter-wrap .filter-area .filter-detail-set-layer { display: none; position: absolute; right: -1px; top: 35px; z-index: 2; width: 100%; background: #fff; border: 1px solid #dee3eb; height: auto; padding: 10px 15px; overflow: hidden; cursor: default; }
.filter-wrap .filter-area .filter-detail-set-layer .filter-type { margin-bottom: 8px; }
.filter-wrap .filter-area .filter-detail-set-layer .filter-type .filter-name { font-weight: bold; display: block; margin-bottom: 2px; }
.filter-wrap .filter-area .filter-detail-set-layer .filter-type ul li { display: inline-block; }

.filter-wrap .filter-area.on .filter-detail-set-layer { display: block; }

/* 페이징 */
.paging-wrap { text-align: center; margin-top: 25px; }
.paging-wrap ul li { display: inline-block; }
.paging-wrap ul li a { color: #999; font-size: 12px; transition: color .25s ease; display: block; padding: 3px 8px; border: 1px solid #dee3eb; background: #fff; border-radius: 2px; }
.paging-wrap ul li a:hover { color: #25974C; }
.paging-wrap ul li.select a { color: #fff; }
.paging-wrap ul li.select a { border-color: #25974C; background: #25974C; }

/* 알림창 */
.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.red-bg { background: rgba(255,44,48,0.95); }
.alert-pop-wrap.green-bg { background: rgba(51,190,98,0.95); }
.alert-pop-wrap i { display: inline-block; color: #fff; margin-right: 5px; font-size: 13px; 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: 999; 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; 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:hover { opacity: .7; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap { height: 50px; padding: 10px 15px; text-align: center; border-top: 1px solid #eee; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap a { display: inline-block; cursor: pointer; padding: 4px 20px; border: 1px solid #dee3eb; border-radius: 3px; margin-left: 5px; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap .cancel-btn { color: #999; }
.confirm-pop-wrap .confirm-pop-area .confirm-pop .btn-wrap .confirm-btn { background: #33be62; color: #fff; border-color: #33be62; }

/* 로딩 팝업 */
.loading-pop-wrap { position: fixed; top: 10; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0,0,0,0.2); min-width: 960px; }

/* 모달 백그라운드 스크롤 방지용 */
.block-scroll { overflow: hidden; }

/* 토글버튼 */
.normal-toggle-btn { display: inline-block; height: 28px; }
.normal-toggle-btn input[type=checkbox] { display: none; }
.normal-toggle-btn .toggle-label { letter-spacing: -0.5px; color: #999; font-size: 11px; padding-left: 35px; position: relative; height: 28px; line-height: 28px; transition: color 0.3s ease; }
.normal-toggle-btn .toggle-label:before { position: absolute; content:''; background: #dcdcdc; width: 30px; height: 6px; left: 0; top: 50%; margin-top: -3px; border-radius: 3px; z-index: 1; }
.normal-toggle-btn .toggle-label:after { position: absolute; content:''; width: 12px; height: 12px; border-radius: 50%; left: 0; top: 50%; margin-top: -6px; z-index: 2; transition: left 0.3s ease,background 0.3s ease; background: #8A8A8A; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label { color: #33be62; font-weight: 600; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 18px; background: #33be62; }

/* 텍스트에리어 글자수제한 */
.info-detail .info-table table tr td .textarea { position: relative; }
.info-detail .info-table table tr td .textarea textarea { padding-bottom: 25px; }
.info-detail .info-table table tr td .textarea .text-limit-wrap { position: absolute; z-index: 2; bottom: 6px; right: 20px; color: #999; cursor: default; display: inline-block; background: #fff; }
.info-detail .info-table table tr td .textarea .text-limit-wrap span { font-family: 'Arial','dotum'; font-size: 11px; }
.info-detail .info-table table tr td .textarea .text-limit-wrap span.excess { color: #F05050; font-weight: bold; }
.info-detail .info-table table tr td .textarea .text-limit-wrap span.unit { font-size: 11px; margin-left: 2px; }

/* ellipsis 테이블 */
.normal-table table tbody tr td.ellipsis-value { position: relative; cursor: pointer; transition: background 0.25s ease; }
.normal-table table tbody tr td.ellipsis-value:hover { background: rgba(0,0,0,0.075); }
.normal-table table tbody tr td.ellipsis-value .ellipsis-box { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; }
.normal-table table tbody tr td.ellipsis-value .ellipsis-box i { margin-right: 5px; color: #666; }
.normal-table table tbody tr td.ellipsis-value .ellipsis-box i.fa-eye { display: none; }
.normal-table table tbody tr td.ellipsis-value:hover .ellipsis-box i.fa-eye { display: inline-block; }
.normal-table table tbody tr td.ellipsis-value:hover .ellipsis-box i.fa-eye-slash { display: none; }
.normal-table table tbody 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: none; 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); }
.normal-table table tbody tr td.ellipsis-value:hover .ellipsis-view-layer { display: block; }

/* 버튼 레이어 */
.content-box .btn-wrap .btn-layer-area { position: relative; }
.content-box .btn-wrap .btn-layer-area .btn-layer { background: #fff; position: absolute; z-index: 2; top: 35px; border: 1px solid #dee3eb; padding: 10px 15px; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05); }
.content-box .btn-wrap .left-btn-list .btn-layer-area .btn-layer { left: 0; }
.content-box .btn-wrap .right-btn-list .btn-layer-area .btn-layer { right: 0; }
.content-box .btn-wrap .btn-layer-area .btn-layer .layer-title { font-size: 14px; font-weight: 700; display: block; white-space: nowrap; margin-bottom: 10px; letter-spacing: -0.5px; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row { display: block; white-space: nowrap; padding: 2px 0; }
.content-box .btn-wrap .btn-layer-area .btn-layer .normal-row { white-space: normal; padding: 2px 0; display: block; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .head { display: inline-block; font-weight: 500; line-height: 25px; vertical-align: top; margin-right: 10px; min-width: 80px; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .check-input-wrap { display: inline-block; white-space: nowrap; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .check-input-wrap .check-input { display: inline-block; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .percentage-input { display: inline-block; margin-left: 5px; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .percentage-input input[type=text] { width: 40px; padding: 0 5px; height: 25px; }
.content-box .btn-wrap .btn-layer-area .btn-layer .row .percentage-input .unit { font-size: 12px; color: #999; }

/* 레이어 토글버튼 */
.layer-toggle-btn { display: inline-block; height: 24px; background: #F0F0F0; border-radius: 12px; margin-bottom: 5px; float: right; width: 86px; }
.layer-toggle-btn input[type=checkbox] { display: none; }
.layer-toggle-btn .toggle-label { letter-spacing: -0.5px; color: #999; font-size: 11px; padding: 0 10px; position: relative; height: 24px; line-height: 24px; transition: color 0.3s ease; display: block; }
.layer-toggle-btn .toggle-label .on-content { margin-right: 15px; }
.layer-toggle-btn .toggle-label:after { position: absolute; content:''; width: 35px; height: 16px; border-radius: 12px; left: 5px; top: 4px; z-index: 2; transition: left 0.3s ease,background 0.3s ease,width 0.3s ease; background: #aaa; }
.layer-toggle-btn input[type=checkbox]:checked + .toggle-label .on-content { color: #33be62; font-weight: 600; }
.layer-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 40px; background: #33be62; width: 40px; }

/* 로딩창 */
.loading-pop-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba(0,0,0,0.2); min-width: 960px; }
.loading-pop-wrap .loading-pop-area { position: relative; width: 100%; height: 100%; }
/* 도넛 */
.loading-pop-wrap .loading-pop-area>.loading { width: 45px; height: 45px; position: absolute; left: 50%; margin-left: -22.5px; top: 50%; margin-top: -22.5px; }
.loading-pop-wrap .loading-pop-area>.loading .loading-bar { border-top: 6px solid transparent; border-bottom: 6px solid #1EC857; border-left: 6px solid #1EC857; border-right: 6px solid transparent; animation: loading .8s cubic-bezier(0.4, 0.18, 0.63, 0.86) .2s infinite; border-radius: 80px; width: 45px; height: 45px; display: block; }
@keyframes loading
{
	0%{transform:rotate(0deg);	}
	100%{transform:rotate(360deg); }
}

/* 원 */
.loading-pop-wrap .loading-pop-area .loading-container { width: 200px; height: 50px; margin-top: 30px; position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -100px; }
.loading-pop-wrap .loading-pop-area .loading-container>.loading { text-align: center; }
.loading-pop-wrap .loading-pop-area .loading-container>.loading div { width: 13px; height: 13px; margin: 15px 3px; background: #1EC857; border-radius: 50%; animation: bounce 1.2s  ease-in-out 0.1s infinite; display: inline-block; }
.loading-pop-wrap .loading-pop-area .loading-container>.loading div:nth-child(2) { animation-delay: 0.3s; }
.loading-pop-wrap .loading-pop-area .loading-container>.loading div:nth-child(3) { animation-delay: 0.6s; }

@keyframes bounce
{ 
	0% { opacity: 1; transform: translate3d(0, 0px, 0); }
	50%{ opacity: 0.5; transform: translate3d(0, -10px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* dchain */
.dchain-info { display: block; }
.dchain-info .code { display: inline-block; color: #fff; padding: 2px 5px; font-size: 1rem; letter-spacing: 0; font-family: 'Arial','dotum'; margin-right: 3px; }
.dchain-info .description { font-size: 1.1rem; }
.dchain-info.dchain-01 .code { background: #F40000; }
.dchain-info.dchain-02 .code { background: #8900D0; }
.dchain-info.dchain-01 .description { color: #F40000; }
.dchain-info.dchain-02 .description { color: #8900D0; }


/* layer pop */
.pop-wrap {position: fixed; z-index: 9999; top:0; left:0; width:100%; height:100%;;}
.pop-wrap .pop-bg { position:relative; width:100%; height: 100%;  background:rgba(0,0,0,0.6);}
.pop-wrap .pop-bg .pop-layer {position:absolute; top:50%; left:50%; width:48%; max-height:800px; overflow-y: auto; padding:30px; background:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.3); border-radius: 5px;
-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-lg {width:80%;}
.pop-wrap .pop-close-btn {position:relative; width:100%; height:100%;}
.pop-wrap .pop-close-btn .close-btn {position: absolute; right:0; top:-10px; font-size:20px; cursor: pointer; color: #bbb;}
.pop-wrap .pop-close-btn .close-btn:hover { color: #888;}
.pop-wrap .pop-head { margin-bottom: 20px; }
.pop-wrap .pop-head .title { font-size: 14px; display: block; font-weight: bold; }
.pop-wrap .pop-body .t-head { font-size: 17px; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 2px solid #33be62; font-weight: 600; margin-top: 30px;}
.pop-wrap .pop-body .t-head:first-child { margin-top: 0; }
.pop-wrap .pop-body .s-tit { font-size: 15px; padding-bottom: 7px; font-weight: 500; position: relative; padding-left: 12px;}
.pop-wrap .pop-body .s-tit:after { content: ''; position: absolute; top: 7px; left: 0; width: 7px; height: 7px; background: #33be62; }
.pop-wrap .pop-body .txt { padding-bottom: 10px; font-size: 13px; }
.pop-wrap .pop-body .txtarea { background: #f4f4f4; border: 1px solid #dee3eb; border-radius: 3px; padding: 10px; margin-bottom: 10px; font-size: 13px; line-height: 1.7;}


/* 전자세금계산서 발행 */
.sp-pop-wrap .pop-bg .pop-layer { width:1100px; }
.sp-pop-wrap .normal-txt-input { width:100%; }
.sp-pop-wrap .normal-txt-input.w-100 { width: 100%;}
.sp-pop-wrap .normal-txt-input.ss-width { padding: 0 10px; width: 35px; text-align: center;}
.sp-pop-wrap .sp-table table { table-layout: fixed; width: 100%; }
.sp-pop-wrap .sp-table table tr th { width: 87px;}
.sp-pop-wrap .sp-table table tr th.fr-th { width: 35px; padding:10px; text-align: center; }
.sp-pop-wrap .sp-table .email-input .normal-txt-input { width: 46%;}
.sp-pop-wrap .sp-table.left { float: left; width: 50%; border-color:#db9d9d;}
.sp-pop-wrap .sp-table.left table tr {border-color: #ebdee8; }
.sp-pop-wrap .sp-table.left table tr th { background: #fff1f1; color:#7a1d1d;}
.sp-pop-wrap .sp-table.left table tr th.fr-th { background:#ffc7c7; }
.sp-pop-wrap .sp-table.left .email-input { padding: 24px 0; }
.sp-pop-wrap .sp-table.right { float: right; width: 50%; border-color:#7292c2;}
.sp-pop-wrap .sp-table.right table tr th { background: #f1f7ff; color:#1d4c7a;}
.sp-pop-wrap .sp-table.right table tr th.fr-th { background:#c3daf9; }

.sp-pop-wrap .ad-table { margin-top: 40px; }
.sp-pop-wrap .total-area .txt { padding: 20px; margin-top: 20px; border-top: 3px solid #b9b9b9; border-bottom: 1px solid #dee3eb; background:#f8f8f8; text-align: right; font-size: 16px;}


/* 추가 컴포넌트 */

/* 전체건,페이지 위치 */
.rank-table.mg-b { margin-top: 40px;}

.current { display: inline-block; margin-top: 0; margin-left: 15px; border: 0; padding: 0; background: none; position: relative; top: 5px;}
.current.mg-0 { margin-left: 0;}
.current .current-text { display: inline-block; font-size: 12px;} 
.current .current-text .bold { font-weight: 600; color: #25974C;}
.current.table { top: 0; margin-left: 0;}
.content-box .btn-wrap.inline { display: inline; margin-top: 0;}

/* 자동 수집 */
.com-section { margin-top: 15px; }
.com-section.mg-b { margin-bottom: 40px;}
.com-section .collection { display: inline-block; background: #fff; border: 1px solid #dee3eb; padding: 5px 10px;}
.com-section .collection .collection-area { display: flex; align-items: center;}
.com-section .collection .collection-area .text { padding-right: 10px;}
.com-section .collection .collection-area.on .text .ing { display: inline-block;}
.com-section .collection .collection-area.off .text .hold { display: inline-block;}
.com-section .collection .collection-area .text .ing { display: none; color: #1D70E1; font-weight: 600;}
.com-section .collection .collection-area .text .hold { display: none; color: #f05050; font-weight: 600;}


/* 기간설정 우측 인풋 */
.check-input-wrap.inline-block { display: inline-block; padding-left: 5px;}

/* 자동수집 알림팝업 */
.confirm-pop-wrap .confirm-pop-area .confirm-pop.long { width: 400px; top: 200px;}
.confirm-pop-wrap .confirm-pop-area .confirm-pop.long .content { padding: 40px 30px 20px 30px;}
.confirm-pop-wrap .confirm-pop-area .confirm-pop.long .content p.text .ing { color: #1D70E1; font-weight: 600; }

.confirm-pop-wrap .confirm-pop-area .confirm-pop.long .content p.text .hold { color: #f05050; font-weight: 600;}



.pop-wrap .pop-bg .pop-layer .pop-body .table-text { font-size: 1.3rem; font-weight: 500; color: #515151; padding-bottom: 7px;}

.midium-pop-wrap .pop-bg .pop-layer { width: 800px;}
.large-pop-wrap .pop-bg .pop-layer { width: 60%;}
.pop-wrap .pop-bg .pop-layer .pop-body .info-detail.pd-top { padding-top: 20px;}



/* 입출금 내역 관리 */
.rank-table table thead tr th.check { min-width: 35px; width: 2%;}
.rank-table table .check-input input[type=checkbox] + .check-label:before { left: 7px; margin-top: -9px;}
.rank-table table thead tr th.width-40 { min-width: 40px;}
.rank-table table thead tr th.wid-per-1 { width: 1%;}
.rank-table table thead tr th.wid-per-4 { width: 4%;}
.rank-table table thead tr th.wid-per-10 { width: 10%;}
.rank-table table tbody tr td a.green-bg { color: #fff;}
table tbody tr td .normal-txt-input.w-full { width: 100%;}
table tbody tr td .normal-txt-input.edit { border: 1px solid #e94c4c;}
table tbody tr td .normal-txt-input.save { border: 1px solid #33be62;}



/* 기간별 주문 통계 */
.info-detail .info-table.mg-top { margin: 10px 0; }



/* 결제수단 별 수수료 관리 */
.normal-txt-input.small { width: 120px;}
table .normal-btn.mg-left { margin-left: 18px;}
.info-detail .info-table table tr th.pay-number { text-align: center; width: 100px; border-right: 1px solid #dee3eb; background: #E4E6E9;}
.info-detail.none .info-table { display: none;}
.info-detail .info-table.empty { display: none;}
.info-detail.none .info-table.empty { display: block;}
.info-detail.none .info-table.empty tr td { color: #999; padding: 10px;}


/* pg사 대사 관리 */

.filter-wrap .range-filter.mg-top { margin-top: 10px;}
.statistics-table table thead tr th.num { min-width: 40px;}
.statistics-table table thead tr th.small { min-width: 60px;}
.statistics-table table thead tr th.min-93 { min-width: 93px;}
.statistics-table table thead tr th.wid-per-1 { width: 1%; }
.statistics-table table thead tr th.wid-per-2 { width: 2%; }
.statistics-table table thead tr th.wid-per-3 { width: 3%;}
.statistics-table table thead tr th.wid-per-4 { width: 4%;}
.statistics-table table thead tr th.wid-per-5 { width: 5%;}
.statistics-table table thead tr th.wid-per-6 { width: 6%;}
.statistics-table table thead tr th.wid-per-10 { width: 10%;}
.statistics-table table thead tr th.border-right { border-right: 1px solid #dcdcdc;}
.statistics-table table tbody tr.non-payment td {  background: #f7e3e3; border-right: 1px solid #e4cece; border-top: 1px solid #e4cece; border-bottom: 1px solid #e4cece;}
.statistics-table table tbody tr td a {color: #1D70E1; }
.statistics-table table tbody tr td a.normal-btn.white-text { color: #fff;}
.statistics-table table tbody tr td .color { display: flex; justify-content: center; gap: 4px; padding: 5px 0 2px 0;}



button.col-select {  display: block; width: 12px; height: 12px; border: none;}
button.col-select.yellow { background: #FFF2CC;}
button.col-select.purple { background: #f8ffde;}
button.col-select.sky { background: #DEEBF7;}
button.col-select.pink { background: #F7DEF1;}
.statistics-table table tbody tr.color-yellow td { background: #FFF2CC;}
.statistics-table table tbody tr.color-remon td { background: #f8ffde;}
.statistics-table table tbody tr.color-sky td { background: #DEEBF7;}
.statistics-table table tbody tr.color-pink td { background: #F7DEF1;}

.statistics-table table tbody tr.col-yellow td { background: #FFF2CC; border: 1px solid #f2dfa4; border-left: none;}
.statistics-table table tbody tr td.center { text-align: center;}
.statistics-table table tbody tr td .ellipsis {   position: relative; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
}
.statistics-table table tbody tr td.br { word-break: break-all;}
.statistics-table table tbody tr td.w-160px { min-width: 100px; max-width: 160px; }
.statistics-table table tbody tr td.non { color: #d40d0d; }
.statistics-table table thead tr th.w-90 { min-width: 90px;}
.statistics-table table thead tr th.w-140 { min-width: 140px;}
.statistics-table table tbody tr.integrated td.total { padding: 15px 0;}
table .normal-btn.white-bg { height: 30px; color: #999; font-weight: 400; transition: background .2s ease,border-color .3s ease; background: #fff; }
table .normal-btn.white-bg:hover { border-color: #dcdcdc; background: #f8f8f8;}
table .normal-btn.mg-right { margin-right: 4px; }
table .normal-btn.mg-top { margin-top:3px;}

.result-table.total { text-align: center;}
.result-table.total .search-result { font-size: 16px;}
.result-table.total .search-result p { color: #666666;}
.result-table.total .search-result p .result { color: #262626;}
.result-table.total .search-result .result-text-btn { padding-top: 3px;}
.result-table.total .search-result .result-text-btn a { color: #1D70E1; text-decoration: underline;}

.result-table .search-result .all { display: flex; gap: 10px; font-size: 16px;     padding-bottom: 6px;}
.result-table .search-result .sub { border-top: 1px solid #ededed; padding-top: 10px;}
.result-table .search-result .all .text .bold { font-weight: 800; }


.content-box .btn-wrap.mg-top { margin-top: 60px;}
table .normal-btn.mg-5 { margin-top: 5px;}


.info-detail.mg-top { margin-top: 20px;}
.info-detail .info-table table tr td.right { text-align: right;}
.info-detail .info-table table tr td.result { color: #f05050;}



.statistics-table table thead tr th.check { min-width: 35px; width: 2%;}
.statistics-table table thead tr th.check.wid-per-3 { width: 3%;}
.statistics-table table thead tr th.check.wid-per-1 { width: 1%;}
.statistics-table table .check-input input[type=checkbox] + .check-label:before { left: 7px; margin-top: -9px;}
.normal-txt-input.number { width: 80px; padding: 0 10px 0 10px; text-align: right;}
.selectbox.small-box { min-width: 110px; width: auto;}
.selectbox.box-240 { min-width: 240px;}
.selectbox.small-box-40 { min-width: 83px; width: auto;}
.selectbox.small-box-40.w-full { width: 100%; }

/* 비고 */
.textarea { position: relative;}
textarea { border: 1px solid #dee3eb; resize: none; border-radius: 3px; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; font-size: 12px; width: 100%; height: 150px; padding: 5px 10px 25px;}



/* 가맹점별 계산식 관리 */
.info-detail .info-table table tr td .number { display: block; font-size: 10px; background: #878789; color: #fff; width: 15px; height: 15px; text-align: center; border-radius: 30px;}

/* 테이블 주석 */
.annotation { color: #a7a7a7; font-size: 12px;}
.annotation.inline-block { display: inline-block;}
.annotation.pd-left { padding-left: 8px;}

/* flex */
.content-flex { display: flex; align-items: center; gap: 7px; margin: 4px 0;}
.content-flex.mg-5 {margin: 5px 0;} 
.content-flex.mg-0 { margin: 0;}
.content-flex.justify { justify-content: space-between;}
.content-flex .info-title { margin-bottom: 0;}
.content-flex.end { align-items: flex-end;}

/* 대사관리 상세페이지 */
#page-wrap #page-content-area-wrap .page-content-area .main-content-area.pd-bottom { padding: 20px 20px 20px 30px;}