@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; }
.normal-table table tbody tr td a.link { color:#1579cf; }
.normal-table table tbody tr td a.link:hover { text-decoration: underline; }

.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 { position: relative; font-size: 14px; display: block; font-weight: bold; margin-top: 30px; margin-bottom: 10px; padding-left: 15px; }
.info-detail .info-title:before { position: absolute; content: ''; width: 8px; height: 8px; border: 2px solid #555; border-radius: 50%; left: 2px; top: 6px; }
.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; }

.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 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 .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: #65DEFF; box-shadow: 0 0 2px 2px rgba(26, 113, 165, 0.1); }
.filter-wrap .range-filter .range-btn-wrap .range-btn.select { border-color: #00addb; color: #fff; background: #00addb; }
.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: #00b2e2; }

/* 텍스트 정렬 속성 */
.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: #00b2e2; transition: background 0.2s ease; }
.purple-bg { background: #7266ba; transition: background 0.2s ease; }
.green-bg { background: #33be62; transition: background 0.2s ease; }
.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 { transition: background 0.2s ease; }
.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: #65DEFF; box-shadow: 0 0 2px 2px rgba(26, 113, 165, 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;}

/* 상세페이지 공통 인풋*/
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: #65DEFF; box-shadow: 0 0 2px 2px rgba(26, 113, 165, 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; cursor:no-drop }
.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%; width: 160px; border-radius: 3px; transition: border-color .2s ease, box-shadow .2s ease;  }
.selectbox:focus,
.selectbox:active,
.selectbox:hover {  border-color: #00addb; box-shadow: 0 0 2px 2px rgba(26, 113, 165, 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: #65DEFF 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: #00b2e2; 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: #00b2e2; }
.paging-wrap ul li.select a { color: #fff; }
.paging-wrap ul li.select a { border-color: #65DEFF; background: #00b2e2; }

/* 알림창 */
.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: #00addb; color: #fff; border-color: #00addb; }

/* 로딩 팝업 */
.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: #00addb; font-weight: 600; }
.normal-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 18px; background: #00addb; }

/* 텍스트에리어 글자수제한 */
.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: #00addb; font-weight: 600; }
.layer-toggle-btn input[type=checkbox]:checked + .toggle-label:after { left: 40px; background: #00addb; 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 #00addb; border-left: 6px solid #00addb; 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: #00addb; 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); }
}

/* 번호 인풋 테이블 */
.number-input-table { border-top: 1px solid #aaa; }
.number-input-table table { width: 100%; font-size: 12px; }
.number-input-table table tr { border-bottom: 1px solid #dee3eb; }
.number-input-table table tr th { vertical-align: middle; font-weight: bold; padding: 5px 10px 5px 10px; width: 150px; background: #ECECEC; }
.number-input-table table tr td { padding: 5px 10px; vertical-align: middle; background: #fff; }
.number-input-table table tr td .selectbox { margin-right: 10px; width: 300px; }
.number-input-table table tr td .number-list ul li { display: inline-block; margin-top: 8px; background: #fff; border: 1px solid #dcdcdc; border-radius: 3px; background: #f8f8f8; height: 30px; line-height: 28px; padding: 0 10px; font-size: 12px; cursor: default; color: #666; margin-right: 5px; }
.number-input-table table tr td .number-list ul li button { border: none; background: none; width: 12px; height: 12px; font-size: 14px; vertical-align: top; margin-top: 4px; margin-left: 5px; cursor: pointer; }
.number-input-table table tr td .number-list ul li button i { color: #666; }
.number-input-table table tr td .number-list ul li button:hover i { color: #F4070B; }

/* 이미지 인풋 테이블 */
.img-input-table { border-top: 1px solid #aaa; }
.img-input-table .row { background: #fff; border-bottom: 1px solid #dee3eb; padding: 5px; }
.img-input-table .row .preview-area { width: 205px; float: left; }
.img-input-table .row .preview-area .thumbnail { max-width: 205px; width: 100%; height: 100%; }
.img-input-table .row .preview-area .thumbnail img { max-width: 100%; max-height: 100%; height: auto; width: 100%; }
.img-input-table .row .input-area { width: calc(100% - 540px); float: left; padding-left: 10px; padding-top: 12px; }
.img-input-table .row .input-area .file-input { cursor: pointer; }
.img-input-table .row .input-area .file-input label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.img-input-table .row .btn-area { width: 320px; float: left; padding-top: 12px; }


/* 기본 레이어팝업 */
.pop-wrap { position: fixed; z-index: 999; 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 { width: 450px; height: 250px; overflow-y: auto; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); border-radius: 5px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.pop-wrap .pop-bg .pop-layer .pop-top { position: relative; padding: 15px 40px 15px 20px; border-bottom: 1px solid #dee3eb; }
.pop-wrap .pop-bg .pop-layer .pop-top .pop-title { display: block; font-weight: bold; float: left; font-size: 1.6rem; }
.pop-wrap .pop-bg .pop-layer .pop-top .pop-close-btn { position: absolute; right: 20px; top: 15px; }
.pop-wrap .pop-bg .pop-layer .pop-top .pop-close-btn .close-btn { font-size: 15px; cursor: pointer; color: #bbb; }
.pop-wrap .pop-bg .pop-layer .pop-top .pop-close-btn .close-btn:hover { color: #888; }
.pop-wrap .pop-bg .pop-layer .pop-content { position: relative; overflow-y: auto; height: calc(100% - 115px); padding: 20px; }
.pop-wrap .pop-bg .pop-layer .pop-content::-webkit-scrollbar { width: 4px; height: 20px; }
.pop-wrap .pop-bg .pop-layer .pop-content::-webkit-scrollbar-track { background-color: transparent; }
.pop-wrap .pop-bg .pop-layer .pop-content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #dcdcdc; }
.pop-wrap .pop-bg .pop-layer .pop-content .page-title { padding-top: 0; }
.pop-wrap .pop-bg .pop-layer .pop-content .page-title .tit { font-size: 1.7rem; }
.pop-wrap .pop-bg .pop-layer .pop-foot { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 20px; border-top: 1px solid #dee3eb; }
.pop-wrap .pop-bg .pop-layer .pop-foot .btn-wrap { margin-top: 0; }
.pop-wrap.md-width .pop-bg .pop-layer { width: 800px; height: 500px; }
.pop-wrap.lg-width .pop-bg .pop-layer { width: 65vw; height: 80vh; }


/* 주소검색 ui */
.addr-search .group:first-child { margin-bottom: 5px; }
.addr-search .group .input-text { display: inline-block; }
.addr-search .group .input-text input[type="text"] { width: 100%; padding: 0 10px;}
.addr-search .group .btn-wrap { margin:0; display: inline-block; vertical-align: middle;}
.addr-search .group .btn-wrap ul li a { height: 28px; }

/* width */
.w-100pct { width: 100% !important; }
.w-50px { width: 50px !important; padding: 0 5px !important; }
.w-100px { width: 100px !important; }
.w-250px { width: 250px !important; }
.w-475px { width: 475px !important; }


/* 탭메뉴 */
.tab-menu {margin-bottom:20px;}
.tab-menu ul { position:relative; overflow: hidden; height: 37px; font-size:14px; z-index: 1;}
.tab-menu ul:after {content:''; position:absolute; width:100%; height:1px; background:#272a3b; bottom:0; left:0; z-index: -1;}
.tab-menu ul li {position:relative; float: left; height:40px; }
.tab-menu ul li a {min-width:110px; display: block; line-height: 35px; border:1px solid #dee3eb; border-right:none; border-bottom:1px solid #272a3b; text-align: center; padding:0 15px; font-size:13px; background: #fff; }
.tab-menu ul li:last-child a { border-right: 1px solid #dee3eb; }
.tab-menu ul li.on a { background:#272a3b; border-bottom-color: #272a3b; border:1px solid #272a3b; border-bottom:1px solid #272a3b; color: #fff; }