@charset "utf-8";
/* CSS Document */
/*common*/
.mb10 { margin-bottom:10px;}
.ml10 { margin-left:10px;}
.bg { background:#FFF;}
em,i{ font-style:normal; }
body{min-width: 1250px; width: 100%;overflow-x: hidden;}
.banner{width:100%; position:relative; z-index:1;}
.banner .bd,.banner .bd li{width:100%; overflow:hidden; }
.banner .bd li img{width: 100%; display: block;}
.banner .bantil{ width:160px; height:13px;position:absolute; bottom:40px;left:50%; margin-left:-60px; z-index:8;}
.banner .bantil li{ width:13px; height:13px; border-radius:13px; float:left; display:inline;opacity:1; margin:0 12px; background:#ff5c01; }
.banner .bantil li.on{width:40px;}
.tit1{ font:50px "Microsoft YaHei"; text-align:center;color:#e40a09; font-weight:bold;}
.tit1 a{ display:block; color:#e40a09;}
.tit1 em{ display:block; font:20px "Microsoft YaHei"; margin-top:8px; color:#4d4d4d;}
.menu{float: right;}
.yinz{ height:780px; padding-top:60px;overflow:hidden;}
.yinz h2{ height:125px; background:url(../img/yinz_d.png) no-repeat center bottom; font:46px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#06ad43;}
.yinz h2 em{ display:block; font:22px "Microsoft Yahei"; color:#333; position:relative; margin-top:10px;}
.yinz h2 em:before{ content:""; position:absolute; top:30%; left:0; width:402px; height:13px; background:url(../img/line1.png) no-repeat;}
.yinz h2 em:after{content:""; position:absolute; top:30%; right:0; width:402px; height:13px; background:url(../img/line2.png) no-repeat;}
.yinz p{ width:992px; margin:10px auto 0; height:77px; font:16px "Microsoft Yahei"; line-height:26px; color:#666; text-align:center;}
.yinz h3{ width:685px; height:500px; overflow:hidden; float:left; background:url(../img/yinz_bg.jpg) no-repeat left top; margin-left:-28px;}
.yinz h3 img{ display:block; width:633px; height:466px; padding:15px 0 0 20px;}
.yinz1{ width:490px; float:right;margin-top:22px;}
.yinz1 h4{ height:60px; overflow:hidden; background:#f5f5f5; border-left:5px solid #06ad43; font:16px "Microsoft Yahei"; font-weight:bold;color:#06ad43; line-height:60px; overflow:hidden; padding-left:40px; margin-bottom:20px;}
.yinz1 span{ display:block; font:16px "Microsoft Yahei"; line-height:34px; height:34px; color:#666; padding-left:40px; background:url(../img/yinz_arr.png) no-repeat left center;}
.yinz2{ position:relative; margin-top:20px;}
.yinz1 li{ width:234px; float:left; margin-right:15px;}
.yinz1 li img{ display:block; width:234px; height:280px;border:1px solid #eee; box-sizing:border-box;}
.yinz1 li em{ display:block; font:16px "Microsoft Yahei"; height:50px; line-height:50px; overflow:hidden; text-align:center; color:#666;}
.yinz_arr1{ width:45px; height:24px; background:#06ad43; font:20px "宋体"; text-align:center; line-height:24px; color:#fff; position:absolute; top:120px; left:-18px;}
.yinz_arr2{ width:45px; height:24px; background:#06ad43; font:20px "宋体"; text-align:center; line-height:24px; color:#fff; position:absolute; top:120px; right:-18px;}
.par{ height:260px;}
.par .content{ position:relative;}
.par1{ overflow:hidden;}
.par h2{ height:36px; text-align:center; font:24px "Microsoft Yahei"; line-height:36px; color:#333; position:relative;}
.par h2:before{ content:""; position:absolute; top:50%; left:0; width:470px; height:1px; background:#dfdfdf;}
.par h2:after{content:""; position:absolute; top:50%; right:0; width:470px; height:1px; background:#dfdfdf;}
.par h2 a{ color:#333;}
.par li{ width:226px; float:left; margin:18px 17px 0 0;}
.par li img{ width:226px; height:127px; display:block;}
.par li a:hover img{ border:3px solid #06ad43; box-sizing:border-box;}
.par_l{ width:37px; height:37px; position:absolute; top:100px; left:-60px;}
.par_r{width:37px; height:37px; position:absolute; top:100px;right:-60px;}

.pro{overflow:hidden;background:#f5f5f5;}
.pro h2{ height:120px; padding-top:44px; font:46px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#06ad43;}
.pro h2 a{ color:#06ad43;}
.pro h2 em{ display:block; font-size:22px; font-weight:normal; position:relative; color: #333;}
.pro h2 em:before{ content:""; position:absolute; top:30%; left:0; width:402px; height:13px; background:url(../img/line1.png) no-repeat right center;}
.pro h2 em:after{content:""; position:absolute; top:30%; right:0; width:402px; height:13px; background:url(../img/line2.png) no-repeat left center;}
.fen{ width:100%; overflow:hidden; background:#fff; display: flex; justify-content: space-between;}
.fen h3{ height:127px; background:url(../img/pro_h.jpg) no-repeat center top; font:36px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#fff; float: left; width: 250px;}
.fen h3 a{ color:#fff; padding-top:30px; display:block;}
.fen h3 em{ display:block; font:14px "Microsoft Yahei"; margin-top:3px; opacity:0.6;}
.fen h4{ height:47px; border-top:1px solid #dbdcdc; border-bottom:1px solid #dbdcdc; font:18px "Microsoft Yahei"; font-weight:bold; line-height:47px;overflow:hidden; background:url(../img/pro_arr.png) no-repeat 200px center;}
.fen h4 a{ display:block; color:#06ad43; padding-left:33px;}
.fen ul{ margin:12px 0; float: left;}
.fen li{ font:15px "Microsoft Yahei"; height:32px; line-height:32px; overflow:hidden; }
.fen li a{ background:url(../img/pro_arr1.png) no-repeat left center; padding-left:20px;}
.fen li a:hover{ font-weight:bold; color:#06ad43;}
.fen p{ padding:20px 0 0 35px; background:#535353; font:20px Arial, Helvetica, sans-serif; color:#e8e8e8; float: right; width: 200px;line-height: 28px;}
.fen p em{ display:block; font:14px "Microsoft Yahei"; line-height:24px; color:#e8e8e8; background:url(../img/pro_lx.png) no-repeat left center; padding-left:36px; margin-bottom:8px;}

.pro1{ width:925px; height:673px; overflow:hidden;}
.pro2{width:925px; height:673px; position:relative; overflow:hidden;}
.pro1 dl{width:925px; height:673px;}
.pro1 dt{width:925px; height:520px; overflow:hidden; position:relative;}
.pro1 dt img{ display:block;width:925px; height:520px;}
.pro1 dt em{ display:block; background:url(../img/pro_hot.png) no-repeat; width:87px; height:80px; position:absolute; top:0; right:0;}
.pro1 dd{ height:153px; background:#06ad43; overflow:hidden;}
.pro1 dd h4 a{ display:block; font:18px "Microsoft Yahei"; font-weight:bold; color:#fff; padding:24px 0 0 45px;}
.pro1 dd p{ margin:5px 45px; padding-bottom:10px; font:14px "Microsoft Yahei"; color:#bac7e5; border-bottom:1px dashed #06ad43;}
.pro1 dd h5{ font:14px "Microsoft Yahei"; font-weight:bold; color:#fff; margin:15px 0 0 45px;}
.pro1 dd h5 a{ display:inline-block; font:14px "Microsoft Yahei"; color:#fff; margin:0 22px 0 8px; padding-left:16px; position:relative;}
.pro1 dd h5 a:before{ content:""; position:absolute; top:7px; left:0; width:5px; height:5px; border-radius:5px; border:1px solid #94a8d7;}
.pro1 dd h5 a:hover{ font-weight:bold; text-decoration:underline;}
.pro21{ position:absolute; bottom:190px; left:172px;}
.pro21 p{ width:145px; float:left; text-align:center; font:20px "Microsoft Yahei"; color:#333; position:relative;}
.pro21 p:before{ content:""; position:absolute; top:5px; right:0; width:1px; height:64px; background:#d4d4d5;}
.pro21 p:last-child:before{ background:none;}
.pro21 p i{ display:block; width:36px; height:36px; margin:0 auto 5px;}
.pro21 p i img{display:block; width:36px; height:36px;}
.pro21 p span{}
.pro21 p span em{}
.pro21 p span b{ color:#06ad43;}

.pro3{ position:relative; margin: 30px 0px 40px;}
.pro3 h3{ height:75px; font:22px "Microsoft Yahei"; font-weight:bold; line-height:85px; background:url(../img/pro_hot2.png) no-repeat left center; padding-left:42px; margin-bottom:}
.pro3 h3 a{ color:#333;}
.pro3 h3 em{ display:block; width:118px; height:28px; border-radius:30px; font:14px "Microsoft Yahei"; text-align:center; line-height:28px; background:#06ad43; color:#fff; float:right; margin-top:38px;}
.pro3 li{ float:left; margin:10px 16px 10px; box-shadow:0.1rem 0.1rem 1rem 0.1rem #f3f2f2;}
.pro3 li img{ display:block; width:276px; height:220px; padding:0px;}
.pro3 li em{ display:block; font:16px "Microsoft Yahei"; text-align:center; height:50px; line-height:50px; overflow:hidden;}
.pro3 li a:hover em{ color:#fff; background:#06ad43;}
.pro4{ overflow:hidden; margin: 0 -16px;}
.pro_l{ width:37px; height:37px; position:absolute; top:120px; left:-65px;}
.pro_r{width:37px; height:37px; position:absolute; top:120px; right:-65px;}

.ys{ height:auto;}

.ys1{ background:url(../img/ys_bg1.jpg) no-repeat center top; height:662px; overflow:hidden;}
.ys1 h2{ height:186px;font:46px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#06ad43; padding-top:72px;}
.ys1 h2 em{ display:block; font:22px "Microsoft Yahei"; color:#333; position:relative; margin-top:10px;}
.ys1 h2 em:before{ content:""; position:absolute; top:30%; left:0; width:332px; height:13px; background:url(../img/line1.png) no-repeat right center;}
.ys1 h2 em:after{content:""; position:absolute; top:30%; right:0; width:332px; height:13px; background:url(../img/line2.png) no-repeat left center;}
.ys1 dl{ height:340px;}
.ys1 dt{ width:800px; height:340px;overflow:hidden;}
.ys1 dt img{ display:block;width:800px; height:340px;}
.ys1 dd,.ys2 dd{ width:345px; position:relative;}
.ys1 dd h3,.ys2 dd h3{ font:32px "Microsoft Yahei"; color:#000; margin-bottom:30px;}
.ys1 dd h3 b,.ys2 dd h3 b{ display:block; font:108px "Times New Roman", Times, serif; color:#e5e5e5; height:78px; font-style:italic;}
.ys1 dd h3 em,.ys2 dd h3 em{ font-weight:bold; color:#06ad43;}
.ys1 dd h3 i,.ys2 dd h3 i{ display:block; font:20px "Microsoft Yahei"; margin-top:4px;}
.ys1 dd p,.ys2 dd p{ font:14px "Microsoft Yahei"; line-height:24px; color:#666; padding-right:50px; margin-bottom:7px;}
.ys1 dd p b,.ys2 dd p b{ color:#ff5c01;}
.ys1 dd:before,.ys2 dd:before{content:""; position:absolute; top:190px; left:315px; width:160px; height:6px; background:#06ad43;}
.ys2{ background:url(../img/ys_bg2.jpg) no-repeat center top; overflow:hidden; height:540px;}
.ys2 dt{ width:1160px; height:480px; margin-right:-360px;}
.ys2 dt img{ display:block; width:1160px; height:480px;}
.ys2 dd{ margin-top:88px; width:375px;}
.ys2 dd:before,.ys4 dd:before{ left:375px;}
.ys3{ background:none; height:480px;}
.ys3 dt{width:1160px; height:480px; margin-left:-360px;}
.ys3 dt img{width:1160px; height:480px; display:block;}
.ys3 dd{ margin-top:90px;}
.ys4{ height:437px; background:url(../img/ys_bg4.jpg) no-repeat center top; padding-top:60px; overflow:hidden;}
.ys4 dd{ margin-top:30px; width:375px;}

.case{overflow:hidden; background:url(../img/case_bg.jpg) no-repeat center bottom; padding-bottom: 30px;}
.case h2{ height:147px; padding-top:32px; font:46px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#fff; background:url(../img/pro_bg.jpg) no-repeat center top;}
.case h2 a{ color:#fff;}
.case h2 em{ display:block; font-size:22px; font-weight:normal; position:relative;}
.case h2 em:before{ content:""; position:absolute; top:30%; left:50%; margin-left:-600px; width:260px; height:13px; background:url(../img/line3.png) no-repeat right center;}
.case h2 em:after{content:""; position:absolute; top:30%;left:50%; margin-left:340px; width:260px; height:13px; background:url(../img/line4.png) no-repeat left center;}
.case1{ width:1200px;box-shadow:0.1rem 0.1rem 1rem 0.1rem #e4e4e4; background:#fff; margin:50px auto 0; overflow: hidden;}
.caset{ height:125px; overflow:hidden;}
.caset h3{height:125px; float:left; font:18px "Microsoft Yahei"; font-weight:bold; line-height:125px; margin-left:30px;position:relative;}
.caset h3:before{content:"";position:absolute;top:37px; right:-15px; width:1px; height:50px; background:#d8d8d8;}
.caset h3:last-child:before{ background:none;} 
.caset h3 a{ display:block; height:50px; line-height:50px; padding-right:24px; margin-top:37px; color:#333;}
.caset h3 em{ display:block; width:40px; height:37px; float:left; overflow:hidden; margin:6px 6px 0 20px;}
.caset h3 em img{ display:block;}
.caset h3 a:hover,.caset .cur a{ background:#ff5c01; color:#fff;}
.caset h3 a:hover img,.caset .cur em img{ margin-top:-37px;}
.case2 dl{ height:405px; border-bottom:1px solid #ececec;}
.case2 dt{ width:695px; height:391px; float:left; overflow:hidden; margin-left:20px;}
.case2 dt img{ display:block; width:695px; height:391px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.case1 dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.case2 dd{ width:355px; float:right; margin-right:65px;}
.case2 dd h4{ height:68px; font:22px "Microsoft Yahei"; font-weight:bold; line-height:68px; overflow:hidden; position:relative;}
.case2 dd h4:before{ content:""; position:absolute; bottom:0; left:0; width:20px; height:3px; background:#153b96;}
.case2 dd h4 a{ display:block; color:#222;}
.case2 dd span{ display:block; width:123px; height:71px; background:url(../img/case_h.png) no-repeat; text-align:center; font:34px Arial, Helvetica, sans-serif; line-height:63px; color:#fff; position:absolute; top:14px; right:-9px;}
.case2 dd p{ font:14px "Microsoft Yahei"; line-height:26px; height:182px; overflow:hidden; margin:20px 0 45px;}
.case2 dd h5{ height:48px;}
.case2 dd h5 a{ display:block; width:170px; height:48px; background:#06ad43; font:14px "Microsoft Yahei"; line-height:48px; color:#fff; border-radius:3px; text-align:center; float:left;}
.case2 dd h5 a:last-child{ float:right;}
.case2 dd h5 a:hover{ background:#ff5c01;}

.case4{ width:1160px; margin:24px 20px; overflow:hidden;float: left;}
.case4 dl{ margin:0 13px; width:359px; height:388px; border:1px solid #dedede; float:left;box-sizing: border-box;}
.case4 dt{ width:359px; height:252px; overflow:hidden;}
.case4 dt img{display:block; width:359px; height:252px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s; }
.case4 dd{ padding:22px 22px 0 22px;}
.case4 dd h4 a{ display:block; font:20px "Microsoft Yahei"; color:#2e323a; margin-bottom: 20px;}
.case4 dd p{ font:14px "Microsoft Yahei"; line-height:26px; height:52px; overflow:hidden; margin:8px 0 12px;}
.case4 dd h5 a{display:block; width:32px; height:32px; border-radius:32px; background:#06ad43; font:20px "宋体"; text-align:center; line-height:32px; color:#fff;}
.case4 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.case4 dl:hover dd h5 a{ background:#ff5c01;}



/*新闻资讯*/
.new{ margin-top:50px; overflow:hidden; padding-bottom: 50px;}
.new h2{ height:125px;font:46px "Microsoft Yahei"; text-align:center; font-weight:bold; color:#06ad43;}
.new h2 a{ color:#06ad43;}
.new h2 em{ display:block; font:22px "Microsoft Yahei"; color:#333; position:relative; margin-top:10px;}
.new h2 em:before{ content:""; position:absolute; top:30%; left:0; width:402px; height:13px; background:url(../img/line1.png) no-repeat;}
.new h2 em:after{content:""; position:absolute; top:30%; right:0; width:402px; height:13px; background:url(../img/line2.png) no-repeat;}
.dy{ width:775px; overflow:hidden;}
.dyt{ height:70px; overflow:hidden; position:relative;}
.dyt h3{ font:20px "Microsoft Yahei"; line-height:70px; height:70px; float:left; margin-right:35px;}
.dyt h3 a{ color:#333; display:inline-block; background:url(../img/new_icon1.png) no-repeat left center; padding-left:30px;}
.dyt h5 a{ display:block; font:16px "Microsoft Yahei"; line-height:70px; position:absolute; top:0; right:0;}
.dyt h3 a:hover,.dyt .cur a{ font-weight:bold; color:#06ad43; background:url(../img/new_icon2.png) no-repeat left center;}
.dy1{ height:610px; overflow:hidden;}
.dy21{ height:200px; background:#f6f6f6; overflow:hidden; margin-bottom:8px; padding-left:35px;}
.dy21 dl{ width:341px; margin-right:20px; float:left;}
.dy21 dd em{ display:block; height:70px; border-bottom:1px solid #d9d9d9; font:24px Arial, Helvetica, sans-serif; font-weight:bold; color:#06ad43; line-height:70px;}
.dy21 dd h4 a{ display:block; font:16px "Microsoft Yahei"; color:#333; margin:20px 0 5px;}
.dy21 dd p{ font:14px "Microsoft Yahei"; line-height:24px; color:#787878;}
.dy21 dd p a{ color:#06ad43;}
.dy21 dt{ width:341px; height:191px; overflow:hidden; margin-top:20px;}
.dy21 dt img{ display:block;width:341px; height:191px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.dy2 ul{ height:150px; background:#f6f6f6; overflow:hidden; padding:15px 35px;}
.dy2 li{ font:14px "Microsoft Yahei"; height:36px; line-height:36px; overflow:hidden; background:url(../img/new_arr.png) no-repeat left center; padding-left:22px;}
.dy2 li a{ color:#5c5c5c;}
.dy2 li a:hover,.new1 li a:hover,.dy21 dl:hover dd h4 a{ font-weight:bold; color:#06ad43;}
.dy2 li em{ float:right; color:#bcbcbc;}

.new1{ width:390px; overflow:hidden;}
.new1 dl{ background:#f6f6f6; height:140px;overflow:hidden;}
.new1 dt{ width:301px; height:170px; margin:0 auto; overflow:hidden;}
.new1 dt img{ display:block;width:301px; height:170px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.new1 dl:hover dt img,.dy21 dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.new1 dd{ width:271px; height:111px; padding:20px 15px 0 15px; margin:0 auto; background: url(../img/new_line.gif) repeat-x center bottom;}
.new1 dd h4 a{ display:block; font:14px "Microsoft YaHei UI"; color:#777; margin-top:12px;}
.new1 dd p{ font:14px "Microsoft YaHei UI"; color:#777; margin-top:6px; line-height:24px;}
.new1 dd p a{ color:#06ad43;}
.new1 ul{ background:#f6f6f6; height:228px; padding:10px 37px 0; overflow:hidden;}
.new1 li{ font:14px "Microsoft YaHei UI"; line-height:36px; color:#777;}
.new1 li a{ display:block; color:#777; background:url(../img/new_arr.png) no-repeat left center; padding-left:20px;}

/*关于*/
.about{ height:596px; overflow:hidden; background:url(../img/about_bg.jpg) no-repeat center top;}
.about dl{ width:460px; height:430px; padding:0 70px; background:rgba(255,255,255,0.9); float:right; margin-top:90px;}
.about dt{ font:48px "Microsoft Yahei"; color:#333; position:relative; padding-left:30px; margin-top:44px;}
.about dt:before{ content:""; position:absolute; top:12px; left:0; width:4px; height:80px; background:#06ad43;}
.about dt a{ display:block; color:#333;}
.about dt b{ color:#06ad43;}
.about dt em{ display:block; font:20px "Microsoft Yahei"; margin-top:6px;}
.about dd p{ font:14px "Microsoft Yahei"; line-height:24px; color:#777; height:120px; margin:25px 0;}
.about dd span{ display:block; width:138px; height:35px; background:#06ad43; font:14px "Microsoft Yahei"; text-align:center; line-height:35px; position:relative;}
.about dd span a{ display:block; color:#fff;}
.about dd span:before{ content:""; position:absolute; bottom:0; left:50%; margin-left:-6px; width:0; height:0; border-bottom:6px solid #fff; border-left:6px solid rgba(0,0,0,0); border-right:6px solid rgba(0,0,0,0);}

.xc{height:345px; width:1200px; margin:35px auto 0; font-family: "Microsoft YaHei";}
.pict{ height:66px; overflow: hidden; padding:0 0 0 330px; position:relative;}
.pict:before{ content:""; position:absolute; top:30%; left:30px; width:292px; height:1px; background:#d8d8d8;}
.pict:after{ content:""; position:absolute; top:30%; right:30px; width:292px; height:1px; background:#d8d8d8;}
.pict li{  font-size: 16px;position: relative; float: left; width:170px; height:66px;text-align:center;}
.pict li:before{ content:""; position:absolute; top:2px; right:0; width:1px; height:36px; background:#dfdfdf;}
.pict li:last-child:before{ background:none;}
.pict li a{ display:block; color:#555;}
.pict li em{ display:block; font:12px "Microsoft Yahei"; color:#d3d3d3; margin-top:4px;}
.pict li a:hover ,.pict li.cur a,.new1 dl:hover dd h4 a{ color:#06ad43; font-weight:bold;}
.pict li a:hover em,.pict .cur em{ text-decoration:none;}

.pic2{position: relative; height:345px;}
.xcimg{width:1140px; margin: 0 auto; overflow:hidden;}
.xcimg li{ width:270px; float: left; margin:0 20px 0 0; line-height: 0; position: relative;}
.xcimg li img{ display:block; width:270px; height:auto;}
.xcimg li p{ height:50px; font:16px "Microsoft Yahei"; line-height:50px; color:#858585; overflow:hidden; text-align:center;}
.xcimg li:hover p{ font-weight:bold; color:#06ad43;}
.xcprev{position: absolute; top: 80px;left: 0; width:12px; height:19px;}
.xcnext{position: absolute; top: 80px;right: 0; width:12px; height:19px;}

.link{width:1200px; margin: 0 auto; position: relative;}
.link .content{position: absolute; top: -48px;right: 0; height:30px;}
.link p{ width:1200px;overflow: hidden; font:14px "Microsoft YaHei";line-height:30px; text-align:center; color:#757575;}
.link p a{ display: inline-block;padding:0 14px 0 15px; font:14px "Microsoft YaHei"; line-height:30px; height:30px; position:relative; color:#757575;}
.link p a:hover{font-weight:bold; color:#fff;}
.link p a:last-child{ padding-right:0;}


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