@charset "utf-8";
/* margin and padding */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,img,form,applet,fieldset,legend,button,input,textarea,th,table,tr,td{margin:0;padding:0;border:none;}

/* bady */
body{font-family:"微软雅黑";font-size:12px;color:#fff;background:#699; center center no-repeat;position:relative;height:100%;width:100%;overflow:hidden;}
body,div,fieldset,form,h1,h2,h3,h4,h5,h6,html,p{-webkit-text-size-adjust:none}
html{height:100%;width:100%;}
body.disabled-onepage-scroll,.disabled-onepage-scroll .onepage-wrapper,html{position:inherit;}



/*logo旋转*/
.keyframes(@name) {//keyframes是动画的必须，这里less的好处就体现了，可以写一个keyframes 混入
    @-webkit-keyframes @name {
        .-frames(-webkit-)
    }
    @-moz-keyframes @name {
        .-frames(-moz-)
    }
    @-o-keyframes @name {
        .-frames(-o-)
    }
    @-ms-keyframes @name {
        .-frames(-ms-)
    }
    @keyframes @name {
        .-frames()
    }
}
.animation(@arg){//animation混入
    -moz-animation:@arg;
    -webkit-animation:@arg;
    -o-animation:@arg;
    -ms-animation:@arg;
    animation:@arg;
}
.rotate(){//定义旋转动画
    .keyframes(rotate);
    .-frames(@-...){
        0%,100%{
            @{-}transform:rotate(0deg);
        }
        100%{
            @{-}transform:rotate(360deg);
        }
    }
}
.classname{//最后的调用
    .rotate();
    .animation(rotate 4s linear infinite);
}



@-webkit-keyframes rotate {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0%,
  100% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  0%,
  100% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  0%,
  100% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0%,
  100% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.classname{//为了尽可能兼容各个浏览器
  -moz-animation: rotate 4s linear infinite;
  -webkit-animation: rotate 4s linear infinite;
  -o-animation: rotate 4s linear infinite;
  -ms-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}
/*logo旋转*/



@-webkit-keyframes rotate{0%{-webkit-transform:rotateZ(-45deg)}100%{-webkit-transform:rotateZ(315deg)}}
@keyframes rotate{0%{transform:rotateZ(-45deg)}100%{transform:rotateZ(315deg)}}

@-webkit-keyframes rotate_x{0%{-webkit-transform:rotateZ(45deg)}100%{-webkit-transform:rotateZ(-315deg)}}
@keyframes rotate_x{0%{transform:rotateZ(45deg)}100%{transform:rotateZ(-315deg)}}

@-webkit-keyframes top{0%{top:0%;}30%{top:120%;}40%{-webkit-transform:rotateZ(0deg)}50%{top:120%;-webkit-transform:rotateZ(180deg)}80%{top:-10%;}90%{-webkit-transform:rotateZ(180deg)}100%{top:0%;}}
@keyframes top{0%{top:0%;}30%{top:120%;}40%{transform:rotateZ(0deg)}50%{top:120%;transform:rotateZ(180deg)}80%{top:-10%;}90%{transform:rotateZ(180deg)}100%{top:0%;}}

@-webkit-keyframes bottom{0%{top:100%;}30%{top:-20%;}40%{-webkit-transform:rotateZ(0deg)}50%{top:-20%;-webkit-transform:rotateZ(180deg)}80%{top:120%;}90%{-webkit-transform:rotateZ(180deg)}100%{top:100%;}}
@keyframes bottom{0%{top:100%;}30%{top:-20%;}40%{transform:rotateZ(0deg)}50%{top:-20%;transform:rotateZ(180deg)}80%{top:120%;}90%{transform:rotateZ(180deg)}100%{top:100%;}}
 
@-webkit-keyframes left{0%{left:0%;}30%{left:120%;}40%{-webkit-transform:rotateZ(0deg)}50%{left:120%;-webkit-transform:rotateZ(180deg)}80%{left:-10%;}90%{-webkit-transform:rotateZ(180deg)}100%{left:0%;}}
@keyframes left{0%{left:0%;}30%{left:120%;}40%{transform:rotateZ(0deg)}50%{left:120%;transform:rotateZ(180deg)}80%{left:-10%;}90%{transform:rotateZ(180deg)}100%{left:0%;}}

@-webkit-keyframes right{0%{left:100%;}30%{left:-20%;}40%{-webkit-transform:rotateZ(0deg)}50%{left:-20%;-webkit-transform:rotateZ(180deg)}80%{left:120%;}90%{-webkit-transform:rotateZ(180deg)}100%{left:100%;}}
@keyframes right{0%{left:100%;}30%{left:-20%;}40%{transform:rotateZ(0deg)}50%{left:-20%;transform:rotateZ(180deg)}80%{left:120%;}90%{transform:rotateZ(180deg)}100%{left:100%;}}


@-webkit-keyframes stars{0%{-webkit-transform:rotateZ(0deg);opacity:1;}50%{-webkit-transform:rotateZ(180deg);opacity:0;}100%{-webkit-transform:rotateZ(360deg);opacity:1;}}
@keyframes stars{0%{transform:rotateZ(0deg);opacity:1;}50%{transform:rotateZ(180deg);opacity:0;}100%{transform:rotateZ(360deg);opacity:1;}}
@-webkit-keyframes stars_1{0%{-webkit-transform:rotateZ(0deg);opacity:0;}50%{-webkit-transform:rotateZ(180deg);opacity:1;}100%{-webkit-transform:rotateZ(360deg);opacity:0;}}
@keyframes stars_1{0%{transform:rotateZ(0deg);opacity:0;}50%{transform:rotateZ(180deg);opacity:1;}100%{transform:rotateZ(360deg);opacity:0;}}

.logo{width:600px;height:600px;position:absolute;left:50%;top:75%;margin:-300px 0 0 -300px;}
.quan_01{width:680px;height:680px;position:absolute;top:50%;left:50%;margin:-340px 0 0 -340px;z-index:2;-webkit-animation:rotate_x 10s linear 0s infinite;animation:rotate_x 10s linear 0s infinite;}
.quan_02{width:820px;height:820px;position:absolute;top:50%;left:50%;margin:-410px 0 0 -410px;z-index:6;-webkit-animation:rotate 16s linear 0s infinite;animation:rotate 16s linear 0s infinite;}

.stars{position: absolute;z-index: 1;top: 385px;left: 838px;top:50%;left:50%;}
.start img{width:100%;height:100%;}
.stars_01{width:32px;height:32px;-webkit-animation:stars 5s linear 0s infinite;animation:stars 5s linear 0s infinite;}
.stars_02{width:20px;height:20px;-webkit-animation:stars 4s linear 0s infinite;animation:stars 4s linear 0s infinite;}
.stars_03{width:14px;height:14px;-webkit-animation:stars_1 5s linear 0s infinite;animation:stars_1 5s linear 0s infinite;}
.stars_04{width:10px;height:10px;-webkit-animation:stars_1 3s linear 0s infinite;animation:stars_1 3s linear 0s infinite;}