@charset "utf-8";

:root {
	--form-height: 38px;
	--btn-height: var(--form-height);
	--btn-hover-color: #fafafa;
	--pagination-size: 36px;

	--primary-color: #526698;
	--blue-color: #0080ea;
	--deep-blue-color: #3365c7;
	--warning-color: #ff5c77;
	--accent-color: var(--primary-color);
}

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

/* position */
.sticky {
	position: sticky !important;
	top: var(--header-height) !important;
	z-index: 2;
}
thead.sticky {
	top: calc(var(--header-height) - 2px) !important;
}

/* background */
.contain {
	background-size: contain !important;
}
.cover {
	background-size: cover !important;
}

/**
 *	섹션 & 그리드
 */
hr {
	margin: 60px 0;
	border-top: 1px dashed #ccc;
}
.section + .section {
	margin-top: 80px;
}
.section .section + .section {
	margin-top: 40px;
}

.row {
	display: flex;
	gap: 0 30px;
	/* margin-left: -20px;
	margin-right: -20px; */
}
.row + .row {
	margin-top: 30px;
}
.row-right {
	justify-content: flex-end;
}
.row-center {
	justify-content: center;
}
.row-no-gutters {
	/* 	margin-right: 0;
	margin-left: 0; */
	gap: 0;
}
.row-no-gutters [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}
/* .col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
	padding: 0 20px;
} */
.col-12 {
	flex: 0 0 auto;
	width: 100%;
}
.col-11 {
	flex: 0 0 auto;
	width: 91.66666667%;
}
.col-10 {
	flex: 0 0 auto;
	width: 83.33333333%;
}
.col-9 {
	flex: 0 0 auto;
	width: 75%;
}
.col-8 {
	flex: 0 0 auto;
	width: 66.66666667%;
}
.col-7 {
	flex: 0 0 auto;
	width: 58.33333333%;
}
.col-6 {
	flex: 0 0 auto;
	width: 50%;
}
.col-5 {
	flex: 0 0 auto;
	width: 41.66666667%;
}
.col-4 {
	flex: 0 0 auto;
	width: 33.33333333%;
}
.col-3 {
	flex: 0 0 auto;
	width: 25%;
}
.col-2 {
	flex: 0 0 auto;
	width: 16.66666667%;
}
.col-1 {
	/* flex: 0 0 auto; */
	width: 8.33333333%;
}
.col {
	flex: 1 0 auto;
	min-width: 0;
}

.col-offset-12 {
	margin-left: 100%;
}
.col-offset-11 {
	margin-left: 91.66666667%;
}
.col-offset-10 {
	margin-left: 83.33333333%;
}
.col-offset-9 {
	margin-left: 75%;
}
.col-offset-8 {
	margin-left: 66.66666667%;
}
.col-offset-7 {
	margin-left: 58.33333333%;
}
.col-offset-6 {
	margin-left: 50%;
}
.col-offset-5 {
	margin-left: 41.66666667%;
}
.col-offset-4 {
	margin-left: 33.33333333%;
}
.col-offset-3 {
	margin-left: 25%;
}
.col-offset-2 {
	margin-left: 16.66666667%;
}
.col-offset-1 {
	margin-left: 8.33333333%;
}
.col-offset-0 {
	margin-left: 0;
}

/**
 *	타이틀 & 텍스트 
 */
/* 타이틀 */
h2.contents-title {
	margin-bottom: 20px;
	/* color: #232323; */
	font-size: 24px;
	font-weight: 700;
}

h3.contents-title {
	margin-bottom: 13px;
	/* color: #154b9c; */
	font-size: 20px;
	font-weight: 600;
	position: relative;
}
h3.contents-title span {
	font-weight: 400;
}

h4.contents-title {
	margin-bottom: 12px;
	color: #3769ca;
	font-size: 18px;
	font-weight: 600;
	position: relative;
	/* padding-left: 18px; */
}

h5.contents-title {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	padding-left: 17px;
}
h5.contents-title::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 3px;
	width: 5px;
	height: 5px;
	background: #777;
	border-radius: 1.5px;
}

/* 기본 텍스트(검정색) */
.desc-text,
.text-desc {
	color: #333;
	margin-bottom: 0.8em;
}
div.desc-text,
div.text-desc,
p.desc-text,
p.text-desc {
}

/* 정보성 텍스트(파란색) */
.info-text,
.text-info {
	color: #4d80e3;
	font-weight: 500;
	margin-bottom: 0.8em;
}

/* 정보성/경고성 텍스트(빨간색) */
.warning-text,
.text-control,
.text-warning,
.control-info {
	color: var(--warning-color);
	font-weight: 500;
	margin: 0.4rem 0;
}
/* .control-info .star,
.text-control .star{position:relative;top:3px;margin-right:2px;} */

/* 상태 텍스트 */
.status-text-1 {
	color: #1b98f0;
}
.status-text-2 {
	color: #004f98;
}
.status-text-3 {
	color: #0f16ab;
}
.status-text-4 {
	color: #df1f7e;
}
.status-text-5 {
	color: #f32c56;
}
.status-text-6 {
	color: #3375fd;
}
.status-text-7 {
	color: #4249da;
}
.status-text-8 {
	color: #0ba6e0;
}
.status-text-9 {
	color: #05c5ac;
}
.status-text-10 {
	color: #01b768;
}
[class*="status-text"] {
	font-weight: 500;
}
a[class*="status-text"],
button[class*="status-text"] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 링크 */
.text-link {
	color: var(--deep-blue-color);
	font-size: inherit;
	font-weight: 500;
}

