@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import "form.css";
@import "style.css";

:root {
	--main-color: rgb(7, 69, 147); /* 메인 컬러 #0cb6e8 */
	--sub-color: rgb(68, 68, 68); /* 서브 컬러 #444444 */
	--dark_grey: rgb(51, 51, 51); /* #333333 */
	--mid_grey: rgb(102, 102, 102); /* #777777 */
	--grey: rgb(102, 102, 102); /* #aaaaaa */
	--light_grey: rgb(170, 170, 170); /* #dddddd */
	--white_grey: rgb(234, 234, 234); /* #eaeaea */
	--white: rgb(255, 255, 255); /* #ffffff */
	--black: rgb(0, 0, 0); /* #000000 */
	--text-color: rgb(0, 0, 0); /* 텍스트 컬러 #000000 */
	--box-shadow_dark: rgba(0, 0, 0, .6); /* #eaeaea */
	--box-shadow_light: rgba(0, 0, 0, .1); /* #eaeaea */
	--text_link_color: var(--main-color); /* # */
	--table_hover: rgb(255, 239, 229); /* #ffefe5 */
	--table_active: rgb(255, 239, 229); /* #ffefe5 */
}

html, body {
	height: 100%;
	line-height: 1.5;
	letter-spacing: -0.2px;
	font-family: 'Noto Sans KR', sans-serif, 'Malgun Gothic','Roboto', Dotum, '돋움', Gulim,Helvetica;
}


/**********************************************/
/* 본문 바로가기 & 스크롤 탑 **********************/
/**********************************************/
#skip-nav {
	position: fixed;
	left: 0;
	top: -41px;
	width: 100%;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
	color: var(--white);
	background: var(--box-shadow_dark);
	border-bottom: 1px solid var(--white);
	z-index: 100000;
	transition: top 0.3s;
}
#skip-nav:focus {
	top: 0;
}




/**********************************************/
/* 01-1. 공통 레이아웃 - 디스플레이 ***************/
/**********************************************/
.relative {
	position: relative;
}

