.loading-custom-root {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	display: none;
	justify-content: center;
	overflow: hidden;
	z-index: 1000;
	top: 0;
	transform: translateZ(0);
}

.loading-hide {
	display: none;
}

@keyframes hide-key {
	0% {
		opacity: 100%;
	}

	100% {
		opacity: 0;
	}
}

.loding-top-bg, .loding-bottom-bg, .loading-car-box {
	position: absolute;
	left: 0;
	width: 100%;
}

.loding-top-bg, .loading-car-box {
	height: 50%;
	top: 0;
}

.loding-bottom-bg {
	bottom: 0px;
	height: 50.5%;
}

.loading-car-box {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	height: 51%;
}

.box-test-wap {
	position: absolute;
	width: 410px;
	height: 160px;
	overflow: hidden;
}

.loading-car, .loading-car2 {
	position: absolute;
	width: 406px;
	aspect-ratio: 406 / 165;
}

.loading-car-light {
	width: 100%;
	height: 51%;
	left: 0%;
	position: absolute;
	top: 0;
	aspect-ratio: 1043 / 769;
}

.loading-car-light.loading-car-light-animation {
	transform: translateZ(0);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	animation: text-red 2s linear infinite;
}

@keyframes text-red {
	from {
		transform: translateX(-20%);
        -webkit-transform: translate3d(-20%, 0, 0);
        -moz-transform: translate3d(-20%, 0, 0);
        -ms-transform: translate3d(-20%, 0, 0);
	}

	to {
		transform: translateX(100%);
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
	}
}

.loading-custom-root img {
	width: 100%;
	height: 100%;
}

.loading-car-light img {
	width: 50%;
}

.loading-car-box .logo-img, .drak-mask-content {
	width: 400px;
	aspect-ratio: 479 / 56;
	height: unset;
	align-self: center;
}

.box {
	width: 410px;
	height: 160px;
	overflow: hidden;
	position: absolute;
}

.box-box {
	width: 8200px;
	animation: name1 2s steps(19) both infinite;
	background: url('../images/loading/1.png') no-repeat;
	height: 160px;
	will-change: transform;
}

@keyframes name1 {
	0%, 20% {
		transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
	}

	60%, 100% {
		transform: translate3d(-7790px, 0, 0);
        -webkit-transform: translate3d(-7790px, 0, 0);
        -moz-transform: translate3d(-7790px, 0, 0);
        -ms-transform: translate3d(-7790px, 0, 0);
	}
}

.drak-mask {
	background: rgb(0, 0, 0, .55);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.drak-mask.show-mask {
	opacity: 1;
	transition: 1s ease-in;
}

.drak-mask.show-mask.hide-mask {
	opacity: 0;
	transition:all 1.2s linear;
}

.loading-car-box.loading-img-hidden {
	opacity: 0;
}

.loading-car-box-hide {
	opacity: 0;
	transition: .4s all linear;
}

@media screen and (max-height: 991px) and (max-width: 1401px) and (min-width: 1025px) {
    .box {
		width: 205px;
		height: 80px;
		overflow: hidden;
		position: absolute;
	}

	.box-box {
		width: 4100px;
		animation: name1 2s steps(19) both infinite;
		background: url('../images/loading/2.png') no-repeat;
		height: 80px;
	}
    
        @keyframes name1 {
            0%, 20% {
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
            }

            60%, 100% {
                transform: translate3d(-3895px, 0, 0);
                -webkit-transform: translate3d(-3895px, 0, 0);
                -moz-transform: translate3d(-3895px, 0, 0);
                -ms-transform: translate3d(-3895px, 0, 0);
            }
        }

    .loading-car-box .logo-img {
        margin-bottom: 6%;
    }

    .loading-car-box .logo-img {
        width: 210px;
    }

    .loading-car-box {
        top: 0.9%;
    }

    .loading-car-light img {
        width: 40%;
    }
}

@media screen and (max-width: 1025px) {
	.box {
		width: 205px;
		height: 80px;
		overflow: hidden;
		position: absolute;
	}

	.box-box {
		width: 4100px;
		animation: name1 2s steps(19) both infinite;
		background: url('../images/loading/2.png') no-repeat;
		height: 80px;
	}
    
    @keyframes name1 {
		0%, 20% {
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
        }

	    60%, 100% {
            transform: translate3d(-3895px, 0, 0);
            -webkit-transform: translate3d(-3895px, 0, 0);
            -moz-transform: translate3d(-3895px, 0, 0);
            -ms-transform: translate3d(-3895px, 0, 0);
        }
    }

.loading-car-box .logo-img {
	margin-bottom: 6%;
}

.loading-car-box .logo-img {
	width: 210px;
}

.loading-car-box {
	top: 0.9%;
}

.loading-car-light img {
	width: 40%;
}
}