/*fadeInDown fadeOutUp*/
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate3d(0,-20px,0)
    }
}

.fadeOutUp {
    animation-name: fadeOutUp
}

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


/*动画 - 图片放大*/
.blowUp {
    transition: all .5s ease-in-out;
}

    .blowUp:hover {
        transform: scale(1.3);
    }

/*---------------*/
/***** Ruby *****/
/*---------------*/
.effect-ruby img {
    transition: transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.effect-ruby:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}


.effect-ruby {
    background-color: #17819c;
}



    /*.effect-ruby .ctitle {
        margin-top: 20%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }

    .effect-ruby h2 {
        margin: 1em 0 0;
        padding: 3em;
        border: 1px solid #fff;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0) scale(1.1);
        transform: translate3d(0,20px,0) scale(1.1);
    }

    .effect-ruby:hover .ctitle {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .effect-ruby:hover h2 {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
    }*/