@charset "utf-8";
@import url("./common.css");

.wrap img,
.inner { display:inline-block; width:1920px; }

.con07 .motion img { position:absolute; display:inline-block; }
.con07 .motion .thx { bottom:828px; left:50%; transform:translateX(-50%); width:300px; }
.con07 .motion .loc01 { bottom:308px; width:23px; left:50%; transform:translateX(-50%); margin-left:8%; }
.con07 .motion .loc02 { bottom:218px; width:24px; left:50%; transform:translateX(-50%); margin-left:-14.5%; }
.con07 .motion .loc03 { bottom:217px; width:23px; left:50%; transform:translateX(-50%); margin-left:7%; }

.con07.action .motion .thx { animation:waveGoodbye 2s ease-in-out infinite;  }
.con07.action .motion .loc01 { animation:jump 1s ease forwards; }
.con07.action .motion .loc02 { animation:jump 1s ease forwards; animation-delay:1s; }
.con07.action .motion .loc03 { animation:jump 1s ease forwards; animation-delay:2s; }

@keyframes waveGoodbye {
    0% {
      transform: rotate(0deg) translate(-50%, 0);
    }
    25% {
      transform: rotate(-5deg) translate(-50%, -5px);
    }
    50% {
      transform: rotate(5deg) translate(-50%, 5px);
    }
    75% {
      transform: rotate(-5deg) translate(-50%, -5px);
    }
    100% {
      transform: rotate(0deg) translate(-50%, 0);
    }
}

@keyframes jump {
    0% {
        transform: translate(-50%, 0);
    }
    30% {
        transform: translate(-50%, -15px); /* 위로 점프 */
    }
    50% {
        transform: translate(-50%, 0); /* 원래 위치로 돌아옴 */
    }
    70% {
        transform: translate(-50%, -10px); /* 약간 낮게 다시 점프 */
    }
    100% {
        transform: translate(-50%, 0); /* 다시 원래 위치로 돌아옴 */
    }
}
  
  


@media screen and (max-width:1920px) {
    
    .inner { width:100%; }
    .wrap p img,
    h1 .inner img:first-child { position:relative; left:50%; transform:translateX(-50%); }  
    

}