/* 플렉스 */
.flex {
	display: -webkit-box; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
	display: -moz-box; /* firefox 19- */
	display: -ms-flexbox; /* IE 10 */
	display: -webkit-flex; /* Chrome */
	display: flex;
	/*white-space: nowrap;*/
}
.flex.flex--column { /* flex 요소를 세로로 배치 */
	-webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
	-moz-box-orient: vertical; /* firefox 19- */
	-ms-flex-direction: column; /* IE 10 */
	-webkit-flex-direction: column; /* Chrome */
	flex-direction: column;
}
.flex.flex--justify-center { /* 가로 정렬. 가운데로 */
	-webkit-box-pack: center; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: center; /* Firefox 19- */
	-ms-flex-pack: center; /* IE10 */
	-webkit-justify-content: center; /* Chrome */
	justify-content: center;
}
.flex.flex--justify-between { /* 가로 정렬. 요소의 간격 동일하게 */
	-webkit-box-pack: justify; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: justify; /* Firefox 19- */
	-ms-flex-pack: justify; /* IE10 */
	-webkit-justify-content: space-between; /* Chrome */
	justify-content: space-between;
}
.flex.flex--justify-flex-start { /* 가로 정렬. 요소의 간격 동일하게 */
	-webkit-box-pack: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: start; /* Firefox 19- */
	-ms-flex-pack: start; /* IE10 */
	-webkit-justify-content: flex-start; /* Chrome */
	justify-content: flex-start;
}
.flex.flex--justify-flex-end {
	-webkit-box-pack: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: end; /* Firefox 19- */
	-ms-flex-pack: end; /* IE10 */
	-webkit-justify-content: flex-end; /* Chrome */
	justify-content: flex-end;
}
.flex.flex--align-center {
	-webkit-box-align: center; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-align: center; /* Firefox 19- */
	-ms-flex-align: center; /* IE10 */
	-webkit-align-items: center; /* Chrome */
	align-items: center;
}
.flex.flex--align-end {
	-webkit-box-align: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-align: end; /* Firefox 19- */
	-ms-flex-align: end; /* IE10 */
	-webkit-align-items: flex-end; /* Chrome */
	align-items: end;
}
.flex.flex--align-between {
	align-content: space-between;
}
.flex.flex--align-start {
	-webkit-box-align: start; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-align: start; /* Firefox 19- */
	-ms-flex-align: start; /* IE10 */
	-webkit-align-items: flex-start; /* Chrome */
	align-items: flex-start;
}
.flex > .flex__item--align-center {
	align-self: center;
}
.flex > .flex__item--align-start {
	align-self: flex-start;
}
.flex > .flex__item--align-end {
	align-self: flex-end;
}
.flex > .flex__item--align-center-right {
	align-self: center;
	margin-left: auto;
	text-align: right;
}
.flex.flex--full > .flex__item {
	width: 100%;
}
.flex.flex--wrap {
	flex-wrap: wrap;
}
@media screen and (max-width: 991px) {
	.flex.flex-responsive--tablet {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media screen and (max-width: 768px) {
	.flex-responsive--mobile {
		flex-direction: column;
		align-items: flex-start;
	}
}



/* 디바이스별 디스플레이 */
.dp--block {
	display: block !important;
}
.dp--inline-block {
	display: inline-block !important;
}
.dp--none {
	display: none !important;
}
.dp--tablet-start {
	display: none !important;
}
.dp--tablet-end {
	display: block !important;
}
.dp--mobile-start {
	display: none !important;
}
.dp--mobile-end {
	display: block !important;
}
.dp--pc-end {
	display: block !important;
}
@media screen and (max-width: 1200px) {
	.dp--pc-end {
		display: none !important;
	}
}
@media screen and (max-width: 991px) {
	.dp--tablet-start {
		display: block !important;
	}
	.dp--tablet-end {
		display: none !important;
	}
}
@media screen and (max-width: 768px) {
	.dp--mobile-start {
		display: block !important;
	}
	.dp--mobile-end {
		display: none !important;
	}
}




/**********************************************/
/* 01-2. 공통 레이아웃 - 리스트 *******************/
/**********************************************/
ol.reset-list,
ul.reset-list,
dl.reset-list dd{
	margin: 0;
	padding: 0;
}
ol.reset-list li,
ul.reset-list li {
	list-style: none;
}


/* 넘버링 리스트 */
.list-wrap > ol,
.list-wrap > ul {
	margin-top: 0.5rem;
}
.list-wrap > ol > li {
	margin-top: 1rem;
}
.list-wrap .con-wrap {
	margin-left: 0.5rem;
}
.con-wrap .con-txt {
	margin: 0.5rem 0;
}
ol.list-count-01 {
	counter-reset: ol-list-count-01;
}
ol.list-count-01 > li {
	position: relative;
	padding-left: 1rem;
	line-height: 1.5;
	counter-increment: ol-list-count-01;
}
ol.list-count-01 > li:before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.5;
	padding-right: 0.5rem;
	content: counter(ol-list-count-01)'.';
}
ol.list-count-01 > li:not(:first-of-type) {
	margin-top: 0.7rem;
}
ol.list-count-02 {
	counter-reset: ol-list-count-01;
}
ol.list-count-02 > li {
	position: relative;
	padding-left: 1rem;
	line-height: 1.5;
	counter-increment: ol-list-count-02;
}
ol.list-count-02 > li:before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.5;
	padding-right: 0.5rem;
	content: counter(ol-list-count-02)')';
}
ol.list-count-02 > li.font-sm:before {
	font-size: 0.9rem;
}
ol.list-count-02 > li.font-xs:before {
	font-size: 0.8rem;
}
ol.list-count-02 > li:not(:first-of-type) {
	margin-top: 0.7rem;
}


/* 넘버링 기호 */
ul.list-hyphen > li {
	position: relative;
	padding-left: 0.7rem;
	line-height: 1.5;
}
ul.list-hyphen > li:before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.5;
	content: '- ';
}




/**********************************************/
/* 01-3. 공통 레이아웃 - 테이블 ******************/
/**********************************************/
.table-wrap { /* 가로 사이즈 지정하여 테이블 가로 사이즈 컨트롤할 것 */
	width: auto;
	overflow: hidden;
}
.table-wrap > .table {
	width: 100%;
	table-layout: fixed;
	border-spacing: 0;
	/*border: none;*/
}
.table-wrap > .table caption {
	text-indent: -100000px;
	font-size: 0;
}
.table-wrap > .table tr {
	position: relative;
	transition: all 0.3s;
	border-bottom: 1px solid var(--light_grey);
}
.table-wrap > .table tr.active,
.table-wrap > .table tr:hover,
.table-wrap > .table tr:focus {
	background: var(--table_active);
}
.table-wrap > .table tr th {
	padding: 1rem 0.5rem;
	white-space: normal;
	font-weight: 600;
}
.table-wrap > .table tr td {
	padding: 0.8rem 0.5rem;
	line-height: 1.2rem;
	white-space: nowrap;
}


