.component-card.tag.color-1 {
  background: url(/assets/images/tagSystem/bg-card-1.png) no-repeat center top;
  background-size: 100% auto;
  background-color: #FCFDFE;
}
.component-card.tag.color-1 .title .more {
  --color: #2E50FA;
}
.component-card.tag.color-1 .list-card-content .tags .tag:hover {
  background: #EAF1FF;
  border: 1px solid #9FB7FF;
}
.component-card.tag.color-2 {
  background: url(/assets/images/tagSystem/bg-card-2.png) no-repeat center top;
  background-size: 100% auto;
  background-color: #FCFDFE;
}
.component-card.tag.color-2 .title .more {
  --color: #12AE60;
}
.component-card.tag.color-2 .list-card-content .tags .tag:hover {
  background: #E8FCF4;
  border: 1px solid #A1E3C7;
}
.component-card.tag.color-3 {
  background: url(/assets/images/tagSystem/bg-card-3.png) no-repeat center top;
  background-size: 100% auto;
  background-color: #FCFDFE;
}
.component-card.tag.color-3 .title .more {
  --color: #682EFA;
}
.component-card.tag.color-3 .list-card-content .tags .tag:hover {
  background: #F1EAFF;
  border: 1px solid #C19FFF;
}
.component-card.tag .list-card-content .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.component-card.tag .list-card-content .tags .tag {
  width: 152px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #EEEFF2;
  border-radius: 8px;
  padding: 11px 15px;
  cursor: pointer;
}
.component-card.tag .list-card-content .tags .tag .tag-name {
  display: block;
  line-height: 17px;
  font-size: 14px;
  color: #333;
  text-align: center;
}
.component-card.tag .list-card-content .tags .tag .tag-name.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.component-card.tag .list-card-content .tags .tag .tag-name.line2 {
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}