.category {
	background-color: #fff;
	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(--secondary-color);
}

@media screen and (max-width: 767px) {
	.category-item {
		padding: 0 15px;
		font-size: 16px;
	}
}