.hero_section_animation {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #fff
}

.hero_section_animation .cloud {
    position: absolute;
    background-image: url(/landing/assets/images/clouds.png);
    background-repeat: no-repeat;
    width: 250.625em;
    z-index: 1;
    top: -26px;
    height: 448px
}

.hero_section_animation #cloud1 {
    animation: cloudLoop 80s linear infinite
}

.hero_section_animation ._bird-info {
    position: absolute;
    height: 80%;
    -webkit-animation: birdOne 25s linear infinite;
    -moz-animation: birdOne 25s linear infinite;
    -o-animation: birdOne 25s linear infinite
}

.hero_section_animation ._bird-01 {
    -webkit-animation: brd01 25s linear infinite;
    -moz-animation: brd01 25s linear infinite;
    -o-animation: brd01 25s linear infinite;
    position: absolute
}

.hero_section_animation #_bird-1a {
    animation: run-x .9s steps(6) infinite;
    position: absolute;
    top: 70px;
    left: 30px
}

@media screen and (min-width:992px) {
    ._bird- {
        width: 16px;
        height: 19px;
        display: inline-block;
        background-image: url(/landing/assets/images/bird-lg.png)
    }

    #mobile_shortly {
        width: 14%
    }
}

.hero_section_animation ._bird-02 {
    -webkit-animation: brd02 25s linear infinite;
    -moz-animation: brd02 25s linear infinite;
    -o-animation: brd02 25s linear infinite;
    position: absolute
}

.hero_section_animation #_bird-1b {
    animation: run-x .9s steps(6) infinite;
    position: absolute;
    top: 40px;
    left: 15px
}

.hero_section_animation ._bird-03 {
    -webkit-animation: brd03 25s linear infinite;
    -moz-animation: brd03 25s linear infinite;
    -o-animation: brd03 25s linear infinite;
    position: absolute
}

.hero_section_animation #_bird-1c {
    animation: run-x .9s steps(6) infinite;
    position: absolute;
    top: 30px;
    left: 0
}

.hero_section_animation .balloon {
    position: absolute;
    top: 20px;
    width: 57px;
    height: 80px;
    margin: 0;
    right: 280px;
    background-size: cover;
    transform: translateY(-370px);
    animation: ebot .5s ease 1.2s both, bounce infinite 5s ease-out 0
}

.hero_section_animation .bus-wrap {
    position: absolute;
    z-index: 4;
    animation: busMoving 10s linear -2s infinite;
    bottom: 16px
}

.hero_section_animation .bus-info {
    position: relative;
    width: 489px
}

.hero_section_animation .wheelL-wrap {
    left: 0;
    position: absolute;
    height: 31px;
    bottom: 0;
    width: 28.4%
}

.hero_section_animation .wheel {
    position: absolute;
    bottom: -15px;
    animation: goWheel 10s linear -2s infinite
}

.hero_section_animation ._w-lw {
    right: 0
}

.hero_section_animation .wheelR-wrap {
    right: 0;
    position: absolute;
    height: 31px;
    bottom: 0;
    width: 27%
}

.hero_section_animation ._w-rw {
    left: 0
}

.hero_section_animation .child-wrap {
    position: relative;
    z-index: 3;
    bottom: 0;
    left: 70px;
    width: 50%
}

.hero_section_animation .child-still-lft-mooving-wrap {
    position: absolute;
    bottom: 0;
    animation: mcMooving 10s linear -2s infinite
}

.hero_section_animation .child-still-lft-mooving {
    width: 95px;
    height: 134px;
    background-image: url(/school/assets/images/mc_animationFrame.png);
    background-repeat: no-repeat;
    animation: run_right 2s steps(8) infinite;
    float: left
}

.hero_section_animation .child-still-lft {
    position: absolute;
    width: 94px;
    bottom: 0;
    left: -38px;
    animation: mcStill 10s linear -2s infinite
}

.hero_section_animation .child-still {
    position: absolute;
    bottom: 0;
    animation: childStill 10s linear -2s infinite;
    width: 94px
}

