@charset "utf-8";

@import "auth.css";
@import "form.css";

/**********************************************/
/* 00. 공통설정 *********************************/
/**********************************************/
html, body, header, footer, main, section, article, div, aside, menu, nav, canvas, cite, details, img, abbr, hgroup, h1, h2, h3, h4, h5, h6, p, span, strong, small, b, i, a, blockquote, pre, code, address, form, fieldset, legend, hr, label, input, button, select, textarea, iframe, video, audio, time, mark, object, figure, figcaption {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	box-sizing: border-box;
}
header, hgroup, menu, nav, main, section, article, aside, details, figcaption, figure, footer {
	display: block;
}
html, body, input, textarea, select, button {
	font-family: 'Noto Sans KR', 'Malgun Gothic','Roboto', Dotum, '돋움', Gulim,Helvetica, sans-serif; -webkit-text-size-adjust: none;
	font-size: 16px;
	color: #666666;
	font-weight: 400;
	letter-spacing: -1px;
	background: #ffffff;
}
.clear {
	clear:both;
}
.clear:after {
	content: '';
	display: block;
	clear: both;
}
.container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}



/**********************************************/
/* 01-1. 공통 레이아웃 - 디스플레이 ***************/
/**********************************************/
.dp-block {
	display: block !important;
}
.dp-inline {
	display: inline-block !important;
}
.dp-none {
	display: none !important;
}
.tablet-start {
	display: none !important;
}
.tablet-end {
	display: block !important;
}
.mobile-start {
	display: none !important;
}
.mobile-end {
	display: block !important;
}
.text-hidden {
	position: absolute;
	visibility: hidden;
	font-size: 0;
}
.vertical-md {
	vertical-align: middle;
}

@media screen and (max-width: 1200px) {
	.pc-end {
		display: none !important;
	}
}
@media screen and (max-width: 1024px) {
	.tablet-start {
		display: block !important;
	}
	.tablet-end {
		display: none !important;
	}
}
@media screen and (max-width: 768px) {
	.mobile-start {
		display: block !important;
	}
	.mobile-end {
		display: none !important;
	}
}



/**********************************************/
/* 01-2. 공통 레이아웃 - 마진/패딩 ****************/
/**********************************************/
.w-50 {
	width: 50%;
}
.w-100 {
	width: 100%;
}
.h-100 {
	height: 100%;
}
.remove-mg {
	margin: 0;
}
.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-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;
}
.pd-all-1 {
	padding: 1rem;
}


/**********************************************/
/* 01-3. 공통 레이아웃 - 테이블 ******************/
/**********************************************/



/**********************************************/
/* 01-4. 공통 레이아웃 - 리스트 ******************/
/**********************************************/
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;
}

/* 넘버링 리스트 ***************************************/
ol.count-basic {
	counter-reset: ol-count-basic;
}
ol.count-basic .count__item {
	position: relative;
	padding-left: 1.2rem;
	line-height: 1.5;
	counter-increment: ol-count-basic;
}
ol.count-basic li:before {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.5;
	padding-right: 0.5rem;
	content: counter(ol-count-basic)'.';
}
ol.count-basic.count-basic--margin .count__item:not(:first-of-type) {
	margin-top: 0.7rem;
}



