.category {
	background-color: #fafafa;
	box-shadow: 0 0 20px 8px rgba(0,0,0,0.05);
}

.category>div {
	overflow-x: auto;
}

.category-list {
	display: flex;
}

.category-item {
	position:relative;
	display: flex;
	flex-direction: column;
	height: 70px;
	justify-content: center;
	padding: 0 30px;
	font-size: 18px;
	color: #666;
	white-space: nowrap;
}
.category-item:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    width: 0%;
    height: 3px;
    background-color: none;
    transition: all .3s
}

.category-item:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 15px;
    display: block;
    background: #ccc;
    top: 50%;
    margin-top: -7px;
    right: 0px
}
.category-item.active,
.category-item:hover {
	color: var(--primary-color);
}
.category-item.active:before,
.category-item:hover:before {
	    width: 80%;
	    left: 10%;
	    background-color: var(--primary-color);
}
@media screen and (max-width: 768px) {
	.category {
		/* position: relative; */
	}
}