@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	/*overscroll-behavior: none;*/
	font-family: var(--default-font);
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, address, img, strong, b, u, i, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, summary, audio, video, button, textarea, input, select, svg {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--default-font);
	outline: none;	
	word-break: keep-all;
	letter-spacing: 0.3pt;
	list-style: none;
	font-style: normal;

}

select{
	color: var(--blackLevel9);
	background:var(--bg0);
	cursor: pointer;
}

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block;}
#accessibility, legend, caption { display: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: none;}
table { border-collapse: collapse; border-spacing: 0;}
img { margin: 0px; padding: 0px; border: 0px none; vertical-align: top;}
textarea { resize: none;}
iframe { vertical-align: top;}
a {	text-decoration: none; user-select: none; padding: 0px;	margin: 0px; color: var(--text0);}
button { cursor: pointer;}

body {	
	font-family: var(--default-font);
	-webkit-text-size-adjust: 100%;
	color: var(--blackLevel9);
	overflow-y: hidden;
	min-height: 100dvh;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.3px;
}

/*placeholder*/
::-webkit-input-placeholder { color: var(--blackLevel5);}
::-moz-placeholder { color: var(--blackLevel5);}
:-ms-input-placeholder { color: var(--blackLevel5);}
:-moz-placeholder {	color: var(--blackLevel5);}

/*scrollbar
*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	transition: background-color 2s;
}
*::-webkit-scrollbar:hover {
	width: 4px;
	height: 4px;
	transition: background-color 2s;
}
*::-webkit-scrollbar-track {
	background-color: var(--blackLevel1);
}
*::-webkit-scrollbar-thumb {
	background-color: #bfdacb;
}
*/
/* material symbols */
.material-symbols-outlined,
.material {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.blur {
	filter: blur(4px);
}

.tac { text-align: center !important;}
.tal { text-align: left !important;}
.tar { text-align: right !important;}

.red { color: var(--red);}

.w100per { width: 100% !important;}

.loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.5);
}

.loadingBox {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: backgroundChange 5s infinite steps(1),
				radiusChange 6s infinite ease-in-out;
}

.imageContainer {
	width: 40px;
	height: 40px;
	position: relative;
}

.imageContainer img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: imageChange 6s infinite steps(1);
}

.imageContainer img:nth-child(1) { animation-delay: 0s; }
.imageContainer img:nth-child(2) { animation-delay: 1s; }
.imageContainer img:nth-child(3) { animation-delay: 2s; }
.imageContainer img:nth-child(4) { animation-delay: 3s; }
.imageContainer img:nth-child(5) { animation-delay: 4s; }
.imageContainer img:nth-child(6) { animation-delay: 5s; }

@keyframes imageChange {
	0%, 16.66% { opacity: 1; }
	16.67%, 100% { opacity: 0; }
}

@keyframes backgroundChange {
	0% { background-color: #3bcf00; }
	20% { background-color: #db9600; }
	40% { background-color: #e200e2; }
	60% { background-color: #00c2e4; }
	80% { background-color: #ff5e00; }
	100% { background-color: #4c00ff; }
}

@keyframes radiusChange {
    0%, 100% { border-radius: 50%; }
    16.66% { border-radius: 40%; }
    33.32% { border-radius: 30%; }
    49.98% { border-radius: 10%; }
    66.64% { border-radius: 50%; }
    83.3% { border-radius: 30%; }
}


.loadingBox2 {
	padding: 40px 40px 0 40px;
	border-radius: 10px;
	background: var(--bg0);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.colavo2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.colavo2 > div {
	display: flex;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 3px;
	white-space: nowrap;
}
.colavo2 > div img { margin-top: 2px;}
.colavo2 > div strong { font-size: 15px;}


.switch1 {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 34px;
	height: 22px;
	vertical-align: middle;
	cursor: pointer;
}

.switch1 > input[type="checkbox"] {
	display: none;
}

.switch1 > i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	background: var(--blackLevel3);
	transition: all 0.1s;
	pointer-events: none;
}

.switch1 > i::before {
	content: 'radio_button_unchecked';
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	font-variation-settings: 'FILL' 1, 'wght' 600;
	position: absolute;
	left: 1px;
	right: auto;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	overflow: hidden;
	color: var(--blackLevel0);
	background: var(--blackLevel0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s;
	pointer-events: none;	
}

.switch1 > input[type="checkbox"]:checked + i {
	background: var(--naverBg);
}

.switch1 > input[type="checkbox"]:checked + i::before {
	content: 'check_circle';
	left: 14px;
	color: var(--naver);
	box-shadow: none;
}