#sec1 {
    width: 100%;
}
#wrap {
    width: 1000px;
    height: 839px;
    margin: 0 auto;
    position: relative;
}
#base {
    position: relative;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
#moon {
    position: absolute;
    top: 25%;
    left: -10%;
    width: 140px;
    height: 140px;
    background: #fff04e;
    border-radius: 50%;
}
#moon_hide {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 3s;
}
#balloon1 {
    position: absolute;
    top: 98px;
    left: 765px;
    width: 5%;

    animation: balloon1_moving 3.5s infinite;
}
@keyframes balloon1_moving {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0);
    }
}

#balloon2 {
    position: absolute;
    top: 166px;
    left: 695px;
    width: 5%;

    animation: balloon2_moving 4s infinite;
}
@keyframes balloon2_moving {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}


#balloon3 {
    position: absolute;
    top: 234px;
    left: 829px;
    width: 5%;

    animation: balloon2_moving 3s infinite;
}
@keyframes balloon2_moving {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0);
    }
}


#ro {
    position: absolute;
    top: 240px;
    left: 315px;
    width: 7%;
}
#ro2 {
    position: absolute;
    top: 307px;
    left: 707px;
    width: 14%;
}
#light {
    position: absolute;
    top: 100px;
    left: 594px;
    width: 3%;
    
    animation: light_moving  3s infinite;

    transform-origin: left;
}
@keyframes light_moving {
    0% {
        opacity : 0;
        transform: scale(0);
    } 
    50% {
        opacity : 1;
        transform: scale(1);
    }
    100% {
        opacity : 0;
        transform: scale(0);
    }
}
#bus_hide {
    position: absolute;
    top: 262px;
    left: 438px;
    width: 91px;
    height: 50px;
    overflow: hidden;
}
#bus_hide #bus {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 30%;

    animation: bus_moving  6s infinite;
}
@keyframes bus_moving {
    0% {
        opacity: 1;
        transform: translateX(0);
    } 
    50% {
        opacity: 1;
        transform: translateX(130px);
    }
    75% {
        opacity: 0;
        transform: translateX(130px);
    }
    100% {
        opacity: 0;
        transform: translateX(-130px);
    }
}

#lightning {
    position: absolute;
    top: 8px;
    left: 440px;
    width: 2%;

    animation: lightning_moving 3s infinite;
}
@keyframes lightning_moving {
    0% {
        opacity : 0;
    } 
    
    84% {
        opacity : 0;
    } 
    
    85% {
        opacity : 1;
    }
    90% {
        opacity : 0;
    }
    95% {
        opacity : 1;
    }
    100% {
        opacity : 0;
    }
}

#lightning2 {
    position: absolute;
    top: 8px;
    left: 540px;
    width: 2%;

    animation: lightning_moving2 3s infinite;
}
@keyframes lightning_moving2 {
    0% {
        opacity : 0;
    } 
    
    84% {
        opacity : 0;
    } 
    
    85% {
        opacity : 1;
    }
    90% {
        opacity : 0;
    }
    95% {
        opacity : 1;
    }
    100% {
        opacity : 0;
    }
}
#rain_hide {
    position: absolute;
    top: 105px;
    left: 345px;
    width: 91px;
    height: 60px;
    overflow: hidden;
}
#rain {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s infinite;
}
#rain2 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 0.27s infinite;
}
#rain4 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 0.54s infinite;
}
#rain5 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 0.81s infinite;
}
#rain6 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 1.16s infinite;
}
#rain7 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 1.43s infinite;
}
#rain8 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 1.7s infinite;
}
#rain9 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 1.97s infinite;
}
#rain10 {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 25%;
    opacity: 0;

    animation: rain_moving 2.5s 2.24s infinite;
}
@keyframes rain_moving {
    0% {
        opacity : 1;
        transform: translateY(0px);
    }
    70% {
        opacity : 0.5;
        transform: translateY(70px);
    } 
    96% {
        opacity : 0;
        transform: translateY(70px);
    } 
    100% {
        opacity : 0;
        transform: translateY(-70px);
    }
}


