@font-face {
	font-family: "Red Hat";
	src: local("RedHatDisplay"), url("../fonts/RedHatDisplay-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Red Hat";
	src: local("RedHatDisplay"), url("../fonts/RedHatText-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Red Hat";
	src: local("RedHatDisplay"), url("../fonts/RedHatDisplay-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Red Hat";
	src: local("RedHatDisplay"), url("../fonts/RedHatDisplay-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: local("Pretendard"), url("../fonts/Pretendard-Bold.subset.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: local("Pretendard"), url("../fonts/Pretendard-SemiBold.subset.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: local("Pretendard"), url("../fonts/Pretendard-Medium.subset.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pretendard";
	src: local("Pretendard"), url("../fonts/Pretendard-Regular.subset.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

*						{ font-family:"Red Hat", "Pretendard", Arial, sans-serif !important; outline:none; margin:0; padding:0; border:0; }
html, body				{ width:100%; height:100%;}

section		{ width:100%; position:relative; }
a			{ text-decoration:none; font-size:12px; line-height:18px; }
ul, li		{ list-style:none; position:relative; }
table		{ border-collapse:collapse; width:100%; }

label			{ display:inline-block; margin: 10px 10px 10px 3px; cursor:pointer; font-size:13px; }
label > input	{ margin-right:5px; margin-top:-2px; vertical-align:middle; }

textarea,
select,
input				{ border:1px solid lightgrey; padding:10px; resize:none; border-radius: 4px;} 
input[type=submit]	{ cursor:pointer; }
input[type=checkbox] {
	transform: translateY(3px);
}
input[type=radio] {
	transform: translateY(3px);
}

.mot3 {
	-webkit-transition:	all 0.3s ease-out;
	-moz-transition:	all 0.3s ease-out;
	-o-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out;
}

.hidden			{ display:none !important; }
.bold			{ font-weight:bold !important; }
.red			{ color:#ff0000 !important; }
.green			{ color:#00d500 !important; }
.gray			{ color:#808080 !important; }

.click			{ cursor:pointer; border:1px solid transparent; }
.click:hover	{ border:1px solid #ffffff; background-color:#003CDC; color:white; }

.blackBtn, .blackBtn-round				{ background-color:#000000; color:#ffffff; border:1px solid #000000; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.blackBtn:hover, .blackBtn-round:hover	{ background-color:#ffffff; color:#000000; }
.blackBtn-round 						{ border-radius: 7px; }

.lightBtn, .lightBtn-round 				{ background-color:#ffffff; color:#808080; border:1px solid #808080; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.lightBtn:hover, .lightBtn-round:hover 	{ background-color:#808080; color:#ffffff; }
.lightBtn.active, .lightBtn-round.active{ background-color:#808080; color:#ffffff; }
.lightBtn-round 						{ border-radius: 7px; }

.grayBtn, .grayBtn-round 				{ background-color:#808080; color:#ffffff; border:1px solid #808080; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.grayBtn:hover, .grayBtn-round:hover 	{ background-color:#ffffff; color:#808080; }
.grayBtn-round 							{ border-radius: 7px; }

/* 색에 맞춰 blue->#F37321 변경 */
.blueBtn, .blueBtn-round 				{ background-color: #314fcc; color:#ffffff; border:1px solid #314fcc; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.blueBtn:hover, .blueBtn-round:hover 	{ background-color:#ffffff; color:#314fcc; }
.blueBtn-round 							{ border-radius: 7px; }

.redBtn, .redBtn-round 					{ background-color:#ff6262; color:#ffffff; border:1px solid #ff6262; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.redBtn:hover, .redBtn-round:hover		{ background-color:#ffffff; color:#ff6262; }
.redBtn-round 							{ border-radius: 7px; }

.greenBtn, .greenBtn-round				{ background-color:#35792f; color:#ffffff; border:1px solid #35792f; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.greenBtn:hover, .greenBtn-round:hover	{ background-color:#ffffff; color:#35792f; }
.greenBtn-round 						{ border-radius: 7px; }

.whiteBtn, .whiteBtn-round				{ background-color:#ffffff; color:#808080; border:1px solid #d3d3d3; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.whiteBtn:hover, .whiteBtn-round:hover	{ background-color:#d3d3d3; }
.whiteBtn-round 						{ border-radius: 7px; }

.langBtn, .langBtn-round 					{ background-color:#ffffff; color:#808080; border:1px solid #d3d3d3; display:inline-block; padding:8px 20px; cursor:pointer; text-align:center; vertical-align:middle; user-select: none; /* Safari */-webkit-user-select: none; }
.langBtn:hover, .langBtn-round:hover 		{ background-color:#d3d3d3; color:#ffffff; }
.langBtn.active, .langBtn-round.active		{ border:3px solid black; }
.langBtn.invalid, .langBtn-round.invalid	{ background-color:#e8511c; color:#ffffff; }
.langBtn.valid, .langBtn-round.valid		{ background-color:#00bf4b; color:#ffffff; }
.langBtn-round 								{ border-radius: 7px; }




select::-ms-expand	{ background-color:white; border:0; }
select.yn	{ width:72px; height:30px; background:#ffffff; border:0; cursor:pointer; }
.Y { color:#0080ff !important; }
.N { color:#ff0000 !important; }


.opacity50 { opacity:0.5; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)"; -khtml-opacity:0.5; -moz-opacity:0.5; }

span.length				{ display:inline-block; margin-left:5px; user-select:none; }
textarea + span.length	{ vertical-align:bottom; }

input.dateY,
input.dateYM,
input.date				{ padding-left:30px !important; width:80px; cursor:pointer; position:relative; vertical-align:top; padding-right:5px !important; }
span.dateIcon			{ display:inline-block; width:0; cursor:pointer; }
span.dateIcon:before	{ content:url('../images/common/calendar.png'); position:relative; top:10px; left:6px; z-index:1; }
#ui-datepicker-div.dateYear table.ui-datepicker-calendar,
#ui-datepicker-div.dateYear a.ui-datepicker-prev,
#ui-datepicker-div.dateYear a.ui-datepicker-next,
#ui-datepicker-div.dateYear span.ui-datepicker-month { display:none; }	/* Datepicker 를 yearPicker 로 사용할 때 필요한 스타일 */

input.w50		{ width: 50px !important; }
input.w100		{ width:100px !important; }
input.w150		{ width:150px !important; }
input.w200		{ width:200px !important; }
input.w250		{ width:250px !important; }
input.w300		{ width:300px !important; }
input.w350		{ width:350px !important; }
input.w400		{ width:400px !important; }
input.w450		{ width:450px !important; }
input.w500		{ width:500px !important; }


/* Loading - Circle spin */
@keyframes circleSpin {
	0%		{ transform: rotate(0deg);	 }
	100%	{ transform: rotate(360deg); }
}