.centered {
    margin: 0 auto;
}
body{
    width:100%;
    height:100%;
	padding:0;
	margin:0px;
	overflow: hidden
}
.wrap{
	width:100%;
	height:980px;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
	background-image: url(../images/bg.png);
	 background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: repeat;
}
.logo{
	position: absolute;
    top: 20px;
    left: 50px;
}
.logo img{
	width:450px;
}
.center-wrap{
	position:absolute;
	top:0px;
	left:0px;
    width:100%;
    height:980px;
    margin:0 auto;

     
}
.tiny-stars {  
     position: absolute;
    top: -54px;
    left: -9%;
    width: 850px;
    height: 850px;
    z-index: 3;
    -webkit-animation: infinite-spinning 40s infinite linear;
    -moz-animation: infinite-spinning 40s infinite linear;
    -o-animation: infinite-spinning 40s infinite linear;
    animation: infinite-spinning 40s infinite linear;
}
.tiny-stars img{
	width:850px;
	height:850px;
}
.orbit-rocket {
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18px 0px 0px -19px;
    -webkit-animation: rot-rocket 5s infinite linear;
    -moz-animation: rot-rocket 5s infinite linear;
    -o-animation: rot-rocket 5s infinite linear;
    animation: rot-rocket 5s infinite linear;
}
.planet-wrap{
     
    width: 750px;
    height: 750px;
}

.planet-big {
    z-index: 2;
    position: absolute;
    top: 115px;
    left: 29%;
    width: 750px;
    height: 750px;
    /*vertical-align: middle;*/
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background-image: url(../images/round-1.png);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*background: none\9;*/
    /*下一行为关键设置*/

    
}
.planet{
    position: absolute;   
    top: -1px;
    left: 60.6%;
    width: 75px;
     z-index: 9;
}
.rank .des{
	z-index: 3;
    position: relative;
    top: 270px;
    left: 26.5%;
    vertical-align: middle;        
    font-size: 23px;
    color: #000;
    font-weight: bold;
    font-family: "微软雅黑";
     

}
.purchase-sort,.sell-sort{
    position: absolute;
    top: 108px;
    left: 360px;
    color: #ff7300;
    font-size: 23px;
    font-weight: bolder;
    letter-spacing: 2px;
    animation: sort-remove 18800ms infinite linear forwards;
}
.sell-sort{
    opacity: 0;
    animation: sort-remove 18800ms 9800ms infinite linear forwards;
}
.bank1{
	position: absolute;
    top: -64px;
    left: 345px;
    animation:bank1-remove 18800ms  infinite linear forwards;
}
.bank2{
    position: absolute;
    top: 203px;
    left: 677px;
    animation:bank2-remove 18800ms  infinite linear forwards;
}
.bank3{
	 
    position: absolute;
    top: 183px;
    left: 80px;
    animation:bank3-remove 18800ms  infinite linear forwards;

}