.hero_section_animation .child-info {
    width: 44px;
    height: 75px;
    position: absolute;
    animation: childMoving 10s linear -2s infinite;
    bottom: 0;
    z-index: 1;
    left: 48px
}

@keyframes childMoving {
    0% {
        left: 49px;
        animation-timing-function: ease-out;
        bottom: 0;
        opacity: 0
    }

    53% {
        left: 49px;
        opacity: 0
    }

    54% {
        opacity: 1
    }

    75% {
        left: 66%;
        animation-timing-function: ease-in;
        bottom: 0;
        opacity: 1
    }

    76% {
        bottom: 60px;
        opacity: 0
    }

    to {
        left: 80em;
        bottom: 60px;
        opacity: 0
    }
}

.hero_section_animation .child-img {
    width: 44px;
    height: 75px;
    background-image: url(/school/assets/images/child_img.png);
    animation: childWalk 1s steps(8) infinite
}

@keyframes childWalk {
    0% {
        background-position: 0
    }

    to {
        background-position: -352px
    }
}

.hero_section_animation .mother-info {
    width: 61px;
    height: 134px;
    position: absolute;
    animation: motherShake 10s linear -2s infinite
}

.hero_section_animation .mother-img {
    width: 61px;
    height: 134px;
    background-image: url(/school/assets/images/mother.png);
    animation: motherWalk 1s steps(2) infinite
}

@keyframes motherWalk {
    0% {
        background-position: 0
    }

    to {
        background-position: -119px
    }
}

.hero_section_animation #mobile_shortly {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    text-align: right;
    -webkit-animation: mobileShortly 10s linear infinite;
    -moz-animation: mobileShortly 10s linear infinite;
    -o-animation: mobileShortly 10s linear infinite
}

@keyframes mobileShortly {
    0% {
        bottom: 0;
        opacity: 1
    }

    20% {
        bottom: 0;
        opacity: 1
    }

    21% {
        bottom: 0;
        opacity: 0
    }

    to {
        opacity: 0;
        bottom: 0
    }
}

.hero_section_animation #mobile {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
    text-align: right;
    -webkit-animation: movingmobile 10s linear infinite;
    -moz-animation: movingmobile 10s linear infinite;
    -o-animation: movingmobile 10s linear infinite
}

@keyframes movingmobile {
    0% {
        bottom: 0;
        opacity: 0
    }

    10% {
        bottom: 0
    }

    20% {
        bottom: 0
    }

    25% {
        bottom: 0
    }

    30% {
        bottom: 0
    }

    35% {
        bottom: 0
    }

    40% {
        bottom: 0
    }

    45% {
        bottom: 0
    }

    50% {
        bottom: 0
    }

    70% {
        bottom: 0;
        opacity: 0
    }

    71% {
        bottom: 0;
        opacity: 1
    }

    80% {
        bottom: 0;
        opacity: 1
    }

    82% {
        bottom: 0;
        opacity: 1
    }

    83% {
        bottom: 0;
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.balloon {
    position: absolute;
    top: 20px;
    width: 57px;
    height: 80px;
    margin: 0;
    right: 280px;
    background-size: cover;
    transform: translateY(-370px);
    animation: ebot .5s ease 1.2s both, bounce infinite 5s ease-out 0
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(20px)
    }
}

@media(max-width:576px) {
    .balloon {
        width: 57px;
        height: 80px;
        right: 80px
    }

    .balloon img {
        width: 37%
    }
}

@media(min-width:992px) {
    ._an_bnr_wrap {
        /* float: left; */
        width: 100%;
        height: 400px;
        position: relative;
        overflow: hidden;
        background: #fff
    }
}

@media(max-width:991px) {
    ._an_bnr_wrap {
        float: left;
        width: 100%;
        height: 266px;
        position: relative;
        overflow: hidden;
        background: #fff
    }
}

@media(max-width:576px) {
    ._an_bnr_wrap {
        height: 160px
    }
}

._bird-info {
    position: absolute;
    height: 80%;
    -webkit-animation: birdOne 25s linear infinite;
    -moz-animation: birdOne 25s linear infinite;
    -o-animation: birdOne 25s linear infinite
}

@media(min-width:992px) {
    ._bird- {
        width: 16px;
        height: 19px;
        display: inline-block;
        background-image: url(/landing/assets/images/bird-lg.png)
    }
}

@media(max-width:991px) {
    ._bird- {
        width: 4px;
        height: 7px;
        display: inline-block;
        background-image: url(/landing/assets/images/bird_mob.png)
    }
}

._bird-01 {
    -webkit-animation: brd01 25s linear infinite;
    -moz-animation: brd01 25s linear infinite;
    -o-animation: brd01 25s linear infinite;
    position: absolute
}

._bird-02 {
    -webkit-animation: brd02 25s linear infinite;
    -moz-animation: brd02 25s linear infinite;
    -o-animation: brd02 25s linear infinite;
    position: absolute
}

._bird-03 {
    -webkit-animation: brd03 25s linear infinite;
    -moz-animation: brd03 25s linear infinite;
    -o-animation: brd03 25s linear infinite;
    position: absolute
}

#_bird-1a {
    top: 0;
    left: 30px
}

