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

.banner{height: 860px;position: relative;}
.bdu{width: 100% !important;height: 860px;}
.bdu li{width: 100% !important;height: 860px;position:relative;}
.bdu li a{display: block;height: 860px;}
.bdu li img{height:860px;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: 12px;height: 12px;background: #fff;margin:0 10px;border-radius: 6px;}
.hdu li.on{background: #428057;}


.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:block;font-size: 52px;color: #323333;line-height: 52px;padding-top: 36px; background:url(../images/tit.png) no-repeat top;font-family: 楷体;}
.tit i{display:block;font-size: 12px;color: #333333;line-height: 12px;text-transform: uppercase;font-family: Century;margin-top: 10px;}

.search{height: 81px;border-bottom: 1px solid #dcdcdc;}
.search p{float: left;height: 81px;line-height: 81px;font-size: 14px;color: #666666;}
.search p b{ font-weight: normal;color: #333333;}
.search p a{margin-right:20px;color: #666666;font-size: 14px;}
.s_box{float: right;margin-top:24px;width: 324px;height: 36px;background: #fff;border: 1px solid #d4d4d4;border-radius: 18px;}
.s_box .input1{float:left;width:270px;height:36px;line-height: 36px;font-size:14px;color:#333;border:0;outline: 0;padding-left: 20px;border-radius: 18px;}
.s_box .input2{float: left;width:30px;height: 30px;border: 0;background: url(../images/sea.png) no-repeat center;outline: 0;cursor: pointer;margin-top: 3px;margin-right: 3px;}

.yz{ padding-top: 88px;height: 173px;}
.yz em{ display: block;float: left;margin-right: 57px;}
.yz em img{width: 124px;height: 135px;display:block;}

.yz dt{ display: block;float: left;width:326px;height: 173px;margin-right: 54px;overflow: hidden;;}
.yz dt img{ display: block;width:326px;height: 173px;transition:all 0.5s;}
.yz dt:hover img{ transform:scale(1.05);}

.yz dd{ float: left;width: 638px;position:relative;}
.yz dd:after{position: absolute;left: -90px;top: 145px;background: #428057;width:200px;height:1px;content: ""; }

.yz dd p{ font-size: 15px;color: #666666;line-height: 26px;padding-top: 10px;}
.yz dd i img{ display: block;width:27px ;height: 18px;float: right;margin-top: 28px;}

.ys{ margin-top: 88px;height: 730px;background: url(../images/ys_bg.jpg) no-repeat center;}
.ys ul{ padding-top: 145px;}
.ys li{ float: left;width: 320px;margin-right: 560px;margin-bottom: 78px;transition:all 0.5s;}
.ys li:hover i{ transform: rotate(360deg);}
.ys li:hover { margin-top: -5px;}
.ys li p{float: left;width: 215px;text-align: right;}
.ys li:nth-child(2n) p{ float: right;text-align: left;}
.ys li:nth-child(2n-1) i{ float: right;}
.ys li:nth-child(2n) i{float: left;}
.ys li:nth-child(2n){margin-right: 0;}
.ys li i{width: 75px;height: 75px;border:1px solid #b2c9b9;border-radius: 37.5px;transition:all 0.5s; }
.ys li p span{ display: block;font-size:24px ;line-height:24px ;color: #333333;position: relative;}
.ys li:nth-child(2n) span:after{ position: absolute;left: 0;top: 38px;width:32px;height:2px;background: #c6c7c6;content: "";}
.ys li:nth-child(2n-1) p span:after{ position: absolute;right: 0;top: 38px;width:32px;height:2px;background: #c6c7c6;content: "";}

.ys li p em{ display: block;font-size:16px ;line-height:24px ;color: #6d6d6d;padding-top: 36px;}
.ys li:last-child b{font-size: 20px;color: #323333;line-height: 20px;display:block;text-align:center;}  
.ys li:last-child a{ display:block;width:200px;height:36px;line-height:36px;margin:20px auto 0;border-radius:18px;background:#417f56;color:#fff;font-size:16px;text-align:center;}

.ys li:hover i{ border:1px solid #e6a09f;}
.ys li:nth-child(1) i{ background: url(../images/ys_ic1.png) no-repeat center;}
.ys li:nth-child(2) i{ background: url(../images/ys_ic2.png) no-repeat center;}
.ys li:nth-child(3) i{ background: url(../images/ys_ic3.png) no-repeat center;}
.ys li:nth-child(4) i{ background: url(../images/ys_ic4.png) no-repeat center;}
.ys li:nth-child(5) i{ background: url(../images/ys_ic5.png) no-repeat center;}

.ys li:nth-child(1):hover i{ background: url(../images/ys_ic1h.png) no-repeat center;}
.ys li:nth-child(2):hover i{ background: url(../images/ys_ic2h.png) no-repeat center;}
.ys li:nth-child(3):hover i{ background: url(../images/ys_ic3h.png) no-repeat center;}
.ys li:nth-child(4):hover i{ background: url(../images/ys_ic4h.png) no-repeat center;}
.ys li:nth-child(5):hover i{ background: url(../images/ys_ic5h.png) no-repeat center;}


.pro{ padding-top: 90px;height: 997px;background: url(../images/pro_bg.jpg) no-repeat center;}
.pro_con{ margin-top: 45px;}
.pro_l{ float: left;width: 814px;}
.pro_l li{ float: left;width: 392px;height:694px ;margin-right: 15px;}
.pro_l li i{ width: 392px;height:694px ;display: block;overflow: hidden;}
.pro_l li i img{width: 392px;height:694px ;display: block;transition:all 0.5s;}
.pro_l li:hover img{ transform:scale(1.05);}

.pro_r{ float: right;width: 385px;}
.pro_r li{width: 385px;height:338px ;margin-bottom: 18px;}
.pro_r li i{width: 385px;height:338px ;display: block;overflow: hidden;}
.pro_r li i img{width: 385px;height:338px ;display: block;transition:all 0.5s;}
.pro_r  li:hover img{ transform:scale(1.05);}
.pro .more{display: block;width: 200px;height: 30px;line-height: 30px;background: url(../images/more.png) no-repeat 107px 11px;margin-top: 15px;text-indent: 45px;font-size: 15px;color: #cc0000;}
.pro .more a{ display: block;width: 150px;color: #cc0000;height: 30px;line-height: 30px;position: relative;}
.pro .more span{display: block;width: 150px;height: 30px;line-height: 30px; border:1px solid #e57f7f;position: relative;}
.pro .more>span:before, .pro .more>span:after, .pro .more>span a:before, .pro .more>span a:after { -o-transition: all .8s ease; transition: all .8s ease; position: absolute; content: ""; background: #cc0000; z-index: 3; }
.pro .more>span:before { width: 0; top: -1px; left: -1px; height: 1px ;}
.pro .more>span:after { width: 1px; top: -1px; left: -1px; height: 0; }
.pro .more>span a:before { width: 0; bottom: -1px; right: -1px; height: 1px ;}
.pro .more>span a:after { width: 1px; bottom: -1px; right: -1px; height: 0; }
.pro .more span:hover:before { width: 150px ;}
.pro .more span:hover:after { height: 30px; }
.pro .more span:hover>a:before { width: 150px; }
.pro .more span:hover>a:after { height: 30px ; }

.pz { height: 700px;}
.pz dt img{height: 700px;width: 960px;margin-right: -360px;float: right;}
.pz dd{ background: url(../images/pz2.jpg) no-repeat center;height: 700px;width: 600px;margin-left: -360px;float: left;padding-left: 360px;}
.pz dd h2{padding-top: 90px;font-weight: normal;}
.pz dd h2 span{display:block;font-size: 52px;color: #fff;line-height: 52px;padding-top: 32px; background:url(../images/tit2.png) no-repeat top left;font-family: 楷体;}
.pz dd h2 i{display:block;font-size: 12px;color: #fff;line-height: 12px;text-transform: uppercase;font-family: Century;margin-top: 10px;opacity: 0.5;}
.pz dd p{ font-size: 18px;line-height: 28px;color: #fff;padding-top: 36px;}
.pz dd em img{display: block;width: 94px;height: 12px;margin-top: 56px;}
.pz dd ul{ margin-top: 110px;}
.pz dd ul li{ float: left;padding: 0 58px;height: 152px;border-right: 1px dashed #9eb8a6;transition:all 0.5s;}
.pz dd ul li:hover{ margin-top: -5px;}
.pz dd ul li:first-child{ padding-left: 0;}
.pz dd ul li:last-child{ border-right: 0;}
.pz dd ul li img{ display: block;width: 78px;height:75px;}
.pz dd ul li span{ display: block;font-size: 20px;line-height: 30px;color: #ffffff;padding-top: 18px;}


.gy{ padding-top: 253px;height: 677px;background: url(../images/gy_bg.jpg) no-repeat center;}
.gy .tit span{padding-top: 0;background: 0; }
.gy_con{ margin-top: 92px;position: relative;}
.gy_con dt{ float: left;margin-left: 150px;width: 400px;height: 300px;overflow:hidden;}
.gy_con dt img{ float: left;width: 400px;height: 300px;transition:all 0.5s;}
.gy_con dt:hover img{ transform:scale(1.05);}
.gy_con dd{ margin-left: 84px;width: 420px;float: left;}
.gy_con dd h3{ display: block;position: relative;font-size: 26px;line-height: 26px;color: #333333;padding-top: 38px;font-weight: normal;}
.gy_con dd h3:after{ position: absolute;left: 0;top: 85px;background: #428057;width:40px;height:1px;content: "";}
.gy_con dd p{ font-size: 16px;color: #858585;line-height: 26px;padding-top: 58px;}
.gy .sprev{ position:absolute; left:60px; top:90px; width:21px;height:38px; background:url(../images/sprev.png) no-repeat;z-index: 100;}
.gy .snext{ position:absolute; right:60px; top:90px;  width:21px;height:38px; background:url(../images/snext.png) no-repeat;z-index: 100;}
.gy .sprev:hover { background:url(../images/sprevh.png) no-repeat;}
.gy .snext:hover { background:url(../images/snexth.png) no-repeat;}

.gy_t{ margin-top:46px ;margin-left: 32px;position:relative;}
.gy_t li{float: left;width:125px ;text-align: center;padding-top: 30px;background: url(../images/yuan.png) no-repeat top;margin-right: 125px;}
.gy_t li.cur{background: url(../images/yuanh.png) no-repeat top;}
.gy_t li:last-child{ margin-right:0;}
.gy_t li em{ display: block;font-size: 20px;line-height:20px ;color: #333333;}
.gy_t li i{ display: block;font-size: 12px;line-height: 12px;color: #999999;padding-top: 10px;text-transform: uppercase;}

.team{ padding-top: 90px;}
.team_con{ margin-top: 50px;position: relative;}
.team_con dt{ display: block;float: right;width: 700px;height: 512px;overflow:hidden;}
.team_con dt img{ display: block;width: 700px;height: 512px;transition:all 0.5s;}
.team_con dt:hover img{ transform:scale(1.05);}
.team_con dd{ padding-left: 60px;width: 440px;height: 512px;background: #f4f5f3;position: relative;}
.team_con dd:after{position: absolute;left: 390px;top: 90px;background: #428057;width:140px;height:1px;content: ""; }
.team_con dd h3 a{padding-top: 73px;font-weight: normal;font-size: 28px;line-height:28px ;color: #333333;display: block;padding-bottom: 50px;}
.team_con dd h3 a i{ display: inline-block;font-size: 18px;}
.team_con dd p{ font-size: 16px;line-height:26px ;color: #666666;padding-left: 18px;background: url(../images/team_ic.png) no-repeat 0 10px;width:370px;}
.team_con dd h4{padding-top: 36px;font-weight: normal;font-size: 22px;line-height:22px ;color: #333333;display: block;padding-bottom: 18px;}
.team_con dd span{ font-size: 16px;line-height:26px ;color: #666666;display: block;width: 384px;}
.team .dprev{ position:absolute; left:60px; top:430px; width:53px;height:53px; background:url(../images/dprev.png) no-repeat;z-index: 100;}
.team .dnext{ position:absolute; left:123px; top:430px;  width:53px;height:53px; background:url(../images/dnexth.png) no-repeat;z-index: 100;}
.team .dprev:hover { background:url(../images/dprevh.png) no-repeat;}
.team .dnext:hover { background:url(../images/dnext.png) no-repeat;}

.case{ padding-top:40px;height: 460px;background: url(../images/case_bg.jpg) no-repeat center;margin-top: 90px;}
.case h2{ display: block;text-align: center;margin: 0 auto;}
.case_con{ margin-top: 30px;position: relative;}
.case_con dl{ float: left;width: 374px;margin-right: 39px;}
.case dd{ width: 302px;padding: 0 36px;height:240px;background:url(../images/case_dd.png) no-repeat center;}
.case dd h3{padding-top: 38px;font-weight: normal;font-size: 22px;line-height:28px ;color: #333333;display: block;margin-bottom: 20px; height:56px;overflow:hidden;}
.case dd p{ font-size: 14px;line-height:25px ;color: #7a7a7a;display: block;}
.case dt img{ width: 128px;height: 128px;display: block;border-radius: 64px;margin: 28px 0 0 123px;}
.case_con dl:hover dd{background:url(../images/case_ddh.png) no-repeat center;}
.case_con dl:hover dd h3,.case_con dl:hover dd p{color: #fff;}

.case_con .bprev{ position:absolute; left:-84px; top:90px; width:21px;height:38px; background:url(../images/sprev.png) no-repeat;z-index: 100;}
.case_con .bnext{ position:absolute; right:-84px; top:90px;  width:21px;height:38px; background:url(../images/snext.png) no-repeat;z-index: 100;}
.case_con .bprev:hover{ background:url(../images/sprevh.png) no-repeat;}
.case_con .bnext:hover{background:url(../images/snexth.png) no-repeat ;}

.new{ padding-top: 90px;}
.new .con{margin-top: 50px;}
.new-l{float: left;width: 570px;}
.new-l h3 a{display: block;height: 158px;}
.new-l h3 em{width: 150px;height: 158px;background: #428057;display: block;float: left;box-sizing: border-box;color: #fff;padding: 47px 0 0 30px;font-weight: normal;font-size: 12px;line-height: 12px;}
.new-l h3 em span{display: block;font-size: 24px;font-weight: bold;width: 43px;white-space: nowrap;border-top: 2px solid #fff;line-height:24px;padding-top: 21px;margin-bottom: 8px;}
.new-l h3 p{width: 420px;float: left;}
.new-l h3 p img{width: 420px;height: 158px;}
.new-l-c dl{border-bottom: 1px solid #DCDCDC;min-height: 46px;position:relative;z-index:1;}
.new-l-c dl dt{height: 46px;}
.new-l-c dl dt em{display: inline-block;width: 150px;margin-right: -5px;line-height: 46px;text-align: center;font-size: 16px;color: #999;}
.new-l-c dl dt h4{display: inline-block;width: 420px;line-height: 46px;font-weight: normal;}
.new-l-c dl dt h4 a{color: #333;display: block;}
.new-l-c dl dd{height: 0;opacity: 0;padding: 0;transition: all .2s linear;}
.new-l-c dl dd em{width: 150px;margin-right: -5px;display: inline-block;font-size: 16px;color: #999;text-align: right;box-sizing: border-box;padding-right: 35px;position: relative;vertical-align: top;line-height: 16px;}
.new-l-c dl dd em:after{content:"";display: block;width: 16px;height: 1px;background: #999;right: 38px;top:33px;position: absolute;}
.new-l-c dl dd em span{display: block;font-size: 60px;line-height: 48px;color: #428057;margin-top: 39px;}
.new-l-c dl dd h4{display: inline-block;width: 420px;}
.new-l-c dl dd h4 b a{font-size: 18px;line-height: 25px;color: #333;display: block;font-weight: normal;}
.new-l-c dl dd h4 span{display: block;font-size: 14px;color: #999;line-height: 24px;margin-top: 18px;font-weight: normal;width: 345px;}
.new-l-c dl.cur dt{display: none;}
.new-l-c dl.cur dd{display: block;padding:44px 0 41px 0;opacity: 1;height: auto;}
.new-r{float: right;width: 572px;}
.new-r-t li{margin-bottom: 42px;}
.new-r-t li h4 a{display: block;font-size: 15px;color: #010101;font-weight: normal;line-height: 15px;}
.new-r-t li h4 a:hover{color: #417f56;}
.new-r-t li h4 a:before{content: "";display: inline-block;width: 9px;height: 9px;vertical-align: middle;background: rgba(0,0,0,0.5);margin-right: 15px;}
.new-r-t li h4 a:hover:before{background:#417f56;}
.new-r-t li p{display: block;font-size: 14px;line-height: 22px;color: #666;margin-top: 11px;}
.new-r-b{background: url(../images/new-pic2.jpg) no-repeat;height: 158px;box-sizing: border-box;padding: 41px 0 0 49px;}
.new-r-b a{display: block;}
.new-r-b h3{display: block;font-size: 24px;line-height: 24px;color: #fff;width: 43px;border-top: 2px solid #fff;white-space: nowrap;padding-top: 9px;}
.new-r-b em{display: block;background: url(../images/new-more.png) no-repeat 43px center;font-size: 12px;line-height: 12px;color: #fff;text-transform: uppercase;margin-top: 20px;}

.abt{ background: #f4f5f3;padding-top: 90px;height: 746px;margin-top: 90px;}
.abt dt { display: block;width: 600px;height: 500px;float: right;overflow: hidden;}
.abt dt img{ display: block;width: 600px;height: 500px;transition:all 0.5s;}
.abt dt:hover img{ transform:scale(1.05);}

.abt dd{padding: 0 60px;width: 480px;background: #fff;height: 500px;position: relative;}
.abt dd:after{position: absolute;left: 490px;top: 90px;background: #428057;width:140px;height:1px;content: ""; }
.abt dd h2{padding-top: 70px;font-weight: normal;}
.abt dd h2 span{display:block;font-size: 52px;color: #333;line-height: 52px; font-family: 楷体;}
.abt dd h2 i{display:block;font-size: 12px;color: #333;line-height: 12px;text-transform: uppercase;font-family: Century;margin-top: 10px;opacity: 0.5;}
.abt dd p{display: block;font-size: 15px;line-height: 30px;color: #666;margin-top: 30px;}

.abt ul{ margin-top: 45px;}
.abt li{float: left;width:240px ;text-align: center;padding-top: 30px;transition:all 0.5s;}
.abt li:hover img {animation-duration: 3s; animation-name: flipInY; }
.abt li img{ display: block;width: 55px;height: 55px;margin: 0 auto;}
.abt li span{ display: block;font-size: 18px;line-height:45px ;color: #333333;}

.abt .more{display: block;width: 200px;height: 30px;line-height: 30px;background: url(../images/more.png) no-repeat 107px 11px;margin-top: 75px;text-indent: 45px;font-size: 15px;color: #cc0000;}
.abt .more a{ display: block;width: 150px;color: #cc0000;height: 30px;line-height: 30px;position: relative;}
.abt .more span{display: block;width: 150px;height: 30px;line-height: 30px; border:1px solid #e57f7f;position: relative;}
.abt .more>span:before, .abt .more>span:after, .abt .more>span a:before, .abt .more>span a:after { -o-transition: all .8s ease; transition: all .8s ease; position: absolute; content: ""; background: #cc0000; z-index: 3; }
.abt .more>span:before { width: 0; top: -1px; left: -1px; height: 1px ;}
.abt .more>span:after { width: 1px; top: -1px; left: -1px; height: 0; }
.abt .more>span a:before { width: 0; bottom: -1px; right: -1px; height: 1px ;}
.abt .more>span a:after { width: 1px; bottom: -1px; right: -1px; height: 0; }
.abt .more span:hover:before { width: 150px ;}
.abt .more span:hover:after { height: 30px; }
.abt .more span:hover>a:before { width: 150px; }
.abt .more span:hover>a:after { height: 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 }
}