@charset 'utf-8';
body { font-family: 'Microsoft Yahei', Arial; background: #fff }
.scale_img dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 0.65s linear 0s }
.scale_img dl:hover dt img, .scale_img li:hover img { -webkit-transform: scale(1.08) rotate(0deg) translateY(0); -ms-transform: scale(1.08) rotate(0deg) translateY(0); transform: scale(1.08) rotate(0deg) translateY(0) }
/**/
.fullSlide { position: relative; z-index: 1; clear: both; width: 100% ;margin-bottom:111px;}
.fullSlide .bd { margin: 0 auto; position: relative; z-index: 0; overflow: hidden }
.fullSlide .bd .con { width: 100% !important; height: auto !important; display: block }
.fullSlide .bd .li { width: 100% !important; overflow: hidden; text-align: center; background: no-repeat center top; z-index: 0 }
.fullSlide .bd .li img { display: block; height: auto !important; width: 100% }
.fullSlide .hd { position: absolute; width: 100%; height: 12px; left: 0; bottom: 45px; text-align: center; cursor: pointer }
.fullSlide .hd li { display: inline-block; width: 12px; height: 12px; background: #fff; margin: 0 12px; border-radius: 50%; opacity: .6; -o-transition: all .3s ease; transition: all .3s ease }
.fullSlide .hd li.on { width: 36px; height: 12px; opacity: 1; border-radius: 5px; background: #0054aa;}
.fullSlide p { display: none; position: absolute; top: 50%; width: 80px; height: 80px; z-index: 99; opacity: 1; text-align: center; margin-top: -40px }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% ; }
/**/
.jic{ position: relative; height: 617px;}
.jic_l{ width: 495px;}
.jic_l h3{ height: 178px;background:url(../images/jic_l.jpg) no-repeat;}
.jic_l h3 i{ display: block; line-height: 100%; padding: 56px 0 20px 279px; color: #333333;font-size: 42px;}
.jic_l h3 span{ display: block; font-size: 22px; color: #333333;font-weight: normal; line-height: 100%;}
.jic_l p{ color: #666666; font-size: 16px; line-height: 28px; height: 196px;}
.jic_l ul li{ float: left; font-size: 16px; color: #333; line-height: 100%;position: relative;}
.jic_l ul li:before{ content:""; position:absolute;height:46px;width:1px;right:0;top:5px; background:#e5e5e5;}
.jic_l ul li:last-of-type:before{ background: none;}
.jic_l ul li em{ display: block; line-height: 100%; padding-bottom: 5px;}
.jic_l ul li em span{ display: inline-block; color: #0054aa; font-size: 40px;font-weight: bold; font-family: Impact; padding-right: 5px; line-height: 100%;}
.jic_l ul li:nth-of-type(2){ padding: 0 27px;}
.jic_l ul li:nth-of-type(3){ padding: 0 27px;}
.jic_l ul li:nth-of-type(4){ padding: 0 0 0 27px;}
.jic_l ul li:nth-of-type(1){ padding: 0 27px 0 0 ;}
.jic_r{  width: 653px; position: relative;}
.jic_r em:nth-of-type(1){ position: absolute; left: 182px; top: 33px;animation: move 500ms ease-in-out 100ms infinite alternate;}
.jic_r em:nth-of-type(2){ position: absolute; left: 333px; top: -69px;animation: move 450ms ease-in-out 100ms infinite alternate;}
.jic_r em:nth-of-type(3){ position: absolute; left:615px; top:41px;animation: move 600ms ease-in-out 100ms infinite alternate;}
.jic_r em:nth-of-type(4){ position: absolute; left:605px; top:226px;animation: move 420ms ease-in-out 100ms infinite alternate;}
@keyframes move{
    0%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(10px);
    }
}

/**/
.pros{background:url(../images/pros.jpg) no-repeat center 0; padding-top: 72px; padding-bottom: 96px;}
.pros h2{ text-align: center; margin-bottom: 30px;}
.pros h2 i{ display: block; line-height: 100%; color: #333333; font-size: 42px; padding-bottom: 13px;}
.pros h2 span{ display: block; font-weight: normal; color: #666666; font-size: 20px; line-height: 100%; padding-bottom: 41px;background:url(../images/p_h.png) no-repeat center bottom; }
.p_lis ul{background: #0054aa; margin-bottom: 39px;}
.p_lis ul li{ position: relative; float: left;background:url(../images/p_li.jpg) no-repeat right 42px;height: 85px;}
.p_lis ul li em{  position: absolute; left: 0; top:85px; display: none; z-index: 555!important;}
.p_lis ul li a{ display: inline-block; height: 85px; line-height: 85px; font-size: 20px; color: #fff; padding: 0 32px;}
.p_lis ul li:last-of-type{ background:none;}
.p_lis ul li a:hover{ background: #50b43c;}
.p_lis ul li:hover em{  display: block;background: #50b43c; padding: 10px 0; width: 100%; border-top: 1px solid #7cc76d;}
.p_lis ul li:hover em a{ display: block; clear: both; line-height: 46px;height: 46px; font-size: 15px;}

.p_om{max-width: 1920px; overflow: hidden; margin: 0 auto;}
.p_om ul{ position: relative; overflow: hidden;}
.p_om ul li{ float: left; position: relative; font-size: 0; line-height: 0; margin-bottom: 19px; width: 24.1%; overflow: hidden;}
.p_om ul li img{transition: all 0.3s linear 0s;}
.p_om ul li:hover img{transform: scale(1.05);}
.p_om ul li:nth-of-type(2n){ margin-left: 51.78%;}
.p_om ul li em{position: absolute; left: 3.75%; top: 7.5%;}
.p_om ul li em i{ display: block; line-height: 100%; color: #333333; font-size: 18px;}
.p_om ul li em span{ display: block; line-height: 100%; font-family: Arial; font-size: 14px; color: #adadad; padding: 11px 0 30px 0;background:url(../images/p_mor1.png) no-repeat left bottom;}
.p_om ul li img{ display: inline-block; width: 100%;}
.p_om ul li:nth-of-type(5){ position: absolute; top: 0; left: 25.2%; width:49.9%;}
.p_om ul li:nth-of-type(5) img:nth-of-type(2){ position: absolute; z-index: 54; width: 49%;top: 25%; right: 4.25%;}
.p_om ul li:nth-of-type(5) b{ position: absolute; font-weight: normal; left: 3.5%; z-index: 55; top: 12%;}
.p_om ul li:nth-of-type(5) b i{ display: block; line-height: 100%; color: #333333; font-size: 22px;}
.p_om ul li:nth-of-type(5) b i span{ display: block; line-height: 100%;line-height: 100%; font-family: Arial; font-size: 14px; color: #adadad; padding: 11px 0 22px 0;}
.p_om ul li:nth-of-type(5) b strong{ display: block; font-weight: normal; color: #666666; font-size: 0.95vw; line-height: 28px; width:45%;}
.p_om ul li:nth-of-type(5) b strong span{ display: block; padding: 1vw 0;}
.p_om ul li:nth-of-type(5) b strong p{ line-height: 28px; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; padding: 0.5vw 0;}
.p_om ul li:nth-of-type(5) b strong .mor{background:url(../images/p_m2.png) no-repeat; width: 37px; height: 37px; margin-top: 2vw;}
/**/
.tta{background:url(../images/tta.jpg) no-repeat center 0; height: 339px; overflow: hidden; margin-bottom: 109px;}
.tta p{ color: #fff; padding-top: 90px; text-align: right; padding-right:6px;}
.tta p b{ display: block; font-size: 24px; letter-spacing: 1px;}
.tta p strong{ display: block; font-weight: normal; padding-top: 18px; height: 47px; font-size: 20px; letter-spacing: 10px;}
.tta p em{ display:block; height: 44px; line-height: 44px; border-radius: 10px; border: 1px solid #fff; clear: both; margin-left: 523px; text-align: center; font-size: 16px;}
.tta p em span{ padding: 0 35px;}
.tta p a{ display: block; margin-top: 30px; width: 137px; height: 40px; line-height: 40px; border-radius: 40px; background: #50b43c; text-align: center; float: right; font-size: 16px; color: #fff;transition: all 0.3s linear 0s;}
.tta p a:hover{ width: 159px;}
    /**/
.cux{ height: 730px;background:url(../images/ys.jpg) no-repeat center 279px; }
.cux h2{ text-align: center;background:url(../images/y_h22.png) no-repeat center 68px;}
.cux h2 i{ display: block; line-height: 100%; color: #0054aa; font-size: 50px; padding-bottom: 60px;}
.cux h2 span{ display: block; font-weight: normal; color: #333333; font-size: 24px; padding-bottom: 42px;}
.cux p{ text-align: center; line-height: 28px; color: #666666; font-size: 16px; margin: 0 102px;}
    /**/
.zhil{background:url(../images/zhl.jpg) no-repeat center 0; padding-top: 66px; padding-bottom: 100px;}
.zhil  .content{background:url(../images/zl_h.png) no-repeat ; padding-top: 32px; overflow: hidden;}
.zhil h3{ float: left; width: 331px; height: 212px;}
.zhil h3 i{ display: block; line-height: 100%; color: #0054aa; font-size: 50px; padding-bottom: 46px;}
.zhil h3 span{ display: block; line-height: 100%; color: #333333; font-size: 24px;font-weight: normal;}
.zhil p{ width: 863px; color: #666666; font-size: 16px; line-height: 30px; float: left; padding-top: 12px;}
.zhil p span{ display: block;}
.zhil ul{ overflow: hidden; max-width: 1920px; margin: 0 auto; position: relative;}
.zhil ul li{ float: left; font-size: 0; line-height: 0; margin-bottom: 12px; width: 28.65%; margin-right: 0.7%;}
.zhil ul li img{ display: inline-block; width: 100%;}
.zhil ul li:first-child{ width: 20.3%;}.zhil ul li:nth-of-type(3),.zhil ul li:nth-of-type(5){ margin-right: 0;}
.zhil ul li:nth-of-type(6){ width: 20.2%; margin-right: 0; position: absolute; top: 0; right: 0;}
    /**/
.tiex{ overflow: hidden;background:url(../images/tiex.jpg) no-repeat center 0; height: 658px; box-sizing: border-box; padding-top: 38px;}
.tiex h2{background:url(../images/tx_h.png) no-repeat 0 69px; margin-bottom: 13px;}
.tiex h2 i{ display: block; line-height: 100%; color: #0054aa; font-size: 50px; padding-bottom: 65px;}
.tiex h2 span{ display: block; font-weight: normal; line-height: 100%; font-size: 24px; color: #333333; padding-bottom: 34px; position: relative;}
.tiex h2 span:before{ content:""; position:absolute;height:4px;width:52px;left:0;bottom:0; background:#0054aa;}
.tiex p{ width: 533px; height: 130px; font-size: 16px; color: #666666; line-height: 29px;}
.tiex ul{border-top: 1px solid #999; overflow:hidden; border-bottom: 1px solid #999; width: 530px; padding-top: 38px; height: 112px;}
.tiex ul li{ float: left; font-size: 16px; color: #333; line-height: 100%;position: relative;}
.tiex ul li:last-of-type:before{ background: none;}
.tiex ul li em{ display: block; line-height: 100%; padding-bottom: 5px;}
.tiex ul li em span{ display: inline-block; color: #0054aa; font-size: 40px;font-weight: bold; font-family: Impact; padding-right: 5px; line-height: 100%;}
.tiex ul li:nth-of-type(2){ padding: 0 99px;}

/**/

.case_con .swiper-pagination { bottom: 0; }
.case_con .swiper-pagination-bullet {width: 12px; opacity: .95; height:12px;border: 2px solid #bebebe; border-radius: 12px; box-sizing: border-box; margin: 0 .33rem !important; border-radius: 0; -o-transition: all .3s ease; transition: all .3s ease; border-radius: 0.75rem; background: none;}
.case_con .swiper-pagination-bullet-active { opacity: 1; background: #0054aa;border: 2px solid #0054aa; }

.case_con .swiper-slide-active { opacity: 1 }


/**/
/**/
/**/
    /**/
.xinw{height:895px; }
.xinw h2{ text-align: center; margin-bottom: 30px;}
.xinw h2 i{ display: block; line-height: 100%; color: #333333; font-size: 42px; padding-bottom: 13px;}
.xinw h2 span{ display: block; font-weight: normal; color: #666666; font-size: 20px; line-height: 100%; padding-bottom: 41px;background:url(../images/p_h.png) no-repeat center bottom; }
.company { width:600px; height: 615px; border-radius: 5px; background: #fff; padding: 22px; box-sizing: border-box; box-shadow: 0 0 20px rgba(0,0,0,0.16);}

.company dl {height: 475px;}
.company dt { width: 555px; height: 318px; overflow: hidden }
.company dt img { width: 555px; }
.company dd { padding: 25px 9px 0;}
.company dd h4{ overflow: hidden;}
.company dd h4 span{ display: inline-block; float: left; width: 55px; height: 24px; line-height: 24px; border: 1px solid #d22f2f; text-align: center; color: #d22f2f; font-weight: normal; font-family:"����";}
.company dd h4 i a{ font-size: 16px; line-height: 24px; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-transition: all .3s ease; transition: all .3s ease; float: left; width:472px; margin-left: 8px;font-weight: normal;}
.company dd p { font-size: 14px; line-height: 29px; color: #666666; margin: 11px 0 0;}
.company dl:hover dd h4 i a { color: #0054aa }
.company ul{ margin-left: 9px;}
.company ul li {padding-left: 23px;background:url(../images/cy_li.png) no-repeat 0; overflow: hidden; margin-bottom: 11px;}
.company ul li h4 { float: left; width: 380px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 20px; color: #434343; font-weight: 400; position: relative; -o-transition: all .3s ease; transition: all .3s ease }
.company ul li span { float: right; font-size: 14px; line-height: 20px; color: #666666; -o-transition: all .3s ease; transition: all .3s ease;font-family:"����"}
.company ul li:hover h4 { color: #0054aa }
.company ul li:hover h4:before { background: #74b942 }
.company ul li:hover span { color: #434343 }

.news_nr{ width: 555px;}

.news_nr { width: 550px }
.news_nr dl { height: 109px; margin-bottom: 31px; padding-bottom: 28px; border-bottom: 1px dashed #ccc;}
.news_nr dt { width: 190px; height: 109px; overflow: hidden; float: left }
.news_nr dt img { width: 190px; height: 109px ;transition: all 0.3s linear 0s;}
.news_nr dt img:hover{transform: scale(1.05);}
.news_nr dd { width: 325px; float: right ;padding-top: 14px;}
.news_nr dd h4 { font-size: 16px; line-height: 22px; color: #333333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-transition: all .3s ease; transition: all .3s ease; font-weight: normal;}
.news_nr dd p { font-size: 14px; line-height: 24px; color: #666666; margin:12px 0 10px }
.news_nr dl:hover dd a{color: #74b942;}
.news_nr dl:hover dd h4 { color: #0054aa }
.news_nr dl:last-of-type{ border-bottom: none;}
/**/
.zj{background: url(../images/zjbg.jpg) no-repeat center 0 #3f4245; height: 158px; overflow: hidden; padding-top: 483px;}
.zj h3{ overflow: hidden; background: url(../images/zj_h.jpg) no-repeat #fff; height: 158px;}
.zj h3 i{ display: inline-block; width:214px; text-align: center; float: left; line-height:158px; font-size: 30px; color: #fff;}
.zj h3 em{ display: inline-block; float: right; width: 937px; padding: 29px 24px 0 0;font-weight:normal; color: #666666; font-size: 16px; line-height: 30px;}
    /**/
.links {overflow: hidden ;  margin:-54px auto 0; font-size: 14px;  width: 1200px; height: 54px; line-height: 54px; position: relative; border-top: 1px solid rgba(255,255,255,0.25);}
.links em { width: 135px; float: left; display: inline-block; color: #a7a7a7; font-weight: bold;}
.links i{ display: inline-block; float: left; width: 1060px;}
.links i a{ display: inline-block;color: #a7a7a7; padding: 0 6px;}
.links i a:hover{ color: #fff; text-decoration: underline;}
    /**/
.xl_u img,.xl_d img{transition: all 0.3s linear 0s;}
.xl_u:hover img{transform: translateX(-5px);}
.xl_d:hover img{transform: translateX(5px);}
.aboti em a,.case h4 a,.sli_o h3 a,.mppl dl dd em a,.pexl h4 a,.xl_on h4 a{transition: all 0.2s linear 0s;}
.aboti em a:hover{ background-position:  125px 15px;}
.case h4  a:hover{ background-position: 137px 19px}
.sli_o h3 a:hover{ background-position:118px 11px;}
.xl_on h4 a:hover{ background-position:102px 13px;}
.mppl dl dd em a:hover,.pexl h4 a:hover{transform: translateX(7px);}
     .company ul li h4{    width: 420px;}
     .news_nr dd h4,.company dd h4 i a{    font-weight: bold;}
/**/
/**/
.al_con ul li:before, .al_con ul li:after,.al_con ul li>em:before, .al_con ul li>em:after{ -o-transition: all .5s ease; transition: all .5s ease; position: absolute; content: ""; background: #cd1616; z-index: 3 }
.al_con ul li:before {width: 0;top:0px;left: 0px;height: 3px; }
.al_con ul li:after {width: 3px;top: 0px;left: -1px;height: 0;}
.al_con ul li>em:before{width: 0px;bottom: 0px;right: -2px;height: 3px; }
.al_con ul li>em:after{width: 3px;bottom: 1px;right: -3px;height: 0; }
.al_con ul li:hover:before { width: 380px }
.al_con ul li:hover:after { height:510px }
.al_con ul li:hover>em:before { width: 380px }
.al_con ul li:hover>em:after { height: 510px }


 .p_om ul li:nth-of-type(5) b{    top: 24%;}
 .p_om ul li:nth-of-type(5) b strong{ font-size: 15px;}
     .p_lis ul li a { padding:0 29px;}
     .p_lis ul li:last-of-type a {
    padding-right: 29px;}
    .p_lis ul li:hover em a{padding-right: 0;
    padding-left: 17px;}
    .p_lis ul li a{padding: 0 23px;    font-size: 18px;}
 .cux p {font-size: 16px;}
             .case {  padding-bottom: 69px; overflow: hidden }
.case{ background: #fcfcfc; padding-top: 108px; height: 770px; margin-bottom: 72px; overflow: hidden;}
.case h2{ text-align: center; margin-bottom: 30px;}
.case h2 i{ display: block; line-height: 100%; color: #333333; font-size: 42px; padding-bottom: 13px;}
.case h2 span{ display: block; font-weight: normal; color: #666666; font-size: 20px; line-height: 100%; padding-bottom: 41px;background:url(../images/p_h.png) no-repeat center bottom; }
.next1{ position: absolute; top: 254px; left: 14.5%; cursor: pointer;}
.prev1{ position: absolute; top: 240px; right: 14.5%; cursor: pointer;}
            .case .content { position: relative; height: 461px; margin-top: 0px !important }
            .case_con { width: 1005px; height:461px; position: absolute; left: 50%; margin-left: -600px }
            .case_con .tempWrap { overflow: visible !important }
            .case_con .tempWrap div { overflow: visible !important }
         

            .case_con dl{  overflow: hidden;    width:1135px;height: 554px; position: relative; margin: 0 32px; }
            .case_con dl dt{ left: 0;position: absolute; top: 0; left: 53px;}
                   .case_con dl dt img{ width:564px; height:410px;}
            .case_con dl dd{ float: left; background: #fff; box-shadow: 0 0 25px rgba(0,0,0,0.12); margin: 80px 25px 25px ; width: 1070px; box-sizing: border-box; padding-left:627px; padding-right: 29px; padding-top:70px; height: 370px;}
            .case_con dl dd h4{ font-size: 24px;}
            .case_con dl dd h4 a{ display: block; color: #333333; font-size: 24px;font-weight: normal;    line-height: 120%;}
            .case_con dl dd h4 a:hover{ color: #50b43c;}
            .case_con dl dd p{ padding-top: 15px; height: 135px; color: #888888; font-size: 16px; line-height: 25px;}
            .case_con dl dd i a{ display: block; width: 132px; height: 40px; line-height: 40px; border-radius: 40px; background: #50b43c; color: #fff; font-size: 16px; text-align: center;transition: all 0.3s linear 0s;}
            .case_con dl dd i a:hover{ width: 145px;}



            .case_con dl.active dd { bottom: 0 }
            .case_switch div { position: absolute; top: 248px; width: 41px; height: 88px;  cursor: pointer; z-index: 2; -o-transition: all .3s ease; transition: all .3s ease }
            .case_switch .prev { left: -14px }
            .case_switch .next { right: -29px;}
            /*.case_switch div:hover { background: #2a82dc }*/
            .case .more a { display: block; width: 240px; height: 51px; border: 1px solid #959298; border-radius: 3px; margin: 58px auto 0; font-size: 20px; line-height: 49px; color: #333; text-align: center; -o-transition: all .3s ease; transition: all .3s ease }
            .case .more a:hover { border-color:#50b43c; color: #fff;background:#50b43c; }
/**/
.pic img,.picl img,.pics img{-webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; -o-transition: -o-transform 0.8s; transition: transform 0.8s;}
.pic img:hover{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);  transform: scale(1.05);}
.picl img:hover{-moz-transform: translate(0,5px);-webkit-transform: translate(0,5px);-ms-transform: translate(0,5px);-o-transform: translate(0,5px);}
.pics img:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}
.white,.whites{position: relative;overflow: hidden;}
.white:after,.whites:after{content: ''; cursor: pointer; position: absolute; left: -100%; top: 0; width:100%; height:100%; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); transform: skewx(-25deg); }
.white:hover:after{left:100%; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s; transition:1s;}
.whites:hover:after {left:100%; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s;}

/**/

@-webkit-keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes fadeInRight2 {
    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight2 {
    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2 }
@-webkit-keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
@keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}