@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;
}

/* page animation  */

.ani-view {
    -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)
    }
}

.ani-view.fade-in-down{
    opacity:0;
    opacity:1\0/ie9;
    
    -webkit-transform:translatey(20px);
    -moz-transform:translatey(20px);
    -o-transform:translatey(20px);
    transform:translatey(20px);
    -ms-transform:translatey(0)\0/ie9;
}
.ani-view.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)
    }
}
.ani-view.fade-in-left{

    opacity:0;
    opacity:1\0/ie9;
    

    -webkit-transform:translatex(-100px);
    -moz-transform:translatex(-100px);
    -o-transform:translatex(-100px);
    transform:translatex(-100px);
    -ms-transform:translatex(0)\0/ie9;
}
.ani-view.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)
    }
}
.ani-view.fade-in-right{
    opacity:0;
    opacity:1\0/ie9;
    
    -webkit-transform:translatex(100px);
    -moz-transform:translatex(100px);
    -o-transform:translatex(100px);
    transform:translatex(100px);
    -ms-transform:translatex(0)\0/ie9;
}
.ani-view.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)
    }
}

.ani-view.indcon2-fade-in-down{
    opacity:0;
    opacity:1\0/ie9;
    
    -webkit-transform:translatey(167px);
    -moz-transform:translatey(167px);
    -o-transform:translatey(167px);
    transform:translatey(167px);
    -ms-transform:translatey(0)\0/ie9;
}
.ani-view.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)
    }
}

.ani-view.indcon2-fade-in-up{
    opacity:0;
    opacity:1\0/ie9;
    
    -webkit-transform:translatey(-167px);
    -moz-transform:translatey(-167px);
    -o-transform:translatey(-167px);
    transform:translatey(-167px);
    -ms-transform:translatey(0)\0/ie9;
}
.ani-view.indcon2fadeinup {
	-webkit-animation-name:indcon2fadeinup;
    -moz-animation-name:indcon2fadeinup;
    -o-animation-name:indcon2fadeinup;
    animation-name:indcon2fadeinup;
}