a.text-link:hover,
button.text-link:hover {
	color: var(--blue-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 필수항목 표시 */
.required,
.text-required {
	position: relative;
}
.required::before,
.text-required:before {
	content: "";
	position: absolute;
	left: -10px;
	top: 0;
	background: var(--warning-color);
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

/* 텍스트 여백 */
* + div.desc-text,
* + p.desc-text,
* + div.control-info,
* + p.control-info {
	margin-top: 5px;
}
* + span.desc-text,
* + span.control-info {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
}
/* .contents-title + .text-info{position:absolute;top:36px;right:40px;} */
table + .text-info {
	margin-top: 8px;
}

/**
 *	목록 
 */
.number-list {
	counter-reset: number-counter;
}
.dotted-list > li,
.dashed-list > li,
.number-list > li {
	position: relative;
	padding-left: 14px;
	color: #555;
	font-size: 15px;
	line-height: 1.5;
}
.number-list > li {
	padding-left: 23px;
}
.dotted-list > li + li,
.dashed-list > li + li,
.number-list > li + li {
	margin-top: 2px;
}
.dotted-list > li:before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 4px;
	height: 4px;
	background: #676666;
	border-radius: 50%;
}
.number-list > li:before,
.dashed-list > li:before {
	content: "-";
	position: absolute;
	top: 0;
	left: 0;
}
.number-list > li:before {
	content: counter(number-counter, decimal) ".";
	counter-increment: number-counter;
	width: 20px;
	text-align: center;
}
.dotted-list strong,
.dashed-list strong,
.number-list strong {
	font-weight: 500;
}
.dotted-list ul,
.dotted-list ol,
.dashed-list ul,
.dashed-list ol,
.number-list ul,
.number-list ol {
	margin-top: 3px;
}

/*=========================================================================================================================================*/
/**
 *	탭 
 */
/* 1depth 탭 */
.page-tab {
	margin-bottom: 40px;
}
.page-tab .tab-list {
	border-bottom: 1px solid rgb(229, 234, 239);
	display: flex;
}
.page-tab .tab-list li a,
.page-tab .tab-list li button {
	position: relative;
	display: block;
	width: 100%;
	min-width: 120px;
	padding: 0 20px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #666;
	border-radius: 5px;
}
.page-tab .tab-list li a:hover,
.page-tab .tab-list li button:hover {
	background: #f6f6f6;
}
.page-tab .tab-list li.on a,
.page-tab .tab-list li.on button {
	color: var(--primary-color);
	font-weight: 600;
}
.page-tab .tab-list li.on a::after,
.page-tab .tab-list li.on button::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
}
.page-tab .tab-list li.on a:hover,
.page-tab .tab-list li.on button:hover {
	background: rgba(0, 133, 219, 0.04);
}
.page-tab.tab-full li {
	flex: 1 1 100%;
}

/* 2depth 탭 (상위에 1depth 탭이 있을 경우) */
.contents-tab {
	margin-bottom: 40px;
}
.page-tab + .contents-tab {
	margin-top: -25px;
}
.contents-tab .tab-list {
	display: flex;
}
.contents-tab .tab-list li {
	margin-right: 20px;
}
.contents-tab .tab-list li a {
	position: relative;
	display: block;
	color: rgba(81, 81, 81, 0.7);
	font-size: 15px;
}
.contents-tab .tab-list li a:hover,
.contents-tab .tab-list li.on a {
	color: #515151;
	font-weight: 600;
	/* text-decoration: underline; */
	/* text-underline-offset: 4px; */
}

/*=========================================================================================================================================*/
/** 
 *  버튼
 *	.btn: 버튼 기본 클래스
 */
.btn {
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 82px;
	height: var(--btn-height);
	padding: 0 15px;
	border: 1px solid currentColor;
	border-radius: 4px !important;
	background: #fff;
	color: #4c4c4c;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	box-shadow: none !important;
	cursor: pointer;
}
.btn:hover {
	background: var(--btn-hover-color);
}
.btn.no-radius {
	border-radius: 0 !important;
}
.btn[disabled] {
	opacity: 0.6;
	cursor: default;
}
.btn:not(.btn-icon) i {
	float: left;
	line-height: var(--btn-height); /* margin-top:1px; */
	margin-right: 8px;
}
.btn:not(.btn-icon) span ~ i {
	float: right;
	margin-right: 0;
	margin-left: 8px;
}
/* 아이콘 버튼 */
.btn.btn-icon {
	min-width: 36px;
	padding: 0 10px;
	border-color: #d6dae0;
	color: var(--primary-color);
}
.btn.btn-icon i {
	font-size: 16px;
}
/* 색상 */
.btn.complete,/* 완료 */
.btn.regist,/* 등록 */
.btn.save,/* 저장 */
.btn.confirm {
	color: #5071ef;
} /* 적용, 확인 */
.btn.list {
	color: #0285c3;
} /* 목록 */
.btn.close, /* 닫기 */
.btn.delete, /* 삭제 */
.btn.cancel {
	color: var(--warning-color);
} /* 취소 */
.btn.update, /* 수정 */
.btn.modify {
	color: #3263c8;
} /* 변경 */
.btn.create,/* 생성 */
.btn.add {
	color: #109b6f;
} /* 추가 */
.btn.search {
	color: #737e9a;
} /* 조회, 찾기 */
.btn.excel {
	color: #009688;
} /* 엑셀 다운로드 */
.btn.excel-upload {
	color: #52ac8d;
} /* 엑셀 업로드 */
.btn.print, /* 출력 */
.btn.view {
	color: #28469e;
} /* 전체보기 */
.btn.kakao {
	background: #ffe20a;
	color: #353535 !important;
	border: 0;
	font-weight: 500;
} /* 카카오톡 */
.btn.facebook {
	background: #4160b4;
	color: #fff;
	border: 0;
	font-weight: 500;
} /* 페이스북 */
.btn.twitter {
	background: #000;
	color: #fff;
	border: 0;
	font-weight: 500;
} /* 트위터 */
.btn.naver {
	background: #30ba2c;
	color: #fff;
	border: 0;
	font-weight: 500;
} /* 네이버 */
.btn.youtube {
	background: #d62b26;
	color: #fff;
	border: 0;
	font-weight: 500;
} /* 유튜브 */
.btn.instagram {
	background: #ee3471;
	color: #fff;
	border: 0;
	font-weight: 500;
} /* 인스타그램 */
.btn.kakao::before,
.btn.facebook::before,
.btn.twitter::before,
.btn.naver::before {
	content: "";
	margin-right: 10px;
	float: left;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}
.btn.kakao::before {
	width: 21px;
	background-image: url("../../../../images/onion/cms/cmm/icon_kakao.png");
}
.btn.facebook::before {
	width: 10px;
	background-image: url("../../../../images/onion/cms/cmm/icon_facebook.png");
}
.btn.twitter::before {
	width: 19px;
	background-image: url("../../../../images/onion/cms/cmm/icon_twitter.svg");
}
.btn.naver::before {
	width: 14px;
	background-image: url("../../../../images/onion/cms/cmm/icon_naver.png");
}
.btn.youtube::before,
.btn.instagram::before {
	display: inline-block;
	font-family: "Font Awesome 6 Brands";
	margin-right: 10px;
	margin-top: 2px;
	font-size: 120%;
	vertical-align: middle;
}
.btn.youtube::before {
	content: "\f167";
}
.btn.instagram::before {
	content: "\f16d";
}
.btn.etc {
	color: #766fe5;
} /* 기타1 */
.btn.etc2 {
	color: #b072ea;
} /* 기타2 */
.btn.etc3 {
	color: #e673b9;
} /* 기타3 */
.btn.etc4 {
	color: #1ec3c1;
} /* 기타4 */
.btn.etc5 {
	color: #9dc424;
} /* 기타5 */
.btn.etc6 {
	color: #777;
} /* 기타6 */
.btn.etc7 {
	color: #444;
} /* 기타7 */
.btn.etc8 {
	color: #e48a32;
} /* 기타8 */
.btn.etc9 {
	color: #3b75ed;
} /* 기타9 */
.btn.etc10 {
	color: #13b884;
} /* 기타10 */

/* 아이콘만 있는 버튼 */
.btn-util {
	font-size: 22px;
	color: var(--primary-color);
	line-height: 1;
	vertical-align: middle;
	margin: 0 3px;
}
.btn-util:hover {
	color: #4d80e3;
}
.btn-util .fa-caret-up {
	margin-top: 2px;
}
.btn-util .fa-caret-down {
	margin-bottom: 2px;
}

/* 파일 다운로드 */
.btn-download {
	width: 25px;
	height: 25px;
	border: 1px solid #ccc;
	font-size: 14px;
	background: #fff;
	line-height: 23px;
	color: #888;
	border-radius: 3px;
	text-align: center;
}
a.btn-download {
	display: inline-block;
}

/* 버튼 로딩중 */
.btn.loading {
	opacity: 0.75;
	position: relative;
	font-size: 0;
	pointer-events: none;
}
.btn.loading i {
	display: none;
}
.btn.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-left-color: currentColor;
	border-top-color: currentColor;
	border-right-color: currentColor;
	animation: spin 1s infinite ease-in-out;
	vertical-align: top;
	translate: -50% -50%;
}

