.card {
  position: relative;
  &:hover {
    border: 1px solid #409eff !important;
  }
  .icon-content {
    height: 64px;
    width: 64px;
    border-radius: 32px;
    .icon {
      color: #409eff;
      font-size: 50px;
    }
  }
  .cell-content {
    width: calc(100% - 64px);
    padding: 0 15px 15px;
    & > p {
      margin: 0 0 10px 0;
    }
    .cell-title {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cell-remark {
      display: -webkit-box;
      height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #999;
      font-size: 12px;
    }
  }
  .card-operate {
    float: right;
    margin-top: -6px;
  }
  .card-content {
    height: 105px;
  }
  .card-footer {
    position: absolute;
    background: #fafafa;
    width: calc(100% - 40px);
    left: 0;
    bottom: 0;
    padding: 10px 20px;
    border-top: 1px solid #ebebeb;
    .operate {
      text-align: center;
      margin-top: 0;
      cursor: pointer;
      color: #409eff;
      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  .card-container {
    width: 50% !important;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1680px) {
  .card-container {
    width: 33.3333% !important;
  }
}

@media screen and (min-width: 1680px) and (max-width: 1920px) {
  .card-container {
    width: 25% !important;
  }
}
