@charset "utf-8";
/*  css animation  */
.trans {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.c-animate {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}





@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.c-animate.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}
@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.c-animate.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeInRight {
    0% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.c-animate.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}


/*首页第2屏载入特效*/
@-webkit-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@-moz-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}
@-ms-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}
@-o-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}
@keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(167px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.c-animate.indCon2fadeInDown {
    -webkit-animation-name: indCon2fadeInDown;
    -moz-animation-name: indCon2fadeInDown;
    -o-animation-name: indCon2fadeInDown;
    animation-name: indCon2fadeInDown;
}

@-webkit-keyframes indCon2fadeInUp {

    0% {
        opacity: 0;
        -webkit-transform: translateY(-167px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}
@-ms-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}
@-o-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}
@keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.c-animate.indCon2fadeInUp {
    -webkit-animation-name: indCon2fadeInUp;
    -moz-animation-name: indCon2fadeInUp;
    -o-animation-name: indCon2fadeInUp;
    animation-name: indCon2fadeInUp;
}