/* 페이지 로딩중 */
.loader {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	text-ailgn: center;
	background: rgba(0, 0, 0, 0.45);
}
.loader .spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: 65px;
	height: 65px;
	translate: -50% -50%;
	border: 7px solid #40518d;
	border-radius: 50%;
	border-top-color: #e8f2fe;
	animation: spin 1s ease infinite;
}
.loader .text {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% 50px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
}

/*=========================================================================================================================================*/
/** 
 *  버튼 그룹
 *	.btn-group: 버튼 그룹 기본 클래스
 *	.btn-group .left-group: 왼쪽 정렬 버튼 그룹
 *	.btn-group .right-group: 오른쪽 정렬 버튼 그룹
 *	.btn-group .center-group: 중앙 정렬 버튼 그룹
 */
.btn-group {
	display: table;
	width: 100%; /* table-layout:fixed; */
	margin-top: 20px;
}
.btn-group.top {
	margin-top: 0;
	margin-bottom: 10px;
}
.btn-group + .btn-group {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #a8a8a8;
}

.btn-group [class$="group"] {
	display: table-cell;
	vertical-align: middle;
}
.btn-group .left-group {
	text-align: left;
}
.btn-group .right-group {
	text-align: right;
}
.btn-group .center-group {
	text-align: center;
}
.btn-group .left-group a,
.btn-group .left-group .btn {
	margin-right: 6px;
}
.btn-group .right-group a,
.btn-group .right-group .btn {
	margin-left: 6px;
}
.btn-group .center-group a,
.btn-group .center-group .btn {
	margin: 0 3px;
}

/* .board-list + .btn-group{margin-bottom:-62px;} */
.pagination + .btn-group,
.dataTables_wrapper + .btn-group {
	margin-top: -38px;
}
.dataTables_wrapper + .btn-group .btn,
.dataTables_wrapper + .btn-group button,
.dataTables_wrapper + .btn-group a {
	position: relative;
}

/*=========================================================================================================================================*/
/** 
 *	폼요소
 */
div.form-control {
	width: 100%;
	max-width: 100%;
}
div.form-control:not(.horizonal) + div.form-control:not(.horizonal) {
	margin-top: 5px;
}
div.form-control .inp-text,
div.form-control .inp-file,
div.form-control .sel {
	width: 100%;
}

span.form-control {
	display: inline-block;
	max-width: 100%;
	margin: 5px 15px 5px 0;
	vertical-align: middle;
}
span.form-control:last-child {
	margin-right: 0;
}
.lbl + span.form-control {
	margin-left: 5px;
}
span.form-control .text + .inp-text,
span.form-control .text + .sel,
span.form-control .lbl + .inp-text,
span.form-control .lbl + .sel {
	margin-left: 4px;
}
span.form-control .inp-text + .text,
span.form-control .sel + .text {
	margin-left: 3px;
}
span.form-control .bul {
	margin: 0 5px;
}
span.form-control .btn + .btn {
	margin-left: 3px;
}
/* span.form-control .inp-text + .btn{margin-left:6px;} */
span.form-control .text {
	vertical-align: middle;
	line-height: 28px;
	font-weight: 500;
}
span.form-control .text + .text {
	margin-left: 20px;
}
span.form-control .text strong {
	/* font-size:14px; */
	font-weight: 500;
	margin-right: 3px;
}
.bul {
	font-size: 14px;
	font-weight: 500;
	margin: 0 2px;
	vertical-align: middle;
}

.form-control.horizonal {
	display: inline-block;
	width: auto;
	margin: 2px 5px 2px 0;
	vertical-align: middle;
}
.form-control.no-radius * {
	border-radius: 0 !important;
}
.form-control.control-center {
	margin-left: auto;
	margin-right: auto;
}

/* 버튼이 있는 폼요소 */
div.form-control.with-btn {
	position: relative;
	padding-right: 94px;
}
div.form-control.with-btn .btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	padding-left: 0;
	padding-right: 0;
	margin-right: 0;
}
div.form-control.with-btn-search {
	position: relative;
	padding-right: 115px;
}
div.form-control.with-btn-search .btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 110px;
	padding-left: 0;
	padding-right: 0;
}
div.form-control .btn {
	margin-right: 3px;
}

/* 아이콘과 함께 있는 폼요소 */
div.form-control.with-icon {
	display: flex;
	align-items: center;
}
div.form-control.with-icon i {
	flex: 0 0 auto;
	color: var(--primary-color);
	font-size: 22px;
}
div.form-control.with-icon i.fa-level-up-alt {
	flex-basis: 40px;
}
div.form-control.with-icon .inp-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* 날짜 아이콘이 있는 폼요소 */
.form-control.date {
	position: relative;
	width: 147px;
	padding-right: 27px;
}
/* .form-control.date .inp-text{text-align:center;} */
.form-control.date img {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -12px;
	cursor: pointer;
}

/* 이메일 */
div.form-control.email {
	*zoom: 1;
}
div.form-control.email::after {
	content: "";
	display: block;
	clear: both;
}
div.form-control.email .inp-text {
	float: left;
	width: 32%;
}
div.form-control.email .email-at {
	float: left;
	width: 5%;
	height: 100%;
	margin-top: 7px;
	text-align: center;
}
div.form-control.email select {
	float: left;
	width: 30%;
	margin-left: 1%;
}
div.form-control.email.no-select .inp-text {
	width: 47%;
}
div.form-control.email.no-select .email-at {
	width: 6%;
}

/* 전화번호 */
div.form-control.phone {
	*zoom: 1;
}
div.form-control.phone::after {
	content: "";
	display: block;
	clear: both;
}
div.form-control.phone select {
	float: left;
	width: 30%;
}
div.form-control.phone .phone-bar {
	float: left;
	width: 5%;
	height: 100%;
	margin-top: 6px;
	font-size: 20px;
	text-align: center;
	line-height: 1;
}
div.form-control.phone .inp-text {
	float: left;
	width: 30%;
}

/** form-control 크기 **/
.form-control.number {
	width: 75px;
}
.form-control.xsmall {
	width: 120px;
}
.form-control.small {
	width: 240px;
}
.form-control.medium {
	width: 360px;
}
.form-control.large {
	width: 480px;
}
.form-control.xlarge {
	width: 600px;
}

/* 라벨이 있는 폼요소 */
.form-control.with-label {
	position: relative;
	padding-left: 60px;
}
.form-control.with-label .lbl {
	position: absolute;
	left: 0;
	top: 50%;
	width: 60px;
	color: #3f3f3f;
	font-size: 14px;
	font-weight: 500;
	transform: translateY(-50%);
}
.form-control.with-label .rdo + .lbl,
.form-control.with-label .chk + .lbl {
	position: static;
	width: auto;
	font-weight: 400;
}
/* 라벨이 길 경우 */
.form-group.label .form-control {
	position: relative;
	padding-left: 100px;
}
.form-group.label .form-control .lbl {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100px;
	color: #3f3f3f;
	font-size: 14px;
	font-weight: 500;
	transform: translateY(-50%);
}

