@charset "utf-8";
/*end*/
body{overflow-x:hidden;}

@charset "utf-8";

body{min-width: 1200px; width: 100%;}


.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;letter-spacing: 1px;}
.tit span{display:block;font-size: 42px;color: #333;line-height: 42px;font-weight: normal;}
.tit i{display:block;font-size: 18px;line-height:18px;color: #333333;margin-top: 12px;position: relative;}
.tit i:after{ position: absolute;left: 50%;height: 2px;width:28px; top:38px;margin-left: -14px;background: #ff4d11;content: "";}

/*banner*/
.banner{height: 650px;position: relative;}
.bdu{width: 100% !important;height: 650px;}
.bdu li{width: 100% !important;height: 650px;position:relative;}
.bdu li a{display: block;height: 650px;}
.bdu li img{height:650px;margin-left: -960px;position:absolute;left:50%;}
.hdu{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;}
.hdu li{display: inline-block;width: 14px;height: 14px;background: #fff;margin:0 10px;border-radius: 7px;}
.hdu li.on{background: #ff4d11;}
.banner .b_prev{position:absolute;top:calc(45% - 40px);left: 0%;z-index: 10;cursor: pointer;opacity: 0;transition: all .35s linear;}
.banner .b_next{position:absolute;top:calc(45% - 40px);right: 0%;z-index: 10;cursor: pointer;opacity: 0;transition: all .25s linear;}
.banner:hover .b_prev{opacity: 1;left: 6%;}
.banner:hover .b_next{opacity: 1;right: 6%;}




.yz{ height: 553px;background: #f2f2f3;}
.yz h2{text-align: center;font-weight: normal;font-size: 0;line-height: 0;padding-top: 62px;}
.yz h2 img{ width: auto;display: block;height: 101px;margin: 0 auto;}
.yz h2 i{display:block;font-size: 28px;line-height:28px;color: #333333;margin-top: 13px;position: relative;}
.yz h2 i:after{ position: absolute;left: 50%;height: 2px;width:28px; top:50px;margin-left: -14px;background: #ff4d11;content: "";}
.yz h2 em{display:block;font-size: 15px;line-height:26px;color: #666666;margin-top: 50px;position: relative;text-align: center;font-weight: normal;}

.yz_t{margin-top: 80px;}
.yz_t li{float: left;box-sizing: border-box;position: relative;transition:all 0.3s;width: 300px;height: 108px;border-right: 1px solid #dcdcdc;box-sizing: border-box;}
.yz_t li:last-child{ border: 0;}
.yz_t li span{display:block;height: 50px;line-height: 50px;font-size: 54px;color: #333333;position: relative;vertical-align: bottom;font-family:Arial;margin-right: 10px;text-align: center;}

.yz_t li span i{position: absolute;width: 22px;height: 22px;line-height: 22px;text-align: center;font-size: 18px;color: #fff;border-radius: 100%;background: #ff4d11;right: 70px;top: 0px;font-family: "Microsoft Yahei";}
.yz_t li span b{ font-size: 52px;color: #333333;line-height: 52px;font-weight: normal;}
.yz_t li p{display: block;font-size: 16px;line-height: 24px;color: #333;text-align: center;margin-top: 16px;}
.yz_t li:nth-child(1) i,.yz_t li:nth-child(4) i{ right: 92px;}

.pro{padding-top: 90px;}
.pro_t{ height: 105px;border-top: 1px solid #dcdcdc;box-sizing: border-box;margin-top: 58px;}
.pro_t li{float: left;width: 200px;height: 105px;box-sizing: border-box;position: relative;}
.pro_t li em{display: block;font-size: 20px;color: #333333;line-height: 20px
    ;text-align: center;padding-top: 35px;}
.pro_t li i{display: block;font-size: 12px;color: #999999;line-height: 12px;padding-top: 8px; text-align: center;}
.pro_t li:hover,.pro_t li.cur{ background: #ff4d11;}
.pro_t li:hover em,.pro_t li.cur em{ color: #fff;}
.pro_t li:hover i,.pro_t li.cur i{ color: #fff;}
.pro_t li:hover:after,.pro_t li.cur:after{ position: absolute;left: 50%;top: 0;width: 20px;margin-left: -10px;height: 12px;content: "";background:url(../images/san2.png) no-repeat  center;}

.pro_con{ height: 672px;background:url(../images/pro_conbg.jpg) no-repeat  center;}

.pro_con .content{ padding-top: 100px;}
.pro_con dt{ width: 645px;height: 480px;float: right;display: block;}
.pro_con dt img{ width: 645px;height: 480px;display: block;}
.pro_con dd{ float: left;width: 500px;}
.pro_con dd h3{display: block;font-size:22px ;line-height: 22px;color: #ff4d11;font-weight: normal; position: relative;}
.pro_con dd h3 a{ color: #ff4d11;}
.pro_con dd h2 b{ display: block;font-size:36px ;line-height: 36px;color: #ff4d11;padding-bottom: 10px;}

.pro_con dd p{display: block;font-size:16px ;line-height: 30px;color: #333333;padding-top: 24px;}
.pro_con dd li{ float:left;width: 240px;height: 153px;overflow: hidden;}
.pro_con dd li img{ display: block;width: 240px;height: 153px;transition: all .3s;}
.pro_con dd li:hover img{ transform:scale(1.06);}
.pro_con dd li:nth-child(2n){ float: right;}
.pro_con .more{display: block;width: 140px;height: 30px;background: url(../images/pro_jt.png) no-repeat 90px;border-radius: 15px;font-size: 16px;color: #ff4d10;line-height: 30px;text-indent: 20px;transition: all .3s;
       border: 1px solid #ff4d10; margin-top: 40px;margin-bottom: 70px;}      
.pro_con .more:hover {text-indent: 0;text-align: center;background: url(../images/pro_jt.png) no-repeat 150px;
        }

.cp{ display: block;height: 1152px;padding-top: 90px;box-sizing: border-box;background: url(../images/cp_bg.jpg) no-repeat center;}
.cp_con{margin-top: 58px;}
.cp_l{ float: left;width: 265px;height: 809px;}
.cp_l h3{ display: block;width: 265px;height: 120px;background: url(../images/cp_l.jpg) no-repeat center;font-weight: normal;}
.cp_l h3 i{ display: block;font-size: 24px;color: #fff;line-height:24px ;padding-top: 36px;text-align: center;}
.cp_l h3 span{ display: block;font-size: 16px;color: #fff;line-height:16px ;padding-top: 9px;text-align: center;opacity: 0.5;}
.cp_l ul{ height: 689px;background: #f2f2f3;}
.cp_l li{ position: relative;height: 53px;width: 265px;}
.cp_l li>a{ position: relative;padding-left: 39px;height: 53px;line-height: 53px;border-bottom: 1px dashed #999999;box-sizing: border-box;font-size: 18px;color: #333;width: 100%;display: block;background: url(../images/pro_ic.png) no-repeat 215px;}
.cp_l li.cur>a,.cp_l li:hover>a{background: url(../images/pro_ich.png) no-repeat 215px #ff4d10;color: #fff;}
.cp_l li:last-child>a{ border-bottom: 0;}
.cp_l li>div{ display: none;position: absolute;left:265px;top:0;width: 935px;min-height: 449px;padding: 7px 61px;box-sizing: border-box;background: #f2f2f3;box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.15);z-index: 200;}
.cp_l li>div em{display: block;width: 100%;line-height: 48px;border-bottom: 1px dashed #c6c6c6;box-sizing: border-box; float:left}
.cp_l li>div em:last-child{ border-bottom: 0;}
.cp_l li>div i>a{ display: block;float: left;width: 187px;font-size: 16px;color: #333333;line-height: 48px;margin-right: 6px;}
.cp_l li>div span{display: block;float: left;padding-top: 14px;width: 620px;}
.cp_l li>div span>a{float: left;display: block;padding: 0 16px;font-size: 14px;color: #333333;height: 20px;line-height: 20px;border-left:1px solid #d2d2d2;box-sizing: border-box;margin-bottom: 15px;}
.cp_l li:hover>div{display: block;}
.cp_l li>div i>a:hover,.cp_l li>div span>a:hover{ color: #ff4d11;}
.cp_l li:nth-child(7)>div{ top: -78px;}
.cp_l li:nth-child(8)>div{ top: -131px;}
.cp_l li:nth-child(9)>div{ top: -184px;}
.cp_l li:nth-child(10)>div{ top: -237px;}
.cp_l li:nth-child(11)>div{ top: -290px;}
.cp_l li:nth-child(12)>div{ top: -343px;}
.cp_l li:nth-child(13)>div{ top: -396px;}


.cp_r{ width: 925px;height: 821px;margin-top: -6px;background: url(../images/cp_r.jpg) no-repeat center;float: right;}
.cp_r li{ float: left;width: 308px;height: 410.5px;position: relative;overflow: hidden;}
.cp_r li a{ width: 308px;height: 410.5px;display: block;z-index:99;position: relative;}
.cp_r li:before{content: "";border: 1px solid #ff4d11;
    position: absolute;top: 0;width: 308px;height: 410.5px;z-index: 9;transition: all .3s ease;opacity: 0;box-sizing: border-box;transform: scale(1.2);left: 0;}
.cp_r li a img{ display: block;width: 280px;height: 280px;transition:all 0.5s;}
.cp_r li i{ display: block;width: 280px;height: 280px;margin: 30px auto 0;overflow: hidden;}
.cp_r li:hover img{ transform:scale(1.05);}
.cp_r li em{ text-align: center;display: block;font-size: 16px;line-height: 16px;color: #ff4d10;padding-top: 23px;}
.cp_r li h4{ text-align: center;display: block;font-size: 16px;line-height: 16px;color: #333333;padding-top: 9px;font-weight: normal;}
.cp_r li:hover{box-shadow:0px 0px 40px 0px rgba(51,51,51,0.18);transform:scale(1.02);}
.cp_r li:hover:before {
        opacity: 1;height: 100%;transform: scale(1);}
.cp_r li:hover em{ color: #ff4d11;}
.cp_r li:hover h4{ color: #ff4d11;font-weight: bold;}

/*.cp_r li:hover{ border: 1px solid #ff4d11;box-sizing: border-box;}*/


.ys{ padding-top: 90px;}
.ys1 { margin-top: 55px;}
.ys1 dt{ display: block;width:600px ;height: 431px;overflow: hidden;}
.ys1 dt img{ display: block;width:600px ;height: 431px;transition:all 0.3s;}
.ys1 dt:hover img{ transform: scale(1.05);}
.ys1 dd{ width: 514px;background: url(../images/ys1_dd.png) no-repeat right top;}
.ys1 dd h3{ padding-top: 45px;display: block;}
.ys1 dd h3 img{ float: left;width: auto;}
.ys1 dd h3 span{ display: block;float: left;margin-left: 22px;}
.ys1 dd h3 span b{ display: block;font-size: 36px;color: #ff4d11;line-height:30px ;}
.ys1 dd h3 span em{ display: block;font-size: 24px;color: #ff4d11;line-height:24px ;padding-top: 12px;font-weight: normal;}
.ys1 dd p{ display: block;font-size: 16px;line-height: 28px;color: #333333;padding-top: 35px;padding-bottom: 45px;}
.ys1 dd li{ float:left;width: 247px;height: 177px;overflow: hidden;}
.ys1 dd li img{ display: block;width: 247px;height: 177px;transition: all .3s;}
.ys1 dd li:hover img{ transform:scale(1.06);}
.ys1 dd li:nth-child(2n){ float: right;}

.ys2{ margin-top: 70px;background: #f2f2f3;height: 578px;}
.ys2_qie,.ys2_qie2{ position: relative;}
.ys2 h3{ padding-top: 70px;display: block;margin: 0 auto;width: 450px;}
.ys2 h3{ padding-top: 70px;display: block;}
.ys2 h3 img{ float: left;width: auto;}
.ys2 h3 span{ display: block;float: left;margin-left: 22px;}
.ys2 h3 span b{ display: block;font-size: 36px;color: #ff4d11;line-height:30px ;}
.ys2 h3 span em{ display: block;font-size: 24px;color: #ff4d11;line-height:24px ;padding-top: 12px;font-weight: normal;}
.ys2 p{ display: block;font-size: 16px;line-height: 28px;color: #333333;padding-top: 25px;padding-bottom: 40px;text-align: center;}
.ys2 li{ float: left;width: 183px;height: 258px;margin-right: 20px;overflow: hidden;}
.ys2 li img{width: 168px;height: 241px; transition: all .3s;padding-left: 7.5px;padding-top:8.5px ;}
.ys2 li i{ display:block;width: 183px;height: 258px;overflow: hidden;background: url(../images/zs_dd.jpg) no-repeat center;}
.ys2 li:hover img{ transform:scale(1.06);}
.ys2 .sprev{ display: block;width: 20px;height: 36px;position: absolute;left: -70px;top: 108px;background: url(../images/sprev.png) no-repeat center;z-index: 10;cursor: pointer;}
.ys2 .snext{ display: block;width: 20px;height: 36px;position: absolute;right: -70px;top: 108px;background: url(../images/snext.png) no-repeat center;z-index: 10; cursor: pointer;}
.ys2 .sprev:hover{background: url(../images/sprevh.png) no-repeat center; }
.ys2 .snext:hover{background: url(../images/snexth.png) no-repeat center; }

.ys22{ margin-top: 70px;background: #f2f2f3;height: auto; padding-bottom: 60px;}
.ys22 li i{ display:block;width: 100%;height: 148px;overflow: hidden;background:none;}
.ys22 li{ float: left;width: 220px; height: 188px; border: 1px solid #ddd; padding: 5px; margin-right: 10px;overflow: hidden;}
.ys22 li img{width: 100%;height: 148px; transition: all .3s;padding: 0; }
.ys22 li p{ font:15px/40px "Microsoft Yahei"; padding: 0; }
.ys22 .sprev{ display: block;width: 20px;height: 36px;position: absolute;left: -70px;top: 80px;background: url(../images/sprev.png) no-repeat center;z-index: 10;cursor: pointer;}
.ys22 .snext{ display: block;width: 20px;height: 36px;position: absolute;right: -70px;top: 80px;background: url(../images/snext.png) no-repeat center;z-index: 10; cursor: pointer;}



.ys3 { padding-top: 70px;}
.ys3 dt{ display: block;width:600px ;height: 421px;overflow: hidden;}
.ys3 dt img{ display: block;width:600px ;height: 421px;transition:all 0.3s;}
.ys3 dt:hover img{ transform: scale(1.05);}
.ys3 dd{ width: 500px;}
.ys3 dd h3{ padding-top: 40px;display: block;padding-bottom: 28px;}
.ys3 dd h3 img{width: auto;display: block;padding-bottom: 23px;}
.ys3 dd h3 span{ display: block;}
.ys3 dd h3 span b{ display: block;font-size: 36px;color: #ff4d11;line-height:30px ;}
.ys3 dd h3 span em{ display: block;font-size: 24px;color: #ff4d11;line-height:24px ;padding-top: 12px;font-weight: normal;}
.ys3 dd p{ display: block;font-size: 16px;line-height: 36px;color: #333333;padding-left: 18px;background: url(../images/ys3_dd.png) no-repeat left;}

.case{ margin-top: 90px;padding-top: 90px;height: 952px;background: #f2f2f3;box-sizing: border-box;}
.case_s{width: 1920px;margin-left: -360px;position: relative;margin-top: 68px;}
.case_s .case_con{width: 60%;margin: 0 auto;}
.case_s .tempWrap{left: -640px;}
.case_s dl{float: left;margin-right: 100px;display: inline;}
.case_s dl dt{width: 1000px;height: 500px;line-height: 0;overflow: hidden;background: #000;}
.case_s dl dt img{width: 1000px;display: block;height: 500px;opacity: 0.5;}
.case_s dl dd{box-sizing: border-box;padding: 33px 0 0;opacity: 1;height: 146px;border-bottom: 1px solid #dcdcdc;position: relative;}
.case_s dl dd:after{ position: absolute;width: 0;height: 1px;background: #ff4d11;left: 0;bottom: -1px;content: "";transition: all 0.5s;}
.case_s dl:hover dd:after{ width: 100%;}

.case_s dl dd h4{ display: block;float: left;width: 845px;}
.case_s dl dd h4 em a{display: block;font-size: 24px;line-height: 24px;color: #333333;margin-bottom: 13px;font-weight: normal;}
.case_s dl:hover dd h4 em a{color: #ff4d11; }
.case_s dl dd p{font-size: 14px;line-height: 24px;color: #666;font-weight: normal;width: 800px;}
.case_s dl dd .more{ float: right;display: block;width: ;height: 94px;line-height: 94px;border-left: 1px solid #e7e7e7;box-sizing: border-box;width: 155px;padding-left: 45px;color: #ff4d10;font-size: 16px;}
.case_s dl dd .more img{ width: 33px;height: 13px;vertical-align: middle;margin-left: 5px;}
.case_s dl.cur dt img{opacity: 1;}


.case_s .qh i{position: absolute;top: 253px;z-index: 1;width: 20px;height: 36px;cursor: pointer;}
.case_s .qh .prev{ left: 395px;}
.case_s .qh .next{ right: 395px;}



.news{ padding-top: 90px;height: 870px;box-sizing: border-box;}
.news_con{ margin-top: 40px;}
.news .bt{height: 65px;line-height: 65px;overflow: hidden;}
.news .bt span{font:12px arial;color: #999999;line-height: 59px;}
.news .bt span img{ width: 27px;height: 27px;vertical-align: middle;margin-right: 8px;}
.news .bt span a{font:24px "Microsoft Yahei";color: #333333;margin-right:7px;line-height: 65px;}
.news .bt em img{float:right;width: 46px;height: 10px;margin-top: 30px;}
.dongt{float:left;width:557px;}
.dongt dl{height: 415px;border-bottom:1px solid #ebebeb;position: relative;}
.dongt dl:after{ position: absolute;width: 0;height: 1px;background: #ff4d11;left: 0;bottom: -1px;content: "";transition: all 0.5s;}
.dongt dl:hover:after{ width: 100%;}
.dongt dt{font-size:0;line-height: 0;}
.dongt dt img{width:557px;height: 278px;}
.dongt dd{padding-top:18px;}
.dongt dd h4 a{height:29px;line-height:29px;font-size: 18px;color: #333333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;font-weight: normal;}
.dongt dl:hover dd h4 a{color:#ff4d11;}
.dongt dd p{font-size:14px;color: #999999;line-height: 24px;padding-top:9px;}
.dongt dd p a{ width: 6px;display: inline-block;height: 9px;
vertical-align: middle;margin-left: 8px;}
.dt_n{padding-top:13px;}
.dt_n li{height: 30px;line-height: 30px;font-size:14px;color: #333333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;padding:0 24px 0 20px;background: url(../images/new_dd3.png) no-repeat left center;}
.dt_n li a{color: #333;}
.dt_n li:hover a{color:#ff4d11;}
.dt_n li em{float:right; font:14px arial;color: #999999;line-height: 36px;}
.wt_c{float:right;width:577px;}
.wt_nr dl{height:103px;margin-bottom:34px;}
.wt_nr dd{float:left;width:395px;padding-left: 18px;box-sizing: border-box;padding-right: 38px;height: 103px;}
.wt_nr dd h4 a{display: block;height: 32px;line-height: 32px;font-size:18px;color: #333333;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;font-weight: normal;padding-top: 8px;}
.wt_nr dd p{font-size:14px;color: #999999;line-height: 24px;}
.wt_nr dt{float:right;font-size:0;line-height: 0;width:182px;height: 103px;overflow: hidden;}
.wt_nr dt img {width:182px;height: 103px;transition:all 0.3s;}
.wt_nr dl:hover dd{ background:#ff4d10 ;}
.wt_nr dl:hover dd h4 a,.wt_nr dl:hover dd p{color:#fff;}
.wt_nr dl:hover dt img{ transform: scale(1.06);}

.abt{ height: 964px;padding-top: 90px;background: url(../images/abt_bg.jpg) no-repeat top;box-sizing: border-box;}
.abt .tit{margin-bottom: 68px;}
.ab_fl{float:left;width:505px;overflow: hidden;}
.ab_fl h3 em{ display: block;font-size:54px;color: #ff4d11;font-weight: bold;line-height: 50px;font-weight: bold;text-transform: uppercase;}
.ab_fl h3 span{display: block;font-size:26px;color: #ff4d11;font-weight: normal;line-height: 26px;padding-top: 14px;position: relative;}
.ab_fl h3 span:after{ position: absolute;left: 0;height: 1px;width:86px; top:62px;background: #ff4d11;content: "";}

.ab_fl p{font-size:16px;color: #333333;line-height: 28px;padding-top:55px;height:152px;overflow: hidden;}
.ab_fl .more{display: block;width: 140px;height: 30px;background: url(../images/pro_jt.png) no-repeat 90px;border-radius: 15px;font-size: 16px;color: #ff4d10;line-height: 30px;text-indent: 20px;transition: all .3s;
       border: 1px solid #ff4d10; margin-bottom: 100px;}      
.ab_fl .more:hover {text-indent: 0;text-align: center;background: url(../images/pro_jt.png) no-repeat 150px;
        }
.fc_c{overflow: hidden;}
.fc_t{ position: relative;}
.fc_c h3{height: 40px;}
.fc_c h3 a{font-size:18px;color: #333333;padding-left:16px;background: url(../images/abt_h.png) no-repeat left center;display: inline;}
.fc_c li{float:left;font-size:0;line-height: 0;width:240px;margin-right: 20px;}
.fc_c li img{width:240px;height:180px;}
.fc_c li:last-child{margin:0;}
.ab_fr{float:right;margin-right:-359px;font-size:0;line-height: 0;}
.fc_c .zprev{ display: block;width: 8px;height: 16px;position: absolute;right: 30px;top: -30px;background: url(../images/zprev.png) no-repeat center;z-index: 10;cursor: pointer;}
.fc_c .znext{ display: block;width: 8px;height: 16px;position: absolute;right: 5px;top: -30px;background: url(../images/znext.png) no-repeat center;z-index: 10; cursor: pointer;}
.fc_c .zprev:hover{background: url(../images/zprevh.png) no-repeat center; }
.fc_c .znext:hover{background: url(../images/znexth.png) no-repeat center; }


html {font-size: 10px;}
@media screen and (min-width:800px) {
    html {
        font-size:11px;
    }
}
@media screen and (min-width:1024px) {
    html {
        font-size:13px;
    }
}
@media screen and (min-width:1280px) {
    html {
        font-size:14px;
    }
}
@media screen and (min-width:1440px) {
    html {
        font-size:16px;
    }
}
@media screen and (min-width:1600px) {
    html {
        font-size:18px;
    }
}
@media screen and (min-width:1920px) {
    html {
        font-size:20px;
    }
}

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