@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";}
.links{ display:block!important;}

.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:block;font-size: 46px;color: #434343;line-height: 46px;position: relative;font-weight: bold;font-family: 思源黑体 CN;}
.tit span:after{ position: absolute;left: 50%;margin-left: -15px;top: 60px;width:30px ;height: 4px;background: #e77918;content: "";}
.tit i{display:block;font-size: 20px;color: #707070;line-height: 20px;padding-top: 35px;}

.banner{height: 700px;position: relative;}
.bdu{width: 100% !important;height: 700px;}
.bdu li{width: 100% !important;height: 700px;position:relative;}
.bdu li a{display: block;height: 700px;}
.bdu li img{height:700px;margin-left: -960px;position:absolute;left:50%;}
.banner .sprev{position:absolute; left:5%; top:300px;  width: 50px; height: 50px;background: rgba(0,0,0,0.5); border-radius: 25px;display: block;transition: all .36s ease;}
.banner .snext{position:absolute; right:5%; top:300px;   width: 50px; height: 50px;background: rgba(0,0,0,0.5); border-radius: 25px;display: block;transition: all .36s ease;}
.banner .sprev:hover,.banner .snext:hover{ background: #ee7b16;}
.banner .sprev i{ width:12px;height:18px; background:url(../images/zuo.png) no-repeat;z-index: 100;margin-top: 16px; margin-left: 17px;display: block;}
.banner .snext i{width:12px;height:18px; background:url(../images/you.png) no-repeat;z-index: 100;margin-top: 16px; margin-left: 21px;display: block;}
.hdu{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;}
.hdu li{ width: 6px;height: 6px;background: rgba(0, 0, 0, .5);margin-bottom: 20px;border-radius: 4px;position: relative;cursor: pointer;margin-left: 18px;text-align: center; display: inline-block;}
.hdu li em{width: 16px;height: 16px;display: block;position: absolute;top: -5px;left: -5px;border-radius: 8px;border: 0;background: rgba(0, 0, 0, 0.4);opacity: 0;}
.hdu li.on em:after{  content: '';height: 6px;width: 6px;background: #fff;display: block;position: absolute;
top: 5px;left: 5px;border-radius: 10px;}
.hdu li.on em{opacity: 1;}


.search{height: 75px;}
.search p{float: left;height: 75px;line-height: 75px;font-size: 16px;color: #535353;}
.search p b{ color: #535353;float: left;}
.search p a{ font-size:16px ;display: block;float: left;color: #535353;line-height: 75px;margin-right: 18px;}
.s_box{float: right;margin-top:18px;width: 420px;height: 41px;background: 0;}
.s_box .input1{float:left;width:332px;height:41px;line-height: 41px;font-size:14px;color:#333;border:0;outline: 0;padding-left: 20px;background: #f3f3f3;}
.s_box .input2{float: left;width:59px;height: 41px;border: 0;background: url(../images/sea.jpg) no-repeat center;outline: 0;cursor: pointer;}



.yz{height: 444px;background: url(../images/yz_bg.jpg) no-repeat center;}
.yz dl{ padding-top: 36px;}
.yz dt{ display: block;width: 498px;height: 360px;float: left;overflow:hidden;}
.yz dt img{ display: block;width: 498px;height: 360px;transition:all 0.5s;}
.yz dt:hover img{ transform:scale(1.08);}
.yz dd{ width: 638px;float: right;}
.yz dd h3{display: block;font-size: 40px;line-height: 40px;color: #434343;font-weight: bold;margin-top: 46px;}
.yz dd h3 b{ color: #e77918;}
.yz dd h4{display: block;font-size: 24px;line-height: 24px;color: #434343;font-weight: normal;margin-top: 12px;}
.yz dd p{font-size:16px ; color:#535353 ; line-height: 28px;margin-top:28px ;}
.yz_z{ margin-top: 45px;}
.yz_z li{ float: left;font-size: 48px; line-height: 48px; color: #333333; font-weight: bold;padding:0 46px 0 19px;background: url(../images/yz_line.png) no-repeat right;box-sizing: border-box;}
.yz_z li:first-child{ padding-left: 0;}
.yz_z li:last-child{ padding-right: 0;background: 0;}
.yz_z li b{ display: inline-block; font-size: 46px; line-height: 46px; color: #e77918; font-family: "Arial";letter-spacing:-2px;}
.yz_z li i{ display: inline-block; line-height: 24px; font-size:24px ; color: #434343;vertical-align: middle;font-weight: bold;margin-left: 4px;}
.yz_z li span{ display: block;font-size: 16px; line-height:16px; color: #1b1b1b; font-weight:bold;margin-top: 4px;}

.pro{ padding-top: 75px;}
.pro1{ padding-top: 80px;height: 640px;}
.pro1 dt{ display: block;width: 479px;height: 640px;overflow:hidden;}
.pro1 dt img{ display: block;width: 479px;height: 640px;transition:all 0.5s;}
.pro1 dt:hover img{ transform:scale(1.08);}
.pro1 dd{width: 665px;}
.pro1 dd h2 a{padding-left: 54px;display: block;height:60px;line-height: 60px;font-size: 34px;color: #000000;font-weight: normal;background: url(../images/pro1_dd.png) no-repeat left;}
.pro1 dd h3{ display: block;font-size: 24px;color: #333333;padding-top: 35px;line-height:24px ;}
.pro1 dd p{ display: block;font-size: 16px;color: #333333;padding-top: 10px;line-height:26px ;}
.pro1 dd ul{ margin-top:40px ;}
.pro1 dd ul li{ width: 312px;border: 1px solid #eeeeee;height: 416px;float: left;position: relative;}
.pro1 dd ul li i{ display: block;width: 312px;height: 416px;overflow:hidden;}
.pro1 dd ul li img{ display: block;width: 312px;height: 416px;transition:all 0.5s;}
.pro1 dd ul li:hover img{transform:scale(1.08);}

.pro1 dd ul li h4{ display: block;position: absolute;bottom: 0px;left: 0;height: 60px;line-height: 60px;padding-left: 18px;width: 294px;font-size: 18px;color: #333333;font-weight: normal;background:url(../images/pro_ic.png) no-repeat  270px 19px #eee;}
.pro1 dd ul li:hover{ border-color: #e77918;}
.pro1 dd ul li:hover h4{background:url(../images/pro_ich.png) no-repeat  270px 19px #e77918;color: #1b1b1b;}
.pro1 dd ul li:nth-child(2n){ float: right;}

.pro2{ margin-top: 60px;padding:90px 0 0;height: 800px;background: url(../images/pro2_bg.jpg) no-repeat center;}
.pro2 dl{ height: 640px;}
.pro2 dt{ display: block;width: 479px;height: 640px;overflow:hidden;}
.pro2 dt img{ display: block;width: 479px;height: 640px;transition:all 0.5s;}
.pro2 dt:hover img{ transform:scale(1.08);}
.pro2 dd{width: 665px;}
.pro2 dd h2 a{padding-left: 40px;display: block;height:61px;line-height: 61px;font-size: 34px;color: #000000;font-weight: normal;background: url(../images/pro2_dd.png) no-repeat left;}
.pro2 dd h3{ display: block;font-size: 24px;color: #333333;padding-top: 35px;line-height:24px ;}
.pro2 dd p{ display: block;font-size: 16px;color: #333333;padding-top: 10px;line-height:26px ;}
.pro2 dd ul{ margin-top:15px ;}
.pro2 dd ul li{ width: 312px;border: 1px solid #eeeeee;height: 416px;float: left;position: relative;}
.pro2 dd ul li i{display: block;width: 312px;height: 416px;overflow:hidden; }
.pro2 dd ul li img{ display: block;width: 312px;height: 416px;transition:all 0.5s;}
.pro2 dd ul li:hover img{ transform:scale(1.08);}
.pro2 dd ul li h4{ display: block;position: absolute;bottom: 0px;left: 0;height: 60px;line-height: 60px;padding-left: 18px;width: 294px;font-size: 18px;color: #333333;font-weight: normal;background:url(../images/pro_ic.png) no-repeat  270px 19px #fff;}
.pro2 dd ul li:hover{ border-color: #e77918;}
.pro2 dd ul li:hover h4{background:url(../images/pro_ich.png) no-repeat  270px 19px #e77918;color: #1b1b1b;}
.pro2 dd ul li:nth-child(2n){ float: right;}
.pro2 .gd{ height: 60px;background: #fff;margin-top: 30px;position: relative;}
.pro2 .gd:after{ position: absolute;left: -20px;top: 60px;content: "";background: url(../images/gd_bg.png) no-repeat center;width: 1240px;height: 40px;}
.pro2 .gd b{ display: block;float: left;width:190px ;height:60px ;line-height: 60px;font-size: 18px;color: #1b1b1b;text-align: center;background: #ea8112;}
.pro2 .gd a{ display: block;float: left;padding: 0 24px;font-size: 16px;height: 18px;line-height: 18px;border-right: 1px solid #666666;margin-top: 24px;color: #666666;}
.pro2 .gd a:last-child{ color: #e77918;font-weight: bold;border-right: 0;}

.pro3{ padding-top: 80px;}
.pro3  h2 a{display: block;height:60px;line-height: 60px;font-size: 34px;color: #000000;font-weight: normal;background: url(../images/pro3_dd.png) no-repeat center;text-align: center;}
.pro3 p{ display: block;font-size: 16px;color: #333333;padding-top: 20px;line-height:26px ;text-align: center;}
.pro3_con{ margin-top:28px ;position: relative;margin-bottom: 80px;}
.pro3 ul li{ width: 284px;border: 1px solid #eeeeee;height: 380px;float: left;position: relative;margin-right: 18px;}
.pro3 ul li i{ display: block;width: 284px;height: 380px;overflow:hidden;}
.pro3 ul li img{ display: block;width: 284px;height: 380px;transition:all 0.5s;}
.pro3 ul li:hover img{transform:scale(1.08);}
.pro3 ul li h4{ display: block;position: absolute;bottom: 0px;left: 0;height: 60px;line-height: 60px;padding-left: 18px;width: 266px;font-size: 18px;color: #333333;font-weight: normal;background:url(../images/pro_ic.png) no-repeat  243px 19px #eee;}
.pro3 .dprev{position: absolute;left:-75px;top:130px;width:34px;height: 67px;background:url(../images/dprev.png) no-repeat;z-index: 10;}
.pro3 .dnext{position: absolute;right:-75px;top:130px;width:34px;height: 67px;background:url(../images/dnext.png) no-repeat;z-index: 10;}
.pro3 .dprev:hover{ background:url(../images/dprevh.png) no-repeat;}
.pro3 .dnext:hover{ background:url(../images/dnexth.png) no-repeat;}

.xad{ background: url(../images/xad.jpg) no-repeat center;height: 240px;}
.xad .xad_con{  padding-top: 87px;float: right;}
.xad .zx{margin-right: 158px;color: #fffefe;font-size: 20px;line-height: 20px;font-weight: bold;float: right;height: 20px;display: block;}
.xad p{margin-top: 51px;font-size:18px ;line-height: 18px;color: #fff;width: 328px;}
.xad p b{ font-size: 30px;font-family: 思源黑体 CN;}



.ys{ background: url(../images/ys_bg.jpg) no-repeat center;height: 850px;}
.ys .tit{ padding-top: 75px;}
.ys .content{ position: relative;}
.ys_con{margin-top: 125px; }
.ys dt img{ display: block; width: 792px; height: 445px; } 
.ys dd{ width: 320px; margin-left: 45px; font-size:14px ; color: #7d7d7d; line-height:28px ;}
.ys dd h3{ display: block;font-size: 28px;line-height: 28px;color: #303030;padding-bottom: 10px;}
.ys dd h3 b{ color: #e77918;}
.ys dd p{ display: block;font-size: 14px;line-height: 28px;color: #7d7d7d;}
.ys dd p b{ color: #474747;}
.ys_t { position: absolute; top:400px ; left: 408px;}
.ys_t li{ width: 145px; height: 45px; color: #1b1b1b; line-height: 45px; font-size: 20px; text-align: center; background: rgba(255,255,255,0.8); margin-bottom: 4px; position: relative;}
.ys_t li:hover:after,.ys_t  li.cur:after{ position: absolute;width: 12px;height:14px; content: "";left:0;margin-left: -11px;top: 16px;background:url(../images/san.png) no-repeat ;}
.ys_t li:hover,.ys_t li.cur{ background: #e77918; color: #fff;}



.td{ background: url(../images/td_bg.jpg) no-repeat center;height: 658px;}
.td .tit{ padding-top: 100px;}
.td .tit span b{ color:#f17513;}
.td .tit span,.td .tit i{ color: #fff;}
.td .tit span:after{ background: #e77918;}
.td ul{ margin-top: 54px;}
.td ul li{float: left;width: 240px;margin-right: 80px;}
.td ul li img{ display: block;width: 93px;height: 115px;margin: 0 auto;}
.td ul li span{display:block;font-size: 28px;color: #ee7b16;line-height: 28px;position: relative;font-weight: bold;padding-top: 18px;text-align: center;}
.td ul li span:after{ position: absolute;left: 50%;margin-left: -16px;top: 72px;width:32px ;height: 3px;background: #fff;content: "";}
.td ul li i{display:block;font-size: 16px;color: #dcdcdc;line-height: 28px;padding-top: 55px;text-align: center;width: 220px;margin: 0 auto;}
.td ul li:last-child{ margin-right: 0;}


.case .tit{ padding-top: 80px;}
.case_con{ margin-top: 24px;position: relative;}
.case_con .case_qie{ width: 288px; height: 513px; overflow: hidden; position: relative; float: left;margin-right: 14px;border: 2px solid #eeeeee;}
.case_con .case_qie a{ display: block;}
.case_con .case_qie img{ width: 100%;}
.case_con .case_qie dl{height: 513px;position: absolute; bottom: -417px; transition: all .8s ease; background:url(../images/bei.png) no-repeat center 26px; width:100%; }
.case_con .case_qie dl dt{ font-size: 19px;color: #fff; line-height: 26px; padding: 34px 15px 0; text-align: center;position: relative;}
.case_con .case_qie:hover dt{ padding-top: 80px;line-height: 26px;font-size: 19px;display: block;text-align: center;margin: 0 auto;}
.case_con .case_qie dl dt:after{ position: absolute;left: 50%;top: 150px;width:30px;height: 2px;margin-left: -15px;content: "";background: #fff;}
.case_con .case_qie dl dd{display: none; margin-top: 55px;}
.case_con .case_qie dl dd p{ font-size: 14px; color: #fff; line-height: 24px; width: 214px;margin: 0 auto 10px;max-height:96px;overflow:hidden; }
.case_con .case_qie dl dd span{ display: block;width: 114px;height: 36px;line-height: 36px;margin: 22px auto 0;border: 1px solid #fff;font-size:16px;color: #fff;text-align: center;}
.case_con .case_qie:hover{ border: 2px solid #a3bef5;}
.case_con .case_qie:hover dl dd{ font-size: 14px; color: #fff; line-height: 24px;display: block; }
.case_con .case_qie:hover dl{ bottom: 0px; background: rgba(0,0,0,0.56);}
.case .bprev{position: absolute;left:-75px;top:217px;width:34px;height: 67px;background:url(../images/dprev.png) no-repeat;z-index: 10;}
.case .bnext{position: absolute;right:-75px;top:217px;width:34px;height: 67px;background:url(../images/dnext.png) no-repeat;z-index: 10;}
.case .bprev:hover{ background:url(../images/dprevh.png) no-repeat;}
.case .bnext:hover{ background:url(../images/dnexth.png) no-repeat;}


.news{ background: url(../images/news_bg.jpg) no-repeat center;height: 806px;margin-top: 72px;}
.news .tit{ padding-top: 60px;}

.company { width: 808px; height: 499px; background: #fff; box-shadow: 0 0 40px 0 rgba(4, 0, 0, .04); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 56px 53px 0 46px ;}
.company li { width: 412px; height: 108px; border-top: 1px solid #E3E3E3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; }
.company li span { display: block; width: 76px; padding-top: 30px; float: left; font-size: 16px; line-height: 100%; color: #666; font-family: arial; text-align: right; margin-right: 37px; }
.company li span i { display: block; font-size: 30px; line-height: 100%; color: #333 ;}
.company li h4 { font-size: 14px; line-height: 18px; color: #333; padding-top: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.company li p { font-size: 13px; line-height: 24px; color: #666; margin-top: 7px; }
.company li:first-child { width: 254px; height: 326px; float: left; margin-right: 37px; position: relative; overflow: hidden; }
.company li:first-child h4 { position: absolute; padding: 0 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 62px; left: 0; bottom: 0; background: rgba(0, 0, 0, .8); font-size: 15px; line-height: 58px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.company li:last-child { border-bottom: 1px solid #E3E3E3; }
.company li:hover h4, .company li:hover span, .company li:hover span i { color: #e77918; }
.company li:first-child:hover h4 { color: #fff; }


.news .news_title { margin-bottom: 32px ;}
.news .news_title .more a { font-size: 14px; line-height: 18px; color: #999; font-family: arial; text-transform: uppercase; float: right; }
.news .news_title .more a:hover { color: #e77918; }
.news h3 { display: inline-block; position: relative; }
.news h3 a { font-size: 18px; line-height: 100%; color: #666; font-weight: 400 ;}
.news h3:first-child { padding-right: 23px; margin-right: 13px ;}
.news h3:first-child:after { position: absolute; content: "/"; right: 0; top: 0; font-size: 16px; line-height: 18px; color: #ccc; font-weight: 400; }
.news h3.on a { font-weight: 700 ;color: #333333;}

.news_con{ margin-top: 50px;}
.faq { width: 371px; height: 499px; background: #fff; box-shadow: 0 0 40px 0 rgba(4, 0, 0, .04); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 56px 43px 0 39px ;}
.faq h3 { display: block; margin-right: 0 !important; padding-right: 0 !important; }
.faq h3 a { font-weight: 700; font-size: 16px; color: #333 ;}
.faq h3 span { font-size: 14px; line-height: 18px; color: #999; font-family: arial; text-transform: uppercase; float: right; font-weight: 400 ;}
.faq h3 span:hover { color: #e77918 ;}
.faq h3:first-child:after { position: absolute; content: ""; width: 15px; height: 21px; background: #e77918; left: -39px; top: 0 ;}
.faq .pic { margin: 21px 0 11px; width: 290px; height: 116px ;}
.faq li { margin-bottom: 13px; -o-transition: all .3s ease; transition: all .3s ease ;}
.faq li h4 { font-size: 14px; line-height: 28px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 32px; position: relative; -o-transition: all .3s ease; transition: all .3s ease ;}
.faq li h4:before { position: absolute; content: ""; width: 13px; height: 2px; background: #A1A1A1; text-align: center; left: 0; top: 14px ;}
.faq li p { display: none; font-size: 12px; line-height: 24px; color: #666; padding-left: 33px; position: relative ;}
.faq li p:before { position: absolute; content: "A"; width: 23px; height: 23px; background: #ff8f0c; font-size: 14px; line-height: 23px; color: #fff; text-align: center; left: 0; top: 0; font-weight: 700 ;}
.faq li.cur { padding-bottom: 11px; border-bottom: 1px solid #E3E3E3; margin-bottom: 15px ;}
.faq li.cur h4 { padding-left: 33px ;}
.faq li.cur h4:before { background: #e77918; content: "Q"; width: 23px; height: 23px; font-size: 14px; line-height: 23px; color: #fff; text-align: center; left: 0; top: 0; font-weight: 700 ;}
.faq li.cur p { display: block; }

/**/
.liy{ height: 115px;overflow: hidden;}
.liy h3{ padding: 35px 0 0 145px; width: 216px; float: left;font-weight: bold; color: #fff; font-size: 14px; line-height: 100%;}
.liy h3 span{font-size:20px;}
.liy h3 i{ display: block; font-size: 20px; color: #f17513; font-family: arile; line-height: 100%; padding-top: 3px;}
.liy ul{ position: relative; margin-top: 10px; float: left;}
.liy ul li{ background: #fff; width: 218px; height: 40px; border-radius: 5px; margin-bottom: 13px; overflow: hidden; line-height: 40px; font-size: 16px; color: #676767;}
.liy ul li i{ display: inline-block; float:left; padding-left: 20px; width: 55px;}
.liy ul li input{ display: inline-block; float: left; background: none; border: none; height: 40px; outline: none; width: 141px;}
.liy ul .tj3{ position: absolute; left: 230px; top: 0; width: 352px; height: 94px;}
.liy ul .tj3 i{ width: 108px;}
.liy ul .tj3 textarea{height: 80px;
    border: none;
    width: 215px;
    line-height: 30px;
    margin-top: 5px;}
.liy ul .tj4{ position: absolute; top: 16px; left: 595px; background: none; z-index: 5;width: 86px; height: 80px;}
.liy ul .tj4 button{ display: block; margin-bottom: 9px; width: 86px; height: 35px; line-height: 35px; border-radius: 5px; background: #fff; border: none; outline: none; cursor: pointer;}
.liy ul .tj4 button:last-child{ background: #ff9010; color: #fff;}

.abt{ background: #313131;}
.abt dt{display: block;width: 1920px;height: 666px;margin-left: -360px;}
.abt dt img{ display: block;width: 1920px;height: 666px;}
.abt dd{ display: block;width: 1200px;height: 205px;background: url(../images/abt_dd.png) no-repeat center;margin-top: -100px;position: relative;z-index: 100;}
.abt dd h3{ display: block; padding-left:70px; padding-top:40px;width:210px; font-size: 40px; color: #ffffff; line-height: 50px;font-weight: normal;font-family: 思源黑体 CN;float: left;}
.abt dd h3 b{ display: block; font-size: 54px;color: #fff;line-height: 54px;font-family: 思源黑体 CN;}
.abt dd p{ width: 894px; float: left;}
.abt dd span img{ display: block; width: 298px; height: 36px;padding-top: 22px; padding-bottom: 12px;}

.abt dd em{font-size: 16px; line-height: 24px; color: #808080;  }
.abt dd i img{ display: block; margin-top: 30px; width: 50px; height: 12px; float: right;margin-right: 30px;}


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