body {
	margin: 0;
	height: 0;
}

#loading-logo{
	position: fixed;
	width: 40vmin;
	height: 13vmin;
	background-image: url('../img/logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 3vmax;
	margin-left: 3vmax;
}

#loading-logo-1{
	position: fixed;
	width: 60vw;
	height: 4.25vw;
	background-image: url('../img/logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 3vh;
	margin-left: 3vw;
}

#loading-background{
	background-image: url('../img/background.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100vh;
}

#loading-box-center{
	padding-top: 39vh;
}

.loader {
	margin-left: 50%;
	transform: translateX(-50%);
    width: 12vw;
    height: 12vw;
    font-size: 10px;
    position: relative;
	
}

.loader .face {
    position: absolute;
    border-radius: 50%;
/*    border-style: solid; */
    animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    background-image: url('../img/Line1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
    --deg: -45deg;
    animation-direction: normal;
	animation: animate 5s linear infinite;
}

.loader .face:nth-child(2) {
    width: 100%;
    height: 100%;
    background-image: url('../img/Line2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    --deg: -135deg;
    animation-direction: reverse;
	
}
.loader .face:nth-child(3) {
    width: 100%;
    height: 100%;
    background-image: url('../img/Line3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    --deg: -45deg;
    animation-direction: normal;
	animation: animate 2s linear infinite;
}

#cut-box{
	width: 50vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

#loading-text{
	float: left;
	margin-top: 2vh;
	margin-left: 18%;
	width: 50%;
	height: 3vh;
	background-image: url('../img/loading.png');
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain;
}

.loading-point{
	float: left;
	margin-top: 2vh;
	margin-left: 1.2vw;
	width: 1vw;
	height: 3.5vh;
	background-image: url('../img/point.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#p1{
	margin-left: 1.2vw;
	animation: shower 1s linear infinite;
	animation-delay: 1s;
}

#p2{
	animation: shower 1.5s linear infinite;
	animation-delay: 0.5s;
}

#p3{
	animation: shower 2s linear infinite;
}


@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}

@keyframes shower{
	to{
		opacity: 0;
	}
}