/* 테이블 가로사이즈 일정 값 이하일 때 가로 스크롤 발생 */
.table-wrap.table-wrap--x-auto {
	overflow-x: auto;
}
.table-wrap.table-wrap--x-auto > .table {
	min-width: 976px; /* 상황에 따라 수정하여 사용 */
}


/* table style ***************************************/
/* th row */
.table-wrap > .table.table--row {

}
.table-wrap > .table.table--row.table--row-border {
	border-top: 2px solid var(--dark_grey);
}
.table-wrap > .table.table--row tr th:not(:first-child),
.table-wrap > .table.table--row tr td:not(:first-child) {
	border-left: 1px solid var(--dark_grey);
}


/* th col */
.table-wrap > .table.table--col {
}
.table-wrap > .table.table--col.table--col-border {
	border-left: 2px solid var(--dark_grey);
}
.table-wrap > .table.table--col.table--col-border tr th:first-of-type,
.table-wrap > .table.table--col.table--col-border tr:first-of-type td {
	border-top: 1px solid var(--light_grey);
}
.table-wrap > .table.table--col.table--col-border tr td {
	border-left: 1px solid var(--light_grey);
}
.table-wrap > .table.table--col.table--col-border tr td:last-child {
	border-right: 1px solid var(--light_grey);
}


/* table striped */
.table-wrap > .table.table--striped tr:nth-child(2n) th,
.table-wrap > .table.table--striped tr:nth-child(2n) td {
	background: var(--white_grey);
}


/* table title */
.table-wrap > .table .num {
	width: 8%;
}
.table-wrap > .table .idx {
	width: 8%;
}
.table-wrap > .table .category {
	width: 10%;
}
.table-wrap > .table .read {
	width: 8%;
}
.table-wrap > .table .file {
	width: 8%;
}
.table-wrap > .table .title {
	text-align: left;
}
.table-wrap > .table .title a {
	display: block;
	width: 100%;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: 0.2s;
}
.table-wrap > .table .writer {
	width: 20%;
}
.table-wrap > .table .reply {
	width: 150px;
}
.table-wrap > .table .hit {
	width: 7%;
}
.table-wrap > .table .date {
	width: 90px;
	letter-spacing: -2px;
}
.table-wrap > .table .select {
	width: 5%;
	letter-spacing: -2px;
}
.table-wrap > .table tr.table-etc .name {
	text-align: center;
}
.table-wrap > .table tr.table-total {
	background: var(--light_grey);
}
.table-wrap > .table tr.table-total td {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	font-weight: 500;
}


