.right-box .hot-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 0 20px;
}
.right-box .hot {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}
.right-box .tab-search {
  color: #777777;
  font-size: 12px;
}
.right-box .tab-search .name {
  cursor: pointer;
}
.right-box .tab-search .on {
  color: #2469f6;
  font-weight: 500;
}
.right-box .tab-search .line {
  margin: 0 5px;
}
.mr-10 {
  margin-right: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.hot-img {
  margin-right: 5px;
}
.rank_card .hot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 10px;
}
.rank_card .active {
  color: #2469f6;
  font-weight: 500;
}
.rank_card .line {
  width: 64px;
  height: 3px;
  background: #fff;
  margin-top: 10px;
}
.rank_card .active .line {
  background: #2469f6;
  border-radius: 4px 4px 0px 0px;
  animation: width-animation 0.3s ease-in-out forwards;
}
/* 宽度从0-100%的动画 */
@keyframes width-animation {
  0% {
    width: 0;
  }
  100% {
    width: 64px;
  }
}

.p-x-24 {
  padding-left: 24px;
  padding-right: 24px;
}
.p-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.p-y-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.text-7E8595 {
  color: #7e8595;
}
.text-333 {
  color: #333;
}
.text-2469F6 {
  color: #2469f6;
}
.text-666 {
  color: #666;
}

.l-h-12 {
  line-height: 12px;
}
.l-h-16 {
  line-height: 16px;
}