.sideMenu{ 
	height: 100%; width: 100%; background: url(../../gc-img/navbg.png) left top no-repeat; 
	position: relative; background-size: 100% 130%;
	transition:all 200ms ease;
	
	.menu-title{ display: inline-block; white-space: nowrap;}
	.menu-nav{ margin-top:8px}
	
	// 最小化侧边
	&.collapse{
		width: 60px;
		.controls:hover{ background-image: url(../../gc-img/collapse-v-on.svg);}
		.menu-title{ display: none;}
		.menu-nav__item{ padding-left:9px}
		.menu-nav__item>span{ display: none;}
		.menu-nav__item.more .el-icon-caret-right{ display: none;}
		
		.menu-nav__level{ left: 60px;}
	}
}


/* 显示隐藏-竖向 展开 */
.controls{ position: absolute; right: -12px; width: 12px; height: 100%; cursor: pointer; z-index: 0;
	&:hover{ background: rgba(25,25,25,0) url(../../gc-img/collapse-v-off.svg) left center no-repeat;}
}
			

/* 显示隐藏-上部 */
$--menu-nav-head-height:34px;
.menu-nav-top{ border-bottom: 1px solid rgba(255,255,255,.2); height: $--menu-nav-head-height; 
	vertical-align: middle; font-size: 12px;}
.menu-title{ color: #fff; white-space: nowrap; padding-left: 20px; line-height: $--menu-nav-head-height; }
.menu-collapse{ 
	// background: url(../../gc-img/collapse-off.svg) center center no-repeat; 
	width: 20px; height: $--menu-nav-head-height; display: inline-block;  position: absolute; right: 12px; color:#fff;
	font-size: 20px!important;
}
.menu-nav-top+div{ top:$--menu-nav-head-height; bottom:0; position: absolute; left:0; right:0; height: auto;}


/* item */
.menu-nav__item{
	background-color: transparent; cursor: pointer;
	// border-top: 1px solid rgba(255,255,255,.2);
	font-size: 0px;display: block;position: relative;line-height: 40px;
	color: #fff; white-space: nowrap; transition:padding-left 200ms ease;
	
	&:first-child{ border-top:none}
	// &:last-child{ border-bottom: 1px solid rgba(255,255,255,.2) }
	&.current{
		background: linear-gradient(to right, #82D254 , #237FF9);
		// border-bottom: 1px solid rgba(255,255,255,.1);
		&+.menu-nav__item{ border-top:none;}
		&>.menu-nav__level{ display: inline-block;}
	}
	&>span{ font-weight: bold; vertical-align: middle;}
	
}

.menu-nav__item-icon{
	width: 40px;height: 40px;border-radius: 8px;display: inline-block;margin-right: 6px; text-align: center;
	background-repeat: no-repeat;background-position: center; vertical-align: middle;
	img{ width: 100%; height: 100%;}
}

.menu-nav__item.more:hover .el-icon-caret-right{ display: inline-block;}
.menu-nav__item .el-icon-caret-right{line-height: 40px;color: #FFF; float: right; display: none;}
.menu-nav__item.current .el-icon-caret-right{display:block;}


/* 子菜单 */
.menu-nav__level{ 
	position: fixed; left: 240px; background-color: #fff; padding: 20px 30px; 
	width: 740px;border-radius: 0 8px 8px 0; /*border: rgba(0, 0, 0, 0.2) 1px solid; */
	box-shadow: 5px 0 10px rgba(0,0,0,0.2); /*margin-top:-1px;*/ border-left:none; display: none;
	
	li{float: left;width: 100%;margin-bottom: 16px;}
	li:last-child{ margin-bottom:0}
	a{float: left;color: #666666; border-radius: 6px; line-height: 24px;text-align: center;width: 20%;padding: 4px;}
	a:hover{background-color: rgba(0,0,0,0.03); color: #000;}
	
	&.stream{
		li a{text-align: center;width: 20%;padding: 8px;}
		.menu-nav__level-icon img{display: block;margin: 0 auto;margin-bottom: 8px}
	}
	
	&.text{
		li a{width: 25%;padding:4px 8px; text-align: left;}
		.menu-nav__level-icon{width: 23px;height: 23px;float: left;margin: 0 8px 0 0;
			img{width: 100%;height: 100%; padding: 4px;}
		}
	}
}
.menu-nav__level-title{ padding-bottom:8px; font-weight: bold;color: #333;}


.menu-nav__level-icon{ margin: 0 auto 8px;
	img{display: block;margin: 0 auto;height: 60px;width: 30px;}
}

.menu-nav__level-tool{ position: absolute;top: 16px;right: 16px; z-index: 99;
	a{
		width: 30px;height: 30px;margin-left: 5px; cursor: pointer; display: block;float: right;
		background-color: #fff; border-radius: 100px;background-repeat: no-repeat;background-position: center;
	}
}

.streamList{background-image: url(../../gc-img/streamList.svg)}
.textList{background-image: url(../../gc-img/textList.svg)}
.menu-nav__level-tool a:hover,.menu-nav__level-tool a.now{background-color:#6FC87F}
.menu-nav__level-tool a:hover.streamList,.streamList.now{background-image: url(../../gc-img/streamListHover.svg)}
.menu-nav__level-tool a:hover.textList,.textList.now{background-image: url(../../gc-img/textListHover.svg)}








/* xl */
.menu-nav__item{ 
	padding: 20px;
	&>span{ font-size: 18px;}
	&>span+i{ font-size: 16px;}
}
.menu-nav__item-icon{
	line-height: 40px; font-size: 24px;
	& img{ padding: 8px;}
}
.menu-nav__level-icon{width: 60px;height: 60px; border-radius:10px ;}
.menu-nav__level{ font-size: 16px;}
/* md */
.md.menu-nav{
	.menu-nav__item { padding: 2px 20px; }
	.menu-nav__item{
		&>span{ font-size: 14px;}
		&>span+i{ font-size: 14px;}
	}
	.menu-nav__item-icon {
		width: 24px;height: 24px;line-height: 24px;font-size: 16px; border-radius:100px;
		img{ padding: 5px;}
	}
	.menu-nav__level{ padding-top:10px; font-size:14px;}
}
.sideMenu.collapse .md.menu-nav .menu-nav__item{
	padding-left:17px;
}