@media screen and (max-width: 768px) {
	.table-wrap .table {
		table-layout: inherit;
	}
	.table-wrap > .table.table--res thead {
		display: none;
	}
	.table-wrap > .table.table--res {
		border-top: 1px solid var(--grey);
		border-bottom: 1px solid var(--grey);
	}
	.table-wrap > .table.table--res tr {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--light_grey);
		padding: 10px 1rem 1px 0;
	}
	.table-wrap > .table.table--res tr td {
		display: inline-block;
		width: auto;
		padding: 0.5rem;
		border-bottom: none;
		text-align: left;
	}
	.table-wrap > .table.table--res tr:nth-child(n+2) td {
		border-top: none;
	}

	/* board 리스트 table ***************************************/
	.table-wrap > .table.table--res .num {
		display: none;
	}
	.table-wrap > .table.table--res .idx{
		display: none;
		/*text-align: left;*/
	}
	.table-wrap > .table.table--res .title {
		display: block;
		width: calc(100vw - 30px);
		padding: 0.5rem 1rem 0.5rem 0;
	}
	.table-wrap > .table.table--res .title a {
		height: 1.2rem;
	}
	.table-wrap > .table.table--res .reply {
		position: relative;
		width: auto;
		padding: 0.3rem 0.5rem 0.3rem 18px;
		font-size: 0.9rem;
		color: var(--grey);
	}
	.table-wrap > .table.table--res .reply:before {
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		line-height: 1rem;
		color: var(--grey);
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
		content: '\f4ad';
	}
	.table-wrap > .table.table--res .read {
		position: relative;
		padding: 0.3rem 0.5rem 0.3rem 24px;
		font-size: 0.9rem;
	}
	.table-wrap > .table.table--res .writer {
		position: relative;
		padding: 0.3rem 0.5rem 0.3rem 22px;
		font-size: 0.9rem;
		color: var(--grey);
		/*
                position: absolute;
                top: 10px;
                left: 61px;
                padding: 0.5rem 0.5rem 0.5rem 32px;
        */
	}
	.table-wrap > .table.table--res .writer:before {
		display: block;
		position: absolute;
		top: 53%;
		left: 0.5rem;
		transform: translateY(-50%);
		line-height: 1rem;
		color: var(--grey);
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
		content: '\f007';
	}
	.table-wrap > .table.table--res .hit {
		position: relative;
		width: auto;
		padding: 0.3rem 0.5rem 0.3rem 26px;
		font-size: 0.9rem;
	}
	.table-wrap > .table.table--res .hit:before {
		display: block;
		position: absolute;
		top: 52%;
		left: 0.5rem;
		transform: translateY(-50%);
		line-height: 1rem;
		color: var(--grey);
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
		content: '\f06e';
	}
	.table-wrap > .table.table--res .date {
		position: relative;
		width: auto;
		padding: 0.3rem 0.5rem 0.3rem 24px;
		font-size: 0.9rem;
		color: var(--grey);
	}
	.table-wrap > .table.table--res .date:before {
		display: block;
		position: absolute;
		top: 49%;
		left: 0.5rem;
		transform: translateY(-50%);
		line-height: 1rem;
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
		content: '\f272';
	}
	.table-wrap > .table.table--res .file {
		position: relative;
		width: auto;
		padding: 0.3rem 0.5rem;
		font-size: 0.9rem;
		color: var(--grey);
	}
	.table-wrap > .table.table--res .hit {
		display: none;
	}
}


