@charset "utf-8";

/*움직임효과 01*/
.mov_t01, .mov_t02, .mov_t03, .mov_t04, .mov_t05, .mov_t06, .mov_t07 {
  position:relative;
  animation-name: movie01;
  animation-duration: 1s;
  transition:ease-in-out;
  animation-fill-mode: backwards;
}
.mov_t01{animation-delay:0.1s;}
.mov_t02{animation-delay:0.2s;}
.mov_t03{animation-delay:0.3s;}
.mov_t04{animation-delay:0.4s;}
.mov_t05{animation-delay:0.5s;}
.mov_t06{animation-delay:0.6s;}
.mov_t07{animation-delay:0.7s;}

@keyframes movie01 {
0%{opacity:0;transform: translateY(100px);-webkit-transform: translateY(100px);}
0%{opacity:0;transform: translateY(50px);-webkit-transform: translateY(50px);}
100%{opacity:1;transform: translateY(0);-webkit-transform: translateY(0);}
}



/*움직임효과 01*/
.sub02_txt00 li{
  position:relative;
  animation-name: movie01;
  animation-duration: 1s;
  transition:ease-in-out;
  animation-fill-mode: backwards;
}
.sub02_txt00 li:nth-of-type(1){animation-delay:0.1s;}
.sub02_txt00 li:nth-of-type(2){animation-delay:0.2s;}
.sub02_txt00 li:nth-of-type(3){animation-delay:0.3s;}
.sub02_txt00 li:nth-of-type(4){animation-delay:0.4s;}
.sub02_txt00 li:nth-of-type(5){animation-delay:0.5s;}
.sub02_txt00 li:nth-of-type(6){animation-delay:0.6s;}

@keyframes sub02_txt00 {
0%{opacity:0;transform: translateY(50px);-webkit-transform: translateY(50px);}
100%{opacity:1;transform: translateY(0);-webkit-transform: translateY(0);}
}


/*움직임효과 02*/
.movie02{
  position:relative;
  animation-name: movie02;
  animation-duration: 4s;
  transition:ease-in-out;
  animation-direction: alternate;/*처음실행한거 다시 거꾸로 돌아가기*/
  animation-iteration-count: infinite;/*무한반복*/
}
@keyframes movie02 {
  0%   {left:-300px; top:0; opacity:1;}
  50%  { left:-250px; top:0;}
  100% {left:-200px; top:0;}
}

/*움직임효과 03*/
.movie03{
  position:relative;
  animation-name: movie03;
  animation-duration: 4s;
  animation-delay:0.05s;
  animation-fill-mode: backwards;
  animation-play-state:0;
  animation-direction: alternate;/*처음실행한거 다시 거꾸로 돌아가기*/
  animation-iteration-count: infinite;/*무한반복*/
}
@keyframes movie03 {
  0%   {left:-100px; top:0px;opacity:1;}
  25%  { left:0; top:0;opacity:1; }
  75%  { left:0; top:0; }
  100% {left:0px; top:0;}
  
}



/*움직임효과 04*/
.movie04{
  position:relative;
  animation-name: movie04;
  animation-duration: 6s;
  animation-delay:0.05s;
  animation-fill-mode: backwards;
  animation-play-state:0;
  animation-direction: alternate;/*처음실행한거 다시 거꾸로 돌아가기*/
  animation-iteration-count: infinite;/*무한반복*/
}
@keyframes movie04 {
  0%   {right:-100px; top:0px;opacity:1;}
  25%  { right:0; top:0;opacity:1; }
  75%  { right:0; top:0; }
  100% {right:0px; top:0;}
  
}




/*움직임효과 05*/
.movie05{
  position:relative;
  animation-name: movie05;
  animation-duration: 0.5s;
  animation-delay:0.05s;
  animation-fill-mode: backwards;
  animation-play-state:0;
}
@keyframes movie05 {
  0%   {left:0px; top:-30px;opacity:0;}
  100% {left:0px; top:0;}
  
}


/*움직임효과 06*/
.movie06{
  animation-name: movie06;
  animation-duration: 2s;
  animation-delay:0.1s;
  animation-iteration-count: infinite;
}
@keyframes movie06 {
  0%   {left:50%; top:50px; opacity:1;}
  50%  {left:50%; top:30px; opacity:1;}
  100% {left:50%; top:50px; opacity:1;}
}





/* 멈추기 01*/
@keyframes stop01 {
  0%   {left:0px; top:0;}
  25%  { left:0; top:0;}
  100% {left:0px; top:0;}
}


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



/*이미지 줌 효과 02*/
.zoom02{
  position:relative;
  animation-name: zoom02;
  animation-duration: 2s;
}
@keyframes zoom02 {
  0% { transform: scale(1.2,1.2);opacity:0;}
  25% { transform: scale(1.2,1.2);opacity:1;}  
}




/*이미지 줌 효과 03*/
.zoom03{
  position:relative;
  animation-name: zoom03;
  animation-duration: 2s;
}
@keyframes zoom03 {
  0% { transform: scale(0.5,0.5);opacity:0;}
  20% { transform: scale(1,1);opacity:1;}  
}