main {
    display: block;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
    position: relative;
}

main .mv__area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

main .mv__area .mv__line {
    position: relative;
    width: 300px;
    height: 300px;
    margin-bottom: 25px;
}

main .mv__area .mv__line > svg {
    width: 225px;
    height: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 4;
}

main .mv__area .mv__line > .mv__square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
main .mv__area .mv__line > .mv__square img:nth-child(1) {
    z-index: 3;
    animation-name: fadeInAnime01;
    animation-delay: 0.5;
}
main .mv__area .mv__line > .mv__square img:nth-child(2) {
    z-index: 2;
    animation-name: fadeInAnime02;
    animation-delay: 0.75;
}

main .mv__area .mv__line > .mv__square img:nth-child(3) {
    z-index: 1;
    animation-name: fadeInAnime03;
    animation-delay: 1;
}
h1{
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-name: fadeInAnime03;
    animation-delay: 3;
        opacity: 0;

}
h2{
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-name: fadeInAnime03;
    animation-delay: 3.5;
        opacity: 0;

}
@keyframes fadeInAnime01{
  from {
    opacity: 0;
      margin-top: 20px
  }

  to {
    opacity: 1;
      margin-top: 0
  }
}
@keyframes fadeInAnime02{
  from {
    opacity: 0;
      margin-top: 0
  }

  to {
    opacity: 1;
      margin-top: 0
  }
}
@keyframes fadeInAnime03{
  from {
    opacity: 0;
      margin-top: -20px
  }

  to {
    opacity: 1;
      margin-top: 0
  }
}



main h1 {
    font-size: 30px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 800;
    color: #fff;
    text-align: center;
    letter-spacing: 3px;
    margin-bottom: 30px;

}

main h2 {
    font-size: 26px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
    color: #fff;
    text-align: center;
    letter-spacing: 6px
}