/**********************************************/
/* 02. 공통 설정 - 정렬 **************************/
/**********************************************/
.text-hidden {
	position: absolute;
	visibility: hidden;
	font-size: 0;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.align-middle {
	vertical-align: middle;
}


/**********************************************/
/* 03. 공통 설정 - 버튼 *************************/
/**********************************************/
/* 버튼 정렬 */
.btn-wrap {
	display: -webkit-box; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
	display: -moz-box; /* firefox 19- */
	display: -ms-flexbox; /* IE 10 */
	display: -webkit-flex; /* Chrome */
	display: flex;
}
.btn-wrap.btn-wrap--column {
	-webkit-box-orient: vertical; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
	-moz-box-orient: vertical; /* firefox 19- */
	-ms-flex-direction: column; /* IE 10 */
	-webkit-flex-direction: column; /* Chrome */
	flex-direction: column;
}
.btn-wrap.btn-wrap--column .btn:not(:first-child) {
	margin-top: 0.5rem;
}
.btn-wrap.btn-wrap--justify-center {
	justify-content: center;
}
.btn-wrap.btn-wrap--justify-flex-end {
	-webkit-box-pack: end; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: end; /* Firefox 19- */
	-ms-flex-pack: end; /* IE10 */
	-webkit-justify-content: flex-end; /* Chrome */
	justify-content: flex-end;
}
.btn-wrap.btn-wrap--justify-between {
	justify-content: space-between;
}
.btn-wrap .btn:not(:first-child),
.btn-wrap .badge:not(:first-child){
	margin-left: 0.5rem;
}
.btn-wrap .btn.btn--full:nth-child(n+2) {
	margin-left: 1rem;
}


/* 버튼 사이즈 */
.btn {
	display: inline-block;
	position: relative;
	padding: 0;
	font-size: 1rem;
	white-space: nowrap;
	transition: all 0.3s;
	background: none;
	/*border-radius: 4px;*/
	border: 1px solid rgba(0,0,0,0);
	overflow: hidden;
	cursor: pointer;
	vertical-align: middle;
}
.btn.btn-xxs {
	padding: 0.1rem 0.2rem;
	font-size: 0.8rem !important;
	line-height: 1.2;
}
.btn.btn-xs {
	padding: 0.2rem 0.4rem;
	font-size: 0.9rem !important;
	line-height: 1.4;
}
.btn.btn-sm {
	padding: 0.2rem 0.6rem;
}
.btn.btn-md {
	padding: 0.4rem 1rem;
}
.btn.btn-lg {
	padding: 0.6rem 1.4rem;
	font-size: 1.2rem;
}
.btn.btn-xl {
	padding: 0.8rem 1.8rem;
	font-size: 1.4rem;
}


/* 버튼 라운드 */
.btn--pill {
	border-radius: 50px;
	padding-left: 1rem;
	padding-right: 1rem;
}
.btn-xxs.btn--pill {
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}
.btn-xs.btn--pill {
	padding-left: 0.6rem !important;
	padding-right: 0.6rem !important;
}
.btn-sm.btn--pill {
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}
.btn-md.btn-pill {
	padding-left: 1.3rem;
	padding-right: 1.3rem;
}
.btn-lg.btn-pill {
	padding-left: 3rem;
	padding-right: 3rem;
}
.btn-xl.btn--pill {
	padding-left: 5rem;
	padding-right: 5rem;
}


/* 버튼 색상 */
.btn-main {
	color: var(--white) !important;
	background-color: var(--main-color);
	border-color: var(--main-color) !important;
}
.btn-main:hover, .btn-main:focus {
	background-color: var(--main-color);
	border-color: var(--main-color) !important;
}
.btn-sub {
	color: #ffffff !important;
	background-color: #12bdfd !important;
	border-color: #12bdfd !important;
}
.btn-sub:hover, .btn-sub:focus {
	background-color: #12bdfd !important;
	border-color: #12bdfd !important;
}
.btn-wh {
	color: #f57b29 !important;
	color: #f57b29 !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}
.btn-wh:hover, .btn-wh:focus {
	color: #ffffff !important;
	background-color: #f57b29 !important;
	border-color: #f57b29 !important;
}
.btn-gr {
	color: #ffffff !important;
	background-color: #aaaaaa !important;
	border-color: #aaaaaa !important;
}
.btn-gr:hover, .btn-gr:focus {
	background-color: #8b8a8a !important;
	border-color: #8b8a8a !important;
}
.btn-ch {
	color: #ffffff !important;
	background-color: #666666 !important;
	border-color: #666666 !important;
}
.btn-ch:hover, .btn-ch:focus {
	background-color: #444444 !important;
	border-color: #444444 !important;
}
.btn-outline-main {
	border: 1px solid #f57b29;
	color: #f57b29;
}
.btn-outline-main:hover, .btn-outline-main:focus {
	background: #f57b29;
	color: #ffffff;
}
.btn-outline-bl {
	border: 1px solid #0c99d6;
	color: #0c99d6;
}
.btn-outline-bl:hover, .btn-outline-bl:focus {
	background: #0c99d6;
	color: #ffffff;
}
.btn-outline-og {
	border: 1px solid #ec655c;
	color: #ec655c;
}
.btn-outline-og:hover, .btn-outline-og:focus {
	background: #ec655c;
	color: #ffffff;
}
.btn-outline-grn {
	border: 1px solid #39e0c1;
	color: #39e0c1;
}
.btn-outline-grn:hover, .btn-outline-grn:focus {
	background: #39e0c1;
	color: #ffffff;
}
.btn-outline-yl {
	border: 1px solid #ffc200;
	color: #ffc200;
}
.btn-outline-yl:hover, .btn-outline-yl:focus {
	background: #ffc200;
	color: #ffffff;
}
.btn-outline-ch {
	border: 1px solid #666666;
	color: #666666;
}
.btn-outline-ch:hover, .btn-outline-ch:focus {
	background: #666666;
	color: #ffffff;
}
.btn-outline-gr {
	border: 1px solid #aaaaaa;
	color: #aaaaaa;
}
.btn-outline-gr:hover, .btn-outline-gr:focus {
	background: #aaaaaa;
	color: #ffffff;
}
.btn-outline-wh {
	border: 1px solid #ffffff;
	color: #ffffff;
}
.btn-outline-wh:hover, .btn-outline-wh:focus {
	background: #ffffff;
	color: #666666;
}
.btn-light {
	border: none;
}
.btn-light:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 1;
	-webkit-transform: translate(-105%,0);
	transform: translate(-105%,0);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.25);
}
.btn-light:hover:before,
.btn-light:focus:before {
	opacity: 0;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}



