.box-content {
  width: 100%;
  flex-grow: 0;
  border-radius: 5px;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  margin-top: 10px;
}
.box-head{
  padding-bottom: 20px;
}
.box-head-row{
  /* padding: 10px 0; */
  padding-bottom: 10px;
}

.box-head input {
  width: 200px;
  font-size: var(--fontSize);
  color: #808080;
  border-radius: 5px;
}
.bt {
  width: 50px !important;
  border: 0px !important;
  font-size: var(--fontSize) !important;
}
.box-head .box-category{
  width: 5rem;
  font-weight: bold;
}
.course-tag-row{
  flex-wrap: wrap;
}

.box-row {
  margin-left: -15px;
  display: flex; /* 使用 flexbox 布局 */
  flex-wrap: wrap; /* 允许元素换行 */
}
.course-node{
  width: calc(25% - 15px); /* 减去一定的值来补偿间距 */
  border-radius: 10px;
  box-sizing: border-box; /* 确保内边距和边框包含在总宽度内 */
  margin-bottom: 20px;
  margin-left: 15px;
}

.no-hover-color {
  color: inherit; /* 继承父元素的颜色 */
  text-decoration: none; /* 移除下划线 */
  transition: none; /* 禁用过渡效果 */
}

.no-hover-color:hover {
  color: inherit; /* 保持颜色不变 */
  text-decoration: none; /* 保持无下划线 */
}
.course-tittle{
  padding: 10px 10px 0 10px;
  font-size: var(--fontSizeL);
}

.course-tittle.course-tittle-height {
  width: 100%;
  height: 30px;
  line-height: 25px;
  box-sizing: border-box;
  color: #4d4d4d;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.course-teacher{
  padding: 10px 10px 0 10px;
  font-size: var(--fontSizeS);
}

.course-detail{
  padding: 5px 10px 0 10px;
  font-size: var(--fontSizeS);
}

.course-price{
  color: red;
  padding: 10px;
  font-size: var(--fontSizeL);
}

.course-img {
  width: 100%;
}

.course-img img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: auto; /* 保持图片的宽高比 */
}

.course-tag{
  margin-left: 15px;
  background-color: #e7f1ff;
  padding: 2px 15px;
  border-radius:20px;
}

.course-tag:hover,.course-tag.active{
  background-color: #0096ff;
  color: #ffffff;
}