/* placeholder */
::-webkit-input-placeholder {
	color: #a7a7a7;
}
:-moz-placeholder {
	color: #a7a7a7;
}
::-moz-placeholder {
	color: #a7a7a7;
}
:-ms-input-placeholder {
	color: #a7a7a7;
}

/* form 여백 */
* + .form-row {
	margin-top: 5px;
}

/* form 공통 */
.inp-text,
.inp-file,
.sel,
.txtarea,
.editor-inp-text .cke_textarea_inline,
.editor-txtarea .cke_textarea_inline {
	font-size: 15px;
	max-width: 100%;
	background-color: #fff;
	color: #333;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	vertical-align: middle;
}
.inp-text,
.inp-file,
.sel {
	width: 240px;
	height: var(--form-height);
}
.inp-text.num,
.inp-file.num,
.sel.num {
	width: 100px;
	text-align: right;
}
.inp-text.xxsmall,
.inp-file.xxsmall,
.sel.xxsmall {
	width: 75px;
	text-align: center;
}
.inp-text.xsmall,
.inp-file.xsmall,
.sel.xsmall {
	width: 120px;
}
.inp-text.small,
.inp-file.small,
.sel.small {
	width: 180px;
}
.inp-text.medium,
.inp-file.medium,
.sel.medium {
	width: 360px;
}
.inp-text.large,
.inp-file.large,
.sel.large {
	width: 480px;
}
.inp-text.xlarge,
.inp-file.xlarge,
.sel.xlarge {
	width: 600px;
}
.inp-text.full,
.inp-file.full,
.sel.full {
	width: 100%;
}

/* input[type=text, password] */
.inp-text {
	padding: 0 12px;
}
.inp-text[readonly] {
	background: #f4f4f4;
	cursor: default;
}
.inp-text[numberOnly] {
	text-align: right;
}
.inp-text.datepicker {
	cursor: pointer;
	color: #515151;
	background: #fff url("../../../../images/onion/cms/cmm/icon_calendar.gif") no-repeat right 10px top 50%;
}

/* input[type=file] */
input.file,
.inp-file {
	padding: 2px 12px;
}

/* input[type=checkbox,radio] */
.chk,
.rdo {
	vertical-align: middle;
	width: 16px;
	height: 16px;
	accent-color: var(--accent-color);
}
.lbl + .rdo,
.lbl + .chk {
	margin-left: 4px;
}

/* label */
.lbl,
.rdo-lbl,
.chk-lbl {
	vertical-align: middle;
}
.rdo + .lbl,
.chk + .lbl {
	margin-left: 8px;
}

/* textarea */
.txtarea {
	resize: vertical;
	width: 100%;
	padding: 10px 12px;
	height: 200px;
}
.txtarea[rows] {
	height: auto;
}

/* select box */
.sel {
	padding: 0 12px;
	padding-right: 30px;
	appearance: none;
	background: #fff url(../../../../images/onion/cms/cmm/chevron-down.svg) no-repeat top 50% right 10px / 10px auto;
}

/* editor */
.editor-inp-text .cke_textarea_inline,
.editor-txtarea .cke_textarea_inline {
	width: 100%;
}
.editor-inp-text .cke_textarea_inline {
	resize: none;
	height: var(--form-height);
	padding: 7px 12px;
}
.editor-txtarea .cke_textarea_inline {
	resize: vertical;
	height: 200px;
	padding: 10px 12px;
}

/* disabled/readonly color */
.inp-text[disabled],
.sel[disabled],
.txtarea[disabled] {
	background: #efefef !important;
}

/* focus color */
.inp-text:focus,
.inp-file:focus,
.txtarea:focus,
.sel:focus,
.editor-inp-text .cke_textarea_inline:focus,
.editor-txtarea .cke_textarea_inline:focus {
	border-color: #5071ef;
	outline: none;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.inp-text[readonly]:focus,
.inp-text[disabled]:focus,
.sel[readonly]:focus,
.sel[disabled]:focus {
	border-color: #dadada;
	outline: none;
}

/* 토글 */
.switch-inp {
	display: none;
}
.switch-inp:checked + .switch-lbl {
	transition: 0.2s linear;
}
.switch-lbl {
	--switch-size: 23px;

	position: relative;
	width: 47px;
	height: 19px;
	background: #c2c4c8;
	display: inline-block;
	border-radius: 50px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	transition: 0.2s linear;
}
.switch-lbl::after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	width: var(--switch-size);
	height: var(--switch-size);
	background: #969799;
	border-radius: 50%;
	transition: 0.2s linear;
}
.switch-inp:checked + .switch-lbl::after {
	left: calc(100% + 2px - var(--switch-size));
	background: #526698;
}

/*=========================================================================================================================================*/
/** 
 *  게시판
 *
 * 	1. 공통
 *	.search-area : 공통 검색영역
 *	.pagination : 공통 페이징
 *	.file-upload : 첨부파일 목록
 *
 *	2. 테이블형
 *	.board-list : 게시판 목록
 *	.board-write : 게시판 상세보기, 쓰기
 */

/* 검색영역 */
.search-area {
	position: relative;
	margin-bottom: 14px;
	min-height: 32px;
}
.search-area,
.search-area > form {
	display: flex;
	align-items: flex-end;
}
.search-area > form {
	width: 100%;
}
.search-area .txt {
	font-weight: 500;
	margin: 0 8px;
}
.search-area .txt:first-child {
	margin-left: 0;
}
.search-area .txt:last-child {
	margin-right: 0;
}
.search-area .area-left .btn,
.search-area .area-left .btn {
	margin-right: 5px;
	vertical-align: middle;
}
.search-area .total {
	color: #666;
	font-size: 14px;
	font-weight: 500;
}
.search-area .total strong {
	font-weight: 500;
}
.search-area .total .bar {
	font-weight: normal;
}
.search-area .total .number {
	font-weight: normal;
	font-size: 13px;
}
.search-area .area-right,
.search-area .search-wrap {
	position: relative;
	margin-left: auto;
}
.search-area .search-wrap .sel {
	width: 160px;
	margin-right: 1px;
}
.search-area .search-wrap .sel + .inp-text {
	margin-left: 6px;
}
.search-area .search-wrap .inp-text {
	width: 200px;
}
.search-area .search-wrap .btn + .sel,
.search-area .search-wrap .btn.search + .btn.view {
	margin-left: 6px;
}
.search-area .search-wrap .btn.search {
	background: var(--primary-color);
	color: #fff;
	border: 0;
	margin-left: -6px;
	border-radius: 0 4px 4px 0 !important;
	min-width: 0;
}

