@charset "utf-8";

/* ===================================================================
	01. base (공통 기본)
	- body, a, img, button/input 기본, helper reset
=================================================================== */

/* ---------------------------
	font
--------------------------- */

@font-face {
	font-family: 'Pretendard';
	src:
		url('/assets/fonts/Pretendard-Regular.woff') format('woff'),
		url('/assets/fonts/Pretendard-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src:
		url('/assets/fonts/Pretendard-Medium.woff') format('woff'),
		url('/assets/fonts/Pretendard-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src:
		url('/assets/fonts/Pretendard-Bold.woff') format('woff'),
		url('/assets/fonts/Pretendard-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

/* ---------------------------
	html, body
--------------------------- */

html {
	height: 100%;
}

body {
	min-width: 1680px;
	height: 100%;
	line-height: 1.4;
	font-size: 16px;
	font-family:
		'Pretendard',
		Pretendard,
		-apple-system,
		BlinkMacSystemFont,
		system-ui,
		Roboto,
		'Helvetica Neue',
		'Segoe UI',
		'Apple SD Gothic Neo',
		'Noto Sans KR',
		'Malgun Gothic',
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol',
		sans-serif;
	background-color: #fff;
	color: #242933;
	overflow-x: auto;
}

/* ---------------------------
	typography
--------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	word-break: keep-all;
	font-weight: normal;
}

/* ===================================================================
	02. layout (틀)
	- header / gnb / lnb / container / grid / footer
=================================================================== */

.app {
	position: relative;
	height: 100%;
}

/* ---------------------------
	lnb
--------------------------- */

.lnb {
	z-index: 10;
	overflow: auto;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	width: 252px;
	color: #fff;
	background: #252b37;
}

.lnb h1 {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	color: #49cc93;
	text-align: center;
	padding: 46px 0px;
}

.lnb-list li {
	cursor: pointer;
}
/* depth 1 */
.depth1-item {
}

.depth1-item.is-active {
	background-color: #15a46e;
}
.depth1-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px 14px 40px;
	font-weight: 700;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.depth1-item.has-item .depth1-item__trigger:after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url(/assets/images/icon/ic_arrow_14.png) no-repeat;
}
.depth1-item.is-open .depth1-item__trigger:after {
	transform: rotate(180deg);
}

/* depth 2 */
.depth2-list {
	color: #c8d2e4;
}

.depth2-item.is-active {
	color: #49cc93;
}
.depth2-item__trigger {
	display: flex;
	align-items: center;
	padding: 14px 20px 14px 40px;
	border-bottom: 1px solid #252b37;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%), #020616;
}
.depth2-item__trigger::before {
	content: '';
	display: inline-block;
	margin-right: 6px;
	width: 16px;
	height: 16px;
	background: url(/assets/images/icon/ic_depth16.png) no-repeat center;
}
.depth2-item.has-item .depth2-item__trigger:after {
	content: '';
	display: inline-block;
	margin-left: auto;
	width: 14px;
	height: 14px;
	background: url(/assets/images/icon/ic_depth16_2.png) no-repeat center;
}

/* depth 3 */
.depth3-list {
	color: #c8d2e4;
	font-size: 14px;
	padding: 14px 20px 14px 60px;
	background-color: #020616;
}
.depth3-item + .depth3-item {
	margin-top: 10px;
}
.depth3-item.is-active {
	color: #49cc93;
}

.depth1-item__trigger,
.depth2-item__trigger,
.depth3-item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.depth1-item__trigger:hover,
.depth2-item__trigger:hover,
.depth3-item:hover {
	color: #fff;
	background-color: #ffffff33;
}

.depth1-item__panel,
.depth2-item__panel {
	display: none;
}

/* ---------------------------
	workspace
--------------------------- */

.workspace {
	position: relative;
	height: 100%;
	padding-top: 70px; /* header height */
}

/* ---------------------------
	header
--------------------------- */

.header {
	position: absolute;
	top: 0px;
	left: 252px;
	right: 0px;
	height: 70px;
	background: #fff;
	border-bottom: 1px solid #d9dee7;
}

/* ---------------------------
	main
--------------------------- */

.main {
	overflow: auto;
	height: 100%;
	padding-left: 252px; /* lnb width  */
}

/* ---------------------------
	page content
--------------------------- */

.page-content {
	min-height: 100%;
	padding: 40px;
}
.page-content.is-compact {
	width: 1080px;
}

/* header */
.page-header {
	position: relative;
	margin-bottom: 40px;
}
.page-title {
	display: flex;
	align-items: center;
}
.page-title h2 {
	margin-right: 12px;
	font-size: 32px;
	font-weight: 700;
}
.page-title .btn-back {
	font-size: 0;
	width: 30px;
	height: 30px;
	margin-right: 12px;
	background: url(/assets/images/icon/ic_back.png) no-repeat center;
}
.page-title > .select {
	width: 180px;
}
.page-title > .select + .select {
	margin-left: 8px;
}

/* header 우측 액션 버튼 */
.page-actions {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0;
}
.page-actions > button {
	vertical-align: middle;
}
.page-actions > button + button {
	margin-left: 10px;
}

/* section */
.page-section + .page-section {
	margin-top: 40px;
}
.page-section > .tit {
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
}
.page-section > .tit a {
	display: inline-block;
	margin-left: 12px;
	padding-right: 20px;
	color: #667085;
	font-size: 16px;
	font-weight: 400;
	background: url(/assets/images/icon/ic_next_16.png) no-repeat center right;
	background-size: 16px 16px;
}

/* ===================================================================
	03. component (재사용 UI)

	- 기본
		- button
		- badge

	- 입력
		- form
		- datepicker
		- filters
		- selection-list 

	- 데이터
		- tab
		- table
		- chart

	- 레이아웃
		- box
		- card
		- panel

	- 레이어
		- overlay 
		- modal

	- 피드백
		- toast
=================================================================== */

/* ---------------------------
	button 
--------------------------- */

button:disabled {
	pointer-events: none;
}

.btn {
	display: inline-block;
	text-align: center;
	border-radius: 4px;
}
.btn-xs {
	height: 24px;
	line-height: 24px;
	padding: 0px 12px;
	font-size: 13px;
	font-weight: 500;
}
.btn-sm {
	height: 30px;
	line-height: 28px;
	min-width: 50px;
	padding: 0px 12px;
	font-size: 12px;
	font-weight: 400;
}
.btn-sm-md {
	height: 34px;
	line-height: 32px;
	padding: 0px 8px;
	font-size: 14px;
}
.btn-md {
	height: 44px;
	line-height: 44px;
	min-width: 70px;
	padding: 0px 16px;
	font-size: 16px;
	font-weight: 500;
}
.btn-lg {
	height: 50px;
	line-height: 48px;
	min-width: 100px;
	padding: 0px 20px;
	font-size: 18px;
	font-weight: 700;
}

.btn-primary {
	background: #15a46e;
	color: #fff;
}
.btn-primary:hover {
}
.btn-primary:active {
}
.btn-primary:disabled {
	color: #c8d2e4;
	background-color: #edf1f7;
}

.btn-secondary {
	background: #3b414b;
	color: #fff;
}
.btn-secondary:hover {
}
.btn-secondary:active {
}
.btn-secondary:disabled {
	color: #c8d2e4;
	background-color: #edf1f7;
}

.btn-tertiary {
}
.btn-tertiary:hover {
}
.btn-tertiary:active {
}
.btn-tertiary:disabled {
}

.btn-outline-gray {
	border: 1px solid #d9dee7;
	background: #fff;
	color: #242933;
}
.btn-outline-gray:hover {
}
.btn-outline-gray:active {
}
.btn-outline-gray:disabled {
	border-color: #c8d2e4;
	color: #c8d2e4;
}

.btn-outline-darkgray {
	border: 1px solid #667085;
	background: #fff;
	color: #242933;
}
.btn-outline-darkgray:hover {
}
.btn-outline-darkgray:active {
}
.btn-outline-darkgray:disabled {
	border-color: #c8d2e4;
	color: #c8d2e4;
}

.btn-outline-green {
	border: 1px solid #15a46e;
	background: #fff;
	color: #15a46e;
}
.btn-outline-green:hover {
}
.btn-outline-green:active {
}
.btn-outline-green:disabled {
	border-color: #d9dee7;
	color: #ccd3df;
}

.btn-error {
	background: #f04438;
	color: #fff;
}
.btn-error:hover {
	background: #d92d20;
}
.btn-error:active {
	background: #d92d20;
}
.btn-error:disabled {
	background: #fda29b;
}

/* 텍스트 */
.btn-text {
	font-weight: 500;
	text-decoration: underline;
}

/* 아이콘 */
.btn-del {
	width: 12px;
	height: 12px;
	font-size: 0;
	background: url(/assets/images/icon/ic_close.png) no-repeat;
}
.btn-del-circle {
	width: 16px;
	height: 16px;
	font-size: 0;
	background: url(/assets/images/icon/ic_close_circle.png) no-repeat;
}

/* 아이콘+텍스트 (가로) */
.btn.ic_search::before {
	content: '';
	display: inline-block;
	vertical-align: text-top;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	background: url(/assets/images/icon/ic_search.png) no-repeat center;
}
.btn.ic_add::before {
	content: '';
	display: inline-block;
	position: relative;
	top: -2px;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-right: 4px;
	background: url(/assets/images/icon/ic_add.png) no-repeat center;
}

/* 아이콘+텍스트 (세로) */
.btn-add {
	width: 100px;
	height: 100px;
	border-radius: 12px;
	border: 1px dashed #828b9c;
	background: #fff;
	color: #828b9c;
	font-size: 14px;
}
.btn-add::before {
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	margin: 0px auto 4px;
	background: url(/assets/images/icon/ic_more.png) no-repeat center;
}
a.btn-add {
	display: inline-block;
	text-align: center;
	padding-top: 22px;
}

/* ---------------------------
	badge (tag)
--------------------------- */

.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 16px;
	text-align: center;
	border: 1px solid #828b9c;
	color: #828b9c;
}
.badge + .badge {
	margin-left: 4px;
}
.badge.style2 {
	color: #15a46e;
	border-color: #15a46e;
}
.badge.style3 {
	color: #15a46e;
	border-color: #d9f1e6;
	background-color: #d9f1e6;
}
.badge.style4 {
	color: #f04452;
	border-color: #ffd9d9;
	background-color: #ffd9d9;
}
.badge.style5 {
	color: #fff;
	border-color: #3b414b;
	background-color: #3b414b;
}
.badge.style6 {
	color: #fff;
	border-color: #828b9c;
	background-color: #828b9c;
}
.badge.style7 {
	color: #828b9c;
	border-color: #d9dee7;
	background-color: #d9dee7;
}

/* ---------------------------
	form 
--------------------------- */

/* input */
input[type='text'],
input[type='password'] {
	height: 44px;
	padding: 0px 16px;
	border-radius: 4px;
	border: 1px solid #d9dee7;
	background: #fff;
}
input[type='text']:focus,
input[type='password']:focus {
	outline: none;
	border-color: #0f131c;
}
input[type='text']:disabled,
input[type='password']:disabled {
	color: #98a2b3;
	background-color: #eaecf0;
}
input[type='text']:read-only,
input[type='password']:read-only {
	background-color: #f9fafb;
}
input[type='text'].jp-date-input:read-only {
	background-color: #fff;
	color: inherit;
	cursor: pointer;
}
input[type='text'].error,
input[type='password'].error {
	border-color: #cb1f1a !important;
}
::placeholder {
	color: #828b9c;
	opacity: 1; /* Firefox */
}
::-ms-input-placeholder {
	color: #828b9c;
} /* IE10-11 */
:-ms-input-placeholder {
	color: #828b9c;
} /* IE10 */

/* textarea */
textarea {
	display: block;
	width: 100%;
	height: 120px;
	padding: 16px;
	outline: none;
	resize: none;
	border-radius: 8px;
	border: 1px solid #ccd3df;
	background: #fff;
}
/* textarea 카운터 */
.textarea-wrap .inp-counter {
	display: block;
	margin-top: 8px;
	text-align: right;
}
.textarea-wrap .inp-counter > em {
	color: #15a46e;
}

/* custom checkbox */
.checkbox {
	position: relative;
	padding-left: 20px;
}
.checkbox .checkmark {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -10px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border: 2px solid #c8d2e4;
	border-radius: 2px;
	background-color: #fff;
}
.checkbox .checkmark:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 2px;
	width: 12px;
	height: 7px;
	border: 2px solid #8694b1;
	border-top: none;
	border-right: none;
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity: 0;
}
.checkbox input[type='checkbox'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.checkbox .label-text {
	margin-left: 8px;
}

.checkbox input[type='checkbox']:checked + .checkmark {
	background-color: #252b37;
	border-color: #252b37;
}
.checkbox input[type='checkbox']:checked + .checkmark:after {
	opacity: 1;
	border-color: #fff;
}
.checkbox input[type='checkbox']:disabled + .checkmark {
	background-color: #e1e6ee;
	border-color: #d9dee7;
}
.checkbox input[type='checkbox']:disabled ~ .label-text {
	color: #ccd3df;
}
.checkbox input[type='checkbox']:disabled ~ .label-text:after {
	cursor: default;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/* custom radio */
.radio {
	position: relative;
	padding-left: 20px;
}
.radio .checkmark {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -10px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border: 2px solid #c8d2e4;
	border-radius: 50%;
	background-color: #fff;
}
.radio .checkmark:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #252b37;
	opacity: 0;
}
.radio input[type='radio'] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.radio input[type='radio']:checked + .checkmark {
	border-color: #252b37;
}
.radio input[type='radio']:checked + .checkmark:after {
	opacity: 1;
}
.radio .label-text {
	margin-left: 6px;
	vertical-align: middle;
}

/* custom radio - 버튼형 */
.radio-btn {
	text-align: center;
}
.radio-btn + .radio-btn {
	margin-left: 8px;
}
.radio-btn label {
	display: block;
	padding: 10px 16px;
	border-radius: 4px;
	border: 1px solid #c8d2e4;
	background: #fff;
}
.radio-btn input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.radio-btn input:checked + label {
	border-color: #242933;
	outline: 1px solid #242933;
}

/* switch */
.switch {
	display: inline-block;
	vertical-align: middle;
}
.switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.switch .slider {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
	background-color: #828b9c;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 1000px;
}
.switch .slider:before {
	position: absolute;
	content: '';
	height: 16px;
	width: 16px;
	left: 2px;
	top: 50%;
	margin-top: -8px;
	background-color: #fff;
	transition: 0.4s;
	border-radius: 50%;
}

.switch input:checked + .slider {
	background-color: #0d8d5d;
}
.switch input:checked + .slider:before {
	left: 22px;
}

.switch input:disabled + .slider {
	cursor: default;
	background-color: #eeeeee;
}
.switch input:disabled + .slider:before {
	box-shadow: none;
	background-color: #e0e0e0;
}

/* select */
.select {
	width: 200px;
	height: 44px;
	display: inline-block;
	position: relative;
}
.select select {
	width: 100%;
	height: 100%;
	padding: 0px 16px;
	border-radius: 4px;
	border: 1px solid #d9dee7;
	background: #fff;
	outline: none;
	-webkit-appearance: none; /* chrome, safari */
	-moz-appearance: none; /* firefox */
	appearance: none;
}
.select select::-ms-expand {
	display: none;
}
.select:after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	margin-top: -3px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #828b9c;
	pointer-events: none;
}
.select select:disabled {
	color: #ccd3df;
	background-color: #f4f6f9;
}

/* ---------------------------
	datepicker 
--------------------------- */

/* 단일 */
.inp-date-wrap {
	display: flex;
	align-items: center;
}
.inp-date-wrap input {
	width: 200px;
	background: url(/assets/images/icon/ic_cal.png) no-repeat center right 16px #fff;
}
.inp-date-wrap .date-separator {
	margin: 0px 6px;
}

/* set */
.date-set {
	display: inline-flex;
	align-items: center;
}
/* 기간 */
.date-shortcuts {
	display: flex;
	align-items: center;
}
.date-shortcuts .radio-box label {
	display: inline-block;
	padding: 10px 16px;
}
.inp-date-wrap + .date-shortcuts,
.date-shortcuts + .inp-date-wrap {
	margin-left: 12px;
}

.date-time {
	display: flex;
	align-items: center;
}
.date-time .select {
	width: 100px;
}
.date-time .select + .select {
	margin-left: 8px;
}
.inp-date-wrap + .date-time {
	margin-left: 16px;
}

/* ---------------------------
	filters 
--------------------------- */

.filters {
	padding: 16px;
	border-radius: 4px;
	border: 1px solid #e0e6f1;
	background: #f7f9fd;
}

.filter-table {
	width: 100%;
	font-size: 16px;
}

.filter-table.rows {
	border-collapse: separate;
	border-spacing: 0px 12px;
	margin: -12px 0px;
}
.filter-table tr {
	height: 38px;
}
.filter-table th,
.filter-table td {
	font-weight: normal;
	vertical-align: middle;
}

.filter-table tr:first-child th,
.filter-table th {
	text-align: left;
	white-space: nowrap;
	color: #0f131c;
	font-weight: 500;
}

.filter-table .cell-fit {
	width: 1%;
	white-space: nowrap;
}

.filter-table .filter-header th,
.filter-table .filter-header td {
	padding-bottom: 12px;
	border-bottom: 1px solid #e0e6f1;
}

.filter-actions {
	font-size: 0;
	text-align: right;
}
.filter-actions .btn {
	vertical-align: middle;
	margin-left: 8px;
}

/* in modal */
.modal .filters {
	padding: 8px;
}
.modal .filter-table tr {
	height: auto;
}
.modal .filters input[type='text'] {
	height: 30px;
	font-size: 14px;
	padding: 0 10px;
}
.modal .filter-actions .btn {
	font-size: 14px;
	margin-left: 6px;
}
.modal .filters .select {
	width: 140px;
	height: 30px;
	font-size: 14px;
	margin-right: 6px;
}

/* ---------------------------
	selection list 
--------------------------- */

.selection-list {
	font-size: 0;
}
.selection-list > li {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
}

/* chip */
.selection-list.type-chip {
	margin: -4px -10px;
}
.selection-list.type-chip > li {
	margin: 4px 10px;
	padding-right: 20px;
	font-size: 14px;
}
.selection-list.type-chip .btn-del-circle {
	position: absolute;
	right: 0;
	top: 2px;
}

/* box */
.selection-list.type-box {
	margin: -6px;
}
.selection-list.type-box > li {
	padding: 10px 16px;
	margin: 6px;
	border-radius: 4px;
	border: 1px solid #4ed395;
	background: #e7f9f0;
	color: #007a4d;
	font-weight: 500;
	font-size: 16px;
}
.selection-list.type-box .btn-del {
	display: inline-block;
	vertical-align: top;
	margin-left: 16px;
	margin-top: 4px;
}

/* ---------------------------
	tab 
--------------------------- */

.tabs {
	font-size: 0;
	margin-bottom: 40px;
	border-bottom: 1px solid #ccd3df;
}
.tab {
	height: 50px;
	padding: 0px 20px;
	border-bottom: 2px solid transparent;
	font-size: 18px;
	font-weight: 700;
	color: #828b9c;
}
.tab.active {
	color: #242933;
	border-color: #242933;
}
.tab-panel {
	display: none;
}
.tab-panel.active {
	display: block;
}

.tabs.tabs-sm {
	margin-bottom: 16px;
}
.tabs.tabs-sm .tab {
	height: 44px;
	font-size: 16px;
}

/* ---------------------------
	table 공통
--------------------------- */

/* header */
.table-header {
	position: relative;
	margin-bottom: 16px;
}

.table-header .table-info {
	font-size: 0;
}
.table-header .table-info .total {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7; /* 34px */
}
.table-header .table-info .status-list {
	display: inline-block;
	margin-left: 12px;
	font-size: 16px;
	color: #667085;
}
.table-header .table-info .status-list::before {
	content: '(';
	display: inline;
}
.table-header .table-info .status-list::after {
	content: ')';
	display: inline;
}
.table-header .table-info .status-list li {
	position: relative;
	display: inline-block;
	padding: 0px 8px;
}
.table-header .table-info .status-list li:after {
	content: '';
	position: absolute;
	right: -1px;
	top: 50%;
	margin-top: -6px;
	width: 1px;
	height: 12px;
	background-color: #d9dee7;
}
.table-header .table-info .status-list li:last-child:after {
	display: none;
}
.table-header .table-info .status-list em {
	font-weight: 500;
	color: #242933;
}

.table-header .table-actions {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* footer */
.table-footer {
	position: relative;
	margin-top: 16px;
}
.table-footer .select {
	position: absolute;
	left: 0;
	top: 0;
	width: 110px;
}
.table-pagination {
	height: 44px;
	line-height: 44px;
	padding-left: 110px;
	font-size: 0;
	text-align: center;
}
.table-footer.no-select .table-pagination {
	padding-left: 0;
}
.table-pagination button {
	margin-right: 6px;
	width: 30px;
	height: 30px;
	line-height: 1;
	border-radius: 50%;
	font-size: 16px;
	vertical-align: middle;
}
.table-pagination button:last-child {
	margin-right: 0;
}
.table-pagination button:hover {
	background-color: #e1e6ee;
}
.table-pagination button.current {
	color: #fff;
	background-color: #242933;
}
.table-pagination button.first,
.table-pagination button.prev,
.table-pagination button.next,
.table-pagination button.last {
	font-size: 0;
	background-size: 16px 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
.table-pagination button.first {
	background-image: url(/assets/images/icon/ic_page_first.png);
}
.table-pagination button.prev {
	background-image: url(/assets/images/icon/ic_page_prev.png);
}
.table-pagination button.next {
	background-image: url(/assets/images/icon/ic_page_next.png);
}
.table-pagination button.last {
	background-image: url(/assets/images/icon/ic_page_last.png);
}

/* ---------------------------
	table - data table
--------------------------- */

/* content */
.table .table-content {
	position: relative;
}
.table .table-content:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: 1px solid #242933;
}

.table table {
	width: 100%;
	table-layout: fixed;
}
.table thead tr {
	background-color: #f4f6f9;
}
.table tbody tr:nth-child(even) {
	background: rgba(237, 241, 247, 0.4);
}
.table tbody tr:hover {
	background-color: #e1e6ee;
}
.table tbody tr.empty:hover {
	background-color: transparent;
}
.table tbody tr.total {
	background-color: #ecf0f4;
}
.table th,
.table td {
	height: 60px;
	padding: 10px 6px;
	border: 1px solid #d9dee7;
	text-align: center;
}
.table tr:first-child th,
.table tr:first-child td {
	border-top: 0;
}
.table th {
	word-break: keep-all;
	font-weight: 500;
	color: #0f131c;
}
.table th .btn-sort {
	padding-right: 32px;
	background: url(/assets/images/icon/ic_sort.png) no-repeat right center;
	background-size: 24px 24px;
}
.table th.is-asc .btn-sort {
	background-image: url(/assets/images/icon/ic_sort_asc.png);
}
.table th.is-desc .btn-sort {
	background-image: url(/assets/images/icon/ic_sort_desc.png);
}
.table td a {
	text-decoration: underline;
}

/* 검색조건 뒤에 오는 테이블 간격 */
.filters + .table {
	margin-top: 40px;
}

/* 미리보기 테이블 */
.table.sample .table-content:before {
	border-color: #d9dee7;
}
.table.sample th,
.table.sample td {
	height: 48px;
}

/* ---------------------------
	table - information table
--------------------------- */

.info-table {
	text-align: left;
}

.info-table .table-content table {
	width: 100%;
	table-layout: fixed;
}
.info-table .table-content {
	position: relative;
}
.info-table .table-content:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: 1px solid #242933;
}

.info-table tr {
	height: 60px;
}
.info-table th,
.info-table td {
	padding: 12px;
	border: 1px solid #d9dee7;
}
.info-table tr:first-child th,
.info-table tr:first-child td {
	border-top: 0;
}
.info-table th {
	font-weight: 500;
	background-color: #f4f6f9;
}
.info-table td a {
	text-decoration: underline;
}

/* ---------------------------
	chart 
--------------------------- */

.chart-color1 {
	background: #4ed395;
}
.chart-color2 {
	background: #7bbc35;
}
.chart-color3 {
	background: #2098f3;
}
.chart-color4 {
	background: #9c65d7;
}
.chart-color5 {
	background: #667085;
}
.chart-color6 {
	background: #7875ff;
}
.chart-color7 {
	background: #ffbe3c;
}
.chart-color8 {
	background: #39506c;
}

.chart-color-a1 {
	background: #ecf0f4;
}
.chart-color-a2 {
	background: #c7f2db;
}
.chart-color-a3 {
	background: #4ed395;
}

.chart .chart-summary .label {
	font-size: 18px;
	font-weight: 500;
}
.chart .chart-summary .total {
	display: block;
	margin-top: 4px;
	color: #15a46e;
	font-size: 20px;
}

.chart .stacked-bar {
	height: 80px;
	margin: 12px 0px;
	border-radius: 4px;
	overflow: hidden;
	background: #F4F6F9;
}
.chart .segment {
	float: left;
	height: 100%;
}

.chart .legend-item {
	display: inline-block;
	font-size: 0;
}
.chart .legend-item + .legend-item {
	margin-left: 32px;
}
.chart .legend-item .dot {
	display: inline-block;
	vertical-align: top;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 50%;
}
.chart .legend-item .name {
	margin-right: 12px;
	color: #0f131c;
	font-size: 16px;
	font-weight: 500;
}
.chart .legend-item .value {
	font-size: 16px;
}
.chart .legend-item .percent {
	margin-left: 4px;
	color: #667085;
	font-size: 16px;
}
/* 세로 */
.chart .chart-legend.vertical .legend-item {
	display: block;
}
.chart .chart-legend.vertical .legend-item + .legend-item {
	margin-left: 0px;
	margin-top: 12px;
}

/* ---------------------------
	box 
--------------------------- */

.box {
	border: 1px solid #d9dee7;
	background-color: #fff;
}
.box.type1 {
	padding: 48px 40px;
	border-radius: 4px;
}
.box.type2 {
	border-radius: 12px;
}
.box.type3 {
	padding: 28px 20px;
	border-radius: 8px;
}
.box.type4 {
	padding: 24px 20px;
	border-radius: 8px;
}
.box.type5 {
	padding: 32px;
	border-radius: 12px;
}

/* title */
.box-tit {
	margin-bottom: 24px;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}

/* ---------------------------
	card 
--------------------------- */

.card {
	padding: 32px;
	border-radius: 12px;
	background-color: #f4f6f9;
}
.card-wrap .card + .card {
	margin-top: 20px;
}

/* ---------------------------
	panel 
--------------------------- */

/* header */
.panel-header {
	position: relative;
	height: 60px;
	line-height: 60px;
	padding: 0px 32px;
	color: #fff;
	background-color: #667085;
}
.panel-header .panel-tit {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	vertical-align: middle;
}
.panel-header .btn-edit {
	display: inline-block;
	vertical-align: text-top;
	margin-left: 8px;
	font-size: 0;
	width: 24px;
	height: 24px;
	background: url(/assets/images/icon/ic_edit_24.png) center no-repeat;
}
.panel-header .select {
	display: inline-block;
	vertical-align: middle;
	margin-left: 24px;
	line-height: 1.5;
}
.panel-actions {
	position: absolute;
	right: 32px;
	top: 0;
}
.panel-actions button {
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}
.panel-actions .btn-toggle:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	background: url(/assets/images/icon/ic_down_w.png) no-repeat center right;
}
.panel.open .btn-toggle:after {
	transform: rotate(180deg);
	margin-top: -4px;
}

