@charset "utf-8";

/*

 * 17素材vip建站专区模块代码
 * 详尽信息请看官网：http://www.17sucai.com/pins/vip
 *
 * Copyright , 温州易站网络科技有限公司版权所有
 * 图片不能商用，代码可商用。

 * 请尊重原创，未经允许请勿转载。
 * 在保留版权的前提下可应用于个人或商业用途

*/

.anim-1,
.anim-2,
.anim-3,
.anim-4,
.anim-5,
.anim-6,
.anim-7,
.anim-8,
.anim-9,
.anim-10,
.anim-11,
.anim-12,
.anim-13,
.anim-14,
.anim-15,
.anim-16 {
    -webkit-transform: translateY(100px) translateX(0);
    -moz-transform: translateY(100px) translateX(0);
    transform: translateY(100px) translateX(0);
    /* opacity: 0;*/
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.anim-1 {
    -webkit-transition: transform .8s, opacity .8s;
    -moz-transition: transform .8s, opacity .8s;
    -o-transition: transform .8s, opacity .8s;
    transition: transform .8s, opacity .8s;
}

.anim-2 {
    -webkit-transition: transform 1s, opacity 1s;
    -moz-transition: transform 1s, opacity 1s;
    -o-transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
}

.anim-3 {
    -webkit-transition: transform 1.2s, opacity 1.2s;
    -moz-transition: transform 1.2s, opacity 1.2s;
    -o-transition: transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
}

.anim-4 {
    -webkit-transition: transform 1.4s, opacity 1.4s;
    -moz-transition: transform 1.4s, opacity 1.4s;
    -o-transition: transform 1.4s, opacity 1.4s;
    transition: transform 1.4s, opacity 1.4s;
}

.anim-5 {
    -webkit-transition: transform 1.6s, opacity 1.6s;
    -moz-transition: transform 1.6s, opacity 1.6s;
    -o-transition: transform 1.6s, opacity 1.6s;
    transition: transform 1.6s, opacity 1.6s;
}

.anim-6 {
    -webkit-transition: transform 1.8s, opacity 1.8s;
    -moz-transition: transform 1.8s, opacity 1.8s;
    -o-transition: transform 1.8s, opacity 1.8s;
    transition: transform 1.8s, opacity 1.8s;
}

.anim-7 {
    -webkit-transition: transform 2s, opacity 2s;
    -moz-transition: transform 2s, opacity 2s;
    -o-transition: transform 2s, opacity 2s;
    transition: transform 2s, opacity 2s;
}

.anim-8 {
    -webkit-transition: transform 2.2s, opacity 2.2s;
    -moz-transition: transform 2.2s, opacity 2.2s;
    -o-transition: transform 2.2s, opacity 2.2s;
    transition: transform 2.2s, opacity 2.2s;
}

.anim-9 {
    -webkit-transition: transform 2.4s, opacity 2.4s;
    -moz-transition: transform 2.4s, opacity 2.4s;
    -o-transition: transform 2.4s, opacity 2.4s;
    transition: transform 2.4s, opacity 2.4s;
}

.anim-10 {
    -webkit-transition: transform 2.6s, opacity 2.6s;
    -moz-transition: transform 2.6s, opacity 2.6s;
    -o-transition: transform 2.6s, opacity 2.6s;
    transition: transform 2.6s, opacity 2.6s;
}

.anim-11 {
    -webkit-transition: transform 2.8s, opacity 2.8s;
    -moz-transition: transform 2.8s, opacity 2.8s;
    -o-transition: transform 2.8s, opacity 2.8s;
    transition: transform 2.8s, opacity 2.8s;
}

.anim-12 {
    -webkit-transition: transform 3.0s, opacity 3.0s;
    -moz-transition: transform 3.0s, opacity 3.0s;
    -o-transition: transform 3.0s, opacity 3.0s;
    transition: transform 3.0s, opacity 3.0s;
}

.anim-13 {
    -webkit-transition: transform 3.2s, opacity 3.2s;
    -moz-transition: transform 3.2s, opacity 3.2s;
    -o-transition: transform 3.2s, opacity 3.2s;
    transition: transform 3.2s, opacity 3.2s;
}

.anim-14 {
    -webkit-transition: transform 3.4s, opacity 3.4s;
    -moz-transition: transform 3.4s, opacity 3.4s;
    -o-transition: transform 3.4s, opacity 3.4s;
    transition: transform 3.4s, opacity 3.2s;
}

.anim-15 {
    -webkit-transition: transform 3.6s, opacity 3.6s;
    -moz-transition: transform 3.6s, opacity 3.6s;
    -o-transition: transform 3.6s, opacity 3.6s;
    transition: transform 3.6s, opacity 3.6s;
}

.anim-16 {
    -webkit-transition: transform 3.8s, opacity 3.8s;
    -moz-transition: transform 3.8s, opacity 3.8s;
    -o-transition: transform 3.8s, opacity 3.8s;
    transition: transform 3.8s, opacity 3.8s;
}

.anim-show {
    -webkit-transform: translateY(0px) translateX(0);
    -moz-transform: translateY(0px) translateX(0);
    transform: translateY(0px) translateX(0);
    opacity: 1;
}

.anim-list .anim-1 {
    -webkit-transition: transform .5s, opacity .5s;
    -moz-transition: transform .5s, opacity .5s;
    -o-transition: transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s;
}

.anim-list .anim-2 {
    -webkit-transition: transform .6s, opacity .6s;
    -moz-transition: transform .6s, opacity .6s;
    -o-transition: transform .6s, opacity .6s;
    transition: transform .7s, opacity .7s;
}

.anim-show .roundimg1 {
    animation: mymove12 3.3s;
    -webkit-animation: mymove12 3.3s linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    filter: alpha(opacity=100);
    opacity: 1.0;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0s;
}

.rotateInDownRight {
    visibility: hidden;
    animation-name: none;
}

.anim-show .rotateInDownRight {
    visibility: visible;
    animation: rotateInDownRight 1s;
}

.rotateInDownLeft {
    visibility: hidden;
    animation-name: none;
}

.anim-show .rotateInDownLeft {
    visibility: visible;
    animation: rotateInDownLeft 1s;
}

@keyframes mymove8 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(0) translateX(-100px);
        -moz-transform: translateY(0) translateX(-100px);
        transform: translateY(0) translateX(-100px);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@-webkit-keyframes mymove8 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(0) translateX(-100px);
        -moz-transform: translateY(0) translateX(-100px);
        transform: translateY(0) translateX(-100px);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@keyframes mymove7 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(0) translateX(100px);
        -moz-transform: translateY(0) translateX(100px);
        transform: translateY(0) translateX(100px);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@-webkit-keyframes mymove7 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(0) translateX(100px);
        -moz-transform: translateY(0) translateX(100px);
        transform: translateY(0) translateX(100px);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@keyframes mymove10 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(-100px) translateX(0);
        -moz-transform: translateY(-100px) translateX(0);
        transform: translateY(-100px) translateX(0);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@-webkit-keyframes mymove10 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(-100px) translateX(0);
        -moz-transform: translateY(-100px) translateX(0);
        transform: translateY(-100px) translateX(0);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@keyframes mymove6 {
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(100px) translateX(0);
        -moz-transform: translateY(100px) translateX(0);
        transform: translateY(100px) translateX(0);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

@-webkit-keyframes mymove6 {
    /*from { filter:alpha(opacity=0);opacity:0; margin-bottom:-20%;}
    to {margin-bottom:3%;filter:alpha(opacity=1);opacity:1;}*/
    from {
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: translateY(100px) translateX(0);
        -moz-transform: translateY(100px) translateX(0);
        transform: translateY(100px) translateX(0);
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
    }
    to {
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transform: translateY(0px) translateX(0);
        -moz-transform: translateY(0px) translateX(0);
        transform: translateY(0px) translateX(0);
    }
}

/*.leftto{filter:alpha(opacity=0);opacity:0;}*/
.anim-show .leftto {
    animation: mymove8 0.5s;
    -webkit-animation: mymove8 0.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;

    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0.3s;
}

/*.rightto{filter:alpha(opacity=0);opacity:0;}*/
.anim-show .rightto {
    animation: mymove7 0.5s;
    -webkit-animation: mymove7 0.5s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;

    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0.3s;
}

.anim-show .danim-3 {
    animation: mymove10 0.8s;
    -webkit-animation: mymove10 0.8s linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0s;

    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0s;
}
