@charset "utf-8";
html, body {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'PingFang', 'Helvetica Neue', 'Roboto', "microsoft yahei";
}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
img{ border:0;}
ol,ul{list-style:none;}
iframe{ display:block;}
a{ font-family:"Microsoft YaHei",\5b8b\4f53,Arial, Helvetica, sans-serif; text-decoration:none;outline:none;}
a:hover{ text-decoration:none;}
.clearfix:after {content:"";display:block;height:0;clear:both;} 
.clearfix {zoom:1;}


.snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/*导航*/
.pp-easing {
	-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-ms-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
	/* custom */
	-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	-ms-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
	/* custom */
}
.page-nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 105px;
    background-color: #077adb;
    background-size: cover;
    z-index: 100;
}
.page-nav.hide {
	-ms-transform: translate(0, -100%);
	-moz-transform: translate(0, -100%);
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
}
.page-nav .top {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
.page-nav .logo {
    position: absolute;
    top: 5px;
    left: 14px;
    width: 88px;
    height: 88px;
    background: url(../images/zxlogo2.png) no-repeat center;
    background-size: cover;
    z-index: 20;
}
.page-nav .page-nav-list {
    position: relative;
    padding-left: 138px;
    width: 1080px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.page-nav .page-nav-list li {
    float: left;
    width: 120px;
    height: 100%;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.page-nav .page-nav-list li:hover{
	background: #e83962;
}
.page-nav .page-nav-list li.active{
	background: #e83962;
}
.page-nav .page-nav-list li .text-zh {
    padding-top: 36px;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
}
.page-nav .page-nav-list li .text-en {
    font-size: 10px;
    line-height: 24px;
    color: #68a0e4;
}
/*左右箭头*/
.m-pagepiling-page .prev.hide {
	opacity: 0;
}

.m-pagepiling-page .next.hide {
	opacity: 0;
}
.changeBtn {
    width: 124;
    height: 124;
    z-index: 120;
    cursor: pointer;
}
.prev {
    position: absolute;
    top: 450px;
    left: 50%;
    -webkit-transform: translate(-580px, 0);
    -moz-transform: translate(-580px, 0);
    -ms-transform: translate(-580px, 0);
    transform: translate(-580px, 0);
    background: url(../images/prev_icon.png) no-repeat center;
    background-size: cover;
}
.next {
	position: absolute;
	top: 55px;



    -webkit-transform: translate(543px, 0);
    -moz-transform: translate(543px, 0);
    -ms-transform: translate(543px, 0);
	transform: translate(543px, 0);
	background: url(../images/zxlogo.png) no-repeat center;
	background-size: cover;
	text-align: center;
	line-height: 75px;
	left: 186px;
}
/*总div*/
.m-pagepiling-page {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 20;
    background: url(../images/main_bg.jpg) no-repeat center; 
}
.m-pagepiling-page .section {
	opacity: 0;
}

.m-pagepiling-page .section.active {
	opacity: 1;
}
/*首页*/
.m-page-index {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../images/main_bg.jpg) no-repeat center; 
    background-size: cover;
    -webkit-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    /*display: none;*/
}
.pp-tableCell {
    width: 100%;
    height: 100%;
}
.m-page-index .wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 1296px;
    margin: 0 auto;
    height: 705px;
}
.m-page-index .wrap .zxlogo {
    position: absolute;
    left: 50px;
    top: 0;
	z-index: 999;
    width: 100%;
    height: 124px;
}
.m-page-index .zxlogo a {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	height: 66;
	width: 373;
	margin-left: -142px;
	cursor: pointer;
	line-height: 75px;
	background: url(../images/sj.png) center no-repeat;
}
.mouse-tip {
    position: absolute;
    bottom: -42px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 170px;
    height: 42px;
    background: url(../images/mouse_tip.png) no-repeat center;
    background-size: cover;
    z-index: 30;
}
.m-page-index .title {
    position: absolute;
    left: 50%;
    top: 138px;
    width: 166px;
    height: 356px;
    margin-left: -64px;
    background: url(../images/title.png) center no-repeat;
    background-size: cover;
}
/*.m-page-index .wrap.hide .title {
    -moz-animation: 1s .2s bounceIn, br 4s 1.2s infinite;
    -ms-animation: 1s .2s bounceIn, br 4s 1.2s infinite;
    -webkit-animation: 1s .2s bounceIn, br 4s 1.2s infinite;
    animation: 1s .2s bounceIn, br 4s 1.2s infinite;
}*/

@-webkit-keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@-ms-keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes br {
	0% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
	50% {
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	100% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
}

@-ms-keyframes br {
	0% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
	50% {
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	100% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
}

@-moz-keyframes br {
	0% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
	50% {
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	100% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
}

@keyframes br {
	0% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
	50% {
		transform: translate3d(0, 0, 0) scale(1.1);
	}
	100% {
		transform: translate3d(0.1rem, 0.1rem, 0) scale(1);
	}
}
.m-page-index .nav-list {
    position: relative;
}
.m-page-index .nav-list li {
    position: absolute;
    background-size: cover;
    cursor: pointer;
}
.m-page-index .nav-list .nav-info01 {
    left: 230px;
    top: 0;
    width: 219px;
    height: 219px;
    background: url(../images/tianxu_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info01:hover{
    background: url(../images/tianxu_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info01 .man {
    /* display: none; */
    position: absolute;
    left: -13px;
    top: -28px;
    width: 108px;
    height: 130px;
    background: url(../images/tianxu_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info02 {
    right: 230px;
    top: 0;
    width: 219px;
    height: 219px;
    background: url(../images/danren_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info02 .man {
    position: absolute;
    left: 106px;
    top: -52px;
    width: 108px;
    height: 125px;
    background: url(../images/danren_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info02:hover{
    background: url(../images/danren_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info03 {
    left: 12px;
    top: 66px;
    width: 314px;
    height: 314px;
    background: url(../images/shishi_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info03 .man {
    position: absolute;
    left: -6px;
    top: -12px;
    width: 102px;
    height: 128px;
    background: url(../images/shishi_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info03:hover{
    background: url(../images/shishi_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info04 {
    right: 12px;
    top: 66px;
    width: 314px;
    height: 314px;
    background: url(../images/quanxin_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info04 .man {
    /* display: none; */
    position: absolute;
    left: 178px;
    top: 0px;
    width: 116px;
    height: 115px;
    background: url(../images/quanxin_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info04:hover{
    background: url(../images/quanxin_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info05 {
    left: 198px;
    top: 228px;
    width: 280px;
    height: 280px;
    background: url(../images/tiandao_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info05:hover{
    background: url(../images/tiandao_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info06 {
    right: 198px;
    top: 228px;
    width: 280px;
    height: 280px;
    background: url(../images/xianfu_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info06:hover{
    background: url(../images/xianfu_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info07 {
    left: 90px;
    top: 374px;
    width: 202px;
    height: 202px;
    background: url(../images/zhenling_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info07 .man {
    /* display: none; */
    position: absolute;
    left: -6px;
    top: 0px;
    width: 84px;
    height: 92px;
    background: url(../images/zhenling_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info07:hover{
    background: url(../images/zhenling_index_h.png) no-repeat;
}
.m-page-index .nav-list .nav-info08 {
    right: 90px;
    top: 374px;
    width: 202px;
    height: 202px;
    background: url(../images/bingxue_index.png) no-repeat;
}
.m-page-index .nav-list .nav-info08 .man {
    /* display: none; */
    position: absolute;
    left: 128px;
    top: 4px;
    width: 86px;
    height: 116px;
    background: url(../images/bingxue_indexm.png) no-repeat;
    background-size: cover;
}
.m-page-index .nav-list .nav-info08:hover{
    background: url(../images/bingxue_index_h.png) no-repeat;
}
.m-page-index .nav-list li .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.m-page-index .link_box{
	width: 716px;
	height: 182px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -358px;
}
.m-page-index .link_box .enter_btn{
	display: block;
	width: 59px;
	height: 59px;
	background: url(../images/enter_btn.png) no-repeat;
	position: absolute;
	top:66px;
	left: 0;
}
.m-page-index .link_box .enter_btn:hover{
    background: url(../images/enter_btn_h.png) no-repeat;
}
.m-page-index .link_box .down_btn{
	display: block;
	width: 59px;
	height: 59px;
	background: url(../images/down_btn.png) no-repeat;
	position: absolute;
	top:70px;
	right: 0;
}
.m-page-index .link_box .down_btn .erwei{
    width: 110px;
    height: 110px;
    background: url(../images/erwei.png) no-repeat;
    position: absolute;
    bottom: -116px;
    left: 50%;
    margin-left:-52px;
    display: none;
}
.m-page-index .link_box .down_btn .erwei p{
    width: 150px;
    font-size: 12px;
    color: #000;
    position: absolute;
    bottom: -20px;
    left: -15px;
}
.m-page-index .link_box .down_btn:hover{
    background: url(../images/down_btn_h.png) no-repeat;
}
.m-page-index .link_box .xinfu_link{
	width: 178px;
	height: 178px;
	position: absolute;
	top: 0;
	left: 81px;
	background: url(../images/xinfu_link.png) no-repeat;
}
.m-page-index .link_box .xinfu_link:hover{
    background: url(../images/xinfu_link_h.png) no-repeat;
}
.m-page-index .link_box .yuanju_link{
	width: 178px;
	height: 178px;
	position: absolute;
	top: 0;
	left: 269px;
	background: url(../images/yuanju_link.png) no-repeat;
}
.m-page-index .link_box .yuanju_link:hover{
    background: url(../images/yuanju_link_h.png) no-repeat;
}
.m-page-index .link_box .gift_link{
	width: 178px;
	height: 178px;
	position: absolute;
	top: 0;
	left: 457px;
	background: url(../images/gift_link.png) no-repeat;
}
.m-page-index .link_box .gift_link:hover{
    background: url(../images/gift_link_h.png) no-repeat;
}
.m-page-index .wrap .sidai{
	width: 76px;
	height: 57px;
	background: url(../images/sidai.png) no-repeat;
	position: absolute;
	top: 0;
	left: 84px;
    -webkit-animation: bl 3s linear infinite;
    animation: bl 3s linear infinite;
}
@keyframes tl {
    0% {
        transform: translate3d(-0.1rem, -0.1rem, 0) scale(1);
    }
    50% {
        transform: translate3d(0, 0, 0) scale(1.1);
    }
    100% {
        transform: translate3d(-0.1rem, -0.1rem, 0) scale(1);
    }
}
@-webkit-keyframes bl {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0.1rem, -0.1rem, 0) scale(1.3);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.m-page-index .wrap .xuehua{
	width: 128px;
	height: 128px;
	background: url(../images/xuehua.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: -128px;
    -webkit-animation: bl 3s linear infinite;
    animation: bl 3s linear infinite;
}
.m-page-index .wrap .libao{
	width: 74px;
	height: 74px;
	background: url(../images/libao.png) no-repeat;
	position: absolute;
	top: 76px;
	right: -44px;
    -webkit-animation: bl 3s linear infinite;
    animation: bl 3s linear infinite;
}
.m-page-index .wrap .quan{
	width: 66px;
	height: 50px;
	background: url(../images/quan.png) no-repeat;
	position: absolute;
	top: 366px;
	right: -34px;
    -webkit-animation: bl 3s linear infinite;
    animation: bl 3s linear infinite;
}
.m-page-index .wrap .deng{
	width: 27px;
	height: 72px;
	background: url(../images/deng.png) no-repeat;
	position: absolute;
	top: 222px;
	right: 0px;
}
/*内页01*/
.m-page-tianxu {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: auto;
    background: url(../images/page01.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}

.article_con{
    width: 854px;
    height: 670px;
    padding: 20px 0;
    position: absolute;
    top:146px;
    left: 50%;
    margin-left: -427px; 
}
.article_con .article{
    width: 767px;
    padding-bottom: 20px;
}
.article_con .article h3, .article_con .article h4{
    font-size: 20px;
    color: #0e76ca;
    margin-bottom: 10px;
}
.article_con .article p{
    width: 767px;
    font-size: 16px;
    line-height: 24px;
    color: #0e76ca;
}
.article_con .article img{
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.article_con .article .check_box{
    width: 434px;
    margin: 0 auto;
    margin-top: 30px;
}
.article_con .article .check_box a{
    display: inline-block;
    width: 198px;
    height:28px;
    line-height: 28px;
    padding: 3px;
    background: #e83962;
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin: 0 5px 0 5px;
}
.article_con .article .check_btn{
    display: block;
    width: 100px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #e83962;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 30px;
}
/*内页02*/
.m-page-danren {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page02.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页03*/
.m-page-shishi {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page03.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页04*/
.m-page-quanxin {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page04.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页05*/
.m-page-tiandao {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page05.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页06*/
.m-page-xianfu {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page06.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页07*/
.m-page-zhenling {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page07.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
/*内页08*/
.m-page-bingxue {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: url(../images/page08.png) no-repeat center; 
    background-size: cover;
    z-index: 99;
    display: none;
}
@keyframes zoomIn1 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut1 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
    }
}

@keyframes zoomIn2 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut2 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
    }
}

@keyframes zoomIn3 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut3 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
    }
}

@keyframes zoomIn4 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut4 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, 100%, 0);
    }
}

@keyframes zoomIn7 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut7 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(-100%, -100%, 0);
    }
}


@keyframes zoomIn8 {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomOut8 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -moz-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        -ms-transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
        transform: scale3d(.3, .3, .3) translate3d(100%, -100%, 0);
    }
}

.zoomIn1 {
    -webkit-animation: zoomIn1 .5s ease both;
    -moz-animation: zoomIn1 .5s ease both;
    -ms-animation: zoomIn1 .5s ease both;
    animation: zoomIn1 .2s ease both;
}

.zoomOut1 {
    animation: bl 3s linear infinite;
}

.zoomIn2 {
    -webkit-animation: zoomIn2 .5s ease both;
    -moz-animation: zoomIn2 .5s ease both;
    -ms-animation: zoomIn2 .5s ease both;
    animation: zoomIn2 .5s ease both;
}

.zoomOut2 {
    animation: bl 3s linear infinite;
}

.zoomIn3 {
    -webkit-animation: zoomIn3 .5s ease both;
    -moz-animation: zoomIn3 .5s ease both;
    -ms-animation: zoomIn3 .5s ease both;
    animation: zoomIn3 .5s ease both;
}

.zoomOut3 {
    animation: bl 3s linear infinite;
}

.zoomIn4 {
    -webkit-animation: zoomIn4 .5s ease both;
    -moz-animation: zoomIn4 .5s ease both;
    -ms-animation: zoomIn4 .5s ease both;
    animation: zoomIn4 .5s ease both;
}

.zoomOut4 {
    animation: bl 3s linear infinite;
}

.zoomIn7 {
    -webkit-animation: zoomIn7 .5s ease both;
    -moz-animation: zoomIn7 .5s ease both;
    -ms-animation: zoomIn7 .5s ease both;
    animation: zoomIn7 .5s ease both;
}

.zoomOut7 {
    animation: bl 3s linear infinite;
}

.zoomIn8 {
    -webkit-animation: zoomIn8 .5s ease both;
    -moz-animation: zoomIn8 .5s ease both;
    -ms-animation: zoomIn8 .5s ease both;
    animation: zoomIn8 .5s ease both;
}

.zoomOut8 {
    animation: bl 3s linear infinite;
}