@-webkit-keyframes fade {
  0% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@keyframes fade {
  0% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

.active-list {
  margin-top: 30px;
  display: flex;
  flex-flow: wrap;

  .active-list-item {
    flex-basis: 31%;
    margin: 1.75% 0;
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0;
    -webkit-animation: fade ease-out 0.5s forwards;
    animation: fade ease-out 0.5s forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;

    &:nth-child(3n+2) {
      margin: 1.75% 3.5%;
    }

    .inner {
      border-radius: 4px;
      overflow: hidden;
      max-width: none;
      background: #fff;
      box-sizing: border-box;
      transition: all ease-out 0.2s;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;

      .active-list-item-bg {
        width: 100%;
        height: 13.6vw;
        min-height: 163px;
        overflow: hidden;
        background-color: #D8D8D8;
        border-radius: 4px 4px 0px 0px;

        ::v-deep .el-image {
          width: 100%;
          height: 100%;
          transition: all .5s;
          -webkit-transition: all .5s;

          .el-image__error {
            background-color: #D8D8D8;
          }

          &:hover {
            transform: scale(1.1);
            -ms-transform: scale(1.1); /* IE 9 */
            -moz-transform: scale(1.1); /* Firefox */
            -webkit-transform: scale(1.1); /* Safari 和 Chrome */
            -o-transform: scale(1.1);
          }
        }
      }

      .active-list-item-cont {
        flex: 1;
        padding: 10px 20px 0;
        background-color: #ffffff;
        border-radius: 0 0 4px 4px;
        font-family: PingFang SC;
        font-weight: 400;

        .active-list-item-cont-header {
          display: flex;
          flex-flow: row;
          align-items: center;
          line-height: 28px;
          margin: 0.8vw 0 0.4vw;

          .label {
            font-size: 12px;

            > span {
              padding: 5px 10px;
              border-radius: 8px;
              color: #ffffff;
              background-color: var(--all_color);
              margin-right: 5px;
            }
          }

          .title {
            font-size: 18px;
            font-weight: 500;
          }
        }

        .active-list-item-cont-txt1 {
          font-size: 16px;
          line-height: 28px;
          margin: 0.4vw 0;
        }

        .active-list-item-cont-txt2 {
          font-size: 14px;
          color: #999999;
          line-height: 24px;
          margin: 0.4vw 0;
        }

        .active-list-item-cont-txt3 {
          font-size: 15px;
          color: #EC808D;
          line-height: 28px;
          margin: 0.4vw 0;
        }

        .active-list-item-cont-bottom {
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #cccccc;
          margin-top: 1vw;
          padding: 1vw 0;
          font-size: 14px;
          line-height: 32px;
          cursor: pointer;

          .el-icon-right {
            font-size: 18px;
          }

          &:hover {
            color: var(--all_color);
          }
        }
      }
    }

    &:hover {
      .inner {
        box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);

        .active-list-item-bg {
          ::v-deep .el-image {
            transform: scale(1.1);
            -ms-transform: scale(1.1); /* IE 9 */
            -moz-transform: scale(1.1); /* Firefox */
            -webkit-transform: scale(1.1); /* Safari 和 Chrome */
            -o-transform: scale(1.1);
          }
        }
      }
    }
  }
}
