@charset "utf-8";
/*@import "./reset.css";*/
:root {
	--loadingSize: 60px;
	--barSize: 6px;
}
.loading__container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 20px 0;
}
.loading__container.__full {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(255,255,255,0.3);
	overflow: hidden;
}
.loading__container.__full:before {
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
}

.loading__wrap {
	position: relative;
	display: block;
	width: 150px;
	height: 100px;
	margin: 0 auto;
}

.loading__wrap .loading__box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: var(--loadingSize);
}
/*.loading__wrap .loading__comment {*/
/*	position: absolute;*/
/*	top: 76px;*/
/*	left: 0;*/
/*	right: 0;*/
/*	font-family: NotoSansKR, 'Noto Sans KR', sans-serif;*/
/*	font-weight: 400;*/
/*	font-size: 16px;*/
/*	line-height: 1.5;*/
/*	text-align: center;*/
/*	letter-spacing: -0.35px;*/
/*	color: #747A86;*/
/*}*/

.loading__wrap .loading__box .loading {
	position:absolute;
	top: 50%;
	left: 50%;
	right: 0;
	transform:translate(-50%,-50%);
	width: var(--loadingSize);
	height: var(--loadingSize);
	background:transparent;
	border: var(--barSize) solid #E8EBF2;
	border-radius:50%;
}
.loading__wrap .loading__box .loading:before {
	content:'';
	position:absolute;
	top: -6px;
	left:-6px;
	width: var(--loadingSize);
	height: var(--loadingSize);
	background: url("../image/main/loading__bar@2x.png") 100% 0% no-repeat;
	background-size: 30px 30px;
	border-radius:50%;
	animation:spin 1.5s linear infinite;
	box-sizing: content-box;
}

@keyframes spin
{
	0%
	{
		transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
	}
}


@media screen and (max-width: 639px) {
	:root {
		--loadingSize: 40px;
		--barSize: 4px;
	}
	.loading__wrap {
		height: 80px;
	}
	.loading__wrap .loading__box .loading:before {
		content:'';
		position:absolute;
		top: -4px;
		left:-4px;
		background: url("../image/main/loading__bar2@2x.png") 100% 0% no-repeat;
		background-size: 20px 20px;
	}
	/*.loading__wrap .loading__box .loading__comment {*/
	/*	top: 56px;*/
	/*	font-weight: 400;*/
	/*	font-size: 16px;*/
	/*	text-align: center;*/
	/*	letter-spacing: -0.35px;*/
	/*	color: #747A86;*/
	/*}*/
}