#_bird-1a,
#_bird-1b {
    animation: run-x .9s steps(6) infinite;
    position: absolute
}

#_bird-1b {
    top: 15px;
    left: 15px
}

#_bird-1c {
    animation: run-x .9s steps(6) infinite;
    position: absolute;
    top: 30px;
    left: 0
}

@keyframes run-x {
    0% {
        background-position-x: 0
    }

    to {
        background-position-x: -192px
    }
}

@keyframes birdOne {
    0% {
        margin-left: -10%;
        top: 0
    }

    to {
        margin-left: 100%;
        top: 0
    }
}

@keyframes brd01 {
    0% {
        margin-left: -8%;
        top: 0
    }

    35% {
        top: 10%
    }

    50% {
        top: 50%;
        top: 0
    }

    70% {
        top: 0;
        margin-left: 80%
    }

    to {
        margin-left: 80%;
        top: 0
    }
}

@keyframes brd02 {
    0% {
        margin-left: -8%;
        top: 0
    }

    35% {
        top: 20%
    }

    50% {
        top: 30%;
        top: 20%
    }

    70% {
        top: 10%;
        margin-left: 80%
    }

    to {
        margin-left: 100%;
        top: 0
    }
}

@keyframes brd03 {
    0% {
        margin-left: -8%;
        top: 0
    }

    35% {
        top: 0
    }

    50% {
        top: 0
    }

    70% {
        top: 0;
        margin-left: 80%
    }

    to {
        margin-left: 100%;
        top: 0
    }
}

.bus-wrap {
    position: absolute;
    z-index: 4;
    animation: busMoving 10s linear -2s infinite
}

.bus-info {
    position: relative
}

.bus-info img {
    width: 100%
}

.wheelL-wrap {
    left: 0;
    width: 28.4%
}

.wheelL-wrap,
.wheelR-wrap {
    position: absolute;
    height: 31px;
    bottom: 0
}

.wheelR-wrap {
    right: 0;
    width: 27%
}

@media(min-width:992px) {
    .bus-wrap {
        bottom: 21px
    }

    .bus-info {
        width: 489px
    }

    .wheel {
        position: absolute;
        bottom: -15px;
        animation: goWheel 10s linear -2s infinite
    }

    ._w-lw {
        right: 0
    }

    ._w-rw {
        left: 0
    }
}

@media(max-width:991px) {
    .bus-wrap {
        bottom: 10px
    }

    .bus-info {
        width: 251px
    }

    .wheel {
        position: absolute;
        width: 20px;
        height: 26px;
        bottom: -12px;
        animation: goWheel 10s linear -2s infinite
    }

    ._w-lw {
        right: 0
    }

    ._w-rw {
        left: 0
    }

    .wheelL-wrap,
    .wheelR-wrap {
        bottom: 1px
    }
}

@media(max-width:576px) {
    .bus-wrap {
        bottom: 10px
    }

    .bus-info {
        width: 171px
    }

    .wheel {
        position: absolute;
        width: 15px;
        height: 26px;
        bottom: -9px;
        animation: goWheel 10s linear -2s infinite
    }

    .wheelL-wrap,
    .wheelR-wrap {
        bottom: 1px
    }
}

