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

h1,
.con01 { background:#ffdf3c; }
.con02,
.con03_01 { background:#d4e59a; }
.con03_02 { background:linear-gradient(to right, #ffec96 50%, rgba(255, 236, 150, 0) 50%), url('../images/ele_math/con03_02_bg.jpg') center repeat-x; background-size:auto 100%; }
.con03_03 { background:linear-gradient(to right, #f6ced4 50%, rgba(255, 236, 150, 0) 50%), url('../images/ele_math/con03_03_bg.jpg') center repeat-x; background-size:auto 100%; }
.con03_04 { background:linear-gradient(to right, #a0d0ef 50%, rgba(255, 236, 150, 0) 50%), url('../images/ele_math/con03_04_bg.jpg') center repeat-x; background-size:auto 100%; }
.con03_05,
.con03_06 { background:#a0d0ef; }
.con04,
.con05 { background:#d5d5d5; }

h1 .fish01,
h1 .fish02,
h1 .fish03 { position:absolute; display:inline-block; }
h1 .fish01 { width:60px; height:auto; top:306px; left:418px; animation:fish-swim 0.8s ease-in-out forwards; animation-delay: 0.6s; }
h1 .fish02 { width:67px; height:auto; top:380px; left:346px; animation:fish-swim 0.6s ease-in-out forwards; }
h1 .fish03 { width:40px; height:auto; top:355px; left:492px; animation:fish-swim 1.2s ease-in-out forwards; animation-delay: 1s; }
@keyframes fish-swim {
    0% {
        transform:translateX(0) rotate(0deg); /* 시작 위치 */
    }
    100% {
        transform:translateX(-20px) rotate(5deg); /* 왼쪽으로 이동 및 회전 */
    }
}


.cloud_group { display:none; }
.cloud_group img { position:absolute; }

.con01 .cloud_group img:nth-child(1) { top:138px; left:170px; width:350px; height:auto; }
.con01 .cloud_group img:nth-child(2) { top:310px; right:120px; width:309px; height:auto; }
.con01 .cloud_group img:nth-child(3) { top:855px; left:107px; width:276px; height:auto; }