.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 666;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: all 1s 2.5s ease;
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 17%;
    height: 100%;
    background: #000;
    z-index: 2;
}


/*/ When page loaded /*/
.loaded .loder-section{
  top: -100%;
}


.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}


#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
}


.menu-3{
  animation:biaoti-yd 1.5s ease 1.5s backwards !important;
}
.con-title{
  animation:title-yd 2s ease 3s backwards !important;
}
.move-down{
  animation: move-down 2s ease 3.5s backwards !important;
}
.move-up{
  animation: move-up 2s ease 4s backwards !important;
}
.clip-a-z {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.5s 3s ease-in-out !important;
	transition: -webkit-transform 0.5s 3s ease-in-out !important;
	transition: transform 0.5s 3s ease-in-out !important;
	transition: transform 0.5s 3s ease-in-out, -webkit-transform 0.5s 3s ease-in-out !important;
	-webkit-animation: clip-a-z 2s ease 3s backwards !important;
	animation: clip-a-z 2s ease 3s backwards !important;
	
}