/**********************************************/
/* 02. 텍스트 **********************************/
/**********************************************/
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.font-normal {
	font-weight: normal;
}
.font-bold {
	font-weight: bold;
}
.font-xs {
	font-size: 0.9rem;
}
.font-sm {
	font-size: 0.9rem;
}
.font-md {
	font-size: 1.1rem;
}
.font-lg {
	font-size: 1.2rem;
}
.font-xl {
	font-size: 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.2;
	height: 2.4em;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.line-clamp--03 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.2;
	height: 3.6em;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.line-clamp--07 {
	display: -webkit-box;
	white-space: normal;
	line-height: 1.2;
	height: 8.4em;
	word-wrap: break-word;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
}



/**********************************************/
/* 03. 컬러 ************************************/
/**********************************************/
.color-main {
	color: #f57b29 !important;
}
.color-sub {
	color: #12bdfd !important;
}
.color-caution {
	color: #ff0000 !important;
}
.color-red {
	color: #ff0000 !important;
}
.color-pink {
	color: #fc388b !important;
}
.color-blue {
	color: #017cc2 !important;
}
.color-navy {
	color: #020257 !important;
}
.color-wh {
	color: #ffffff !important;
}
.color-gr {
	color: #aaaaaa !important;
}
.color-ch {
	color: #777777 !important;
}
.color-bk {
	color: #000000 !important;
}
.bg-main {
	background-color: #f57b29 !important;
}
.bg-pink {
	background-color: #fc388b !important;
}
.bg-blue {
	background-color: #017cc2 !important;
}
.bg-navy {
	background-color: #020257 !important;
}
.bg-yl {
	background-color: #ffc200 !important;
}
.bg-wh {
	background-color: #ffffff !important;
}
.bg-gr {
	background-color: #aaaaaa !important;
}
.bg-ch {
	background-color: #777777 !important;
}
.bg-bk {
	background-color: #000000 !important;
}
a {
	transition: all 0.3s;
}
.hover-main:hover, .hover-main:focus {
	color: #f57b29;
}



/**********************************************/
/* 04. 버튼 ************************************/
/**********************************************/
.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--justify-center {
	justify-content: center;
}
.btn-wrap--justify-center .btn:not(:first-child) {
	margin-left: 0.5rem;
}
.btn-wrap--justify-flex-end {
	justify-content: flex-end;
}
.btn-wrap--justify-between {
	justify-content: space-between;
}
.btn-wrap .btn.w-100:nth-child(n+2) {
	margin-left: 1rem;
}
.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--column .btn:not(:first-child) {
	margin-top: 0.5rem;
}
.btn {
	display: inline-block;
	position: relative;
	padding: 0.3rem 0.4rem;
	font-weight: 400;
	white-space: nowrap;
	transition: all 0.3s;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0);
	overflow: hidden;
	cursor: pointer;
	vertical-align: middle;
}
.btn-xxs {
	padding: 0.1rem 0.2rem;
	font-size: 0.8rem !important;
	line-height: 1.2;
}
.btn-xs {
	padding: 0.2rem 0.2rem;
	font-size: 0.9rem !important;
	line-height: 1.4;
}
.btn-sm {
	padding: 0.2rem 0.4rem;
}
.btn-md {
	padding: 0.4rem 0.8rem;
}
.btn-lg {
	padding: 0.6rem 1.2rem;
	font-size: 1.2rem;
}
.btn-xl {
	padding: 0.8rem 1.6rem;
	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: #ffffff !important;
	background: linear-gradient(135deg, #36474d 1%, #ced4da 100%) !important;
	border-color: #ced4da !important;
}
.btn-main:hover, .btn-main:focus {
	background: linear-gradient(135deg, #36474d 1%, #ced4da 100%) !important;
	border-color: #ced4da !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: #36474d !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}
.btn-wh:hover, .btn-wh:focus {
	color: #ffffff !important;
	background-color: #36474d !important;
	border-color: #36474d !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 #4b5563;
	color: #4b5563;
}
.btn-outline-main:hover, .btn-outline-main:focus {
	background: #ced4da;
	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 #28b2a5;
	color: #28b2a5;
}
.btn-outline-grn:hover, .btn-outline-grn:focus {
	background: #28b2a5;
	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);
}


@media screen and (max-width: 768px) {
	.btn-wrap.mobile--justify-center {
		justify-content: center;
	}
	.btn-wrap--res {
		flex-direction: column;
	}
	.btn-wrap--res .btn.w-100:nth-child(n+2) {
		margin-left: 0;
		margin-top: 0.5rem;
	}
	.btn-wrap--res .btn {
		margin-top: 0.5rem;
	}
}



/**********************************************/
/* 05. 뱃지 ************************************/
/**********************************************/
.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--width-02 {
	width: 2.2rem;
}
.badge--width-03 {
	width: 2.8rem;
}
.badge--width-04 {
	width: 3.4rem;
}
.badge--width-05 {
	width: 4rem;
}
.badge--width-06 {
	width: 4.6rem;
}
.badge--bl {
	background: #0c99d6;
	color: #ffffff;
}
.badge--main {
	background: #36474d;
	color: #ffffff;
}
.badge--ch {
	background: #666666;
	color: #ffffff;
}
.badge--gr {
	background: #aaaaaa;
	color: #ffffff;
}
.badge--grn {
	background: #28b2a5;
	color: #ffffff;
}
.badge--yl {
	background: #ffc200;
	color: #ffffff;
}
.badge--pk {
	background: #fc388b;
	color: #ffffff;
}
.badge--wh {
	background: #ffffff;
	color: #222222;
}
.badge--main-outline {
	border: 1px solid #36474d;
	color: #36474d;
}
.badge--bl-outline {
	color: #0c99d6;
	border: 1px solid #0c99d6;
}
.badge--ch-outline {
	border: 1px solid #666666;
	color: #666666;
}
.badge--gr-outline {
	border: 1px solid #aaaaaa;
	color: #aaaaaa;
}
.badge--grn-outline {
	border: 1px solid #28b2a5;
	color: #28b2a5;
}
.badge--yl-outline {
	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 #dddddd;
}



/**********************************************/
/* 06. 마우스 오버 / 드롭다운 ********************/
/**********************************************/
.pointer {
	cursor: pointer;
}



/**********************************************/
/* 07. 레이아웃 - 사이드 레이아웃 *****************/
/**********************************************/



/**********************************************/
/* 08. 레이아웃 - 카드 **************************/
/**********************************************/