.mmbox {
  width: 34px;
  height: 25px;
}

.mmbtn {
  width: 34px;
  cursor: pointer;
}

span.btn_line {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
  position: relative;
}

 span.btn_line + span.btn_line {
  margin-top: 9px;
}

.active .btn_line:nth-child(1) {
  animation: ease .7s top forwards;
}

.not-active .btn_line:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.active .btn_line:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.not-active .btn_line:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.active .btn_line:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.not-active .btn_line:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 11px;
    transform: rotate(0);
  }
  100% {
    top: 11px;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 4px;
    transform: rotate(45deg);
  }
  50% {
    top: 4px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 11px;
    transform: rotate(0);
  }
  100% {
    bottom: 11px;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 4px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 4px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}