.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{ overflow-x:hidden;}

.bantest {position: relative; min-width:1200px; max-width:1920px;width: 100%;overflow: hidden;}   
.bantest:before{ content:""; position:absolute; bottom:0; width:100%; height:82px; background:url(../images/banner_bg.png) no-repeat center bottom; z-index:5;}
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow{ display:none; width:0; height:0; background:none;}
.banner .slick-dots{ position:absolute; bottom:100px; height:30px;}
.banner .slick-dots li button:before{ content:""; position:absolute; width:10px; height:10px; border:2px solid #e50012; border-radius:10px;opacity:1;}
.banner .slick-dots .slick-active button:before{ background:#e50012;}
.banner .slick-prev{ display:none;background:url(../images/lefts.png) no-repeat;  width:42px;height:74px; position:absolute; top:42%; left:5%; z-index:99; margin-left:0; font-size:0; border:0;opacity:0.8;outline:none;}
.banner .slick-next{display:none;background:url(../images/rights.png) no-repeat; width:42px;height:74px; position:absolute; top:42%; right:5%;z-index:99; margin-right:0;font-size:0; border:0;opacity:0.8;outline:none;}
.banner .slick-prev:before,.banner .slick-next:before{color:rgba(0,0,0,0);}

.tit{ font:48px "Microsoft YaHei UI"; text-align:center; font-weight:bold; color:#252a30; overflow:hidden;}
.tit a{ display:block; color:#252a30;}
.tit em{ display:block; font:20px "Microsoft Yahei"; color:#666666; padding-top:6px;}

.yinz{ height:885px; padding-top:63px; background:#f3f3f3 url(../images/guide_bg.jpg) no-repeat center bottom; overflow:hidden;}
.yinz dl{ height:655px;}
.yinz dt{ width:543px; height:602px; float: right; margin-right:57px;}
.yinz dt img{ display:block;}
.yinz dd{ width:450px; float:left; margin:135px 0 0 78px;}
.yinz dd h3{ font:42px "Microsoft YaHei UI"; font-weight:bold; color:#2e3135;}
.yinz dd h3 em{ display:block; font:24px "Microsoft YaHei UI"; color:#2e3135; line-height:55px; margin-bottom:30px;}
.yinz dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#666;}
.yinz dd span{ display:block; width:225px; height:62px; background:url(../images/guide_btn.png) no-repeat center top; margin:130px 0 0 -78px; font:16px "Microsoft YaHei UI"; line-height:62px;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s;}
.yinz dd span a{ display:block; color:#fff; padding-left:70px;}
.yinz dd span:hover{transform: translateX(5px);}
.yinz1{ height:130px; overflow:hidden;}
.yinz1 li{ width:170px; padding-left:60px;float:left; font:18px "Microsoft Yahei"; color:#666; position:relative;}
.yinz1 li:before{ content:""; position:absolute; top:10px; right:0; width:1px; height:78px; background:#c4c4c4;}
.yinz1 li span{ display:block; font:64px Arial, Helvetica, sans-serif; color:#2e3135; font-weight:bold;}
.yinz1 li i{ font-size:16px; color:#fff; display:inline-block; width:25px; height:25px; border-radius:25px; text-align:center; line-height:25px; background:#2e3135; margin-right:2px;}
.yinz1 li:nth-child(1){ width:170px; padding-left:0;}
.yinz1 li:nth-child(4){ width:180px;}
.yinz1 li:nth-child(5){ width:260px; float:right; padding-left:0;}
.yinz1 li:nth-child(5):before{ background:none;}
.yinz1 li:hover{ font-weight:bold;}
.yinz1 li:hover span{ color:#e50012;}
.yinz1 li:hover span i{ background:#e50012;}

.fang{ height:1120px; padding-top:20px; overflow:hidden;}
.fangt{height:133px; margin-top:48px; overflow:hidden;}
.fangt h3{ width:120px; float:left; position:relative; font:18px "Microsoft YaHei UI"; text-align:center; color:#666666;}
.fangt h3:before{ content:""; position:absolute; top:2px; right:0; width:1px; height:82px; background:#ccc;}
.fangt h3:last-child:before{ background:none;}
.fangt h3 a{ display:block; color:#666666;}
.fangt h3 em{ display:block; width:52px; height:52px; margin:0 auto 10px; border-radius:52px; background:#d8d8d8;}
.fangt h3 em img{transition: .5s; width:100%;}
.fangt h3 a:hover{ font-weight:bold; color:#e50012;}
.fangt h3 a:hover em img{ margin-top:-52px;}
.fangt h3 a:hover em{ background:#e50012;}
.fang1 {width: 100%;min-width: 1200px;height: 710px;position: relative;}
.fang2{width: 1200px;position: absolute;left: 50%;margin-left: -600px;}
.fang1 .tempWrap{overflow: visible !important;}
.fang1 .tempWrap .fang3{margin-left: -1236px !important;}
.fang1 dl { position: relative; height:767px; float:left; margin:0 12px 40px !important; width:1200px; box-shadow:0.1rem 0.1rem 1rem #ccc;}
.fang1 dt{width:1200px; height:600px; overflow:hidden; position:relative;}
.fang1 dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.fang1 dt img{ display:block; width:1200px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.fang1 dt a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.fang1 dd{ position:relative; height:167px; background:url(../images/fang_icon.png) no-repeat right bottom; padding:0 120px 0 60px;}
.fang1 dd h3{ font:24px "Microsoft YaHei UI"; font-weight:bold; color:#333333; padding:28px 0 8px;}
.fang1 dd h3 a{ display:block; color:#333;}
.fang1 .fangdd{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#636262;}
.fang1 dd p{}
.fang1 .cur1 dt:before{ width:0; height:0;}
.prev2{width:50px;height: 50px;top:240px;z-index: 9;cursor: pointer;left: 50%;margin-left: 600px; background:url(../images/fang_left.png) no-repeat;}
.next2{width:50px;height: 50px;top:240px;z-index: 9;cursor: pointer;left: 50%;margin-left: 600px;background:url(../images/fang_right.png) no-repeat;}
.prev2{margin-left:-760px;}
.next2{margin-left:710px;}
.next2:hover,.prev2:hover{ background-position:0 -50px;}

.zhin{ height:890px; padding-top:72px; overflow:hidden; background:#f3f3f3 url(../images/zhin_bg.jpg) no-repeat center bottom;}
.zhin h3{ float:left; width:345px; margin:138px 0 0 0; overflow:hidden; font:30px "Microsoft YaHei UI"; color:#fff;}
.zhin h3 em{ display:block; font-weight:bold; font:32px "Microsoft YaHei UI"; font-weight:bold;}
.zhin h3 i{ display:block; font:12px "Microsoft YaHei UI"; color:#4e5055;}
.zhin h3 span{ display:block; margin-top:195px; font:16px "Microsoft YaHei UI"; background:url(../images/process_lx.png) no-repeat left top; padding-top:55px;}
.zhin h3 span b{ font-size:44px; display:block; font-family:Arial, Helvetica, sans-serif; margin-top:8px;}
.zhin2{ width:835px; margin-top:110px; float:right; overflow:hidden;}
.zhin dl{ width:404px; height:240px; background:#fff url(../images/zhin_icon.png) no-repeat right bottom; overflow:hidden; margin-bottom:24px; box-shadow:0.1rem 0.1rem 0.5rem #ccc;}
.zhin dl:nth-child(2n-1){ float:left;}
.zhin dl:nth-child(2n){ float:right;}
.zhin dt{ font:30px "Microsoft YaHei UI"; font-weight:bold; color:#333; font-weight:bold; padding:60px 0 0 50px;}
.zhin dd{ width:295px; padding:20px 0 0 50px; font:16px "Microsoft YaHei UI"; line-height:26px;}
.zhin dl:hover{ background:url(../images/zhin_bg.png) no-repeat center top; box-shadow:none;-webkit-transition:all 0.7s;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari 和 Chrome */
-o-transition-property:background;}
.zhin dl:hover dt,.zhin dl:hover dd{ color:#fff;}

.pro{ margin:40px 0 80px; position:relative;}
.pro:before{ content:""; position:absolute; top:128px; left:0; width:100%; height:1px; background:#cfcfcf;}
.prot{ width:1200px; margin:34px auto 0; height:103px;}
.prot h3{ width:171px; height:103px; float:left; font:18px "Microsoft YaHei UI"; line-height:103px; position:relative; text-align:center;}
.prot h3 a{ display:block; color:#333;}
.prot h3 a:hover,.prot .cur a{ font-weight:bold; color:#e50012; border-top:3px solid #e50012; box-sizing:border-box;}
.prot h3:before{ content:""; position:absolute; top:48px; right:0; width:6px; height:6px; border-radius:6px; background:#96989a;}
.prot h3:last-child:before{ background:none;}
.pro1{ min-width:1200px; max-width:1920px; width:100%; overflow:hidden;}
.pro1 li{ position:relative; overflow:hidden; float:left; width:25%; margin:0 0 0.3125rem 0; border-right:0.3125rem solid #fff; box-sizing:border-box;}
.pro1 li img{ display:block; width:100%;}
.pro1 li span{display:block;position: absolute;
 bottom: 0;
    height: 0;
    width: 100%;
    text-align: center;
    font: 18px "Microsoft YaHei UI";
    color: #fff;
    background: rgba(229,0,18,0.8);
    -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
    -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);}
.pro1 li span em{ display:block; width:60px; height:60px; background:url(../images/sheb_more.png) no-repeat; margin:23% auto 5%;}
.pro1 li:nth-child(1){ width:50%; float:right; overflow:hidden;}
.pro1 li a:hover span{ height:100%;}

.jic2{ min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin-top:60px;}
.jic dl{ width:19.635%; float:left; margin-right:0.42%; position:relative;}
.jic dt{ position:relative; overflow:hidden;}
.jic dt img{ display:block; width:100%; height:100%;}
.jic dt span{ display:block; width:100%;transition: .8s; position:absolute; bottom:0; font:40px "Microsoft YaHei UI"; text-align:center; font-weight:bold; color:#fff; padding:15% 0;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.73+99 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.73) 99%, rgba(0,0,0,0.73) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.73) 99%,rgba(0,0,0,0.73) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.73) 99%,rgba(0,0,0,0.73) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#ba000000',GradientType=0 ); /* IE6-9 */}
.jic dt span em{ display:block; font:24px "Microsoft YaHei UI";}
.jic dd{ background:url(../images/jic_png.png) no-repeat center top; background-size:100% 100%; width:100%; height:100%; position:absolute; top:0;transform: scale(0); transition: 1.2s;}
.jic dd span{ display:block; font:44px "Microsoft YaHei UI"; font-weight:bold; text-align:center; padding:19% 0 4%; color:#fff; position:relative;}
.jic dd span:before{ content:""; position:absolute; bottom:0; left:50%; width:1.5rem; height:1px; margin-left:-0.75rem; background:rgba(255,255,255,0.5);}
.jic dd span em{ display:block; font:32px "Microsoft YaHei UI";}
.jic dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; color:#fff; padding:4% 12% 10%; text-align:center;}
.jic dd i{ display:block; width:225px; height:62px; background:url(../images/guide_btn.png) no-repeat center top; margin:0 auto; font:16px "Microsoft YaHei UI"; line-height:62px;}
.jic dd i a{ display:block; color:#fff; padding-left:70px;}
.jic2 dl:nth-child(4),.jic2 dl:nth-child(5){ margin-right:0;}
.jic2 dl:nth-child(5){ float:right;}
.jic2 dl:hover dt span{ opacity:0;}
.jic2 dl:hover dd{transform: scale(1);}

@media screen and (max-width: 1679px) {
.jic dd span{ font-size:38px;}
.jic dd span em{ font-size:28px;}
.jic dd p{ font-size:12px; padding:4% 8% 8%;}
}

.super{ height:1010px; padding-top:110px; background:#f3f3f3 url(../images/ys_bg.jpg) no-repeat center bottom; overflow:hidden;}
.super .content{ position:relative;}
.super1{ margin-top:45px;}
.super1 dt{ position:relative; width:1200px; overflow:hidden;}
.super1 dt img{ display:block;}
.super1 dt:before{content: '';
            cursor: pointer;
            position: absolute;
            left: -100%;
            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);}
.super1 dt:hover:before{
            left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;
        }
.super1 dd{ width:470px; height:385px; background:#fff; position:relative; margin-top:-270px; z-index:2;}
.super1 dd h3{ width:420px; padding:32px 0 10px;}
.super1 dd h3 em{ display:block; float:left; width:70px; height:66px; margin:10px 10px 0 0;}
.super1 dd h3 em img{ display:block;}
.super1 dd h3 span{ font:48px "Microsoft YaHei UI"; font-weight:bold; color:#e50012;}
.super1 dd h3 span i{ display:block; font:14px "Microsoft YaHei UI"; color:#999;}
.super1 dd h4{ border-bottom:1px solid #ccc; padding-bottom:20px; font:20px "Microsoft YaHei UI"; font-weight:bold; color:#333; width:420px;}
.super1 dd p{ font:14px "Microsoft YaHei UI"; line-height:26px; margin-top:25px; width:420px;}
.supert{ width:760px; height:131px; position:absolute; z-index:5; top:720px; right:-50px;}
.supert h3{ width:190px; float:left; font:24px "Microsoft YaHei UI"; text-align:center; color:#333; height:131px;}
.supert h3 span{ display:block; padding-top:30px; width:50px; height:50px; margin:0 auto 6px; overflow:hidden;}
.supert h3 span em{ display:block;}
.supert h3 img{ display:block; width:100%;}
.supert h3:hover,.supert .cur{ background:url(../images/ys_hover.png) no-repeat center top; color:#fff;}
.supert h3:hover span em,.supert .cur span em{ display:none;}

.coop{ height:931px; overflow:hidden; background:url(../images/coop.jpg) no-repeat center top;}

.process{ background:url(../images/process_bg.jpg) no-repeat center top; height:793px; overflow:hidden; padding-top:150px;}
.process .tit,.process .tit em{ color:#fff;}
.process1{ margin-top:48px; position:relative; height:440px;}
.process dl{ width:160px; position:absolute;}
.process dt{ font:20px "Microsoft YaHei UI"; color:#fff;}
.process dd{ font:14px "Microsoft YaHei UI"; color:#bebfc0; line-height:22px; margin-top:8px;}
.process .dl1{ top:44px;}
.process .dl2{ top:202px; left:217px;}
.process .dl3{ top:26px; left:285px; width:180px;}
.process .dl4{ top:260px; left:487px;}
.process .dl5{ top:35px; left:684px;}
.process .dl6{ top:206px; left:733px; width:150px;}
.process .dl7{ top:291px; right:70px; width:196px;}
.process .dl8{ top:63px; right:0;}
.process dl:hover{transform: translateY(-10px);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.process h5{ width:410px; margin:0 auto; font:16px "Microsoft YaHei UI"; color:#fff; background:url(../images/process_lx.png) no-repeat left 20px; padding-left:48px; height:60px;}
.process h5 em{ font:40px "Microsoft YaHei UI";}


.news{ height:978px; background:url(../images/new_bg.jpg) no-repeat center 141px;overflow:hidden;}
.news .tit{ height:141px;}
.tit2{ height:125px; border-bottom:2px solid #2e3135; overflow:hidden;}
.tit2 a{ display:block; margin-top:40px; background:url(../images/new_more.png) no-repeat right 32px; height:80px;}
.tit2 b{ display:block; width:70px; float:left; height:51px; position:relative; margin:7px 20px 0 0;}
.tit2 b:before{ content:""; position:absolute; top:0; right:0; width:2px; height:50px; background:#c0c1c2;}
.tit2 span{ font:18px "Microsoft YaHei UI"; color:#2e3135;}
.tit2 span em{ display:block; font:30px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:capitalize;}
.new{ width:440px; height:730px; overflow:hidden;}
.new li{ height:149px; border-bottom:2px solid #2e3135;}
.new li span{ display:block; width:85px; height:85px; border-radius:85px; background:#ccc; text-align:center; font:22px Arial, Helvetica, sans-serif; color:#2e3135; padding-top:12px; margin:31px 0 0 0; box-sizing:border-box; float:left;}
.new li span em{ display:block; line-height:40px; position:relative;}
.new li span em:before{ content:""; position:absolute; top:0.2rem; left:50%; width:2rem; height:2px; background:#2e3135; margin-left:-0.9rem;}
.new li p{ width:325px; float:right; margin-top:40px; font:16px "Microsoft YaHei UI"; color:2e3135;}
.new li p i{ display:block; font:14px "Microsoft YaHei UI"; color:#999999; background:url(../images/new_arr.png) no-repeat 70px center; line-height:50px;}
.new li:hover span{ background:#e50012; color:#fff;}
.new li:hover span em:before{ background:#fff;}
.new li:hover p{ color:#e50012; font-weight:bold;}

.faq{ width:590px; margin-right:28px; overflow:hidden;}
.faq dl{ height:58px; border-bottom:1px dashed #cbcbcc;}
.faq dt{ font:14px "Microsoft YaHei UI"; line-height:58px; overflow:hidden; padding-left:22px; position:relative;}
.faq dt:before{ content:""; position:absolute; top:24px; left:0; width:5px; height:5px; border-radius:5px; border:2px solid #2e3135;}
.faq dt a{ display:block;}
.faq dt em{ float:right; font-size:12px;}
.faq dd{ display:none;}
.faq dd h4{ width:274px; height:206px; float:left; overflow:hidden;}
.faq dd h4 img{ display:block; width:274px; height:206px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.faq dd h4:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.faq dd h3{ width:265px; float:right; font:16px "Microsoft YaHei UI"; font-weight:bold; color:#2e3135;}
.faq dd h3 a{ display:block; color:#2e3135;}
.faq dd h3 em{ display:block; font:12px Arial, Helvetica, sans-serif; color:#000; background:url(../images/faq_icon2.png) no-repeat left center; padding-left:25px; line-height:50px;}
.faq dd p{ width:265px; float:right; font:14px "Microsoft YaHei UI"; line-height:22px; margin:15px 0;}
.faq dd span a{ display:block; width:265px; float:right; font:14px "Microsoft YaHei UI"; color:#2e3135; background:url(../images/faq_arr.png) no-repeat 70px center;}
.faq dl.cur{ height:206px; padding:26px 0; border-bottom:2px solid #2e3135; overflow:hidden;}
.faq dl.cur dt{ display:none;}
.faq dl.cur dd{ display:block;}
.faq h5{ height:60px; margin:42px 0 0 135px; background:url(../images/process_lx.png) no-repeat left 10px; padding-left:40px; font:16px "Microsoft YaHei UI"; color:#fff;}
.faq h5 em{ font:36px Arial, Helvetica, sans-serif;}

.about{ height:674px; background:url(../images/about_bg.jpg) no-repeat center top; padding-top:150px; overflow:hidden;}
.about .tit{ text-align:left; height:145px;}
.about dd{ width:430px; font:16px "Microsoft YaHei UI"; line-height:26px; margin-bottom:20px;}
.about dt{display:block; width:225px; height:62px; background:url(../images/guide_btn.png) no-repeat center top; font:16px "Microsoft YaHei UI"; line-height:62px; margin-top:75px;-webkit-transition: .3s;-moz-transition: .3s;transition: .3s}
.about dt a{ display:block; color:#fff; padding-left:70px;}
.about dt:hover{transform: translateX(5px);}

.pic{}
.pic1{ height:97px; background:url(../images/pic_bg.png) no-repeat center top; position:relative; margin-top:-48px; z-index:5;}
.pic1 p{ width:399px; height:97px; float:left;}
.pic1 p:nth-child(2){ border-left:1px solid #4d5053; border-right:1px solid #4d5053;}
.pic1 p img{ display:block; width:50px; float:left; margin:24px 20px 0 100px;}
.pic1 p span{ display:block; float:left; font:20px "Microsoft YaHei UI"; color:#fff; margin-top:30px; padding-left:20px; position:relative;}
.pic1 p span:before{ content:""; position:absolute; top:2px; left:0; width:2px; height:40px; background:#585a5d;}
.pic1 p span em{ display:block; font:14px "Microsoft YaHei UI"; color:#acadae;}
.pic1 p:hover span{ font-weight:bold; color:#e50012;}

.pic2{ height:318px; margin-top:24px; position:relative;}
.pic2 li{ width:286px; float:left; margin-right:19px;}
.pic2 li img{ display:block; width:286px; height:215px;}
.pic2 li em{ display:block; text-align:center; font:16px "Microsoft YaHei UI"; line-height:52px; overflow:hidden; height:52px;}
.pic2 li:hover img{ display:block; border:4px solid #e50012; box-sizing:border-box;}
.pic2 li:hover em{ color:#e50012;}
.pic3{ overflow:hidden;}
.pic_l{ background:url(../images/pic_left.png) no-repeat; width:49px; height:49px; overflow:hidden; position:absolute; top:80px; left:-70px;}
.pic_r{ background:url(../images/pic_right.png) no-repeat; width:49px; height:49px; overflow:hidden; position:absolute; top:80px; right:-70px;}
.pic_l:hover,.pic_r:hover{ background-position:0 -49px;}

.link{ background:#e50012; height:70px;}
.link h3{ font:20px "Microsoft YaHei UI"; color:#fff; width:100px; float:left; line-height:70px;}
.link p{ width:1080px; float:right;}
.link p a{ display:block; float:left; font:14px "Microsoft YaHei UI"; line-height:70px; color:#fff; padding:0 20px;}
.link p a:hover{font-weight:bold; text-decoration:underline;}



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