/* body */
.panel-body {
	padding: 32px;
	background-color: #f4f6f9;
}

/* ---------------------------
	overlay 
--------------------------- */

.overlay {
	z-index: 100;
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
}
.overlay.open {
	display: block;
}

/* ---------------------------
	modal 
--------------------------- */

.modal {
	z-index: 1000;
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 560px;
	padding: 24px;
	border-radius: 8px;
	border: 1px solid #eaecf0;
	background: #fff;
	box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12);
}
.modal.no-header {
	padding: 36px 36px 24px;
}
.modal.open {
	display: block;
}
.modal-header {
	position: relative;
	padding-bottom: 12px;
}
.modal-header h3 {
	font-size: 20px;
	font-weight: 700;
}
.modal-header .close-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 28px;
	margin-left: auto;
	background: url(/assets/images/icon/ic_close_line.png) no-repeat center center;
	font-size: 0;
}
.modal-content {
	margin: 20px 0px;
}
.modal.no-header .modal-content {
	margin: 0px 0px 20px 0px;
}
.modal-content > p {
	font-size: 16px;
	line-height: 1.5;
}
.modal-highlight {
	margin-bottom: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
}

.modal-footer {
	font-size: 0;
	text-align: right;
}
.modal-footer > button {
	vertical-align: middle;
}
.modal-footer > button + button {
	margin-left: 8px;
}

