@charset "utf-8";

           /*opacity是设置遮罩透明度的，可以自己调节*/
           #loading{
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background:black;
				opacity:0.8;
				z-index:15000;
			}
			
           #loading img{
				position:relative;
				top:15%;
				left:35%;
				max-width:30%;
				height:auto;
				margin-top:-15px;
				margin-left:-15px;
			}
			
           #loading p{
				position:absolute;
				top:55%;
				left:48%;
				width:33px;
				height:33px;
				margin-top:-15px;
				margin-left:-15px;
			} 

/* CSS Document */
*{margin:0;padding:0;list-style:none;}

a{text-decoration: none;}
img{border:none;}
.w{width:250px;}
.h{height:250px;}
.compass-main{
	width:100%;
	height:100%;
	background-color:#000002;
}

 @-moz-keyframes rotate{
            100%{
              -moz-transform:rotate(0deg);
             }
             100%{
               -moz-transform:rotate(360deg);
             }
          }
 @-webkit-keyframes rotate{
            100%{
              -webkit-transform:rotate(0deg);
             }
             100%{
               -webkit-transform:rotate(360deg);
             }
          }
 @keyframes rotate{
            100%{
              transform:rotate(0deg);
             }
             100%{
               transform:rotate(360deg);
             }
          }
.compassdiv .compass{
	background-image: url(../images/compass/c-a-0.png);
	position:fixed;top:30%;left:30%;
	z-index:1;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
}
.compassdiv .compass .compass-1{
	position:fixed;top:30%;left:30%;
	z-index:2;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	background: no-repeat url("../images/compass/c-a-1.png") left top;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .1s;
    -webkit-transition:all .1s;
    transition:all .1s;
	-moz-animation:rotate 1s infinite linear;
    -webkit-animation:rotate 1s infinite linear;
    animation:rotate 1s infinite linear;
}
.compassdiv .compass .compass-2{
	position:fixed;top:30%;left:30%;
	z-index:3;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	background: no-repeat url("../images/compass/c-a-2.png") left top;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .5s;
    -webkit-transition:all .5s;
    transition:all .5s;
	-moz-animation:rotate 5s infinite linear;
    -webkit-animation:rotate 5s infinite linear;
    animation:rotate 5s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-3{
	background-image: url(../images/compass/c-a-3.png);
	position:fixed;top:30%;left:30%;
	z-index:4;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .25s;
    -webkit-transition:all .25s;
    transition:all .25s;
	-moz-animation:rotate 3s infinite linear;
    -webkit-animation:rotate 3s infinite linear;
    animation:rotate 3s infinite linear;
}
.compassdiv .compass .compass-4{
	background-image: url(../images/compass/c-a-4.png);
	position:fixed;top:30%;left:30%;
	z-index:5;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
}
.compassdiv .compass .compass-5{
	background-image: url(../images/compass/c-a-5.png);
	position:fixed;top:30%;left:30%;
	z-index:5;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .55s;
    -webkit-transition:all .55s;
    transition:all .55s;
	-moz-animation:rotate 55s infinite linear;
    -webkit-animation:rotate 55s infinite linear;
    animation:rotate 55s infinite linear;
}
.compassdiv .compass .compass-6{
	background-image: url(../images/compass/c-a-6.png);
	position:fixed;top:30%;left:30%;
	z-index:6;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .55s;
    -webkit-transition:all .55s;
    transition:all .55s;
	-moz-animation:rotate 55s infinite linear;
    -webkit-animation:rotate 55s infinite linear;
    animation:rotate 55s infinite linear;
}
.compassdiv .compass .compass-7{
	background-image: url(../images/compass/c-a-7.png);
	position:fixed;top:30%;left:30%;
	z-index:7;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .35s;
    -webkit-transition:all .35s;
    transition:all .35s;
	-moz-animation:rotate 35s infinite linear;
    -webkit-animation:rotate 35s infinite linear;
    animation:rotate 35s infinite linear;
}
.compassdiv .compass .compass-8{
	background-image: url(../images/compass/c-a-8.png);
	position:fixed;top:30%;left:30%;
	z-index:8;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .25s;
    -webkit-transition:all .25s;
    transition:all .25s;
	-moz-animation:rotate 25s infinite linear;
    -webkit-animation:rotate 25s infinite linear;
    animation:rotate 25s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-9{
	background-image: url(../images/compass/c-a-9.png);
	position:fixed;top:30%;left:30%;
	z-index:9;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .45s;
    -webkit-transition:all .45s;
    transition:all .45s;
	-moz-animation:rotate 45s infinite linear;
    -webkit-animation:rotate 45s infinite linear;
    animation:rotate 45s infinite linear;
}
.compassdiv .compass .compass-10{
	background-image: url(../images/compass/c-a-10.png);
	position:fixed;top:30%;left:30%;
	z-index:10;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
}
.compassdiv .compass .compass-11{
	background-image: url(../images/compass/c-a-11.png);
	position:fixed;top:30%;left:30%;
	z-index:11;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .55s;
    -webkit-transition:all .55s;
    transition:all .55s;
	-moz-animation:rotate 55s infinite linear;
    -webkit-animation:rotate 55s infinite linear;
    animation:rotate 55s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-12{
	background-image: url(../images/compass/c-a-12.png);
	position:fixed;top:30%;left:30%;
	z-index:12;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .45s;
    -webkit-transition:all .45s;
    transition:all .45s;
	-moz-animation:rotate 45s infinite linear;
    -webkit-animation:rotate 45s infinite linear;
    animation:rotate 45s infinite linear;
}
.compassdiv .compass .compass-13{
	background-image: url(../images/compass/c-a-13.png);
	position:fixed;top:30%;left:30%;
	z-index:13;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .35s;
    -webkit-transition:all .35s;
    transition:all .35s;
	-moz-animation:rotate 35s infinite linear;
    -webkit-animation:rotate 35s infinite linear;
    animation:rotate 35s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-14{
	background-image: url(../images/compass/c-a-14.png);
	position:fixed;top:30%;left:30%;
	z-index:14;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .25s;
    -webkit-transition:all .25s;
    transition:all .25s;
	-moz-animation:rotate 25s infinite linear;
    -webkit-animation:rotate 25s infinite linear;
    animation:rotate 25s infinite linear;
}
.compassdiv .compass .compass-15{
	background-image: url(../images/compass/c-a-15.png);
	position:fixed;top:30%;left:30%;
	z-index:15;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .3s;
    -webkit-transition:all .3s;
    transition:all .3s;
	-moz-animation:rotate 3s infinite linear;
    -webkit-animation:rotate 3s infinite linear;
    animation:rotate 3s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-16{
	background-image: url(../images/compass/c-a-16.png);
	position:fixed;top:30%;left:30%;
	z-index:16;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .35s;
    -webkit-transition:all .35s;
    transition:all .35s;
	-moz-animation:rotate 35s infinite linear;
    -webkit-animation:rotate 35s infinite linear;
    animation:rotate 35s infinite linear;
}
.compassdiv .compass .compass-17{
	background-image: url(../images/compass/c-a-17.png);
	position:fixed;top:30%;left:30%;
	z-index:17;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .15s;
    -webkit-transition:all .15s;
    transition:all .15s;
	-moz-animation:rotate 15s infinite linear;
    -webkit-animation:rotate 15s infinite linear;
    animation:rotate 15s infinite linear;
}
.compassdiv .compass .compass-18{
	background-image: url(../images/compass/c-a-18.png);
	position:fixed;top:30%;left:30%;
	z-index:18;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .25s;
    -webkit-transition:all .25s;
    transition:all .25s;
	-moz-animation:rotate 25s infinite linear;
    -webkit-animation:rotate 25s infinite linear;
    animation:rotate 25s infinite linear;
	-webkit-transform: rotateZ(720deg);
	-moz-transform: rotateZ(720deg);
	-o-transform: rotateZ(720deg);
	-ms-transform: rotateZ(720deg);
	transform: rotateZ(720deg);
}
.compassdiv .compass .compass-19{
	background-image: url(../images/compass/c-a-19.png);
	position:fixed;top:30%;left:30%;
	z-index:19;
	filter:alpha(opacity=10);
	-moz-opacity:1;
	opacity:1;
	-webkit-background-size: 250px 125px;
	-moz-background-size: 250px 125px;
	background-size: 250px 250px;
	-webkit-border-radius: 125px;
	border-radius: 125px;
	-moz-transition:all .20s;
    -webkit-transition:all .20s;
    transition:all .20s;
	-moz-animation:rotate 20s infinite linear;
    -webkit-animation:rotate 20s infinite linear;
    animation:rotate 20s infinite linear;
}