/**********************************************/
/* 04. 뱃지 ************************************/
/**********************************************/
.badge {
	display: inline-block;
	padding: 0.2rem 0.4rem;
	margin: 0 0.1rem;
	text-align: center;
	font-weight: normal;
	/*border-radius: 4px;*/
	white-space: nowrap;
}
.badge-xs {
	padding: 0.1rem 0.3rem;
	font-size: 0.8rem;
	line-height: 1;
}
.badge-sm {
	padding: 0.2rem 0.4rem;
	font-size: 0.9rem;
	line-height: 1.2;
}
.badge-md {
	padding: 0.2rem 0.4rem;
	font-size: 1rem;
	line-height: 1.2;
}
.badge-w-02 {
	width: 2.2rem;
}
.badge-w-03 {
	width: 2.8rem;
}
.badge-w-04 {
	width: 3.4rem;
}
.badge-w-05 {
	width: 4rem;
}
.badge-w-06 {
	width: 4.6rem;
}
.badge-bl {
	background: #1ed6ff;
	color: var(--white);
}
.badge-main {
	background: var(--main-color);
	color: var(--white);
}
.badge-ch {
	background: #666666;
	color: var(--white);
}
.badge-gr {
	background: var(--mid_grey);
	color: var(--white);
}
.badge-grn {
	background: #39e0c1;
	color: var(--white);
}
.badge-yl {
	background: #ffc200;
	color: var(--white);
}
.badge-pk {
	background: #fc388b;
	color: var(--white);
}
.badge-wh {
	background: var(--white);
	color: var(--black);
}
.badge-outline-main {
	border: 1px solid var(--main-color);
	color: var(--main-color);
}
.badge-outline-bl {
	color: #0c99d6;
	border: 1px solid #0c99d6;
}
.badge-outline-ch {
	border: 1px solid #666666;
	color: #666666;
}
.badge-outline-gr {
	border: 1px solid #aaaaaa;
	color: #aaaaaa;
}
.badge-outline-grn {
	border: 1px solid #28b2a5;
	color: #28b2a5;
}
.badge-outline-yl {
	border: 1px solid #ffc200;
	color: #ffc200;
}
.badge--pill {
	border-radius: 25px;
	padding-left: 1rem;
	padding-right: 1rem;
}
.badge--float {
	display: block;
	position: absolute;
	top: -0.7rem;
	left: -0.3rem;
	/*border-radius: 4px;*/
	box-shadow: 1px 1px 10px var(--light_grey);
}


/* 하이라이터 */
.highlighter {
	position: relative;
	z-index: 1
}
.highlighter:before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 102%;
	height: 10px;
	background-color: var(--main-color);
	content: '';
	z-index: -1;
}
.highlighter--bold:before {
	height: 1.4rem;
}

/* 텍스트 줄바꿈 */
.line-clamp {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.line-clamp--02 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.5;
	max-height: 3rem;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.line-clamp--03 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.5;
	max-height: 4.5rem;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.line-clamp--04 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.5;
	max-height: 6rem;
	word-wrap: break-word;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.line-clamp--07 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.5;
	max-height: 10.5rem;
	word-wrap: break-word;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
}



/**********************************************/
/* 05. 공통 설정 - 색상 **************************/
/**********************************************/
.bg--white-grey {
	background: var(--white_grey);
}
.color-main {
	color: var(--main-color);
}



/**********************************************/
/* 06. 공통 설정 - 마진 패딩 보더 *****************/
/**********************************************/
/* 마진 */
.mg-t-05 {
	margin-top: 0.5rem;
}
.mg-t-1 {
	margin-top: 1rem;
}
.mg-t-15 {
	margin-top: 1.5rem;
}
.mg-t-2 {
	margin-top: 2rem;
}
.mg-t-3 {
	margin-top: 3rem;
}
.mg-b-05 {
	margin-bottom: 0.5rem;
}
.mg-b-1 {
	margin-bottom: 1rem;
}
.mg-b-2 {
	margin-bottom: 2rem;
}
.mg-b-3 {
	margin-bottom: 3rem;
}
.mg-b-4 {
	margin-bottom: 4rem;
}
.mg-l-03 {
	margin-left: 0.3rem;
}
.mg-l-05 {
	margin-left: 0.5rem;
}
.mg-l-1 {
	margin-left: 1rem;
}
.mg-l-2 {
	margin-left: 2rem;
}
.mg-l-4 {
	margin-left: 4rem;
}
.mg-r-03 {
	margin-right: 0.3rem;
}
.mg-r-05 {
	margin-right: 0.5rem;
}
.mg-r-1 {
	margin-right: 1rem;
}
.mg-r-2 {
	margin-right: 2rem;
}
.remove-mg {
	margin: 0 !important;
}


