ol,ul{list-style:none}
.both .navs {
	border:0px solid #000;
	width:100%;
	height:60px;
	margin-top:10px;
	padding:0 20px;
}
@keyframes LYAnimation {
	0% {
	width:0;
}
100% {
	width:100%;
}
}@keyframes TBAnimation {
	0% {
	height:0;
}
100% {
	height:47px;
}
}@keyframes LYAnimationF {
	0% {
	width:100%;
}
100% {
	width:0;
}
}@keyframes TBAnimationF {
	0% {
	height:47px;
}
100% {
	height:0;
}
}.both .navs ul {
	border-left:6px solid #ff3131;
	width:100%;
	height:50px;
	margin-top:5px;
}
.both .navs ul li {
	border:2px solid transparent;
	width:auto;
	height:43px;
	line-height:43px;
	float:left;
	padding:0 8px;
	margin-left:20px;
	position:relative;
	cursor:pointer;
	color:#000;
	transition:color 0.3s;
}
.both .navs ul li .liLineTop,.both .navs ul li .liLineBottom {
	animation-name:LYAnimationF;
	animation-duration:0.3s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:both;
}
.both .navs ul li .liLineLeft,.both .navs ul li .liLineRight {
	animation-name:TBAnimationF;
	animation-duration:0.3s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:both;
}
.both .navs ul li .liLineTop,.both .navs ul li .liLineBottom,.both .navs ul li .liLineLeft,.both .navs ul li .liLineRight {
	display:block;
	background-color:#f00;
	position:absolute;
}
.both .navs ul li .liLineTop,.both .navs ul li .liLineBottom {
	width:0;
	height:2px;
}
.both .navs ul li .liLineLeft,.both .navs ul li .liLineRight {
	width:2px;
	height:0;
}
.both .navs ul li .liLineTop {
	left:0;
	top:-2px;
}
.both .navs ul li .liLineBottom {
	right:0;
	bottom:-2px;
}
.both .navs ul li .liLineLeft {
	left:-2px;
	bottom:-2px;
}
.both .navs ul li .liLineRight {
	right:-2px;
	top:-2px;
}
.both .navs ul li:hover {
	color:#ff3131;
	transition:color 0.3s;
}
.both .navs ul li:hover .liLineTop,.both .navs ul li:hover .liLineBottom {
	animation-name:LYAnimation;
	animation-duration:0.3s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:both;
}
.both .navs ul li:hover .liLineLeft,.both .navs ul li:hover .liLineRight {
	animation-name:TBAnimation;
	animation-duration:0.3s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:both;
}
.both .navs ul .liActive {
	border:2px solid #ff3131;
	color:#ff3131;
}