.article-sort-item {
  margin: 0.16rem 0;
  position: relative;
  padding: 0 0.4rem;
  height: 0.32rem;
  line-height: 0.32rem;
  font-size: 0.16rem;
  color: $color-white;
}
.article-sort-item .article-time {
  margin-right: 0.24rem;
  color: #99a9bf;
}
.article-sort-item .article-link {
  transition: $transition-delay;
}
.article-sort-item .article-link:hover {
  color: $color-theme;
  transition: $transition-delay;
}
.article-sort-item::before {
  content: '';
  display: block;
  position: absolute;
  left: 0.06rem;
  top: 0.09rem;
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 50%;
  border: 0.04rem solid $color-sub-theme;
  transition: $transition-delay;
}
.article-sort-item::after {
  content: '';
  display: block;
  position: absolute;
  left: 0.12rem;
  top: 0.22rem;
  width: 0.02rem;
  height: 0.36rem;
  background: $color-font;
}
.article-sort-item:last-child::after {
  display: none;
}
.article-sort-item:hover::before {
  border-color: $color-theme;
  transition: $transition-delay;
}
.article-sort-item.title {
  height: 0.56rem;
  line-height: 0.56rem;
  font-size: 0.24rem;
  color: $color-white;
}
.article-sort-item.title::before {
  top: 0.15rem;
  left: 0;
  width: 0.1rem;
  height: 0.1rem;
  border-width: 0.08rem;
}
.article-sort-item.title::after {
  top: 0.4rem;
  left: 0.12rem;
  height: 0.42rem;
}
.article-sort-item.year {
  margin: 0.16rem 0;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.2rem;
  font-weight: 600;
  color: $color-white;
}
.article-sort-item.year::before {
  top: 0.1rem;
  left: 0.03rem;
  width: 0.08rem;
  height: 0.08rem;
  border-width: 0.06rem;
}
.article-sort-item.year::after {
  top: 0.3rem;
  left: 0.12rem;
  height: 0.36rem;
}