/* 보더 */
.bd-top {
	border-top: 1px solid var(--light_grey);
}
.bd-bottom {
	border-bottom: 1px solid var(--light_grey);
}
.bd-left {
	border-left: 1px solid var(--light_grey);
}
.bd-right {
	border-right: 1px solid var(--light_grey);
}
.bd-red {
	border: 1px solid red;
}
.bd-blue {
	border: 1px solid blue;
}
.bd-green {
	border: 1px solid green;
}
.bd-pink {
	border: 1px solid pink;
}



/**********************************************/
/* 07. 공통 설정 - 텍스트 ************************/
/**********************************************/
a {
	text-decoration: none;
	color: var(--text-color);
}
.hover-main:hover,
.hover-main:focus,
.hover-main.active {
	color: var(--main-color);
	transition: all 0.2s;
}
.txt-wrap {
	margin-bottom: 0.5rem;
}
.font-xs {
	font-size: 0.8rem;
}
.font-sm {
	font-size: 0.9rem;
}
.font-md {
	font-size: 1.1rem;
}
.font-lg {
	font-size: 1.3rem;
}
.font-bold {
	font-weight: bold;
}

/**********************************************/
/* 08. 공통 설정 - 페이지네이션 *******************/
/**********************************************/
.pagination {
	position: relative;
	text-align: center;
}
.pagination .user-pagination-wrap {
	display: inline-block;
}
.pagination .user-pagination-wrap > div {
	display: inline-block;
	position: relative;
	text-align: center;
}
.pagination .user-pagination-wrap > div a,
.pagination .user-pagination-wrap > div span {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0 0.5rem;
}
.pagination .user-pagination-wrap > div a i {
	line-height: 2rem;
}
.pagination .user-pagination-wrap > div:hover a,
.pagination .user-pagination-wrap > div:focus a {
	color: var(--main-color);
}

/* 페이지네이션 st 01*/
.pagination.pagination-01 .user-pagination-wrap > div {
	width: 2.8rem;
	height: 2.8rem;
	line-height: 2.6rem;
}
.pagination.pagination-01 .user-pagination-wrap > div.on span {
	background: var(--main-color);
	color: var(--white);
	border: 2px solid var(--main-color);
}
.pagination.pagination-01 .user-pagination-wrap > div a,
.pagination.pagination-01 .user-pagination-wrap > div span {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0 0.5rem;
	border: 2px solid rgba(255,255,255,0);
	transition: all 0.3s;
}
.pagination.pagination-01 .user-pagination-wrap > div:hover a,
.pagination.pagination-01 .user-pagination-wrap > div:focus a {
	border: 2px solid var(--main-color);
	color: var(--main-color);
}

/* 페이지네이션 st 01*/
.pagination.pagination-02 .user-pagination-wrap > div.on span {
	background: none;
	color: var(--main-color);
	border: none;
}
.pagination.pagination-02 .user-pagination-wrap > div:hover a,
.pagination.pagination-02 .user-pagination-wrap > div:focus a {
	border: none;
	color: var(--main-color);
}
/**********************************************/
/* 10. 공통 설정 - 엘리먼트 레이아웃 ***************/
/**********************************************/
.thumbnail {
	width: 100%;
	margin-bottom: 2rem;
}
.thumbnail .thumbnail__img {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 60%;
	overflow: hidden;
}
.thumbnail .thumbnail__img img {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s;
	object-fit: cover;
	object-position: center 20%;
}
.thumbnail .thumbnail__img.hover-img:hover img,
.thumbnail .thumbnail__img.hover-img:focus img {
	transform: scale(1.1);
	transition: all 0.5s;
}
.thumbnail .thumbnail__title {
	font-weight: bold;
}
.thumbnail .thumbnail__info {
	font-size: 0.8rem;
	color: var(--light_grey);
}
.thumbnail .thumbnail__info .thumbnail__info-item > ul > li:not(:first-child) {
	margin-left: 0.5rem;
}


/* 썹네일 - 유저 아이콘 */
.thumbnail.thumbnail-user {
	display: flex;
	margin-bottom: 1.5rem;
}
.thumbnail.thumbnail-user .thumbnail__img {
	width: 50px;
	padding-top: 50px;
}
.thumbnail.thumbnail-user .thumbnail__info {
	width: calc(100% - 60px);
	margin-left: 10px;
}



