#menu {
	position:fixed;
	top:50%;
	right:10px;
	z-index: 70;
	padding: 0;
	margin:0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	transform: translateY(-50%);
}
#menu li {
    cursor: pointer;
}
#menu li:not(.totop) {
	width: 10px;
	height: 30px;
	margin: 4px;
	color: #000;
	background: rgba(0,0,0, 0.5);
	-webkit-border-radius: 5px;
            border-radius: 5px;
}
#menu li:not(.totop).active{
	background:#708FBA;
	color: #fff;
}
#menu li:not(.totop) a{
	display: block;
	width: 100%;height: 100%;
	text-decoration:none;
	color: #fff;
	text-align: center;
	line-height: 30px;
	visibility: hidden;
}
/* #menu li.active a:hover{
	color: #708FBA;
} */
#menu li:not(.totop):hover{
	width: 80px;
	background: #708FBA;
}
#menu li:hover a {
	visibility: visible;
}
#menu li a,
#menu li.active a{
	/* padding: 9px 18px; */
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu li.totop {
	transform: translate(5px, 5px);
}
#menu li.totop img {
	width: 30px;
}
@media(max-width: 1000px){
	#menu {
		display: none;
	}
}