@charset "utf-8";


.vector{
    position: absolute;
}

.sc0101.vector_wrap{
    position: absolute;
    bottom: -170px;
    left: -240px;
    height: 394px;
    width: 592px;
    z-index: 1;
    opacity: 1;
    animation: sc0101 80s infinite linear;
}

@keyframes sc0101 {
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    1%{
        opacity: 1;
    }
    96%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(-400px);
    }
}

.vector[src$="v0101.svg"]{
    top: 0;
    left: 124px;
    animation: sc01_v01 30s infinite ease-out;
}
@keyframes sc01_v01 {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(-10deg);
    }
    50%{
        transform: rotate(0);
    }
    75%{
        transform: rotate(6deg);
    }
    100%{
        transform: rotate(0);
    }
}

.vector[src$="v0102.svg"]{
    top: 135px;
    left: 0;
    animation: sc01_v02 5s infinite;
}

@keyframes sc01_v02 {
    0%{
        transform: translateY(0);
    }
    25%{
        transform: translateY(4px);
    }
    75%{
        transform: translateY(-6px);
    }
    100%{
        transform: translateY(0);
    }
}

.vector[src$="v0103.svg"]{
    bottom: 0;
    left: 158px;
    animation: sc01_v03 100s infinite ease-out;
}

@keyframes sc01_v03 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(60deg);
    }
}

.vector[src$="v0104.svg"]{
    top: 216px;
    left: 426px;
    animation: sc01_v04 20s infinite ease-out;
}

@keyframes sc01_v04 {
    0%{
        transform: translateY(0) rotate(0);
    }
    25%{
        transform: rotate(-10deg);
    }
    50%{
        transform: translateY(-10px) rotate(0);
    }
    75%{
        transform: rotate(6deg);
    }
    100%{
        transform: translateY(0) rotate(0);
    }
}


.vector[src$="v0105.svg"]{
    top: 178px;
    right: 0;
    animation: sc01_v05 50s infinite ease-out;
}

@keyframes sc01_v05 {
    0%{
        top: 178px;
        transform: rotate(0);
    }
    25%{
        transform: rotate(20deg);
    }
    100%{
        top: 0;
        transform: rotate(0);
    }
}

