ma@charset "utf-8";
/* CSS Document */
/*公共样式*/
a.mod_btn1{display:inline-block; background:#309aeb; padding:0 25px; height:34px; line-height:34px; text-align:center; border:1px solid #3079ed; color:#fff; font-size:16px; text-decoration:none; border-radius:3px;}
a.mod_btn1:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.mod_btn2{display:inline-block; background:#d8edff; padding:0 25px; height:34px; line-height:34px; text-align:center; border:1px solid #309aeb; color:#288add; font-size:16px; text-decoration:none; border-radius:3px; }
a.mod_btn2:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.mod_btn3{display:inline-block; background:#fff;padding:0 25px; height:34px; line-height:34px; text-align:center; border:1px solid #0560cd; color:#0560cd; font-size:16px; text-decoration:none; border-radius:3px;margin-right:28px; }
a.mod_btn3:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.bigbtn{ height:48px; line-height:48px; font-size:20px; padding:0 55px;}
.big_inp{ width:540px; display:inline-block; height:50px; line-height:50px;background:#fff; color:#555;border:2px solid #d5d5d5;border-radius:3px; padding:0 10px; font-size:18px;}
.big_area{width:540px; height:135px; padding:5px 10px; border-radius: 3px;  font-size:18px; border:2px solid #d5d5d5;}
input[type="text"].big_inp:focus, input[type="password"].big_inp:focus,.big_area:focus{ border: 2px solid #309aeb;}
.gray_inp{ background:#eee;}
.error_inp{ background:#faecec; border:2px solid #fa1212;}

/*公共表格样式1*/
.modTable table{border-collapse: collapse;color: #555;text-align: center;}
.modTable td,.modTable th{border: 1px solid #e9e9e9;height: 40px;}
.modTable th{background: #fbfbfb; font-weight:normal;}
.modTable td{ font-size:12px; padding:0 5px;}
.modTable .t_btn a{ margin:0 5px;}
.modTable td.yellow{ background:#fffbf0; color:#555;}
.modTable td.red{ background:#fff7f7;color:#555;}
.modTable td.green{ background:#e1faf5;color:#555;}


/*首页*/
.u-homeName{ font-size:28px; letter-spacing:2px;text-align:center; font-weight:bold; color:#222; line-height:60px; padding:30px 0px 40px 0px;}
a.u-blue-btn{ padding:0px 55px;  font-size:26px; line-height:57px; color:#fff; background:#2a48ae; text-decoration:none; border-radius:3px; display:inline-block;}
a.u-blue-btn:hover{ background:#01259f;}



/*产品服务*/
.m-porService{ background:#f7f7f7;}
.m-porService dl{ float:left; width:600px;}
.m-porService dl.dl2{ padding-left:55px; }
.m-porService dt{ float:left; width:230px; margin-right:-276px;}
.m-porService dd{ margin-left:276px; overflow:hidden; zoom:1;}
.m-porService .porService_dl ul{ margin-top:-30px; margin-right:-65px;}
.m-porService .porService_dl li{ float:left; width:95px; text-align:center; margin-right:65px; margin-top:30px;}
.m-porService .porService_dl li a{ display:block;width:95px; color:#222; text-decoration:none;}
.m-porService .porService_dl li a:hover{ color:#269bff;}
.m-porService .porService_dl li a .photo { display:block; width:95px; height:67px; background:url(../img/seveice_img.png) no-repeat;}
.m-porService .porService_dl li a.aimg2 .photo{ background-position:-96px 0;}
.m-porService .porService_dl li a.aimg3 .photo{ background-position:-192px 0;}
.m-porService .porService_dl li a.aimg4 .photo{ background-position:-288px 0;}
.m-porService .porService_dl dl.dl2 li a.aimg1 .photo{background-position:-384px 0;}
.m-porService .porService_dl dl.dl2 li a.aimg2 .photo{background-position:-480px 0;}
.m-porService .porService_dl dl.dl2 li a.aimg3 .photo{background-position:-576px 0;}
.m-porService .porService_dl dl.dl2 li a.aimg4 .photo{background-position:-672px 0;}

.m-porService .porService_dl li a:hover .photo{ background-position:0 -68px;}
.m-porService .porService_dl li a.aimg2:hover .photo{ background-position:-96px -68px;}
.m-porService .porService_dl li a.aimg3:hover .photo{ background-position:-192px -68px;}
.m-porService .porService_dl li a.aimg4:hover .photo{background-position:-288px -68px;}
.m-porService .porService_dl dl.dl2 li a.aimg1:hover .photo{ background-position:-384px -68px;}
.m-porService .porService_dl dl.dl2 li a.aimg2:hover .photo{ background-position:-480px -68px;}
.m-porService .porService_dl dl.dl2 li a.aimg3:hover .photo{ background-position:-576px -68px;}
.m-porService .porService_dl dl.dl2 li a.aimg4:hover .photo{ background-position:-672px -68px;}
.m-porService .porService_dl li .name{ margin-top:14px; line-height:14px; font-size:15px;}

.m-porService .tab_tit{ padding:70px 0 20px 150px;}
.m-porService .tab_tit ul li{ float:left;margin:0 40px; position:relative;}
.m-porService .tab_tit ul li.on a{background:#01259f;}
.m-porService .tab_tit ul li.on span{ position:absolute; bottom:-10px; left:50%; margin-left:-10px; width:21px; height:10px; background:url(../img/index_tab_titbg.png) no-repeat; display:block;}

.m-porService .tab_cont{ background:url(../img/index_tab_contbg.gif) repeat-x; height:58px; line-height:58px;border-top:1px solid #e7e7e7; border-bottom:1px solid #e0e0e0; display:none;}
.m-porService .tab_cont ul li{ float:left; width:300px;height:58px;color:#555555; font-size:20px; display:block;height:58px; text-align:center;}
.m-porService .tab_cont ul li a{ color:#555555;}
.m-porService .tab_cont ul li  i{ display:inline-block; vertical-align:middle;background:url(../img/index_tab_icon.png) no-repeat;  width:28px; height:30px;}
.m-porService .tab_cont ul li  span{ display:inline-block; vertical-align: middle; padding-left:20px;}
.m-porService .tab_cont ul li  i.li_icon1{ background-position:0 -55px;}
.m-porService .tab_cont ul li  i.li_icon2{ background-position:-52px -55px; }
.m-porService .tab_cont ul li  i.li_icon3{ background-position:-106px -56px; }
.m-porService .tab_cont ul li  i.li_icon4{ background-position:-157px -55px; }

.m-porService .tab_cont1{ display:block;}
.m-porService .tab_cont2 ul li{  width:400px;}
.m-porService .tab_cont2 ul li i{ width:34px; height:32px;}
.m-porService .tab_cont2 ul li i.li_icon1{ background-position:-210px -54px;}
.m-porService .tab_cont2 ul li i.li_icon2{ background-position:-273px -54px; }
.m-porService .tab_cont2 ul li i.li_icon3{ background-position:-335px -54px; }

.m-porService .tab_cont3 ul li{  width:400px;}
.m-porService .tab_cont3 ul li i{ width:34px; height:32px;}
.m-porService .tab_cont3 ul li i.li_icon1{ background-position:-210px -54px;}
.m-porService .tab_cont3 ul li i.li_icon2{ background-position:-273px -54px; }
.m-porService .tab_cont3 ul li i.li_icon3{ background-position:-393px -54px; }

.m-porService #wql_animation01 .porService_dl li a.aimg1 .photo{ background-position:-554px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg1:hover .photo{ background-position:-554px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg2 .photo{ background-position:-649px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg2:hover .photo{ background-position:-649px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg3 .photo{ background-position:-744px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg3:hover .photo{ background-position:-744px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg4 .photo{ background-position:-839px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg4:hover .photo{ background-position:-839px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg5 .photo{ background-position:-554px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg5:hover .photo{ background-position:-554px -202px;}
.m-porService #wql_animation01 .porService_dl li a.aimg6 .photo{ background-position:-649px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg6:hover .photo{ background-position:-649px -202px;}
.m-porService #wql_animation01 .porService_dl li a.aimg7 .photo{ background-position:-744px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg7:hover .photo{ background-position:-744px -202px;}
.m-porService #wql_animation01 .porService_dl li a.aimg8 .photo{ background-position:-839px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg8:hover .photo{ background-position:-839px -202px;}


.m-porService #wql_animation01 .porService_dl li a.aimg9 .photo{ background-position:22px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg9:hover .photo{ background-position:22px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg10 .photo{ background-position:-73px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg10:hover .photo{ background-position:-73px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg11 .photo{ background-position:-168px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg11:hover .photo{ background-position:-168px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg12 .photo{ background-position:-263px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg12:hover .photo{ background-position:-263px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg13 .photo{ background-position:-358px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg13:hover .photo{ background-position:-358px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg14 .photo{ background-position:-453px 3px;}
.m-porService #wql_animation01 .porService_dl li a.aimg14:hover .photo{ background-position:-453px -65px;}
.m-porService #wql_animation01 .porService_dl li a.aimg15 .photo{ background-position:22px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg15:hover .photo{ background-position:22px -200px;}
.m-porService #wql_animation01 .porService_dl li a.aimg16 .photo{ background-position:-73px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg16:hover .photo{ background-position:-73px -200px;}
.m-porService #wql_animation01 .porService_dl li a.aimg17 .photo{ background-position:-168px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg17:hover .photo{ background-position:-168px -200px;}
.m-porService #wql_animation01 .porService_dl li a.aimg18 .photo{ background-position:-263px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg18:hover .photo{ background-position:-263px -200px;}
.m-porService #wql_animation01 .porService_dl li a.aimg19 .photo{ background-position:-358px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg19:hover .photo{ background-position:-358px -200px;}
.m-porService #wql_animation01 .porService_dl li a.aimg20 .photo{ background-position:-453px -134px;}
.m-porService #wql_animation01 .porService_dl li a.aimg20:hover .photo{ background-position:-453px -200px;}
@charset "utf-8";
/* public style 20141204 */
/*reset*/
body{color:#555;font-size:12px;line-height:1.8em;font-family:"microsoft yahei",Tahoma,Helvetica;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,div,tr,td{margin:0;padding:0;}
img{border:0; vertical-align:middle;}
em,i{font-style:normal;}
ol,ul,li{ list-style:none;}
h1,h2,h3,h4,h5{color:#555;}
label{vertical-align:middle}
a,a:visited{ text-decoration:none;}
a:hover,a:active{ }
a{color:#49a7fd;}


.fl{float: left;}
.fr{float: right;}

.dis_none{display:none}
.t_r{text-align:right}
.t_c{text-align:center}
.t_l{text-align:left}
/* font-size*/
.f10{font-size:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f24{font-size:24px;}
.f30{font-size:30px;}

/* m-left-top-right-bottom  */
.mg5{ margin:5px}
.mg10{ margin:10px}
.mg15{ margin:15px}
.mg20{ margin:20px}
.mg25{ margin:25px}
.mg30{ margin:30px}
.mg35{ margin:35px}
.mg40{ margin:40px}
/* m-left  */
.mgl5{ margin-left:5px}
.mgl10{margin-left:10px;}
.mgl15{margin-left:15px}
.mgl20{margin-left:20px;}
.mgl25{margin-left:25px}
.mgl30{margin-left:30px;}
/* m-right  */
.mgr5{ margin-right:5px}
.mgr10{margin-right:10px;}
.mgr15{margin-right:15px;}
.mgr20{margin-right:20px;}
.mgr25{margin-right:25px;}
.mgr30{margin-right:30px;}
/* m-top  */
.mgt5{margin-top:5px;}
.mgt10{margin-top:10px;}
.mgt15{margin-top:15px;}
.mgt20{margin-top:20px;}
.mgt25{margin-top:25px;}
.mgt30{margin-top:30px;}
/* m-bottom  */
.mgb10{margin-bottom:10px;}
.mgb15{margin-bottom:15px;}
.mgb20{margin-bottom:20px;}
.mgb25{margin-bottom:25px;}
.mgb30{margin-bottom:30px;}
.mgb40{margin-bottom:40px;}
/* m-left-right  */
.mglr5{ margin-left:5px;margin-right:5px;}
.mglr10{margin-left:10px;margin-right:10px}
.mglr15{margin-left:15px;margin-right:15px}
.mglr20{margin-left:20px; margin-right:20px}
.mglr25{margin-left:25px; margin-right:25px;}
.mglr30{margin-left:30px;margin-right:30px}
/* m-top-bottom  */
.mgtb5{margin-top:5px; margin-bottom:5px}
.mgtb10{margin-top:10px; margin-bottom:10px}
.mgtb15{margin-top:15px; margin-bottom:15px}
.mgtb20{margin-top:20px; margin-bottom:20px}
.mgtb25{margin-top:25px; margin-bottom:25px}
.mgtb30{margin-top:30px; margin-bottom:30px}


/* p-left-top-right-bottom  */
.pd5{ padding:5px}
.pd10{ padding:10px}
.pd15{ padding:15px}
.pd20{ padding:20px}
.pd25{ padding:25px}
.pd30{ padding:30px}
.pd35{ padding:35px}
.pd40{ padding:40px}
/* p-left  */
.pdl5{padding-left:5px}
.pdl10{padding-left:10px;}
.pdl15{padding-left:15px}
.pdl20{padding-left:20px;}
.pdl25{padding-left:25px}
.pdl30{padding-left:30px;}
.pdl110{padding-left: 110px}
/* p-right  */
.pdr5{ padding-right:5px}
.pdr10{padding-right:10px;}
.pdr15{padding-right:15px;}
.pdr20{padding-right:20px;}
.pdr25{padding-right:25px;}
.pdr30{padding-right:30px;}
.pdr45{padding-right:45px;}
/* p-top  */
.pdt5{padding-top:5px;}
.pdt10{padding-top:10px;}
.pdt15{padding-top:15px;}
.pdt20{padding-top:20px;}
.pdt25{padding-top:25px;}
.pdt30{padding-top:30px;}
.pdt40{padding-top:40px;}
/* p-bottom  */
.pdb10{padding-bottom:10px;}
.pdb15{padding-bottom:15px;}
.pdb20{padding-bottom:20px;}
.pdb25{padding-bottom:25px;}
.pdb30{padding-bottom:30px;}
.pdb50{padding-bottom:50px;}
/* p-left-right  */
.pdlr5{ padding-left:5px;padding-right:5px;_padding-right:3px}
.pdlr6{ padding-left:6px; padding-right:6px;_padding-right:4px}
.pdlr78{ padding-left:7px; padding-right:8px;}
.pdlr10{padding-left:10px;padding-right:10px}
.pdlr15{padding-left:15px;padding-right:15px}
.pdlr20{padding-left:20px; padding-right:20px}
.pdlr25{padding-left:25px; padding-right:25px;}
.pdlr30{padding-left:30px;padding-right:30px}
.pdlr69{padding-left:6px; padding-right:9px}
/* p-top-bottom  */
.pdtb5{padding-top:5px; padding-bottom:5px}
.pdtb10{padding-top:10px; padding-bottom:10px}
.pdtb15{padding-top:15px; padding-bottom:15px}
.pdtb20{padding-top:20px; padding-bottom:20px}
.pdtb25{padding-top:25px; padding-bottom:25px}
.pdtb30{padding-top:30px; padding-bottom:30px}
.pdtb40{ padding-top:40px; padding-bottom:40px}

.w1200{ width:1200px; margin:0 auto;}
.w1000{ width:1000px; margin:0 auto;}

/* clearfix  */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{display: inline-table;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}

/* input pub and focus placeholder */
::-webkit-input-placeholder { /* WebKit browsers */color:#888;font-family:"microsoft yahei";}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#888;font-family:"microsoft yahei";}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#888;font-family:"microsoft yahei";}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:#888;font-family:"microsoft yahei";}
input,select,textarea{color:#222; font-size:12px;line-height:140%;resize:none;outline:none;font-family:"microsoft yahei";}
select{ font-size:14px; color:#555; padding:4px 0;width:150px; display:inline-block; vertical-align: middle;}
textarea{padding: 5px;border: 1px solid #d5d5d5;}
.inp {display:inline-block; width:170px; height:30px; line-height:30px;background:#fff; color:#555;border:1px solid #d5d5d5;border-radius:3px;box-shadow:0 0 8px #eee inset; padding:0 10px; vertical-align:middle;}
input[type="text"].inp:focus, input[type="password"].inp:focus, textarea:focus{border: 1px solid #3d95d5;}
.def_inp{ display:inline-block; height:30px; line-height:30px;background:#fff; color:#555;border:1px solid #d5d5d5;border-radius:3px;box-shadow:0 0 10px #eee inset; padding:0 10px;}
input[type="text"].def_inp:focus, input[type="password"].def_inp:focus{ border: 1px solid #3d95d5;}

.def_area{width:510px; height:100px; padding:5px; border-radius: 3px; box-shadow: 0 0 10px #eee inset; font-size:12px; vertical-align:top;}
.def_check{  display:inline-block; vertical-align: top; margin-right:3px; *margin-top:1px;}

/*公共按钮*/
a.blueBtn{display:inline-block; background:#309aeb; padding:0 22px; height:30px; line-height:30px; text-align:center; border:1px solid #3079ed; color:#fff; font-size:14px; text-decoration:none; border-radius:3px; vertical-align:middle;}
a.blueBtn:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.grayBtn{display:inline-block; background:#d8edff; padding:0 22px; height:30px; line-height:30px; text-align:center; border:1px solid #309aeb; color:#288add; font-size:14px; text-decoration:none; border-radius:3px;vertical-align:middle; }
a.grayBtn:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.whiteBtn{display:inline-block; background:#fff;padding:0 22px; height:30px; line-height:30px; text-align:center; border:1px solid #0560cd; color:#0560cd; font-size:14px; text-decoration:none; border-radius:3px;margin-right:28px; vertical-align:middle;}
a.whiteBtn:hover{ background:#288add; border:1px solid #288add; color:#fff;}
a.bigBtn{ height:48px; line-height:48px; font-size:20px; padding:0 55px;}
a.blueBtn1{display:inline-block; background:#58a6fb; padding:0 22px; height:30px; line-height:30px; text-align:center; border:1px solid #309aeb; color:#fff; font-size:14px; text-decoration:none; border-radius:3px; vertical-align:middle;}
a.blueBtn1:hover{ background:#288add; border:1px solid #288add; color:#fff;}

/*公共颜色*/
.red{ color:#ef3b6a;}
.yellow{ color:#ffc000;}
.gray{ color:#888;}
.blue{ color:#288add;}


@charset "UTF-8";
.animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
.animated.fast { -webkit-animation-duration: 1s; animation-duration: 1s; }

@keyframes flipInY { 0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
}
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        opacity:1;
    }
}
.flipInY{ -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; }

/*z轴重叠问题单独处理 start*/
@-webkit-keyframes flipInY1 { 0% {
    -webkit-transform: perspective(500px) rotate3d(0, 1, 0, 90deg) translateZ(20px);
    transform: perspective(500px) rotate3d(0, 1, 0, 90deg) translateZ(20px);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
}
    40% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, -20deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, -20deg) translateZ(20px);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, 10deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, 10deg) translateZ(20px);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, -5deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, -5deg) translateZ(20px);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px);
        opacity:1;
    }
}
@keyframes flipInY { 0% {
    -webkit-transform: perspective(500px) rotate3d(0, 1, 0, 90deg) translateZ(20px);
    transform: perspective(500px) rotate3d(0, 1, 0, 90deg) translateZ(20px);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
}
    40% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, -20deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, -20deg) translateZ(20px);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, 10deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, 10deg) translateZ(20px);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(500px) rotate3d(0, 1, 0, -5deg) translateZ(20px);
        transform: perspective(500px) rotate3d(0, 1, 0, -5deg) translateZ(20px);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px);
        opacity:1;
    }
}
.flipInY1{ -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; }
/*z轴重叠问题单独处理 end*/

@-webkit-keyframes zoomRotateIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0);
    transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0);
}
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 1;
    }
}
@keyframes zoomRotateIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0);
    transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0);
}
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 1;
    }
}
.zoomRotateIn { -webkit-animation-name: zoomRotateIn; animation-name: zoomRotateIn; }

@-webkit-keyframes fadeInUp { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@-webkit-keyframes flipInX { 0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
}
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        opacity:1;
    }
}
@keyframes flipInX { 0% {
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 80deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, 80deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
}
    40% {
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(1000px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(1000px);
        transform: perspective(1000px);
        opacity:1;
    }
}
.flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; }

@-webkit-keyframes zoomSlopIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
}
    100% {
        opacity: 1;
    }
}
@keyframes zoomSlopIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
}
    100% {
        opacity: 1;
    }
}
.zoomSlopIn { -webkit-animation-name: zoomSlopIn; animation-name: zoomSlopIn; }

@-webkit-keyframes zoomIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
}
    100% {
        opacity: 1;
    }
}
@keyframes zoomIn { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
}
    100% {
        opacity: 1;
    }
}
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

@-webkit-keyframes fadeInUpBig { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUpBig { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; }

@-webkit-keyframes fadeInUpSmall { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUpSmall { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 500px, 0);
    transform: translate3d(0, 500px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall; }

@-webkit-keyframes fadeInDownSmall { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
    transform: translate3d(0, -1000px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDownSmall { 0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -1000px, 0);
    transform: translate3d(0, -1000px, 0);
}
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInDownSmall { -webkit-animation-name: fadeInDownSmall; animation-name: fadeInDownSmall; }

@-webkit-keyframes zoomInLeft { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInLeft { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInRight { 0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; }

@-webkit-keyframes lightSpeedIn{
    0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
    60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}
    80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}
    100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
}
@keyframes lightSpeedIn{
    0%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
    60%{-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}
    80%{-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}
    100%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}



@-webkit-keyframes fadeIn{
    0%{opacity:0}100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}


@-webkit-keyframes shakeIn{
    0%{ opacity:0}
    0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
    20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}
    100%{ opacity:1}
}
@keyframes shakeIn{
    0%{ opacity:0}
    0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
    20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}
    100%{ opacity:1}
}
.shakeIn{-webkit-animation-name:shakeIn;animation-name:shakeIn}

@-webkit-keyframes pulse{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(1.1);transform:scale(1.1)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes pulse{
    0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
    100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}


@-webkit-keyframes slideInLeft{
    0%{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
@keyframes slideInLeft{
    0%{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}
}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}


@-webkit-keyframes slideInRight{
    0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
@keyframes slideInRight{
    0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}
}
.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}

@-webkit-keyframes slideInDown{
    0%{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
@keyframes slideInDown{
    0%{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}

@-webkit-keyframes slideInUp{
    0%{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
@keyframes slideInUp{
    0%{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);visibility:visible}
    100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;}
}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}