@media(max-width:480px) {
    .bus-wrap {
        bottom: 6px
    }

    .bus-info {
        width: 111px
    }

    .wheel {
        position: absolute;
        width: 10px;
        height: 26px;
        bottom: -14px;
        animation: goWheel 10s linear -2s infinite
    }

    .wheelL-wrap,
    .wheelR-wrap {
        bottom: 1px
    }
}

@keyframes busMoving {
    0% {
        left: -1000%;
        animation-timing-function: ease-out
    }

    30% {
        left: -100%;
        animation-timing-function: ease-out
    }

    35% {
        left: -50%
    }

    56%,
    76% {
        left: 20%;
        animation-timing-function: ease-in
    }

    to {
        left: 100%
    }
}

.wheel img {
    width: 100%
}

@keyframes goWheel {
    0% {
        transform: rotate(0deg)
    }

    40% {
        transform: rotate(0deg);
        animation-timing-function: ease-out
    }

    56%,
    76% {
        transform: rotate(350deg);
        animation-timing-function: ease-in
    }

    to {
        transform: rotate(910deg)
    }
}

.child-still-lft img {
    width: 100%
}

@keyframes mcStill {
    0% {
        opacity: 1
    }

    25% {
        opacity: 1
    }

    26% {
        opacity: 0
    }

    42% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@media(min-width:992px) {
    .child-still-lft {
        position: absolute;
        width: 94px;
        bottom: 0;
        left: -38px;
        animation: mcStill 10s linear -2s infinite
    }
}

@media(max-width:991px) {
    .child-still-lft {
        position: absolute;
        width: 49px;
        bottom: 0;
        left: -150px;
        animation: mcStill 10s linear -2s infinite
    }
}

@media(max-width:768px) {
    .child-still-lft {
        position: absolute;
        width: 49px;
        bottom: 0;
        left: -47px;
        animation: mcStill 10s linear -2s infinite
    }
}

@media(max-width:576px) {
    .child-still-lft {
        position: absolute;
        width: 33px;
        bottom: 0;
        left: -47px;
        animation: mcStill 10s linear -2s infinite
    }
}

@media(max-width:480px) {
    .child-still-lft {
        position: absolute;
        width: 23px;
        bottom: 0;
        left: -47px;
        animation: mcStill 10s linear -2s infinite
    }
}

.child-still-lft-mooving-wrap {
    position: absolute;
    bottom: 0;
    animation: mcMooving 10s linear -2s infinite
}

.child-still-lft-mooving {
    width: 95px;
    height: 134px;
    background-image: url(/landing/assets/images/mc_animationFrame.png);
    background-repeat: no-repeat;
    animation: run_right 2s steps(8) infinite;
    float: left
}

@keyframes run_right {
    0% {
        background-position: 0 0
    }

    to {
        background-position: -759px 0
    }
}

@keyframes mcMooving {
    0% {
        opacity: 0;
        left: -38px
    }

    25% {
        opacity: 0
    }

    26% {
        opacity: 1;
        left: -38px
    }

    41% {
        opacity: 1;
        left: 1.9px
    }

    42% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@media(max-width:991px) {
    .child-still-lft-mooving {
        width: 49px;
        height: 70px;
        background-image: url(/landing/assets/images/mc_tab.png);
        background-repeat: no-repeat;
        animation: run_right 2s steps(8) infinite;
        float: left
    }

    @keyframes run_right {
        0% {
            background-position: 0 0
        }

        to {
            background-position: -392px 0
        }
    }

    @keyframes mcMooving {
        0% {
            opacity: 0;
            left: -50px
        }

        25% {
            opacity: 0
        }

        26% {
            opacity: 1;
            left: -50px
        }

        41% {
            opacity: 1;
            left: 1.9px
        }

        42% {
            opacity: 0
        }

        to {
            opacity: 0
        }
    }
}

@media(max-width:480px) {
    .child-still-lft-mooving {
        width: 23px;
        height: 33px;
        background-image: url(/landing/assets/images/mc_mobile.png);
        background-repeat: no-repeat;
        animation: run_right 2s steps(8) infinite;
        float: left
    }

    @keyframes run_right {
        0% {
            background-position: 0 0
        }

        to {
            background-position: -184px 0
        }
    }

    @keyframes mcMooving {
        0% {
            opacity: 0;
            left: -50px
        }

        25% {
            opacity: 0
        }

        26% {
            opacity: 1;
            left: -50px
        }

        41% {
            opacity: 1;
            left: 1.9px
        }

        42% {
            opacity: 0
        }

        to {
            opacity: 0
        }
    }
}

.child-wrap {
    position: relative;
    z-index: 3;
    bottom: 0;
    left: 70px;
    width: 50%
}

.child-still {
    position: absolute;
    bottom: 0;
    animation: childStill 10s linear -2s infinite
}

.child-still img {
    width: 100%
}

@media(min-width:992px) {
    .child-wrap {
        height: 389px
    }

    .child-still {
        width: 94px
    }

    .child-info {
        width: 44px;
        height: 75px;
        position: absolute;
        animation: childMoving 10s linear -2s infinite;
        bottom: 0;
        z-index: 1;
        left: 48px
    }

    .child-img {
        width: 44px;
        height: 75px;
        background-image: url(/landing/assets/images/child_img.png);
        animation: childWalk 1s steps(8) infinite
    }

    @keyframes childWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -352px
        }
    }

    @keyframes childMoving {
        0% {
            left: 49px;
            animation-timing-function: ease-out;
            bottom: 0;
            opacity: 0
        }

        53% {
            left: 49px;
            opacity: 0
        }

        54% {
            opacity: 1
        }

        75% {
            left: 66%;
            animation-timing-function: ease-in;
            bottom: 0;
            opacity: 1
        }

        76% {
            bottom: 60px;
            opacity: 0
        }

        to {
            left: 80em;
            bottom: 60px;
            opacity: 0
        }
    }
}

