.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{ overflow-x:hidden;}

.bantest {position: relative;width: 100%;overflow: hidden;}  
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow{ display:none; width:0; height:0; background:none;}
.banner .slick-dots{ position:absolute; bottom:40px; height:30px; left:30%; z-index:6;}
.banner .slick-dots li button:before{ content:""; position:absolute; width:10px; height:10px; border:2px solid #1b2b62; border-radius:10px;opacity:1;}
.banner .slick-dots .slick-active button:before{ background:#1b2b62;}

.tit{height:144px; font:44px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#333742;}
.tit a{ display:block; color:#333742;}
.tit em{ display:block; font:18px "Microsoft Yahei"; line-height:60px; color:#666; background:url(../images/pro_line.png) no-repeat center top; margin-top:8px;}

.yinz{ height:630px; background:url(../images/guide_bg.gif) repeat-x center bottom; padding-top:80px;}
.yinz dl{ height:374px; overflow:hidden;}
.yinz dt{ width:600px; height:374px; float:right; overflow:hidden;}
.yinz dt img{ display:block;width:600px; height:374px;}
.yinz dd{ width:554px; float:left; overflow:hidden;}
.yinz dd h3{ font:36px "Microsoft YaHei UI"; font-weight:bold; color:#1b2b62; padding:20px 0; background:url(../images/ppline.png) no-repeat left bottom;}
.yinz dd h3 em{ display:block; font:26px "Microsoft YaHei UI"; color:#282828; margin-top:8px;}
.yinz dd p{ font:16px "Microsoft YaHei UI"; line-height:31px; margin:10px 0;}
.yinz dd span{ display:block; height:105px; margin-top:20px; font:16px "Microsoft YaHei UI"; line-height:106px; padding-left:107px; background:url(../images/guide_logo.png) no-repeat left center;}
.yinz dd span em{ width:255px; display:block; background:url(../images/guide_q.png) no-repeat right center;}
.yinz ul{ height:150px; margin:40px 0; background:#fff; box-shadow:0 0 1.8rem #a4a4a4;}
.yinz li{ width:200px; float:left; font:18px "Microsoft YaHei UI"; color:#a6a6a6; padding-left:100px; position:relative; height:150px;}
.yinz li:before{ content:""; position:absolute; top:24px; right:0; width:1px; height:96px; background:#bdbdbd;}
.yinz li:last-child:before{ background:none;}
.yinz li span{ display:block; font:72px Arial, Helvetica, sans-serif; font-weight:bold; color:#333742; padding-top:16px; position:relative;}
.yinz li span em{ display:block; font:20px "Microsoft YaHei UI"; position:absolute; top:20px; left:77px; width:80px;}
.yinz li:nth-child(2) span em{ left:40px;}
.yinz li:nth-child(4){ width:250px; padding-left:50px;}
.yinz li:nth-child(4) span em{ left:160px;}
.yinz li:hover{ background:#1b2b62; color:#fff;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;}
.yinz li:hover span,.yinz li:hover span em{ color:#fff;}

.pro{ background:#f6f6f6; height:913px; overflow:hidden;}
.prot{ height:275px; overflow:hidden;}
.pro01{ height:530px;}
.pro01 dl{ width:330px; height:530px; background:#fff; float:left; margin-right:13px; position:relative;}
.pro01 dt img{display:block;width: 330px;height:355px;margin:39px auto 0;}
.pro01 dt b{ display:block; background:url(../images/pro_d.png) no-repeat; width:68px; height:60px; position:absolute; bottom:0; right:0; font:26px "Microsoft YaHei UI"; font-weight:bold; text-align:center; line-height:78px; color:#fff;}
.pro01 dd{ width:310px; margin:0 auto; padding-top:50px;}
.pro01 dd h3{ height:36px; font:20px "Microsoft YaHei UI"; font-weight:bold; line-height:36px; overflow:hidden;}
.pro01 dd h3 a{ display:block; color:#000;}
.pro01 dd h3 em{ display:block; width:36px; height:36px; border-radius:36px; float:right; background:#666; font-size:14px; font-weight:bold; font-weight:bold; color:#fff; text-align:center; line-height:36px;}
.pro01 dd h5{ height:39px; margin-top:10px; border-bottom:1px solid #ddd;}
.pro01 dd h5 a{ display:block; font:14px "Microsoft YaHei UI"; line-height:39px; color:#666; margin-right:25px; float:left;}
.pro01 dd h5 a:last-child{ margin-right:0;}
.pro01 dd h5 a:hover,.pro01 dd h3 a:hover{ font-weight:bold; color:#1b2b62;}
.pro01 dd h3 a:hover em{ background:#1b2b62; color:#fff;}
.pro01 dl:hover{box-shadow:0 0 1.8rem #a4a4a4;}
.pro1{ width:1200px; height:128px; background:#fff; margin:30px auto 0; border-radius:8px;box-shadow:0 0 1.8rem #a4a4a4;}
.pro1 h3{ width:170px; height:128px; background:#1b2b62; text-align:center; font:20px "Microsoft YaHei UI"; line-height:128px; border-radius:8px 0 0 8px; color:#fff; float:left;}
.pro1 p{ width:1020px; float:right; font:14px "Microsoft YaHei UI"; line-height:34px; color:#424242; margin-top:11px;}
.pro1 p a{ display:block; float:left; color:#424242; padding-left:28px;}
.pro1 p a:hover{font-weight:bold; color:#1b2b62;}
.pro1 p a:last-child{ color:#1b2b62; font-weight:bold;}

.zzhi{ background:url(../images/ted_bg.jpg) no-repeat center top; height:820px; overflow:hidden; padding-top:74px;}
.zzhi .tit em{ background:url(../images/ted_line.png) no-repeat center top;}
.zzhi1{ height:620px; position:relative; margin-top:25px;}
.zzhi2,.zzhi3{ height:620px;}
.zzhi1 dl{width: 300px;height: 300px;background:url(../images/ted_bg1.png) no-repeat;position:absolute;}
.zzhi1 dt{ width:141px; height:141px; float:left; padding:52px 0 0 52px;}
.zzhi1 dt img{ display:block;width:141px; height:141px;}
.zzhi1 dt h5{ width:30px; height:30px; background:#414141; border-radius:30px; border:2px solid #fff; color:#fff; font:16px "ÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¥ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â®ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€šÃ‚Â¹ÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¤ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â½ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬Ãƒâ€¦Ã¢â‚¬Å“"; font-weight:bold; text-align:center; line-height:30px; position:absolute; top:55px; left:520px;}
.zzhi1 dd{width:196px;float:left;padding: 55px 0 0 72px;}
.zzhi1 dd h3{ font:20px "Microsoft YaHei UI"; font-weight:bold; color:#333; line-height:25px;}
.zzhi1 dd p{ font:16px "Microsoft YaHei UI"; line-height:25px; color:#666; margin-top:8px;}
.zzhi1 dd p b{ color:#1b2b62;}
.zzhi1 .dl1{ top:25px;}
.zzhi1 .dl2{ background:url(../images/ted_bg2.png) no-repeat; top:140px; left:740px;}
.zzhi1 .dl2 dt h5{ left:-105px;}
.zzhi1 .dl4{ background:url(../images/ted_bg2.png) no-repeat; top:264px; left:740px;}
.zzhi1 .dl4 dt,.zzhi1 .dl2 dt{padding:52px 0 0 72px;}
.zzhi1 .dl4 dt h5{ left:-45px;}
.zzhi1 .dl3{ top:275px; left:15px;}
.zzhi1 dl:hover dt h5{ background:#1b2b62;}
.zzhi_l{ background:url(../images/ted_l.png) no-repeat; width:37px; height:37px; overflow:hidden; position:absolute; bottom:50px; left:0; cursor:pointer;}
.zzhi_r{ background:url(../images/ted_r.png) no-repeat; width:37px; height:37px; overflow:hidden; position:absolute; bottom:50px; left:60px;cursor:pointer;}

.case{ margin:70px 0; max-height:890px;}
.caset{ width:1200px; height:45px; margin:0 auto 25px;}
.caset h3{font:18px "Microsoft YaHei UI";line-height:45px;float:left;padding: 0 59px;position:relative;}
.caset h3:nth-child(1){ padding-left:0;}
.caset h3:before{ content:""; position:absolute; top:17px; right:0; width:1px; height:10px; background:#95979c;}
.caset h3 a{ display:block;}
.caset h3 a:hover,.caset .cur a{ font-weight:bold; height:42px; border-bottom:3px solid #1b2b62; color:#1b2b62;}
.caset h5 a{font:18px "Microsoft YaHei UI"; line-height:45px; display:block; color:#666; float:right; background:url(../images/case_arr.png) no-repeat right center; padding-right:45px;}
.case1{min-width:1200px;max-width:1920px;width:88.54%;max-height:675px;min-height: 552px;margin:0 auto;overflow:hidden;background:#555;}
.case1 dl{max-height: 649px;}
.case dt{ width:70.588%; float:left; overflow:hidden; position:relative;}
.case dt img{display:block;width: 1200px;}
.case dd{ width:22.35%; float:left; margin:2rem 0 0 3%;}
.case dd h3 a{ display:block; font:38px "Microsoft YaHei UI"; font-weight:bold; color:#f7f7f7; height:85px; line-height:85px; border-bottom:1px solid #aaaaaa; overflow:hidden;}
.case dd h5{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#f7f7f7; margin:20px 0;}
.case dd p{ font:14px "Microsoft YaHei UI"; line-height:25px; height:100px; color:#ddd; overflow:hidden;}
.case dd span{display:block;margin-top: 5%;}
.case dd span em{ display:block; font:16px "Microsoft YaHei UI"; line-height:50px; height:50px; color:#f7f7f7; position:relative;}
.case dd span em:before{ content:""; position:absolute; top:50%; left:-110px; width:100px; height:1px; background:#1b2b62; z-index:2;}
.case dd span a{display:block;width: 42.94%;float: left;padding-right: 20px;padding-top: 45px;}
.case dd span img{display:block;width:100%;height: 100px;}
.case dd span i{ display:block; text-align:center; height:36px; font:14px "Microsoft YaHei UI"; color:#d2d2d4; line-height:36px; overflow:hidden; background:#474b55;}
.case dl:hover h3 a{ color:#1b2b62;}
.case dt:before{content: '';
            cursor: pointer;
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
            background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
            transform: skewx(-25deg);}
.case dt:hover:before{
            left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;
        }
@media (min-width: 1200px) and (max-width: 1280px) {
}
@media (min-width: 1281px) and (max-width: 1366px) {
.case1{min-height:476px; }
}



.super1 p{height: 800px;position:relative;}
.super1 p:nth-child(1){background:url(../images/ys1.jpg) no-repeat center top;}
.super1 p:nth-child(2){background:url(../images/ys2.jpg) no-repeat center top;}
.super1 p:nth-child(3){background:url(../images/ys3.jpg) no-repeat center top;}
.super1 p:nth-child(4){background:url(../images/ys4.jpg) no-repeat center top;}
.super1 p img{ display:block;width:1920px; height:680px;}
.supert{ width:1300px; margin:-54px auto 0;height:330px; z-index:8; position:relative;}
.super dl{ width:245px; float:left; height:210px; padding:120px 0 0 80px;position:relative;}
.super dl:before{ content:""; position:absolute; top:113px; right:0; width:1px; height:180px; background:#dfdfdf;}
.super dl:last-child:before{ background:none;}
.super dt h3{ font:24px "Microsoft YaHei UI"; font-weight:bold; color:#272727; margin-bottom:15px;}
.super dt h4 em{ display:block;}
.super dt h4{font:16px "Microsoft YaHei UI"; line-height:24px; padding-bottom:44px; position:relative;}
.super dt h4:before{ content:""; position:absolute; bottom:0;width:20px; height:2px; background:#848484;}
.super dd{ display:none;}
.super dd p{ font:14px "Microsoft YaHei UI"; line-height:20px; color:#fff; padding:0 30px 0 24px; position:relative; margin-bottom:18px;}
.super dd p:before{ content:""; position:absolute; top:6px; left:0; width:6px; height:6px; border:1px solid #fff; border-radius:9px;}
.super .cur{
	background: #1b2b62;
	width:295px;
	height:270px;
	padding:60px 0 0 30px;
	-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;
	}
.super .cur dt h3{ font-size:26px; color:#fff; margin-bottom:36px;}
.super .cur dt h4{ display:none;}
.super .cur dd{ display:block;}

.news{ height:750px; padding-top:70px; background:#f6f6f6;overflow:hidden;}
.dy{ width:650px; height:520px;}
.tit2{ height:56px; border-bottom:1px solid #d1cfcb; font:20px "Microsoft YaHei UI"; font-weight:bold; line-height:56px; position:relative; margin-bottom:30px;}
.tit2:before{ content:""; position:absolute; bottom:0; left:0; width:120px; height:2px; background:#1b2b62;}
.tit2 a{ display:block; color:#1b2b62; padding-left:36px; background:url(../images/dy_icon.png) no-repeat left center; height:54px;}
.tit2 em{ float:right; font:12px "Microsoft YaHei UI"; text-transform:uppercase; line-height:56px; color:#2b2b2b;}
.dy dl{ margin-bottom:32px; height:120px;}
.dy dt{ width:180px; height:120px; float:left; overflow:hidden;}
.dy dt img{ display:block;width:auto; height:120px;-webkit-transition: 1s;margin: 0 auto;
-moz-transition: 1s;
transition: 1s;}
.dy dd{ width:400px; float:left; padding:15px 0 0 30px;}
.dy dd h3 a,.faq dd h3 a{ display:block; font:16px "Microsoft YaHei UI"; font-weight:bold; height:36px; line-height:36px; color:#2b2b2b; overflow:hidden;}
.dy dd p,.faq dd p{ font:14px "Microsoft YaHei UI"; line-height:25px; color:#818181; margin-top:8px;}
.dy dl:hover{ background:#fff; box-shadow:0 0 1rem #ccc;}
.dy dl:hover dd h3 a{ color:#1b2b62;}
.dy dl:hover img,.faq dl:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}

.faq{ width:450px; padding-left:50px; position:relative;}
.faq:before{ content:""; position:absolute; top:20px; left:0; width:1px; height:520px; background:#d0ceca;}
.faq .tit2 a{ background:url(../images/faq_icon.png) no-repeat left 17px;}
.faq dl{ height:280px; border-bottom:1px solid #d0ceca; margin-bottom:36px;}
.faq dt{ height:150px; width:450px; overflow:hidden; margin-bottom:15px;}
.faq dt img{ display:block;height:150px; width:450px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.faq li{ height:38px; font:14px "Microsoft YaHei UI"; line-height:38px; overflow:hidden;}
.faq li a{ display:block; position:relative; padding-left:20px;}
.faq li a:before{ content:""; position:absolute; top:13px; left:0; width:0; height:0; border-left:6px solid #7b7b7b; border-top:4px solid rgba(0,0,0,0); border-bottom:4px solid rgba(0,0,0,0);}
.faq li a:hover{ font-weight:bold; color:#1b2b62;}

.about{background:url(../images/about.jpg) no-repeat center top;padding-top: 366px;}
.about dl{width: 520px;background: #ffffff8a;padding:60px 100px 0 100px;height: 452px;box-shadow:0 0 1.2rem #ccc;margin:0 auto;margin-top: -151px;position: relative;top: -112px;/* margin-left: 97px; */}
.about dd{ text-align:center;}
.about dd h3 a{ display:block; font:28px "Microsoft YaHei UI"; font-weight:bold; color:#000;}
.about dd p{ font:15px "Microsoft YaHei UI"; line-height:25px; margin:20px 0 46px;}
.about dt{ text-align:center; height:30px; font:16px "Microsoft YaHei UI"; line-height:30px;}
.about dt a{ color:#333333; padding:0 30px;}
.about dt em img{ vertical-align:middle; padding-right:10px;}
.about dt a:hover{ font-weight:bold; color:#1b2b62;}
.about h5 a{ display:block; width:240px; height:50px; margin:-25px auto 0; background:#1b2b62; font:16px "Microsoft YaHei UI"; text-align:center; line-height:50px; color:#fff;}
.about h5:hover{transform: translateY(-10px);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}

.link{ background:#1b2023; height:70px;}
.link h3{ font:15px "Microsoft YaHei UI"; color:#a8a9aa; width:100px; float:left; line-height:70px;}
.link p{ width:1080px; float:right;}
.link p a{ display:block; float:left; font:14px "Microsoft YaHei UI"; line-height:70px; color:#a8a9aa; padding:0 20px;}
.link p a:hover{font-weight:bold; text-decoration:underline;}

@keyframes living {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top:0px;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
}
@keyframes living1 {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top: 0;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
}
@-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);
  }
}


