.course-box {
      /* margin-top: 12px; */
      border-radius: 10px;
      /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); */
    }
    
  
    .service {
      display: flex;
      flex-wrap: wrap;
      /* padding-top: 20px; */
    }
    
    .service-item {
      position: relative;
      padding: 14px 0 20px 0;
    width: 288px;
      height: 402px;
      background: #fff;
      margin-right: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      border-radius: 10px;
      transition: all 0.3s ease;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }
    
    .service-item:nth-child(4n) {
      margin-right: 0;
    }
    
    .service-item:hover {
      box-shadow: 0 5px 15px rgba(0, 59, 112, 0.2);
      transform: translateY(-5px);
    }
    
    .service-item:hover .text-title {
      color: #0079FE;
    }
    
    .img-box {
      margin: 0 auto;
      width: 202px;
      height: 202px;
      background: #FFFFFF;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    
    .img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .service-item:hover .img-box img {
      transform: scale(1.05);
    }
    
    .userIn {
      padding-left: 18px;
      margin-top: 5px;
     
    }
    
    .flag1 {
      height: 23px;
      line-height: 23px;
      padding: 0px 7px;
      border-radius: 5px;
      display: inline-block;
      background: #70b603;
      font-size: 14px;
      color: #fff;
      margin-right: 5px;
    }
    
    .flag2 {
      background: #fe6079;
    }
    
    .flag3 {
      background: #4285f4;
    }
    
    .text-box-p {
      padding: 5px 28px 0 16px;
      width: 100%;
    }
    
    .text-title-p {
      margin-bottom: 5px;
      font-size: 16px;
      height: 46px;
      color: #222222;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      transition: color 0.3s ease;
    }
    
    .label-desc {
      display: flex;
      margin-bottom: 6px;
      font-size: 14px;
      color: #888888;
    }
    
    .labels {
      width: 50px;
      white-space: nowrap;
    }
    
    .desc {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .money {
      font-weight: 700;
      font-size: 18px;
      color: #FF6521;
      margin-top: 5px;
    }
    
    .yuan {
      font-weight: 500;
      font-size: 14px;
      margin-left: 5px;
    }