@charset "utf-8";

/* 초기화 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
	form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

iframe {
	border: 0;
}

img, fieldset {
	border: 0;
}

img, input, button, select, textarea {
	vertical-align: middle;
}

button, a, input[type="button"] {
	cursor: pointer;
}

/* 모바일에서 스타일 제거 */
input[type=text], input[type="password"], input[type="button"], input[type="image"],
	input[type="submit"], input[type="search"], input[type="email"], input[type="url"],
	input[type="number"], input[type="tel"], /* select, */ textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-moz-box-size: border-box;
	box-sizing: border-box;
}

/* button 태그 속성 reset하기 */
/* 기본스타일 정의 */
input[type=text], input[type="password"], input[type="search"], input[type="email"],
	input[type="url"], input[type="number"], input[type="tel"], input[type="date"],
	select, textarea {
	outline: none;
}

textarea {
	resize: none;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

body {
	margin: 0 auto;
	width: 100%;
}

ul, li {
	list-style: none;
}

table {
	word-break: keep-all;
}

a {
	color: inherit;
	text-decoration: none;
}

.mobile-only {
	display: none;
}

button {
	border: none;
}

input:focus, textarea:focus {
	box-shadow: 0px 0px 5px var(--primary50);
}

input[type=radio] {
	box-shadow: none;
}

.d-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.d-flex-c {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.justify-c {
	-webkit-box-pack: center;
	-moz-box-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.justify-s {
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.justify-e {
	-webkit-box-pack: end;
	-moz-box-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.align-c {
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.align-s {
	-webkit-box-align: stretch;
	-moz-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.flex-g {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex-grow: 1;
}

.d-block{
	display:block;
}

.p-r {
	position: relative;
}

.p-a {
	position: absolute;
}

.w-100 {
	width: 100%;
}

.br-100 {
	border-radius: 100px;
}

.br-8 {
	border-radius: 8px;
}

.br-4 {
	border-radius: 4px;
}

:root {
	--primary: #FABE00;
	--primary50: #FCDE7F;
	--primary10: #FFF9E6;
	--dark: #0E0D0B;
	--dark80: #3E3D3C;
	--dark50: #868584;
	--dark20: #CFCFCE;
	--dark5: #F3F3F3;
}

.bg-primary {
	background-color: var(--primary);
}

.bg-primary50 {
	background-color: var(--primary50);
}

.bg-primary10 {
	background-color: var(--primary10);
}

.bg-white {
	background-color: white;
}

.bg-dark {
	background-color: var(--dark);
}

.bg-dark80 {
	background-color: var(--dark80);
}

.bg-dark50 {
	background-color: var(--dark50);
}

.bg-dark20 {
	background-color: var(--dark20);
}

.bg-dark5 {
	background-color: var(--dark5);
}

/* 모바일 반응형 */
@media all and (max-width: 768px) {
	.mobile-only {
		display: block;
	}
	.mobile-none {
		display: none;
	}
}