.zero-sale-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  user-select: none;

  .poster-list-wrap {
    display: flex;
    align-items: center;
    touch-action: none;

    &.animation {
      transition: all .5s ease-in-out;
    }
  }

  .poster-wrap {
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin: 16px 5%;
    border-radius: 8px;
    height: 250px;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-right: 0;
    margin-bottom: 0;

    .poster-timer {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 50px;
      display: flex;
      align-items: center;
    }

    .image-wrap {
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-top: auto;
      margin-bottom: 18px;

      .item-wrap {
        display: flex;
        align-items: center;
        margin: auto;

        .wrap-item {
          width: 90px;
          height: 116px;
          margin: 10px;
          background: #F4F4F4;
          border: 1px solid #E9E9E9;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.06);
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          // padding: 10px;
          transition: all .2s linear;

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

          &.active {
            transform: scale(1.15);
          }
        }
      }
    }
  }

  .step-wrap {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);

    .step-item {
      margin: 3px;
      width: 16px;
      height: 4px;
      background: #F9F9F9;
      border: 1px solid #C4C4C4;

      &.active {
        background-color: #FF1659;
        border: 1px solid #FF1659;
      }
    }
  }
}