/* ʱ´úJava - https://NowJava.com */
body {
  text-align: center;
  background-color: #1d1f20;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  font-size: 0;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

p {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #eee;
  opacity: 0.3;
}

.letter {
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  margin: 0 0;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #eee;
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #1d1f20;
}

.letter:nth-child(1):before {
  content: "4792036815";
  margin-top: -48px;
  -webkit-animation-name: letter1;
          animation-name: letter1;
  -webkit-animation-duration: 0.13333s;
          animation-duration: 0.13333s;
  -webkit-animation-delay: 0.95s;
          animation-delay: 0.95s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter1 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter1 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(2):before {
  content: "0295176384";
  margin-top: -96px;
  -webkit-animation-name: letter2;
          animation-name: letter2;
  -webkit-animation-duration: 2.56s;
          animation-duration: 2.56s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter2 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter2 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(3):before {
  content: "8562143079";
  margin-top: -168px;
  -webkit-animation-name: letter3;
          animation-name: letter3;
  -webkit-animation-duration: 1.82s;
          animation-duration: 1.82s;
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter3 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter3 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(4):before {
  content: "2471958306";
  margin-top: -24px;
  -webkit-animation-name: letter4;
          animation-name: letter4;
  -webkit-animation-duration: 0.96s;
          animation-duration: 0.96s;
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter4 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter4 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(5):before {
  content: "2360451897";
  margin-top: -120px;
  -webkit-animation-name: letter5;
          animation-name: letter5;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-delay: 0.94s;
          animation-delay: 0.94s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter5 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter5 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(6):before {
  content: "4851906723";
  margin-top: -216px;
  -webkit-animation-name: letter6;
          animation-name: letter6;
  -webkit-animation-duration: 2.88s;
          animation-duration: 2.88s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter6 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter6 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(7):before {
  content: "2156074938";
  margin-top: -96px;
  -webkit-animation-name: letter7;
          animation-name: letter7;
  -webkit-animation-duration: 2.208s;
          animation-duration: 2.208s;
  -webkit-animation-delay: 0.31s;
          animation-delay: 0.31s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter7 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter7 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(8):before {
  content: "1867954302";
  margin-top: -216px;
  -webkit-animation-name: letter8;
          animation-name: letter8;
  -webkit-animation-duration: 2.268s;
          animation-duration: 2.268s;
  -webkit-animation-delay: 0.37s;
          animation-delay: 0.37s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter8 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter8 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(9):before {
  content: "1452798306";
  margin-top: -72px;
  -webkit-animation-name: letter9;
          animation-name: letter9;
  -webkit-animation-duration: 1.65s;
          animation-duration: 1.65s;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter9 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter9 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(10):before {
  content: "5012438697";
  margin-top: -216px;
  -webkit-animation-name: letter10;
          animation-name: letter10;
  -webkit-animation-duration: 1.908s;
          animation-duration: 1.908s;
  -webkit-animation-delay: 0.47s;
          animation-delay: 0.47s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter10 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter10 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(11):before {
  content: "6027195483";
  margin-top: -96px;
  -webkit-animation-name: letter11;
          animation-name: letter11;
  -webkit-animation-duration: 3.04s;
          animation-duration: 3.04s;
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter11 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter11 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(12):before {
  content: "4692731805";
  margin-top: -168px;
  -webkit-animation-name: letter12;
          animation-name: letter12;
  -webkit-animation-duration: 3.36s;
          animation-duration: 3.36s;
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter12 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter12 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(13):before {
  content: "4738259106";
  margin-top: -48px;
  -webkit-animation-name: letter13;
          animation-name: letter13;
  -webkit-animation-duration: 0.29333s;
          animation-duration: 0.29333s;
  -webkit-animation-delay: 0.89s;
          animation-delay: 0.89s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter13 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter13 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(14):before {
  content: "7018456293";
  margin-top: -216px;
  -webkit-animation-name: letter14;
          animation-name: letter14;
  -webkit-animation-duration: 0.612s;
          animation-duration: 0.612s;
  -webkit-animation-delay: 0.83s;
          animation-delay: 0.83s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter14 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter14 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(15):before {
  content: "5764318209";
  margin-top: -96px;
  -webkit-animation-name: letter15;
          animation-name: letter15;
  -webkit-animation-duration: 2.08s;
          animation-duration: 2.08s;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter15 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter15 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(16):before {
  content: "8730149265";
  margin-top: -120px;
  -webkit-animation-name: letter16;
          animation-name: letter16;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
  -webkit-animation-delay: 0.49s;
          animation-delay: 0.49s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter16 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter16 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}