/**
 * ----------------------------------------
 * animation pulse
 * ----------------------------------------
 */
@keyframes pulse {
  0%, 90%, 100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  8% {
    transform: scale(1.12);
    -webkit-transform: scale(1.12);
  }
  16% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes pulse {
  0%, 90%, 100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  8% {
    transform: scale(1.12);
    -webkit-transform: scale(1.12);
  }
  16% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
/**
 * ----------------------------------------
 * animation offerMoveOpen
 * ----------------------------------------
 */
@keyframes offerMoveOpen {
  0% {
    width: 180px;
    height: 240px;
    transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
  }
  30% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0);
  }
  50% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1.05);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1.05);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  90%, 100% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
@-webkit-keyframes offerMoveOpen {
  0% {
    width: 180px;
    height: 240px;
    transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
  }
  30% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0);
  }
  50% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1.05);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1.05);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  90%, 100% {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0) scaleX(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
/**
 * ----------------------------------------
 * animation offerMoveClose
 * ----------------------------------------
 */
@keyframes offerMoveClose {
  from {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0deg);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0deg);
  }
  to {
    width: 180px;
    height: 240px;
    transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
  }
}
@-webkit-keyframes offerMoveClose {
  from {
    width: 342px;
    height: 366px;
    transform: translate(calc(-50% - 342px), -50%) rotate(0deg);
    -webkit-transform: translate(calc(-50% - 342px), -50%) rotate(0deg);
  }
  to {
    width: 180px;
    height: 240px;
    transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
  }
}
/**
 * ----------------------------------------
 * animation offerRotateOpen
 * ----------------------------------------
 */
@keyframes offerRotateOpen {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes offerRotateOpen {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
/**
 * ----------------------------------------
 * animation offerRotateClose
 * ----------------------------------------
 */
@keyframes offerRotateClose {
  from {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-webkit-keyframes offerRotateClose {
  from {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  to {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@media only screen and (max-width: 767px) {
  /**
  * ----------------------------------------
  * animation offerMoveOpen
  * ----------------------------------------
  */
  @keyframes offerMoveOpen {
    0% {
      width: 180px;
      height: 240px;
      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
      -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    }
    60% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0) scaleX(1.08);
      -webkit-transform: translate(-50%, -50%) rotate(0) scaleX(1.08);
    }
    90%, 100% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0) scaleX(1);
      -webkit-transform: translate(-50%, -50%) rotate(0) scaleX(1);
    }
  }
  @-webkit-keyframes offerMoveOpen {
    0% {
      width: 180px;
      height: 240px;
      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
      -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    }
    60% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0) scaleX(1.08);
      -webkit-transform: translate(-50%, -50%) rotate(0) scaleX(1.08);
    }
    90%, 100% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0) scaleX(1);
      -webkit-transform: translate(-50%, -50%) rotate(0) scaleX(1);
    }
  }
  /**
   * ----------------------------------------
   * animation offerMoveClose
   * ----------------------------------------
   */
  @keyframes offerMoveClose {
    0% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0deg);
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    38% {
      width: 290px;
      height: 326px;
      transform: translate(-50%, calc(-50% - 14px)) rotate(0deg);
      -webkit-transform: translate(-50%, calc(-50% - 14px)) rotate(0deg);
    }
    100% {
      width: 90px;
      height: 120px;
      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
      -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    }
  }
  @-webkit-keyframes offerMoveClose {
    0% {
      width: calc(100vw - 32px);
      max-width: 342px;
      height: 366px;
      transform: translate(-50%, -50%) rotate(0deg);
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
    }
    38% {
      width: 290px;
      height: 326px;
      transform: translate(-50%, calc(-50% - 14px)) rotate(0deg);
      -webkit-transform: translate(-50%, calc(-50% - 14px)) rotate(0deg);
    }
    100% {
      width: 90px;
      height: 120px;
      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
      -webkit-transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotate(var(--card-rotate));
    }
  }
}

/*# sourceMappingURL=animation.css.map */