.fade-enter {
  opacity: 0.01;
}

.fade-enter-active {
  opacity: 1;
  transition: all 300ms ease-out;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0.01;
  transition: all 300ms ease-out;
}

.zoom-enter {
  opacity: 0.01;
  transform: scale(0);
}

.zoom-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 300ms ease-out;
}

.zoom-exit {
  opacity: 1;
  transform: scale(1);
}

.zoom-exit-active {
  opacity: 0.01;
  transform: scale(0);
  transition: all 300ms ease-out;
}

.slide-up-enter {
  transform: translateY(100%);
}

.slide-up-enter-active {
  transform: translateY(0%);
  transition: all 300ms ease-out;
}

.slide-up-exit {
  transform: translateY(0%);
}

.slide-up-exit-active {
  transform: translateY(100%);
  transition: all 300ms ease-in;
}

.slide-down-enter {
  transform: translateY(-100%);
}

.slide-down-enter-active {
  transform: translateY(0%);
  transition: all 300ms ease-out;
}

.slide-down-exit {
  transform: translateY(0%);
}

.slide-down-exit-active {
  transform: translateY(-100%);
  transition: all 300ms ease-in;
}

.slide-right-enter {
  transform: translateX(100%);
}

.slide-right-enter-active {
  transform: translateX(0%);
  transition: all 300ms ease-out;
}

.slide-right-exit {
  transform: translateX(0%);
}

.slide-right-exit-active {
  transform: translateX(100%);
  transition: all 300ms ease-in;
}

.slide-left-enter {
  transform: translateX(-100%);
}

.slide-left-enter-active {
  transform: translateX(0%);
  transition: all 300ms ease-out;
}

.slide-left-exit {
  transform: translateX(0%);
}

.slide-left-exit-active {
  transform: translateX(-100%);
  transition: all 300ms ease-in;
}

*,
*:before,
*:after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  background-color: #f8f8f8;
  font-size: 28px;
  font-family: PingFangSC, "Microsoft YaHei", Helvetica, "Droid Sans", Arial, sans-serif;
}

*[contenteditable] {
  -webkit-user-select: auto !important;
}

input[readonly] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

*:focus {
  outline: none;
}

a {
  background: transparent;
  text-decoration: none;
  outline: none;
}

.mask-open {
  overflow: hidden;
}