body {
	  background:url(../img/bg.png) no-repeat center/100%;
	  background-attachment: fixed;
	  overflow: hidden;
	} 
  @-webkit-keyframes rotate {
	  0% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	  }
	  100% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	  }
	}
 @-moz-keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
 @keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
#o{position: fixed;background: rgb(46, 51, 67);width: 100%;height: 100%;left: 0;top: 0;z-index: 999;}
	.pr{position: fixed;width: 80%;height: 60px;z-index: 999;left: 10%;top: 50%;background: none;margin-top: -30px;	}
	.ir{position: absolute;left: 0;top: 50%;z-index: 999;width: 100px;width: 60px;}
	.progressbar{position: absolute;width: 100%;height: 4px;background: #232741;bottom:0;}
	.loading{background: #70afee;height: 100%;width: 0;}
.starss {
  -webkit-transform: perspective(500px);
  -moz-transform: perspective(500px);
  transform: perspective(500px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  -webkit-perspective-origin: 50% 100%;
  -moz-perspective-origin: 50% 100%;
  perspective-origin: 50% 100%;
  left: 50%;
  -webkit-animation: rotate 90s infinite linear;
  -moz-animation: rotate 90s infinite linear;
  animation: rotate 90s infinite linear;
}  
.starx {
  width: 5px;
  height: 5px;
  background: #928bc5;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0 -300px;
  -moz-transform-origin: 0 0 -300px;
  transform-origin: 0 0 -300px;
  -webkit-transform: translate3d(0, 0, -300px);
  -moz-transform: translate3d(0, 0, -300px);
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
}    


.bg{width: 100%;height: 100%;left: 0;top: 0;background:url(../img/bg.png) no-repeat center/100%;}
.page{position: relative;}
.js-animate{position: absolute;left:0;top: 10%;}
.js-animate img{width: 100%;}
#html5_3d_animation{position: fixed;z-index: 9;}
.page1 .img1{width: 60%;left: 20%;top: 30%;}
.page1 .img2{width: 80%;left: 10%;top: auto;bottom: 10%;}
.page1 .img3{width: 100%;height: 100%;left: 0;top: 0;}
.page2 .img1{top: 10%;width: 80%;left: 10%;}
.page2 .img2{top:20%;width: 80%;left: 10%;}
/*.page3 .img1{margin-top: 0;width: 80%;left: 10%;}
.page3 .img2{width: 90%;left: 5%;top: auto;bottom: 8%;}*/
.page3 .img1{margin-top: 0%;width: 30%;left: 35%;}
.page3 .img2{top: 20%;width: 90%;left: 5%;}
.page3 .img3{width:50%;left: 25%;top: 70%;}
.page4 .img1{margin-top: 0%;width: 30%;left: 35%;}
.page4 .img2{width: 90%;left: 5%;top: auto;bottom: 14%;}
.page5 .img1{top: 10%;width: 80%;left: 10%;}
.page5 .img2{margin-top: 0;width: 60%;left: 20%;top: auto;bottom: 10%;}
.page6 .img1{margin-top: 0;width: 80%;left: 10%;}
.page6 .img2{margin-top: 30%;width: 80%;left: 10%;}
.page7 .img1{margin-top: 0;width: 80%;left: 10%;}
.page7 .img2{top: auto;bottom: 0;width: 60%;left: 0;}
.page8 .img1{margin-top: 0;width: 80%;left: 10%;}
.page8 .img2{margin-top: 0;width: 80%;left: 10%;top: auto;bottom: 14%;}
.page9 .img1{margin-top: 0;width: 80%;left: 10%;}
.page9 .img2{top: auto;bottom: 8%;width: 80%;left: 10%;}
.page10 .img1{margin-top: 0;width: 60%;left: 20%;}
.page10 .img2{margin-top: 0;width: 50%;left: 25%;top: auto;bottom: 5%;}
.page11 .img1{margin-top: 0;width: 80%;left: 10%;}
.page11 .img2{top: auto;bottom: 14%;width: 80%;left: 10%;}
.stars{
	position: fixed;
	z-index: 999;
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #36ccda;
	top: 15%;
	left: 60%;
	/*box-shadow: 0 0 3px 3px rgba(54,204,218,1);*/
	-webkit-animation: starAnimate 6s infinite ;
	-moz-animation: starAnimate 6s infinite ;
	animation: starAnimate 6s infinite ;
	opacity: 0;
}
.stars::after{
	content: "";
	display: block;
	top: 0;
	left: 4px;
	border: 0 solid #fff;
	border-width: 2px 90px;
	border-color: transparent transparent transparent rgba(54,204,218,1);
	-webkit-transform: rotate(-45deg) translate3d(1px,1px,0);
	-webkit-transform-origin:0 0;
	-moz-transform: rotate(-45deg) translate3d(1px,1px,0);
	-moz-transform-origin:0 0;
	transform: rotate(-45deg) translate3d(1px,1px,0);
	transform-origin:0 0;
}
.star1{
    width: 4px;
    height: 4px;
    left: 25%;
    top: 0;
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
     animation-delay: 9s;
}
.star2{
    width: 4px;
    height: 4px;
     left: 100%;
    top: 20%;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
}
.star3{
    width: 4px;
    height: 4px;
     left: 30%;
    top: 55%;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
}
.star4{
    width: 4px;
    height: 4px;
    top: 55%;
	left: 95%;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    animation-delay: 8s;
}
.star5{
    width: 4px;
    height: 4px;
    left: 50%;
    top: 60%;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    animation-delay: 6s;
}
.star6{
    width: 4px;
    height: 4px;
    left: 100%;
    top: 70%;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}
@-webkit-keyframes starAnimate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(0) translate3d(0,0,0);
	}
	50%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0) translate3d(-200px,200px,0);
	}
	100%{
		opacity: 0;
		-webkit-transform: scale(1) rotate(0) translate3d(-300px,300px,0);
	}
}
@-moz-keyframes starAnimate{
	0%{
		opacity: 0;
		-moz-transform: scale(0) rotate(0) translate3d(0,0,0);
	}
	50%{
		opacity: 1;
		-moz-transform: scale(1) rotate(0) translate3d(-200px,200px,0);
	}
	100%{
		opacity: 0;
		-moz-transform: scale(1) rotate(0) translate3d(-300px,300px,0);
	}
}
@keyframes starAnimate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(0) translate3d(0,0,0);
	}
	50%{
		opacity: 1;
		transform: scale(1) rotate(0) translate3d(-200px,200px,0);
	}
	100%{
		opacity: 0;
		transform: scale(1) rotate(0) translate3d(-300px,300px,0);
	}
}