/* search box */
.search-box {
	position: relative;
	margin-bottom: 50px;
	min-height: 54px;
	padding: 8px 20px;
	background: #f8f8f8;
	border-radius: 10px;
}
.search-box span.lbl,
.search-box label.lbl {
	display: inline-block;
	/* min-width: 100px; */
	height: 28px;
	margin-right: 10px;
	border-radius: 3px;
	color: #444;
	vertical-align: middle;
	/* text-align: center; */
	font-size: 14px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -0.035em;
}
.search-box span.lbl:before,
.search-box label.lbl:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background: currentColor;
	margin-right: 7px;
	margin-top: -3px;
	border-radius: 50%;
	vertical-align: middle;
}
.search-box span.form-control {
	margin-right: 30px;
}
.search-box span.form-control:last-child {
	margin-right: 0;
}
.search-box .text.text-strong {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	padding: 10px 0;
}
.search-box .box-button {
	position: absolute;
	top: 8px;
	right: 20px;
}
.search-box .box-button .btn {
	margin-left: 8px;
}
.search-box .filter-group {
	display: inline-flex;
	vertical-align: middle;
}
.search-box .filter-group a,
.search-box .filter-group button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--form-height);
	padding: 0 14px;
	font-size: 14px;
	border: 1px solid #e1e1e1;
	margin-left: -1px;
	background: #fff;
	font-weight: 500;
}
.search-box .filter-group a:hover,
.search-box .filter-group button:hover {
	background: var(--btn-hover-color);
}
.search-box .filter-group a:first-child,
.search-box .filter-group button:first-child {
	border-radius: 5px 0 0 5px;
}
.search-box .filter-group a:last-child,
.search-box .filter-group button:last-child {
	border-radius: 0 5px 5px 0;
}
.search-box .filter-group a.disabled,
.search-box .filter-group button.disabled {
	opacity: 1;
	position: relative;
	background: var(--primary-color);
	border-color: var(--primary-color);
	font-weight: 600;
	color: #fff;
	pointer-events: none;
	cursor: default;
}

/* table option */
.table-option {
	margin-bottom: 10px;
	min-height: 28px;
}
.table-option::after {
	content: "";
	display: block;
	clear: both;
}
.table-option .option-left {
	float: left;
}
.table-option .option-left .text-info {
	margin-top: 6px;
	margin-bottom: 0;
}
.table-option .option-right {
	float: right;
}

/* pagination */
.pagination {
	margin-top: 30px;
	text-align: center;
}
.pagination .pagination-wrap {
	display: inline-block;
	vertical-align: top;
}
.pagination .pagination-wrap:after {
	content: "";
	display: block;
	clear: both;
}
.pagination a,
.pagination img {
	vertical-align: top;
}
.pagination a {
	float: left;
	display: inline-block;
	width: var(--pagination-size);
	height: var(--pagination-size);
	margin-right: 8px;
	border-radius: 50%;
}
.pagination a:last-child {
	margin-right: 0;
}
.pagination a.num {
	width: auto;
	min-width: var(--pagination-size);
	padding: 0 5px;
	background: #eee;
	color: #666666;
	font-size: 14px;
	line-height: var(--pagination-size);
}
.pagination a.num:hover {
	color: var(--primary-color);
	font-weight: bold;
}
.pagination a.num.on {
	background-color: var(--primary-color);
	color: #fff;
	font-weight: bold;
}
.pagination .pg-btn {
	display: block;
	width: var(--pagination-size);
	height: var(--pagination-size);
	border: 1px solid #dfdfdf;
	/* background: #efefef; */
}
/* .pagination .pg-btn.pg-prev{margin-right:10px;} */
/* .pagination .pg-btn.pg-next{margin-left:10px;} */
.pagination .pg-btn::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: bold;
	line-height: calc(var(--pagination-size) - 2px);
	font-size: 11px;
	color: #999;
}
.pagination .pg-btn.pg-first::before {
	content: "\f053\f053";
	letter-spacing: -0.2em;
}
.pagination .pg-btn.pg-prev::before {
	content: "\f053";
}
.pagination .pg-btn.pg-next::before {
	content: "\f054";
}
.pagination .pg-btn.pg-last::before {
	content: "\f054\f054";
	letter-spacing: -0.2em;
}
/* 크기가 작은 pagination */
.pagination.small {
	margin-top: 20px;
}
.pagination.small a {
	float: left;
	width: 24px;
	height: 24px;
	margin-right: 3px;
}
.pagination.small a.num {
	width: auto;
	min-width: 24px;
	padding: 0 5px;
	border: 1px solid #d4d4d4;
	font-size: 13px;
	line-height: 24px;
}
.pagination.small a.num.on {
	background: #353535;
	color: #fff;
}
/* datatables */
.dataTables_wrapper .pagination > div {
	display: inline-block;
	vertical-align: top;
}
.dataTables_wrapper .pagination span {
	float: left;
	display: inline-block;
	margin-right: 4px;
}
.dataTables_wrapper .pagination span::after {
	content: "";
	display: block;
	clear: both;
}
.dataTables_wrapper .pagination span a {
	width: auto;
	min-width: 29px;
	padding: 0 8px;
	border: 1px solid #d4d4d4;
	color: #666;
	font-size: 14px;
	line-height: 27px;
}
.dataTables_wrapper .pagination span a.current {
	background-color: #f2576a;
	color: #fff;
}
.dataTables_wrapper .pagination a.previous,
.dataTables_wrapper .pagination a.next {
	text-indent: -999em;
	background-repeat: no-repeat;
}
.dataTables_wrapper .pagination a.previous {
	background-image: url("../../../../images/onion/cms/cmm/btn_prev.gif");
}
.dataTables_wrapper .pagination a.next {
	background-image: url("../../../../images/onion/cms/cmm/btn_next.gif");
}

/** 
 *  테이블
 */
table {
	width: 100%;
}
form table {
	table-layout: fixed;
}
table.text-left th,
table.text-left td {
	text-align: left;
}
table.text-left th {
	padding-left: 30px;
}
table.text-center th,
table.text-center td {
	text-align: center;
}
table th.text-center,
table td.text-center {
	text-align: center !important;
}
table th.text-left,
table td.text-left {
	text-align: left !important;
}
table th.text-right,
table td.text-right {
	text-align: right !important;
}
table td.text-left,
table td.text-right {
	padding-left: 18px;
	padding-right: 18px;
}
.board-option {
	margin-bottom: 10px;
	text-align: right;
}
table .btn {
	min-width: 60px;
}
/* 등록된 게시물이 없을 경우 */
table .nodata {
	padding: 80px 0;
	text-align: center;
}
table .nodata p {
	font-weight: bold;
}
/* 데이터 정렬 */
table .sort {
	position: relative;
	display: block;
	padding-right: 10px;
	cursor: pointer;
	min-height: 37px;
	margin: -9px 0;
	line-height: 37px;
}
table [rowspan="2"] .sort {
	min-height: 75px;
	line-height: 75px;
}
table .sort:after {
	content: "\f0dc";
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -11px;
	font-family: "Font Awesome 6 Pro";
	font-size: 16px;
	text-align: center;
	line-height: 22px;
	font-weight: bold;
}
table .sort.asc:after {
	content: "\f0de";
}
table .sort.desc:after {
	content: "\f0dd";
}

/***** 기본 테이블1 *****/
.table-basic th,
.table-basic td {
	height: 46px;
	padding: 8px 10px;
	font-size: 15px;
	border: 1px solid rgb(117 117 117 / 19%);
	text-align: center;
}
.table-basic th {
	background: #f9f9fb;
	font-weight: 600;
	color: #616161;
}
.table-basic td {
	background: #fff;
}

