@charset "UTF-8";

.first_bg{
  left: 0;
}
.second_bg{
  left:2400px;
}

.bg_1{
  display: inline-block;
  position: fixed;
  bottom: 0;
  width: 2400px;
  height: 380px;
  z-index: -4;
  background-position: left;
  background-image: url(../images/bg/bg1.gif);
  background-repeat: repeat-x;
  animation-name: slide_left;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.bg_2{
  display: inline-block;
  position: fixed;
  bottom: 0;
  width: 2400px;
  height: 500px;
  box-sizing: border-box;
  z-index: -5;
  animation-name: slide_left;
  animation-duration: 120s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background-position: left;
  background-image: url(../images/bg/bg2.gif);
  background-repeat: repeat-x;
}
.bg_2_circle{
  position: absolute;
  top:-25vmax;
  left:0;
  right: 0;
  margin: auto;
  width: 50vmax;
  height: 50vmax;
  background-position: center;
  background-image: url(../images/bg/circle.png);
  background-repeat: no-repeat;
  background-size: contain;
  animation-name: roll_down;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide_left {
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-100%);
  }
}

@keyframes roll_down {
  0%{
    transform: rotateZ(0deg) translateY(0px);
    }
  100%{
    transform: rotateZ(720deg) translateY(200px);
  }
}





#canvas{

  z-index: -10;
}