@charset "UTF-8";
  body {text-align: center;-webkit-overflow-scrolling: touch; background-color: #fff; overflow: hidden;}
  header {box-shadow: 0px 2px 10px rgb(0 0 0 / 10%);}
  .wrapper {height: 100vh; position:relative;  margin: 0 auto; background: url("./images/bg.png") repeat-x left bottom;}
  .stage {display: none; width: 1440px; height: 813px; position:relative; z-index:10;  transform-origin: left center; margin: 0 auto;}
  .image0 {left: 0; top: 0; z-index: 1;}
  .image1 {left: -2px; top: -4px; z-index: 10; position: absolute;}

  .image4 {left: 684px; top: 496px; z-index: 60; position: absolute;}
  .image5 {left: 1114px; top: 160px; z-index: 60; position: absolute;}
  .image4_1 { animation-duration: 4s; animation-delay: 2s; animation-name: animation2_1; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; left: 0; top: 0; }
  .image4_2 { animation-duration: 4s; animation-delay: 2s; animation-name: animation2_2; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; left: 7px; top: 0; opacity: 0;}
  .image5_1 { animation-duration: 5s; animation-delay: 2s; animation-name: animation2_1; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; left: 0; top: 0; }
  .image5_2 { animation-duration: 5s; animation-delay: 2s; animation-name: animation2_2; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; left: 0; top: 0; opacity: 0;}
  .image6 {left: 1069px; top: 238px;z-index: 1010; position: absolute;}
  .image3_1 {left: 301px; top: -200px; z-index: 1000; position: absolute;}
  .image3_2 {left: 641px; top: -200px; z-index: 1000; position: absolute;}
  .image3_3 {left: 934px; top: -200px; z-index: 1000; position: absolute;}
  .image3_4 {left: 120px; top: 36px; z-index: 1000; position: absolute;}

  .image2 {
    left: 236px;
    top: 177px;
    z-index: 60;
    position: absolute;
  }
  .image2_1 {
    animation: animation2_robot1 8s 2s linear infinite;
  }
  .image2_2 {
    animation: animation2_robot2 8s 2s linear infinite;
    opacity: 0;
  }
  @keyframes animation2_robot1{
      0%{opacity: 1;left: 236px; top: 177px;}
      20%{opacity: 1;left: 236px; top: 177px;}
      20.1%{opacity: 1;left: 236px; top: 177px;}
      50%{opacity: 1;left: 332px; top: 242px;}
      50.1%{opacity: 0;}
      70%{opacity: 0;}
      70.1%{opacity: 0;}
      100%{opacity: 0;}
  }
  @keyframes animation2_robot2{
      0%{opacity: 0;}
      20%{opacity: 0;}
      20.1%{opacity: 0;}
      50%{opacity: 0;}
      50.1%{opacity: 1;left: 332px; top: 242px;}
      70%{opacity: 1;left: 332px; top: 242px;}
      70.1%{opacity: 1;left: 332px; top: 242px;}
      100%{opacity: 1;left: 236px; top: 177px;}
  }
  @keyframes animation2_1{
      0%{opacity: 1;}
      20%{opacity: 1;}
      20.1%{opacity: 1;}
      50%{opacity: 1}
      50.1%{opacity: 0;}
      70%{opacity: 0;}
      70.1%{opacity: 0;}
      100%{opacity: 0;}
  }
  @keyframes animation2_2{
      0%{opacity: 0;}
      20%{opacity: 0;}
      20.1%{opacity: 0;}
      50%{opacity: 0;}
      50.1%{opacity: 1;}
      70%{opacity: 1;}
      70.1%{opacity: 1;}
      100%{opacity: 1;}
  }
  @keyframes animation2{
      0%{left: 236px; top: 177px;}
      20%{left: 236px; top: 177px;}
      20.1%{left: 236px; top: 177px;}
      50%{left: 332px; top: 242px;}
      70%{left: 332px; top: 242px;}
      70.1%{left: 332px; top: 242px;}
      100%{left: 236px; top: 177px;}
  }

  .image3_1 img {width: 204px;}
  .image3_2 img {width: 204px;}
  .image3_3 img {width: 204px;}

  .image7 {left: 1069px; top: 238px;z-index: 50; position: absolute; animation-name: animation7; animation-duration: 18s; animation-iteration-count: infinite; animation-timing-function: linear; opacity: 0;}
  .image7_1{ animation-delay: 0s;}
  .image7_2{ animation-delay: 1s;}
  .image7_3{ animation-delay: 2s;}
  .image7_4{ animation-delay: 3s;}
  .image7_5{ animation-delay: 4s;}
  .image7_6{ animation-delay: 5s;}
  .image7_7{ animation-delay: 6s;}
  .image7_8{ animation-delay: 7s;}
  .image7_9{ animation-delay: 8s;}
  .image7_10{ animation-delay: 9s;}
  .image7_11{ animation-delay: 10s;}
  .image7_12{ animation-delay: 11s;}
  .image7_13{ animation-delay: 12s;}
  .image7_14{ animation-delay: 13s;}
  .image7_15{ animation-delay: 14s;}
  .image7_16{ animation-delay: 15s;}
  .image7_17{ animation-delay: 16s;}
  .image7_18{ animation-delay: 17s;}

  .wave1 {left: 310px; top: 150px; z-index: 61; position: absolute;}
  .wave2 {left: 765px; top: 632px; z-index: 61; position: absolute;}
  .wave3 {left: 784px; top: 557px; z-index: 61; position: absolute;}
  .wave4 {left: 881px; top: 190px; z-index: 61; position: absolute;}
  .wave5 {left: 1011px; top: 144px; z-index: 61; position: absolute;}
  .wave6 {left: 1033px; top: 349px; z-index: 61; position: absolute;}
  .wave7 {left: 254px; top: 156px; z-index: 61; position: absolute;}
  .wave1 img, .wave2 img, .wave3 img, .wave4 img, .wave5 img, .wave6 img, .wave7 img {position: absolute; left: 0; top: 0;}

  .wave1 img {width: 28px; transform: rotate(-40deg);}
  .wave2 img {width: 40px; transform: rotate(8deg);}
  .wave3 img {width: 40px; transform: rotate(-76deg);}
  .wave4 img {width: 40px; transform: rotate(30deg);}
  .wave5 img {width: 24px;}
  .wave6 img {width: 24px;}
  .wave7 img {width: 40px; transform: rotate(28deg);}



  .signboard__link {position: relative;}
  .main {width: 1440px;}

  .wave7.w1_1 {
    animation: wave7_1 8s 2s linear infinite;
    opacity: 0;
  }
  .wave7.w1_2 {
    animation: wave7_2 8s 2s linear infinite;
    opacity: 0;
  }
  .wave7.w1_3 {
    animation: wave7_3 8s 2s linear infinite;
    opacity: 0;
  }
  .wave7.w1_4 {
    animation: wave7_4 8s 2s linear infinite;
    opacity: 0;
  }
  @keyframes wave7_1{
      0%{opacity: 0;left: 256px; top: 154px;}
      1.25%{opacity: 0.5;}
      2.5%{opacity: 1;}
      3.75%{opacity: 1;}
      5%{opacity: 0.5;}
      6.25%{opacity: 0;}
      7.5%{opacity: 0;}
      8.75%{opacity: 0;}
      10%{opacity: 0;}
      11.25%{opacity: 0;}
      12.5%{opacity: 0;}
      13.75%{opacity: 0.5;}
      15%{opacity: 1;}
      16.25%{opacity: 1;}
      17.5%{opacity: 0.5;}
      18.75%{opacity: 0;}
      20%{opacity: 0;left: 256px; top: 154px;}
      20.1%{left: 256px; top: 154px;}
      21.25%{opacity: 0;}
      22.5%{opacity: 0;}
      23.75%{opacity: 0;}
      25%{opacity: 0;}
      26.25%{opacity: 0.5;}
      27.5%{opacity: 1;}
      28.75%{opacity: 1;}
      30%{opacity: 0.5;}
      31.25%{opacity: 0;}
      32.5%{opacity: 0;}
      33.75%{opacity: 0;}
      35%{opacity: 0;}
      36.25%{opacity: 0;}
      37.5%{opacity: 0;}
      38.75%{opacity: 0.5;}
      40%{opacity: 1;}
      41.25%{opacity: 1;}
      42.5%{opacity: 0.5;}
      43.75%{opacity: 0;}
      45%{opacity: 0;}
      46.25%{opacity: 0;}
      47.5%{opacity: 0;}
      48.75%{opacity: 0;}
      50%{opacity: 0;left: 352px; top: 216px;}
      51.25%{opacity: 0.5;}
      52.5%{opacity: 1;}
      53.75%{opacity: 1;}
      55%{opacity: 0.5;}
      56.25%{opacity: 0;}
      57.5%{opacity: 0;}
      58.75%{opacity: 0;}
      60%{opacity: 0;}
      61.25%{opacity: 0;}
      62.5%{opacity: 0;}
      63.75%{opacity: 0.5;}
      65%{opacity: 1;}
      66.25%{opacity: 1;}
      67.5%{opacity: 0.5;}
      68.75%{opacity: 0;}
      70%{opacity: 0;left: 352px; top: 216px;}
      70.1%{left: 352px; top: 216px;}
      71.25%{opacity: 0;}
      72.5%{opacity: 0;}
      73.75%{opacity: 0;}
      75%{opacity: 0;}
      76.25%{opacity: 0.5;}
      77.5%{opacity: 1;}
      78.75%{opacity: 1;}
      80%{opacity: 0.5;}
      81.25%{opacity: 0;}
      82.5%{opacity: 0;}
      83.75%{opacity: 0;}
      85%{opacity: 0;}
      86.25%{opacity: 0;}
      87.5%{opacity: 0;}
      88.75%{opacity: 0.5;}
      90%{opacity: 1;}
      91.25%{opacity: 1;}
      92.5%{opacity: 0.5;}
      93.75%{opacity: 0;}
      95%{opacity: 0;}
      96.25%{opacity: 0;}
      97.5%{opacity: 0;}
      98.75%{opacity: 0;}
      100%{opacity: 0;left: 256px; top: 154px;}
  }
  @keyframes wave7_2{
      0%{opacity: 0;left: 256px; top: 154px;}
      1.25%{opacity: 0;}
      2.5%{opacity: 0.5;}
      3.75%{opacity: 1;}
      5%{opacity: 1;}
      6.25%{opacity: 0.5;}
      7.5%{opacity: 0;}
      8.75%{opacity: 0;}
      10%{opacity: 0;}
      11.25%{opacity: 0;}
      12.5%{opacity: 0;}
      13.75%{opacity: 0;}
      15%{opacity: 0.5;}
      16.25%{opacity: 1;}
      17.5%{opacity: 1;}
      18.75%{opacity: 0.5;}
      20%{opacity: 0;left: 256px; top: 154px;}
      20.1%{left: 256px; top: 154px;}
      21.25%{opacity: 0;}
      22.5%{opacity: 0;}
      23.75%{opacity: 0;}
      25%{opacity: 0;}
      26.25%{opacity: 0;}
      27.5%{opacity: 0.5;}
      28.75%{opacity: 1;}
      30%{opacity: 1;}
      31.25%{opacity: 0.5;}
      32.5%{opacity: 0;}
      33.75%{opacity: 0;}
      35%{opacity: 0;}
      36.25%{opacity: 0;}
      37.5%{opacity: 0;}
      38.75%{opacity: 0;}
      40%{opacity: 0.5;}
      41.25%{opacity: 1;}
      42.5%{opacity: 1;}
      43.75%{opacity: 0.5;}
      45%{opacity: 0;}
      46.25%{opacity: 0;}
      47.5%{opacity: 0;}
      48.75%{opacity: 0;}
      50%{opacity: 0;left: 352px; top: 216px;}
      51.25%{opacity: 0;}
      52.5%{opacity: 0.5;}
      53.75%{opacity: 1;}
      55%{opacity: 1;}
      56.25%{opacity: 0.5;}
      57.5%{opacity: 0;}
      58.75%{opacity: 0;}
      60%{opacity: 0;}
      61.25%{opacity: 0;}
      62.5%{opacity: 0;}
      63.75%{opacity: 0;}
      65%{opacity: 0.5;}
      66.25%{opacity: 1;}
      67.5%{opacity: 1;}
      68.75%{opacity: 0.5;}
      70%{opacity: 0;left: 352px; top: 216px;}
      70.1%{left: 352px; top: 216px;}
      71.25%{opacity: 0;}
      72.5%{opacity: 0;}
      73.75%{opacity: 0;}
      75%{opacity: 0;}
      76.25%{opacity: 0;}
      77.5%{opacity: 0.5;}
      78.75%{opacity: 1;}
      80%{opacity:1;}
      81.25%{opacity: 0.5;}
      82.5%{opacity: 0;}
      83.75%{opacity: 0;}
      85%{opacity: 0;}
      86.25%{opacity: 0;}
      87.5%{opacity: 0;}
      88.75%{opacity: 0;}
      90%{opacity: 0.5;}
      91.25%{opacity: 1;}
      92.5%{opacity: 1;}
      93.75%{opacity: 0.5;}
      95%{opacity: 0;}
      96.25%{opacity: 0;}
      97.5%{opacity: 0;}
      98.75%{opacity: 0;}
      100%{opacity: 0;left: 256px; top: 154px;}
  }
  @keyframes wave7_3{
      0%{opacity: 0;left: 256px; top: 154px;}
      1.25%{opacity: 0;}
      2.5%{opacity: 0;}
      3.75%{opacity: 0.5;}
      5%{opacity: 1;}
      6.25%{opacity: 1;}
      7.5%{opacity: 0.5;}
      8.75%{opacity: 0;}
      10%{opacity: 0;}
      11.25%{opacity: 0;}
      12.5%{opacity: 0;}
      13.75%{opacity: 0;}
      15%{opacity: 0;}
      16.25%{opacity: 0.5;}
      17.5%{opacity: 1;}
      18.75%{opacity: 1;}
      20%{opacity: 0.5;left: 256px; top: 154px;}
      20.1%{left: 256px; top: 154px;}
      21.25%{opacity: 0;}
      22.5%{opacity: 0;}
      23.75%{opacity: 0;}
      25%{opacity: 0;}
      26.25%{opacity: 0;}
      27.5%{opacity: 0;}
      28.75%{opacity: 0.5;}
      30%{opacity: 1;}
      31.25%{opacity: 1;}
      32.5%{opacity: 0.5;}
      33.75%{opacity: 0;}
      35%{opacity: 0;}
      36.25%{opacity: 0;}
      37.5%{opacity: 0;}
      38.75%{opacity: 0;}
      40%{opacity: 0;}
      41.25%{opacity: 0.5;}
      42.5%{opacity: 1;}
      43.75%{opacity: 1;}
      45%{opacity: 0.5;}
      46.25%{opacity: 0;}
      47.5%{opacity: 0;}
      48.75%{opacity: 0;}
      50%{opacity: 0;left: 352px; top: 216px;}
      51.25%{opacity: 0;}
      52.5%{opacity: 0;}
      53.75%{opacity: 0.5;}
      55%{opacity: 1;}
      56.25%{opacity: 1;}
      57.5%{opacity: 0.5;}
      58.75%{opacity: 0;}
      60%{opacity: 0;}
      61.25%{opacity: 0;}
      62.5%{opacity: 0;}
      63.75%{opacity: 0;}
      65%{opacity: 0;}
      66.25%{opacity: 0.5;}
      67.5%{opacity: 1;}
      68.75%{opacity: 1;}
      70%{opacity: 0.5;left: 352px; top: 216px;}
      70.1%{left: 352px; top: 216px;}
      71.25%{opacity: 0;}
      72.5%{opacity: 0;}
      73.75%{opacity: 0;}
      75%{opacity: 0;}
      76.25%{opacity: 0;}
      77.5%{opacity: 0;}
      78.75%{opacity: 0.5;}
      80%{opacity:1;}
      81.25%{opacity: 1;}
      82.5%{opacity: 0.5;}
      83.75%{opacity: 0;}
      85%{opacity: 0;}
      86.25%{opacity: 0;}
      87.5%{opacity: 0;}
      88.75%{opacity: 0;}
      90%{opacity: 0;}
      91.25%{opacity: 0.5;}
      92.5%{opacity: 1;}
      93.75%{opacity: 1;}
      95%{opacity: 0.5;}
      96.25%{opacity: 0;}
      97.5%{opacity: 0;}
      98.75%{opacity: 0;}
      100%{opacity: 0;left: 256px; top: 154px;}
  }
  @keyframes wave7_4{
      0%{opacity: 0;left: 256px; top: 154px;}
      1.25%{opacity: 0;}
      2.5%{opacity: 0;}
      3.75%{opacity: 0;}
      5%{opacity: 0.5;}
      6.25%{opacity: 1;}
      7.5%{opacity: 1;}
      8.75%{opacity: 0.5;}
      10%{opacity: 0;}
      11.25%{opacity: 0;}
      12.5%{opacity: 0;}
      13.75%{opacity: 0;}
      15%{opacity: 0;}
      16.25%{opacity: 0;}
      17.5%{opacity: 0.5;}
      18.75%{opacity: 1;}
      20%{opacity: 1;left: 256px; top: 154px;}
      20.1%{left: 256px; top: 154px;}
      21.25%{opacity: 0.5;}
      22.5%{opacity: 0;}
      23.75%{opacity: 0;}
      25%{opacity: 0;}
      26.25%{opacity: 0;}
      27.5%{opacity: 0;}
      28.75%{opacity: 0;}
      30%{opacity: 0.5;}
      31.25%{opacity: 1;}
      32.5%{opacity: 1;}
      33.75%{opacity: 0.5;}
      35%{opacity: 0;}
      36.25%{opacity: 0;}
      37.5%{opacity: 0;}
      38.75%{opacity: 0;}
      40%{opacity: 0;}
      41.25%{opacity: 0;}
      42.5%{opacity: 0.5;}
      43.75%{opacity: 1;}
      45%{opacity: 1;}
      46.25%{opacity: 0.5;}
      47.5%{opacity: 0;}
      48.75%{opacity: 0;}
      50%{opacity: 0;left: 352px; top: 216px;}
      51.25%{opacity: 0;}
      52.5%{opacity: 0;}
      53.75%{opacity: 0;}
      55%{opacity: 0.5;}
      56.25%{opacity: 1;}
      57.5%{opacity: 1;}
      58.75%{opacity: 0.5;}
      60%{opacity: 0;}
      61.25%{opacity: 0;}
      62.5%{opacity: 0;}
      63.75%{opacity: 0;}
      65%{opacity: 0;}
      66.25%{opacity: 0;}
      67.5%{opacity: 0.5;}
      68.75%{opacity: 1;}
      70%{opacity: 1;left: 352px; top: 216px;}
      70.1%{left: 352px; top: 216px;}
      71.25%{opacity: 0.5;}
      72.5%{opacity: 0;}
      73.75%{opacity: 0;}
      75%{opacity: 0;}
      76.25%{opacity: 0;}
      77.5%{opacity: 0;}
      78.75%{opacity: 0;}
      80%{opacity:0.5;}
      81.25%{opacity: 1;}
      82.5%{opacity: 1;}
      83.75%{opacity: 0.5;}
      85%{opacity: 0;}
      86.25%{opacity: 0;}
      87.5%{opacity: 0;}
      88.75%{opacity: 0;}
      90%{opacity: 0;}
      91.25%{opacity: 0;}
      92.5%{opacity: 0.5;}
      93.75%{opacity: 1;}
      95%{opacity: 1;}
      96.25%{opacity: 0.5;}
      97.5%{opacity: 0;}
      98.75%{opacity: 0;}
      100%{opacity: 0;left: 256px; top: 154px;}
  }

  .signboard__link:hover{
    animation-name: animation3_hover;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .image3_1{
    animation-name: animation3_1;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .image3_2{
    animation-name: animation3_2;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .image3_3{
    animation-name: animation3_3;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }

@keyframes animation3_hover{
    0%{top: 0px;}
    50%{top: -6px;}
    100%{top: 0px;}
}

@keyframes animation3_1{
    0%{top: -200px;}
    30%{top: 34px;}
    70%{top: 22px;}
    100%{top: 34px; height: 100%;}
}
@keyframes animation3_2{
    0%{top: -200px;}
    30%{top: 266px;}
    70%{top: 254px;}
    100%{top: 266px; height: 100%;}
}
@keyframes animation3_3{
    0%{top: -200px;}
    30%{top: 34px;}
    70%{top: 22px;}
    100%{top: 34px; height: 100%;}
}

@keyframes animation2_7{
    0%{left: 256px; top: 154px;}
    20%{left: 256px; top: 154px;}
    20.1%{left: 256px; top: 154px;}
    50%{left: 352px; top: 216px;}
    70%{left: 352px; top: 216px;}
    70.1%{left: 352px; top: 216px;}
    100%{left: 256px; top: 154px;}
}

@keyframes animation7{
    0%{left: 1091px; top: 257px; opacity: 0;}
    5%{left: 1091px; top: 257px;}
    5.1%{left: 1091px; top: 257px; opacity: 1;}
    10%{left: 1063px; top: 268px;}
    25%{left: 976px; top: 218px;}
    29%{left: 957px; top: 224px; opacity: 1;}
    29.1%{left: 957px; top: 224px; opacity: 0;}
    100%{left: 957px; top: 224px; opacity: 0;}
}

