[class *='animate_i'] {
    position: relative
}


[class *='animate_i']:after,
[class *='animate_i']:before {
    content: "";
    position: absolute;
    will-change: margin, transform;
    transition-timing-function: ease;
    transition-duration: .8s;
    transition-property: transform;

}

.animate_i01 {
    position: absolute;
    left: 50%;
    margin-left: -587px;
    top: 100px;
    display: inline-block;
    width: 120px
}

.animate_i01:after {
    width: 108px;
    height: 108px;
    background: url(../images/ani_01.png) no-repeat center;
    background-size: contain;
    top: 0;

}

.animate_i01:before {
    width: 48px;
    height: 48px;
    background: url(../images/ani_02.png) no-repeat center;
    background-size: contain;
    left: -5px;
    top: -5px;

}

.animate_i02 {
    bottom: -232px;
    width: 332px;
    right: 50%;
    margin-right: -988px;
    height: 320px;
    position: absolute;

}

.animate_i02:before {
    width: 155px;
    height: 155px;
    background: url(../images/ani_03.png) no-repeat center;
    background-size: contain;
    left: -30px;
    top: -83px;
}

.animate_i02:after {
    width: 259px;
    height: 259px;
    background: url(../images/ani_04.png) no-repeat center;
    background-size: contain;
    left: 0;
    top: 0
}



.animate_i03 {
    width: 600px;
    height: 816px;
    left: 50%;
    margin-left: -1000px;
    position: absolute;
    background: url(../images/ani_06.png) no-repeat left -20px top 72%;
    animation: backgroundLeft 3.5s ease-in-out infinite alternate-reverse, backgroundLeft 4s ease-in-out infinite alternate-reverse
}

.animate_i03:before {
    width: 377px;
    height: 388px;
    background: url(../images/ani_05.png) no-repeat center;
    background-size: contain;
    left: 70px;
    top: -60px
}

.animate_i03:after {
    width: 150px;
    height: 154px;
    background: url(../images/ani_07.png) no-repeat center;
    background-size: contain;
    left: 250px;
    bottom: 40px;
    z-index: 2
}



[class *='grp_ico_'] {
    width: 100%;
    height: 100%;
    position: absolute;
}

.grp_ico_r {
    right: 0;
    top: 0;
}

.grp_ico_l {
    left: 0;
    top: auto;

}

.animate_i04 {
    width: 640px;
    height: 890px;
    right: 50%;
    margin-right: -1000px;
    position: absolute;
    background: url(../images/ani_09.png) no-repeat right 150px top 20%;
    background-size: 384px;
    position: absolute;
    top: 0;
    animation: backgroundRight 3.5s ease-in-out infinite alternate-reverse, backgroundRight 4s ease-in-out infinite alternate-reverse;

     -webkit-animation: backgroundRight 3.5s ease-in-out infinite alternate-reverse, backgroundRight 4s ease-in-out infinite alternate-reverse
}

.animate_i04:before {
    width: 150px;
    height: 154px;
    background: url(../images/ani_08.png) no-repeat center;
    background-size: contain;
    right: 130px;
    top: 60px;


}

.animate_i04:after {
    width: 551px;
    height: 562px;
    background: url(../images/ani_10.png) no-repeat center;
    background-size: contain;
    right: -80px;
    bottom: 0px;


}

.animate_i01:before,
.animate_i02:before,
.animate_i03:before,
.animate_i04:before {
    animation: floatHorizontal 5s ease-in-out infinite alternate, floatVertical 4.5s ease-in-out infinite alternate;
    -webkit-animation: floatHorizontal 5s ease-in-out infinite alternate, floatVertical 4.5s ease-in-out infinite alternate
}

.animate_i01:after,
.animate_i04:after,
.animate_i03:after,
.animate_i02:after {
    animation: floatHorizontal 3.5s ease-in-out infinite alternate-reverse, floatVertical 4s ease-in-out infinite alternate-reverse;
    -webkit-animation: floatHorizontal 3.5s ease-in-out infinite alternate-reverse, floatVertical 4s ease-in-out infinite alternate-reverse
}

@-webkit-keyframes backgroundRight {
    0% {
        background-position: right 150px top 20%
    }

    50% {
        background-position: right 170px top 22%
    }

    100% {
        background-position: right 150px top 20%
    }
}

@keyframes backgroundRight {
    0% {
        background-position: right 150px top 20%
    }

    50% {
        background-position: right 170px top 22%
    }

    100% {
        background-position: right 150px top 20%
    }
}


@-webkit-keyframes backgroundLeft {
    0% {
        background-position: left -20px top 72%
    }

    50% {
        background-position: left 10px top 72%
    }

    100% {
        background-position: left -20px top 72%
    }
}

@keyframes backgroundLeft {
    0% {
        background-position: left -20px top 72%
    }

    50% {
        background-position: left 10px top 72%
    }

    100% {
        background-position: left -20px top 72%
    }
}

@-webkit-keyframes floatHorizontal {
    0% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes floatHorizontal {
    0% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes floatVertical {
    0% {
        margin-top: 4px;
    }

    50% {
        margin-top: -4px;
    }

    100% {
        margin-top: 4px;
    }
}

@keyframes floatVertical {
    0% {
        margin-top: 4px;
    }

    50% {
        margin-top: -4px;
    }

    100% {
        margin-top: 4px;
    }
}

/***********************/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@media only screen and (max-width: 640px) {

    .animate_i01,
    .animate_i02,
    [class *='grp_ico_'] {
        display: none
    }
}