﻿@charset "utf-8";
/*初始样式*/
body{ color:#333; font-size:14px;font-family: "Microsoft Yahei";} /*网站字体颜色*/
body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input{margin:0;padding:0;list-style:none;}
a { color:#333; text-decoration:none;font-family: "Microsoft Yahei";}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
/*a:hover { text-decoration:underline;}*/
img{border:none;}
.vam { vertical-align:middle;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
p{ word-spacing:-1.5px;font-family: "Microsoft Yahei"; }
h1,h2,h3,h4,h5,h6{ font-family:"Microsoft Yahei";}

.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
i,em{ font-style:normal;}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden;}
.clearfix{zoom:1;}
/* -- 页面整体布局 -- */
.content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";}

.pic{overflow: hidden;font-size: 0;}
.pic img{-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;-o-transition:-o-transform 0.5s;transition:transform 0.5s;}
.pic img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);}



.tit{font-weight: normal;font-size: 0;text-align: center;}
.tit b{display: block;font-size: 60px;color: #333;line-height: 60px;}
.tit span{display: block;font-size: 24px;color: #333;line-height: 24px;padding-top: 18px;}


/*banner*/
.banner{position: relative;}
.banner li{width: 100%;}
.banner li img{display: block;width: 100%;}
.ban_pg{position: absolute;bottom: 20px;height: 6px;z-index: 10;width: 100%;text-align: center;}
.ban_pg i{display: inline-block;width: 12px;height: 6px;background: #fff;border-radius: 6px;margin: 0 5px;vertical-align: top;box-sizing: border-box;}
.ban_pg i.on{width: 34px;background: #AC1315;}
.banner .prev{position: absolute;font-size: 0;left: 40px;top: 50%;transform: translateY(-50%);z-index: 10;padding: 6px;background: rgba(0,0,0,0.4);border-radius: 50%;cursor: pointer;transition: all 0.3s;}
.banner .next{position: absolute;font-size: 0;right: 40px;top: 50%;transform: translateY(-50%);z-index: 10;padding: 6px;background: rgba(0,0,0,0.4);border-radius: 50%;cursor: pointer;transition: all 0.3s;}
.banner .prev:hover,.banner .next:hover{background: #AC1315;}


/* sou */
.sou{position: relative;height: 44px;}
.sou-con{position: absolute;width: 336px;height: 190px;background: url(../images/sou-bg.png) no-repeat;right: 0;bottom: 0;z-index: 20;padding: 0 23px;box-sizing: border-box;}
.sou-con h3{font-size: 24px;color: #EFEFEF;line-height: 29px;padding: 32px 0 18px;}
.sou-box{display: flex;height: 44px;background: #fff;border-radius: 22px;overflow: hidden;padding-right: 8px;}
.sou-box input{width: 0;flex: 1;height: 44px;line-height: 44px;font-size: 14px;color: #333;outline: 0;border: 0;padding-left: 20px;}
.sou-box input::placeholder{color: #9C9C9C;}
.sou-box button{width: 30px;height: 44px;background: url(../images/sou-ic.png) no-repeat center;border: 0;outline: 0;cursor: pointer;}



/* yinzi */
.yinzi{padding: 110px 0 150px;background: url(../images/yz-bg.jpg) no-repeat center 330px;overflow: hidden;}
.yz-con{display: flex;justify-content: space-between;}
.yz-left{margin-top: 0;}
.yz-left h2{font-size: 30px;color: #AC1315;line-height: 30px;margin-bottom: 130px;}
.yz-left h2 i{display: block;font-size: 18px;line-height: 18px;padding-bottom: 8px;font-weight: normal;}
.yz-left ul{height: 518px;padding-left: 18px;border-left: 1px solid #E4E4E4;display: flex;flex-direction: column;justify-content: center;}
.yz-left li{width: 232px;height: 126px;padding-left: 7px;display: flex;flex-direction: column;justify-content: center;position: relative;}
.yz-left li::before{position: absolute;width: 16px;height: 16px;content: "";background: #E4E4E4;border-radius: 50%;left: -26px;top: 50%;margin-top: -8px;}
.yz-left li p{font-size: 16px;color: #333;line-height: 16px;}
.yz-left li span{display: block;font-size: 42px;line-height: 38px;padding-top: 10px;font-family: Montserrat, Montserrat;font-weight: bold;}
.yz-left li:hover{background: url(../images/yz-k.png) no-repeat;padding-left: 32px;}
.yz-left li:hover p,.yz-left li:hover span{color: #fff;}
.yz-left li:hover::before{background: #AC1315;}

.yz-right{width: 872px;}
.yz-right h3{height: 48px;display: flex;align-items: flex-end;font-size: 48px;color: #333;line-height: 48px;}
.yz-right h3 img{margin-left: -70px;margin-bottom: -8px;}
.yz-right .yz-desc{font-size: 16px;color: #333;line-height: 30px;margin: 30px 0 34px;}
.yz-right .xq{display: flex;align-items: center;font-size: 14px;color: #333;font-weight: bold;gap: 12px;}
.yz-right .yz-sp{margin-top: 60px;}
.yz-right .yz-sp video{display: block;width: 100%;height: 395px;}



@media screen and (max-width:1700px){
  
}


/* pro */
.pro{padding: 120px 0 0;height: 960px;background: url(../images/pro-bg.jpg) no-repeat center 0;box-sizing: border-box;}
.pro h2{margin-bottom: 67px;}
.pro-ctg{display: flex;gap: 18px;}
.pro-ctg a{flex: 1;height: 66px;line-height: 66px;text-align: center;font-size: 20px;color: #333;background: #fff;border: 1px solid #DBDBDB;border-radius: 10px;box-sizing: border-box;position: relative;}
.pro-ctg a.on{background: #2C9BE3;border-color: #2C9BE3;color: #fff;}
.pro-ctg a.on::after{position: absolute;content: "";border: 10px solid transparent;border-top-color: #2C9BE3;left: 50%;margin-left: -10px;bottom: -18px;}
.pro-bd{margin-top: 90px;}
.pro-bd dl{display: flex;justify-content: space-between;gap: 50px;}
.pro-bd dt{width: 806px;text-align: center;background-size: 100% auto;}
.pro-bd dd{margin-top: 10px;width: 500px;height: 330px;background: #fff;border-radius: 10px;box-shadow: 0 0 18px rgba(110, 110, 110, 0.2);padding: 0 55px;box-sizing: border-box;}
.pro-bd dd h3{font-size: 36px;color: #333;line-height: 36px;padding: 55px 0 40px;border-bottom: 2px solid #AC1315;}
.pro-bd dd h3 em{color: #AC1315;}
.pro-bd dd .pro-desc{font-size: 18px;color: #333;line-height: 24px;margin: 25px 0;}
.pro-bd dd .xq{display: flex;align-items: center;font-size: 14px;color: #333;font-weight: bold;gap: 12px;float: right;}





@media screen and (max-width:1700px){
  .pro-bd dd{width: 460px;padding: 0 35px;}
}



/* morepro */
.morepro{padding: 85px 0;background: #2C9BE3;overflow: hidden;}
.morepro h2{display: flex;justify-content: center;gap: 24px;font-size: 36px;color: #fff;line-height: 36px;align-items: center;margin-bottom: 50px;}
.morepro h2 i{flex: 1;height: 1px;background: #fff;opacity: 0.5;}
.pro-list{position: relative;}
.pro-list li{width: calc((100% - 48px) / 4);margin-right: 16px;background: #fff;border-radius: 10px;overflow: hidden;position: relative;}
.pro-list li img{display: block;width: 100%;}
.pro-list li span{position: absolute;left: 0;top: 0;width: 100%;box-sizing: border-box;font-size: 18px;color: #000;font-weight: bold;padding: 25px 25px 36px;background: url(../images/jia.png) no-repeat 25px bottom;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;transition: all 0.5s;}
.pro-list li p{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(15, 15, 15, 0.5);display: flex;flex-direction: column;justify-content: center;text-align: center;opacity: 0;transform: scale(0);transition: all 0.5s;}
.pro-list li p b{font-size: 17px;color: #fff;line-height: 24px;}
.pro-list li p em{display: block;width: 74px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #fff;font-weight: bold;background: #AC1315;border-radius: 15px;margin: 12px auto 0;}
.pro-list li:hover span{opacity: 0;}
.pro-list li:hover p{transform: scale(1);opacity: 1;} 
.pro-list .prev{position: absolute;left: -70px;top: 50%;transform: translateY(-50%);z-index: 10;opacity: 0.5;}
.pro-list .next{position: absolute;right: -70px;top: 50%;transform: translateY(-50%);z-index: 10;opacity: 0.5;}
.pro-list .prev:hover,.pro-list .next:hover{opacity: 1;}
.pro-list .tempWrap{width: 100% !important;}


.xban{height: 420px;background: url(../images/xban.jpg) no-repeat center 0;}
.xban-con{height: 420px;display: flex;justify-content: space-between;align-items: center;}
.xban-con h2{font-size: 48px;color: #fff;line-height: 48px;}
.xban-con h2 span{display: block;font-size: 24px;line-height: 24px;padding-top: 16px;}
.xban-con h3{display: flex;gap: 26px;}
.xban-con h3 a{width: 230px;height: 59px;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color: #fff;font-weight: normal;border-radius: 29px;background: #2C9BE3;padding: 0 20px 0 30px;box-sizing: border-box;}
.xban-con h3 a:nth-child(2){background: #fff;color: #AC1315;}
.xban-con h3 a img{transition: all 0.5s;}
.xban-con h3 a:hover img{transform: translateX(-10px);}



/* fea */
.fea{padding: 110px 0 150px;}
.fea h2{margin-bottom: 65px;}
.fea-con{display: flex;align-items: flex-start;}
.fea-tit{width: 25%;background: #2C9BE3;border-radius: 10px 0 0 10px;display: flex;flex-direction: column;margin-top: 100px;padding: 30px 0;}
.fea-tit p{font-size: 24px;color: #fff;line-height: 104px;text-align: center;}
.fea-tit p.on{background: #F8F8F8;color: #AC1315;font-weight: bold;}
.fea-text{width: 75%;display: flex;border: 1px solid #C0C0C0;border-radius: 10px;height: 920px;box-sizing: border-box;box-shadow: 0 12px 13px rgba(44, 155, 227, 0.11);overflow: hidden;}
.fea-item{width: 50%;}
.fea-item:nth-child(2){background: #F3F5F8;}
.fea-item h3{font-size: 36px;color: #333;line-height: 36px;text-align: center;margin: 52px 0 42px;position: relative;}
.fea-item h3:after{position: absolute;left: 50%;bottom: -4px;width: 274px;height: 12px;content: "";background: rgba(172, 19, 21, 0.29);transform: translateX(-50%);}
.fea-item h3 em{color: #AC1315;}
.fea-item:nth-child(2) h3 em{color: #2C9BE3;}
.fea-item:nth-child(2) h3:after{background: rgba(44, 155, 227, 0.29);}
.fea-item li{height: 104px;display: flex;flex-direction: column;justify-content: center;text-align: center;}
.fea-item li h4{font-size: 24px;color: #333;font-weight: normal;line-height: 24px;}
.fea-item li p{font-size: 16px;color: #666;line-height: 16px;padding-top: 12px;}
.fea-item li.on{background: #AC1315;}
.fea-item li.on h4,.fea-item li.on p{color: #fff;}
.fea-item:nth-child(2) li.on{background: #2C9BE3;}




@media screen and (max-width:1700px){

}


/* use */
.use{padding: 100px 0;background: #F1F1F3;overflow: hidden;}
.use h2{margin-bottom: 60px;}
.use-list{display: flex;gap: 2px;border-radius: 10px;overflow: hidden;}
.use-list li{width: 235px;height: 560px;overflow: hidden;transition: all 0.5s;}
.use-list li h3{width: 100%;position: relative;}
.use-list li h3 p{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;line-height: 32px;background: rgba(0,0,0,0.5);}
.use-list li h3 p span{width: 40px;text-align: center;font-weight: normal;}
.use-list dl{height: 560px;position: relative;display: none;}
/* .use-list dt img{display: block;width: 100%;height: 100%;} */
.use-list dd{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/use-shadow.png) no-repeat center;background-size: 100% 100%;display: flex;flex-direction: column;justify-content: flex-end;padding: 0 60px 40px;box-sizing: border-box;}
.use-list dd h4{font-size: 30px;color: #fff;line-height: 30px;font-weight: normal;}
.use-list dd p{font-size: 16px;color: #fff;line-height: 24px;padding-top: 22px;}

.use-list li.on{width: calc(100% - 711px);}
.use-list li.on h3{display: none;}
.use-list li.on dl{display: block;}

.coop{margin-top: 35px;}
.coop h3{padding-left: 13px;font-size: 24px;color: #0F0F0F;line-height: 24px;border-left: 3px solid #2C9BE3;margin-bottom: 25px;}
.coop-list{position: relative;}
.coop-list li{width: calc((100% - 100px) / 5);margin-right: 25px;}
.coop-list li p{border: 1px solid #ccc;border-radius: 10px;overflow: hidden;}
.coop-list li img{display: block;width: 100%;transition: all 0.5s;}
.coop-list li:hover img{transform: scale(1.05);}
.coop-list li span{display: block;height: 50px;line-height: 50px;text-align: center;font-size: 16px;color: #999;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.coop-list .prev{position: absolute;left: -70px;top: 40px;z-index: 10;}
.coop-list .next{position: absolute;right: -70px;top: 40px;z-index: 10;}
.coop-list .tempWrap{width: 100% !important;}


@media screen and (max-width:1700px){
  .use-list li{width: 198px;}
  .use-list dd{padding: 0 40px 40px;}
  .use-list li.on{width: calc(100% - 600px);}
  .coop-list .prev{top: 32px;}
  .coop-list .next{top: 32px;}
}



/* yous */
.yous{position: relative;overflow: hidden;padding-bottom: 20px;}
.yous h2{position: absolute;left: 0;top: 115px;width: 100%;z-index: 10;}
.yous h2 b,.yous h2 span{color: #fff;}
.ys-bd dl{position: relative;height: 880px;}
.ys-bd dt{display: flex;justify-content: center;}
.ys-bd dd{position: absolute;width: 693px;height: 368px;background: rgba(255, 255, 255, 0.86);border-radius: 10px;bottom: 94px;right: 50%;margin-right: -700px;padding-left: 50px;box-sizing: border-box;}
.ys-bd dd h3{font-size: 36px;color: #000;line-height: 36px;padding: 37px 0 45px;}
.ys-bd dd h3 em{display: block;width: 100px;height: 40px;line-height: 40px;font-size: 22px;color: #fff;background: #B63031;border-radius: 20px;text-align: center;margin-bottom: 18px;}
.ys-bd dd .ys-desc{font-size: 16px;color: #000;line-height: 30px;}
.ys-bd dd .ys-desc p{padding-left: 18px;position: relative;}
.ys-bd dd .ys-desc p::before{position: absolute;width: 5px;height: 5px;content: "";border-radius: 50%;top: 12.5px;left: 0;background: #AC1315;}
.yous .prev{position: absolute;left: 5%;top: 50%;transform: translateY(-50%);z-index: 10;}
.yous .next{position: absolute;right: 5%;top: 50%;transform: translateY(-50%);z-index: 10;}
.yous .prev img,.yous .next img{width: 60px;}

.ys-tab{height: 150px;display: flex;}
.ys-tab li{flex: 1;background: #2C9BE3;display: flex;justify-content: center;align-items: center;gap: 20px;transition: all 0.3s;}
.ys-tab li i{height: 40px;overflow: hidden;}
.ys-tab li i img{display: block;transition: all 0.5s;}
.ys-tab li span{font-size: 24px;color: #fff;line-height: 24px;font-weight: bold;}
.ys-tab li.on{background: #fff;box-shadow: 0 12px 13px rgba(127, 127, 127, 0.11);}
.ys-tab li.on span{color: #AC1315;}
.ys-tab li.on i img{transform: translateY(-100%);}


@media screen and (max-width:1700px){
  .ys-bd dd{margin-right: -600px;}
  .ys-tab{height: 130px;}
}


/*news*/
.news{padding: 100px 0 120px;}
.news h2{margin-bottom: 60px;}
.news h3{display: flex;justify-content: space-between;margin-bottom: 28px;}
.news h3 span{display: flex;gap: 80px;}
.news h3 span a{font-size: 24px;color: #5F5F5F;line-height: 24px;font-weight: normal;padding-bottom: 5px;border-bottom: 3px solid transparent;}
.news h3 span a.on{color: #AC1315;font-weight: bold;border-color: #AC1315;}
.news h3 .more{font-size: 16px;color: #AC1315;font-weight: normal;line-height: 24px;}
.news-item{display: flex;justify-content: space-between;align-items: flex-start;gap: 25px;}
.news-tj{width: 787px;position: relative;overflow: hidden;}
.news-tj img{display: block;width: 100%;height: 412px;transition: all 0.5s;object-fit: cover;}
.news-tj span{position: absolute;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 16px;color: #fff;background: rgba(0, 0, 0, 0.6);}
.news-tj:hover img{transform: scale(1.05);}

.news-item ul{width: 587px;}
.news-item li{height: 122px;background: #F3F5F8;margin-bottom: 23px;display: flex;}
.news-item li i{width: 110px;text-align: center;font-size: 18px;color: #808080;line-height: 18px;display: flex;flex-direction: column;justify-content: center;border-right: 1px solid #fff;font-family: Arial, Helvetica, sans-serif;}
.news-item li i em{display: block;font-size: 48px;color: #333;line-height: 36px;padding-bottom: 10px;}
.news-item li .text{width: 0;flex: 1;padding: 0 20px;display: flex;flex-direction: column;justify-content: center;}
.news-item li h4 a{display: block;height: 20px;line-height: 20px;font-size: 16px;color: #333;font-weight: normal;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.news-item li p{font-size: 14px;color: #848484;line-height: 22px;height: 44px;overflow: hidden;margin-top: 10px;}
.news-item li:last-child{margin-bottom: 0;}
.news-item li:hover{background: #fff;box-shadow: 0 0 10px rgba(0, 60, 165, 0.11);}
.news-item li:hover i{background: #AC1315;color: #fff;}
.news-item li:hover i em{color: #fff;}


.cpbk{margin-top: 54px;display: flex;}
.cpbk-title{width: 174px;height: 132px;line-height: 132px;text-align: center;font-size: 24px;color: #fff;background: #2C9BE3;font-weight: normal;}
.cpbk ul{width: 0;flex: 1;border: 1px solid rgba(147, 157, 172, 0.5);border-left: 0;display: flex;padding: 0 30px;gap: 40px;}
.cpbk li{flex: 1;padding: 30px 0 0;box-sizing: border-box;}
.cpbk li h4{font-size: 16px;color: #333;font-weight: normal;height: 22px;line-height: 22px;display: flex;margin-bottom: 12px;}
.cpbk li h4 a{width: 0;flex: 1;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.cpbk li p{font-size: 16px;color: #999;font-weight: normal;line-height: 22px;display: flex;height: 44px;overflow: hidden;}
.cpbk li h4 span{width: 0;flex: 1;}
.cpbk li h4:hover{color: #AC1315;}
.cpbk li h4:hover a{color: #AC1315;}


@media screen and (max-width:1700px){
    
}



/*abt*/
.abt{height: 850px;background: url(../images/abt-bg.jpg) no-repeat center 0;overflow: hidden;}
.abt-con{display: flex;justify-content: space-between;align-items: flex-start;}
.abt-left{margin-top: 190px;}
.abt-left h3{font-size: 48px;color: #fff;line-height: 48px;font-weight: normal;padding-bottom: 60px;position: relative;}
.abt-left h3:after{position: absolute;left: 0;bottom: 0;width: 98px;height: 2px;content: "";background: #fff;}
.abt-left h3 b{display: block;font-size: 60px;line-height: 60px;padding-bottom: 15px;}
.abt-left h3 em{color: #AC1315;}
.abt-left p{font-size: 24px;color: #fff;line-height: 40px;margin: 50px 0 100px;}
.abt-left .xq{display: flex;align-items: center;gap: 12px;font-size: 14px;color: #fff;font-weight: bold;}




.abt-right{margin-top: 200px;width: 630px;position: relative;}
.abt-right li{float: left;width: 360px;}
.abt-right li p{border-radius: 10px;transition: all 0.5s;transform: scale(0.9);background: #000;overflow: hidden;}
.abt-right li p img{display: block;width: 100%;opacity: 0.5;transition: all 0.5s;}
.abt-right li.cur p{transform: scale(1);}
.abt-right li.cur p img{opacity: 1;}
.abt-right .prev{position: absolute;left: -70px;bottom: 68px;opacity: 0.5;}
.abt-right .next{position: absolute;left: -70px;bottom: 0;opacity: 0.5;}
.abt-right .prev:hover,.abt-right .next:hover{opacity: 1;}


@media screen and (max-width:1700px){
  
}












html {font-size: 10px;-webkit-text-size-adjust: none;}
@media screen and (min-width: 1200px) {html {font-size: 12.5px;}}
@media screen and (min-width: 1280px) {html {font-size: 13.33px;}}
@media screen and (min-width: 1366px) {html {font-size: 14.22px;}}
@media screen and (min-width: 1440px) {html {font-size: 15px;}}
@media screen and (min-width: 1600px) {html {font-size: 16.66px;}}
@media screen and (min-width: 1920px) {html {font-size: 20px;}}


/**/
@-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);
    }
  }