@charset "utf-8";
body{font-family: "Microsoft YaHei";}
.content{width: 1200px; margin: 0 auto;}
i,em,b{font-style: normal;}

.tit01{text-align: center; }
.tit01 h2{font-size: 46px; font-family: "Microsoft YaHei";color: #333333;font-weight:normal;line-height: 80px;position: relative; }
.tit01 a{color: #333333; }
.tit01 p{ font-weight: normal; display: block;font-size:20px;color: #666666; line-height: 40px; }

/**/
.g-guide{ background:url(../images/guidebg.jpg) no-repeat center top; height:703px; padding-top:95px;box-sizing: border-box;  font-family:"Microsoft Yahei";}
.guide{width:1200px;margin:0 auto;position: relative;}
.guide-con{width:542px;float: right;}
.guide-con em{display: block;font-size: 26px;color: #333333;line-height: 42px;}
.guide-con h3{font-size: 38px;color: #333333;line-height: 55px; font-weight: normal;margin-bottom: 30px;white-space:nowrap;}
.guide-con p{font-size: 16px; color: #666666; line-height:30px;text-align: justify;height:215px;}
.digital{width: 542px;position: relative; float: right;}
.digital li{ width:178px;box-sizing: border-box; float: left; text-align: left; position: relative}
.digital li em{margin-left:0px;display: block; position: relative;}
.digital li em b{ margin-left:0px;font-size: 56px; color: #333; font-family: "Arial"; font-weight: normal;height: 55px;line-height: 55px;}
.digital li em i{ font-size:20px;  color: #333333;text-align: center; font-weight: normal;line-height: 26px;height: 26px;display: block;text-transform: uppercase;font-family: "Arial";position: absolute;bottom:5px; right:0px; }
.digital li p{font-size: 16px; color: #333333; text-align: left; font-weight: normal;line-height: 30px; }
.digital li:nth-child(1) em{width:80px;}
.digital li:nth-child(2){width:180px;}
.digital li:nth-child(2) em{width:83px;}
.digital li:nth-child(3) em{width:173px;}
.digital li.cur b,.digital li:hover b{ background-image: -webkit-gradient(linear,left 0, right 0, from(#24f2f4), to(#254fd5));-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #01a7eb;}
.digital li.cur i,.digital li:hover i{color: #01a7eb;}
.digital li.cur p,.digital li:hover p{color: #01a7eb;}

/**/
.g-service{ height: auto;overflow: hidden;background:#fff;padding-top:95px; box-sizing: border-box; font-family: "Microsoft YaHei";max-width: 1920px;margin:0 auto; }
.g-service .tit01{height:142px;}
.service{min-width: 1200px; width: 100%;height: 576px;overflow: hidden;max-width: 1885px;margin:0 auto; }
.service ul{width: 100%;height: 576px;}
.service li{width:11.14%;border-radius: 18px; float: left;position: relative;cursor:pointer;height: 576px;line-height:30px;font-size: 16px; margin-right: 0.56%; box-sizing:border-box;overflow: hidden;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.service li:last-child{margin-right: 0;}
.service li img{display: block;}
.mo{width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;background:url(../images/service-tm1.png) repeat-x center bottom; background-size: 100% 100%;}
.shu2{width: 100%;  position: absolute;left:0rem;bottom:3.55vw;text-align: center;}
.shu2 h3{width: 100%; line-height: 40px;}
.shu2 h3 img{width:50px;height:55px;margin:0 auto 25px;display: block;}
.shu2 h3 b{ font-size:22px; text-align:center; color:#333; font-weight: normal;  display: block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.hav{width: 100%;height: 100%;}
.bock{position: absolute;left: 0; bottom:-3.55vw;padding-left:10%;width:100%;text-align: left;color: #fff;box-sizing: border-box; opacity: 0;}
.bock h3{font-size:26px; color: #ffffff;display: block; font-weight: normal;line-height: 40px;}
.bock p{width: 100%;font-size: 16px; line-height: 26px;color:#ffffff;overflow: hidden;}

.service li.cur{width: 29.6%;}
.service li.cur .mo{background:url(../images/service-tm2.png) repeat-x center bottom; background-size: 100% 100%;}
.service li.cur .shu2{opacity: 0;}
.service li.cur .bock{opacity: 1;bottom: 3.55vw;}
@media screen and (max-width:1600px) {
  .shu2 h3 b{ font-size:22px; }
  .bock h3{font-size:22px; }
  .bock p{font-size: 14px; }
}

/**/
.g-other-service{height: 520px;overflow: hidden; background:#fff;padding-top:75px; box-sizing: border-box; font-family: "Microsoft YaHei";}
.g-other-service h2{height: 44px;line-height: 44px;width:1200px;margin:0 auto 30px;font-size: 36px;color: #333333;text-align: center;position: relative;}
.g-other-service h2 a{color: #333;font-weight: normal;}
.g-other-service h2::before{content: "";position: absolute;left:0px;top:50%;width:487px;height: 1px; background:#d7d7d7;}
.g-other-service h2::after{content: "";position: absolute;right:0px;top:50%;width:487px;height: 1px;background:#d7d7d7;}
.other-service{width:1200px;position: relative;margin:0 auto;}
.other-service li{width:222px;height:162px;border-radius: 5px;border:1px solid #dfdfdf; float: left;margin-right: 22px;box-sizing: border-box;text-align: center;position: relative;margin-bottom: 24px;}
.other-service li:nth-child(5n){margin-right: 0;}
.other-service li .ser-img{width: 0;height:0;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);box-shadow: 0 0 10px #cbd0e5;border-radius: 5px;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.other-service li .ser-img::after{content: "";position: absolute;right:0px;top:0;width:100%;height: 100%;background:rgba(37, 79, 213, 0.8);border-radius: 5px;}
.other-service li .ser-img img{width:100%;display: block;}
.other-service li .ser-ico{width:50px;margin:35px auto 12px;position: relative;overflow: hidden;}
.other-service li .ser-ico img{width:100%;display: block;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.other-service li span{ font-weight: normal; display: block;font-size:16px;color: #333333; line-height: 25px;position: relative; }
.other-service li:hover{background:#f5f5f5;}
.other-service li:hover span{color: #254fd5;}

/**/
.g-patents{height: auto;overflow: hidden; background:#fff;padding:75px 0 0; box-sizing: border-box; font-family: "Microsoft YaHei";}
.g-patents .tit01{height:142px;}
.patents{height: 720px;background:url(../images/patent1.jpg) no-repeat center top;width: 100%;max-width: 1920px;margin:0 auto;position: relative;}
.patent1{width:1200px;margin:0 auto;padding:90px 0 0 0;}
.patent-con{float: right;position: relative;width:840px;}
.patent-con ul{width:100%;}
.patent-con li{height:185px;width:366px; float: left;}
.patent-con li:nth-child(2n){float: right;}
.patent-con li img{display: block;width:110px;height:110px;float: left;}
.patent-con li .patent-txt{font-size: 28px;color: #333333;line-height: 40px;width: 236px;display: block;float: left;margin-top:10px;margin-left:20px;}
.patent-con li .patent-txt p{margin-top:10px; font-size: 16px;color: #666666; line-height: normal;}

.patent-pages{width:130px;    margin: 0 auto;}
.patent-left{width:11px;height:19px;background:url(../images/patent-left.png) no-repeat; float: left;}
.patent-right{width:11px;height:19px;background:url(../images/patent-right.png) no-repeat; float: left;}
.patent-pages h5{padding:0px 19px; float: left;height: 6px;}
.patent-pages em{width:12px;height:6px;border-radius: 2px;background:#adadad;display: inline-block;margin:0 6px;}
.patent-pages em.on{background: #254fd5;width:32px;}


.patent-img{width: 32.8125%;height:720px;float: left;background: url(../images/patent1.jpg) no-repeat center center;background-size: cover;}

/**/
.g-teams{max-height: 1545px;overflow: hidden; background:#fff;padding:95px 0; box-sizing: border-box; font-family: "Microsoft YaHei";margin:0 auto; }
.g-teams .tit01{height:142px;}
.teams{margin:0 auto;position: relative;}
.team-left{width:11px;height:19px;padding:10px 20px;background:#f5f5f5 url(../images/patent-left.png) no-repeat center center;position: absolute;left:50%;top: 545px;z-index: 2;margin-left: 445px;}
.team-right{width:11px;height:19px;padding:10px 20px;background:#f5f5f5 url(../images/patent-right.png) no-repeat center center;position: absolute;left:50%;top:545px;z-index: 2;margin-left: 498px;}
.teams1{width:1200px;height:700px; position: relative;margin:0 auto;}
.teams1 dt{width:1200px;height: 549px;position: relative;overflow:hidden;}
.teams1 dt img{width:100%;display: block;}
.teams1 dd{position: absolute;left:25px;bottom:15px; width:1150px;height: 162px;padding:25px 60px 0 48px;background:#fff;border-radius: 20px;box-shadow: 0 5px 8px #f4f6fb; box-sizing: border-box;}
.teams1 dd h4{font-size:28px;color:#333333;font-weight: normal; line-height: 35px;margin-bottom: 18px;}
.teams1 dd h4 a{color: #333333;}
.teams1 dd p{font-size: 16px;color: #666666;line-height: 24px;text-align: justify;}

/**/
.g-teams2{height: 592px;overflow: hidden; background:#fff;font-family: "Microsoft YaHei";max-width: 1920px; margin:0 auto; position: relative; }
.teams2{width: 1920px;margin:0 auto;position: relative;}
/*.teams2 .team-scroll2{margin-left:-106px !important;}*/
.teams2 dl{width: 300px;height: 444px; float: left;margin-right: 3px;position: relative;}
.teams2 dt{width: 300px;height:400px;}
.teams2 dt img{width: 100%;display: block;opacity: 0.9;}
.teams2 dt h4{ line-height: 44px;color: #999999; font-size: 18px;text-align: center;font-weight: normal;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.teams2 dd{height:120px;width: 278px;padding:10px 14px 0;box-sizing: border-box; background:rgba(37, 79, 213, 0.94);position: absolute;left:10px; bottom:0;opacity: 0;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.teams2 dd h4{font-size: 16px;color: #fff;margin-bottom: 15px;font-weight: normal;white-space: nowrap;overflow: hidden;}
.teams2 dd h4 a{ font-size: 24px;color: #ffffff;margin-right: 10px;}
.teams2 dd .team-desc{line-height: 25px;font-size: 14px; color: #fff;max-height:50px;overflow:hidden;}
.teams2 dd .team-desc p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.teams2 dd .team-desc p strong{font-weight:normal;}

.g-teams2 .hd { width: 100%; position: absolute; z-index: 1; bottom: 60px; left: 0; height: 30px; line-height: 30px; text-align: center; }
.g-teams2 .hd ul { text-align: center; padding-top: 0px; }
.g-teams2 .hd ul li { cursor: pointer; display: inline-block; *display: inline; zoom: 1; width: 32px; height: 1px; margin: 0px; background:#c1ccca; overflow: hidden; line-height: 9999px; }
.g-teams2 .hd ul .on { background:#254fd5;height:4px; }
.team2-left{width:43px;height:19px;background:url(../images/patent-left.png) no-repeat left center;position: absolute;left:50%;bottom:62px;z-index: 2;margin-left:-168px;}
.team2-right{width:43px;height:19px;background:url(../images/patent-right.png) no-repeat right center;position: absolute;left: 50%;bottom:62px;z-index: 2;margin-left:128px;}

.teams2 dl:hover dd{opacity: 1;}
.teams2 dl:hover dt h4{opacity: 0;}
.teams2 dl:hover dt img{opacity: 1;}
/**/
.g-cases{ height:auto; background:#f7f8fc; padding:80px 0;font-family:"Microsoft Yahei";box-sizing: border-box; position: relative; }
.g-cases .tit01{height:142px; }
.casetit{height: 63px;width:700px;margin:0 auto;}
.casetit ul{float: left;}
.casetit li{ height: 40px;line-height: 40px; float: left; font-size:20px; color: #333333;text-align: center;box-sizing: border-box;position: relative;width:175px;text-align: center;}
.casetit li a{color: #333333; text-decoration: none; }
.casetit li.cur a,.casetit li:hover a{color: #254fd5; text-decoration: underline;}
.casetit span{ width:150px;height: 40px;line-height: 40px; float: left; font-size:20px; color: #333333;text-align: center;box-sizing: border-box;display: block;}
.casetit span a{color: #333333; text-decoration: none; }
.case{position: relative;height: 401px;width:1200px;margin:0 auto 40px;box-shadow: 0 0 10px #ebedf5;border-radius: 12px;}
.case-left{width:43px;border-right: 1px solid #c8c8c8; height:19px;background:url(../images/patent-left.png) no-repeat left center;position: absolute;left:50%;bottom:47px;z-index: 2;margin-left:-43px;}
.case-right{width:43px;height:19px;background:url(../images/patent-right.png) no-repeat right center;position: absolute;left: 50%;bottom:47px;z-index: 2;}
.case dl{width: 1150px;padding:25px;height:351px;background:#fff;border-radius: 12px;}
.case dl dt{width: 468px;height: 351px;border-radius: 10px;overflow: hidden; float: left; }
.case dl dt img{width: 100%;display: block;}
.case dl dd{width: 575px;float: left;margin-left:60px;}
.case dl dd h4{font-size: 26px;color:#333333;line-height: 40px;height: 40px;padding-bottom: 24px; font-weight: normal;margin:40px 0 25px;position: relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.case dl dd h4::after{content: "";width:45px;height:4px;background: #254fd5;position: absolute;left:0;bottom:0;}
.case dl dd h4 a{color:#333333;}
.case dl dd p{font-size: 16px;color: #666666;line-height: 30px;}

.partners{width:1200px;margin:0 auto;height:auto;overflow:hidden;}
.partners li{width:200px;padding-top: 15px;float: left;box-sizing: border-box;margin-right:10px;background:#fff;}
.partners li img{width:96px;height:96px;display: block;margin:0 auto;}
.partners li h4{margin-top:10px; font-size: 15px;line-height: 26px;color:#666666;height:52px;overflow:hidden; text-align: center;font-weight: normal;}
.partners li:hover{box-shadow: 0  0 10px rgba(37, 79, 213,0.5);}

/**/
.g-super{height:auto;background:url(../images/superbg.jpg) no-repeat center top;background-size:cover; padding:75px 0; box-sizing: border-box; font-family: "Microsoft YaHei"; position: relative;  clear:both;overflow:hidden;}
.g-super .tit01{ height:142px;}
.g-super .tit01 h2{color: #fff;}
.g-super .tit01 p{color: #fff;}
.super{width:1200px;margin:0 auto;}
.super dl{width:394px;height:280px;background:#fff;float: left;margin-right: 9px;border-radius: 10px;margin-bottom: 12px;position: relative;}
.super dl:nth-child(3n){margin-right: 0;}
.super dt{padding:28px 0 0 62px;width:394px;height:280px;position: relative;box-sizing: border-box;overflow: hidden;}
.super dt em{display: block;font-size: 160px;color: #f6f7f9;font-family: Arial;position: absolute;right: -5px;bottom:-42px;}
.super dt img{width:116px;height:116px;display: block;margin-left: -20px;}
.super dt h4{font-size: 30px;color: #333333;line-height: normal; font-weight: normal;margin:10px 0;}
.super dt h4 i{display: block;font-size: 12px;color: #d1d1d1;text-transform: uppercase;line-height: 25px;}
.super dd{background:#fff;position: absolute;left:0%;top:0%;width:100%;height: 100%;border-radius: 10px;padding:72px 45px 0 52px;box-sizing: border-box;opacity: 0;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.super dd p{font-size: 16px;color: #666;line-height:30px;}
.super dd p b{color: #254fd5;}
.super dl.cur dd,.super dl:hover dd{opacity: 1;}


/**/
.g-news{ height: 1015px; box-sizing: border-box;  padding-top:100px; overflow: hidden; font-family:"Microsoft Yahei";}
.g-news .tit01{ height:142px;}

.news-tit{ height: 72px; font-size:18px;color: #333333;border:1px solid #dcdcdc;}
.news-tit h3{ float: left;}
.news-tit h3 a{border-right:1px solid #dcdcdc;width:184px;display: block;padding-left:66px; line-height: 72px;height:72px; font-size: 18px;color: #333; font-weight: normal;float: left;box-sizing: border-box;position: relative;}
.news-tit h3 a::after{content: "";width:28px;height:28px;position: absolute;left:32px;top:22px;background: url(../images/newstit1.png) no-repeat 0 0;}
.news-tit span{display: block;width:118px;text-align: center; font-size: 14px;color: #999999;float: right;line-height: 72px;height:72px;}
.news-tit span a{color: #999;}
.news-tit h3 a.cur{ font-weight: bold;color: #254fd5;}
.news-tit h3 a.cur::after{background-position: 0 -28px;}


.news{width:1200px;margin:0 auto;}
.news-c{width:1200px;overflow: hidden;padding:40px 32px 0;height:610px;border:1px solid #dcdcdc;border-top:0;box-sizing: border-box;}
.news1{float: left;}
.news1 dl{width:523px; height:416px; overflow: hidden;position: relative;border-bottom: 1px dashed #dfdfdf;}
.news1 dt{ width:523px;max-height: 225px; position: relative; overflow: hidden;}
.news1 dt img{width:523px; display: block;}
.news1 dd{width:523px; overflow: hidden;box-sizing: border-box;padding: 25px 0;}
.news1 dd h4{font-size: 16px; font-weight: normal;height: 32px; line-height: 32px;color:#333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 5px;font-family:"Microsoft Yahei";}
.news1 dl h4 a{ text-decoration: none; color:#333333;}
.news1 dd p{overflow: hidden;font-size: 14px; line-height: 32px; color:#666666;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;  overflow: hidden; text-overflow: ellipsis;}
.news1 dd .news-btn{display: block;color: #122a88;font-size: 14px; line-height: 32px; }
.news1 dl img{-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.news1 dl img:hover{-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01);}
.news1 ul{padding-top:20px;}
.news1 li{height:50px;line-height: 50px; font-size: 16px;color:#333333;}
.news1 li a{display: inline-block;width: 450px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news1 li span{float: left;font-size: 16px;color:#999999;width:82px;}

.news2{width:555px;float: right;}
.news2 dl{width:555px; height:80px; padding:27px 0 40px; overflow: hidden;position: relative;border-bottom: 1px dashed #dfdfdf;}
.news2 dt{ width:102px;height: 80px; position: relative; overflow: hidden;float: left;background:#f2f2f2;border-radius: 4px;text-align: center; font-size: 20px;color: #333333;padding-top:20px;box-sizing: border-box;}
.news2 dt em{display: block; font-size: 16px;color: #666666;}
.news2 dd{width:416px; overflow: hidden;float: right;}
.news2 dd h4{font-size: 16px; font-weight: normal;height: 30px;margin-bottom: 5px; line-height: 30px;color:#333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-family:"Microsoft Yahei";}
.news2 dl h4 a{ text-decoration: none; color:#333333;}
.news2 dd p{overflow: hidden;font-size: 14px; line-height:25px; color:#666666;display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;  overflow: hidden; text-overflow: ellipsis;}
.news2 dl:first-child{padding-top:0;}
.news2 dl:last-child{border-bottom:0;}

.news2 dl:hover dt{background:#254fd5;color: #fff;}
.news2 dl:hover dt em{color: #fff;}
.news2 dl:hover dd h4 a{color: #254fd5;}

/**/
.g-about{background:url(../images/aboutbg.jpg) no-repeat center top;height:894px;font-family:"Microsoft Yahei";box-sizing: border-box; overflow: hidden; position: relative;padding-top: 100px;}
.about{width:1200px;margin:0 auto; }
.about-1{width:510px; float: left;}
.about-1 .about-tit{height: 230px;padding-top:80px;text-align: left;font-size: 46px;color: #333333; font-weight: normal;box-sizing: border-box;}
.about-1 .about-tit a{color: #333333;}
.about-1 .about-tit em{display: block;font-size: 24px;line-height: 48px;color: #666666;font-weight: lighter;}
.about-1 dl{width:100%; position: relative;background:#254fd5; overflow: hidden;}
.about-1 dt{width:100%;max-height:230px;}
.about-1 dt img{width:100%;display: block;}
.about-1 dd{width: 100%;height: 230px;box-sizing: border-box;padding:27px 55px 0 45px;text-align: justify;}
.about-1 dd h4{line-height: 38px;color: #ffffff;font-weight: bold;font-size: 24px;margin-bottom: 15px;}
.about-1 dd h4 a{color: #fff;}
.about-1 dd p{ font-size: 14px;color: rgba(255, 255, 255, 0.6);line-height: 30px;}
.about-2{width:690px; float: left;}
.about-2 li{width:230px; float: left;text-align: center;}
.about-2 li img{width:100%;display: block;max-height: 230px;}
.about-2 li .show-tit{height:230px;width:230px;position: relative;background:#f7faff; font-size: 18px;color: #4d4d4d;line-height: 30px;padding-top:88px;box-sizing: border-box;}
.about-2 li .show-tit::after{content: "";width:1px;height:66px;position: absolute;left:50%;top:1px;background:#d2e4f5;}
.about-2 li .show-tit em{width:60px;height:60px;display: block;margin:0 auto;}
.about-2 li .show-tit i{display: block;font-size: 12px;color: rgba(77, 77, 77, 0.2);line-height: normal;}
.about-2 li:nth-child(1){margin-top:230px;}
.about img{-webkit-transition: .35s;-moz-transition: .35s;transition: .35s;}
.about li:hover em img{-webkit-animation:hvr-buzz-out 0.75s linear;animation:hvr-buzz-out 0.75s linear;}
.about dl:hover img,.about li:hover img{-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01);}

/**/
.g-quick{background:#ffffff;padding-top:85px;font-family:"Microsoft Yahei";box-sizing: border-box; overflow: hidden; clear: both;}
.quick{width:1200px;margin:0 auto; font-size: 16px;color: #333333; line-height: 34px;}
.quick a{color: #333;}
.quick dl{clear: both;overflow: hidden;margin-bottom: 15px;}
.quick dt{width:120px;padding-left:32px;background:url(../images/ico1.png) no-repeat left center; font-weight: bold; float: left;}
.quick dd{width:1030px;float: left;}
.quick dd a{display: inline-block;padding-left:15px;background: url(../images/line1.png) no-repeat left center;width:250px;box-sizing: border-box;margin-bottom: 10px;}


/*友情链接*/
.g-link{ background:none;font-size: 14px; line-height: 30px;width: 1200px;margin:0 auto;position: relative;text-align: center; }
.link{width:1200px;height:auto; overflow: hidden;font-family:"Microsoft Yahei";position: absolute;top:-112px;left:0;font-size: 14px; line-height: 30px;color:rgba(255, 255, 255, 0.26);}
.link h2{font-size:16px ;font-weight:normal; text-transform: uppercase; width: 80px; float: left;height: 23px; line-height: 23px;color: #7e7e7e;}
.link p{  overflow: hidden;  color:rgba(255, 255, 255, 0.26);position: relative;z-index: 1;}
.link a{ color:rgba(255, 255, 255, 0.26);padding: 0 10px;background: url(../images/link-ico.png) no-repeat right center; }
.link a:last-child{background:none;}
@-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);
  }
}