@media(max-width:991px) {
    .child-wrap {
        height: 265px
    }

    .child-still {
        width: 49px
    }

    .child-info {
        width: 24px;
        height: 40px;
        position: absolute;
        animation: childMoving 10s linear -2s infinite;
        bottom: 0;
        z-index: 1;
        left: 24px
    }

    .child-img {
        width: 24px;
        height: 40px;
        background-image: url(/landing/assets/images/child_img_tab.png);
        animation: childWalk 1s steps(8) infinite
    }

    @keyframes childWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -192px
        }
    }

    @keyframes childMoving {
        0% {
            left: 25px;
            animation-timing-function: ease-out;
            bottom: 0;
            opacity: 0
        }

        53% {
            left: 25px;
            opacity: 0
        }

        54% {
            opacity: 1
        }

        75% {
            left: 42%;
            animation-timing-function: ease-in;
            bottom: 0;
            opacity: 1
        }

        76% {
            bottom: 60px;
            opacity: 0
        }

        to {
            left: 80em;
            bottom: 60px;
            opacity: 0
        }
    }
}

@media(max-width:576px) {
    .child-wrap {
        height: 157px
    }

    .child-still {
        width: 34px
    }

    .child-wrap {
        height: 155px
    }

    .child-still {
        width: 33px
    }

    .child-info {
        width: 16px;
        height: 28px;
        position: absolute;
        animation: childMoving 10s linear -2s infinite;
        bottom: 0;
        z-index: 1;
        left: 24px
    }

    .child-img {
        width: 16px;
        height: 28px;
        background-image: url(/landing/assets/images/child_img_575.png);
        animation: childWalk 1s steps(8) infinite
    }

    @keyframes childWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -128px
        }
    }

    @keyframes childMoving {
        0% {
            left: 25px;
            animation-timing-function: ease-out;
            bottom: 0;
            opacity: 0
        }

        53% {
            left: 25px;
            opacity: 0
        }

        54% {
            opacity: 1
        }

        75% {
            left: 30%;
            animation-timing-function: ease-in;
            bottom: 0;
            opacity: 1
        }

        76% {
            bottom: 10px;
            opacity: 0
        }

        to {
            left: 80em;
            bottom: 10px;
            opacity: 0
        }
    }
}

