<template>
  <div id="material_child1">
    <!-- 页面标题 -->
    <div class="material_title">
      <div class="d-flex">
        <img src="@/assets/materialImg/title.png" alt="">
      </div>
    </div>
    <!-- 返回按钮 -->
    <img src="@/assets/materialImg/returnHistory.png" alt="" class="material_btn">

    <!-- 图片 -->
    <img src="@/assets/materialImg/stove.png" alt="" class="stoveImg">
    <img src="@/assets/materialImg/quip.png" alt="" class="quipImg">
    <img src="@/assets/materialImg/MTop.png" alt="" class="MImg1">
    <img src="@/assets/materialImg/MTop.png" alt="" class="MImg2">
    <img src="@/assets/materialImg/MLeft.png" alt="" class="MImg3">
    <img src="@/assets/materialImg/MLeft.png" alt="" class="MImg4">
    <img src="@/assets/materialImg/node.png" alt="" class="nodeImg1">
    <img src="@/assets/materialImg/node.png" alt="" class="nodeImg2">
    <!-- 文字 -->
    <div class="label label_p1">石脑油进料</div>
    <div class="label label_p2">高压锅炉给水</div>
    <div class="label label_p3">900A/B/C</div>
    <div class="label label_p4">TO SHP HEADER</div>
    <div class="label label_p5">过热超高压蒸汽</div>
    <div class="label label_p6">TO 320-C-210</div>
    <div class="label label_p7">裂解气</div>
    <div class="label label_p8">FROM 320-E-270</div>
    <div class="label label_p9">急冷油</div>
    <div class="label label_p10">TO 320-C-210</div>
    <div class="label label_p11">裂解气</div>

    <div class="label label_p12">310-E-109A</div>
    <div class="label label_p13">FROM SLE</div>
    <div class="label label_p14">310-E-109F/G/H</div>


    <div class="label label_p15">310-K-109</div>
    <div class="label label_p16">310-E-109E</div>


    <div class="label label_p17">FROM 320-E-275</div>
    <div class="label label_p18">稀释蒸汽</div>

    <!-- 特殊文字 -->
    <div class="label2 label2_p1">310-V-109</div>

    <div class="label2 label2_p2">裂解炉</div>
    <!-- 标题文字 -->
    <div class="title_label title_p1">X-112</div>
    <div class="title_label title_p2">FROM9390-P-</div>
    <div class="title_label title_p3">X-911</div>
    <div class="title_label title_p4">X-211</div>
    <div class="title_label title_p5">X-211</div>
    <div class="title_label title_p6">X-211</div>
    <div class="title_label title_p7">310-Z-109A</div>
    <div class="title_label title_p8">X-212</div>
    <!-- 流程线及动效 -->
    <div class="line l_1">
      <img src="@/assets/materialImg/arrow1.png" style="width:745px;height:12px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan1">
    </div>

    <div class="line l_2">
      <img src="@/assets/materialImg/arrow2.png" style="width:20px;height:162px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan2">
    </div>

    <div class="line l_3">
      <img src="@/assets/materialImg/arrow3.png" style="width:56px;height:150px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:18px;height:20px" class="aniMovelan3">
    </div>

    <div class="line l_4">
      <img src="@/assets/materialImg/arrow4.png" style="width:853px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan4">
    </div>

    <div class="line l_5">
      <img src="@/assets/materialImg/arrow5.png" style="width:626px;height:34px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan5">
    </div>


    <div class="line l_6">
      <img src="@/assets/materialImg/arrow6.png" style="width:140px;height:254px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan6">
    </div>

    <div class="line l_7">
      <img src="@/assets/materialImg/arrow7.png" style="width:65px;height:254px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan7">
    </div>

    <div class="line l_8">
      <img src="@/assets/materialImg/arrow8.png" style="width:562px;height:34px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan8">
    </div>

    <div class="line l_12">
      <img src="@/assets/materialImg/arrow12.png" style="width:217px;height:20px">
    </div>

    <div class="line l_9">
      <img src="@/assets/materialImg/arrow9.png" style="width:307px;height:20px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan9">
    </div>

    <div class="line l_10">
      <img src="@/assets/materialImg/arrow10.png" style="width:331px;height:102px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan10">
    </div>

    <div class="line l_13">
      <img src="@/assets/materialImg/arrow13.png" style="width:20px;height:26px">
    </div>

    <div class="line l_11">
      <img src="@/assets/materialImg/arrow11.png" style="width:846px;height:26px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan11">
    </div>

    <div class="line l_15">
      <img src="@/assets/materialImg/arrow15.png" style="width:20px;height:589px">
    </div>
    <div class="line l_16">
      <img src="@/assets/materialImg/arrow16.png" style="width:20px;height:564px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan16">
    </div>
    <div class="line l_17">
      <img src="@/assets/materialImg/arrow17.png" style="width:20px;height:191px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan17">
    </div>
    <div class="line l_18">
      <img src="@/assets/materialImg/arrow18.png" style="width:20px;height:125px">
    </div>
    <div class="line l_19">
      <img src="@/assets/materialImg/arrow19.png" style="width:295px;height:20px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan19">
    </div>
    <div class="line l_20">
      <img src="@/assets/materialImg/arrow20.png" style="width:260px;height:12px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan20">
    </div>
    <div class="line l_21">
      <img src="@/assets/materialImg/arrow21.png" style="width:20px;height:131px">
    </div>
    <div class="line l_22">
      <img src="@/assets/materialImg/arrow22.png" style="width:299px;height:20px">
    </div>
    <div class="line l_23">
      <img src="@/assets/materialImg/arrow23.png" style="width:182px;height:26px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan23">
    </div>
    <div class="line l_24">
      <img src="@/assets/materialImg/arrow24.png" style="width:90px;height:12px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan24">
    </div>
    <div class="line l_25">
      <img src="@/assets/materialImg/arrow25.png" style="width:215px;height:2px">
    </div>
    <div class="line l_26">
      <img src="@/assets/materialImg/arrow26.png" style="width:20px;height:137px">
      <img src="@/assets/materialImg/arrowBottom.png" style="width:20px;height:18px" class="aniMovelan26">
    </div>
    <div class="line l_27">
      <img src="@/assets/materialImg/arrow27.png" style="width:710px;height:65px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan27">
    </div>
    <div class="line l_28">
      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan28">
    </div>
    <div class="line l_29">
      <img src="@/assets/materialImg/arrow29.png" style="width:20px;height:272px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan29">
    </div>
    <div class="line l_30">
      <img src="@/assets/materialImg/arrow30.png" style="width:853px;height:65px">
    </div>
    <div class="line l_31">
      <img src="@/assets/materialImg/arrow31.png" style="width:321px;height:12px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan31">
    </div>
    <div class="line l_32">
      <img src="@/assets/materialImg/arrow32.png" style="width:20px;height:165px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan32">
    </div>
    <div class="line l_33">
      <img src="@/assets/materialImg/arrow33.png" style="width:216px;height:2px">
    </div>
    <div class="line l_34">
      <img src="@/assets/materialImg/arrow34.png" style="width:91px;height:12px">
    </div>

    <div class="line l_36">
      <img src="@/assets/materialImg/arrow36.png" style="width:68px;height:20px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan36">
    </div>

    <div class="line l_37">
      <img src="@/assets/materialImg/arrow37.png" style="width:180px;height:26px">
      <img src="@/assets/materialImg/arrowLeft.png" style="width:18px;height:20px" class="aniMovelan37">
    </div>
    <div class="line l_38">
      <img src="@/assets/materialImg/arrow38.png" style="width:20px;height:112px">
    </div>
    <div class="line l_39">
      <img src="@/assets/materialImg/arrow39.png" style="width:710px;height:20px">
    </div>
    <div class="line l_40">
      <img src="@/assets/materialImg/arrow40.png" style="width:20px;height:502px">
    </div>
    <div class="line l_41">
      <img src="@/assets/materialImg/arrow41.png" style="width:191px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan41">
    </div>
    <div class="line l_42">
      <img src="@/assets/materialImg/arrow42.png" style="width:121px;height:20px">
      <img src="@/assets/materialImg/arrowRight.png" style="width:18px;height:20px" class="aniMovelan42">
    </div>
    <div class="line l_43">
      <img src="@/assets/materialImg/arrow43.png" style="width:20px;height:425px">
    </div>
    <div class="line l_44">
      <img src="@/assets/materialImg/arrow44.png" style="width:748px;height:20px">
    </div>
    <div class="line l_45">
      <img src="@/assets/materialImg/arrow45.png" style="width:698px;height:20px">
    </div>
    <div class="line l_46">
      <img src="@/assets/materialImg/arrow46.png" style="width:20px;height:344px">
    </div>
    <div class="line l_47">
      <img src="@/assets/materialImg/arrow47.png" style="width:86px;height:20px">
    </div>

    <div class="line l_48">
      <img src="@/assets/materialImg/arrow28.png" style="width:20px;height:64px">
      <img src="@/assets/materialImg/arrowTop.png" style="width:20px;height:18px" class="aniMovelan48">
    </div>
  </div>
