@charset "utf-8"; /* 娓呴櫎鍐呭杈硅窛 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, th, td { /* table elements 琛ㄦ牸鍏冪礌 */ margin: 0; padding: 0; } input, textarea { border: 2 none; box-shadow: none; outline: none; } /* 璁剧疆榛樿瀛椾綋 */ body, button, input, select, textarea { font: 14px/22px "Microsoft YaHei", "寰蒋闆呴粦", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif; color: #666; } * h1, * h2, * h3, * h4, * h5, * h6 { margin: 0px; } /*瑕嗙洊bootstrape瀵规爣棰樺姞鐨勯粯璁ゅ杈硅窛*/ address, cite, dfn, em, i, var { font-style: normal; } /* 鏂滀綋鎵舵 */ /* 閲嶇疆鍒楄〃鍏冪礌 */ ul, ol, li { list-style: none; } /* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 */ a { text-decoration: none; color: #666; word-wrap: break-word; } /*鑻辨枃鎹㈣*/ a:hover { text-decoration: none; color: #910800; } /* 閲嶇疆琛ㄥ崟鍏冪礌 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 鎼溅锛氳閾炬帴閲岀殑 img 鏃犺竟妗 */ /* 娉細optgroup 鏃犳硶鎵舵 */ button, input, select, textarea { font-size: 100%;/* 浣胯〃鍗曞厓绱犲湪 ie 涓嬭兘缁ф壙瀛椾綋澶у皬 */ } /* 閲嶇疆琛ㄦ牸鍏冪礌 */ table { border-collapse: collapse; border-spacing: 0; } /* 璁╅潪ie娴忚鍣ㄩ粯璁や篃鏄剧ず鍨傜洿婊氬姩鏉★紝闃叉鍥犳粴鍔ㄦ潯寮曡捣鐨勯棯鐑 */ html { overflow-y: scroll; } /*璁剧疆娴姩*/ .fl { float: left; } .fr { float: right; } .pr { position: relative; } .pa { position: absolute; } /*瀛椾綋澶у皬*/ .clear { clear: both; height: 0; } .blk-main .clearlist { clear: both; height: 0; padding: 0; margin: 0; border: 0; width: 100%; float: none; } /*琛ㄥ崟寮规*/ .nsw-modal { width: 100%; height: 100%; background: rgba(225, 225, 225, 0.5); position: fixed; top: 0; left: 0; z-index: 99999; } .modal-dialog { position: fixed; color: #000000; top: 150px; width: 400px; border-radius: 3px; min-height: 155px; overflow: hidden; z-index: 99998; margin-left: -200px; left: 50%; } .modal-dialog .css-icon { background-image: url("../images/modal-icons.png"); } .modal-dialog .modal-head { height: 30px; line-height: 30px; padding: 0px 20px; background: #F6EFEF; font-size: 14px; } .modal-dialog .modal-head .modal-logo { width: 15px; height: 15px; background-position: 1px 0px; margin: 8px 5px 0 0; float: left; } .modal-dialog .modal-head .close { float: right; width: 15px; height: 15px; background-position: -14px 0px; margin-top: 8px; } .modal-dialog .modal-body { width: 100%; min-height: 125px; background: #ffffff; } .modal-dialog .modal-body .modal-body-left { width: 140px; float: left; } .modal-dialog .modal-body .modal-body-left .icon { width: 64px; height: 64px; margin: 30px 0 0 48px; } .modal-dialog .modal-body .modal-body-left .success-message { background-position: 0px -14px; } .modal-dialog .modal-body .modal-body-left .warming-message { background-position: 0px -78px; } .modal-dialog .modal-body .modal-body-right { width: 260px; float: right; padding-top: 20px; } .modal-dialog .modal-body .modal-body-right .close-btn { color: #000; text-align: center; width: 90px; display: inline-block; height: 24px; line-height: 24px; background: #818079; } .modal-dialog .modal-body .modal-body-right p { line-height: 30px; } /*COMMON_BLK_START*/ /*AVAIBLE_VI [ {"vicolor":"#133b81","sub1color":"#000000"}, {"vicolor":"#00B32D","sub1color":"#59B370"}, {"vicolor":"#FC3BFF","sub1color":"#FF9875"}, {"vicolor":"#914E00","sub1color":"#B8824D"} ] AVAIBLE_VI*/ .ovh { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body { min-width: 1200px; max-width: 1920px; margin: 0 auto; overflow: hidden; width: 100%; } .content { width: 1400px; margin: 0 auto; } i, em, b { font-style: normal; } /*COMMON_BLK_END*/ /**/ .guide { background-image: url('../images/yinz_bg.jpg'); background-repeat: no-repeat; background-position: center 0; background-size: 1920px 916px; height: 790px; padding-top: 126px; } .gui_tit { font-size: 46px; color: #133b81; height: 60px; line-height: 60px; display: flex; align-items: center; justify-content: flex-end; } .gui_tit img { width: 182px; height: 48px; line-height: 0; padding-right: 10px; } .gui_desc p { width: 1000px; text-align: right; font-size: 16px; font-weight: normal; line-height: 28px; color: rgba(0, 0, 0, 0.8); padding-top: 16px; float: right; } .gui_bot { width: 140px; float: right; } .gui_bot span { display: block; background-image: url('../images/yinz_code.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 140px 140px; width: 140px; height: 140px; margin-top: 80px; overflow: hidden; position: relative; } .gui_bot span a { display: block; width: 140px; height: 0; text-align: center; line-height: 190px; font-size: 18px; color: #6d6d6d; } .gui_bot span em { width: 130px; height: 0; display: block; position: absolute; top: 5px; left: 5px; line-height: 0; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden; } .gui_bot span em img { width: 130px; height: 130px; } .gui_bot span:hover em { height: 130px; } .gui_bot p { width: 140px; height: 140px; background: #133b81; border-radius: 20px; font-size: 20px; color: #f6d3b7; text-align: center; line-height: 30px; padding-top: 25px; margin-top: 80px; border: #f6d3b7 3px solid; box-sizing: border-box; } .gui_bot p a { color: #f6d3b7; } .gui_bot p em { width: 2.1rem; height: 2.1rem; display: block; line-height: 0; margin: 0 auto 10px; } .gui_bot p em img { width: 2.1rem; height: 2.1rem; } /**/ .product { background-image: url('../images/pro_bg.jpg'); background-repeat: no-repeat; background-position: center 0; background-size: 100% 47.9rem; padding: 4.5rem 0 0; height: 43.4rem; overflow: hidden; } .pro_tit { width: 21%; font-size: 2.9rem; color: #fff; background-image: url('../images/pro_line.png'); background-repeat: no-repeat; background-position: 0 16rem; background-size: 15.4rem 0.35rem; line-height: 2.9rem; padding: 1.3rem 0 0; margin-left: 6.25%; } .pro_tit a { font-size: 2.9rem; color: #fff; display: block; } .pro_tit em { display: block; line-height: 0; margin-bottom: 2.5rem; } .pro_tit em img { width: 16.3rem; height: 6.4rem; } .pro_tit p { font-size: 1.6rem; color: #fff; line-height: 2rem; padding-top: 5rem; font-weight: normal; } .pro_tit i { display: block; } .pro_tit span { display: block; width: 32.5%; text-align: center; height: 2rem; line-height: 2rem; font-size: 0.8rem; font-weight: bold; margin-top: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 1rem; } .pro_r { width: 65%; } .pro_r dl { width: 44.47%; float: left; position: relative; height: 19.6rem; overflow: hidden; margin-bottom: 1.25rem; margin-right: 1.4%; background-image: url('../images/pro_k.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 19.6rem; } .pro_r dl:before{content: ''; cursor: pointer; position: absolute; left: -120%; 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); } .pro_r dl:hover:before{left:100%; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s; transition:1s;} .pro_r dl dt { width: 90.45%; line-height: 0; position: absolute; bottom: 0.9rem; left: 4.7%; overflow: hidden; border-radius: 0 0 3rem 3rem; } .pro_r dl dt img { display: block; width: 100%; border-radius: 0 0 3rem 3rem; -webkit-transition: all 0.5s; transition: all 0.5s; } .pro_r dl dd { width: 80%; height: 18.3rem; margin: 2.2rem auto 0; } .pro_r dl dd h5 { height: 2rem; line-height: 2rem; } .pro_r dl dd h5 a { font-size: 1.3rem; color: #333; } .pro_r dl dd h5 a:hover,.pro_r dl ul li a:hover{color: #133b81;} .pro_r dl ul { width: 80%; position: absolute; top: 10rem; left: 10%; -webkit-transition: all 0.5s; transition: all 0.5s; } .pro_r dl ul li { width: 33.33%; float: left; height: 1.6rem; line-height: 1.6rem; position: relative; } .pro_r dl ul li:before { content: ""; width: 0.5rem; height: 0.5rem; background: #002c69; position: absolute; left: 0; top: calc(50% - 0.25rem); border-radius: 50%; } .pro_r dl ul li a { font-size: 0.8rem; color: #000; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1rem; box-sizing: border-box; } .pro_r dl.cur ul { top: 4.5rem; z-index: 5; } .pro_r dl.cur dt img { margin-bottom: -1.2rem; } /*浼樺娍*/ .super { height: 48rem; overflow: hidden; margin-top: 6.1rem; } .sup_tit { font-size: 2.3rem; color: #fff; line-height: 3.3rem; position: absolute; top: 5.4rem; left: calc(50% - 36.5%); z-index: 2; height: 11.2rem; background-image: url('../images/pro_line.png'); background-repeat: no-repeat; background-position: 0 bottom; background-size: 15.4rem 0.35rem; } .sup_tit i { font-size: 4.5rem; color: #f5d0b3; } .sup_tit span { display: block; } .sup_nav { width: 73%; height: 11.2rem; z-index: 1; position: absolute; left: calc(50% - 36.5%); bottom: 0; overflow: hidden; } .sup_nav ul li { float: left; width: 25%; height: 9rem; padding-top: 2.2rem; line-height: 2rem; font-size: 1.3rem; color: #f5d0b3; font-weight: bold; overflow: hidden; position: relative; z-index: 1; cursor: pointer; text-align: center; } .sup_nav ul li:before { content: ""; width: 1px; height: 100%; position: absolute; top: 2.2rem; left: 0; background: linear-gradient(to bottom, #f5d0b3 0%, #092c6a 100%); } .sup_nav ul li:after { content: ""; width: 100%; height: 0; background: url(../images/ys_k.png) repeat-x; background-size: 0.5rem 11.2rem; position: absolute; top: 0; left: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .sup_nav ul li:first-child:before { background: none; } .sup_nav ul li em { display: block; width: 2.5rem; height: 2.3rem; line-height: 0; overflow: hidden; margin: 0 auto 0.5rem; } .sup_nav ul li em img { width: 2.5rem; height: 4.6rem; -webkit-transition: all 0.5s; transition: all 0.5s; } .sup_nav ul li i { display: block; font-size: 0.8rem; font-weight: normal; color: rgba(248, 214, 187, 0.5); text-transform: uppercase; padding-top: 0.3rem; } .sup_nav ul li.on { color: #fff; } .sup_nav ul li.on:after { height: 11.2rem; } .sup_nav ul li.on i { color: rgba(255, 255, 255, 0.5); } .sup_nav ul li.on em img { margin-top: -2.3rem; } .sup_m dl { position: relative; } .sup_m dl dt { width: 100%; line-height: 0; height: 48rem; } .sup_m dl dt img { display: block; width: 100%; height: 100%; } .sup_m dl dd { position: absolute; top: 19rem; left: calc(50% - 36.5%); z-index: 3; width: 73%; } .sup_m dl dd p { font-size: 0.9rem; color: #ffffff; line-height: 1.6rem; width: 45.7%; padding-bottom: 1rem; } /**/ .honor { background-image: url('../images/honor_bg.jpg'); background-repeat: no-repeat; background-position: center 0; background-size: 100% 47.9rem; padding: 8.7rem 0 0; height: 39.2rem; overflow: hidden; } .content01 { width: 70rem; margin: 0 auto; } .honor_l { width: 30.8rem; height: 30.8rem; border-radius: 50%; margin-top: 0.7rem; margin-left: -2.2rem; position: relative; } .honor_l img { display: block; width: 30.8rem; height: 30.8rem; border-radius: 50%; } .honor_l em { background-image: url('../images/honor_video.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 7.2rem 7.2rem; display: block; width: 7.2rem; height: 7.2rem; position: absolute; top: calc(50% - 3.6rem); left: calc(50% - 3.6rem); } .honor_r { width: 55%; } .honor_r h5 { font-size: 2.5rem; color: #133b81; width: 100%; height: 6.7rem; overflow: hidden; border-bottom: #939393 1px solid; background-image: url('../images/honor_tbg.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 31.5rem 3.3rem; line-height: 5.5rem; } .honor_r i { font-size: 1.3rem; font-weight: normal; padding-left: 0.5rem; } .honor_r p { font-size: 0.8rem; color: #282828; padding-top: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.6rem; height: 4.8rem; } .honor_r .honor_qie { margin-top: 3.3rem; } .honor_r ul li { width: 9.1rem; float: left; line-height: 0; margin-left: 0.5rem; -webkit-transition: transform 0.3s; transition: transform 0.3s; padding-top: 5px; } .honor_r ul li img { display: block; width: 100%; } .honor_r ul li:hover { -webkit-transform: translate(0, -3px); transform: translate(0, -3px); } @media screen and (max-width: 1800px) { .honor_l { margin-left: -3.8rem; } } @media screen and (max-width: 1700px) { .honor_l { margin-left: -2.1rem; } } @media screen and (max-width: 1500px) { .honor_l { margin-left: -2rem; } } @media screen and (max-width: 1400px) { .honor_l { margin-left: -2.4rem; } } /*妗堜緥*/ .case { background-image: url('../images/case_bg.jpg'); background-repeat: no-repeat; background-position: center 0; background-size: 1920px 840px; padding: 60px 0 0; height: 780px; } .case_tit { text-align: center; line-height: 50px; height: 150px; } .case_tit a { font-size: 50px; color: #fff; } .case_tit span { display: block; font-size: 24px; color: rgba(255, 255, 255, 0.8); font-weight: normal; line-height: 30px; padding-top: 15px; } .poster-main { position: relative; margin: 0 auto; } .case_m dl dd { width: 94%; height: 100px; background: rgba(19, 59, 129, 0.85); overflow: hidden; position: absolute; bottom: 0; left: 0; padding: 30px 3% 0; } .case_m dl dd a { display: block; color: #fff; } .case_m dl dd h5, .case_m dl dd p { height: 30px; line-height: 30px; width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case_m dl dd h5 { font-size: 18px; font-weight: normal; } .case_m dl dd p { font-size: 14px; color: rgba(255, 255, 255, 0.7); padding-top: 5px; } .case_m dl dd span { display: block; width: 90px; height: 30px; text-align: center; line-height: 30px; background: #fff; font-size: 12px; color: #015cb9; position: absolute; top: 50px; right: 5%; border-radius: 20px; } .poster-item { margin: 0 auto; line-height: 0; border: #133b81 8px solid; box-sizing: border-box; border-radius: 20px; } .poster-main .poster-list .poster-item { position: absolute; overflow: hidden; border-radius: 20px; } .poster-main .poster-list .poster-item img { border-radius: 20px; width: 100%; height: 100%; object-fit: cover; object-position: center; } .poster-main .poster-next-btn { right: 0px; } .poster-main .poster-prev-btn { left: 0px; } .poster-main .poster-btn { position: absolute; top: 0; cursor: pointer; } .poster-main .poster-list .poster-item img, .news_c img { -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } .poster-main .poster-list .poster-item img:hover, .news_c img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*鍚堜綔瀹㈡埛*/ .hz { background-image: url('../images/hz_bg.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: 1920px 90px; padding: 80px 0 110px; position: relative; } .hz ul li { width: 13.42%; float: left; line-height: 0; border: #aeadab 1px solid; margin-right: 1%; margin-bottom: 0.7rem; box-sizing: border-box; } .hz ul li img { display: block; width: 100%; } .hz ul li:nth-child(7n) { margin-right: 0; } /**/ .news { padding: 116px 0 0; background-image: url('../images/news_bg.jpg'); background-repeat: no-repeat; background-position: center 0; background-size: 1920px 916px; height: 800px; overflow: hidden; } .news_tit { height: 400px; background-image: url('../images/news_line.png'); background-repeat: no-repeat; background-position: 0 140px; background-size: 165px 7px; } .news_tit a { display: block; font-size: 44px; font-weight: bold; line-height: 54px; color: #000; } .news_tit i { display: block; } .news_tit span { display: block; font-size: 20px; font-weight: normal; line-height: 36px; color: rgba(0, 0, 0, 0.6); padding-top: 70px; } .news_l { width: 20%; } .news_nav { width: 67%; } .news_nav ul li { width: 100%; height: 50px; } .news_nav ul li a { font-size: 20px; font-weight: bold; line-height: 50px; color: #000; display: block; } .news_nav ul li a:hover { color: #133b81; } .news_nav span { display: block; width: 40px; height: 40px; line-height: 0; margin: 50px 0 0; } .news_nav span img { width: 40px; height: 40px; } .news_c { width: 36.43%; } .news_c .news_pic { width: 100%; line-height: 0; overflow: hidden; border: #4a80e0 4px solid; border-radius: 10px; box-sizing: border-box; } .news_c .news_pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .news_c .news02_dl { display: block; width: 100%; border-bottom: #d1d1d1 1px solid; padding: 26px 0; } .news_c .news02_dl dl { width: 100%; } .news_c .news02_dl dl dt { float: left; width: 20%; font-size: 26px; color: #666; font-family: Arial, Helvetica, sans-serif; line-height: 26px; padding-top: 8px; } .news_c .news02_dl dl dt i { display: block; font-size: 16px; } .news_c .news02_dl dl dd { width: 79%; float: left; } .news_c .news02_dl dl dd h5 { height: 30px; line-height: 30px; font-weight: normal; font-size: 16px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .news_c .news02_dl dl dd h5:hover { font-weight: bold; } .news_c .news_desc { font-size: 14px; color: #808080; height: 30px; line-height: 30px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news_r { width: 36.43%; } .news_r ul { width: 100%; } .news_r ul li { width: 98%; height: 123px; margin: 0 auto 12px; } .news_r ul li a { display: block; width: 100%; height: 100%; background: #fff; padding: 30px 40px 40px; box-sizing: border-box; box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; } .news_r ul li a:hover { background: url(../images/news_k.png) repeat-y; background-size: 100% 10px; box-shadow: none; } .news_r ul li i { display: block; font-size: 16px; font-weight: normal; line-height: 24px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news_r ul li span { display: block; font-size: 14px; font-weight: normal; line-height: 30px; color: #bbb; } /*鍙嬫儏閾炬帴*/ .f_link { line-height: 30px; height: 115px; padding-top: 85px; overflow: hidden; margin: -200px 0 0 700px; width: 700px; font-size: 14px; } .f_link b { display: block; float: left; color: rgba(255, 255, 255, 0.4); width: 80px; text-align: right; font-weight: normal; } .f_link p { color: rgba(255, 255, 255, 0.4); float: left; width: 620px; } .f_link p a { color: rgba(255, 255, 255, 0.4); padding: 0 10px 0 0; } .f_link p a:hover { color: rgba(255, 255, 255, 0.8); } /**/ @media screen and (max-width: 1500px) { .content { width: 1200px; } .gui_bot { width: 150px; } .gui_desc p { font-size: 14px; width: 900px; } .news { height: 750px; } .news_r ul li { height: 115px; } .f_link { width: 600px; margin-left: 600px; font-size: 12px; } .f_link p { width: 520px; } } /**/ @media screen and (min-width: 1263px) { html { font-size: calc(1263px * 20 / 1903); } } @media screen and (min-width: 1349px) { html { font-size: calc(1349px * 20 / 1903); } } @media screen and (min-width: 1463px) { html { font-size: calc(1463px * 20 / 1903); } } @media screen and (min-width: 1543px) { html { font-size: calc(1543px * 20 / 1903); } } @media screen and (min-width: 1583px) { html { font-size: calc(1583px * 20 / 1903); } } @media screen and (min-width: 1643px) { html { font-size: calc(1643px * 20 / 1903); } } @media screen and (min-width: 1663px) { html { font-size: calc(1663px * 20 / 1903); } } @media screen and (min-width: 1903px) { html { font-size: calc(1903px * 20 / 1903); } } /**/ @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); } 20%, 60% { -webkit-transform: translate3d(-10px, 0, 0); } 40%, 80% { -webkit-transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { transform: translate3d(0, 0, 0); } 20%, 60% { transform: translate3d(-10px, 0, 0); } 40%, 80% { transform: translate3d(10px, 0, 0); } } /*鍥炬爣鎶栧姩*/ @-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); } }