@charset "utf-8";
html{color:#000;background:#FFF; }
body { color:#666;font:12px/1.231 "Microsoft Yahei";} /*缃戠珯瀛椾綋棰滆壊*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;} 
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; }
input,button,textarea,select{*font-size:100%;}
input,select{vertical-align:middle;}
i,em{ font-style:normal;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%; border-collapse:collapse;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}

.mt10{ margin-top:10px;}

a { color:#666; text-decoration:none;}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
.vam { vertical-align:middle;}
.clear{ clear:both; height:0; line-height:0; font-size:0;}
.clearfix:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.clearfix{*zoom:1}
p{ word-spacing:-1.5px;}
.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
/* -- 璐墿杞﹀閮ㄦ鏋 -- */
.cart_header , .cart_content , .cart_footer { width:760px; margin:0 auto;}

/* -- 椤甸潰鏁翠綋甯冨眬 -- */
.header , .content , .footer { width:1400px; margin:0 auto;  }
.h_nav li a:-webkit-any-link{ display:block;}






/* -- 浠ヤ笂閮ㄥ垎浠ュ墠resetcommon -- */



/* -- 棣栭〉鏍峰紡寮€濮 -- */
.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{min-width: 1200px;max-width: 1920px;width: 100%;margin: 0 auto;overflow-x: hidden;}

.bantest {position: relative;width: 100%;min-width: 1200px;max-width: 1920px;width: 100%;margin: 0 auto;} 
.bantest:before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:76px; background:url(../images/ban_bg.png) no-repeat center bottom; background-size:1920px 76px; z-index:1;} 
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow {position: absolute;font-size: 0;top: 50%;z-index: 9; width:73px; height: 73px; margin-top: -73px;border: 0; outline: none;overflow:hidden;}
.banner .slick-prev {left: 10%; display: none; background:url(../images/ban_prev.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/ban_next.png) no-repeat;}   
.slick-dots { position: absolute;left: 50%; font-size:0; bottom:-80px;width: 300px;text-align: center;margin-left: -780px;z-index: 11;}
.slick-dots li {display: inline-block;margin: 0 8px; }
.slick-dots li button {display: block;background:none;width: 16px;height: 16px;border-radius: 2px;border:3px solid #d4d4d4;box-shadow:0; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;cursor:pointer;}
.slick-dots .slick-active button {background:#ffd500;border:3px solid #ffd500;} 

.tit{ font:48px "Microsoft YaHei UI"; text-align:center; color:#231815; font-weight:bold;}
.tit a{ color:#231815;}
.tit em{ display:block; font-size:20px; padding:15px 0 0;font-weight:normal;}

.tuliao{text-align:right;min-width: 1200px;max-width: 1920px;width: 100%;margin: 0 auto;height:155px;}
.tuliao .content{ position:relative; margin:0 auto;}
.tuliao dl{ width:670px; height:222px; float:right;}
.tuliao dt{ font:54px "Microsoft YaHei UI"; color:#231815; line-height:62px; color:#231815;}
.tuliao dt em{ display:block;}
.tuliao dd{ font:14px "Microsoft YaHei UI"; color:#cacaca; margin-top:25px;}
.tuliao dd a{ color:#cacaca; padding-left:10px;}
.tuliao dd a:hover{ font-weight:bold; color:#f3c01d;}


.guide{ background:url(../images/guide_bg.jpg) no-repeat center bottom; height:715px; margin-top:85px; overflow:hidden;}
.guide dl{ margin-bottom:65px;}
.guide dt{ width:49.857%; float:left; position:relative;}
.guide dt img{ display:block; width:100%;}
.guide dt em{ display:block; background:url(../images/guide_v.png) no-repeat; width:88px; height:88px; position:absolute; top:50%; right:-44px; margin-top:-44px;}
.guide dd{ width:42.857%; float:right;}
.guide dd h3 a{ display:block; font:48px "Microsoft YaHei UI"; font-weight:bold; color:#231815; margin:45px 0 38px;}
.guide dd p{ font:15px "Microsoft YaHei UI"; line-height:24px; color:#666; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #f0f0f0;}
.guide dd i{ display:block; font:14px "Microsoft YaHei UI"; text-transform:uppercase; color:#bcbcbc; line-height:24px;}
.guide li{ height:95px; float:left; font:16px "Microsoft YaHei UI"; line-height:95px; color:#231815; margin-right:10%;}
.guide li b{ width:94px; height:94px; background:#fed000; border-radius:2rem; float:left; margin:0 15px 30px 0;}
.guide li b img{ display:block;width:94px; height:94px;}
.guide li span{}
.guide li:nth-child(3){ margin-right:0;}
.guide li:last-child{ float:right; margin-right:0;}
.guide li span em{ font-size:24px; font-weight:bold; padding-right:4px;}



.pro_22{ min-width:120px; max-width:1920px; width:100%; margin:0 auto; overflow:hidden;}
.pro_22 dl{ width:18.6979%; float:left; margin-right:1px; overflow:hidden;}
.pro_22 dl:last-child{ margin-right:0;}
.pro_22 dt{ position:relative; overflow:hidden;}
.pro_22 dt:before{ content:""; position:absolute; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}
.pro_22 dt img{ display:block; width:100%;}
.pro_22 dt span{ display:block; width:100%; text-align:center; position:absolute; top:20%; font:42px "瀹嬩綋"; font-weight:bold; color:#f3c01d;}
.pro_22 dt span em{ display:block; font:20px "Microsoft YaHei UI"; color:#f4efda; margin:10px 0 15px;}
.pro_22 dt span b{ display:block; width:55px; height:55px; background:url(../images/pro_more.png) no-repeat; margin:0 auto;}
.pro_22 dd{ display:none; position:relative;}
.pro_22 dd h2 img{display:block; width:100%;}
.pro_22 .pro_dd{ position:absolute; top:5%; left:0;}
.pro_22 .pro_dd h3{ width:260px; height:65px; background:url(../images/pro_bg.png) no-repeat; font:16px "Microsoft YaHei UI"; font-weight:bold; line-height:65px; color:#333; text-align:center;}
.pro_22 .pro_dd h4{display:block; font:42px "瀹嬩綋"; font-weight:bold; color:#f4efda; margin:8% 0 0 10%;}
.pro_22 .pro_dd h4 em{ display:block; font:20px "Microsoft YaHei UI"; color:#f4efda; margin:10px 0 15px;}
.pro_22 .pro_dd p{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#f4efda; width:70%; margin:5% 0 5% 10%;}
.pro_22 dl:nth-child(3) .pro_dd p{ width:52%;}
.pro_22 .pro_dd h5{ margin:2% 0 0 10%;}
.pro_22 .pro_dd h5 span{ display:block; width:108px; background:url(../images/pro_bg1.png) no-repeat center top; height:118px; float:left; margin-right:15px; font:14px "Microsoft YaHei UI"; text-align:center; color:#fff;}
.pro_22 .pro_dd h5 span b{ display:block; width:60px; height:60px; margin:0 auto; padding-top:16px;}
.pro_22 .pro_dd h5 em{}
.pro_22 .cur{ width:62.35%;}
.pro_22 .cur dt{ display:none;}
.pro_22 .cur dd{ display:block;}


.pro{ height:850px; margin-top:85px; overflow:hidden;}
.pro .content{ position:relative;}
.pro_l{ background:url(../images/pro_l.png) no-repeat; width:24px; height:42px; position:absolute; top:44%;cursor:pointer;}
.pro_r{ background:url(../images/pro_r.png) no-repeat; width:24px; height:42px; position:absolute; top:44%; right:0;cursor:pointer;}
.pro_l:hover,.pro_r:hover{ background-position:0 -42px;}
.pro1{ width:92.857%; margin:45px auto 0; overflow:hidden;}
.pro li{ width:20.769%; float:left; margin:0 20px;}
.pro li img{ display:block; width:100%; margin:10px 0 16px;box-sizing:border-box;}
.pro li span{ display:block; font:14px "Microsoft YaHei UI"; color:#707070; text-align:center;}
.pro li span em{ display:block; font:20px "Microsoft YaHei UI"; text-align:center; color:#333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; line-height:30px; margin-bottom:15px;}
.pro li span i{ display:block; background:#fed000; width:145px; height:46px; margin:31px auto 20px; font:14px "Microsoft YaHei UI"; font-weight:bold; text-align:center; line-height:46px;color:#333; border-radius:0.5rem;}
.pro h5{margin:50px auto 0; height:75px; border:2px solid #6e6e6e; border-radius:5px; width:400px; font:16px "Microsoft YaHei UI";line-height:75px; color:#333;}
.pro h5:hover{border:2px solid #fed000; background:#fed000;}
.pro h5 a{ display:block; color:#333333; background:url(../images/pro_arr.png) no-repeat 245px center; padding-left:145px;}
.pro li:hover img{ box-shadow:0 0 1rem #eee;}



/**/
.super .tit{ padding:85px 0 45px; background:#f3f3f3; }
.super1{ height:636px; background:url(../images/super_bg.jpg) no-repeat center top; overflow:hidden;}
.super1 dl{ width:36.42%; float:right; margin-top:240px;}
.super1 dt{ font:40px "Microsoft YaHei UI"; font-weight:bold; height:88px; color:#231815; margin-bottom:50px;}
.super1 dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#333333; margin-bottom:14px;}
.super2{ margin:100px 0;}
.super2 dl{ width:31.5%; float:left; margin-right:2.5%; height:600px; background:#f9f7f3;}
.super2 dl:last-child{ margin-right:0;}
.super2 dt img{ display:block; width:100%;}
.super2 dd{background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(248,246,242,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(248,246,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(248,246,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f6f2',GradientType=0 ); padding:0 10%; position:relative;}
.super2 dd h3{ font:28px "Microsoft YaHei UI"; font-weight:bold; color:#333; position:absolute; top:-30px; left:10%;}
.super2 dd h3 em,.super1 dt em{ display:block; font:20px "Microsoft YaHei UI"; margin-top:8px;}
.super2 dd p:nth-child(2){ padding:70px 0 0 0;}
.super2 dd p{ font:14px "Microsoft YaHei UI"; color:#666; margin-bottom:8px; line-height:24px;}
.super2 dl:hover dd h3{ color:#fed000;}



.case{ background:#f3f3f3; height:1200px; padding-top:70px; overflow:hidden;}
.caset{ height:50px; margin:20px auto 28px; width:1060px;}
.caset h3{ width:10%; height:50px; float:left; font:18px "Microsoft YaHei UI"; text-align:center; line-height:50px;}
.caset h3 a{ display:block; color:#231815;}
.caset .cur a,.caset h3:hover a{-webkit-transition:all 0.7s; background:#f3c01d; font-weight:bold; border-radius:50px;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 脙楼芒鈧劉脜鈥 Chrome */
-o-transition-property:background;}
.case1{ min-width:1200px; max-width:1920px; width:100%; margin:0 auto;}
.case2{ height:820px;}
.case1 li{ width:31.041%; height:auto; float:left; margin:0 0 1.875rem 1.8%; position:relative; overflow:hidden;}
.case1 li img{ display:block;width:100%;}
.case1 li span{ display:block; height:4.5rem; background:#fff; width:88%; font:18px "Microsoft YaHei UI"; line-height:4.5rem; color:#666; padding:0 6%;}
.case1 li span em{ display:block; font-size:16px; font-weight:bold; color:#333; background:url(../images/case_s.png) no-repeat left center; padding-left:30px; float:right;}
.case1 li:nth-child(3n-2){ clear:both;}
.case1 li:hover span{ background:#f3c01d; font-weight:bold; color:#333;
	transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 脙楼芒鈧劉脜鈥 Chrome */
-o-transition-property:background;}
/*.case li:hover{ box-shadow:0 0 0.5rem #fed000;}*/
.case h5{ margin:40px auto 0; height:75px; border:2px solid #6e6e6e; border-radius:5px; width:1040px; font:20px "Microsoft YaHei UI";line-height:75px; color:#666; padding:0 80px;}
.case h5 a{color:#333; display:block;}
.case h5 b{ color:#333;}
.case h5 em{ display:block; float:right; font:16px "Microsoft YaHei UI"; line-height:75px; background:url(../images/pro_arr.png) no-repeat right center; width:95px;}
.case h5:hover{ background:#fed000; border:2px solid #fed000;}

@media screen and (max-width:1400px) {
.profen dt a{padding:9px 0;}
}

.news{ height:1000px; padding-top:75px; overflow:hidden;}
.newst{ width:600px; height:60px; margin:30px auto 34px;}
.newst h3{ width:200px; height:60px; float:left; font:20px "Microsoft YaHei UI"; line-height:60px; color:#666;}
.newst h3 a{ display:block; color:#666;}
.newst h3 em{ display:block; width:28px; height:28px; float:left; margin:15px 8px 0 39px;}
.newst h3 em img{ display:block;}
.newst .cur a{ background:#f3c01d; border-radius:30px; color:#231815; font-weight:bold;}
.new_ban{ width:34.7142%; float:left; position:relative; overflow:hidden; height:671px;}
.new_ban p img{ display:block; width:100%;}
.new_bant{ width:100%; height:44px; text-align:center; position:absolute; bottom:0;}
.new_bant a{ display:inline-block; width:15px; height:15px; border-radius:30px; background:#f1f1f1; margin:0 6px;}
.new_bant .cur{ width:40px; background:#f3c01d;}
.news1{ width:65.2858%; float:left; border-top:1px solid #ccc; position:relative;}
.news1:before{ content:""; position:absolute; top:-1px; left:0; width:6%; height:1px; background:#fff;}
.news2{}
.news2 dl{ float:left; width:46.15%; margin:0 0 0 6%; height:230px; overflow:hidden; padding:40px 0;border-bottom:1px solid #ccc; position:relative;}
.news2 dt h3 a{ display:block; font:16px "Microsoft YaHei UI"; font-weight:bold; color:#231815; margin:32px 0 10px;}
.news2 dt p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#666666;}
.news2 dt em{ display:block; font:14px "Microsoft YaHei UI"; color:#666; margin-top:48px;}
.news2 dd .dd_imga{ display:block; position:relative; overflow:hidden;}
.news2 dd .dd_imga:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.news2 dd img{ display:block; width:100%;}
.news2 dd{ position:relative; display:none;}
.news2 .new_dd{ position:absolute; top:0; left:0; padding:45px 6% 0 6%; z-index:5;}
.news2 dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#fff;}
.news2 dd span{ display:block; width:175px; height:45px; border:2px solid #e8b71d; border-radius:40px; margin:25px auto 0; font:14px "Microsoft YaHei UI"; line-height:45px;}
.news2 dd span a{ display:block; color:#fff; background:url(../images/new_arr.png) no-repeat 120px center; padding-left:50px;}
.news2 dl:hover dt{ display:none;}
.news2 dl:hover dd{ display:block;}
.news2 dl:nth-child(2n){ float:right; margin-left:0;}
.news h5{width:65.2858%; float:right; font:20px "Microsoft YaHei UI"; color:#666; margin-top:-25px; text-align:right;}




.about{ position:relative; height:926px; background:url(../images/about_bg.jpg) no-repeat center top;}
.about h3{ font:48px "Microsoft YaHei UI"; font-weight:bold; color:#fff; position:relative; padding:80px 0 27px; margin-bottom:20px;}
.about h3:before{ content:""; position:absolute; bottom:0; left:0; width:30px; height:3px; background:#f3c01d;}
.about h3 a{ display:block; color:#fff;}
.about h3 em{ display:block; font:20px "Microsoft YaHei UI"; margin-top:8px;}
.about p{ width:46.28%; font:14px "Microsoft YaHei UI"; line-height:30px; color:#fff;}
.about span a{ display:block; width:44px; height:44px; background:url(../images/about_arr.png) no-repeat; margin-top:28px;}


.pic{ height:380px; overflow:hidden; background:#f3f3f3;}
.pic1{ width:28.57%; float:left; overflow:hidden;}
.pict{ width:62.14%; float:right;}
.pict p{ font:14px "Microsoft YaHei UI"; line-height:30px; color:#343434; margin:60px 0 36px;}
.pict h3{ width:25.39%; float:left; padding:0 0 0 4%; border-left:2px solid #d6d6d6; font:26px "Microsoft YaHei UI"; color:#231815;}
.pict h3 a{ display:block; color:#231815;}
.pict h3 em{ display:block; width:42px; height:42px; margin-top:22px;}
.pict .cur a{ display:block; color:#efbe23; font-weight:bold;}
.pic2{ position:relative;}
.pic3{ height:255px;}
.pic3 li img{ display:block; width:100%;}
.pict2{ width:100%; height:25px; position:absolute; bottom:0; left:0; text-align:center;}
.pict2 a{ display:inline-block; width:8px; height:8px; border-radius:10px; background:#f1f1f1; margin:0 3px;}
.pict2 .cur2{ width:20px; background:#f3c01d;}




.link{width:1400px; margin: 20px auto 0 auto; position: relative; z-index:12;}
.link .content{position: absolute; top: -136px;right: 0; width:60.71%; height:70px;font:14px "Microsoft YaHei";color:rgba(255,255,255,0.5); line-height:70px;}
.link a{ display: block; padding-right:15px; font:14px "Microsoft YaHei"; color:#231815; opacity:0.8;line-height:25px; height:25px; position:relative;float:left;}
.link a:hover{font-weight:bold; text-decoration:underline;}
.link a:last-child{ padding-right:0;}

@media (min-width: 1200px) and (max-width: 1680px) {
	.tuliao .content,.guide .content,.pro .content,.super .content,.news .content,.about .content,.pic .content{ width:1200px; margin:0 auto;}
	.tuliao dl{ top:-130px;}
	.guide li{ margin-right:7%;}
	.slick-dots {margin-left: -680px;}
	.pro{ height:790px;}
	.super2 dl{ height:570px;}
	.news{ height:850px;}
	.news2 dl{ height:200px; padding:30px 0;}
	.news2 .new_dd{ padding-top:22px;}
	.news2 dd span{ margin-top:15px;}
	.link{ width:1200px;}
}
@media screen and (max-width:1600px) {
	.pro_22 .pro_dd h4,.pro_22 .pro_dd p,.pro_22 .pro_dd h5{ margin-left:8%;}
	.case{ height:1070px;}
}
@media screen and (max-width:1440px) {
	.pro_22 .pro_dd h4{ margin-top:4%;}
	.pro_22 .pro_dd p{ width:60%; margin-top:3%; margin-bottom:3%;}
	.pro_22 .pro_dd h4,.pro_22 .pro_dd p,.pro_22 .pro_dd h5{ margin-left:5%;}
	.case{ height:1030px;}
	.case2{ height:700px;}
	.new_ban{ height:585px;}
}
@media screen and (max-width:1366px) {
    .case{ height:1000px;}
}
@media screen and (max-width:1280px) {
    .case2{ height:635px;}
    .new_ban{ height:585px;}
}

@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);
  }
}