.bg {
  width : 100%;
  height: 500px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  .back_img {
    position       : absolute;
    bottom         : 5%;
    width          : 100%;
    height         : 300px;
    background     : url(../img/pyramid/icon_db02.png) no-repeat center;
    transform      : rotateX(0deg);
    background-size: 80% 84%;
  }

  .back_img1 {
    position         : absolute;
    left             : 0;
    top              : 18%;
    width            : 100%;
    height           : 100%;
    background       : url(../img/pyramid/icon_db03.png) no-repeat center;
    transform        : rotateX(65deg);
    background-size  : 62%;
    animation        : trigle_move 10s linear infinite;
    -webkit-animation: trigle_move 10s linear infinite;
  }

  .back_img2 {
    position         : absolute;
    top              : 190px;
    width            : 100%;
    height           : 300px;
    background       : url(../img/pyramid/icon_db04.png) no-repeat center;
    transform        : rotateX(66deg);
    background-size  : 39%;
    animation        : trigle_move1 10s linear infinite;
    -webkit-animation: trigle_move1 10s linear infinite;
  }

  .back_img3 {
    position       : absolute;
    top            : 247px;
    width          : 100%;
    height         : 300px;
    background     : url(../img/pyramid/icon_db01.png) no-repeat center;
    transform      : rotateX(50deg);
    background-size: 65% 100%;
  }
}

#canvas-warpper {
  position: relative;
  width: 100%;
  height: 100%;
  #canvas-tooltip {
    position: absolute;
    display: block;
    z-index: 9999999;
    transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
      visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    font: 14px / 21px sans-serif;
    top: 0px;
    left: 0px;
    transform: translate3d(0px, 0px, 0px);
    visibility: hidden;
    opacity: 0;
  }
}

@keyframes clip_line {
  0% {
    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
  }

  75% {
    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
  }

  100% {
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes clip_line2 {
  0% {
    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
  }

  66.66% {
    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
  }

  83% {
    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
  }

  100% {
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes clip_line3 {
  0% {
    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
  }

  75% {
    clip-path: polygon(100% 0, 100% 0%, 100% 0, 100% 0);
  }

  93% {
    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
  }

  100% {
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes clip_line4 {
  0% {
    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
  }

  70% {
    clip-path: polygon(0% 0, 0% 0%, 0% 0, 0% 0);
  }

  85% {
    clip-path: polygon(0% 0, 50% 0%, 50% 50%, 0% 50%);
  }

  100% {
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes opacity_path {
  0% {
    opacity: 0;
  }

  66.7% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opacity_path2 {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opacity_path3 {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opacity_path4 {
  0% {
    opacity: 0;
  }

  83.33% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes trigle_down1 {
  0% {
    top: -250px;
  }

  100% {
    top: 80px;
  }
}

@keyframes trigle_down2 {
  0% {
    top: -300px;
  }

  50% {
    top: -300px;
  }

  100% {
    top: 45px
  }
}

@keyframes trigle_down3 {
  0% {
    top: -250px;
  }

  66.66% {
    top: -250px;
  }

  100% {
    top: 0;
  }
}

@keyframes trigle_down4 {
  0% {
    top: -250px;
  }

  75% {
    top: -250px;
  }

  100% {
    top: -28px;
  }
}

@keyframes trigle_move {
  0% {
    transform: rotateX(65deg) rotateZ(360deg);
  }

  100% {
    transform: rotateX(65deg) rotateZ(0deg);
  }
}

@keyframes trigle_move1 {
  0% {
    transform: rotateX(66deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(66deg) rotateZ(360deg);
  }
}