﻿@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; background:#222;}

.banner{ height:631px;width:100%; position:relative; z-index:1;}
.banner .bd,.banner .bd li{width:100%; height:631px; overflow:hidden;}
.banner .bd li img{ position:absolute; top:0; left:50%; margin-left:-960px; height:631px;}
.banner .prev01,.banner .next01{display:block;position:absolute;z-index:1;top:42%;margin-top:-30px;left:5%;z-index:1;width:40px;height:60px;cursor:pointer;filter:alpha(opacity=50);opacity:0.3;display:none;width:73px; height:73px;}
.banner .prev01{background:url(../images/left.png) no-repeat;}
.banner .next01 {left:auto;right:5%;background:url(../images/right.png) no-repeat;}

.tit1{ font:42px "Microsoft YaHei"; text-align:center; color:#ebb86a; font-weight:bold; height:125px; overflow:hidden; background:url(../images/fang_line.png) no-repeat center 22px;}
.tit1 a{ display:block; color:#ebb86a;}
.tit1 em{ display:block; font:20px "Microsoft YaHei"; color:#fff; margin-top:8px; padding-bottom:25px; letter-spacing:2px;}

.yinz{ height:508px; margin-top:105px; overflow:hidden;}
.yinz dl{ height:405px; background:#323232; overflow:hidden;}
.yinz dt{ width:421px;height:405px;float:left; overflow:hidden;}
.yinz dt img{ display:block;width:421px;height:405px;}
.yinz dd{ width:670px; margin:40px 0 0 60px; float:left;}
.yinz dd h3{ height:90px; font:42px "Microsoft YaHei UI"; color:#ebb86a; border-bottom:1px solid #424242;}
.yinz dd h3 em{ display:block; font:12px Arial, Helvetica, sans-serif; color:#6d6d6d; letter-spacing:2px; text-transform:uppercase; padding-top:4px;}
.yinz dd p{ font:14px "Microsoft YaHei UI"; line-height:28px; color:#fff; margin:20px 0;}
.yinz ul{ height:108px;}
.yinz li{ width:25%; float:left; font:16px "Microsoft YaHei UI"; color:#fff;}
.yinz li span{ display:block; font:42px "Microsoft YaHei UI"; font-weight:bold; color:#fff;}
.yinz li span i{ display:inline-block; width:25px; height:25px; border-radius:25px; background:#ebb86a; font:14px "Microsoft YaHei UI"; text-align:center; line-height:25px; color:#333; margin:-5px 0 0 5px;}

.fang{ height:760px; padding-top:85px; background:#2b2b2b; overflow:hidden;}
.fang dl{width:376px; float:left; background:#fff; margin-right:36px; margin-top:10px;}
.fang dd{ height:198px; overflow:hidden;}
.fang dd h3{ padding:26px 0 20px; text-align:center; font:30px "Microsoft YaHei UI"; font-weight:bold; color:#333; background:url(../images/fang_line1.png) no-repeat center bottom;}
.fang dd h3 em{ display:block; font:20px "Microsoft YaHei UI"; color:#666; padding-top:8px;}
.fang dd p{ width:297px; margin:10px auto 0; font:14px "Microsoft YaHei UI"; text-align:center; line-height:27px; color:#666;}
.fang dt{ width:376px; height:356px; overflow:hidden;}
.fang dt img{ display:block;width:376px; height:356px;}
.fang dl:last-child{ margin-right:0;}
.fang .cur{ background:#f8cb76;transform: translateY(-20px);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.fang .cur h3,.fang .cur h3 em,.fang .cur dd p{ color:#333;}
.fang .cur h3{ background:url(../images/fang_line2.png) no-repeat center bottom;}

.pro{ padding-top:70px; overflow:hidden;}
.prot{ height:470px; background:url(../images/fen_bg.jpg) no-repeat center top; overflow:hidden;background-size: 100% 100%;}
.prot1{ width:300px; float:left; height:100%; position:relative; z-index:8; margin-top:35px;}
.prot1:before{ content:""; position:absolute; top:0; right:0; width:1px; height:208px; background:#4e4b47;}
.prot1:last-child:before{ background:none;}
.prot1 h3{ height:60px; overflow:hidden; margin-left:45px;}
.prot1 h3 em{ display:block; width:60px; height:60px; float:left; overflow:hidden; background:#fff; border-radius:60px;}
.prot1 h2 img{ display:block; width:60px; height:60px;}
.prot1 h3 span{ display:block; width:150px; font:22px "Microsoft YaHei UI"; color:#fff; float:left; margin:4px 0 0 14px;}
.prot1 h3 span i{ display:block; font:14px "Microsoft YaHei UI"; color:#6e6a68; padding-top:5px;}
.prot1 h3 a{ display:block; color:#fff;}
.prot1 h3 a:hover em,.prot1 .cur01 em{ background:#ebb86a;-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;}
.prot ul{ width:248px; margin:15px auto 0; height:300px;}
.prot li{ width:124px; font:16px "Microsoft YaHei UI"; line-height:29px; height:29px; overflow:hidden; float:left;}
.prot li a{ display:block; color:#fff; padding-left:14px; position:relative;}
.prot li a:before{ content:""; position:absolute; top:10px; left:0; width:6px; height:6px; border:1px solid #6d6865; border-radius:6px; box-sizing:border-box;}
.prot li a:hover{ color:#ebb86a;}
.prot .prot1:last-child li:nth-child(2n){ width:60px; float:right;}
.prot h5 a{ display:block; width:156px; height:39px; border:1px solid #5a5653; background:rgba(255,255,255,0.2); margin:0 auto; font:14px "Microsoft YaHei UI"; text-align:center; line-height:39px; color:#ebb86a;}
.prot h5 a:hover{ background:#ebb86a; color:#333; border:1px solid #ebb86a;-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;}

.pro2{ height:750px; padding-top:20px; overflow:hidden; background:#434343;}
.pro2 li{ float:left; margin:0 0 17px 19px; width:375px; overflow:hidden; height:356px; background:#eee;}
.pro2 li img{ display:block; width:375px; height:281px;}
.pro2 li h4{ margin:16px 25px 0 25px; font:16px "Microsoft YaHei UI"; color:#333; position:relative;}
.pro2 li h4 em{ display:block; font:14px "Microsoft YaHei UI"; color:#888; padding-top:2px;}
.pro2 li i{ display:block; font:20px "宋体"; font-weight:bold; color:#888; position:absolute; top:12px; right:0;}
.pro2 li h4:before{ content:""; position:absolute; top:3px; right:20px; width:1px; height:36px; background:#dbdbdb;}
.pro2 li:hover{ background:#222;-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;}
.pro2 li:hover h4{ color:#ebb86a;}
.pro2 li:hover img{ border:3px solid #ebb86a; width:369px; height:275px;}

.baoz{ height:748px; background:url(../images/baoz_bg.jpg) no-repeat center top; overflow:hidden; padding-top:90px;}
.baoz2{ height:630 px; position:relative;}
.baoz dl{ position:absolute;}
.baoz dt{ width:123px; height:123px; border:16px solid #fff; border-radius:123px;-moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;}
.baoz dt em{ display:block; width:123px; height:123px; background:#fff; border-radius:123px;}
.baoz dt em img{display:block;width:123px; height:123px; border-radius:123px; border:4px solid #333; box-sizing:border-box;}
.baoz dd{ width:210px; text-align:center;}
.baoz dd h3{ height:36px; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#323232;}
.baoz dd h3 img{ vertical-align:middle;}
.baoz dd p{ font:16px "Microsoft YaHei UI"; line-height:24px; color:#333333; margin-top:5px;}
.baoz .dl1{ top:404px; left:230px;}
.baoz .dl1 dd{ position:absolute; top:-20px; left:-210px;}
.baoz .dl2{ top:178px; left:385px;}
.baoz .dl2 dd{ position:absolute; top:-115px; left:-108px; width:275px;}
.baoz .dl3{ top:173px; left:647px;}
.baoz .dl3 dd{ position:absolute; top:-115px; left:-0; width:275px;}
.baoz .dl4{ top:404px; left:808px;}
.baoz .dl4 dd{ position:absolute; top:-20px; left:160px; width:195px;}
.baoz dl:hover dt{-moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);}

.wit{ height:1020px; margin-top:85px; overflow:hidden;}
.witt{ height:195px; background:url(../images/wit_bg.jpg) no-repeat center top; overflow:hidden;}
.witt h3,.witt h5{ width:171px; float:left; margin-top:53px; text-align:center; font:18px "Microsoft YaHei UI"; color:#ccc; position:relative;}
.witt h3:before{ content:""; position:absolute; top:0; right:0; width:1px; height:76px; background:#423e3b;}
.witt h3 a,.witt h5 a{ display:block; color:#ccc;}
.witt h3 em,.witt h5 em{ display:block; width:52px; height:52px; border-radius:52px; background:#fff; margin:0 auto 8px;}
.witt h3 em img,.witt h5 em img{ display:block;width:52px; height:52px;-moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;}
.witt h3 a:hover,.witt .cur a,.witt h5 a:hover{ font-weight:bold; color:#f6c874;}
.witt h3 a:hover em img,.witt .cur em img,.witt h5 a:hover em img{-moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);}
.witt h3 a:hover em,.witt .cur em,.witt h5 a:hover em{ background:#f6c874;-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;}
.pro2 li:hover h4{ color:#ebb86a;}
.wit1{ height:400px; padding-top:20px; background:#434343; overflow:hidden;}
.wit1 dl{ width:1160px; background:#fff; height:380px; margin:20px 20px 0 20px;overflow:hidden;}
.wit1 dt{ width:671px; height:380px; float:left; position:relative;}
.wit1 dt img{ display:block;width:671px; height:380px;}
.wit1 dt em{ display:block; width:111px; height:111px; position:absolute; top:54px; right:-55px;}
.wit1 dt em img{display:block; width:111px; height:111px; border-radius:111px;}
.wit1 dd{ width:385px; float:right; padding:75px 35px 0 0; overflow:hidden;}
.wit1 dd h4{ font:24px "Microsoft YaHei UI"; font-weight:bold; color:#333; padding-bottom:25px; border-bottom:1px solid #dcdcdc; margin-bottom:15px;}
.wit1 dd h4 a{ display:block; color:#333;}
.wit1 dd h4 em{ display:block; font:16px "Microsoft YaHei UI";  color:#666; margin-top:12px;}
.wit1 dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#333; height:78px; overflow:hidden; margin-bottom:22px;}
.wit1 dd span{ display:block; width:150px; height:40px; border-radius:2rem; background:#ebb86a url(../images/wit_arr.png) no-repeat 100px center; font:14px "Microsoft YaHei UI";}
.wit1 dd span a{ display:block; color:#333; padding-left:32px; line-height:40px;}

.wit2{ height:210px; background:#434343; overflow:hidden; width:100%; position:relative;}
.wit3{ width:1160px; overflow:hidden; margin-left:20px;}
.wit2 li{ width:273px; float:left; margin-right:23px;}
.wit2 li img{width:273px; display:block; height:154px;}
.wit2 li h4{ font:14px "Microsoft YaHei UI"; height:40px; line-height:40px; overflow:hidden; color:#fff; text-align:center;}
.wit2 li a:hover img{ border:3px solid #ebb86a; width:267px; height:148px;}
.wit2 li a:hover h4{ font-weight:bold; color:#ebb86a;}
.wit_l{ font:28px "宋体"; color:#fff; position:absolute; top:60px; left:3px;}
.wit_r{font:28px "宋体"; color:#fff; position:absolute; top:60px; right:3px;}

.ys{ background:#2b2b2b url(../images/ys_bg1.jpg) no-repeat center 400px; padding:80px 0 0 0; height:925px; overflow:hidden;}
.ys .tit1,.news .tit1,.about .tit1{ background:url(../images/ys_line.png) no-repeat center 22px;}
.yst{ height:195px; overflow:hidden; margin-left:105px;}
.yst li{ width:161px; height:161px; float:left; background:url(../images/ys_bg1.png) no-repeat center top; margin-right:125px; font:26px "Microsoft YaHei UI"; text-align:center; color:#333;}
.yst li em{ display:block; width:44px; height:42px; margin:0 auto 4px; padding:36px 0 0 0;}
.yst li em img{ display:block; width:44px; height:42px;}
.yst li:last-child{ margin-right:0;}
.yst .cur{background:url(../images/ys_bg2.png) no-repeat center top; font-weight:bold; color:#000;-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;}
.ys1{ width:1200px; height:530px; overflow:hidden;}
.ys1 dl{ height:530px; overflow:hidden;}
.ys1 dt{ width:793px; height:530px; float:right; overflow:hidden;}
.ys1 dt img{ display:block; width:793px; height:530px;}
.ys1 dd{ width:407px; height:530px; background:#fff url(../images/ys_bg.jpg) no-repeat center center; float:left; overflow:hidden;}
.ys1 dd h3{ width:290px; height:72px; border:2px solid #0e0e0e; margin:75px 0 0 35px; font:36px "Microsoft YaHei UI"; font-weight:bold; line-height:72px; color:#333; text-align:center;}
.ys1 dd h3 em{ display:block; width:84px; height:72px; font:44px Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; line-height:72px; color:#fff; background:#0e0e0e; float:left;}
.ys1 dd h4{ width:320px; margin:18px 0 0 35px; padding-bottom:18px; border-bottom:2px solid #a1a1a1; font:20px "Microsoft YaHei UI"; color:#333;}
.ys1 dd p{ width:320px; font:16px "Microsoft YaHei UI"; line-height:24px; color:#333; margin:18px 0 0 35px; position:relative; padding-left:15px;}
.ys1 dd p:before{ content:""; position:absolute; top:6px; left:0; width:5px; height:5px; border:2px solid #333; border-radius:5px;}



/*新闻资讯*/
.news{ height:700px; margin-top:70px; overflow:hidden;}
.dyt{ height:50px;overflow:hidden; position:relative;}
.dyt h3{ font:16px "Microsoft YaHei UI"; float:left; margin-right:35px; line-height:26px;}
.dyt h3 span{ display:block; width:26px; height:26px; position:relative; float:left; margin:0 8px 0 0;}
.dyt h3 span 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;}
.dyt h3 span 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;}
.dyt h3 a{ display:block; color:#fff;}
.dyt h3 a:hover,.dyt .cur a{ font-weight:bold;}
.dyt h3 a:hover span em,.dyt .cur span em{opacity: 0;visibility:hidden;-webkit-transform: translateX(100%) rotate(180deg);transform: translateX(100%) rotate(180deg);}
.dyt h3 a:hover span i,.dyt .cur span i{visibility:visible;opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.dyt h5 a{ display:block; float:right; font:14px "Microsoft YaHei UI"; line-height:26px; color:#666; background:url(../images/new_more.png) no-repeat right center; padding-right:24px;}
.dy1,.dy2{ height:480px; overflow:hidden;}
.dy1 .dl1{ width:600px; float:left; overflow:hidden; position:relative;}
.dy1 .dl1 dt{ width:600px; height:336px;overflow:hidden;}
.dy1 .dl1 dt img{ display:block;width:600px; height:336px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.dy1 .dl1 dd h4{ height:63px; font:16px "Microsoft YaHei UI"; line-height:63px; color:#fff; border-bottom:1px solid #303030;}
.dy1 .dl1 dd h4 a{ display:block; color:#fff;}
.dy1 .dl1 dd h4 em{ display:block; width:75px; height:26px; background:#ecb96b; border-radius:2rem; font:16px "Microsoft YaHei UI"; line-height:26px; color:#333; float:left; margin:20px 13px 0 0; text-align:center;}
.dy1 .dl1 dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#fff; margin-top:15px;}
.dy1 .dl1:hover dt img,.dy3 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.dy1 .dl1:hover dd h4 a,.dy3 dl:hover dd h4 a{ color:#ebb86a; font-weight:bold;}
.dy3{ width:564px; float:right;}
.dy3 dl{ height:127px; overflow:hidden; background:#fff; margin-bottom:33px;}
.dy3 dt{ width:226px; height:127px; float:left; overflow:hidden;}
.dy3 dt img{ display:block;width:226px; height:127px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.dy3 dd{ width:300px; float:left; padding:16px 0 0 22px;}
.dy3 dd h4 a{ display:block; font:16px "Microsoft YaHei UI"; font-weight:bold; line-height:30px; height:30px; color:#333; overflow:hidden;}
.dy3 dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#666; margin-top:5px;}




/*关于*/
.about{ padding-top:65px; background:#2b2b2b; overflow:hidden;}
.about dt{ width:1200px; height:517px; overflow:hidden;}
.about dt img{ display:block;width:1200px; height:517px;}
.about dl{ height:657px; border-bottom:3px solid #ebb86a; background:#fff; overflow:hidden;}
.about dd h4 a{ display:block; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#222; margin:23px 0 12px; text-align:center;}
.about dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#666; padding:0 30px; text-align:center;}

.pic{/* height:580px;*/ margin-top:14px; overflow:hidden;}
.pict{ height:60px; overflow:hidden;}
.pict h3{ font:22px "Microsoft YaHei UI"; color:#fff; line-height:60px; height:60px; margin-right:54px; float:left;}
.pict h3 a{ display:block; color:#fff;}
.pict h3 a:hover,.pict .cur a{ background:url(../images/pic_icon.png) no-repeat left center; padding-left:44px;}
.pic1{ height:580px!important; overflow:hidden;}
.pic1 li{ width:386px; float:left; margin-right:21px;}
.pic1 li img{ display:block; width:386px;/* height:217px;*/}
.pic1 li h4{ text-align:center; height:55px; font:16px "Microsoft YaHei UI"; font-weight:bold; line-height:55px; color:#ebb86a; border-bottom:2px solid #ebb86a; background:url(../images/pic_more.png) no-repeat right center; overflow:hidden;}


.link{ background:#333; padding:20px 0;position: relative;}
.link p{font:14px "Microsoft YaHei"; margin-left:-20px;}
.link p a{ display: inline-block; font:14px "Microsoft YaHei"; color:#adadad; line-height:24px; height:24px; padding:0 20px; position:relative;}
.link p a:before{ content:""; position:absolute; top:12px; left:0; width:4px; height:1px; background:#adadad;}
.link p a:hover{ color:#ebb86a; font-weight:bold; text-decoration:underline;}
.link p a:last-child{ padding-right:0;}
.link p a:nth-child(1):before{ background:none;}


@-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);
  }
}