/*mv__line*/
/***************************************************
 * Generated by SVG Artista on 9/25/2022, 3:03:31 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
/***************************************************
 * Generated by SVG Artista on 9/25/2022, 3:12:40 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 119.17507934570312px;
        stroke-dasharray: 119.17507934570312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 119.17507934570312px;
    }
}

@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 119.17507934570312px;
        stroke-dasharray: 119.17507934570312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 119.17507934570312px;
    }
}

.svg-elem-1 {
    -webkit-animation: animate-svg-stroke-1 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s both;
    animation: animate-svg-stroke-1 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

@keyframes animate-svg-stroke-2 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

.svg-elem-2 {
    -webkit-animation: animate-svg-stroke-2 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.12s both;
    animation: animate-svg-stroke-2 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.12s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
    0% {
        stroke-dashoffset: 32.51638984680176px;
        stroke-dasharray: 32.51638984680176px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 32.51638984680176px;
    }
}

@keyframes animate-svg-stroke-3 {
    0% {
        stroke-dashoffset: 32.51638984680176px;
        stroke-dasharray: 32.51638984680176px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 32.51638984680176px;
    }
}

.svg-elem-3 {
    -webkit-animation: animate-svg-stroke-3 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.24s both;
    animation: animate-svg-stroke-3 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.24s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

@keyframes animate-svg-stroke-4 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

.svg-elem-4 {
    -webkit-animation: animate-svg-stroke-4 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.36s both;
    animation: animate-svg-stroke-4 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.36s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
    0% {
        stroke-dashoffset: 119.17507934570312px;
        stroke-dasharray: 119.17507934570312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 119.17507934570312px;
    }
}

@keyframes animate-svg-stroke-5 {
    0% {
        stroke-dashoffset: 119.17507934570312px;
        stroke-dasharray: 119.17507934570312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 119.17507934570312px;
    }
}

.svg-elem-5 {
    -webkit-animation: animate-svg-stroke-5 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.48s both;
    animation: animate-svg-stroke-5 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.48s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
    0% {
        stroke-dashoffset: 116.82595825195312px;
        stroke-dasharray: 116.82595825195312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 116.82595825195312px;
    }
}

@keyframes animate-svg-stroke-6 {
    0% {
        stroke-dashoffset: 116.82595825195312px;
        stroke-dasharray: 116.82595825195312px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 116.82595825195312px;
    }
}

.svg-elem-6 {
    -webkit-animation: animate-svg-stroke-6 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.6s both;
    animation: animate-svg-stroke-6 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

@keyframes animate-svg-stroke-7 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

.svg-elem-7 {
    -webkit-animation: animate-svg-stroke-7 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.7199999999999998s both;
    animation: animate-svg-stroke-7 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.7199999999999998s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
    0% {
        stroke-dashoffset: 40.32481002807617px;
        stroke-dasharray: 40.32481002807617px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 40.32481002807617px;
    }
}

@keyframes animate-svg-stroke-8 {
    0% {
        stroke-dashoffset: 40.32481002807617px;
        stroke-dasharray: 40.32481002807617px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 40.32481002807617px;
    }
}

.svg-elem-8 {
    -webkit-animation: animate-svg-stroke-8 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.84s both;
    animation: animate-svg-stroke-8 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.84s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

@keyframes animate-svg-stroke-9 {
    0% {
        stroke-dashoffset: 118.10771179199219px;
        stroke-dasharray: 118.10771179199219px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 118.10771179199219px;
    }
}

.svg-elem-9 {
    -webkit-animation: animate-svg-stroke-9 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.96s both;
    animation: animate-svg-stroke-9 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.96s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
    0% {
        stroke-dashoffset: 84px;
        stroke-dasharray: 84px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 84px;
    }
}

@keyframes animate-svg-stroke-10 {
    0% {
        stroke-dashoffset: 84px;
        stroke-dasharray: 84px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 84px;
    }
}

.svg-elem-10 {
    -webkit-animation: animate-svg-stroke-10 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.08s both;
    animation: animate-svg-stroke-10 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.08s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
    0% {
        stroke-dashoffset: 21.5px;
        stroke-dasharray: 21.5px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 21.5px;
    }
}

@keyframes animate-svg-stroke-11 {
    0% {
        stroke-dashoffset: 21.5px;
        stroke-dasharray: 21.5px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 21.5px;
    }
}

.svg-elem-11 {
    -webkit-animation: animate-svg-stroke-11 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.2s both;
    animation: animate-svg-stroke-11 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.2s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
    0% {
        stroke-dashoffset: 85px;
        stroke-dasharray: 85px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 85px;
    }
}

@keyframes animate-svg-stroke-12 {
    0% {
        stroke-dashoffset: 85px;
        stroke-dasharray: 85px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 85px;
    }
}

.svg-elem-12 {
    -webkit-animation: animate-svg-stroke-12 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.32s both;
    animation: animate-svg-stroke-12 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.32s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
    0% {
        stroke-dashoffset: 168px;
        stroke-dasharray: 168px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 168px;
    }
}

@keyframes animate-svg-stroke-13 {
    0% {
        stroke-dashoffset: 168px;
        stroke-dasharray: 168px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 168px;
    }
}

.svg-elem-13 {
    -webkit-animation: animate-svg-stroke-13 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.44s both;
    animation: animate-svg-stroke-13 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.44s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
    0% {
        stroke-dashoffset: 42.840704496667314px;
        stroke-dasharray: 42.840704496667314px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 42.840704496667314px;
    }
}

@keyframes animate-svg-stroke-14 {
    0% {
        stroke-dashoffset: 42.840704496667314px;
        stroke-dasharray: 42.840704496667314px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 42.840704496667314px;
    }
}

.svg-elem-14 {
    -webkit-animation: animate-svg-stroke-14 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.56s both;
    animation: animate-svg-stroke-14 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.56s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
    0% {
        stroke-dashoffset: 33.41592653589793px;
        stroke-dasharray: 33.41592653589793px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 33.41592653589793px;
    }
}

@keyframes animate-svg-stroke-15 {
    0% {
        stroke-dashoffset: 33.41592653589793px;
        stroke-dasharray: 33.41592653589793px;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 33.41592653589793px;
    }
}

.svg-elem-15 {
    -webkit-animation: animate-svg-stroke-15 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.6799999999999997s both;
    animation: animate-svg-stroke-15 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2.6799999999999997s both;
}