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

h1 { background:#ff7175; }
.con02 { background:linear-gradient(to left, #fff 50%, rgba(255, 221, 0, 0) 50%), url('../images/high_sci/con02_bg.jpg') left top repeat-x; background-size: auto 2px, auto; }
.con03 { background:linear-gradient(to left, #fddd00 50%, rgba(255, 221, 0, 0) 50%), #fddd00 url('../images/high_sci/con03_bg.jpg') left top repeat-x; background-size: auto 2px, auto; }
.con0401 { background:#fddd00; }
.con0402 { background:linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0) 50%), url('../images/high_sci/con04_02_bg.jpg') right top repeat-x; background-size: 50% 100%, 16px auto; }

h1 .sun { position:absolute; top:74px; left:336px; display:inline-block; width:100px; animation: sun-spin 5s linear infinite; /* 빙글빙글 도는 애니메이션 */ }
.con0402 .ch { position:absolute; bottom:56px; left:734px; display:inline-block; width:40px; animation: character-jump 1.5s ease infinite; /* 점프 애니메이션 */ }

@keyframes sun-spin {
    0% {
        transform: rotate(0deg); /* 시작 위치 */
    }
    100% {
        transform: rotate(360deg); /* 한 바퀴 회전 */
    }
}

@keyframes character-jump {
    0% {
        transform: translateY(0); /* 시작 위치 */
    }
    20% {
        transform: translateY(-15px); /* 첫 번째 점프 */
    }
    40% {
        transform: translateY(0); /* 첫 번째 점프 후 원래 위치 */
    }
    60% {
        transform: translateY(-15px); /* 두 번째 점프 */
    }
    80% {
        transform: translateY(0); /* 두 번째 점프 후 원래 위치 */
    }
    100% {
        transform: translateY(0); /* 최종 원래 위치 */
    }
}