@charset "utf-8";
/* CSS Document */
/*common*/
.mb10 { margin-bottom:10px;}
.ml10 { margin-left:10px;}
.bg { background:#FFF;}
em,i{ font-style:normal; }

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

.banner{ height:598px;width:100%; position:relative; z-index:1;}
.banner .bd,.banner .bd li{width:100%; height:598px; overflow:hidden;}
.banner .bd li img{ position:absolute; top:0; left:50%; margin-left:-960px; height:598px;}
.banner .bantil{ width:160px; height:21px;position:absolute; bottom:50px;left:50%; margin-left:-60px; z-index:8;}
.banner .bantil li{ width:21px; height:21px; float:left; display:inline;background:#000;opacity:1; border-radius:21px; margin:0 12px; box-sizing:border-box;}
.banner .bantil li.on{background:#00a0e8;}

.tit1{ text-align:center; font:44px "Microsoft YaHei"; color:#222; font-weight:bold;}
.tit1 a{ color:#222;}
.tit1 em{ display:block; margin-top:8px; font:20px "Microsoft YaHei"; color:#666;}
.tit1 b{ color:#00a0e8;}

.yinz{ height:470px; background:url(../images/yinz_bg.jpg) no-repeat center top; padding-top:74px;}
.yinz dl{ height:374px; overflow:hidden;}
.yinz dt{width:586px; height:374px; float:right; overflow:hidden;}
.yinz dt img{ display:block;width:586px; height:374px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.yinz dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.yinz dd{ width:540px; float:left; margin-top:32px;}
.yinz dd h3{ font:44px "Microsoft YaHei"; font-weight:bold; color:#00a0e8;}
.yinz dd h3 b{ color:#54bd33;}
.yinz dd h4{ font:20px "Microsoft YaHei"; font-weight:bold; color:#333; padding-top:5px;}
.yinz dd p{ font:14px "Microsoft YaHei"; line-height:28px; color:#707070; margin-top:25px;}

.pro{ height:945px;overflow:hidden;}
.fen{ width:267px; height:740px; border:1px solid #d2d2d2; overflow:hidden; margin-top:32px;}
.fen h2 img{ display:block;}
.fen h3{ width:234px; height:61px; border-bottom:1px solid #e6e6e6; margin:0 auto; font:18px "Microsoft YaHei"; font-weight:bold; line-height:61px; overflow:hidden; font-weight:bold;}
.fen h3:last-child{ border:0;}
.fen h3 a{ display:block; color:#222; background:url(../images/line2.gif) no-repeat 27px center; padding-left:50px;}
.fen h3 a:hover{ color:#54bd33;background:url(../images/line1.gif) no-repeat 27px center;}   
.fen li{ width:234px; margin:0 auto; height:45px; font:15px "Microsoft YaHei"; line-height:45px; color:#454545; overflow:hidden; border-bottom:1px dashed #efefef;}
.fen li a{ display:block; color:#333; background:url(../images/pro_arr.png) no-repeat 26px center; padding-left:57px;}
.pro1{ width:911px; float:right; margin-top:30px;}
.pro1 dl{ height:453px; margin-bottom:11px; background:#f7f7f7; overflow:hidden;}
.pro1 dt{ width:603px; height:453px; float:left; overflow:hidden;}
.pro1 dt img{ display:block;width:603px; height:453px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pro1 dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.pro1 dd{ width:235px; float:right; padding:57px 38px 0 0;}
.pro1 dd h3{ font:24px "Microsoft YaHei"; font-weight:bold; color:#00a0e8; padding-bottom:13px; border-bottom:1px solid #c7c7c7; position:relative;}
.pro1 dd h3 a{ display:block; color:#00a0e8;}
.pro1 dd h3:before{ content:""; position:absolute; bottom:0; left:0; width:45px; height:2px; background:#00a0e8;}
.pro1 dd p{ font:14px "Microsoft YaHei"; line-height:28px; height:168px; margin:15px 0 30px;}
.pro1 dd span{ display:block; height:38px;}
.pro1 dd span a{ display:block; float:left; width:111px; height:36px; border:1px solid #00a0e8; border-radius:5px; font:14px "Microsoft YaHei"; line-height:36px; color:#00a0e8; text-align:center;}
.pro1 dd span a:last-child{ background:#54bd33; border:1px solid #54bd33; float:right; color:#fff;}
.pro1 li{ width:296px; float:left; position:relative; margin-right:11px;}
.pro1 li img{ display:block; width:296px; height:223px;}
.pro1 li em{ display:block; font:16px "Microsoft YaHei"; text-align:center; height:53px; line-height:53px; border-bottom:1px solid #e2e2e2; overflow:hidden;}
.pro1 li em:before{ content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:#54bd33;}
.pro1 li a:hover img{display:block; width:290px; height:217px; border:3px solid #54bd33;}
.pro1 li a:hover em{ font-weight:bold; color:#54bd33;}
.pro1 li a:hover em:before{ width:100%;-webkit-transition: width .5s;
    transition: width .5s;}
.pro1 li:last-child{ margin-right:0;}

.fang{ height:auto; padding-top:98px; background:#f7f7f7 url(../images/fang_line1.gif) repeat-x center 225px; padding-bottom: 100px;}
.fangt{ height:97px;margin-top:34px;}
.fangt li{ width:171px; float:left; height:97px; font:18px "Microsoft YaHei"; font-weight:bold; line-height:97px; position:relative;}
.fangt li:before{ content:""; position:absolute; top:35px; right:0; width:1px; height:16px; background:#e3e3e3;}
.fangt li:last-child:before{ background:none;}
.fangt li a{ display:block; color:#333;}
.fangt li span{ display:block; width:30px; height:30px; float:left; position:relative; margin:33px 5px 0 40px;}
.fangt li img{display:block; width:30px; height:30px;}
.fangt li em{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transform: translateX(0) rotate(0);transform: translateX(0) rotate(0);-webkit-transition: all 0.35s ease-out;transition: all 0.35s ease-out;}
.fangt li i{position:absolute;width:100%;height:100%;top:0;left:0;opacity:1;visibility:hidden;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.1s ease 0.2s;transition: all 0.1s ease 0.2s;}
.fangt li:nth-child(1) span{margin:33px 5px 0 20px;}
.fangt li a:hover em{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}
.fangt li a:hover i{visibility:visible;opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.fangt li a:hover{ color:#54bd33; border-top:5px solid #54bd33; box-sizing:border-box;}
.fang1 dl{ height:503px; overflow:hidden; position:relative;}
.fang1 dt{ width:830px; height:468px; float:left; overflow:hidden;}
.fang1 dt img{ display:block; width:830px; height:468px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.fang1 dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.fang1 dd{ width:305px; height:433px; background:url(../images/fang_bg.jpg) no-repeat; padding:50px 50px 0 50px; position:absolute; top:17px; right:0;}
.fang1 dd h3{ font:20px "Microsoft YaHei"; font-weight:bold; padding-bottom:20px; border-bottom:1px solid #80d0f4; position:relative;}
.fang1 dd h3 a{ display:block; color:#fff;}
.fang1 dd h3:before{ content:""; position:absolute; bottom:0; left:0; width:45px; height:2px; background:#fff;}
.fang1 dd p{ font:14px "Microsoft YaHei"; line-height:22px; color:#fff; height:154px; margin:17px 0 40px;}
.fang1 dd span{ display:block; height:38px;}
.fang1 dd span a{ display:block; float:left; width:130px; height:36px; border:1px solid #fff; border-radius:5px; font:14px "Microsoft YaHei"; line-height:36px; color:#fff; text-align:center;}
.fang1 dd span a:last-child{ background:#54bd33; border:1px solid #54bd33; float:right; color:#fff;}
.case h3{ height:88px; font:24px "Microsoft YaHei"; font-weight:bold; line-height:88px; overflow:hidden; position:relative;}
.case h3 a{ display:block; color:#00a0e8; padding-left:24px;}
.case h3:before{ content:""; position:absolute; top:34px; width:3px; height:23px; background:#00a0e8;}
.case h3:after{ content:""; position:absolute; top:60px; left:255px; width:950px; height:1px; background:#ebebeb;}
.case h3 em{ font:16px "Microsoft YaHei"; color:#454545; padding-left:9px;}
.case h3 span{ float:right; font:14px "Microsoft YaHei"; line-height:88px; color:#454545;}
.case dl{ width:384px; float:left; background:#fff; height:410px; border-bottom:2px solid #00a0e8; margin-right:25px; position:relative;}
.case dl:before{ content:""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#54bd33;}
.case dt{ width:384px; height:216px; overflow:hidden; position:relative;}
.case dt img{ display:block;width:384px; height:216px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.case dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.case dd{ padding:30px 25px 0 25px;}
.case dd h4 a{ display:block; font:18px "Microsoft YaHei"; color:#333; overflow:hidden;}
.case dd p{ font:14px "Microsoft YaHei"; line-height:24px; height:72px; overflow:hidden; color:#7e7e7e; margin-top:22px;}
.case dl:hover:before{width:100%;-webkit-transition: width .5s;
    transition: width .5s;}
.case dl:hover dd h4 a{ color:#54bd33; font-weight:bold;}

.ys{ margin-bottom:80px;}
.ys1{ height:834px; background:url(../images/ys_bg1.jpg) no-repeat center top; padding-top:82px; overflow:hidden;}
.ys1 h2{ text-align:center; font:52px "Microsoft YaHei"; color:#222; height:185px; overflow:hidden;}
.ys1 h2 span{ display:block; width:425px; height:40px; margin:0 auto;}
.ys1 h2 span em{ display:block; width:145px; height:40px; text-align:center; float:left; font:28px "Microsoft YaHei"; line-height:40px; background:#00a0e8; border-radius:1rem 1rem 0 1rem; color:#fff;}
.ys1 h2 span i{ display:block; float:right; width:275px; height:40px; border-radius:1rem 1rem 1rem 0; font:30px "Microsoft YaHei"; font-weight:bold; background:#54bd33; text-align:center; line-height:40px; color:#fff;}
.ys1 h2 b{ color:#00a0e8;}
.ys1 dl{ width:555px; float:right;}
.ys1 dt,.ys3 dt{ height:82px;}
.ys1 dt em,.ys2 dt em,.ys3 dt em{ display:block; width:74px; height:82px; float:left; overflow:hidden;}
.ys1 dt em img,.ys2 dt em,.ys3 dt em img{display:block; width:74px; height:82px;}
.ys1 dt span,.ys2 dt span,.ys3 dt span{ display:block; width:450px; float:right; font:38px "Microsoft YaHei"; font-weight:bold; color:#333; position:relative; margin-top:-4px;}
.ys1 dt span i,.ys2 dt span i,.ys3 dt span i{ display:block; font:26px "Microsoft YaHei";}
.ys1 dd{ padding:32px 0 0 65px;}
.ys1 dd p,.ys2 dd p,.ys3 dd p{ font:16px "Microsoft YaHei"; line-height:28px; color:#454545; padding-left:34px; background:url(../images/pro_arr.png) no-repeat left 10px; margin-bottom:18px;}
.ys2{ height:804px; margin-top:90px;}
.ys2 dl{ height:151px; overflow:hidden;}
.ys2 dt{ float:left; width:390px;}
.ys2 dt span{ width:295px;}
.ys2 dd{ width:755px; float:right; position:relative;}
.ys2 dd p{ margin-bottom:14px;}
.ys2 h5 img{ display:block; width:1200px; height:572px;}
.ys3{ height:573px; overflow:hidden; background:url(../images/ys_bg3.jpg) no-repeat center top;}
.ys3 dl{ margin-top:100px; width:392px;}
.ys3 dt span{ width:300px;}
.ys3 dd{ padding:57px 0 0 17px;}


/*新闻资讯*/
.new{ height:646px; overflow:hidden;}
.new1{ width:720px; padding-right:60px; background:url(../images/line.jpg) no-repeat right top; height:480px; overflow:hidden; margin-top:25px;}
.newt{ height:55px; border-bottom:1px solid #cacaca; position:relative; margin-bottom:20px;}
.newt li{ float:left; margin-right:35px; font:18px "Microsoft YaHei"; font-weight:bold; line-height:55px;}
.newt li a{ display:block; color:#666; height:55px;}
.newt li span{ display:block; width:25px; height:27px; float:left; margin:15px 8px 0 0; position:relative;}
.newt li em{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transform: translateX(0) rotate(0);transform: translateX(0) rotate(0);-webkit-transition: all 0.35s ease-out;transition: all 0.35s ease-out;}
.newt li i{position:absolute;width:100%;height:100%;top:0;left:0;opacity:1;visibility:hidden;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.1s ease 0.2s;transition: all 0.1s ease 0.2s;}
.newt li img{display:block; width:25px; height:27px;}
.newt li a:hover,.newt .cur a{ color:#00a0e8; position:relative;}
.newt li a:hover:before,.newt .cur a:before{ content:""; position:absolute; bottom:0; left:0; width:37px; height:3px; background:#00a0e8;}
.newt li a:hover em,.newt .cur em{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}
.newt li a:hover i,.newt .cur i{visibility:visible;opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.newt h5 a{ display:block; font:14px Arial; text-transform:capitalize; color:#bdbdbd; line-height:55px; height:55px; position:absolute; top:0; right:0;}
.new1 dl{ height:180px; overflow:hidden; padding-bottom:20px; border-bottom:1px dashed #e1e1e1;}
.new1 dt{ width:322px; height:180px; float:left; overflow:hidden; position:relative;}
.new1 dt img{ display:block; width:322px; height:180px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.new1 dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.new1 dt em{ display:block; position:absolute; top:0; right:0; background:url(../images/new_t.png) no-repeat; width:65px; height:65px; overflow:hidden;}
.new1 dd{ width:377px; float:right;}
.new1 dd h3 a{ display:block; font:16px "Microsoft YaHei"; font-weight:bold; color:#54bd33; height:30px; line-height:30px; overflow:hidden;}
.new1 dd p{ font:14px "Microsoft YaHei"; line-height:24px; color:#666666; margin:14px 0 22px; height:72px; overflow:hidden;}
.new1 dd span a{ display:block; width:127px; height:38px; border-radius:5px; background:#54bd33; font:14px "Microsoft YaHei"; text-align:center; line-height:38px; color:#fff;}
.new1 dl:hover span a{ background:#00a0e8;-webkit-transition:all 0.7s;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 和 Chrome */
-o-transition-property:background;}
.new1 dl:hover dd h3 a{ color:#00a0e8;}
.new2 li{ width:345px; height:84px; border-bottom:1px solid #e1e1e1; font:14px "Microsoft YaHei"; line-height:84px; overflow:hidden;}
.new2 li a{ display:block; color:#666666;}
.new2 li em{ display:block; width:46px; height:46px; border-right:1px solid #898989; font:24px "Microsoft YaHei"; color:#666; line-height:20px; margin-top:20px; float:left; margin-right:15px;}
.new2 li em i{ display:block; font:14px "Microsoft YaHei"; padding-top:8px;}
.new2 li a:hover{ color:#00a0e8; font-weight:bold;}
.new2 li a:hover em{ color:#00a0e8; border-right:1px solid #00a0e8;}
.new2 li:nth-child(2n-1){ float:left;}
.new2 li:nth-child(2n){ float:right;}

.faq{ width:390px; overflow:hidden; margin-top:25px; overflow:hidden;}
.faq .newt li img,.faq .newt li span{ width:35px; height:27px;}
.faq dl{ padding-bottom:21px;}
.faq dt{ height:41px; border:1px solid #cccacb; font:16px "Microsoft YaHei"; line-height:41px; font-weight:bold;}
.faq dt a{ color:#333; padding-left:15px;}
.faq dd{ font:14px "Microsoft YaHei"; line-height:24px; color:#666666; margin-top:11px;}
.faq dl:hover dt{ border:1px solid #00a0e8;}
.faq dl:hover dt a{ color:#00a0e8;}

.about{ height:635px; padding-top:86px; background:url(../images/about_bg.jpg) no-repeat center top; overflow:hidden;}
.about dl{ height:458px; margin-top:45px; background:#f1f0f0;}
.about dt{ height:458px; width:603px; float:left; overflow:hidden;}
.about dt img{ display:block;height:458px; width:603px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.about dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.about dd{ width:480px; float:right; padding:80px 50px 0 0;}
.about dd h3{ height:55px; border-bottom:1px solid #e1e1e1; position:relative; font:20px "Microsoft YaHei"; font-weight:bold; color:#00a0e8;}
.about dd h3 a{ display:block; color:#00a0e8;}
.about dd h3:before{ content:""; position:absolute; bottom:0; width:50px; height:3px; background:#00a0e8;}
.about dd p{ font:14px "Microsoft YaHei"; line-height:26px; color:#454545; margin:24px 0; height:130px; overflow:hidden;}
.about dd span{ display:block; height:38px; width:306px;}
.about dd span a{ display:block; float:left; width:133px; height:36px; border:1px solid #00a0e8; border-radius:5px; font:14px "Microsoft YaHei"; line-height:36px; color:#00a0e8; text-align:center;}
.about dd span a:last-child{ background:#54bd33; border:1px solid #54bd33; float:right; color:#fff;}

.pic{ height:390px;}
.pict{ height:38px; margin-bottom:40px; background:url(../images/pic_line.gif) no-repeat center center; padding-left:465px;}
.pict li{ width:132px; height:38px; float:left; margin-right:15px; font:20px "Microsoft YaHei"; text-align:center; line-height:36px;}
.pict li a{ display:block; width:130px; height:36px; border:1px solid #c6c6c6; color:#777;}
.pict li a:hover,.pict .cur a{ color:#fff; border:1px solid #54bd33; background:#54bd33;-webkit-transition:all 0.7s;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 和 Chrome */
-o-transition-property:background;}
.pic1{ height:280px;}
.pic2{ height:280px; position:relative;}
.pic3{ height:280px; overflow:hidden;}
.pic1 li{ width:275px; height:205px; float:left; margin-right:32px; position:relative; overflow:hidden;}
.pic1 li img{ display:block;width:275px; height:205px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pic1 li a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.pic1 li em{ display:block; width:100%; height:30px; background:rgba(0,160,232,0.6); text-align:center; font:14px "Microsoft YaHei"; line-height:30px; overflow:hidden; position:absolute; bottom:0; color:#fff;}
.pic1 li a:hover em{background:rgba(84,189,51,0.6);-webkit-transition:all 0.7s;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 和 Chrome */
-o-transition-property:background;}
.arr1{ font:30px "宋体"; font-weight:bold; color:#666; position:absolute; top:90px; left:-50px;}
.arr2{font:30px "宋体"; font-weight:bold; color:#666; position:absolute; top:90px; right:-50px;}

.link{width:1200px; margin: 0 auto; position: relative;}
.link .content{position: absolute; top: -80px;right: 0; width:400px; height:80px;}
.link p{ width:460px; float: left;overflow: hidden; font:12px "Microsoft YaHei"; color:#e6e6e6;line-height:80px; }
.link p a{ display: inline-block;padding:0 13px; font:12px "Microsoft YaHei"; color:#e6e6e6; line-height:80px; height:80px;}
.link p a:hover{ color:#c12323;}




@-webkit-keyframes spin{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*animation*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}