@charset "utf-8";
/*初始样式*/
body{ color:#333; font-size:14px;font-family: "Microsoft Yahei";} /*网站字体颜色*/
body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input{margin:0;padding:0;list-style:none;}
a { color:#333; text-decoration:none;font-family: "Microsoft Yahei";}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
/*a:hover { text-decoration:underline;}*/
img{border:none;}
.vam { vertical-align:middle;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
p{ word-spacing:-1.5px;font-family: "Microsoft Yahei"; }
h1,h2,h3,h4,h5,h6{ font-family:"Microsoft Yahei";}

.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative;}
i,em{ font-style:normal;}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden;}
.clearfix{zoom:1;}
/* -- 页面整体布局 -- */
.content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";}


.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:inline-block;font-size: 30px;color: #333;line-height:30px;font-weight: normal;}
.tit em{background:#f8b62b ;width: 30px;height: 2px;display: inline-block;vertical-align: top;margin: 17px 14px 0;}
.tit i{display:block;font-size: 40px;line-height:40px;color: #333;margin-top: 18px;font-weight: bold;}

/*banner*/
.banner{position: relative;}
.banner li{width: 100%;}
.banner li img{display: block;width: 100%;}
.banner .content{position: relative;}
.ban_pg{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;}
.ban_pg i{display: inline-block;width: 14px;height: 14px;background: #fff;margin:0 10px;border-radius: 7px;}
.ban_pg i.on{background: #f8b62b;}




.search{height: 85px;border-bottom: 1px solid #dfdfdf;}
.search p{float: left;height: 85px;line-height: 85px;font-size: 14px;color: #666666;}
.search p b{ color: #5c5c5c;float: left;font-weight: bold;margin-right: 12px;padding-left: 34px;background: url(../images/hot.png) no-repeat center left;}
.search p a{ font-size:14px ;display: block;float: left;color: #a2a2a2;line-height: 85px;margin-right: 35px;}
.search p a:hover{color: #f8b62b;}
.s_box{float: right;width: 300px;height: 85px;position: relative;border-bottom: 1px solid #f8b62b;}
.s_box .txt{float:left;width:258px;height:85px;line-height: 85px;font-size:14px;color:#333;border:none;background: none;outline: 0;}
.s_box .btn{float: left;width:42px;height: 42px;border: 0;background: url(../images/sea.png) no-repeat center;outline: 0;cursor: pointer;margin-top: 20px;position: relative;}
.s_box:before { position: absolute; content: ""; width: 1px; height:24px; background: #e2e2e2;right: 70px; top: 30px; transition: .3s ease; -o-transition: .3s ease; }

.yz{ padding: 80px 0 0;box-sizing: border-box;}
.yz dl{ height: 287px; }
.yz dt{display: block;width: 520px;height: 287px;overflow: hidden;float: right;}
.yz dt img{ display: block;width: 520px;height: 287px;transition: all 0.5s;}
.yz dt:hover img{ transform: scale(1.05); }
.yz dd{ float: left;width: 620px;height: 287px; }
.yz dd h3{ font-size: 24px;line-height: 24px;color: #333333; font-weight: normal;}
.yz dd h4{ font-size: 36px;line-height: 36px;color: #333333;padding-top: 15px;font-weight: bold; position: relative;}
.yz dd h4:before { position: absolute; content: ""; width: 42px; height:3px; background: #f8b62b;left: 0px; top: 75px; transition: .3s ease; -o-transition: .3s ease; }
.yz dd p{ font-size: 16px;line-height: 30px;color: #666666;padding-top: 44px; }

.yz h2{ font-size: 22px;line-height: 22px;color: #333333;padding-top: 15px;font-weight: bold; position: relative;}
.yz h2 b{ font-size: 14px; }
.yz ul{ margin-top: 28px;position: relative;}
.yz ul:before { position: absolute; content: ""; width: 1200px; height:1px; background: #e5e5e5;left: 0px; top: 0px; transition: .3s ease; -o-transition: .3s ease; }
.yz li{ float: left;position: relative;transition:all 0.3s;margin-right: 74px;font-size: 14px;line-height: 24px;color: #666;position: relative;padding-top: 20px;}
.yz li:before { position: absolute; content: ""; width: 10px; height:10px; background: #cccccc;left: 0px; top: -8px; transition: .3s ease; -o-transition: .3s ease;border-radius: 8px;border: 3px solid #fff; }
.yz li:last-child{ margin-right: 0; }
.yz li.cur:before{ background: #f8b62b; }
.yz li.cur{ color:#f8b62b;   }


.pro .tit{padding-top: 80px;background: #f5f5f5;height: 138px;margin-top: 80px;}
.pro_wz{height: 750px;background:url(../images/pro_bg.jpg) no-repeat center;padding-top: 130px;box-sizing: border-box; }
.pro_pic{ float:right;width:463px;}
.pro_bd{ float:left;width:703px;}
.pro_t li a{ float: left;min-width: 156px;padding:0 10px;height: 50px;line-height: 50px;background: #fff;margin-right: 5px;font-size: 20px;color: #333;font-weight: bold;text-align: center; }
.pro_t li:first-child a{ border-radius: 5px 0 0 5px; }
.pro_t li:last-child a{ border-radius:0 5px 5px 0; }
.pro_t li.cur a{ background: #f8b62b; }
.pro_b{width: 620px;margin-top: 20px;}
.pro_b li a{ font-size: 15px;color: #ffffff;line-height: 36px;float: left;margin-right: 32px; }
.pro_b li:nth-child(5n) a{ margin-right: 0; }
.pro_z{ margin-top: 70px;width: 696px; }
.pro_z li{ width: 150px;height: 122px;border: 1px solid #FFFFFF;border-radius: 8px; margin-right: 24px;margin-bottom: 21px;padding-left: 20px;padding-top: 18px;box-sizing: border-box;float: left;}
.pro_z li em{ display: block;width: 45px;height: 36px;overflow: hidden; }
.pro_z li em img{ display: block;width: 45px;height: 36px; transition: all 0.3s;}
.pro_z li span{ font-size: 16px;line-height: 22px;color: #fff;display: block;margin-top: 8px; }
.pro_z li.cur em img:nth-child(1){margin-top: -36px;}
.pro_z li.cur{ border-color: #f8b62b;background: #f8b62b; }
.pro_z li.cur span{ color: #333;font-weight: bold; }


.pro_s{padding-top: 50px;background: #f5f5f5;height: 650px;}
.pro_con li{ float: left;width: 270px;height: 265px;position: relative;margin-right: 26.6px;margin-top:10px;}
.pro_con li:nth-child(4){ margin-right: 0;}
.pro_con li i{ display: block;width: 270px;height: 265px;overflow: hidden;}
.pro_con li i>img{ display: block;width: 270px;height: 265px;transition: all 0.5s;}
.pro_con li:hover i img{ transform: scale(1.05); }
.pro_con li h4{ display: block;height: 60px;line-height: 60px;font-weight: normal;font-size: 15px;color: #ffffff;position: absolute;left:0;bottom: 0;background:url(../images/pro_jia.png) no-repeat 230px 21px #333333;width: 100%;text-align: center;border-radius: 10px 10px 0px 0px;}
.pro_d{ height: 150px;box-shadow:0 0 18px rgba(0,0,0,0.15);margin-top: 50px; }
.pro_d li{ float: left;width: 300px;height: 150px;position: relative; }
.pro_d li img{ display: block;width: 300px;height: 150px; }
.pro_d li:before { position: absolute; content: ""; width: 1px; height:82px; background: #e5e5e5;right: 0px; top: 34px; transition: .3s ease; -o-transition: .3s ease; }
.pro_d li:last-child:before{ background: 0; }

.pz{padding-top: 70px;}
.pz dl{ margin-top: 68px; }
.pz dt{ display: block;width: 600px;height: 634px;overflow: hidden;float: left; }
.pz dt img{ display: block; width: 600px;height: 634px;transition: all 0.3s;}
.pz dt:hover img{ transform: scale(1.05); }
.pz dd{ float: right;width: 600px;height: 634px; }
.pz .pz_z{ width: 600px;height:494px;background: url(../images/pz_dd.png) no-repeat center;  }
.pz .pz_z li{ float: left;width: 300px;height: 247px; overflow: hidden;padding-top: 26px;box-sizing: border-box;}
.pz .pz_z li img{ display: block;width: 109px;height: 109px;margin: 0 auto; transition: all 0.5s;}
.pz .pz_z li b{ display: block;font-size: 22px;line-height: 30px;color: #333333;text-align: center;padding-top: 16px;transition: all 0.5s;position: relative; }
.pz .pz_z li:hover b:after{ position: absolute; content: ""; width: 30px; height:2px; background: #f8b62b;right: 50%; top: 90px; transition: .3s ease; -o-transition: .3s ease;margin-right: -15px;  }
.pz .pz_z li span{ opacity:0; transition: all 0.5s;font-size: 14px;line-height: 24px;text-align: center;padding: 38px 22px 0;text-align: center;display: block;}
.pz .pz_z li:hover img{opacity: 0;transform: translateY(-100%);}
.pz .pz_z li:hover b{transform: translateY(-108px);}
.pz .pz_z li:hover span{opacity: 1;transform: translateY(-108px);}
.pz .pz_s{ width: 600px;height:140px; background: #f8b62b; }
.pz_s li{ float: left;width: 200px;padding-top: 40px;box-sizing: border-box;}
.pz_s li img{ display: block;width: auto;height: 24px;margin: 0 auto; }
.pz_s li span{ display: block;font-size: 18px;line-height: 18px;color: #000000;text-align: center;padding-top: 18px; }


.ys{ padding-top: 80px; }
.ys_t{ margin-top: 46px;}
.ys_t li{ float: left;margin-right: 150px;position: relative;height: 55px;}
.ys_t li:after{  position: absolute; content: ""; width: 100%; height:2px; background: #eaeaea;left:0; bottom: 0px; transition: .3s ease; -o-transition: .3s ease;}
.ys_t li.on:after{ background: #f8b62b; }
.ys_t li:last-child{ margin-right: 0; }
.ys_t li i{ overflow: hidden;width: auto;height: 43px;display: inline-block;margin-right: 14px;}
.ys_t li i img{width: auto;height: 43px;display: block;transition:all 0.5s;}
.ys_t li.on i img:nth-child(1){ margin-top: -43px; }
.ys_t li span{ display: inline-block;font-size:12px;color: #d0d0d0;line-height: 12px;text-transform: uppercase;}
.ys_t li span b{ display: block;font-size: 22px;line-height: 22px;margin-bottom: 8px;color: #333; }

.ys_con{position: relative;margin-top:20px; }
.ys_con .tempWrap{ overflow: visible!important; }
.ys_con dl{ position: relative; }
.ys_con dt,.ys_con dt img{ display: block;width: 100%; }
.ys_con dl dd{position: absolute;left: 50%;bottom:75px;height: 150px;overflow: hidden;width: 1200px;background:#fff;margin-left: -600px;border-radius: 8px;}
.ys_con dl dd h3{display: block;padding-top: 50px;font-weight: normal;float: left;background: #f8b62b;width: 250px;height: 150px;box-sizing: border-box;padding-left: 38px; }
.ys_con dl dd h3 i{ overflow: hidden;width: 55px;height: 53px;display: inline-block;margin-right: 20px;}
.ys_con dl dd h3 i img{width: auto;height: 53px;display: block;transition:all 0.5s;}
.ys_con dl dd h3 span{ display: inline-block;font-size:12px;color: #ca962d;line-height: 12px;text-transform: uppercase;}
.ys_con dl dd h3 span b{ display: block;font-size: 24px;line-height: 24px;margin-bottom: 8px;color: #333; }
.ys_con dl dd p b{ display: block;font-size: 18px;line-height: 18px;margin-bottom: 10px;color: #333; }
.ys_con dl dd p{ font-size: 14px;line-height: 24px;color: #666666;float: left;width: 780px;float: left;padding: 30px 0px 0 45px;box-sizing: border-box;}
.qh{ position: absolute;left: 50%;bottom:120px;overflow: hidden;width: 1200px;margin-left: -600px;border-radius: 8px; }
.sprev,.snext{display: block;width:32px;height: 33px;float: left; }
.sprev{ margin-left: 1076px; }
.snext{ margin-left: 10px; }
.ys_pg{position: absolute;width: 100%;right: 0;bottom: -11px;z-index: 10;height: 22px;text-align: center;}
.ys_pg i{display: inline-block;width: 22px;height: 22px;border-radius: 100%;box-sizing: border-box;margin:0 80px;background: #f8b62b;border:5px solid #fff;}
.ys_pg i.cur{background: #ffffff;border-color:#f8b62b;box-sizing:border-box; }


.case{padding: 80px 0 80px;}
.case_z{margin-top: 40px; }
.case_z li{ display: block;font-size: 15px;color: #333333;padding: 0 22.5px;position: relative;text-align: center;float: left; }
.case_z li a{ font-size: 15px;color: #333;position: relative; }
.case_z li:after{ position: absolute;right: 0px;top:3px;width: 1px;height: 15px;background: #e5e5e5;content: ""; }
.case_z li:first-child{ padding-left: 0; }
.case_z li:last-child { padding-right: 0; }
.case_z li:last-child:after{ background: 0; }
.case_z li.cur a{font-weight: bold;color: #f8b62b;}
.case_z li a:after{  position: absolute; content: ""; width: 0; height:3px; background: #f8b62b;left:0; top: 27px; transition: .3s ease; -o-transition: .3s ease;}
.case_z li.cur a:after{ width: 100%; }
.case_con{ margin-top: 45px;height: 554px; }
.case_l{width: 800px;box-shadow: 0 3px 5px 3px rgba(0,0,0,0.1);position: relative;float: left;}
.case_l dl{width: 800px;height: 554px;background: #fff;}
.case_l dl dt{width: 800px;height: 451px;line-height: 0;overflow: hidden;}
.case_l dl dt img{width: 800px;height: 451px;}
.case_l dl dd{width: 800px;padding: 20px 40px 0;height: 92px;box-sizing: border-box;background: url(../images/case_jia.png) no-repeat 708px 28px;}
.case_l dl dd h3{height: 28px;line-height: 28px;overflow: hidden;font-weight: normal;display: block;}
.case_l dl dd h3 a{font-size: 22px;color: #333333;display: block;}
.case_l dl dd p{font-size: 14px;color: #666666;padding: 8px 0 0;}
.case_r{width: 370px;float: right;border-top: 2px solid #434343;border-bottom: 2px solid #434343;}
.case_r h3{width: 360px;height: 60px;line-height: 0;padding-top: 30px;margin-bottom: 24px;}
.case_r dl{width: 450px;margin: 0 auto 2px;padding: 13px 22px 13px 80px;height: 107px!important;box-sizing: border-box;position: relative;z-index: 50;margin-left: -80px;}
.case_r dl dt{width: 145px;height: 81px;float: right;line-height: 0;overflow: hidden;}
.case_r dl dt img{width: 145px;height: 81px;}
.case_r dl dd{width: 170px;float: left;padding: 10px 0 0;}
.case_r dl dd a{display: block;}
.case_r dl dd span{width: 100%;display: block;font-size: 18px;color: #333;height: 30px;line-height: 30px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;font-weight: bold;}
.case_r dl dd em{display: block;font-size: 14px;color: #666666;height: 30px;line-height: 30px;overflow: hidden;}
.case_r dl.on{background: #f8b62b;}


.coop{ padding: 80px 0;background: #F7F7F7; }
.coop .tit span{ font-size: 40px;line-height: 40px;display: inline-block;font-weight: bold; }
.coop .tit  em{background:#f8b62b ;width: 30px;height: 2px;display: inline-block;vertical-align: top;margin: 20px 14px 0;}
.coop_list{position: relative;margin-top: 50px;}
.coop_list li{float: left;width: 240px;margin-right: -1px;}
.coop_list li i{display: block;border: 1px solid #d9d9d9;margin-bottom: -1px;overflow: hidden;}
.coop_list li i img{display: block;width: 100%;filter: grayscale(100%);transition: all 0.5s;}
.coop_list li i:hover{box-shadow: 0 0 20px rgba(0,0,0,0.1);position: relative;z-index: 1;}
.coop_list li i:hover img{transform: scale(1.05);filter: grayscale(0);}
.coop_list .prev{position: absolute;left: -50px;top: 50%;transform: translateY(-50%);font-size: 0;}
.coop_list .next{position: absolute;right: -50px;top: 50%;transform: translateY(-50%);font-size: 0;}
.coop_list .tempWrap{width: 1196px !important;}
.coop_list ul{padding-bottom: 1px !important;}


.xad{height: 350px;background:url(../images/xad_bg.jpg) no-repeat center;padding-top: 65px;box-sizing: border-box; }
.xad_l{ float: left;width: 700px; }
.xad_l h2{ font-weight: normal;font-size: 20px;line-height: 50px;color: #333; }
.xad_l h2 b{display: inline-block;font-weight: normal;font-size: 24px;line-height: 50px;color: #fff;margin-right: 42px;}
.xad_l h3{ font-weight: normal;padding-left: 30px;margin-top: 20px;padding-top: 30px;box-sizing: border-box;background: url(../images/xad_dd.png) no-repeat left top;height: 133px;box-sizing: border-box; }
.xad_l h3 b{display: block;font-weight: normal;font-size: 30px;line-height: 30px;color: #000;}
.xad_l h3 b img{ display: inline-block;width: 34px;height: 10px;vertical-align: bottom;margin-left: 10px; }
.xad_l h3 span{display: block;font-weight: normal;font-size: 30px;line-height: 30px;color: #f8b62b;padding-top: 14px;font-weight: bold;}
.xad p{ width: 360px;float: right;padding-top: 150px;font-size: 20px;color: #000;line-height: 20px;color: #000;text-align: right;font-size:600; }
.xad p a{ display: block;width: 135px;line-height: 45px;height: 45px;background: #f8b62b;text-align: center;font-size: 16px;color: #333333;margin-bottom: 18px;margin-left: 225px;}


.news{padding: 80px 0 100px;}
.news .tit{ margin-bottom: 50px; }
.news h3{margin-bottom: 20px;height: 54px;border-bottom: 1px solid #dcdcdc;}
.news h3 a{display: inline-block;font-size: 26px;color: #333;line-height: 28px;padding-left: 15px;border-left: 5px solid #f8b62b;}
.new_l{float: left;width: 770px;}
.new_l dl{height: 182px;position: relative;}
.new_l dt{float: left;width: 300px;height: 182px;overflow: hidden;}
.new_l dt img{width: 300px;height: 182px;transition: all 0.5s;}
.new_l dt:hover img{transform: scale(1.05);}
.new_l dd{float: left;width: 324px;margin-left: 28px;}
.new_l dd h4{font-size: 17px;color: #333;line-height: 17px;padding: 18px 0 15px;}
.new_l dd h4 a{ color:#333;}
.new_l dd p{font-size: 14px;color: #888;line-height: 24px;}
.new_l dd .more{display: block;width: 132px;height: 32px;line-height: 32px;text-align: center;font-size: 14px;color: #333;background: #f8b62b;margin-top: 28px;}
.new_l dd i{position: absolute;right: 0;top: 48px;width: 65px;padding-left: 20px;height: 62px;border-left: 1px solid #d2d2d2;font-size: 14px;color: #333;line-height: 14px;font-family: Arial;text-align: center;}
.new_l dd i em{display: block;font-size: 40px;line-height: 30px;padding-bottom: 18px;}
.new_l ul{margin-top: 50px;border-top: 1px dashed #d0d0d0;padding-top: 36px;}
.new_l li{width: 362px;float: left;padding-left: 20px;position: relative;}
.new_l li:after{position: absolute;width: 10px;height: 10px;border: 2px solid #d2d2d2;border-radius: 100%;content: "";left: 0;top: 7px;box-sizing: border-box;}
.new_l li h4{font-size: 14px;color: #333;line-height: 24px;font-weight: normal;margin-bottom: 8px;}
.new_l li p{font-size: 14px;color: #888;line-height: 24px;}
.new_l li:last-child{margin-right: 0;}
.new_r{float: right;width: 355px;margin-top: -80px;}
.new_r h3{margin-bottom: 34px;}
.new_r li{margin-bottom: 48px;padding-left: 20px;}
.new_r li h4{font-size: 14px;color: #333;line-height: 24px;font-weight: normal;margin-bottom: 8px;}
.new_r li p{font-size: 14px;color: #888;line-height: 24px;}
.new_r .tempWrap{height: 336px !important;}
.new_l li h4:hover a,.new_r li h4:hover a,.new_l dl:hover h4 a{color: #f8b62b;}
.newstit{height: 58px;margin-bottom: 25px; border-bottom: 1px solid #e5e5e5;width: 770px;float: left;}
.newstit li{color:#333333;line-height: 58px;display: block;font-size: 18px;position: relative;font-weight: normal;float:left;width:140px; }
.newstit li a{font-size: 26px;color: #333;line-height: 28px;padding-left: 15px;border-left: 5px solid #f8b62b;text-decoration: none;}
.newstit li em{width:30px;height:25px;overflow: hidden; float: left;position: relative;margin-right:8px;margin-top:17px;}
.newstit li em img{position: absolute;left:0;top:-25px;width:30px;}
.newstit span{float: right; font-size: 14px;color:#333333;margin-top: 25px;}
.newstit li.cur a{font-weight: bold;color:#f8b62b;}
.newstit li.cur em img{top:0;}


.abt dt{width: 960px;height: 582px;overflow: hidden;margin-right: -360px;float: right;}
.abt dt img{width: 960px;height: 582px;transition: all 0.5s;}
.abt dt:hover img{transform: scale(1.05);}
.abt dd{ width: 960px;height: 582px;overflow: hidden;margin-left: -360px;float: left;background: #f7f7f7;padding-left: 360px;box-sizing: border-box;}
.abt dd h3 span{display:block;font-size: 30px;color: #333;line-height:30px;font-weight: normal;padding-top: 100px;position: relative;}
.abt dd h3 span:after{ position: absolute;left: 212px;top:114px;width: 30px;height: 2px;background: #f8b62b;content: ""; }
.abt dd h3 i{display:block;font-size: 40px;line-height:40px;color: #333;margin-top: 18px;font-weight: bold;}
.abt dd p{font-size: 15px;color: #666666;line-height: 30px;margin: 40px 0 0;width: 552px;}
.abt dd .more{display: block;width: 130px;height: 45px;line-height: 45px;text-align: center;font-size: 16px;color: #333;background: #f8b62b;margin-top: 42px;}


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