body {
    overflow: hidden;
}    
.enter-x-btm {
        z-index: 9;
        opacity: 0;
        animation: enter-x-btm 1s ease-in-out 0.5s;
        animation-fill-mode: forwards;
        transform: translateY(-50px);
    }
	.enter-x-left1 {
        z-index: 9;
        opacity: 0;
        animation: enter-x-left 1s ease-in-out 0.7s;
        animation-fill-mode: forwards;
        transform: translateX(-100px);
    }
	 .enter-x-left2 {
        z-index: 9;
        opacity: 0;
        animation: enter-x-left 1s ease-in-out 1s;
        animation-fill-mode: forwards;
        transform: translateX(-100px);
    }
	
	.enter-x-left3 {
        z-index: 9;
        opacity: 0;
        animation: enter-x-left 1s ease-in-out 1.5s;
        animation-fill-mode: forwards;
        transform: translateX(-100px);
    }
	
	
	.enter-x-top {
        z-index: 9;
        opacity: 0;
        animation: enter-x-top 0.6s ease-in-out 2s;
        animation-fill-mode: forwards;
        transform: translateY(50px);
    }
    @keyframes enter-x-left {
        to {
          opacity: 1;
          transform: translateY(0);
        }
     }
	 
	@keyframes enter-x-top {
        to {
          opacity: 1;
          transform: translateX(0);
        }
     }
	 
	@keyframes enter-x-btm{
        to {
          opacity: 1;
          transform: translateX(0);
        }
     }
	 
	 
	 @keyframes fade {
	  0% {
		  opacity: 0;
	  }
	  50% {
		  opacity: 0.5
	  }
	  100% {
		  opacity: 1;
	  }
	}
	.image {
		opacity: 1;
		width: 50px;
		height: 50px;
		animation: enter-x-btm 1s ease 0.3s;
	}

.mode-view {
    width: 100%;
    /* max-width: 1920px; */
    min-width: 60vw;
    margin: 0 auto;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

    .mode-view > .mode-view-flashing {
        width: 0.15vw;
        height: 0.15vw;
        position: absolute;
        animation-name: flashing;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        background: radial-gradient(at center, #dddddd, #011a3b);
        border-radius: 50%;
    }

.flashing-delay0 {
    animation-delay: 0s;
}

.flashing-delay1_2 {
    animation-delay: 1.2s;
}

.flashing-delay0_7 {
    animation-delay: 0.7s;
}

.flashing-delay1_9 {
    animation-delay: 1.9s;
}

.flashing-duration1 {
    animation-duration: 1.4s;
}

.flashing-duration2 {
    animation-duration: 1.6s;
}

.flashing-duration3 {
    animation-duration: 1.8s;
}

.flashing-duration4 {
    animation-duration: 2s;
}

@keyframes flashing {
    from {
        transform: scale(0.5);
    }

    to {
        transform: scale(1.2);
    }
}


.star {
    display: block;
    width: 0.25vw;
    height: 0.25vw;
    border-radius: 50%;
    background: #fff;
    top: 5vw;
    left: 20vw;
    position: relative;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
    animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
    -webkit-box-shadow: 0 0 0.25vw 0.25vw rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0.25vw 0.25vw rgba(255, 255, 255, 0.3);
    opacity: 0;
    z-index: 2;
}

    .star:after {
        content: "";
        display: block;
        top: 0;
        left: 0.2vw;
        border: 0 solid #fff;
        border-width: 0 4.5vw 0.1vw;
        border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
        -webkit-transform: rotate(-45deg) translate3d(0.05vw, 0.15vw, 0);
        transform: rotate(-45deg) translate3d(0.05vw, 0.15vw, 0);
        -webkit-box-shadow: 0 0 0.05vw 0 rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 0.05vw 0 rgba(255, 255, 255, 0.1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }


@-webkit-keyframes star-opacity {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes star-opacity {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes star-pos {
    0% {
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
    }
}

@keyframes star-pos {
    0% {
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-22.5vw, 22.5vw, 0);
    }
}