@media screen and (max-width: 900px) {
    .sc0101.vector_wrap{
        top: 58px;
        bottom: unset;
        left: -10px;
        height: 284px;
        width: 427px;
    }
    @keyframes sc0101 {
        0%{
            transform: translateY(-0);
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        100%{
            transform: translateY(-284px); 
        }
    }
    .vector[src$="v0101.svg"]{
        top: 0;
        left: 32px;
        width: 57px;
        height: 53px;
    }
    .vector[src$="v0102.svg"]{
        top: 164px;
        left: 0;
        width: 98px;
        height: 68px;
        animation: unset;
    }
    .vector[src$="v0103.svg"]{
        top: 265px;
        left: 75px;
        width: 172px;
        height: 85px;
    }
    .vector[src$="v0104.svg"]{
        top: 218px;
        left: 287px;
        width:82px;
        height: 46px;
    }
    .vector[src$="v0105.svg"]{
        top: 188px;
        left: 344px;
        width: 74px;
        height: 46px;
    }
}

.v0204.vector{
    position: absolute;
    top: 60px;
    left: 100px;
    transform: rotate(-40deg);
    z-index: -1;
    animation: sc02_v04 120s infinite;
}

@keyframes sc02_v04 {
    0%{
        top: 60px;
        transform: rotate(-40deg);
    }
    35%{
        top: 100px;
        left: 200px;
    }
    75%{
        top: 280px;
        left: 80px;
        transform: rotate(-20deg);
    }
    100%{
        top: 60px;
        left: 100px;
        transform: rotate(-40deg);
    }
}

.v0205.vector-wrap{
    position: absolute;
    bottom: 40px;
    left: 60%;
    height: 74.2px;
    width: 70px;
    z-index: -1;
    animation: sc02_v05 60s infinite;
}

@keyframes sc02_v05 {
  0% {
    opacity: 0;
    left: 60%;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
     opacity: 0;
    left: 100%;
  }
}

.vector[src$="v0205.svg"]{
    animation: sc02_v05y 15s infinite;
}

@keyframes sc02_v05y {
  0% {
    bottom: 40px;
  }
  25% {
    bottom: 0;
  }
  75% {
    bottom: 80px;
  }
  100% {
    bottom: 40px;
  }
}

.v0206.vector-wrap{
    position: absolute;
    top: 40%;
    opacity: 0;
    animation: sc02_v06x 120s infinite;
    animation-delay: 10s;
    width: 170.8px;
    height: 73.5px;
    z-index: 6;
}

.v0207.vector-wrap{
    position: absolute;
    left: 100px;
    bottom: 30px;
    animation: sc02_v07x 120s infinite;
    width: 85.4px;
    height: 65.8px;
    z-index: 6;
}

@keyframes sc02_v06x {
  0% {
    opacity: 0;
    left: -100px;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 100%;
  }
}

@keyframes sc02_v07x {
  0% {
    left: 100px;
  }
  30% {
    bottom: 30px;
  }
  40% {
    bottom: 60px;
  }
  50% {
    bottom: 30px;
    left: 50%;
    transform: rotate(0);
  }
  52% {
    bottom: 60px;
    left: 52%;
    transform: rotate(-10deg);
  }
  54% {
    bottom: 30px;
    transform: rotate(0);
  }
  100% {
    left: 100px;
  }
}

.vector[src$="v0206.svg"]{
    animation: sc02_v06 20s infinite ease-in-out;
}

@keyframes sc02_v06 {
    0%{
        transform: translateY(0) rotate(0);
    }
    25%{
         transform: translateY(10px) rotate(4deg);
    }
    75%{
         transform: translateY(-10px) rotate(-8deg);
    }
    100%{
        transform: translateY(0) rotate(0);
    }
}

.vector[src$="v0207.svg"]{
    animation: sc02_v07 5s infinite ease-in-out;
}

@keyframes sc02_v07 {
    0%{
        transform: translateY(0);
    }
    25%{
         transform: translateY(10px);
    }
    75%{
         transform: translateY(-10px);
    }
    100%{
        transform: translateY(0);
    }
}

@media screen and (max-width: 900px) {
    .vector_wrap.v0201,
    .vector.v0204{
        display: none;
    }
    .v0205.vector-wrap {
        bottom: 80px;
        left: unset;
        right: 55px;
        height: 47px;
        width: 37px;
        z-index: -1;
        animation: unset;
    }
    .vector[src$="v0205.svg"]{
        animation: sc02_v05y900 15s infinite;
    }
    @keyframes sc02_v05y900 {
        0% {
            transform: translateY(0);
        }
        50%{
            transform: translateY(10px);
        }
        100% {
            transform: translateY(0);
        }
    }
    .v0206.vector-wrap{
        top: 60px;
         animation-duration: 60s;
         animation-delay: unset;
    }
    .vector[src$="v0206.svg"]{
        height: 46.2px;
        width: 107.8px;
    }
    .v0207.vector-wrap{
        top: 140px;
         animation-duration: 60s;
         animation-delay: unset;
    }
    .vector[src$="v0207.svg"]{
        height: 41.3px;
        width: 53.9px;
    }
}

.sc03-note-wrap{
    position: relative;
}

.vector[src$="v0301.svg"]{
    right: 400px;
    top: 50px;
    width: 123.2px;
    height: 88.2px;
    animation: sc03_v01 50s infinite linear;
    z-index: -1;
}

@keyframes sc03_v01 {
    0%{
        right: 400px;
        top: 50px;
    }
    25%{
        right: 300px;
        top: 100px;
        transform: rotate(0);
    }
    28%{
        transform: rotate(10deg);
    }
    75%{
        right: 500px;
        top: 300px;
        transform: rotate(45deg);
    }
    100%{
        right: 400px;
        top: 50px;
        transform: rotate(0);
    }
}

.sc03main{
    position: absolute;
    max-width: 1440px;
    width: 100%;
    bottom: 352px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    height: 518px;
}

.sc03main .v0301{
    position: absolute;
    top: 152px;
    left: 42px;
    width: 478px;
    height: 478px;
    animation: rotateAnimation 50s infinite linear;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.vector[src$="v0302.svg"]{
    top: 227px;
    left: 90px;
}

.vector[src$="v0303.svg"]{
    top: 98px;
    left: 141px;
}

.vector[src$="v0304.svg"]{
    top: 213px;
    left: 274px;
}

.sc03main .v0302{
    position: absolute;
    top: 122px;
    left: 156px;
    width: 398px;
    height: 398px;
    z-index: -1;
    animation: rotateAnimation 40s infinite linear;
}

.vector[src$="v0305.svg"]{
    top: 108px;
    left: 144px;
}

.vector[src$="v0306.svg"]{
    top: 211px;
    left: 93px;
}

.vector[src$="v0307.svg"]{
    top: 184px;
    left: 202px;
}

@media screen and (max-width: 900px) {
    .vector[src$="v0301.svg"]{
        display: none;
    }
    .sc03main.vector-wrap{
        top: 20px;
        left: unset;
        bottom: unset;
        right: 0;
        transform: unset;
        overflow: hidden;
    }
    .sc03main .v0301{
        top: 244px;
        left: unset;
        right: 0;
        width: 340px;
        height: 340px;
    }
    .vector[src$="v0302.svg"]{
        top: 160px;
        left: 65px;
        height: 88px;
        width: 120px;
    }
    .vector[src$="v0303.svg"]{
        top: 70px;
        left: 100px;
        height: 72px;
        width: 114px;
    }
    .vector[src$="v0304.svg"]{
        top: 151px;
        left: 194px;
        height:78px;
        width: 66px;
    }
    .sc03main .v0302{
        top: 230px;
        left: unset;
        right: -20px;
        width: 283px;
        height: 283px;
    }

    .vector[src$="v0305.svg"]{
        top: 73px;
        left: 93px;
        width: 61px;
        height: 44px;
    }

    .vector[src$="v0306.svg"]{
        top: 140px;
        left: 66px;
        width: 44px;
        height: 66px;
    }

    .vector[src$="v0307.svg"]{
        top: 130px;
        left: 143px;
        width: 78px;
        height: 53px;
    }
}
@media screen and (max-width: 700px) {
    .sc03main.vector-wrap{
        top: 80px;
    }
}

.v0403_0101{
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 1440px;
    width: 100%;
    transform: translateX(-50%);
}

.vector[src$="v0403_0101.svg"]{
    top: 470px;
    left: 50px;
    width: 218px;
    height: 223px;
    opacity: 0;
}

.vector[src$="v0403_0102.svg"]{
    position: absolute;
    top: 943px;
    right: 0;
    width: 394px;
    height: 388px;
    opacity: 0;
}

.vector[src$="v0403_0101.svg"].scrolled,
.vector[src$="v0403_0102.svg"].scrolled{
    animation: sc04_v03 100s infinite linear;
}

@keyframes sc04_v03 {
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    2%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    80%{
        opacity: 0;
        transform: translateY(-470px);
    }
    100%{
        opacity: 0;
    }
}

.v0403_0201{
    top: 336px;
    left: 50%;
    width: 74px;
    height: 68px;
    z-index: 5;
}

.v0403_0202{
    top: 372px;
    left: 66%;
    width: 171px;
    height: 70px;
    z-index: 5;
}

.v0403_0203{
    top: 560px;
    left: 82.5%;
    width: 133px;
    height: 93px;
    z-index: 5;
}

.v0403_0204{
    top: 640px;
    left: 74%;
    width: 199px;
    height: 108px;
    z-index: 5;
}

.v0403_0205{
    top: 1174px;
    left: 79.9%;
    width: 106px;
    height: 60px;
    z-index: 5;
}

.v0403_0206{
    top: 1258px;
    left: 71.5%;
    width: 178px;
    height: 80px;
    z-index: 5;
}

.v0403_0207{
    top: 1117px;
    left: 19.7%;
    width: 207px;
    height: 82px;
    z-index: 5;
}

.v0403_0208{
    bottom: 0;
    left: 9.2%;
    width: 230px;
    height: 137px;
    z-index: 5;
}

.v-iine{
    position: absolute;
    opacity: 0;
}

.v-iine .vector{
    animation: iine_huyohuyo 2.8s infinite ease;
}

@keyframes iine_huyohuyo {
    0%{
        transform: translatex(0);
    }
    50%{
         transform: translatex(-5px);
    }
    100%{
        transform: translatex(0);
    }
}

.v-iine.scrolled{
    animation: iine_top 3s 1 ease-out;
}

.v0202.scrolled{
    animation-delay: .2S;
}

.v0206.scrolled{
    animation-delay: .4S;
}

.v0208.scrolled{
    animation-delay: .8S;
}

@keyframes iine_top {
    0%{
        transform: translateY(0);
    }
    4%{
        transform: translateY(0);
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(-400px);
    }
}

@media screen and (max-width: 900px) {
    .v0403_0101,
    .vector[src$="v0403_0102.svg"]{
        display: none;
    }
    .v0403_0203{
        top: 583px;
        left: unset;
        right: 22px;
        width: 102px;
        height: 68px;
    }
    .v0403_0204{
        top: 100px;
        left: unset;
        right: 40px;
        width: 159px;
        height: 86px;
    }
    .v0403_0205{
        top: 739px;
        left: unset;
        right: -20px;
        width: 84px;
        height: 47px;
        z-index: 5;
    }
    .v0403_0206{
        top: 990px;
        left: 116px;
        width: 142px;
        height: 64px;
    }
    .v0403_0207{
        top: 408px;
        left: 16px;
        width: 152px;
        height: 60px;
    }
    .v0403_0208{
        top: 476px;
        bottom: unset;
        left: 0;
        width: 120px;
        height: 60px;
    }
    .v-iine.scrolled{
        animation-duration: 4s;
    }
    .v0202.scrolled,
    .v0206.scrolled,
    .v0208.scrolled{
        animation-delay: unset;
    }
}

.v050102{
    position: relative;
    max-width: 1440px;
    width: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
     z-index: 5;
}

.v050102 .vector-wrap{
    position: absolute;
    left: 8.8%;
    top: 8.8%;
}

.v0501-wrap{
    position: absolute;
    top: 86px;
    left: 150px;
    width: 278px;
    height: 106px;
}

.vector[src$="v0501.svg"]{
    animation: v0501 200s infinite linear;
    transform-origin: left center 0;
}

@keyframes v0501 {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}

.v0502-wrap{
    position: absolute;
    top: 14px;
    left: 44px;
    width: 344px;
    height: 100px;
    z-index: -1;
}

.vector[src$="v0502.svg"]{
    animation: v0502 220s infinite linear;
}

@keyframes v0502 {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0);
  }
}