/* 스크롤 (기본 전체) */
/* scroll body */
.modal.modal-body-scroll {
	flex-direction: column;
}
.modal.open.modal-body-scroll {
	display: flex;
}
.modal.modal-body-scroll .modal-content {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(90vh - 200px);
}

/* modal size */
.modal-wide {
	width: 80%;
}
.modal-lg {
	width: 1000px;
}
.modal-md {
	width: 680px;
}

/* 테이블 */
.modal .table {
	font-size: 14px;
}
.modal .table-header {
	margin-bottom: 8px;
}
.modal .table-header .table-info .total {
	font-size: 14px;
	font-weight: 500;
}
.modal .table th {
	height: 46px;
}

/* ---------------------------
	toast 
--------------------------- */

.toast {
	display: none;
	position: fixed;
	bottom: 60px;
	left: 20px;
	right: 20px;
	padding: 24px;
	text-align: center;
	color: #007a4d;
	border: 1px solid #49cc93;
	border-radius: 8px;
	background: #e7f9f0;
}
.toast.open {
	display: block;
}
.toast.error {
	color: #cb1f1a;
	border-color: #ffa594;
	background-color: #fcf0ed;
}
.toast .msg {
	display: inline-block;
	padding-left: 32px;
	line-height: 1.5;
	font-weight: 500;
	background: url(/assets/images/icon/ic_success.png) no-repeat left center;
}
.toast.error .msg {
	background-image: url(/assets/images/icon/ic_error.png);
}