/* 드롭다운 */
.dropdown {
	position: relative;
}
/*.dropdown .dropdown__btn {*/
/*	padding: 0 0.5rem;*/
/*}*/
.dropdown button {
	display: inline-block;
	border: none;
}
.dropdown .dropdown__btn img {
	height: 1rem;
	vertical-align: middle;
}
.dropdown .dropdown__group {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	left: 50%;
	transform: translateX(-50%);
	background: var(--white);
	white-space: nowrap;
	box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
	box-sizing: border-box;
	/*border-radius: 5px;*/
	color: #454545;
	transition: all 0.3s;
	z-index: 101;
}
.dropdown .dropdown__group.right {
	transform: translateX(0);
	left: auto;
	right: 0;
}
.dropdown .dropdown__group.left {
	transform: translateX(0);
	right: auto;
	left: 0;
}
.dropdown .dropdown__group.open {
	visibility: visible;
	opacity: 1;
}
.dropdown .dropdown__group .dropdown__list .dropdown__item {
	position: relative;
	cursor: pointer;
	font-weight: 400;
	line-height: 40px;
	list-style: none;
	min-height: 40px;
	transition: all 0.2s;
}
.dropdown .dropdown__group .dropdown__list .dropdown__item:hover {
	background-color: var(--white_grey);
}
.dropdown .dropdown__group .dropdown__list .dropdown__item:hover a,
.dropdown .dropdown__group .dropdown__list .dropdown__item:focus a,
.dropdown .dropdown__group .dropdown__list .dropdown__item:hover button,
.dropdown .dropdown__group .dropdown__list .dropdown__item:focus button {
	color: var(--main-color);
}
.dropdown .dropdown__group .dropdown__list .dropdown__item a,
.dropdown .dropdown__group .dropdown__list .dropdown__item button {
	display: inline-block;
	width: 100%;
	padding: 0 0.8rem;
	font-size: 0.9rem;
	background: none;
}
.dropdown .dropdown__group .dropdown__list .dropdown__item
.list_icon {
	margin-right: 0.5rem;
}
.dropdown .dropdown__group .dropdown__list .dropdown__item a .user_alarm {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0.5rem;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	font-size: 0.7rem;
	text-align: center;
	border-radius: 50%;
	background: #c30f42;
	color: var(--white);
	animation: none;
}



/* 검색 옵션 바 */
.option-bar {
	display: -webkit-box; /* Android 2.1 ~ 4.3, iso 6-, safari 3.1-6 */
	display: -moz-box; /* firefox 19- */
	display: -ms-flexbox; /* IE 10 */
	display: -webkit-flex; /* Chrome */
	display: flex;
	-webkit-box-pack: justify; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
	-moz-box-pack: justify; /* Firefox 19- */
	-ms-flex-pack: justify; /* IE10 */
	-webkit-justify-content: space-between; /* Chrome */
	justify-content: space-between;
	margin-bottom: 1rem;
	white-space: nowrap;
}
.option-bar .option-bar__search {
	order: 2;
}
.option-bar .option-bar__count {
	order: 1;
	align-self: flex-end;
}
.option-bar .form-group > div {
	margin-left:  0.5rem;
}

@media screen and (max-width: 768px) {
	.option-bar.option-bar--res {
		flex-direction: column;
	}
	.option-bar .option-bar__count {
		/*margin-bottom: 0.5rem;*/
		/*align-self: flex-start;*/
		font-size: 0.8rem;
	}
	.option-bar .form-group .input-group:not(:first-child) {
		margin-top: 0.5rem;
	}
	.option-bar .form-group > div {
		margin-left: 0;
	}
}



/**********************************************/
/* 99. 플러그인 *********************************/
/**********************************************/
.nice-select {
	height: 34px;
	line-height: 32px;
	color: var(--black);
	border: 2px solid var(--grey);
	/*border-radius: 25px;*/
	border-radius: 0;
	background: var(--white_grey);
}
.nice-select:active,
.nice-select.open,
.nice-select:focus,
.nice-select:hover {
	color: var(--main-color);
	border: 2px solid var(--main-color);
}
.nice-select:after {
	border-bottom: 2px solid var(--black);
	border-right: 2px solid var(--black);
}
.nice-select:active:after,
.nice-select:focus:after,
.nice-select.open:after,
.nice-select:hover:after {
	border-bottom: 2px solid var(--main-color);
	border-right: 2px solid var(--main-color);
}
.nice-select .list {
	border-radius: 0;
}
.nice-select .option,
.nice-select .option.selected {
	color: var(--main-color);
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
	background-color: rgba(236, 15, 112, 0.1);
}