.web .article-category-bar {
  position: relative;
  display: flex;
}
.web .article-category-bar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
}
.web .category-item {
  position: relative;
  width: 132px;
  height: 44px;
  border-radius: 8px 8px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 44px;
  text-align: center;
  color: #353635;
  cursor: pointer;
  transition-duration: 300ms;
}
.web .category-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.web .category-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background-color: #DBE0E8;
}
.web .category-item.active {
  background-color: var(--color-primary);
  color: #fff;
}
.web .category-item.active::before {
  display: none;
}
.web .category-item.active + .category-item::before {
  display: none;
}
.web .category-item:hover:not(.active) {
  color: var(--color-primary);
  background-color: #F3F6FC;
}
.web .category-item:hover:not(.active)::before, .web .category-item:hover:not(.active) + .category-item::before {
  display: none;
}

.mobile .category-bar {
  border-radius: 8px;
  background-color: #F3F6FC;
}
.mobile .category-item {
  position: relative;
  width: 100%;
  line-height: 36px;
  text-align: center;
  font-weight: 500;
  border-radius: 8px;
}
.mobile .category-item a {
  display: block;
}
.mobile .category-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background-color: #DBE0E8;
}
.mobile .category-item.active {
  background-color: var(--color-primary);
  color: #fff;
}
.mobile .category-item.active::before {
  display: none;
}
.mobile .category-item.active + .category-item::before {
  display: none;
}