/* CSS Document */
.boxes {
  width: 100%;
  height: auto;
  background: #fff center center no-repeat;
  background-size: cover;
  position: relative;
}
.p-top-works__header__bubbleCover__bubble1 {
  position: absolute;
  bottom: 0;
  left: 1vw;
  height: 400px;
  width: 200px;
  transform-origin: bottom left;
  transform: scale(1) rotate(0);
  z-index: 5;
}

.p-top-works__header__bubbleCover__bubble2 {
  position: absolute;
  bottom: 0;
  right: 5vw;
  height: 400px;
  width: 200px;
  transform: scale(.7) rotateY(180deg) rotate(0);
  transform-origin: bottom;
  z-index: 5;
}

.p-top-works__header__bubbleCover span {
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 9px;
  background: rgba(226,22,19,.15);
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.p-top-works__header__bubbleCover .bubble1,
.p-top-works__header__bubbleCover .bubble11,
.p-top-works__header__bubbleCover .bubble5,
.p-top-works__header__bubbleCover .bubble8 {
  height: 21px;
  width: 21px;
  border-radius: 7px;
}

.p-top-works__header__bubbleCover .bubble1 {
  left: 120px;
  bottom: 25px;
  animation-name: bubble1;
}

.p-top-works__header__bubbleCover .bubble2 {
  left: 60px;
  bottom: 20px;
  animation-name: bubble1;
  animation-delay: 3s;
}

.p-top-works__header__bubbleCover .bubble3 {
  left: 130px;
  bottom: 7px;
  animation-name: bubble1;
  animation-delay: 6.5s;
}

.p-top-works__header__bubbleCover .bubble4 {
  left: 60px;
  bottom: -10px;
  animation-name: bubble1;
  animation-delay: 8s;
}

.p-top-works__header__bubbleCover .bubble5 {
  left: 90px;
  bottom: 10px;
  animation-name: bubble2;
  animation-delay: .5s;
}

.p-top-works__header__bubbleCover .bubble6 {
  left: 100px;
  bottom: 0;
  animation-name: bubble2;
  animation-delay: 3.7s;
}

.p-top-works__header__bubbleCover .bubble7 {
  left: 73px;
  bottom: 5px;
  animation-name: bubble2;
  animation-delay: 6s;
}

.p-top-works__header__bubbleCover .bubble8 {
  left: 60px;
  bottom: 30px;
  animation-name: bubble2;
  animation-delay: 10.5s;
}

.p-top-works__header__bubbleCover .bubble9 {
  left: 150px;
  bottom: 0;
  animation-name: bubble3;
  animation-delay: 2s;
}

.p-top-works__header__bubbleCover .bubble10 {
  left: 60px;
  bottom: 25px;
  animation-name: bubble3;
  animation-delay: 5s;
}

.p-top-works__header__bubbleCover .bubble11 {
  left: 130px;
  bottom: 30px;
  animation-name: bubble3;
  animation-delay: 8.7s;
}

.p-top-works__header__bubbleCover .bubble12 {
  left: 140px;
  bottom: 5px;
  animation-name: bubble1;
  animation-delay: 10.2s;
}

.p-top-works__header__bubbleCover .bubble13 {
  left: 60px;
  bottom: 0;
  animation-name: bubble3;
  animation-delay: 11s;
}
@keyframes bubble1 {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scale(.3) rotate(40deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  3% {
    opacity: 1;
    transform: translate3d(4px,-8px,0) scale(.6) rotate(-10deg);
    transition-timing-function: ease-out;
  }

  5% {
    transform: translate3d(6px,-12px,0) scale(.5) rotate(-10deg);
  }

  20% {
    transform: translate3d(10px,-50px,0) scale(.4) rotate(10deg);
  }

  40% {
    transform: translate3d(-5px,-110px,0) scale(.7) rotate(90deg);
  }

  60% {
    transform: translate3d(0,-180px,0) scale(.8) rotate(170deg);
  }

  80% {
    opacity: 1;
    transform: translate3d(-15px,-260px,0) scale(1) rotate(270deg);
  }

  95% {
    opacity: 1;
    transform: translate3d(5px,-340px,0) scale(1) rotate(320deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  99.9%,
  to {
    opacity: 0;
    transform: translate3d(0,-360px,0) scale(1.3) rotate(350deg);
  }
}
@keyframes bubble2 {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scale(.3) rotate(40deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  3% {
    opacity: 1;
    transform: translate3d(2px,-6px,0) scale(.6) rotate(-10deg);
    transition-timing-function: ease-out;
  }

  5% {
    transform: translate3d(4px,-10px,0) scale(.5) rotate(-10deg);
  }

  20% {
    transform: translate3d(15px,-40px,0) scale(.7) rotate(10deg);
  }

  40% {
    transform: translate3d(5px,-90px,0) scale(.7) rotate(90deg);
  }

  60% {
    transform: translate3d(20px,-150px,0) scale(.8) rotate(170deg);
  }

  80% {
    opacity: 1;
    transform: translate3d(10px,-220px,0) scale(1) rotate(270deg);
  }

  95% {
    opacity: 1;
    transform: translate3d(25px,-300px,0) scale(1) rotate(320deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  99.9%,
  to {
    opacity: 0;
    transform: translate3d(30px,-330px,0) scale(1.3) rotate(350deg);
  }
}
@keyframes bubble3 {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scale(.3) rotate(-40deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  3% {
    opacity: 1;
    transform: translate3d(-2px,-6px,0) scale(.6) rotate(-10deg);
    transition-timing-function: ease-out;
  }

  5% {
    transform: translate3d(-4px,-10px,0) scale(.5) rotate(-10deg);
  }

  20% {
    transform: translate3d(-15px,-40px,0) scale(.7) rotate(-10deg);
  }

  40% {
    transform: translate3d(-5px,-90px,0) scale(.7) rotate(-90deg);
  }

  60% {
    transform: translate3d(-20px,-150px,0) scale(.8) rotate(-170deg);
  }

  80% {
    transform: translate3d(-10px,-220px,0) scale(1) rotate(-270deg);
  }

  95% {
    opacity: 1;
    transform: translate3d(-25px,-300px,0) scale(1) rotate(-320deg);
    transition-timing-function: cubic-bezier(.79,.17,.15,.96);
  }

  99.9%,
  to {
    opacity: 0;
    transform: translate3d(-23px,-330px,0) scale(1.3) rotate(-340deg);
  }
}









.c-footer__project{overflow:hidden;text-align:center; height:37vh;position:relative;padding-top:15vw;padding-bottom:3vw;color:#fff;background-size:100% auto;background-repeat:no-repeat;background-position:top;background:#f7f7f7}
.c-footer__waves-item{top:3%;left:50%;z-index:0;width:200vw;opacity:.9;height:200vw;display:block;margin-top:15vw;border-radius:40%;position:absolute;margin-left:-100vw;-webkit-transform-origin:50% 48%;transform-origin:50% 48%;-webkit-animation:wave 7s linear infinite;animation:wave 7s linear infinite;background:linear-gradient(103deg,#b10d0b,#c75251)}
.c-footer__waves-item.item-01{-webkit-animation:wave 9s linear infinite;animation:wave 9s linear infinite}
.c-footer__waves-item.item-02{opacity:1;margin-left:-115vw;-webkit-animation:wave 11s linear infinite;animation:wave 11s linear infinite;background:linear-gradient(103deg,#b10d0b,#b10d0b)}
@-webkit-keyframes wave{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}