@charset "utf-8";
#loading{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background: #1D1302;
	background: linear-gradient(90deg,#1D1302 0%,#1F1200 100%);
	z-index: 100000;
	opacity: 1;
}
.loaderW{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: visible;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  font-weight: bold;
  font-size: 24px;
	height: 30px;
  clip-path: inset(0 100% 0 0);
  animation: l5 2s steps(11) infinite;
	overflow: visible;
}
.loader:before {
  content:"Loading...";
}
@keyframes l5 {to{clip-path: inset(0 -1ch 0 0)}}

.progress{
	position: relative;
	margin: 5px auto 0 auto;
	width: calc(100% + 60px);
	transform: translateX(-30px);
	height: 20px;
	background-color: #433317;
	border: solid 2px #614D2B;
	border-radius: 100px;
	overflow: hidden;
}
.progress::before{
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: calc(100% - 4px);
	content: '';
	background-image: url("../img/icon.png");
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: auto 100%;
	animation: pbar 2.5s ease-in 0s 1 normal forwards;
	z-index: 100020;
}
.progress::after{
	position: absolute;
	top: 2px;
	left: 0;
	width: 15px;
	height: calc(100% - 4px);
	content: '';
	background-color: #1D1302;
	clip-path: polygon(0% 0%, calc(100% - 20px) 0%, calc(100% - 5px) 50%, calc(100% - 20px)  100%, 0% 100%);
	animation: pbar 2.5s ease-in 0s 1 normal forwards;
}
@keyframes pbar {
	0%{width: 15px;}
	100% { width: 100%;}
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	.loader {font-size: 30px;height: 40px;}
}