@import  "coco-variables.scss";
.cohead{
	height: 66px;width: 100%;position: relative;box-sizing: border-box;background-color: $--sys-primary;
}

/* logo */
.sys-logo{
	font-size: 22px; color: #fff;
	min-width: 260px;
	padding-left: 40px; padding-right: 30px; display: inline-block; float: left;
	.clearfix{
		display: table-cell; height: 66px; vertical-align: middle;
		&>img{ vertical-align: middle; height: 52px;}
	}
}

/* 主导航 */
.co-menu{ display: inline-block; position: relative; padding-right: 35px; position: relative; top: 50%; transform: translateY(-50%);}
.co-menu__nav-scroll{ overflow: hidden;}
.co-menu__nav{
	white-space: nowrap; font-size: 0;
	i{
		width: 26px; line-height: 100%; color: #fff;font-size: 20px; display: inline-block; 
		background-size: 20px; background-repeat: no-repeat; background-position: left center;
		&::after{ display: inline-block; content: "";}
	}
}
.co-menu__nav-item{
	font-size: 16px; line-height: 22px; height: 44px; vertical-align: middle; display: inline-block;
	padding: 10px; color: #fff; border-radius: 8px; font-weight: 700; position: relative;
	&.is-hover{ cursor: pointer;
		&:hover{ background-color: rgba(0,0,0,0.1);}
		&:active{ background-color: rgba(0,0,0,0.4);}
		&:hover .co-menu__nav-dropdown{ display: inline-block; }
	}
	&>*{ vertical-align: middle; }
}


.co-menu__nav-more{
	width:28px; height: 28px; border-radius: 4px; padding:0;
	background-color: #50a6ff;  text-align: center;
	position: absolute;right: 0;top: 8px;z-index: 1;display: inline-block;
	&:hover{background-color:rgba(0, 0, 0, 0.2);}
	.co-menu__nav-dropdown{ left: -34px; top:28px; text-align: left;}
	&::before{ font-size: 24px; line-height: 28px;}
}
.co-menu__nav-dropdown{
	display: none; padding: 5px 0; border-radius: 4px; background: #ffffff; font-weight: normal;
	position:absolute; top: 43px; left:0; box-shadow: rgba(0, 0, 0, 0.15) 0 0 11px;
	i{ color: #CCC; vertical-align: middle;}
	&::before{
		content: ""; width: 8px; height: 8px; background-color: #fff;
		position: absolute; left: 44px; top:-4px; transform:rotate(45deg) ;
	}
	a{ display:block; line-height:32px; color: #999; padding-left:12px;
		&:hover{color: #0081d5;background: rgba(0, 0, 0, 0.05);}
		&:active{color: #0081d5;background: rgba(0, 0, 0, 0.1);}
		span{ vertical-align: middle; }
	}
}



/* head右侧 */
.sys-tool{
	position: absolute; top: 33px; right: 0; padding-right: 15px;
	.co-menu__nav-item{ padding-left: 6px; padding-right: 6px; font-weight: normal;}
	i.cir{
		width: 24px; height: 24px; top:1px; border-radius: 100px; margin-right: 5px;
		text-align: center; line-height: 24px; position: relative; background-repeat: no-repeat;
	}
	&.mini .co-menu__nav-item.mini>span{ display: none;}
	.co-menu__nav i{ width: 24px; text-align: center;}
}


/* size sm */
.md.cohead{
	.co-menu__nav-item{ font-size: 16px }
}
.sm.cohead{
	.co-menu__nav-item{ font-size: 14px }
}