@media(max-width:480px) {
    .child-wrap {
        height: 157px
    }

    .child-still {
        width: 23px
    }

    .child-info {
        width: 11px;
        height: 19px;
        position: absolute;
        animation: childMoving 10s linear -2s infinite;
        bottom: 0;
        z-index: 1;
        left: 12px
    }

    .child-img {
        width: 11px;
        height: 19px;
        background-image: url(/landing/assets/images/child_img_480.png);
        animation: childWalk 1s steps(8) infinite
    }

    @keyframes childWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -88px
        }
    }
}

@keyframes childStill {
    0% {
        opacity: 0
    }

    40% {
        opacity: 0
    }

    41% {
        opacity: 1
    }

    53% {
        opacity: 1
    }

    54% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

#cloud1 {
    animation: cloudLoop 80s linear infinite
}

@keyframes cloudLoop {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-50%, 0, 0)
    }
}

.cloud {
    position: absolute;
    background-image: url(/landing/assets/images/clouds.png);
    background-repeat: no-repeat;
    width: 250.625em;
    z-index: 1;
    top: -46px;
    height: 348px
}

#bnr_bg {
    width: 100%;
    float: left
}

#bnr_bg img {
    background-size: cover;
    width: 100%;
    bottom: 0;
    position: absolute
}

@media(min-width:992px) {
    #bnr_bg {
        height: 400px
    }
}

@media(max-width:991px) {
    #bnr_bg {
        height: 200px
    }
}

#mobile {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
    text-align: right;
    -webkit-animation: movingmobile 10s linear infinite;
    -moz-animation: movingmobile 10s linear infinite;
    -o-animation: movingmobile 10s linear infinite
}

#mobile img {
    width: 100%
}

@media(max-width:991px) {
    #mobile {
        width: 14%
    }
}

#mobile_shortly {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    text-align: right;
    -webkit-animation: mobileShortly 10s linear infinite;
    -moz-animation: mobileShortly 10s linear infinite;
    -o-animation: mobileShortly 10s linear infinite
}

#mobile_shortly img {
    width: 75%
}

@media(max-width:991px) {
    #mobile_shortly {
        width: 14%
    }
}

@media(min-width:992px) {
    .mother-info {
        width: 61px;
        height: 134px;
        position: absolute;
        animation: motherShake 10s linear -2s infinite
    }

    .mother-img {
        width: 61px;
        height: 134px;
        background-image: url(/landing/assets/images/mother.png);
        animation: motherWalk 1s steps(2) infinite
    }

    @keyframes motherWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -119px
        }
    }
}

@media(max-width:991px) {
    .mother-info {
        width: 32px;
        height: 70px;
        position: absolute;
        animation: motherShake 10s linear -2s infinite
    }

    .mother-img {
        width: 32px;
        height: 70px;
        background-image: url(/landing/assets/images/mother_tab.png);
        animation: motherWalk 1s steps(2) infinite
    }

    @keyframes motherWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -64px
        }
    }
}

@media(max-width:480px) {
    .mother-info {
        width: 15px;
        height: 33px;
        position: absolute;
        animation: motherShake 10s linear -2s infinite
    }

    .mother-img {
        width: 15px;
        height: 33px;
        background-image: url(/landing/assets/images/mother_mobile.png);
        animation: motherWalk 1s steps(2) infinite
    }

    @keyframes motherWalk {
        0% {
            background-position: 0
        }

        to {
            background-position: -60px
        }
    }
}

@keyframes motherShake {
    0% {
        left: 0;
        animation-timing-function: ease-out;
        bottom: 0;
        opacity: 0
    }

    35% {
        left: 0
    }

    52% {
        opacity: 0
    }

    53% {
        opacity: 1
    }

    57%,
    58% {
        left: 0;
        animation-timing-function: ease-in;
        bottom: 0;
        opacity: 1
    }

    90% {
        bottom: 0;
        opacity: 1
    }

    91% {
        bottom: 0;
        opacity: 0
    }

    to {
        left: 0;
        bottom: 0;
        opacity: 0
    }
}