/* ===================================================================
	04. utility (짧은 보조)
	- .mt10 .mb20 .text-center .hidden 등
=================================================================== */

/* ---------------------------
	margin, padding
--------------------------- */

.mt8 {
	margin-top: 8px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt24 {
	margin-top: 24px !important;
}
.mt40 {
	margin-top: 40px !important;
}

.mb8 {
	margin-bottom: 8px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb24 {
	margin-bottom: 24px !important;
}

.ml8 {
	margin-left: 8px !important;
}
.ml16 {
	margin-left: 16px !important;
}
.ml28 {
	margin-left: 28px !important;
}

.pt0 {
	padding-top: 0 !important;
}

/* ---------------------------
	float 해제 
--------------------------- */

.clear:after {
	content: '';
	display: block;
	clear: both;
}

/* ---------------------------
	긴 글 생략 
--------------------------- */

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------------------------
	word break
--------------------------- */

.word-break-all {
	word-break: break-all;
}

/* ---------------------------
	screen reader only 
--------------------------- */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0); /* IE9 지원 */
	border: 0;
}

/* ---------------------------
	display
--------------------------- */

.block {
	display: block;
	width: 100%;
}

/* ---------------------------
	line
--------------------------- */

.line {
	height: 1px;
	margin: 20px 0px;
	background-color: #d9dee7;
}

