@charset "utf-8";




@keyframes overlay {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hand {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    left: 75%;
  }
  48% {
    opacity: 1;
    left: 25%;
  }
  49% {
    opacity: 0;
    left: 25%;
  }
  25% {
    opacity: 0;
    left: 75%;
  }
  51% {
    opacity: 0;
    left: 75%;
  }
  52% {
    opacity: 1;
    left: 75%;
  }
  90% {
    opacity: 1;
    left: 25%;
  }
  100% {
    opacity: 0;
    left: 25%;
  }
}

@keyframes btn-border {
  0% {
    width: 12.5%;
  }
  60% {
    width: 100%;
  }
  62% {
    width: 100%;
    height: 2px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}


@keyframes btn-border-out {
  0% {
    width: 100%;
    height: 100px;
  }
  60% {
    width: 100%;
    height: 2px;
  }
  62% {
    width: 100%;
  }
  100% {
    width: 12.5%;
  }
}


@keyframes cross-before {
  0% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  20% {
    transform: translate(-50%, -50%) rotate(315deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(315deg);
  }
}


@keyframes cross-after {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  20% {
    transform: translate(-50%, -50%) rotate(405deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}