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

h1, 
.con01 { background:#80d645; }
.con04 { background:#c2ff73; }
.con0501 { background:#fff273; }

.con06 img { position:relative; margin:0 auto; width:1500px; }

h1 .motion { position:absolute; top:415px; left:72px; display:inline-block; width:247px; height:auto; 
    animation: balloon-bob 2s ease-in-out infinite; /* 부드러운 애니메이션 적용 */
}
@keyframes balloon-bob {
    0% {
        transform:rotate(0) translateY(0); /* 시작 위치 */
    }
    25% {
        transform:rotate(-1deg) translateY(-5px); /* 위로 살짝 이동 */
    }
    50% {
        transform:rotate(0) translateY(0); /* 원래 위치로 돌아옴 */
    }
    75% {
        transform:rotate(-1deg) translateY(5px); /* 아래로 살짝 이동 */
    }
    100% {
        transform:rotate(0) translateY(0); /* 원래 위치로 돌아옴 */
    }
}


.con06 .inner { width:1600px; }
.con06 .motion { position:absolute; bottom:82px; left:37.2%; display:inline-block; width:455px; height:auto; 
    animation: bounce 2s ease infinite; /* 애니메이션 추가 */
}
@keyframes bounce {
    0% {
        transform: translateY(0); /* 시작 위치 */
    }
    10% {
        transform: translateY(-10px); /* 위로 10px 이동 */
    }
    20% {
        transform: translateY(0); /* 원래 위치로 돌아옴 */
    }
    30% {
        transform: translateY(-10px); /* 위로 5px 이동 */
    }
    40% {
        transform: translateY(0); /* 원래 위치로 돌아옴 */
    }
}


@media screen and (max-width:1600px) {
    .con06 .inner { width:1500px; }
}
@media screen and (max-width:1500px) {
    .con06 .inner { width:1400px; }
    .con06 img { position:relative; left:50%; transform:translateX(-50%); width:1500px; }   
}