.v0501-wrap.scrolled{
    animation: v05 200s infinite linear;
}

.v0502-wrap.scrolled{
    animation: v05 220s infinite linear;
}

@keyframes v05 {
    0%{
        transform: translateY(0);
    }
    96%{
        opacity: 1;
    }
    98%{
        opacity: 0;
        transform: translateY(-1000px); 
    }
    99%{
        opacity: 0;
        transform: translateY(0); 
    }
    100%{
        opacity: 1;
        transform: translateY(0); 
    }
}

@media screen and (max-width: 900px) {
    .v050102{
        left: 0;
        transform:unset;
    }
    .v050102 .vector-wrap{
        position: absolute;
        left: -30px;
        top: 84px;
    }
    .v0501-wrap{
        top: 80px;
        left: 102px;
        height: 72px;
        width: 189px;
    }
    .v0502-wrap{
        top: 20px;
        left: 31px;
        height: 114px;
        width: 204px;
    }
}

@media screen and (max-width: 600px) {
    .sc0101.vector_wrap{
        left: -24px;
        height: 300px;
        width: 307px;
    }
    .vector[src$="v0101.svg"]{
        display: none;
    }
    .vector[src$="v0102.svg"]{
        top: 120px;
        left: 164px;
        width: 78px;
        height: 54px;
    }
    .vector[src$="v0103.svg"]{
        top: unset;
        bottom: 0;
        left: 0;
        width: 142px;
        height: 70px;
    }
    .vector[src$="v0104.svg"]{
        top: 200px;
        left: 212px;
        width: 62px;
        height: 38px;
    }
    .vector[src$="v0105.svg"]{
        top: 227px;
        left: 246px;
        width: 61px;
        height: 38px;
    }
    .vector_wrap.v0201{
        display: block;
    }
    .v0205.vector-wrap {
        bottom: 20px;
        right: 22px;
        height: 43.4px;
        width: 40.6px;
        z-index: 5;
    }
    .v0206.vector-wrap {
        top: 250px;
        width: 105.7px;
        height: 45.5px;
    }
    .v0207.vector-wrap {
        top: unset;
        bottom: 20px;
        width: 53.2px;
        height: 40.6px;
    }
    .sc03main.vector-wrap {
        top: 25%;
        width: 240px;
        height: 240px;
    }
    .sc03main .v0301 {
        top: 20px;
        right: 22px;
        width: 206px;
        height: 200px;
    }
    .vector[src$="v0302.svg"] {
        top: 96px;
        left: 17px;
        height: 80px;
        width: 110px;
    }
    .vector[src$="v0303.svg"] {
        top: 0;
        left: 30px;
        height: 65px;
        width: 105px;
    }
    .vector[src$="v0304.svg"] {
        top: 80px;
        left: 141px;
        height: 60px;
        width: 70px;
    }
    .sc03main .v0302 {
        top: 40px;
        right: -20px;
        width: 146px;
        height: 126px;
    }
    .vector[src$="v0305.svg"] {
        top: 0;
        left: 33px;
        width: 57px;
        height: 41px;
    }
    .vector[src$="v0306.svg"] {
        top: 71px;
        left: 0;
        width: 37px;
        height: 61px;
    }
    .vector[src$="v0307.svg"] {
        top: 52px;
        left: 74px;
        width: 50px;
        height: 72px;
    }
    .v0403_0202{
        top: 383px;
        left: -20px;
        width: 118px;
        height: 48px;
    }
    .v0403_0203{
        top: 557px;
        left: unset;
        right: -10px;
        width: 84px;
        height: 57px;
        z-index: 6;
    }
    .v0403_0204{
        top: 587px;
        left: unset;
        right: -40px;
        width: 147px;
        height: 76px;
    }
    .v0403_0205{
        display: none;
    }
    .v0403_0206{
        top: 1200px;
        left: 67px;
        width: 124px;
        height: 56px;
        z-index: 8;
    }
    .v0403_0207{
        display: none;
    }
    .v0403_0208{
        top: 1150px;
        left: 5px;
        width: 138px;
        height: 69px;
    }
    .v0501-wrap.scrolled,
    .v0502-wrap.scrolled{
        animation-delay: 2s;
    }
    .v050102{
        top: -30px;
    }
    .v050102 .vector-wrap{
        top: 0;
        left: -60px;
    }
    .v0501-wrap {
        left: 140px;
    }
}