/*
* @Author: win
* @Date:   2016-09-09 12:12:43
* @Last Modified by:   win
* @Last Modified time: 2016-09-09 15:56:51
*/
html,body{width: 100%;height: 100%;color:#fff;}
.nave{width:120px;position: fixed;right: 30px;top: 50%;z-index: 8;transition: all .4s;display: none;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
}
.nave.q_close{display: none;}
.nave.q_open{display: block;}
.nave ul{width: 100%;}
.nave ul li{width: 100%;cursor: pointer;color:#fff;margin:0 auto 44px;text-align: right;font-size: 0;position: relative;line-height: 20px;
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
}
.nave ul li:after{content:'';width:1px;height:40px;background-color:rgba(255,255,255,.3);position: absolute;right:5px;top:-46px;}
.nave ul li:nth-child(1):after{width:0;}
.nave ul li>span{display: inline-block;line-height: 20px;}
.nave_l{font-size: 12px;color:#fff;position: absolute;right:25px;top:-4px;opacity: 0;transition: all .5s;}
.nave_r{width:12px;height:12px;border-radius: 50%;border:1px solid rgba(255,255,255,.7);}
.nave:hover .current .nave_l{opacity: 1;}
.current .nave_r{width:12px;height:12px;background-color: #fff;position: relative;}
.current .nave_r:after{content:''; width:20px;height:20px;border-radius: 50%;background-color:rgba(255,255,255,.3);position: absolute;right:-5px;top:-5px;z-index: -1;}
.main_box{
	position: relative;
	width: 100%;
	height: 100%;
	background: rgba(24,24,24,1);
	padding:0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.main_box>div{width: 100%;position: relative;background-color: #111;}

@media(max-width: 640px){
	html,body{height:auto;}
	.nave{right: 10px;}
	.main_box{height:auto;}
}