@charset "UTF-8";

/*********path*********/
path {
  stroke: #222;
  fill: transparent;
  stroke-width:3px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: DASH 3s ease-out 0s forwards;
  -o-animation: DASH 3s ease-out 0s forwards;
  -moz-animation: DASH 3s ease-out 0s forwards;
  -ms-animation: DASH 3s ease-out 0s forwards;
  animation: DASH 3s ease-out 0s forwards;
}

@-moz-keyframes DASH {
  0% {
    stroke: #222;
    stroke-dashoffset: 1000;
  }
  25% {
    stroke: #222;
    fill: transparent;
  }
  50% {
    stroke: #222;
    stroke-dashoffset: 0;
  }
  75% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
  100% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
}
@-webkit-keyframes DASH {
  0% {
    stroke: #222;
    stroke-dashoffset: 1000;
  }
  25% {
    stroke: #222;
    fill: transparent;
  }
  50% {
    stroke: #222;
    stroke-dashoffset: 0;
  }
  75% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
  100% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
}
@-o-keyframes DASH {
  0% {
    stroke: #222;
    stroke-dashoffset: 1000;
  }
  25% {
    stroke: #222;
    fill: transparent;
  }
  50% {
    stroke: #222;
    stroke-dashoffset: 0;
  }
  75% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
  100% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
}
@-ms-keyframes DASH {
  0% {
    stroke: #222;
    stroke-dashoffset: 1000;
  }
  25% {
    stroke: #222;
    fill: transparent;
  }
  50% {
    stroke: #222;
    stroke-dashoffset: 0;
  }
  75% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
  100% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
}
@keyframes DASH {
  0% {
    stroke: #222;
    stroke-dashoffset: 1000;
  }
  25% {
    stroke: #222;
    fill: transparent;
  }
  50% {
    stroke: #222;
    stroke-dashoffset: 0;
  }
  75% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
  100% {
    stroke: #222;
    stroke-dashoffset: 0;
    fill: #222;
  }
}

/*********textlaye*********/
.effectlayer_01 {
    position: relative;
    overflow: hidden;
}
.effectlayer_01::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #00001a;
    animation-name: textlayer-01;
    animation-timing-function:ease;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes textlayer-01 {
    from {transform: translateY(-100%); opacity: 1;}
    20%,60% {transform: translateY(0); opacity: 1;}
    to {transform: translateY(101%); opacity: 1;}
}
@-webkit-keyframes textlayer-01 {
    from {transform: translateY(-100%); opacity: 1;}
    20%,60% {transform: translateY(0); opacity: 1;}
    to {transform: translateY(101%); opacity: 1;}
}