</template>

<script>
export default {
  name: "material_child1",
  data() {
    return {

    }
  },
}
</script>

<style lang="scss">
#material_child1 {
  width: 1920px;
  height: 1080px;
  background-image: url('../../../assets/materialImg/materialBack.png');
  background-size: cover;

  .material_title {
    position: absolute;
    top: 31px;
    left: 860px
  }

  .material_btn {
    position: absolute;
    width: 158px;
    height: 53px;
    top: 69px;
    left: 54px;
    cursor: pointer;
  }

  .stoveImg {
    position: absolute;
    width: 312px;
    height: 770px;
    top: 136px;
    left: 1058px;
  }

  .quipImg {
    position: absolute;
    top: 389px;
    left: 701px;
  }

  .MImg1 {
    position: absolute;
    top: 585px;
    left: 437px;
    z-index: 4;
  }

  .MImg2 {
    position: absolute;
    top: 888px;
    left: 437px;
    z-index: 4;
  }

  .MImg3 {
    position: absolute;
    top: 699px;
    left: 458px;
  }

  .MImg4 {
    position: absolute;
    top: 834px;
    left: 457px;
  }

  .nodeImg1 {
    position: absolute;
    top: 620px;
    left: 603px;
  }

  .nodeImg2 {
    position: absolute;
    top: 925px;
    left: 602px;
  }


  // 文字样式
  .label {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #002063;
  }

  .label_p1 {
    top: 267px;
    left: 297px;
  }

  .label_p2 {
    top: 358px;
    left: 395px;
  }

  .label_p3 {
    top: 374px;
    left: 246px;
  }

  .label_p4 {
    top: 449px;
    left: 315px;
  }

  .label_p5 {
    top: 496px;
    left: 315px;
  }

  .label_p6 {
    top: 607px;
    left: 314px;
  }

  .label_p7 {
    top: 644px;
    left: 337px;
  }

  .label_p8 {
    top: 791px;
    left: 307px;
  }

  .label_p9 {
    top: 828px;
    left: 335px;
  }

  .label_p10 {
    top: 914px;
    left: 314px;
  }

  .label_p11 {
    top: 951px;
    left: 337px;
  }

  .label_p12 {
    top: 670px;
    left: 880px;
  }

  .label_p13 {
    top: 1000px;
    left: 898px;
  }

  .label_p14 {
    top: 1021px;
    left: 898px;
  }

  .label_p15 {
    top: 156px;
    left: 1245px;
  }

  .label_p16 {
    left: 1374px;
    top: 602px;
  }

  .label_p17 {
    left: 1549px;
    top: 161px;
  }

  .label_p18 {
    left: 1576px;
    top: 205px;
  }


  .label2 {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #002063;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #3E5A94;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
  }

  .label2_p1 {
    top: 389px;
    left: 574px;
  }

  .label2_p2 {
    top: 591px;
    left: 1171px;
  }

  .title_label {
    position: absolute;
    font-family: 'Source Han Sans CN';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 33px;
    text-align: right;
    color: #002063;
    text-shadow: 0px 4px 4px rgba(127, 130, 136, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .title_p1 {
    width: 93px;
    height: 40px;
    padding-right: 16px;
    top: 278px;
    left: 202px;
    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
  }

  .title_p2 {
    width: 180px;
    height: 40px;
    padding-right: 16px;
    top: 330px;
    left: 202px;
    background: url('../../../assets/materialImg/title_b2.png') no-repeat 30%;
  }

  .title_p3 {
    width: 93px;
    height: 40px;
    padding-left: 16px;
    top: 465px;
    left: 202px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .title_p4 {
    width: 99px;
    height: 48px;
    padding-left: 16px;
    top: 620px;
    left: 207px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .title_p5 {
    width: 99px;
    height: 48px;
    padding-right: 16px;
    top: 800px;
    left: 210px;
    background: url('../../../assets/materialImg/title_b1.png') no-repeat 30%;
  }

  .title_p6 {
    width: 99px;
    height: 48px;
    padding-left: 16px;
    top: 923px;
    left: 206px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .title_p7 {
    top: 572px;
    left: 550px;
  }

  .title_p8 {
    width: 93px;
    height: 40px;
    padding-left: 16px;
    top: 174px;
    left: 1697px;
    background: url('../../../assets/materialImg/title_b3.png') no-repeat 30%;
  }

  .line {
    position: absolute;

    &.l_1 {
      left: 601px;
      top: 139px;

      .aniMovelan1 {
        -webkit-animation-name: aniMovelan1;
        animation-name: aniMovelan1;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0px;
        left: 0px;
      }

      @keyframes aniMovelan1 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 738px;
          opacity: 1;
        }
      }
    }


    &.l_2 {
      left: 592px;
      top: 143px;

      .aniMovelan2 {
        -webkit-animation-name: aniMovelan2;
        animation-name: aniMovelan2;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan2 {
        0% {
          top: 162px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_3 {
      left: 1294px;
      top: 145px;

      .aniMovelan3 {
        -webkit-animation-name: aniMovelan3;
        animation-name: aniMovelan3;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
      }

      @keyframes aniMovelan3 {
        0% {
          top: 0;
          left: 42px;
          opacity: 0;
        }

        70% {
          top: 126px;
          left: 42px;
          opacity: .6;
          transform: rotate(0deg);
        }

        75% {
          top: 130px;
          left: 40px;
          opacity: .7;
          transform: rotate(90deg);
        }

        100% {
          top: 130px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_4 {
      left: 289px;
      top: 290px;

      .aniMovelan4 {
        -webkit-animation-name: aniMovelan4;
        animation-name: aniMovelan4;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan4 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 853px;
          opacity: 1;
        }
      }
    }


    &.l_5 {
      left: 1077px;
      top: 178px;

      .aniMovelan5 {
        -webkit-animation-name: aniMovelan5;
        animation-name: aniMovelan5;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 6px;
        left: 0;
      }

      @keyframes aniMovelan5 {
        0% {
          left: 626px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_6 {
      left: 1290px;
      top: 191px;

      .aniMovelan6 {
        -webkit-animation-name: aniMovelan6;
        animation-name: aniMovelan6;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 126px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan6 {
        0% {
          top: 0;
          opacity: 0;
        }

        60% {
          top: 234px;
          left: 126px;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 234px;
          left: 126px;
          opacity: 0.6;
          transform: rotate(90deg);
        }

        100% {
          top: 234px;
          left: 0;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_7 {
      left: 1077px;
      top: 192px;

      .aniMovelan7 {
        -webkit-animation-name: aniMovelan7;
        animation-name: aniMovelan7;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -4px;
      }

      @keyframes aniMovelan7 {
        0% {
          top: 0;
          opacity: 0;
        }

        70% {
          top: 234px;
          opacity: .6;
          transform: rotate(0deg);
        }

        75% {
          top: 234px;
          left: -4px;
          opacity: .7;
          transform: rotate(-90deg);
        }

        100% {
          top: 234px;
          left: 60px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }



    &.l_8 {
      left: 376px;
      top: 334px;

      .aniMovelan8 {
        -webkit-animation-name: aniMovelan8;
        animation-name: aniMovelan8;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 6px;
        left: 0;
      }

      @keyframes aniMovelan8 {
        0% {
          left: 0;
          opacity: 0;
        }

        100% {
          left: 762px;
          opacity: 1;
        }
      }
    }


    &.l_12 {
      left: 925px;
      top: 341px;
    }

    &.l_9 {
      left: 837px;
      top: 398px;

      .aniMovelan9 {
        -webkit-animation-name: aniMovelan9;
        animation-name: aniMovelan9;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0px;
        left: 0;
      }

      @keyframes aniMovelan9 {
        0% {
          left: 307px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_10 {
      left: 811px;
      top: 371px;

      .aniMovelan10 {
        -webkit-animation-name: aniMovelan10;
        animation-name: aniMovelan10;
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan10 {
        0% {
          top: 18px;
          left: -4px;
          opacity: 0.05;
        }

        5% {
          top: -5px;
          left: -4px;
          opacity: 0.2;
          transform: rotate(0deg);
        }

        6% {
          top: -5px;
          left: -4px;
          opacity: 0.2;
          transform: rotate(90deg);
        }

        35% {
          top: -5px;
          left: 132px;
          opacity: 0.4;
          transform: rotate(90deg);
        }

        36% {
          top: -5px;
          left: 132px;
          opacity: 0.4;
          transform: rotate(180deg);
        }

        50% {
          top: 82px;
          left: 132px;
          opacity: 0.4;
          transform: rotate(180deg);
        }

        51% {
          top: 82px;
          left: 132px;
          opacity: 0.4;
          transform: rotate(90deg);
        }

        100% {
          top: 82px;
          left: 312px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_13 {
      left: 804px;
      top: 371px;
    }



    &.l_11 {
      left: 295px;
      top: 472px;

      .aniMovelan11 {
        -webkit-animation-name: aniMovelan11;
        animation-name: aniMovelan11;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 5px;
        left: 0;
      }

      @keyframes aniMovelan11 {
        0% {
          left: 846px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }

    &.l_15 {
      left: 728px;
      top: 419px;
    }


    &.l_16 {
      left: 750px;
      top: 420px;

      .aniMovelan16 {
        -webkit-animation-name: aniMovelan16;
        animation-name: aniMovelan16;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan16 {
        0% {
          top: 0;
          left: 0;
          opacity: 0.5;
        }

        40% {
          top: 548px;
          left: 0;
          opacity: 0.5;
          transform: rotate(0deg);
        }

        41% {
          top: 548px;
          left: 0;
          opacity: 0.5;
          transform: rotate(-90deg);
        }


        75% {
          top: 548px;
          left: 686px;
          opacity: 0.6;
          transform: rotate(-90deg);
        }

        76% {
          top: 548px;
          left: 686px;
          opacity: 0.6;
          transform: rotate(-180deg);
        }


        92% {
          top: 214px;
          left: 686px;
          opacity: 0.9;
          transform: rotate(-180deg);
        }

        93% {
          top: 214px;
          left: 686px;
          opacity: 0.9;
          transform: rotate(90deg);
        }

        100% {
          top: 214px;
          left: 600px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_17 {
      left: 773px;
      top: 420px;

      .aniMovelan17 {
        -webkit-animation-name: aniMovelan17;
        animation-name: aniMovelan17;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan17 {
        0% {
          top: 0;
          opacity: 0;
        }

        45% {
          top: 166px;
          opacity: 0.55;
          transform: rotate(0deg);
        }

        46% {
          top: 174px;
          left: 0px;
          opacity: 0.55;
          transform: rotate(-90deg);
        }

        100% {
          top: 174px;
          left: 291px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_18 {
      left: 796px;
      top: 419px;
    }


    &.l_19 {
      left: 825px;
      top: 513px;

      .aniMovelan19 {
        -webkit-animation-name: aniMovelan19;
        animation-name: aniMovelan19;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan19 {
        0% {
          top: 0;
          left: 306px;
          opacity: 0;
        }

        60% {
          top: 0;
          left: -1px;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 0;
          left: -1px;
          opacity: 0.61;
          transform: rotate(-90deg);
        }

        100% {
          top: 120px;
          left: -1px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_20 {
      left: 806px;
      top: 530px;

      .aniMovelan20 {
        -webkit-animation-name: aniMovelan20;
        animation-name: aniMovelan20;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: -2px;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan20 {
        0% {
          left: 260px;
          top: 0;
          opacity: 0;
        }

        60% {
          left: -10px;
          top: 0;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        61% {
          top: 0px;
          left: -10px;
          opacity: 0.65;
          transform: rotate(90deg);
        }

        100% {
          top: -120px;
          left: -10px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_21 {
      left: 821px;
      top: 518px;
    }


    &.l_22 {
      left: 778px;
      top: 595px;
    }


    &.l_23 {
      left: 648px;
      top: 630px;

      .aniMovelan23 {
        -webkit-animation-name: aniMovelan23;
        animation-name: aniMovelan23;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 4px;
        left: -0;
      }

      @keyframes aniMovelan23 {
        0% {
          left: 182px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }



    &.l_24 {
      left: 518px;
      top: 636px;

      .aniMovelan24 {
        -webkit-animation-name: aniMovelan24;
        animation-name: aniMovelan24;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan24 {
        0% {
          left: 90px;
          opacity: 0;
        }

        100% {
          left: -215px;
          opacity: 1;
        }
      }
    }


    &.l_25 {
      left: 303px;
      top: 630px;
    }


    &.l_26 {
      left: 508px;
      top: 640px;

      .aniMovelan26 {
        -webkit-animation-name: aniMovelan26;
        animation-name: aniMovelan26;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan26 {
        0% {
          top: 0;
          opacity: 0.6;
        }

        100% {
          top: 124px;
          opacity: 1;
        }
      }
    }


    &.l_27 {
      left: 514px;
      top: 712px;

      .aniMovelan27 {
        -webkit-animation-name: aniMovelan27;
        animation-name: aniMovelan27;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 50px;
        left: 0;
      }

      @keyframes aniMovelan27 {
        0% {
          left: 0;
          opacity: 0;
        }

        80% {
          left: 696px;
          opacity: 0.6;
          top: 50px;
          transform: rotate(0deg);
        }

        81% {
          left: 693px;
          opacity: 0.6;
          top: 50px;
          transform: rotate(-90deg);
        }


        100% {
          left: 693px;
          top: 0px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_28 {
      left: 1074px;
      top: 712px;

      .aniMovelan28 {
        -webkit-animation-name: aniMovelan28;
        animation-name: aniMovelan28;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan28 {
        0% {
          top: 50px;
          opacity: 0.7;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_29 {
      left: 617px;
      top: 661px;

      .aniMovelan29 {
        -webkit-animation-name: aniMovelan29;
        animation-name: aniMovelan29;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan29 {
        0% {
          top: 154px;
          opacity: 0.7;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }


    &.l_30 {
      left: 512px;
      top: 733px;
    }


    &.l_31 {
      left: 305px;
      top: 816px;

      .aniMovelan31 {
        -webkit-animation-name: aniMovelan31;
        animation-name: aniMovelan31;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan31 {
        0% {
          left: 0;
          top: 0px;
          opacity: 0;
        }

        75% {
          left: 312px;
          top: 0;
          opacity: 0.6;
          transform: rotate(0deg);
        }

        76% {
          left: 311px;
          top: 0;
          opacity: 0.7;
          transform: rotate(90deg);
        }

        100% {
          left: 311px;
          top: 98px;
          opacity: 1;
          transform: rotate(90deg);
        }
      }
    }


    &.l_32 {
      left: 507px;
      top: 789px;

      .aniMovelan32 {
        -webkit-animation-name: aniMovelan32;
        animation-name: aniMovelan32;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan32 {
        0% {
          top: 154px;
          opacity: 0;
        }

        20% {
          top: -6px;
          left: 0;
          opacity: .3;
          transform: rotate(0deg);
        }

        21% {
          top: -6px;
          left: 0;
          opacity: .3;
          transform: rotate(90deg);
        }


        90% {
          top: -6px;
          left: 838px;
          opacity: .8;
          transform: rotate(90deg);
        }

        91% {
          top: -6px;
          left: 838px;
          opacity: .8;
          transform: rotate(0deg);
        }


        100% {
          top: -58px;
          left: 838px;
          opacity: 1;
          transform: rotate(0deg);
        }
      }
    }


    &.l_33 {
      left: 301px;
      top: 934px;
    }


    &.l_34 {
      left: 516px;
      top: 940px;
    }

    &.l_36 {
      left: 822px;
      top: 1012px;

      .aniMovelan36 {
        -webkit-animation-name: aniMovelan36;
        animation-name: aniMovelan36;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan36 {
        0% {
          left: 68px;
          opacity: 0;
        }

        100% {
          left: 0;
          opacity: 1;
        }
      }
    }


    &.l_37 {
      left: 646px;
      top: 936px;

      .aniMovelan37 {
        -webkit-animation-name: aniMovelan37;
        animation-name: aniMovelan37;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 4px;
        left: 0;
      }

      @keyframes aniMovelan37 {
        0% {
          left: 160px;
          opacity: 0.6;
        }

        100% {
          left: -350px;
          opacity: 1;
        }
      }
    }


    &.l_38 {
      left: 815px;
      top: 945px;
    }


    &.l_39 {
      left: 822px;
      top: 1044px;
    }


    &.l_40 {
      left: 1518px;
      top: 556px;
    }


    &.l_41 {
      left: 1337px;
      top: 554px;

      .aniMovelan41 {
        -webkit-animation-name: aniMovelan41;
        animation-name: aniMovelan41;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan41 {
        0% {
          left: 0;
          top: 0;
          opacity: 0;
        }

        12% {
          left: 180px;
          top: 0;
          opacity: 0.3;
          transform: rotate(0deg);
        }

        13% {
          left: 180px;
          top: 0;
          opacity: 0.35;
          transform: rotate(90deg);
        }

        49% {
          left: 180px;
          top: 486px;
          opacity: 0.5;
          transform: rotate(90deg);
        }

        50% {
          left: 180px;
          top: 486px;
          opacity: 0.6;
          transform: rotate(180deg);
        }

        89% {
          left: -520px;
          top: 486px;
          opacity: 0.7;
          transform: rotate(180deg);
        }

        90% {
          left: -520px;
          top: 486px;
          opacity: 0.8;
          transform: rotate(-90deg);
        }

        100% {
          left: -520px;
          top: 389px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_42 {
      left: 1360px;
      top: 584px;


      .aniMovelan42 {
        -webkit-animation-name: aniMovelan42;
        animation-name: aniMovelan42;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
        // transform: rotate(90deg);
      }

      @keyframes aniMovelan42 {
        0% {
          left: 0;
          top: 0;
          opacity: 0;
        }

        8% {
          left: 110px;
          top: 0;
          opacity: 0.1;
          transform: rotate(0deg);
        }

        9% {
          left: 110px;
          top: 0;
          opacity: 0.15;
          transform: rotate(90deg);
        }

        29% {
          left: 110px;
          top: 404px;
          opacity: 0.5;
          transform: rotate(90deg);
        }

        30% {
          left: 110px;
          top: 404px;
          opacity: 0.6;
          transform: rotate(180deg);
        }

        59% {
          left: -628px;
          top: 404px;
          opacity: 0.7;
          transform: rotate(180deg);
        }

        60% {
          left: -628px;
          top: 404px;
          opacity: 0.8;
          transform: rotate(-90deg);
        }

        100% {
          left: -628px;
          top: -160px;
          opacity: 1;
          transform: rotate(-90deg);
        }
      }
    }


    &.l_43 {
      left: 1469px;
      top: 585px;
    }


    &.l_44 {
      left: 734px;
      top: 992px;
    }


    &.l_45 {
      left: 754px;
      top: 969px;
    }


    &.l_46 {
      left: 1436px;
      top: 641px;
    }


    &.l_47 {
      left: 1364px;
      top: 636px;
    }


    &.l_48 {
      left: 1276px;
      top: 733px;

      .aniMovelan48 {
        -webkit-animation-name: aniMovelan48;
        animation-name: aniMovelan48;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        font-style: inherit;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes aniMovelan48 {
        0% {
          top: 54px;
          opacity: 0;
        }

        100% {
          top: 0;
          opacity: 1;
        }
      }
    }

  }
}
</style>
