/*  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;

}

/*分页*/
.pagination-wrapper{ 
  	margin: 40px 0 40px 0;
  	text-align: center;
} 
.pagination{  
  	font-size: 0;
} 
.pagination li{
	display: inline-block;
	vertical-align: top;
}
.pagination li a{ 
  	display: inline-block;
  	height: 32px; 
  	line-height: 32px; 
  	margin-right: 8px; 
  	padding: 0 12px; 
  	font-size: 24px;
  	color: #0f0b09; 
  	text-decoration: none; 
  	box-sizing: border-box;
  	transition: all .3s;
	opacity: .3;
} 
.pagination li:last-child{
	margin-right: 0;
}
.pagination li a:hover{ 
  	color:#0f0b09; opacity: 1;
} 
.pagination li.active a { 
  	color: #0f0b09;
} 
.pagination .pageinfo{
	display: inline-block;
  	height: 32px; 
  	line-height: 32px; 
  	padding: 0 12px; 
  	font-size: 14px; 
  	color: #0f0b09; 
  	box-sizing: border-box;
}
/*分页*/