/***** 기본 테이블2 *****/
.table-basic2 th,
.table-basic2 td {
	height: 46px;
	padding: 8px 10px;
	font-size: 15px;
	border: 1px solid #d1d1d1;
	text-align: center;
}
.table-basic2 th.text-left,
.table-basic2.text-left th {
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
.table-basic2 th {
	color: #333;
	font-weight: 600;
}
.table-basic2 td {
	color: #555;
}

/***** 기본 테이블3 *****/
.table-basic3 th,
.table-basic3 td {
	height: 46px;
	padding: 8px 10px;
	font-size: 15px;
	border: 1px solid #d1d1d1;
	color: #555;
	text-align: center;
}
.table-basic3 th.text-left,
.table-basic3.text-left th {
	text-align: left;
	padding-left: 20px;
}
.table-basic3 th {
	background-color: #ebebeb;
}

/* 게시판 목록 */
.board-list {
	border-top: 1px solid #ebebeb;
}
.dataTables_wrapper .board-list {
	border-top: 0;
}
.board-list + .board-list {
	margin-top: 20px;
}
.text-info + .board-list {
	margin-top: 8px;
}
.board-list th,
.board-list td {
	height: 58px;
	padding: 10px 10px;
	border-bottom: 1px solid #ebebeb;
	font-size: 15px;
	text-align: center;
}
.board-list th {
	background: #f9f9fb;
	color: #444;
	font-weight: 600;
	text-wrap: balance;
}
.board-list td {
	background: #fff;
	color: #333;
}
.board-list tr.strong td {
	color: #006edf;
}
.board-list tr:hover td {
	background: rgba(85, 129, 208, 0.06);
}
.board-list tr.notice td {
	background: #f2f2f2;
	font-weight: 600;
}
.board-list tr.on td {
	background: #5581d0;
	color: #fff;
}
.board-list .nodata {
	padding: 20px 0;
	font-size: 13px;
}
.board-list .fa-star {
	color: #c1c8cf;
}
.board-list .checkbox {
	margin-top: 4px;
}
.board-list .fa-thumbtack {
	color: var(--primary-color);
	transform: rotate(45deg);
}

/* 게시판  상세보기, 등록, 수정 */
.board-write {
	table-layout: fixed;
	border-top: 1px solid #e5eaef;
}
.board-write + .board-write {
	margin-top: 20px;
}
.text-info + .board-write {
	margin-top: 8px;
}
.board-write > thead > tr > th,
.board-write > tbody > tr > th,
.board-write > tbody > tr > td {
	height: 60px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e5eaef;
	font-size: 15px;
	text-align: left;
	border-right: 1px solid #ebebeb;
}
.board-write > thead > tr > th:last-child,
.board-write > tbody > tr > th:last-child,
.board-write > tbody > tr > td:last-child {
	border-right: 0;
}
.board-write > thead > tr > th,
.board-write > tbody > tr > th {
	background: #f9f9fb;
	color: #444;
	font-weight: 600;
	padding: 18px 30px;
}
.board-write > tbody > tr > td {
	background: #fff;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}
.board-write > tbody > tr > td img {
	margin-top: 1em;
	display: block;
}
.board-write > tbody > tr > td + th {
	border-left: 1px solid #e5eaef;
}
.board-write > tbody > tr > th.strong {
	background: #ffc000;
}
.board-write .text-link + .text-link {
	margin-left: 10px;
}

/* 썸네일형 목록 */
.thumb-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 36px;
}
.thumb-list .list-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #e0e0e0;
	height: 100%;
	border-radius: 3px;
	box-shadow: 4px 4px 0 rgba(115, 115, 115, 0.07);
}
.thumb-list .item-top {
	padding: 10px 20px;
	text-align: center;
	color: #676666;
	font-size: 14px;
	letter-spacing: -0.05em;
}
.thumb-list .item-top i {
	margin-right: 6px;
}
.thumb-list .item-thumb {
	padding: 0 20px;
}
.thumb-list .item-thumb:first-child {
	padding-top: 20px;
}
.thumb-list .item-thumb .thumb-wrap {
	position: relative;
}
.thumb-list .item-thumb .chk {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	z-index: 1;
}
.thumb-list .item-thumb .thumb {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #dfe5ea;
	border-radius: 3px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
.thumb-list .item-section {
	padding: 12px 20px;
}
.thumb-list .item-section + .item-section {
	border-top: 1px solid #c5c5c5;
}
.thumb-list .item-button {
	padding: 0 20px 15px;
	display: flex;
	margin-top: auto;
}
.thumb-list .item-button .btn {
	flex: 1 1 100%;
}
.thumb-list .item-button .btn + .btn {
	margin-left: 10px;
}
.thumb-list .item-title {
	max-height: 2.8em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
}

/* 댓글 */
.comment-container {
	display: flex;
}
.comment-container .txtarea {
	flex: 1 1 100%;
	min-width: 0;
}
.comment-container .btn {
	flex: 0 0 auto;
	height: auto;
	margin-left: 10px;
}
.comment-list {
	margin-top: 20px;
	border-top: 1px solid #dedede;
}
.comment-list > li {
	display: flex;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid #dedede;
}
.comment-list .item-text {
	flex: 1 1 auto;
	min-width: 0;
}
.comment-list .item-option {
	flex: 0 0 auto;
	margin-left: 10px;
}
.comment-list .text-desc {
	margin-top: 8px;
	margin-bottom: 0;
}

/* 리스트 아이템이 없을 경우 */
.no-item {
	text-align: center;
	padding: 50px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
.no-item p + i {
	margin-top: 20px;
}

/* 파일 첨부 */
.file-upload .upload-wrap label + input[type="file"] {
	display: none;
}
.file-upload .file-list {
	position: relative;
}
.file-upload .file-list .text-link {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.file-upload .file-list .file-wrap {
	color: #333;
	font-weight: 500;
	padding: 4px 0;
}
.file-upload .file-wrap .file-up,
.file-upload .file-wrap .file-down,
.file-upload .file-wrap .file-del {
	margin-left: 5px;
	margin-top: -2px;
	border: none;
	font-size: 0;
	vertical-align: middle;
	line-height: 1;
}
.file-upload .file-wrap .file-down {
	margin-left: 0;
}
.file-upload .file-wrap .file-up::after,
.file-upload .file-wrap .file-down::after,
.file-upload .file-wrap .file-del::after {
	font-family: "Font Awesome 6 Pro";
	color: var(--primary-color);
	font-size: 24px;
	vertical-align: top;
}
.file-upload .file-wrap .file-up::after {
	content: "\f151";
}
.file-upload .file-wrap .file-down::after {
	content: "\f150";
}
.file-upload .file-wrap .file-del::after {
	content: "\f410";
	font-weight: bold;
}
.file-upload .file-wrap .file-up[disabled]::after,
.file-upload .file-wrap .file-down[disabled]::after {
	color: #999;
	opacity: 1;
}

.file-upload .image-wrap {
	display: inline-block;
	width: 200px;
	margin-top: 15px;
	margin-bottom: 5px;
	margin-right: 10px;
	text-align: center;
	vertical-align: top;
}
.file-upload .image-wrap .item-wrap {
	display: inline-block;
	position: relative;
	max-width: 100%;
}
.file-upload .image-wrap .rdo {
	display: none;
}
.file-upload .image-wrap .lbl {
	margin: 0;
	max-width: 100%;
	display: block;
}
.file-upload .image-wrap .lbl span {
	display: block;
	width: 200px;
	height: 160px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	background-color: #f0f7fe;
	box-shadow: inset 0 0 0 1px #ccc;
}
.file-upload .image-wrap .lbl img {
	margin: 0;
	display: inline-block;
}
.file-upload .image-wrap .file-del {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	height: 30px;
	width: 30px;
	font-size: 0;
	border-bottom-left-radius: 5px;
	background: rgba(0, 0, 0, 0.5);
}
.file-upload .image-wrap .file-del::after {
	content: "\f00d";
	font-family: "Font Awesome 6 Pro";
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	vertical-align: top;
}
.file-upload .image-wrap .button-wrap {
	text-align: center;
	margin-top: 2px;
	line-height: 32px;
}
.file-upload .image-wrap .file-left,
.file-upload .image-wrap .file-right {
	font-size: 0;
	vertical-align: top;
	line-height: 1;
	margin: 0 1px;
}
.file-upload .image-wrap .file-left::after,
.file-upload .image-wrap .file-right::after {
	font-family: "Font Awesome 6 Pro";
	color: var(--primary-color);
	font-size: 32px;
	vertical-align: top;
}
.file-upload .image-wrap .file-left::after {
	content: "\f191";
}
.file-upload .image-wrap .file-right::after {
	content: "\f152";
}
.file-upload .image-wrap .file-left[disabled]::after,
.file-upload .image-wrap .file-right[disabled]::after {
	color: #999;
	opacity: 1;
}
.file-upload .image-wrap .item-wrap:hover .file-del {
	display: block;
}
.file-upload .image-wrap .rdo:checked ~ .lbl:before,
.file-upload .image-wrap .item-wrap:hover .lbl:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 4px solid var(--primary-color);
}
.file-upload .image-wrap .rdo:checked ~ .lbl:after {
	content: "대표";
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	line-height: 30px;
	padding: 0 12px;
	border-bottom-right-radius: 5px;
	background: var(--primary-color);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.file-upload .image-wrap .text-link,
.file-upload .image-wrap span {
	display: block;
}
.file-upload .image-wrap .text-link {
	margin-bottom: 6px;
}
/* .file-upload .rdo-main-img{display:none;}
.file-upload .lbl-main-img{width: 77px; height: 20px; border-radius: 3px; background: url(../../../../images/onion/cms/cmm/icon_main_off.gif) no-repeat; text-indent: -999em}
.file-upload .rdo-main-img:checked + .lbl-main-img{background-image: url(../../../../images/onion/cms/cmm/icon_main_on.gif)} */

/* 첨부파일 다운로드 팝업 */
.attach-file-wrap {
	position: relative;
}
.attach-file-layer {
	display: none;
	position: absolute;
	top: 110%;
	right: -10px;
	z-index: 101;
	width: 300px;
	border: 1px solid #ccc;
	padding: 2px;
	background-color: #fff;
	text-align: left;
	line-height: 1.4;
}
.attach-file-layer .head-area {
	position: relative;
	height: 55px;
	padding: 16px 20px;
	background-color: #575e70;
}
.attach-file-layer .head-title {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.attach-file-layer .body-area {
	padding: 20px 16px;
	word-break: break-all;
}
.attach-file-layer .body-area .attach-file-list li {
	position: relative;
	padding-left: 20px;
}
.attach-file-layer .body-area .attach-file-list li + li {
	margin-top: 5px;
}
.attach-file-layer .body-area .attach-file-list .chk {
	position: absolute;
	margin: 0;
	left: 0;
	top: 3px;
}
.attach-file-layer .body-area .attach-file-list .lbl {
	vertical-align: top;
	font-size: 14px;
}
.attach-file-layer .btn.download {
	background-color: #009688;
}
.attach-file-layer .btn.cancel {
	background-color: #aaa;
}

/*=========================================================================================================================================*/
/**
 *	캘린더
 */
.calendar-box .fc-toolbar.fc-header-toolbar {
	margin-bottom: 15px;
}
.calendar-box.fc .fc-toolbar h2 {
	display: inline-block;
	margin: 0 30px;
	color: #333;
	font-size: 22px;
	font-weight: bold;
	vertical-align: middle;
	min-width: 130px;
	text-align: center;
}
.calendar-box button.fc-button {
	height: 38px;
	border-radius: 3px;
}
.calendar-box button.fc-button:active,
.calendar-box button.fc-button:focus {
	background: none;
	color: var(--primary-color);
	box-shadow: none !important;
	outline: none !important;
}
.calendar-box button.fc-prev-button,
.calendar-box button.fc-next-button {
	width: 40px;
	padding-left: 0;
	padding-right: 0;
}
.calendar-box button.fc-today-button {
	min-width: 80px;
}
.calendar-box button.fc-button:not(:disabled) {
	border: 1px solid currentColor !important;
	color: var(--primary-color) !important;
	background: #fff !important;
	font-weight: 500;
}
.calendar-box.fc .fc-toolbar h2 + .fc-button {
	margin-left: 0;
}
.calendar-box .fc-col-header-cell {
	background-color: #f9f9fb;
	height: 40px;
	vertical-align: middle;
	font-weight: 600;
}
.calendar-box .fc-col-header-cell:not(:first-child) {
	border-left-color: #cacaca;
}
.calendar-box .fc-col-header-cell.fc-day-sat,
.calendar-box .fc-day.fc-day-sat .fc-daygrid-day-number {
	color: #2479c1;
}
.calendar-box .fc-col-header-cell.fc-day-sun,
.calendar-box .fc-day.fc-day-sun .fc-daygrid-day-number {
	color: #dc4441;
}
.calendar-box .fc-daygrid-day-top {
	flex-direction: row;
}
.calendar-box .fc-daygrid-day-number {
	padding: 6px 8px;
	font-weight: 500;
}
.calendar-box .fc-day-today .fc-daygrid-day-number {
	font-weight: bold;
}
.calendar-box .fc-daygrid-day.fc-day-today {
	background-color: #fffbda;
}
.calendar-box .fc-day-disabled {
	background: none;
}
.calendar-box .fc-daygrid-event {
	font-size: 15px;
}
.calendar-box .fc-daygrid-event-harness {
	padding: 0 6px;
}
.calendar-box .fc-h-event {
	border: 0;
	background: transparent;
}
.calendar-box .fc-h-event:focus {
	box-shadow: none;
}
.calendar-box .fc-h-event:focus::after {
	display: none;
}
.calendar-box .fc-h-event .fc-event-title {
	color: var(--primary-color);
	padding: 2px 4px;
	font-weight: 600;
}
.calendar-box .fc-h-event:hover .fc-event-title {
	color: var(--warning-color);
}
.calendar-box .fc-daygrid-day-bottom {
	padding: 2px 12px 0 !important;
}
.calendar-box .fc-daygrid-more-link {
	margin-top: 8px;
}

/* Swiper */
.contents-body .swiper {
	--swiper-theme-color: #fff;
	--swiper-navigation-size: 36px;

	margin-left: 0;
	margin-right: 0;
	border: 1px solid #ebebeb;
}
.contents-body .swiper a {
	display: block;
	height: 100%;
}
.contents-body .swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/**
 *	모달
 */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.modal.on {
	display: block;
}
.modal .modal-wrap {
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 460px;
	max-width: 90%;
	margin: 0 auto;
	z-index: 1001;
	background: #fff;
	border-radius: 23px;
	transform: translate3d(-50%, -50%, 0);
	animation: 0.3s fadeIn;
	padding: 25px 0;
}
.modal .modal-wrap.wrap-medium {
	width: 640px;
}
.modal .modal-wrap.wrap-large {
	width: 970px;
}

.modal .modal-head {
	position: relative;
	padding: 0 40px;
	margin-bottom: 20px;
}
.modal .modal-title {
	color: #505050;
	font-size: 24px;
	font-weight: bold;
}
.modal .modal-body {
	overflow-y: auto;
	max-height: 360px;
	max-height: calc(100vh - 200px);
}
.modal .modal-body:first-child {
	padding-top: 15px;
}
.modal .modal-contents {
	padding: 0 40px;
}
.modal .modal-text {
	margin-bottom: 30px;
	color: #0f4291;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}
.modal * + .modal-text {
	margin-top: 30px;
	margin-bottom: 0;
}
.modal .btn-wrap {
	text-align: right;
	margin-bottom: 8px;
}
.modal .btn-wrap.center {
	text-align: center;
	margin-top: 10px;
}
.modal .modal-text + .btn-wrap {
	margin-top: -30px;
}
.modal .modal-button {
	margin-top: 25px;
	padding-top: 25px;
	text-align: center;
	border-top: 1px solid #d6dae3;
}
.modal .modal-button .btn {
	margin: 0 4px;
}
.modal .modal-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.57);
}
.modal .btn-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
}
.modal .btn-modal-close i {
	line-height: 1;
	vertical-align: top;
}
.modal .btn-modal-close:hover {
	background: #f1f1f1;
}

.modal .swiper {
	margin-left: auto;
	margin-right: auto;
}

/* 로그인 */
.modal .login-form {
	width: 278px;
	margin: 0 auto;
	max-width: 100%;
}
.modal .login-form + .login-form {
	margin-top: 10px;
}
.modal .login-form .lbl {
	display: inline-block;
	min-width: 70px;
	color: #515151;
	font-size: 14px;
	font-weight: 600;
	vertical-align: middle;
}
.modal .login-form .inp-text {
	width: 200px;
}
.modal .login-check {
	padding-left: 74px;
}
.modal .login-check .lbl {
	font-weight: normal;
}

/* 비밀번호 변경 */
.modal .password-form + .password-form {
	margin-top: 10px;
}
.modal .password-form .pw-lbl {
	display: inline-block;
	min-width: 140px;
	color: #515151;
	font-size: 15px;
	font-weight: 600;
	vertical-align: middle;
}
.modal .password-form .inp-text {
	width: 220px;
}

/* Window popup */
.window .window_layer {
	background: #fff; /*border:1px solid #ccc;*/
	padding: 2px;
}
.window .window_layer .window_header {
	height: 55px;
	padding: 16px 20px;
	background-color: #3c4652;
}
.window .window_layer .window_header .tit {
	color: #fff;
	font-size: 18px;
}
.window .window_layer .window_close {
	position: absolute;
	top: 24px;
	right: 22px;
	z-index: 10;
}
.window .window_layer .window_close a {
	display: block;
	width: 14px;
	height: 14px;
	background: url("../../../../images/onion/cms/cmm/icon_common.png") -31px -33px no-repeat;
	text-indent: -9999px;
}
.window .window_layer .window_body {
	position: relative;
	padding: 20px 15px;
}
.window .window_layer .window_body .body_title {
	margin-bottom: 10px;
	color: #333;
	font-size: 20px;
	margin-bottom: 10px;
}
.window .window_layer .window_body .info {
	color: #333;
	font-size: 15px;
	line-height: 1.5;
}

/* 우편번호찾기 */
.window.window_view_search_addr .search_wrap {
	padding: 12px 20px;
	margin: 20px 0;
	background-color: #f6f6f6;
	border: 1px solid #dadada;
}
.window.window_view_search_addr .info {
	margin-top: 20px;
	font-weight: bold;
}
.window.window_view_search_addr .sub_info {
	margin-bottom: 10px;
	color: #777;
	font-size: 13px;
}
.window.window_view_search_addr .pagination {
	margin-top: 20px;
}

/***** 지도표시 *****/
.map-container {
	position: relative;
	height: 400px;
	margin-bottom: 3px;
}
.map-container .base-map {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.map-container .openlayers-map {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.map-location input {
	width: 50%;
}

/* 차트(Chart) */
.chart-wrap {
	margin-bottom: 30px;
	height: 400px;
	padding: 20px 30px 30px;
	border: 1px solid #ccc;
}

/* 진행상태바 */
.progress {
	height: 20px;
	background-color: #dfdfdf;
	border-radius: 5px;
	display: flex;
	overflow: hidden;
}
.progress:not(:first-child) {
	margin-top: 10px;
}
.progress-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	background-color: var(--primary-color);
	transition: width 0.6s ease;
	font-size: 13px;
}

/* 에러 페이지 */
.error {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.error .error-cell {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.error .error-title {
	color: #ccc;
	font-size: 106px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.4em;
	letter-spacing: 0.04em;
	line-height: 1;
}
.error .error-sub-title {
	color: #231f20;
	font-size: 24px;
	margin-bottom: 0.5em;
}
.error .error-desc {
	font-size: 16px;
	color: #3f3c3d;
	line-height: 1.6; /* text-align:left; */
	font-weight: 300;
}
.error .btn-group {
	margin-top: 40px;
}

/* vue-jstree */
.tree-default .tree-themeicon-custom {
	color: #a0a0a0;
}
.tree-default .tree-anchor,
.tree-default .tree-icon {
	line-height: 26px;
	height: 26px;
}

/* 광고 */
.type1 .ads-bottom {
	padding: 20px;
	margin-top: auto;
}

.type1 .ads-bottom .ads-swiper {
	width: 100%;
	height: 200px;
	border-radius: 10px;
}

.type1 .ads-right {
	position: fixed;
	top: 0;
	right: 40px;
	padding-top: var(--header-height);
	margin-top: 90px;
}

.type1 .ads-swiper {
	--swiper-pagination-color: #fff;

	width: 200px;
	height: 600px;
	border-radius: 10px;
}
.type1 .ads-swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Animation */
@keyframes animatetop {
	from {
		top: 46%;
		opacity: 0;
	}
	to {
		top: 50%;
		opacity: 1;
	}
}
@keyframes alertTop {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.map-content {
	display: flex;
}
.type1 .map-content {
	height: calc(100vh - 260px);
}
.type2 .map-content {
	height: calc(100vh - 310px);
}

.map-wrap {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.map-wrap .map {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: #e6e6e6;
}

.map-info {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #d8d8d8;
}

.map-info .info-head {
	text-align: center;
	padding: 10px 0;
	position: relative;
	border-bottom: 1px solid #d8d8d8;
	flex: 0 0 auto;
}

.map-info .info-head .title {
	font-size: 20px;
	font-weight: 600;
	padding: 0 40px;
}

.map-info .info-head .btn-close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	line-height: 24px;
	font-size: 20px;
}

.map-info .info-body {
	padding: 10px;
	width: 100%;
	overflow-y: auto;
}

/* datepicker */
.dp__main {
	width : 240px !important;
}

/* ckeditor */
.ck-heading-dropdown .ck-dropdown__panel,
.ck-font-family-dropdown .ck-dropdown__panel,
.ck-font-size-dropdown .ck-dropdown__panel {
	max-height: 160px;
	overflow-y: auto;
}

.ck-content ol,
.ck-content ul {
	padding: revert;
}