/* ---------------------------
	한 줄 정렬
--------------------------- */

.row-item-wrap {
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0;
	padding-bottom: 32px;
}
.row-item-wrap .row-item {
	display: inline-block;
	vertical-align: middle;
}

/* ---------------------------
	text 
--------------------------- */

/* align */
.text-left {
	text-align: left;
}
.text-right {
	text-align: right !important;
}
.text-center {
	text-align: center;
}

/* color */
.text-default {
	color: #242933;
}
.text-primary {
	color: #15a46e !important;
}
.text-warning {
	color: #f04452 !important;
}
.text-guide {
	color: #667085 !important;
}
.text-disabled {
	color: #ccd3df !important;
}

/* font-weight */
.fw-400 {
	font-weight: 400 !important;
}
.fw-500 {
	font-weight: 500 !important;
}
.fw-700 {
	font-weight: 700 !important;
}

/* ---------------------------
	background color
--------------------------- */

.bg-gray {
	background-color: #f4f6f9;
}

/* ---------------------------
	컬럼 컨테이너
--------------------------- */
.cols::after {
	content: '';
	display: block;
	clear: both;
}
.cols > .col {
	float: left;
	box-sizing: border-box;
}

/* 분할 */
.cols-2 > .col {
	width: 50%;
}
.cols-3 > .col {
	width: 33.3333%;
}
.cols-4 > .col {
	width: 25%;
}

/* gap 20 */
.cols.gap-20 > .col {
	margin-bottom: 20px;
}
.cols.gap-20 > .col:nth-child(odd) {
	padding-right: 10px;
}
.cols.gap-20 > .col:nth-child(even) {
	padding-left: 10px;
}
.cols-2.gap-20 > .col:nth-last-child(-n + 2) {
	margin-bottom: 0;
}

/* ---------------------------
	width
--------------------------- */
.w1000 {
	max-width: 1000px;
}

/* ===================================================================
	05. ie (레거시 보정)
	- IE9 전용 보정
=================================================================== */