#eyes {
    position: absolute;
    top: 285px;
    left: 654px;
    width: 3%;
}
#ro3 {
    position: absolute;
    top: 330px;
    left: 654px;
    width: 3%;
}
#boom {
    position: absolute;
    top: 288px;
    left: 12px;
    width: 14%;
    transform: scale(0);
    /* transition: all 1s; */
}
#boom2 {
    position: absolute;
    top: 8px;
    left: 852px;
    width: 16%;
    transform: scale(0);
}
#cloud {
    position: absolute;
    top: 675px;
    left: 30px;
    width: 14%;
    opacity: 0.6;
}
#circle_hide {
    position: absolute;
    top: -46px;
    left: 480px;
    width: 100px;
    height: 50px;
    overflow: hidden; 
}
#circle {
    position: absolute;
    top: 40px;
    left: 14px;
    width: 12%;
    opacity: 0;

    animation: circle_moving3 1.5s infinite;
}
@keyframes circle_moving3 {
    0% {
        opacity : 1;
        transform: translate(0px, 0px) scale(1);
    } 
    10% {
        opacity : 0.9;
        transform: translate(8px, -5px)scale(1);
    }
    20% {
        opacity : 0.8;
        transform: translate(16px, -10px)scale(1.6);
    }
    30% {
        opacity : 0.7;
        transform: translate(24px, -12px)scale(1.7);
    }
    40% {
        opacity : 0.6;
        transform: translate(32px, -16px)scale(1.8);
    }
    50% {
        opacity : 0.5;
        transform: translate(40px, -18px)scale(1.9);
    }
    60% {
        opacity : 0.4;
        transform: translate(48px, -16px)scale(2);
    }
    70% {
        opacity : 0.3;
        transform: translate(56px, -14px)scale(2.1);
    }
    80% {
        opacity : 0.2;
        transform: translate(64px, -12px)scale(2.2);
    }
    90% {
        opacity : 0;
        transform: translate(64px, -12px)scale(2.2);
    }
    100% {
        opacity : 0;
        transform: translate(0px, 0px) scale(1);
    }
}
#circle2 {
    position: absolute;
    top: 40px;
    left: 14px;
    width: 12%;
    opacity: 0;

    animation: circle_moving2 1.5s 0.3s infinite;
}
@keyframes circle_moving2 {
    0% {
        opacity : 1;
        transform: translate(0px, 0px) scale(1);
    } 
    10% {
        opacity : 0.9;
        transform: translate(8px, -5px)scale(1.3);
    }
    20% {
        opacity : 0.8;
        transform: translate(16px, -10px)scale(1.4);
    }
    30% {
        opacity : 0.7;
        transform: translate(24px, -12px)scale(1.5);
    }
    40% {
        opacity : 0.6;
        transform: translate(32px, -16px)scale(1.6);
    }
    50% {
        opacity : 0.5;
        transform: translate(40px, -18px)scale(1.7);
    }
    60% {
        opacity : 0.4;
        transform: translate(48px, -16px)scale(1.8);
    }
    70% {
        opacity : 0.3;
        transform: translate(56px, -14px)scale(1.9);
    }
    80% {
        opacity : 0.2;
        transform: translate(64px, -12px)scale(2);
    }
    90% {
        opacity : 0;
        transform: translate(64px, -12px)scale(2);
    }
    100% {
        opacity : 0;
        transform: translate(0px, 0px) scale(1);
    }
}
#circle3 {
    position: absolute;
    top: 40px;
    left: 14px;
    width: 12%;
    opacity: 0;

    animation: circle_moving 1.5s 0.6s infinite;
}
@keyframes circle_moving {
    0% {
        opacity : 1;
        transform: translate(0px, 0px) scale(1);
    } 
    10% {
        opacity : 0.9;
        transform: translate(8px, -5px)scale(1.1);
    }
    20% {
        opacity : 0.8;
        transform: translate(16px, -10px)scale(1.2);
    }
    30% {
        opacity : 0.7;
        transform: translate(24px, -12px)scale(1.3);
    }
    40% {
        opacity : 0.6;
        transform: translate(32px, -16px)scale(1.4);
    }
    50% {
        opacity : 0.5;
        transform: translate(40px, -18px)scale(1.5);
    }
    60% {
        opacity : 0.4;
        transform: translate(48px, -16px)scale(1.6);
    }
    70% {
        opacity : 0.3;
        transform: translate(56px, -14px)scale(1.7);
    }
    80% {
        opacity : 0.2;
        transform: translate(64px, -12px)scale(1.8);
    }
    90% {
        opacity : 0;
        transform: translate(64px, -12px)scale(1.8);
    }
    100% {
        opacity : 0;
        transform: translate(0px, 0px) scale(1);
    }
} 
#hi {
    position: absolute;
    top: 101px;
    left: 485px;
    width: 2.5%;
}
#hi2 {
    position: absolute;
    top: 101px;
    left: 486px;
    width: 2.5%;

    animation: hi 4s infinite;

    transform-origin: right;

}
@keyframes hi {
    0% {
        transform: rotate(0deg);
    } 
    
    84% {
        transform: rotate(0deg);
    } 
    
    85% {
        transform: rotate(10deg);
    }
    90% {
        transform: rotate(0deg);
    }
    95% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}