@charset "utf-8"; /* CSS Document */ body{margin:0;font-family:"瀹嬩綋";background:#fff;min-width: 1380px;} form,ul,ol,li,input{padding:0;} img{border:0px;} ul,ol,li,{list-style:none;margin:0;} div,p,h1,h2,h3,h4,b,form,input,ul,ol,li,a,dd,dt,dl,i,em{color:#333; list-style:none; text-decoration:none;font:12px "寰蒋闆呴粦",tahoma,Arial,Helvetica,sans-serif; margin:0;} /*a{text-decoration:none;} *//*娓呯┖娴姩鐨勪唬鐮?start*/ .clr:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} .clr {display: inline-block;} html[xmlns] .clr {display: block;} * html .clr {height: 1%;} img{border:0px;} /*娓呯┖娴姩鐨勪唬鐮?end*/ .a_hidden{display:block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} @font-face { font-family: 'iconfont'; /* project id 1012216 */ src: url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.eot'); src: url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.woff2') format('woff2'), url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.woff') format('woff'), url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.ttf') format('truetype'), url('//at.alicdn.com/t/font_1012216_gk6u3ep5g4r.svg#iconfont') format('svg'); } @font-face { font-family: 'mnjcq'; /* project id 1012216 */ src: url('../font/mnjcq.eot'); src: url('../font/mnjcq.eot?#iefix') format('embedded-opentype'), url('../font/mnjcq.ttf') format('truetype'), url('../font/mnjcq.svg#iconfont') format('svg'); } @font-face { font-family: 'bmzy'; /* project id 1012216 */ src: url('../font/bmzy.eot'); src: url('../font/bmzy.eot?#iefix') format('embedded-opentype'), url('../font/bmzy.ttf') format('truetype'), url('../font/bmzy.svg#iconfont') format('svg'); } @font-face{ font-family: 'bole'; src: url('../font/PENUMBRASANSSTD-BOLD.ttf') format('truetype'); } .mnjcq{font-weight: bold ;color:#dc1e32 ;font-size:32px ;text-align: center;position: relative;} .bmzy{font-size:60px ;color: #fff;} .bold{font-family: "bole";font-size:18px ;color: #e93a40;} /*澶撮儴*/ .header{width:1200px;height:66px;margin:0 auto;padding-top: 10px;} .header_logo{float:left;width:172px;height:52px;display: block;background: url(../images/logo.png) no-repeat center;} .header_logo a{display:block;height:100%;text-indent:-9999px} .header_nav{float:left;height:66px; } .header_nav ul{height:100%;padding-left: 15px;opacity:0; position:relative;top:-20px;} .header_nav ul li{float: left;height:100%;position: relative;z-index:10;} .header_nav ul li .btn{height:62px;line-height: 62px;border-bottom: 4px solid #fff; color:#474d52;font-size:20px;display: block; text-align: center;padding:0 28px; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s;} .header_nav ul li.last{} .header_nav ul li .pulldown{padding:5px 0; position: absolute;top: 62px;left: 0;width: 100%;z-index: 20;background: #f5f5f5;-webkit-box-shadow: 0 3px 3px #a8a8a8; box-shadow: 0 3px 3px #a8a8a8;display: none;} .header_nav ul li .pulldown a{color: #474d52;font-size: 16px;line-height: 26px; display: block;text-align: center;} .header_nav ul li .pulldown a:hover{color: #e60012;} .header_nav ul li:hover .btn,.header_nav ul li.activity .btn{border-color: #e60012;} .header_nav ul li:hover .pulldown{} .header_tel{float: right;} .header_tel .clr{} .header_tel .clr .icon{float: left;width: 16px;height: 16px;margin:2px 5px 0 0; display: block;background: url(../images/allicon.png) no-repeat;} .header_tel .clr .tip{float: left;color: #8d9093;font-size: 14px;line-height: 20px;} .header_tel .main{font-size: 20px; color: #e50011;line-height: 30px;font-style: oblique;} .newindexpage_phone{float:right;padding-top:18px;} .newindexpage_phone .icon_newindexpage_phone{float:left;margin-top: 2px;} .newindexpage_phone .phone_text{float:left;color:#474d52;margin-left:5px;font-size: 16px;} /*搴曢儴*/ .footer{width: 100%;min-width: 1200px;background: #000;} .footer_main{width: 1120px;height: 288px; margin:0 auto;padding: 30px 40px 0 40px;} .footer_main_links{width: 190px;float: left;} .footer_main_links .title{font-size: 16px;color: #fff;line-height: 32px;padding-bottom: 10px;font-weight: normal;} .footer_main_links a{height: 26px;line-height: 26px;color: #999999;font-size: 14px;display: block;} .footer_main_links a:hover{color: #fff;text-decoration: underline;} .footer_main_code{float: left;width:316px;} .footer_main_code .title{font-size: 16px;color: #fff;line-height: 32px;padding-bottom: 10px;text-align: center;font-weight: normal;} .footer_main_code .clr{} .footer_main_code .clr .code{/*float: left;*/padding: 7px;text-align: center;} .footer_main_code .clr .code .pic{width: 124px;height: 124px;border:10px solid #fff;} .footer_main_code .clr .code .tip{padding:10px 0; line-height: 20px;display: block;color: #999999;text-align: center;} .footer_main_contact{width: 310px;float: right;} .footer_main_contact .title{font-size: 16px;color: #fff;line-height: 32px;padding-bottom: 10px;font-weight: normal;} .footer_main_contact ul{} .footer_main_contact ul li{height: 40px;margin-bottom: 7px;} .footer_main_contact ul li .icon{width: 38px;display: block;float: left;color: #999999;margin-right: 36px;} .footer_main_contact ul li p{font-size: 14px;line-height: 20px;color: #999999;float: left;} .footer_main_contact ul .li1 .icon{margin-right: 0;width: 74px;font-size: 14px;} .footer_main_contact ul .li2 .icon{height: 32px;background: url(../images/allicon.png) no-repeat -82px 0;margin-top: 4px;} .footer_main_contact ul .li3 .icon{height:28px;background: url(../images/allicon.png) no-repeat -82px -32px;margin-top: 6px;} .footer_main_contact ul .li4 .icon{height:38px;background: url(../images/allicon.png) no-repeat -82px -60px;margin-top: 1px;} .footer_copy{width: 100%;} .footer_copy .clr{width: 1200px;margin:0 auto;} .footer_copy .main{width: 1200px;margin:20px auto;padding:10px 0;} .footer_copy .main .link{float: left; color: #787878; font-size: 16px;line-height: 14px;} .footer_copy .main a{line-height: 36px;font-size: 12px;color: #333;line-height: 14px;margin-right: 10px;} .footer_copy .main a:hover{color: #666;text-decoration: underline;} .footer_copy .clr .main{line-height: 36px;/*float: right;*/ text-align:center;font-size: 12px;color: #999;} .footer .new_indexpage_navlist{background:#000;border-top:1px solid #333333;border-bottom:1px solid #333333;} .footer .new_indexpage_navlist .main .right_con .line{background:#fff;} /*banner---------------*/ .homebanner{ width: 100%;min-width: 1200px;position: relative; height:400px;overflow: hidden;} .homebanner .ck-slide-wrapper{ position: relative; width: 100%; height:100%; } .homebanner .ck-slide-wrapper li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:100%;} .homebanner .ck-slide-wrapper li a{} .homebanner .ck-slide-wrapper li img{ height:100%; display:block;position: absolute;top:0;left:50%;margin-left: -960px;} .ck-slide {} .ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index:5; margin: 0; padding: 0;} .ck-slide-wrapper li { position: absolute;display:none;z-index:6;} .ck-slide-wrapper li:first-child{display: block;} .ck-prev,.ck-next { position: absolute; top: 50%; z-index:7; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: 0; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;} .ck-prev { left: 5px; background: url(../images/arrow-left.png) #000 50% no-repeat;} .ck-next { right: 5px; background: url(../images/arrow-right.png) #000 50% no-repeat;} .ck-slidebox { position: absolute; left: 50%; bottom: 12px; z-index:6;} .ck-slidebox ul { height: 20px; padding: 0 4px; border-radius: 8px; background: rgba(0,0,0,0.5);} .ck-slidebox ul li { float: left; height: 12px; margin: 4px 4px;} .ck-slidebox ul li em { display: block; width: 12px; height: 12px; border-radius: 100%; background-color: #fff; text-indent: -9999px; cursor: pointer;} .ck-slidebox ul li.current em { background-color: #d92754;} .ck-slidebox ul li em:hover { background-color: #d92754;} .new_indexpage_banner .page_banners { width: 100%; position: relative; } .new_indexpage_banner .page_banners .slideBox { width: 100%; overflow: hidden; position: relative; } .new_indexpage_banner .page_banners .slideBox .prev, .new_indexpage_banner .page_banners .slideBox .next { z-index: 100; position: absolute; left: 0; top: 50%; margin-top: -25px; display: block; width: 32px; height: 40px; background: url("../images/newindex/slider-arrow.png") -110px 5px no-repeat; filter: alpha(opacity=50); opacity: 0.5; } .new_indexpage_banner .page_banners .slideBox .next { left: auto; right: 0; background-position: 8px 5px; } .new_indexpage_banner .page_banners .slideBox .prev:hover, .new_indexpage_banner .page_banners .slideBox .next:hover { filter: alpha(opacity=100); opacity: 1; z-index: 100; } .new_indexpage_banner .page_banners .slideBox .hd { height: 16px; overflow: hidden; position: absolute; left: 50%; bottom: 25px; z-index: 1; margin-left: -43.5px; } .new_indexpage_banner .page_banners .slideBox .hd ul { overflow: hidden; zoom: 1; float: left; margin: 0 auto; } .new_indexpage_banner .page_banners .slideBox .hd ul li { float: left; margin-right: 7px; width: 10px; height: 10px; border: 2px solid #fff; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; text-indent: 500px; background:#fff; opacity:.8; } .new_indexpage_banner .page_banners .slideBox .hd ul li.on { border-color:#dc1e32; background: #dc1e32; } .new_indexpage_banner .page_banners .slideBox .bd { position: relative; height: 100%; z-index: 0; } .new_indexpage_banner .page_banners .slideBox .bd li { zoom: 1; vertical-align: middle; } .new_indexpage_banner .page_banners .slideBox .bd li a { display: block; width: 100%; overflow: hidden; } .new_indexpage_banner .page_banners .slideBox .bd li a img { display: block; width: 100%; } .new_indexpage_navlist { height: 100px; background: #dc1e32; } .new_indexpage_navlist .main { width: 1280px; margin: 0 auto; } .new_indexpage_navlist .main .left_link { float: left; height: 100px; margin-left: 100px; } .new_indexpage_navlist .main .left_link .pic { display: block; padding-top: 37px; } .new_indexpage_navlist .main .right_con { float: right; } .new_indexpage_navlist .main .right_con .link { float: left; height: 100px; } .new_indexpage_navlist .main .right_con .link .pic { display: block; margin: 0 auto; padding-top: 36px; padding: 36px 45px 0; -webkit-transition: all .2s linear; transition: all .2s linear; } .new_indexpage_navlist .main .right_con .link:hover .pic { -webkit-transform: translate3d(0, -2px, 0); transform: translate3d(0, -2px, 0); } .new_indexpage_navlist .main .right_con .line { float: left; margin-top: 43px; width: 1px; height: 16px; background: #ff7180; } /*浠ヤ簰鑱旂綉涓哄熀纭€鐨勪骇涓氭湇鍔″叕鍙?/ .qiyejianjie{width:1200px ;height:687px ;margin:0 auto;box-sizing: border-box;padding-top: 70px;} .qiyejianjie h2{ margin:0 auto 38px;} .qiyejianjie p{text-align: center;} .qiyejianjie p span{font-size:16px ;line-height:28px ;color: #393939;} .qiyejianjie .num-list{width: 100%;margin-top:69px ;} .qiyejianjie .num-list .box{width:25% ;height:278px ;float: left;text-align: center;position: relative;} .qiyejianjie .num-list .box:last-child{margin-right: 0;} .qiyejianjie .num-list .box .pic{width:230px;height: 215px;position: relative;cursor: pointer;margin:0 auto ;background-size:100% auto; background-size: auto 100%; background-repeat: no-repeat;background-position: center;box-sizing: border-box;padding-top:70px ;} .qiyejianjie .num-list .box .text{font-size:28px ;color: #fff;} .qiyejianjie .num-list .box .num{display: inline-block;margin:0 auto ;position:relative;} .qiyejianjie .num-list .box .num:after{content:"+";position: absolute;right:-15px ;top:-46px ;font-size:45px ;} .qiyejianjie .num-list .box .pic img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} .qiyejianjie .num-list .box .tit{font-size: 18px;margin-top: 25px;} .qiyejianjie .num-list .box:nth-child(1) .pic{background-image: url(../images/newindex/index-num-list4.png)} .qiyejianjie .num-list .box:nth-child(2) .pic{background-image: url(../images/newindex/index-num-list6.png)} .qiyejianjie .num-list .box:nth-child(3) .pic{background-image: url(../images/newindex/index-num-list2.png)} .qiyejianjie .num-list .box:nth-child(4) .pic{background-image: url(../images/newindex/index-num-list3.png)} /*鍦嗙悆榧犳爣缁忚繃鏁堟灉*/ .hvr-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /*涓氬姟浣撶郴*/ .businessSystem{ width:100% ;height:750px ; ;box-sizing: border-box;padding-top:70px ;position: relative; } #myCanvas { background-color: black;width: 100%;height: 100%;position:absolute ;top: 0;left: 0; } .businessSystem .mnjcq{color: #fff;margin-bottom: 10px;} .businessSystem .title-list{width: 1200px;height:145px ;margin:30px auto 0;position: relative;} .businessSystem .title-list .lbox:hover{background-color: #c61b2d;} .businessSystem .title-list .bact{background-color: #c61b2d;} .businessSystem .title-list .lbox{font-family:"iconfont" ;width:25%;float: left;cursor: pointer;text-align: center;padding:18px 0;transition: all .3s;} .businessSystem .title-list .lbox span:nth-child(1){display: inline-block;margin-bottom:14px;font-size: 60px;color: #fff;} .businessSystem .title-list .lbox span:last-child{font-size: 18px;color: #fff;} .businessSystem .content-wrap{width: 1200px;height:220px ;margin: 0 auto;display: none;} .businessSystem .content-wrap .tit-box h3{font-size: 28px;font-weight: 600;color: #fff;margin-bottom:18px ;margin-top: 40px;} .businessSystem .content-wrap .tit-box{position: relative;} .businessSystem .content-wrap .tit-box span{font-size:14px ;color:#fff ;} .businessSystem .content-wrap .content-list{height: 140px;float: left;margin-top: 50px;position: relative;} .businessSystem .content-wrap .content-list .box{width:230px ;height:105px ;float: left;box-sizing: border-box;padding-right:44px ;} .businessSystem .content-wrap .content-list .box h4{font-size:20px ;font-weight:600 ;color: #fff;margin-bottom: 15px;} .businessSystem .content-wrap .content-list .box p{font-size:14px ;color: #fff;} .businessSystem .content-wrap .content-list .xiangqing{width:160px ;height:42px ;line-height:42px;color: #fff;display: block; position: absolute;bottom: -50px;left: 0;border-radius:3px ;text-align: center;background-color: #dc1e32;} /*妗堜緥灞曠ず*/ .case-shows-wrap{width:1200px ;height:665px ;margin: 68px auto;overflow: hidden;position: relative;} .case-shows-wrap .img-title{margin:0 auto;display: block;} .case-shows-wrap .case-title{font-size: 16px;color:#393939 ;line-height: 48px;text-align: center;} .case-shows-wrap .case-title-list{width: 1200px;height:34px ;margin: 0 auto;text-align: center;} .case-shows-wrap .case-title-list li{width:115px ;display: inline-block;line-height:35px ;text-align: center;font-size:18px ;color: #000;transition: all .3s; border: 1px solid #000;border-radius:20px ;margin:0 18px;cursor: pointer;} .case-shows-wrap .case-title-list li:hover{color: #fff;background-color: #dc1e32;border-color: #dc1e32;} .case-shows-wrap .case-title-list .liatc{color: #fff;background-color: #dc1e32;border-color: #dc1e32;} .case-shows-wrap .case-list-wrap{height:515px;margin:35px 0;transition:all .7s;position:absolute ;left: 0;} .case-shows-wrap .case-list-wrap ul{display: none;} /*姹熸箹閫?/ .case-shows-wrap .case-list-wrap .case-list-jht{width:1200px;height: 100%;} .case-shows-wrap .case-list-wrap .case-list-jht li{width:390px ;height:250px ;float: left;overflow: hidden;position: relative;margin-right:14px ;margin-bottom:13px ;cursor: pointer;} .case-shows-wrap .case-list-wrap .case-list-jht li:nth-child(3n){margin-right:0 ;} .case-shows-wrap .case-list-wrap .case-list-jht li:hover .content{top:-100% ;} .case-list-wrap .case-list-jht li img{width:80%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} .case-list-wrap .case-list-jht li .content{width:100%;height:100%;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.7);z-index: 2;transition: all .3s;box-sizing: border-box;padding:75px 17px 0;} .case-list-wrap .case-list-jht li .content h2{font-size:24px ;color: #fff;text-align: center;} .case-list-wrap .case-list-jht li .content p{font-size:16px ;color: #fff;} /*寰睙婀?/ .case-shows-wrap .case-list-wrap .case-list-wjh{width:1220px ;height: 880px;margin: 0 auto;} .case-shows-wrap .case-list-wrap .case-list-wjh li{width:220px ;height:440px ;float: left;background: url("../images/newindex/case1.jpg") no-repeat;overflow: hidden;padding: 40px 0 0 10px;margin-right: 100px;position: relative;} .case-shows-wrap .case-list-wrap .case-list-wjh li:nth-child(4n){margin-right: 0;} .case-shows-wrap .case-list-wrap .case-list-wjh li .pic{width: 142px;height: 252px;} .case-shows-wrap .case-list-wrap .case-list-wjh li .erweima{width: 142px; position: absolute;top:95px;transition: all .3s;left:-100% ;} .case-shows-wrap .case-list-wrap .case-list-wjh li:hover .erweima{left: 10px;} .case-shows-wrap .case-list-wrap .case-list-wjh li .content{width: 100%;margin-left: -8px;margin-top: 50px;} .case-shows-wrap .case-list-wrap .case-list-wjh li .content h2{font-size:18px ;font-weight: 600;line-height: 42px;} .case-shows-wrap .case-list-wrap .case-list-wjh li .content p{font-size: 16px;line-height: 26px;} /*seo*/ .case-shows-wrap .case-list-wrap .case-list-seo{width: 1200px;height:185px ;margin: 0 auto;} .case-shows-wrap .case-list-wrap .case-list-seo li{width:385px ;height:155px ;float: left;margin-right:16px ;margin-bottom: 16px;box-sizing: border-box;padding-top: 39px;border: 1px solid #ccc;} .case-shows-wrap .case-list-wrap .case-list-seo li:nth-child(3n){margin-right:0 ;} .case-shows-wrap .case-list-wrap .case-list-seo li .link:hover h3{color:#f06d77 ;text-decoration: underline ;} .case-shows-wrap .case-list-wrap .case-list-seo li h3{font-size:26px ;text-align: center;margin-bottom: 30px;} .case-shows-wrap .case-list-wrap .case-list-seo li p{text-align: center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .case-shows-wrap .case-list-wrap .case-list-seo li p a{font-size: 14px;color:#f06d77 ;} .case-shows-wrap .case-list-wrap .case-list-seo li p a:hover{text-decoration: underline ;} /*绗竴鏋柊闂?/ .news-list-wrap{width: 1200px;margin: 0 auto;} .news-list-wrap .img-title{display: block;margin: 0 auto;margin-bottom: 12px;} .news-list-wrap .newx-title{font-size:16px ;text-align: center;color: #393939;} .news-list-wrap .news-content-list{width: 100%;height:400px;margin:30px 0 ;} .news-list-wrap .news-content-list .left-content{width:620px ;height:400px ;float: left;display: none;position: relative;} .news-list-wrap .news-content-list .left-content img{width:100% ;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} .news-list-wrap .news-content-list .left-content p{width: 100%;position: absolute;bottom: 0;background-color: rgba(0,0,0,0.5);box-sizing: border-box;padding:17px 20px 0 ;height: 65px;color: #fff;} .news-list-wrap .news-content-list .right-news-list{width:535px ;height:400;float:right ;background-color: #f5f5f5;} .news-list-wrap .news-content-list .right-news-list .link{width:100% ;height: 71px;box-sizing: border-box;padding:15px 30px 0 17px ;transition: all .3s;position: relative;} .news-list-wrap .news-content-list .right-news-list .link:before{content: "";border-width:10px;border-style: solid;border-color:transparent transparent transparent transparent;position: absolute;top: 0;top: 50%;margin-top:-10px;left:0 ;transition: all .3s;} .news-list-wrap .news-content-list .right-news-list .link2 a{height:45px ;line-height:45px ;text-align: center;} .news-list-wrap .news-content-list .right-news-list .link2:hover a{color:#dc1e32 ;} .news-list-wrap .news-content-list .right-news-list .actiy{background-color:#dc1e32 ;} .news-list-wrap .news-content-list .right-news-list .actiy p{color: #fff;} .news-list-wrap .news-content-list .right-news-list .actiy:before{border-color:transparent transparent transparent #f5f5f5;} .news-list-wrap .news-content-list .right-news-list div a{display: block;width: 100%;height: 100%;} .news-list-wrap .news-content-list .right-news-list div p:nth-child(1){font-size:16px ;width: 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom: 10px;} .news-list-wrap .news-content-list .right-news-list div p:nth-child(2){font-size: 12px;} .zimeiti{width:100%;margin:0 0 30px 0; height:26px; text-align:center; border:1px solid #dbdbdb; padding:15px 0} .zimeiti li{float:left; margin:0 10px} .zimeiti li img{height:26px;} .zimeiti li:nth-child(1){margin:0 10px 0 20px} .zimeiti li:nth-child(11){margin:0 0 0 10px} /*鍚堜綔浼欎即*/ .partners-wrap{width:1200px ; margin:50px auto 0;} .partners-wrap .img-title{display: block;margin: 0 auto;margin-bottom: 12px;} .partners-wrap .newx-title{font-size:16px ;text-align: center;color: #393939;} .partners-wrap .partners{display: block;width: 1200px;margin: 0 auto;} /*浜嗚В璇︽儏榧犳爣缁忚繃鏁堟灉*/ @-webkit-keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { -webkit-animation-name: hvr-wobble-skew; animation-name: hvr-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }