.dragon_decor {
    position: fixed;
    z-index: 9999;
    left: 18%;
    width: 64%;
    bottom: -800px;
    transition: all 0.5s ease;
}

.dragon_decor .dg_img {
    width: 100%;
}

.dg_left_dl01 {
    position: absolute;
    left: 15.8%;
    width: 7.7%;
    bottom: 0;
    -webkit-transform-origin: 11.5% 5%;
    transform-origin: 11.5% 5%;
    animation: swing 4s infinite ease-in-out;
}

.dg_left_dl02 {
    position: absolute;
    left: 21%;
    width: 4.5%;
    bottom: 21.4%;
    -webkit-transform-origin: 12.3% 4.5%;
    transform-origin: 12.3% 4.5%;
    animation: swing 4s infinite ease-in-out;
}

.dg_right_dl {
    position: absolute;
    bottom: 10%;
    width: 5%;
    right: 15%;
    animation: flotage 2s ease-in-out infinite alternate
}

.dg_center {
    position: absolute;
    width: 19.8%;
    left: 40.8%;
    bottom: -18%;
}

.dg_center .dg_body {
    width: 100%;
}

.dg_center .dg_head {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    animation: dgfly 3s linear infinite
}

.dg_firework01 {
    position: absolute;
    width: 2%;
    right: 13%;
    bottom: 6%;
    transform: scale(0);
    animation: fireworks 2.5s 2s infinite;
}

.dg_firework02 {
    position: absolute;
    width: 4.8%;
    right: 8.2%;
    bottom: 6%;
    transform: scale(0);
    animation: fireworks 3s 2s infinite;
}

.dragon_decor .dg_del {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../images/dragon_del.png) center center no-repeat;
    background-size: 100% auto;
    right: 6%;
    bottom: 45%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
}

.dragon_decor .dg_del_active {
    opacity: 1;
    visibility: visible;
}

.dragon_active {
    bottom: 0;
}

@-webkit-keyframes flotage {
    from {
        -webkit-transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-15px)
    }
}

@keyframes flotage {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-15px)
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(30deg)
    }

    50% {
        -webkit-transform: rotate(10deg)
    }

    100% {
        -webkit-transform: rotate(30deg)
    }
}

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

    50% {
        transform: rotate(10deg)
    }

    100% {
        transform: rotate(30deg)
    }
}

@-webkit-keyframes dgfly {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

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

    50% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes fireworks {
    0% {
        -webkit-transform: scale(0);
    }

    70% {
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}

@keyframes fireworks {
    0% {
        transform: scale(0);
    }

    25% {
        opacity: 1;
    }

    70% {
        transform: scale(1);
    }

    100% {
        opacity: 0;
    }
}