.bank4{
	position: absolute;
    top: 435px;
    left: 244px;
    animation:bank4-remove 18800ms  infinite linear forwards;
    
}
.sell-bank1{
	position: absolute;
    top: -64px;
    /*left: 345px;*/
    left: 145px;
    animation:bank1-remove 18800ms 9800ms infinite linear forwards;
    opacity:0; 
}
.sell-bank2{
position: absolute;
    top: 203px;
    left: 677px;
    animation:bank2-remove 18800ms 9800ms infinite linear forwards;
    opacity:0; 
}
.sell-bank3{
 position: absolute;
    top: 183px;
    left: 80px;
    animation:bank3-remove 18800ms 9800ms infinite linear forwards;
    opacity:0; 
}
.sell-bank4{
    position: absolute;
    top: 435px;
    left: 244px;
    animation:bank4-remove 18800ms 9800ms infinite linear forwards;
    opacity:0; 
}
@keyframes bank1-remove{
    0% {
        opacity: 0;
        left:0px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
      opacity: 0;
        left:0px;
        filter: blur(5px);
        transform: skewX(-45deg)   
    }
    9.5% {
        opacity: 1;
        filter: blur(0px);
        left: 345px;
        transform: skewX(0deg)    
    }
    47.87% {		
        opacity: 1;
        filter: blur(0px);
        left: 345px;
        transform: skewX(0deg)        		
		}       
	52.13% {
	   filter: blur(5px);
       left: 700px;
    transform: skewX(-45deg);  
    opacity: 0; 
    				
	} 
    100% {							
	  filter: blur(10px);
       left: 700px;
    transform: skewX(-40deg);
     opacity: 0;  
								
		}
}
@keyframes bank2-remove{
    0% {
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg) 
    }
    9.5%{
        opacity: 1;
        filter: blur(0px);
        left: 677px;
        transform: skewX(0deg)  
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
        left: 677px;
        transform: skewX(0deg)    
    }
     
    52.13% {
       filter: blur(5px);
       left: 1032px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 1032px;
    transform: skewX(-45deg);
     opacity: 0;  
                                
        }
}
@keyframes bank3-remove{
    0% {
        opacity: 0;
        left:-240px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
      opacity: 0;
      left:-240px;
      filter: blur(5px);
      transform: skewX(-45deg)   
    }
    9.5% {
        opacity: 1;
        filter: blur(0px);
         left: 80px;
        transform: skewX(0deg)    
    }
    47.87% {       
        opacity: 1;
        filter: blur(0px);
        left: 80px;
        transform: skewX(0deg)              
        }       
    53.13% {
       filter: blur(5px);
       left: 435px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 435px;
    transform: skewX(-40deg);
     opacity: 0;  
                                
        }
}
@keyframes bank4-remove{
    0% {
        opacity: 0;
        left:-56px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
        opacity: 0;
        left:-56px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    9.5% {
        opacity: 1;
        filter: blur(0px);
        left: 244px;
        transform: skewX(0deg)    
    }
    47.87% {       
        opacity: 1;
        filter: blur(0px);
        left: 244px;
        transform: skewX(0deg)              
        }       
    53.13% {
       filter: blur(5px);
       left: 599px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 599px;
    transform: skewX(-45deg);
     opacity: 0;  
                                
        }
}
@keyframes sort-remove{
    0%{
    opacity: 0;
    filter: blur(10px);
     top: 0px;   
    }
    5.3%{
    opacity: 0;
    filter: blur(10px);
     top: 0px;     
    }
    9.5%{
     opacity: 1;
     filter: blur(0px);
     top: 108px;
     transform: skewY(0deg);
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
     top: 108px;
     transform: skewX(0deg);

    }
    53.13%{
     opacity: 0;
     filter: blur(20px);
     transform: skewX(40deg);
     top: 108px;    

    }
    100%{
     opacity: 0;
     filter: blur(20px);
     top: 108px;
     
    }

}

@-o-keyframes infinite-spinning{
	from
{-moz-transform:rotate(0deg); 
	-ms-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
transform:rotate(0deg)}
to{-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg)}
}
@keyframes infinite-spinning {
	from{-moz-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		webkit-transform:rotate(0deg);
		transform:rotate(0deg)}
		to{-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg)}}

