.hot-content {
  padding-top: 40px;
  padding: 30px 20px 20px 20px;
}
.hot-content .hot-title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 16px;
}
.hot-content .hot-change {
  cursor: pointer;
  transition: transform 0.5s ease;
}
.hot-title-left {
  cursor: pointer;
}

.hot-list {
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px;
}
.hot-list .hot-item {
  text-align: left;
  width: calc(50% - 10px);
  margin-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
  cursor: pointer;
  font-size: 16px;
}
.hot-list .hot-item:nth-child(2n) {
  margin-right: 0;
}

.hot-list .hot-item-index {
  color: #919bb5;
  margin-right: 5px;
  display: inline-block;
  width: 20px;
  text-align: center;
}

.hot-list .hot-item-index-1 {
  color: #fe2d46;
}
.hot-list .hot-item-index-2 {
  color: #f60;
}
.hot-list .hot-item-index-3 {
  color: #faa90e;
}
.hot-change-span {
  display: inline-block;
}
.hot-change-rotate {
  transition: transform 1s;
  transform: rotate(360deg);
}


/* 设置热榜项目的通用样式 */
				.hot-item {
				  position: relative;
				  padding-left: 30px; /* 确保内容不会被数字背景遮挡 */
				}
				
			/* 设置数字背景的基本样式 */
			.hot-item-index {
			  position: absolute;
			  left: 5px; /* 调整数字与左边界的距离 */
			  top: 5px; /* 调整数字与顶部的距离 */
			  color: white; /* 数字颜色 */
			  
			  border-radius: 50%; /* 圆形背景 */
			  width: 20px;
			  height:20px;
			  text-align: center;
			  line-height: 20px; /* 使数字垂直居中 */
			}
			
			/* 鼠标悬停时的样式 */
			.hot-item:hover .hot-item-index {
			 
			  color: #007AFF;
			  border: 1px solid #007AFF; /* 添加边框，颜色为#007AFF，宽度为2px */
			}
				
				/* 对于前9个元素，可以使用单独的样式来减少宽度 */
				.hot-item-index-1, 
				.hot-item-index-2,
				.hot-item-index-3,
				.hot-item-index-4,
				.hot-item-index-5,
				.hot-item-index-6,
				.hot-item-index-7,
				.hot-item-index-8,
				.hot-item-index-9 {
				  width: 18px; /* 如果需要，可以调整这个值以适应单个数字 */
				}
				
				/* 特定位置编号悬停时的样式 */
				.hot-item:hover .hot-item-index-1,
				.hot-item:hover .hot-item-index-2,
				/* 继续为每个编号定义不同的背景颜色或其它样式 */
				{
				  background-color: #f0f0f0;
				}
				
				
						.hot-item:hover {
						    
						text-decoration: underline; /* 鼠标悬停时显示下划线 */
						   border-radius:10px;
						   color: #007AFF;
						}
							
							/* 标题部分悬停效果 */
							.hot-title-left,
							.hot-change {
							    cursor: pointer;
							    transition: color 0.3s ease, transform 0.2s ease;
							}
							
							.hot-title-left:hover,
							.hot-change:hover {
							    color: #007AFF;
							    transform: scale(1.05);
							}
							
							/* 换一换图标旋转动画 */
							.hot-change-rotate {
							    transition: transform 1s ease;
							}
							
							.hot-change-rotate:hover {
							    transform: rotate(360deg);
							}