#wrap {  min-height: 100vh; background-position-x: center;  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20rem;}
#wrap .img_wrap { text-align: center; }
#wrap .img_wrap img { width: 80%; max-width: 35rem;}
#wrap .loading_wrap { text-align: center;}
#wrap .loading_wrap .bar { width: 120px; height: 10px; background: #ddd; position: relative; overflow: hidden;}
#wrap .loading_wrap .bar:after { content: ''; position: absolute; top: 0; left: 0; width:30%; height: 100%; background: linear-gradient(45deg, #76e2e5, #70babe);  -webkit-animation: loadingBar 1.8s;-o-animation: loadingBar 1.8s;animation: loadingBar 1.8s;animation-fill-mode: both;}
#wrap .loading_wrap .bar:before { content: ''; position: absolute; top: 0; left: 25%; width:10px; height: 10px; background: #71c1c5; border-radius: 50%; z-index: 1;  -webkit-animation: loadingBefore 1.8s;
-o-animation: loadingBefore 1.8s;
animation: loadingBefore 1.8s;animation-fill-mode: both;}
#wrap .loading_wrap p { font-size: 1.8rem; font-weight: 700; margin-top: .8rem; color: #6fb6ba;}

@keyframes loadingBar { 
	0% { width: 30%;}
	100% { width: 100%;}
}

@keyframes loadingBefore { 
	0% { left: 25%;}
	100% { left: 95%;}
}