@-webkit-keyframes rot-rocket{
    from{
    	-moz-transform:rotate(0) translateX(-334px);
     -ms-transform:rotate(0) translateX(-334px);
     -webkit-transform:rotate(0) translateX(-334px);
     transform:rotate(0) translateX(-334px)}
     to
     {
     	-moz-transform:rotate(360deg) translateX(-334px);
     	-ms-transform:rotate(360deg) translateX(-334px);
       -webkit-transform:rotate(360deg) translateX(-334px);
       transform:rotate(360deg) translateX(-334px)}
 }
 @-moz-keyframes rot-rocket{
     	from{
     		-moz-transform:rotate(0) translateX(-336px);
     -ms-transform:rotate(0) translateX(-336px);
     -webkit-transform:rotate(0) translateX(-336px);
     transform:rotate(0) translateX(-336px)}
     to{
     	-moz-transform:rotate(360deg) translateX(-336px);
     -ms-transform:rotate(360deg) translateX(-336px);
     -webkit-transform:rotate(360deg) translateX(-336px);
     transform:rotate(360deg) translateX(-336px)}
 }
     @-o-keyframes rot-rocket{
     	from{
     		-moz-transform:rotate(0) translateX(-336px);
     		-ms-transform:rotate(0) translateX(-336px);
     		-webkit-transform:rotate(0) translateX(-336px);
     		transform:rotate(0) translateX(-336px)}
     		to{-moz-transform:rotate(360deg) translateX(-336px);
     			-ms-transform:rotate(360deg) translateX(-336px);
     -webkit-transform:rotate(360deg) translateX(-336px);
     transform:rotate(360deg) translateX(-336px)}}

     @keyframes rot-rocket{
     	from{
     		transform-origin: 50% 50%;
     		-moz-transform:rotate(0) translateX(-334px);
     		-ms-transform:rotate(0) translateX(-334px);
     -webkit-transform:rotate(0) translateX(-334px);
     transform:rotate(0) translateX(-334px)}
    
     to{
     	transform-origin: 50% 50%;
     	-moz-transform:rotate(360deg) translateX(-334px);
     -ms-transform:rotate(360deg) translateX(-334px);
     -webkit-transform:rotate(360deg) translateX(-334px);
     transform:rotate(360deg) translateX(-334px)}
 }
 .left-link{
    position:relative;
    top: 388px;
    left: 148px;
    width: 300px;
    height: 256px;
    display: inline-block;
    overflow: hidden;
    animation:buttonUp 500ms linear ;
 }
