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

.wrap img { width:1900px; }

h1 { background:#0596d7; }
.con0201,
.con0202 { background:#d8eff8; }
.con0203 { background:#d8eff8 url('../images/ele_eng/bg_bot.png') center bottom no-repeat; background-size:100% auto; }

h1 .pop01,
h1 .pop02,
h1 .pop03 { position:absolute; display:inline-block; }
h1 .pop01 { transform: scale(0); width:80px; top:122px; left:305px; animation:popcorn-pop 0.6s ease-in-out 0s forwards; }
h1 .pop02 { transform: scale(0); width:56px; top:228px; left:411px; animation:popcorn-pop 0.6s ease-in-out 0.2s forwards; }
h1 .pop03 { transform: scale(0); width:82px; top:417px; left:441px; animation:popcorn-pop 0.6s ease-in-out 0.4s forwards; }

@media screen and (max-width:1900px) {
    .con0203 { background-size:auto 348px; } 
}

@media screen and (max-width:1900px) {
    .wrap p img,
    h1 .inner img:first-child { position:relative; left:50%; transform:translateX(-50%); }  
    
    h1 .pop01 { left:5px; }
    h1 .pop02 { left:151px; }
    h1 .pop03 { left:201px; }

}

@keyframes popcorn-pop {
    0% {
        transform: scale(0); /* 시작 시 크기 0 */
    }
    30% {
        transform: scale(1.5); /* 부풀어 오름 */
    }
    50% {
        transform: translateY(-10px) scale(1); /* 위로 튀어 오름 */
    }
    70% {
        transform: translateY(-5px) scale(1.2); /* 다시 내려오면서 약간 크기 줄어듦 */
    }
    100% {
        transform: translateY(0) scale(1); /* 원래 크기와 위치로 돌아옴 */
    }
}