* {
	margin:0;
	padding:0;
	font-family:"微软雅黑";
}
.nav {
	position:fixed;
	z-index:999;
	overflow:hidden;
}
.shpere {
	height:50px;
	width:50px;
	border-radius:50%;
	border:5px double #000;
}
.top,.bottom {
	width:100%;
	height:50px;
	left:0;
}
.top {
	top:0;
	box-shadow:0 3px 3px #ccc;
}
.bottom {
	bottom:0;
	box-shadow:0 -3px 3px #ccc;
}
.left,.right {
	height:100%;
	width:100px;
	top:0;
}
.left {
	left:0;
	box-shadow:3px 0 3px #ccc;
}
.right {
	right:0;
	box-shadow:-3px 0 3px #ccc;
}
.nav a {
	display:block;
	float:left;
	width:100px;
	height:50px;
	color:#000;
	text-decoration:none;
	text-align:center;
	line-height:50px;
}
.nav span {
	display:block;
	float:left;
	width:50px;
	height:50px;
	text-align:center;
	padding-top:9px;
}
a:hover {
	background:rgba(128,128,128,0.8);
}
.dir {
	position:fixed;
	top:50%;
	width:100%;
	z-index:0;
}
.dir span {
	position:absolute;
	width:80px;
	height:80px;
	background:#eee;
	box-shadow:3px 3px 3px #bbb inset;
	left:50%;
	transform-origin:0% 0%;
	border-radius:10px;
}