@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);}
.guang{position: relative;overflow: hidden;}
.guang: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);
}
.guang:hover:before {
    left: 120%;
    -moz-transition: 1.2s;
    -o-transition: 1.2s;
    -webkit-transition: 1.2s;
    transition: 1.2s;
}


.tit{font-weight: normal;font-size: 0;text-align: center;position: relative;}
.tit b{display: block;font-size: 38px;color: #000;line-height: 50px;}
.tit span{display: inline-block;font-size: 16px;color: #000;line-height: 20px;margin-top: 20px;padding: 0 20px;background: #fff;}
.tit::after{position: absolute;width: 100%;height: 1px;content: "";background: #DBDBDB;left: 0;bottom: 9px;z-index: -1;}


/*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: #1AA9EB;}
.banner .prev{position: absolute;font-size: 0;left: 40px;top: 50%;transform: translateY(-50%);z-index: 10;padding: 6px;background: rgba(102,102,102,0.6);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(102,102,102,0.6);border-radius: 50%;cursor: pointer;transition: all 0.3s;}
.banner .prev:hover,.banner .next:hover{background: #1AA9EB;}


/* search */
.search-con{height: 165px;display: flex;justify-content: space-between;align-items: center;}
.search-con .tel{padding-left: 66px;font-size: 16px;color: #00335A;line-height: 16px;background: url(../images/h-tel.png) no-repeat left center;}
.search-con .tel b{display: block;font-size: 30px;color: #00335A;line-height: 26px;padding-top: 12px;}
.search-con .sou-box{display: flex;}
.search-con .sou-box input{width: 578px;height: 68px;line-height: 68px;font-size: 16px;color: #333;padding-left: 25px;border: 1px solid #00335A;outline: 0;border-radius: 3px 0 0 3px;box-sizing: border-box;border-right: 0;background: none;}
.search-con .sou-box button{width: 130px;height: 68px;background: url(../images/sou.png) no-repeat center #00335A;border: 0;outline: 0;cursor: pointer;border-radius: 0 3px 3px 0;}
.search-con .sou-box input::-webkit-input-placeholder{color: #A9A9A9;}


@media screen and (max-width:1700px){
  .search-con .sou-box input{width: 478px;}
}


/* yinzi */
.yinzi{background: #ECEDED;padding: 140px 0 70px;}
.yinzi dl{display: flex;justify-content: space-between;gap: 40px;}
.yinzi dt{width: 707px;}
.yinzi dt img{max-width: 100%;height: 420px;object-fit: cover;}
.yinzi dd{width: 810px;}
.yinzi dd h2{font-size: 50px;color: #000;line-height: 60px;font-weight: normal;}
.yinzi dd .yz-desc{font-size: 18px;color: #666;line-height: 28px;margin: 45px 0 100px;}
.yinzi dd .more{display: block;width: 250px;height: 68px;line-height: 68px;text-align: center;font-size: 16px;color: #00335A;background: #fff;position: relative;z-index: 1;transition: all 0.5s;}
.yinzi dd .more::after{position: absolute;width: 0;height: 100%;content: "";background: #1AA9EB;left: 0;top: 0;transition: all 0.5s;z-index: -1;}
.yinzi dd .more:hover{color: #fff;}
.yinzi dd .more:hover::after{width: 100%;}
.yz-list{margin-top: 120px;padding: 50px 0 0;border-top: 1px solid rgba(192, 192, 192, 0.4);}
.yz-list ul{display: flex;justify-content: space-between;}
.yz-list li{transition: all 0.5s;}
.yz-list li span{display: block;font-size: 18px;color: #666;line-height: 28px;height: 45px;}
.yz-list li span b{display: inline-block;font-size: 24px;color: #003278;height: 45px;line-height: 45px;}
.yz-list li span em{display: inline-block;font-size: 48px;}
.yz-list li p{font-size: 24px;color: #666;line-height: 24px;padding-top: 16px;}
.yz-list li:hover{transform: translateY(-10px);}
.yz-list li:hover b{color: #1AA9EB;}



@media screen and (max-width:1700px){
  .yinzi dd h2{font-size: 40px;}
  .yinzi dd .yz-desc{font-size: 16px;margin: 45px 0 70px;}
}


/* pro */
.pro{padding: 130px 0;}
.pro-top{display: flex;justify-content: space-between;margin-bottom: 50px;}
.pro-top h2{font-size: 50px;color: #000;line-height: 50px;font-weight: normal;}
.pro-top h2 i{display: block;font-size: 24px;color: #999;line-height: 24px;padding-top: 12px;}
.pro-ctg{display: flex;justify-content: space-between;align-items: center;width: 827px;height: 77px;background: #00335A;}
.pro-ctg h3{display: flex;}
.pro-ctg h3 a{width: 204px;height: 77px;line-height: 77px;text-align: center;font-size: 16px;color: #fff;font-weight: normal;position: relative;}
.pro-ctg h3 a::after{position: absolute;left: 0;bottom: 0;width: 0;height: 4px;background: #1AA9EB;content: "";transition: all 0.5s;}
.pro-ctg .more{display: flex;justify-content: space-between;width: 138px;height: 50px;line-height: 50px;text-align: center;font-size: 16px;color: #0067D1;font-weight: bold;background: #fff;border-radius: 2px;margin-right: 16px;padding: 0 20px;box-sizing: border-box;}
.pro-ctg h3 a:hover{font-weight: bold;}
.pro-ctg h3 a:hover::after{width: 100%;}

.pro-list{position: relative;}
.pro-list dl{width: calc((100% - 60px) / 4);margin-right: 20px;background: #F1F1F1;transition: all 0.5s;}
.pro-list dt{margin: 18px;}
.pro-list dt img{display: block;width: 100%;}
.pro-list dd{height: 200px;text-align: center;padding: 20px 0 0;box-sizing: border-box;}
.pro-list dd h3 a{display: block;font-size: 24px;color: #000;line-height: 24px;font-weight: normal;}
.pro-list dd p{font-size: 16px;color: #999;line-height: 16px;padding-top: 18px;}
.pro-list dd .xq{display: block;width: 165px;height: 48px;line-height: 48px;text-align: center;font-size: 16px;color: #999;background: #fff;border-radius: 2px;transition: all 0.5s;margin: 35px auto 0;}
.pro-list dl:hover{background: #fff; box-shadow: 0 0 29px rgba(70, 70, 70, 0.13);}
.pro-list dl:hover .xq{color: #fff;background: #1AA9EB;}
.pro-list .tempWrap{width: 100% !important;padding: 0 20px;margin-left: -20px;}
.pro-list .pro-bd{padding: 20px 0 !important;}
.pro-list .prev{position: absolute;left: -44px;top: 50%;transform: translateY(-50%);z-index: 10;width: 66px;height: 66px;border-radius: 50%;background: url(../images/pro-prev.png) no-repeat;background-size: contain;box-shadow: 0 0 20px rgba(26, 169, 235, 0.2);}
.pro-list .next{position: absolute;right: -44px;top: 50%;transform: translateY(-50%);z-index: 10;width: 66px;height: 66px;border-radius: 50%;background: url(../images/pro-next.png) no-repeat;background-size: contain;box-shadow: 0 0 20px rgba(26, 169, 235, 0.2);}
.pro-list .prev:hover{background: url(../images/pro-prev1.png) no-repeat;background-size: contain;}
.pro-list .next:hover{background: url(../images/pro-next1.png) no-repeat;background-size: contain;}



@media screen and (max-width:1700px){
  .pro-top h2{font-size: 40px;}
  .pro-top h2 i{font-size: 20px;}
  .pro-ctg{width: 680px;}
  .pro-ctg h3 a{width: 160px;}
  .pro-list dd h3 a{font-size: 20px;}
  .pro-list dd p{font-size: 14px;}
  .pro-list .prev{left: -30px;width: 50px;height: 50px;}
  .pro-list .next{right: -30px;width: 50px;height: 50px;} 
}


/* why */
.why{height: 880px;background: url(../images/why-bg.jpg) no-repeat center;}
.why-con{display: flex;justify-content: space-between;}
.why-left{margin-top: 140px;}
.why-left h2{font-size: 50px;color: #fff;line-height: 50px;font-weight: normal;}
.why-left h2 i{display: block;font-size: 24px;color: #fff;line-height: 24px;padding-top: 12px;}
.why-left .tel{margin-top: 355px;}
.why-left .tel i{display: block;font-size: 16px;color: #fff;line-height: 20px;background: url(../images/h-tel.png) no-repeat left center;padding: 5px 0 5px 64px;}
.why-left .tel b{display: block;font-size: 36px;color: #fff;line-height: 36px;font-family: Arial, Helvetica, sans-serif;margin-top: 30px;}

.why-right{width: 1060px;margin-top: 150px;}
.why-tab{display: flex;border-left: 1px solid #fff;border-right: 1px solid #fff;background: #fff;}
.why-tab span{width: 38%;height: 75px;line-height: 75px;text-align: center;font-size: 30px;color: #00335A;background: #fff;box-sizing: border-box;}
.why-tab span:nth-child(2){width: 24%;border-left: 1px solid #265495;border-right: 1px solid #265495;}
.why-right ul{border: 1px solid #fff;border-top: 0;}
.why-right li{display: flex;border-bottom: 1px solid #265495;text-align: center;}
.why-right li:last-child{border: 0;}
.why-item{width: 38%;height: 125px;display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;}
.why-item:nth-child(2){width: 24%;border-left: 1px solid #265495;border-right: 1px solid #265495;}
.why-item h3{font-size: 24px;color: #fff;line-height: 24px;font-weight: normal;}
.why-item p{font-size: 16px;color: #fff;line-height: 16px;padding-top: 10px;}
.why-right li:hover{background: #1AA9EB;}



@media screen and (max-width:1700px){
  .why-left h2{font-size: 40px;}
  .why-left h2 i{font-size: 20px;}
  .why-right{width: 800px;}
}



/* use */
.use{padding: 130px 0 60px;position: relative;z-index: 1;}
.use::after{position: absolute;left: 0;bottom: 0;width: 100%;height: 260px;background: #ECEDED;content: "";z-index: -1;}
.use-top{display: flex;justify-content: space-between;align-items: center;margin-bottom: 65px;}
.use-top h2{font-size: 50px;color: #000;line-height: 50px;font-weight: normal;}
.use-top h2 i{display: block;font-size: 24px;color: #999;line-height: 24px;padding-top: 12px;}
.use-top .tel{padding-left: 66px;font-size: 16px;color: #00335A;line-height: 16px;background: url(../images/h-tel.png) no-repeat left center;}
.use-top .tel b{display: block;font-size: 30px;color: #00335A;line-height: 26px;padding-top: 12px;}
.use ul{display: flex;gap: 1px;}
.use li{width: calc((100% - 1082px) / 3);height: 553px;overflow: hidden;transition: all 0.5s;}
.use li h3{height: 553px;background: #00335A;position: relative;display: flex;flex-direction: column;padding: 90px 0 80px;box-sizing: border-box;justify-content: space-between;align-items: center;}
.use li h3 i{position: absolute;font-size: 72px;color: #fff;line-height: 60px;opacity: 0.04;top: 88px;left: 0;width: 100%;text-align: center;}
.use li h3 span{display: block;font-size: 30px;color: #fff;line-height: 32px;width: 40px;text-align: center;}
.use li dl{display: none;}
.use li dt{width: 0;flex: 1;}
.use li dt img{width: 100%;height: 553px;object-fit: cover;}
.use li dd{width: 385px;padding: 88px 45px 0;background: #fff;box-sizing: border-box;}
.use li dd h4{display: flex;justify-content: space-between;align-items: center;font-weight: normal;}
.use li dd h4 span{font-size: 24px;color: #00335A;line-height: 24px;}
.use li dd h4 span em{display: block;font-size: 36px;color: #00335A;line-height: 36px;padding-bottom: 12px;}
.use li dd h4 i{font-size: 72px;color: #A9A9A9;line-height: 60px;opacity: 0.23;font-weight: bold;font-family: Arial, Helvetica, sans-serif;}
.use li dd p{font-size: 16px;color: #00335A;line-height: 24px;margin: 165px 0 35px;}
.use li dd .zx{display: block;width: 165px;height: 48px;line-height: 48px;text-align: center;font-size: 16px;color: #fff;background: #1AA9EB;}
.use li:nth-child(4) dd h4 em{font-size: 32px;}

.use li.on{width: 1082px;box-shadow: 0 6px 32px 8px rgba(0, 0, 0, 0.13);}
.use li.on h3{display: none;}
.use li.on dl{display: flex;}


@media screen and (max-width:1700px){
  .use li{width: calc((100% - 800px) / 3);}
  .use li.on{width: 800px;}  
}



/* case */
.case{padding: 60px 0 160px;background: #ECEDED;}
.case-top{display: flex;justify-content: space-between;align-items: center;margin-bottom: 50px;}
.case-top h2{font-size: 50px;color: #000;line-height: 50px;font-weight: normal;}
.case-top h2 i{display: block;font-size: 24px;color: #999;line-height: 24px;padding-top: 12px;}
.case-top .more{display: block;width: 165px;height: 60px;line-height: 60px;text-align: center;font-size: 16px;color: #fff;background: #1AA9EB;}
.case-list{padding: 40px;background: #fff;position: relative;}
.case-bd dl{width: calc((100% - 60px) / 4);margin-right: 20px;}
.case-bd dt img{display: block;width: 100%;}
.case-bd dd{height: 235px;}
.case-bd dd h4{padding: 12px 0 15px;}
.case-bd dd h4 a{display: block;height: 30px;line-height: 30px;font-size: 18px;color: #000;font-weight: normal;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.case-bd dd p{font-size: 16px;color: #464646;line-height: 24px;height: 72px;overflow: hidden;}
.case-bd dd .xq{display: inline-block;font-size: 14px;color: #00335A;line-height: 24px;margin-top: 75px;}
.case-bd dl:hover .xq{color: #1AA9EB;}
.case-list .tempWrap{width: 100% !important;}
.case-list .pro-bd{padding: 20px 0 !important;}
.case-list .prev{position: absolute;left: -44px;top: 50%;transform: translateY(-50%);z-index: 10;width: 66px;height: 66px;border-radius: 50%;background: url(../images/pro-prev.png) no-repeat;background-size: contain;box-shadow: 0 0 20px rgba(26, 169, 235, 0.2);}
.case-list .next{position: absolute;right: -44px;top: 50%;transform: translateY(-50%);z-index: 10;width: 66px;height: 66px;border-radius: 50%;background: url(../images/pro-next.png) no-repeat;background-size: contain;box-shadow: 0 0 20px rgba(26, 169, 235, 0.2);}
.case-list .prev:hover{background: url(../images/pro-prev1.png) no-repeat;background-size: contain;}
.case-list .next:hover{background: url(../images/pro-next1.png) no-repeat;background-size: contain;}


@media screen and (max-width:1700px){
  .case-list .prev{left: -30px;width: 50px;height: 50px;}
  .case-list .next{right: -30px;width: 50px;height: 50px;}  
}



/* yous */
.yous{height: 880px;background: url(../images/yous-bg.jpg) no-repeat center 0;position: relative;}
.yous h2{position: absolute;left: 4.7vw;top: 130px;font-size: 2.6vw;color: #fff;line-height: 50px;font-weight: normal;}
.yous h2 i{display: block;font-size: 1.25vw;color: #fff;line-height: 24px;padding-top: 12px;}
.yous ul{display: flex;height: 100%;}
.yous li{flex: 1;border: 1px solid rgba(255, 255, 255, .3);}
.yous li img{display: block;margin: 360px auto 32px;transition: all 0.5s;}
.yous li h3{font-size: 1.875vw;color: #fff;line-height: 36px;text-align: center;font-weight: normal;height: 82px;position: relative;}
.yous li h3 span{display: block;font-size: 1.25vw;color: #fff;line-height: 24px;padding-top: 12px;}
.yous li p{font-size: 16px;color: #fff;line-height: 24px;margin: 55px 2.6vw 0;opacity: 0;transition: all 0.5s;}

.yous li:hover{background: rgba(0, 51, 90, 0.86);}
.yous li:hover img{margin: 300px auto 32px;}
.yous li:hover h3::after{position: absolute;width: 84px;height: 2px;background: #1AA9EB;content: "";left: 50%;bottom: 0;margin-left: -42px;}
.yous li:hover h3 span{display: none;}
.yous li:hover p{opacity: 1;}




@media screen and (max-width:1700px){
  .yous li p{font-size: 14px;}
}



/*news*/
.news{padding: 140px 0 170px;}
.news-top{display: flex;justify-content: space-between;align-items: center;margin-bottom: 65px;}
.news-top h2{font-size: 50px;color: #000;line-height: 50px;font-weight: normal;}
.news-top h2 i{display: block;font-size: 24px;color: #999;line-height: 24px;padding-top: 12px;}
.news-top .more{display: block;width: 165px;height: 60px;line-height: 60px;text-align: center;font-size: 16px;color: #fff;background: #1AA9EB;}
.news-list{display: flex;}
.news-list li{width: 338px;overflow: hidden;transition: all 0.5s;}
.news-item{height: 452px;border: 1px solid #C9C9C9;padding: 80px 24px 0;box-sizing: border-box;border-right: 0;}
.news-item span{display: block;font-size: 14px;color: #DCDCDC;line-height: 24px;}
.news-item span em{display: block;font-size: 48px;color: #DCDCDC;line-height: 40px;font-weight: bold;}
.news-item h3{font-size: 1.25vw;line-height: 35px;font-weight: normal;margin: 28px 0 92px;height: 70px;}
.news-item h3 a{color: #666;}
.news-item .xq{display: block;width: 51px;height: 51px;line-height: 51px;text-align: center;font-size: 30px;color: #DCDCDC;background: url(../images/news-xq.png) no-repeat center;}
.news-list li:last-child .news-item{border-right: 1px solid #C9C9C9;}


.news-list dl{width: 926px;display: none;}
.news-list dd{width: 340px;padding: 0 30px;box-sizing: border-box;background: #00335A;}
.news-list dd i{display: block;font-size: 14px;color: #fff;line-height: 14px;padding: 85px 0 25px;}
.news-list dd h4{font-size: 24px;color: #fff;line-height: 30px;font-weight: normal;}
.news-list dd h4 a{color: #fff;}
.news-list dd p{font-size: 14px;color: #fff;line-height: 22px;margin: 25px 0 50px;}
.news-list dd .more{display: block;width: 165px;height: 60px;line-height: 60px;text-align: center;font-size: 16px;color: #00335A;background: #fff;transition: all 0.3s;}
.news-list dd .more:hover{background: #1AA9EB;color: #fff;}
.news-list dt{width: 586px;}
.news-list dt img{max-width: 100%;height: 452px;object-fit: cover;}

.news-list li.on{width: 926px;}
.news-list li.on .news-item{display: none;}
.news-list li.on dl{display: flex;}



@media screen and (max-width:1700px){
  
}





/*abt*/
.abt{height: 800px;background: url(../images/abt-bg.jpg) no-repeat center 0;}
.abt-con{display: flex;justify-content: space-between;}
.abt-left{margin-top: 180px;}
.abt-left h2{font-size: 72px;color: #fff;line-height: 72px;}
.abt-left h2 span{display: block;font-size: 42px;line-height: 42px;padding-top: 28px;font-weight: normal;}
.abt-left p{font-size: 24px;color: #C0C0C0;line-height: 40px;margin: 100px 0 95px;}
.abt-left .more{display: block;width: 165px;height: 60px;line-height: 60px;text-align: center;font-size: 16px;color: #00335A;background: #fff;transition: all 0.3s;}
.abt-left .more:hover{background: #1AA9EB;color: #fff;}

.abt-right{margin-top: 172px;}
.abt-right ul{display: flex;flex-wrap: wrap;width: 368px;gap: 20px 28px;}
.abt-right li{width: 170px;height: 170px;padding: 0 20px;box-sizing: border-box;transition: all 0.5s;}
.abt-right li img{display: block;margin: 22px 0 30px;}
.abt-right li span{display: block;font-size: 22px;color: #fff;line-height: 22px;}
.abt-right li i{display: block;font-size: 10px;color: #fff;line-height: 30px;opacity: 0.4;}
.abt-right li:nth-child(1){background: url(../images/abt-zs1.png) no-repeat center #003278;}
.abt-right li:nth-child(2){background: url(../images/abt-zs2.png) no-repeat center #003278;transform: translateY(110px);}
.abt-right li:nth-child(3){background: url(../images/abt-zs3.png) no-repeat center #003278;}
.abt-right li:nth-child(4){background: url(../images/abt-zs4.png) no-repeat center #003278;transform: translateY(110px);}
.abt-right li:hover{background-color: #1AA9EB;}


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