@charset "utf-8";

/*이미지 줌 효과*/
.zoom01{
  position:relative;
  animation-name: zoom01;
  animation-duration: 2s;
  transition:ease-in-out;
}
@keyframes zoom01 {
  0% { transform: scale(1.2,1.2);}
}

@keyframes zoom02 {
  0% { transform: scale(1.2,1.2);}
  100% { transform: scale(1,1);}
}

/*시간차*/
.delay_1{animation-delay:0.1s;}
.delay_2{animation-delay:0.3s;}
.delay_3{animation-delay:0.5s;}
.delay_4{animation-delay:0.7s;}
.delay_5{animation-delay:0.9s;}
.delay_6{animation-delay:1.1s;}
.delay_7{animation-delay:1.3s;}
.delay_8{animation-delay:1.5s;}
.delay_9{animation-delay:1.7s;}
.delay_10{animation-delay:1.9s;}


/*이동*/

.movie01 {position:relative; animation:movie01 2s; transition:ease-in-out; animation-fill-mode: backwards;}

.movie01.box01{animation-delay:0.1s;}
.movie01.box02{animation-delay:0.3s;}
.movie01.box03{animation-delay:0.5s;}
.movie01.box04{animation-delay:0.7s;}


@keyframes movie01{
	0%   {opacity:0;bottom:-50px;}
  	50%  {opacity:1;bottom:30px;}
  	100% {bottom:0;}
	}


.top_movie01{
  position:relative;
  animation-name: top_movie01;
  animation-duration: 1s;
}

@keyframes top_movie01{
from{top:-50px; opacity:0} 
to{top:0;opacity:1}
}

.bottom_movie01{
  position:relative;
  animation-name: bottom_movie01;
  animation-duration: 1s;
  transition:ease-in-out;
}

@keyframes bottom_movie01{
from{bottom:-50px; opacity:0} 
to{bottom:0;opacity:1}
}


.left_movie01{
  position:relative;
  animation-name: left_movie01;
  animation-duration: 3s;
}

@keyframes left_movie01{
0%{left:-110px; opacity:0} 
100%{left:-60px;opacity:1}
}

.right_movie01{
  position:relative;
  animation-name: right_movie01;
  animation-duration: 3s;
}

@keyframes right_movie01{
0%{right:-130px; opacity:0} 
100%{right:-70;opacity:1}
}