.content-box {
  border: 1px solid $--color-c3;
  height: 510px;
  background-color: $--color-c6;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  box-sizing: border-box;
  margin: 20px 0 30px;
  border-radius: $--border-radius-base;

  .img-box {
    width: 160px;
    height: 120px;
    display: inline-block;
    margin: 10px;
    background-color: $--color-c6;
    position: relative;
    box-shadow: 0 0 1px $--color-c3;

    &.is-draging {
      box-shadow: 0 0 0 5px $--color-c6 !important;
    }

    &:hover {
      box-shadow: 0px 0px 3px 0 rgba(0, 12, 72, 0.2);

      img,
      .video-mask {
        cursor: move;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
    }

    > i {
      width: 32px;
      height: 22px;
      position: absolute;
      z-index: 2;
      background-image: url("#{$--cdn-images}/fileSort/i_label_pic.png");

      > span {
        position: absolute;
        font-family: ArialMT;
        text-align: center;
        font-size: $--font-xs;
        color: $--color-c6;
        font-style: normal;
        top: 2px;
        left: -1px;
        width: 100%;
        text-align: center;
      }
    }

    .video-mask {
      position: absolute;
      width: 160px;
      height: 120px;
      background: rgba($--color-c1, 0.5)
        url("#{$--cdn-images}/fileSort/small1.png") center center no-repeat;
      z-index: 1;
      top: 0px;
      background-size: 25%;
    }
  }

  .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: $--color-c6;

    &.has-name {
      height: calc(100% + 26px);
    }
  }

  .show-name {
    padding-top: 2px;
    font-size: $--font-xs;
  }
}