.content {
  border-radius: 0.4rem;
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(180deg, #56f7d4 0%, #5e93ff 100%);
  box-shadow: 0px 4px 20px 0px rgba(51, 51, 51, 0.1);
}
.content .more {
  width: 2.22rem;
  height: 0.6rem;
  background: #273447;
  border-radius: 30px;
  border: 2px solid #56f7d4;
  color: #56f7d4;
  position: absolute;
  margin-top: 0.25rem;
  left: 50%;
  margin-left: -1.11rem;
}
.content.type-2 {
  background: linear-gradient(180deg, #fff18f 0%, #ff6060 100%);
  box-shadow: 0px 4px 20px 0px rgba(51, 51, 51, 0.1);
}
.content.type-2 .more {
  border: 2px solid #fff18f;
  color: #f7ff00;
}
.content .rank-item .avatar {
  height: 1.6rem;
  width: 1.6rem;
  margin-top: -0.18rem;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
}
.content .rank-item .rank-bottom {
  font-size: 0.96rem;
  width: 100%;
  height: 1.72rem;
  background: linear-gradient(135deg, #425782 0%, #273447 100%);
  border-radius: 0.2rem 0.2rem 0px 0px;
  padding-top: 0.2rem;
}
.content .rank-item.first .avatar {
  border: 4px solid #ffc042;
}
.content .rank-item.first .rank-bottom {
  height: 2.04rem;
}
.content .rank-item.second .avatar {
  border: 4px solid #ffc042;
}
.content .rank-item.second .rank-bottom {
  height: 1.72rem;
}
.content .rank-item.third .avatar {
  border: 4px solid #5e94ff;
}
.content .rank-item.third .rank-bottom {
  height: 1.6rem;
}