.frontcurtain {
  right: 0;
  background-color: #111;
  overflow: hidden;
  z-index: 8000;
}
.frontcurtain-logo {
  max-width: none;
  min-width: 264px;
  left: calc(50vw - 132px);
  top: calc(50vh - 116px);
  z-index: 8010;
}
.frontcurtain-logo path { fill: #fff; }
.frontcurtain-logo path {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: paused;
}
.frontcurtain.play .frontcurtain-logo path { animation-play-state: running; }
@keyframes fadeInUp{
  0% { opacity: 0; /* transform: translateY(150px); */ }
  50% { opacity: .3; }
  100% { opacity: 1; /* transform: translateY(0); */ }
}
.frontcurtain-logo ._mark {
  animation-name: fadeInUp;
  animation-duration: 2000ms;
  animation-timing-function: linear;
}
@keyframes fadeInLeftDown{
  0% { opacity: 0; transform: translate(120px, -4px); }
  100% { opacity: 1; transform: translate(0, 0); }
}
.frontcurtain-logo path[class^="_c"] {
  animation-duration: 400ms;
  animation-timing-function: ease-out;
}
.frontcurtain-logo ._c1 {
  animation-name: fadeInLeftDown;
  animation-delay: 2400ms;
}
@keyframes fadeInLeftUp{
  0% { opacity: 0; transform: translate(120px, 4px); }
  50% { opacity: .3; }
  100% { opacity: 1; transform: translate(0, 0); }
}
.frontcurtain-logo ._c2 {
  animation-name: fadeInLeftUp;
  animation-delay: 3000ms;
}
@keyframes fadeInUpLetter {
  0% { opacity: 0; transform: translateY(32px); }
  100% { opacity: 1; transform: translateY(0); }
}
.frontcurtain-logo path[class^="_l"] {
  animation-name: fadeInUpLetter;
  animation-duration: 400ms;
}
.frontcurtain-logo ._l1 { animation-delay: 3900ms; }
.frontcurtain-logo ._l2 { animation-delay: 4200ms; }
.frontcurtain-logo ._l3 { animation-delay: 4500ms; }
.frontcurtain-logo ._l4 { animation-delay: 4800ms; }
.frontcurtain-logo ._l5 { animation-delay: 5100ms; }
.frontcurtain-logo ._l6 { animation-delay: 5400ms; }