
.first-view{
	position:relative;
	padding-bottom: 239%;
	/* background-image: url(../images/sample.jpg); */
    background-size: contain;
    margin-bottom: 21%;
}
.first-view img{
	position:absolute;
	/* opacity:0.6; */
}
.fv-parts1 {
    width: 58.5%;
    top: 0%;
    left: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts1-anime 0.8s forwards;
}

  @keyframes fv-parts1-anime {
    0% {
      transform: translateX(-230px) translateY(-40px);
      opacity: 0;
    }
    100% {
      transform: translateX(0) translateY(0px);
       opacity: 1;
    }
  }
  

.fv-parts2 {
    width: 37%;
    top: 3.3%;
    left: 5%;
	z-index: 4;
    opacity: 0;
    animation: fv-parts2-anime 0.8s 2.1s forwards;
}

@keyframes fv-parts2-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }

.fv-parts3 {
    width: 53.3%;
    top: 0%;
    right: 0;
	z-index: 1;
    animation: fv-parts3-anime 0.8s 0.4s forwards;
    opacity: 0;
}

@keyframes fv-parts3-anime {
    0% {
    transform: translate(200px, 30px);
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }

.fv-parts4 {
    width: 37.5%;
    top: 6%;
    left: 57%;
	z-index: 2;
    opacity: 0;
    animation: fv-parts7-anime 0.8s 2.3s forwards;
}

@keyframes fv-parts7-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }

.fv-parts5 {
    width: 46.2%;
    top: 21.2%;
    left: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts5-anime 0.8s 0.6s forwards;
}


@keyframes fv-parts5-anime {
    0% {
    transform: translate(-175px, 40px);
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }

.fv-parts6 {
    width: 72.3%;
    top: 22.8%;
    right: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts6-anime 0.9s 0.8s forwards;
}
@keyframes fv-parts6-anime {
    0% {
        transform: translate(275px, -40px);
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }

  .fv-parts7 {
    width: 45.2%;
    top: 33.1%;
    right: 0.5%;
    z-index: 4;
    opacity: 0;
    animation: fv-parts7-anime 0.8s 2.5s forwards;
}

@keyframes fv-parts7-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }

.fv-parts8 {
    width: 79.6%;
    top: 23%;
    left: 2.8%;
	z-index: 2;
    scale: 0;
    animation: fv-parts8-anime 1s 3.9s forwards;
}



  @keyframes fv-parts8-anime {
    0% {
        scale: 0;
        opacity: 0;
    }
    50% {
      opacity: 1;
  }

    50% {
        scale: 1.5;
    }

    80% {
      scale: 0.7;
  }

    100% {
      scale: 1;
  }
  }

.fv-parts9 {
    width: 82.5%;
    top: 49.9%;
    left: 4%;
	z-index: 4;
 opacity: 0;
 animation: fv-parts09-anime 0.8s 3.3s forwards;
}

@keyframes fv-parts09-anime {
    0% {
    transform: translate(-326px, 40px) ;
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }

.fv-parts10 {
    width: 100%;
    top: 58.1%;
    left: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts10-anime 0.9s 1.1s forwards;
}
@keyframes fv-parts10-anime {
    0% {
        transform: translateY(50px);
      opacity: 0;
    }
    100% {
        transform: translateY(0px);
       opacity: 1;
    }
  }
.fv-parts11 {
    width: 40%;
    top: 63.3%;
    left: 3.1%;
	z-index: 4;
    opacity: 0;
    animation: fv-parts11-anime 0.8s 2.7s forwards;
}

@keyframes fv-parts11-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }


.fv-parts12 {
    width: 59.6%;
    top: 67.6%;
    left: 35.3%;
	z-index: 4;
  opacity: 0;
  animation: fv-parts12-anime 0.8s 3.3s forwards;
 }
 
 @keyframes fv-parts12-anime {
     0% {
     transform: translate(226px, -40px) ;
       opacity: 0;
     }
     100% {
         transform: translate(0px, 0px);
        opacity: 1;
     }
   }


.fv-parts13 {
    width: 51%;
    top: 81.1%;
    left: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts13-anime 0.9s 1.3s forwards;
}
@keyframes fv-parts13-anime {
    0% {
        transform: translate(-195px, 40px);
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }
.fv-parts14 {
    width: 38%;
    top: 82.3%;
    left: 6.5%;
	z-index: 4;
    opacity: 0;
    animation: fv-parts11-anime 0.8s 2.9s forwards;
}

@keyframes fv-parts11-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }

.fv-parts15 {
    width: 56.5%;
    top: 77.5%;
    right: 0%;
	z-index: 1;
    opacity: 0;
    animation: fv-parts15-anime 0.9s 1.6s forwards;
    /* animation: fv-parts15-anime 0.9s 1.3s forwards; */
}
@keyframes fv-parts15-anime {
    0% {
        transform: translate(215px, -40px);
      opacity: 0;
    }
    100% {
        transform: translate(0px, 0px);
       opacity: 1;
    }
  }

.fv-parts16 {
    width: 36%;
    top: 78.6%;
    left: 60.8%;
	z-index: 5;
    opacity: 0;
    animation: fv-parts16-anime 0.8s 3.1s forwards;
}

@keyframes fv-parts16-anime {
    0% {
    /* transform: translate(200px, 30px); */
      opacity: 0;
    }
    100% {
        /* transform: translate(0px, 0px); */
       opacity: 1;
    }
  }


  @media screen and (min-width:1080px) {

    .fv-parts1 {
      animation: fv-parts1-anime 0.8s 2.2s forwards;
  }

    .fv-parts2 {
      animation: fv-parts2-anime 0.8s 4.3s forwards;
  }

    .fv-parts3 {
      animation: fv-parts3-anime 0.8s 2.6s forwards;
  }

  .fv-parts4 {
    animation: fv-parts7-anime 0.8s 4.5s forwards;
}
    .fv-parts5 {
      animation: fv-parts5-anime 0.8s 2.8s forwards;
  }
    .fv-parts6 {
      animation: fv-parts6-anime 0.9s 3s forwards;
  }
    .fv-parts7 {
      animation: fv-parts7-anime 0.8s 4.7s forwards;
  }
    .fv-parts8 {
      animation: fv-parts8-anime 1s 6.1s forwards;
  }
    .fv-parts9 {
   animation: fv-parts09-anime 0.8s 5.5s forwards;
  }
    .fv-parts10 {
      animation: fv-parts10-anime 0.9s 3.3s forwards;
  }
    .fv-parts11 {
      animation: fv-parts11-anime 0.8s 4.9s forwards;
  }
    .fv-parts12 {
    animation: fv-parts12-anime 0.8s 5.5s forwards;
   }
    .fv-parts13 {
      animation: fv-parts13-anime 0.9s 3.5s forwards;
  }
    .fv-parts14 {
      animation: fv-parts11-anime 0.8s 5.1s forwards;
  }
    .fv-parts15 {
      animation: fv-parts15-anime 0.9s 3.8s forwards;
  }
    .fv-parts16 {
      animation: fv-parts16-anime 0.8s 5.3s forwards;
  }
  
  }