.button-left{
	position:absolute;
	top: 0px;
    left: 0px;
    /*width: 300px;
    height: 256px;*/
    width: 100%;
    height: 100%;
    display: inline-block;
	float:left;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
	background:url(../images/button-1.png);
	background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
   
    z-index:100;
}
.bg-btn-left{
    position:absolute;
    /*width: 300px;
    height: 256px;*/
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    display: inline-block;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background:url(../images/button-01.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:1;
    opacity: 0;

}
.button-left:hover{
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background: url(../images/button-01.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;     
}

.left-link:hover .bg-btn-left{
     /*transform: scale(1.05);*/
     animation:buttonScal 800ms linear infinite; 
     opacity: 1;
     filter: blur(2px);

}
.right-link{
    position:absolute;
    top: 378px;
    /*right: 234px;*/
    right:11%;
    float:right;
    width: 300px;
    height: 256px;
    display: inline-block;
    overflow: hidden; 
    animation:buttonUp 500ms linear ;
}
.bg-btn-right{
  position:absolute;
   /* width: 300px;
    height: 256px;*/
     width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    display: inline-block;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background:url(../images/button-02.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:1;
    opacity: 0;   
}
.button-right{
    position:relative;
    top: 0px;
    right: 0px;
    float:right;
    /*width: 300px;
    height: 256px;*/
      width: 100%;
    height: 100%;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background:url(../images/button-2.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    
    z-index: 100;
}
.right-link:hover .bg-btn-right{
    animation:buttonScal 800ms linear infinite; 
     opacity: 1;
     filter: blur(2px);
}

.button-right:hover {
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
    background:url(../images/button-02.png);
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@keyframes buttonUp{
	0%{
		opacity: 0;
		top:-300px;
        filter:blur(0px);
	}
    50%{
        filter:blur(0px);
    }
    90%{
        filter:blur(20px);
    }
	100%{
		opacity: 1;
		top: 378px;
        filter:blur(0px);
	}
}
@keyframes buttonScal {
    0%{

        transform: scale(1);
         opacity: 1.0;
    }
    50%{

        transform: scale(1.065);
       
    }
    100%{

        transform: scale(1.0);
         opacity: 0.5;
    }

}
@media screen and (max-width:1680px){
    .right-link{
        right:7%;
    }

}
@media screen and (max-width:1600px){
    .wrap{
        height:900px;
    }
    .planet-big{
       top: 86px;
       left:29.5%;
       width:650px;
       height:650px;
    }
    .tiny-stars{
        width:750px;
        height:750px;
    }
    .rank .des{
      top: 206px;
     left: 24.5%;
    }
    .right-link {
    right: 9%;
    }
    .left-link,.right-link{
     width: 260px;
    height: 221px;
    }
    .bank2,.sell-bank2{
       top: 184px;
    }
    .bank3,.sell-bank3{
        top:170px;
        left:100px;
    }
    .bank4,.sell-bank4{
     top: 398px;
    }
    @keyframes bank2-remove{
    0% {
    opacity: 0;
    left: 300px;
    filter: blur(5px);
    transform: skewX(-45deg);
    }
    5.3% {
    opacity: 0;
    left: 300px;
    filter: blur(5px);
    transform: skewX(-45deg);
    }
    9.5% {
    opacity: 1;
    filter: blur(0px);
    left: 630px;
    transform: skewX(0deg);
    }
    47.87% {
    opacity: 1;
    filter: blur(0px);
    left: 630px;
    transform: skewX(0deg);
    }
    52.13% {
    filter: blur(5px);
    left: 1032px;
    transform: skewX(-45deg);
    opacity: 0;
    }
    100% {
    filter: blur(10px);
    left: 1032px;
    transform: skewX(-45deg);
    opacity: 0;
     }
    }
    @keyframes bank3-remove{
     0% {
        opacity: 0;
        left:-240px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
      opacity: 0;
      left:-240px;
      filter: blur(5px);
      transform: skewX(-45deg)   
    }
    9.5% {
        opacity: 1;
        filter: blur(0px);
         left: 100px;
        transform: skewX(0deg)    
    }
    47.87% {       
        opacity: 1;
        filter: blur(0px);
        left: 100px;
        transform: skewX(0deg)              
        }       
    53.13% {
       filter: blur(5px);
       left: 435px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 435px;
    transform: skewX(-40deg);
     opacity: 0;  
                                
        }
}
@keyframes rot-rocket{
    from{
        -moz-transform:rotate(0) translateX(-309px);
     -ms-transform:rotate(0) translateX(-309px);
     -webkit-transform:rotate(0) translateX(-309px);
     transform:rotate(0) translateX(-309px)}
     to
     {
        -moz-transform:rotate(360deg) translateX(-309px);
        -ms-transform:rotate(360deg) translateX(-309px);
       -webkit-transform:rotate(360deg) translateX(-309px);
       transform:rotate(360deg) translateX(-309px)}
 }

}
@media screen and (max-width:1440px){
    .purchase-sort,.sell-sort{
     top: 100px;
    left: 342px;
    }
   
}
@media screen and (max-width:1400px){
    .left-link{
        left: 98px;
    }
    .right-link {
    right: 5%;
    }
}
@media screen and (max-width:1366px){
    .wrap{
    width: 100%;
    height: 768px;
    }
    .planet-big {
    top: 86px;
    left: 29.5%;
    width: 550px;
    height: 550px;
    }
    .tiny-stars {
    width: 650px;
    height: 650px;
    left:-10%;
    }

    .left-link, .right-link {
    width: 240px;
    height: 203px;
    top:318px;
    }
    .rank .des {
    top: 206px;
    left: 20%;

    }

    .bank2, .sell-bank2 {
    top: 139px;
    }
    .bank3, .sell-bank3 {
    top: 122px;
    left: 100px;
    }
    .bank4, .sell-bank4 {
    top: 310px;
    }
    .purchase-sort,.sell-sort{
   top: 64px;
    left: 345px;
    }
    @keyframes sort-remove{
    0%{
    opacity: 0;
    filter: blur(10px);
     top: 0px;   
    }
    5.3%{
    opacity: 0;
    filter: blur(10px);
     top: 0px;     
    }
    9.5%{
     opacity: 1;
     filter: blur(0px);
     top: 64px;
     transform: skewY(0deg);
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
     top: 64px;
     transform: skewX(0deg);

    }
    53.13%{
     opacity: 0;
     filter: blur(20px);
     transform: skewX(40deg);
     top: 64px;    

    }
    100%{
     opacity: 0;
     filter: blur(20px);
     top: 64px;
     
    }

    }
    @keyframes rot-rocket{
    from{
        -moz-transform:rotate(0) translateX(-261px);
     -ms-transform:rotate(0) translateX(-261px);
     -webkit-transform:rotate(0) translateX(-261px);
     transform:rotate(0) translateX(-261px)}
     to
     {
        -moz-transform:rotate(360deg) translateX(-261px);
        -ms-transform:rotate(360deg) translateX(-261px);
       -webkit-transform:rotate(360deg) translateX(-261px);
       transform:rotate(360deg) translateX(-261px)}
    }
}

@media screen and (max-width:1280px){
    .wrap {
        width: 100%;
        height: 960px;
    }

    .left-link, .right-link{
        top:378px;
    }
    @keyframes buttonUp{
    0%{
        opacity: 0;
        top:-300px;
        filter:blur(0px);
    }
        50%{
            filter:blur(0px);
        }
        90%{
            filter:blur(20px);
        }
    100%{
        opacity: 1;
        top: 378px;
        filter:blur(0px);
    }
    }
    .planet-big{
    top:127px;
    }
    .rank .des{
        top:247px;
    }

}
@media screen and (max-width:1152px){
    .planet-big {
        top: 195px;
    }
    .rank .des {
        top: 316px;
    }
    .left-link, .right-link {
        top: 431px;
   }
   .bank2,.sell-bank2{
    left:570px;
   }
   @keyframes bank2-remove{
    0% {
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg) 
    }
    9.5%{
        opacity: 1;
        filter: blur(0px);
        left: 570px;
        transform: skewX(0deg)  
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
        left: 570px;
        transform: skewX(0deg)    
    }
     
    52.13% {
       filter: blur(5px);
       left: 1032px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 1032px;
    transform: skewX(-45deg);
     opacity: 0;  
                                
        }
    }
}
@media screen and (max-width:1024px){
    .logo{
        top:76px;
    }
    .logo img {
    width: 320px;
    }
    .planet-big{
        width: 450px;
        height: 450px;
        top:219px;
    }
    .rank .des{
        font-size:18px;
        left:14%;
    }
    .purchase-sort, .sell-sort {
     top: 54px;
    left: 340px;
    font-size: 18px;
     }

    .left-link {
    left: 30px;
    }
    .right-link {
    right: 30px;
    }  
    .bank2, .sell-bank2 {
    top: 113px;
    left:534px;
    }
    .bank3, .sell-bank3 {
    top: 101px;
    left: 163px;
    }
    .bank4, .sell-bank4 {
    top: 257px;
    }
    @keyframes sort-remove{
    0%{
        opacity: 0;
        filter: blur(10px);
        top: 0px;   
    }
    5.3%{
        opacity: 0;
        filter: blur(10px);
        top: 0px;     
    }
    9.5%{
        opacity: 1;
        filter: blur(0px);
        top: 54px;
        transform: skewY(0deg);
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
        top: 54px;
        transform: skewX(0deg);

    }
    53.13%{
        opacity: 0;
        filter: blur(20px);
        transform: skewX(40deg);
        top: 54px;    

    }
    100%{
        opacity: 0;
        filter: blur(20px);
        top: 54px;    
     }
    }
    @keyframes bank2-remove{
    0% {
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
        opacity: 0;
        left:300px;
        filter: blur(5px);
        transform: skewX(-45deg) 
    }
    9.5%{
        opacity: 1;
        filter: blur(0px);
        left: 534px;
        transform: skewX(0deg)  
    }
    47.87%{
        opacity: 1;
        filter: blur(0px);
        left: 534px;
        transform: skewX(0deg)    
    }
     
    52.13% {
       filter: blur(5px);
       left: 1032px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 1032px;
    transform: skewX(-45deg);
     opacity: 0;  
                                
        }
}
@keyframes bank3-remove{
    0% {
        opacity: 0;
        left:-240px;
        filter: blur(5px);
        transform: skewX(-45deg)  
    }
    5.3%{
      opacity: 0;
      left:-240px;
      filter: blur(5px);
      transform: skewX(-45deg)   
    }
    9.5% {
        opacity: 1;
        filter: blur(0px);
         left: 163px;
        transform: skewX(0deg)    
    }
    47.87% {       
        opacity: 1;
        filter: blur(0px);
        left: 163px;
        transform: skewX(0deg)              
        }       
    53.13% {
       filter: blur(5px);
       left: 435px;
    transform: skewX(-45deg);  
    opacity: 0; 
                    
    } 
    100% {                          
      filter: blur(10px);
       left: 435px;
    transform: skewX(-40deg);
     opacity: 0;  
                                
        }
}
}