.butterfly_content{
    position: absolute;
    display: inline-block;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    z-index: 5;
    overflow: hidden;
}
.butterfly {
    position: absolute;
    margin-top: 8%;
    right:25%;
    bottom:45%;
    width: 400px;
    transform: rotate(-20deg);
}
.butterfly.second_type {
    position: relative;
    margin-top: 8%;
    width: 400px;
    left: 15%;
    top:5%;
}

.butterfly > div {
    position: absolute;
}

.butterfly img {
    width: 100%;
}

.leftwing {
    animation: flap-l 4s cubic-bezier(.08, 1.47, .65, -0.68) infinite;
}

.rightwing {
    animation: flap-r 4s cubic-bezier(.08, 1.47, .65, -0.98) infinite;
}

.leftwing_second {
    animation: flap-ls 4s cubic-bezier(.08, 1.47, .65, -0.68) infinite;
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s; /* Safari 和 Chrome */
}

.rightwing_second {
    animation: flap-rs 4s cubic-bezier(.08, 1.47, .65, -0.98) infinite;
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s; /* Safari 和 Chrome */
}
.leftwing_third {
    animation: flap-ls2 5s cubic-bezier(.08, 1.47, .65, -0.68) infinite;
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s; /* Safari 和 Chrome */
}

.rightwing_third {
    animation: flap-rs2 5s cubic-bezier(.08, 1.47, .65, -0.98) infinite;
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s; /* Safari 和 Chrome */
}

.leftwing_4 {
    animation: flap-ls4 4s cubic-bezier(.08, 1.47, .65, -0.68) infinite;
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s; /* Safari 和 Chrome */
}

.rightwing_4 {
    animation: flap-rs4 4s cubic-bezier(.08, 1.47, .65, -0.98) infinite;
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s; /* Safari 和 Chrome */
}

.leftwing,
.rightwing {
    z-index: 1;
}

@keyframes flap-l {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateX(45deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes flap-r {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateX(-45deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes flap-ls {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateX(45deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes flap-rs {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(-45deg);
    }
    100% {
        transform: rotateY(0);
    }
}
@keyframes flap-ls2 {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateX(-45deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes flap-rs2 {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateX(30deg);
    }
    100% {
        transform: rotateY(0);
    }
}


@keyframes flap-ls4 {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(27deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes flap-rs4 {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(-27deg);
    }
    100% {
        transform: rotateY(0);
    }
}


.butterfly_normal_one{
    position: absolute;
    width:145px;
    top:0px;
    right:18%;
}
.butterfly_normal_two{
    position: absolute;
    width:132px;
    bottom:26%;
    left:31%;
}
@media screen and (max-width: 767px) {
    
}