﻿
/* CSS Document */
/*common*/
.mb10 { margin-bottom:10px;}
.ml10 { margin-left:10px;}
.bg { background:#FFF;}
em,i{ font-style:normal; }

body{min-width: 1200px; width: 100%;overflow-x: hidden;}
ul.alnum li.cur{color:#c61523;}

.yinz{ height:700px; padding-top:73px; overflow:hidden; background:#eae9f8;}
.yinz .content{ width:1280px; margin:0 auto;}
.yinz dl{ height:700px;}
.yinz dt{ width:683px; height:700px; float:left;position:relative;}
.yinz dt img{ display:block;width:683px; height:700px;}
.yinz dt p{ width:84px; height:84px; overflow:hidden; background:url(../image/yinz_01.png) no-repeat; position:absolute; top:170px; left:0;}
.yinz dt em{ display:block;width:227px; height:103px; overflow:hidden; background:url(../image/yinz_02.png) no-repeat; position:absolute; top:240px; left:0;}
.yinz dt i{ display:block;width:113px; height:113px; overflow:hidden; background:url(../image/yinz_03.png) no-repeat; position:absolute; top:510px; left:76px;}
.yinz dt b{ display:block;width:115px; height:103px; overflow:hidden; background:url(../image/yinz_04.png) no-repeat; position:absolute; top:257px; right:0;}
.yinz dd{ width:470px; float:right; margin:115px 60px 0 0;}
.yinz dd em{ display:block; font:16px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#c61523;}
.yinz dd h4{ font:48px "Microsoft Yahei"; line-height:56px; color:#c61523; margin:18px 0 45px;}
.yinz dd h4 i{ display:block;}
.yinz dd p{ font:16px "Microsoft Yahei"; line-height:36px; color:#c61523; text-indent:2rem;}
.yinz dd span{display:block;width:222px; height:60px; margin-top:40px; font:16px "Microsoft Yahei"; text-align:center; line-height:60px; color:#c61523;}
.yinz dd span a{ display:block; color:#c61523; border-radius:30px; border:3px solid #c61523;}
.yinz dd span:hover a{ color:#fff; border:3px solid #9620ae; background:#9620ae;-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;}


.hong{ height:890px;background:#fcfbfc; padding-top:65px; overflow:hidden;}
.hong .content{ width:1280px; margin:0 auto;}
.hongt{ width:684px; height:66px; margin:0 auto 43px; border:3px solid #cad3e7; border-radius:3rem; overflow:hidden;}
.hongt h3 a{ display:block; width:228px; height:66px; float:left; font:24px "Microsoft YaHei UI"; text-align:center; line-height:66px; color:#c61523;}
.hongt h3 a:hover,.hongt .cur a{ background:#9621ae; color:#fff;border-radius:3rem;}
.hong2{ height:690px; overflow:hidden;}
.hongren{ width:448px; height:690px; float:left; overflow:hidden;}
.hongren dl{width:448px; height:690px; overflow:hidden; position:relative;}
.hongren dt img{width:448px; height:690px; display:block; border-radius:42px;}
.hongren dd span{ display:block; width:115px; height:126px; padding-top:25px; background:url(../image/hong.png) no-repeat; position:absolute; top:0; left:0; font:44px Arial, Helvetica, sans-serif; text-align:center; color:#fff;    display: none;}
.hongren dd span em{ display:block; font:24px "Microsoft YaHei UI";}
.hongren dd h5{ width:270px; height:64px; overflow:hidden; position:absolute; bottom:0; left:30px; font:36px "Microsoft YaHei UI"; color:#fff;}
.hongren dd h5 em{background: #911ab0;display:inline-block;padding:0 10px; height:30px; border:1px solid #911ab0; font:14px "Microsoft YaHei UI"; text-align:center; line-height:30px; border-radius:20px; margin:0 5px 10px 0;}
.hongren1{ width:740px; height:690px; padding:0 30px; background:#fff; border-radius:30px; overflow:hidden; float:right; box-shadow:0.1rem 0.1rem 0.3rem 0.1rem #faf9fb;}
.hongren1 dl{ height:275px; border-bottom:1px solid #eee9f7; padding-top:48px; margin-bottom:38px;}
.hongren1 dt{ height:125px; overflow:hidden; font:20px "Microsoft YaHei UI"; color:#c61523; position:relative;}
.hongren1 dt a{ display:block; color:#c61523;}
.hongren1 dt em{ display:block; font:32px "Microsoft YaHei UI"; font-weight:bold;color:#c61523; margin-top:15px;}
.hongren1 dt b{ float:right; font:18px "Microsoft YaHei UI"; color:#c61523; background:url(../image/hong_arr.png) no-repeat right center; padding-right:26px; position:absolute; top:15px; right:0;}
.hongren1 dd{ height:100px;}
.hongren1 dd h3{ width:170px; float:left; border-right:1px solid #eee9f7; height:100px; font:14px "Microsoft YaHei UI"; line-height:24px; color:#c61523; padding-right:50px;}
.hongren1 dd h5{ width:464px; float:right;}
.hongren1 dd h5 span{ display:block; width:154px; float:left; font:14px "Microsoft YaHei UI"; color:#c61523;}
.hongren1 dd h5 span em{ display:block; font:18px "Microsoft YaHei UI"; margin-top:36px;}
.hongren1 dd h5 span:nth-child(1){ background:url(../image/hong_h.png) no-repeat 40px 2px;}
.hongren1 dd h5 span:nth-child(1) em{ font-size:32px; margin-top:25px;}
.hongren1 h4{ font:20px "Microsoft YaHei UI"; color:#c61523; margin-bottom:32px;}
.hongren1 li{ width:246px; float:left; margin-bottom:39px;}
.hongren1 li img{ display:block; width:85px; height:87px; border-radius:1rem; float:left;}
.hongren1 li span{ display:block; width:130px; float:left; margin:13px 0 0 15px; font:16px "Microsoft YaHei UI"; color:#c61523;}
.hongren1 li span em{ display:block; font-weight:bold; margin-top:8px;}
.hongren1 li:nth-child(6) img{ background:#8e18b3;}

@media (min-width: 1700px) and (max-width: 1920px) {
.hong{padding-top:115px;height:945px; }
.hongt{ margin:0 auto 83px; }
}


.ship{ background:#fff; height:690px; overflow:hidden; border-radius:30px;}
.ship h5{ width:350px; float:left; margin:78px 0 0 30px; font:32px "Microsoft YaHei UI"; color:#c61523; font-weight:bold; }
.ship h5 em{ display:block;}
.ship h5 p{ font:18px "Microsoft YaHei UI";color:#c61523; line-height:32px; margin:30px 0;}
.ship h5 i{ display:block; font:16px "Microsoft YaHei UI"; height:35px; margin:0 10px 10px 0; float:left; border:3px solid #eae9f8; line-height:35px; text-align:center; padding:0 16px; border-radius:20px;}
.ship h5 i:hover{ background:#eae9f8;}
.ship dl{ width:840px; float:right; margin:48px 30px 65px 0;}
.ship dt{ width:448px; height:311px; float:left; overflow:hidden; position:relative;}
.ship dt img{ display:block;width:448px; height:311px;border-radius:1rem;}
.ship dt span{ display:block; font:18px Arial, Helvetica, sans-serif; color:#fff; padding-bottom:67px; background:url(../image/video_v.png) no-repeat left bottom; position:absolute; bottom:22px; left:22px;}
.ship dd{ width:360px; float:right;}
.ship dd h3 a{ display:block; font:20px "Microsoft YaHei UI"; color:#c61523; line-height:28px; margin:26px 0 25px;}
.ship dd h4 a{ display:block; width:105px; height:28px; border:2px solid #c61523; border-radius:20px; font:16px "Microsoft YaHei UI"; text-align:center; line-height:28px; color:#c61523;}
.ship dd h4 a:hover,.ship li a:hover i{border:2px solid #9620ae; background:#9620ae; color:#fff;-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;}
.ship dd p{ height:135px; background:#f2f2fb; border-radius:15px; margin-top:30px;}
.ship dd p span{ display:block; padding:0 28px; float:left; font:14px "Microsoft YaHei UI"; color:#c61523; margin-top:23px; padding-top:20px;}
.ship dd p span:nth-child(1){ border-right:1px solid #d6daed;}
.ship dd p em{ display:block; font-size:24px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; margin-top:8px;}
.ship ul{ width:1280px; padding-top:65px; border-top:1px solid #e1e5f1;}
.ship li{ width:395px; float:left; margin-left:28px; height:133px; position:relative;}
.ship li img{ display:block; width:179px; height:133px; float:left; border-radius:1rem;}
.ship li em{ display:block; width:30px; height:30px; overflow:hidden; position:absolute; bottom:15px; left:15px; background:url(../image/video_v.png) no-repeat; background-size:100% 100%;}
.ship li p{ width:192px; float:left; margin-left:15px; font:16px "Microsoft YaHei UI"; color:#c61523;}
.ship li p span{ display:block;overflow:hidden; margin:16px 0 18px; font:14px "Microsoft YaHei UI"; border-bottom:1px solid #e1e5f1; padding-bottom:12px;}
.ship li p span b{ font-size:14px; padding-right:8px;}
.ship li i{display:block; width:105px; height:28px; border:2px solid #c61523; border-radius:20px; font:16px "Microsoft YaHei UI"; text-align:center; line-height:28px; color:#c61523;}


.fanw{ height:auto; background:#fcfbfc; overflow:hidden;width: 100%;max-width: 1920px;margin:0 auto;}
.fanw .tit1{ font-size:40px;}
.fanw .tit1 em {
    display: block;
    font-size: 22px;
    line-height: 40px;
    font-weight: normal;
}
.serv_c{width: 100%;height: 650px;overflow: hidden; margin-top:30px;}
.serv_c ul{width: 102%;height: 650px;}
.serv_c li{width:25%;float: left;position: relative;cursor:pointer;height: 650px;line-height:30px;font-size: 16px;}
.serv_c li:last-child{margin: 0;}
.serv_c li img{display: block;}
.mo{width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;background:rgba(0,0,0,0.5);}
.shu2 dd{font:48px "Microsoft YaHei"; text-align:center; color:#fff; padding:80% 0 0;}
.hav{width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;}
.bock{position: absolute;left:6%; top:66%;width:88%; height:10rem;text-align: center; background:#7a0ba2; border-radius:3rem;color: #fff;box-sizing: border-box; opacity:0;}
.bock dl{ padding:1rem 5% 0;}
.bock dt{ float:left; width:80%; font:1.5rem "Microsoft YaHei UI"; color:#fff; text-align:left; border-right:1px solid #af6cc6;}
.bock dt em{ display:block; font:1.125rem "Microsoft YaHei UI"; padding-top:15px;}
.bock dd a{ display:block; float:left; margin-left:5%; font:1.125rem "Microsoft YaHei"; color:#fff; margin-top:14px; float:left; text-align:left;}

@media (min-width: 1700px) and (max-width: 1920px) {
.serv_c,.serv_c ul,.serv_c li{ height:810px;}
.bock{width:80%; left:10%;height:10rem; top:66%;}	
.bock dl{ padding:2rem 5% 0;}
.bock dt{font:2.25rem "Microsoft YaHei UI";}
}

/* .ys{ height:740px; padding-top:60px; background:#ebeaf9;} */
.ys{ height:740px; padding-top:60px; background:#0f0f0f;}
.ys .content{ width:1280px; margin:0 auto; height:831px; position:relative;}
.yst{ height:90px; border-bottom:1px solid #bdc4e3;}
.yst h2{ width:180px; float:left; margin-top:10px; font:22px "Microsoft YaHei UI"; line-height:30px; color:#edcf97; margin-right:150px;}
.yst h2 em{ display:block;}
.yst h3{ float:left; height:93px; margin-right:62px; font:19px "Microsoft YaHei UI"; color:#edcf97; line-height:75px; position:relative; overflow:hidden;cursor:pointer;}
.yst h3:last-child{margin-right:0px;}
.yst h3:before{position: absolute;   content: ''; width:100%; height:6px; background:#edcf97; border-radius:10px; bottom: 0;left:0;
 -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);}
.yst h3:hover:before ,.yst h3.cur:before {
    -webkit-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);}
.ys1{ height:647px;}
.ys1 dl{ height:647px;}
.ys1 dt{width:833px; height:647px; float:right;position:relative;}
.ys1 dt img{width:833px; height:647px; display:block;}
.ys1 dd{ width:420px; float:left; margin-top:105px; font:30px "Microsoft YaHei UI"; color:#edcf97;}
.ys1 dd em{ display:block; font:20px "Microsoft YaHei UI"; margin-bottom:20px;}
.ys1 dd i{ display:block;}
.ys1 dd p{ font:18px "Microsoft YaHei UI"; line-height:30px; color:#edcf97; margin-top:20px;}
.ys_l{ background:url(../image/ys_l.png) no-repeat; width:57px; height:57px; overflow:hidden; position:relative; margin-top:-25px; float:left;}
.ys_r{ background:url(../image/ys_r.png) no-repeat; width:57px; height:57px; overflow:hidden; position:relative; margin-top:-25px; margin-left:8px; float:left;}
.ys_l:hover,.ys_r:hover{ background-position:0 -57px;}

.ys .ys_l{ background:url(../image/e08bfd7e41eb4af0b61954893c83ad61_2.png) no-repeat; width:57px; height:57px; overflow:hidden; position:relative; margin-top:-25px; float:left;}
.ys .ys_r{ background:url(../image/e08bfd7e41eb4af0b61954893c83ad61_4.png) no-repeat; width:57px; height:57px; overflow:hidden; position:relative; margin-top:-25px; margin-left:8px; float:left;}
.ys .ys_l:hover,.ys .ys_r:hover{ background-position:0 -57px;}


.guan1{ width:1280px; margin:92px auto 0; height:360px; overflow:hidden;}
.guan1 dd{ width:550px; float:left; margin-top:72px; font:42px "Microsoft YaHei UI"; color:#c61523;}
.guan1 dd i{ display:block; font:20px "Microsoft YaHei UI"; color:#72798a; background:url(../image/guan_arr.png) no-repeat left 3px; padding-left:40px; line-height:30px; margin-top:22px;}
.guan1 dd span{ display:block; font:24px "Microsoft YaHei UI"; width:263px; height:63px; line-height:63px; color:#220a2d;background:url(../image/guan_btn.png) no-repeat;margin-top:20px;}
.guan1 dd span a{display:block;color:#220a2d;padding-left:90px;}
.guan1 dt{ width:699px; height:297px; float:right;}
.guan1 dt img{ display:block; width:699px; height:297px;}

.case{ height:850px; overflow:hidden;}
.case .content{ width:1280px; margin:0 auto;}
.case1{ height:720px; margin-top:50px; position:relative;}
.case dl{ height:644px; overflow:hidden;}
.case dt{ width:878px; height:644px; float:left; background:url(../image/case_bg.jpg) no-repeat; overflow:hidden;}
.case dt p{ width:195px; float:left; padding:116px 0 0 60px;}
.case dt p span{ display:block; width:168px; height:96px; background:#fff; padding:20px 0 0 22px; font:14px "Microsoft YaHei UI"; color:#c61523; margin-bottom:12px; border-radius:12px;}
.case dt p span em{ display:block; font:28px Arial, Helvetica, sans-serif; margin-top:8px; font-weight:bold;}
.case dt img{ display:block; width:516px; height:508px; float:right; padding:53px 50px 0 0;}
.case dd{ float:right; width:350px; margin:45px 0 0 0;}
.case dd h3{ font:48px "Microsoft YaHei UI"; color:#c61523;}
.case dd h3 a{ display:block; color:#c61523;}
.case dd h3 em{ display:block; font:18px "Microsoft YaHei UI"; color:#72798a; margin-top:10px;}
.case dd .casedd{ margin:35px 10px 0 0;}
.case dd h4{ font:18px "Microsoft YaHei UI"; color:#c61523; margin-bottom:20px;}
.case dd p{font:18px "Microsoft YaHei UI"; color:#72798a; line-height:30px; margin-bottom:20px;}
.case_l{ position:absolute; bottom:125px; left:930px; z-index:2; width:60px; height:80px; overflow:hidden;background:url(../image/case_l.png) no-repeat center center;}
.case_r{ position:absolute; bottom:125px; left:1000px;z-index:2;width:60px; height:80px;overflow:hidden;background:url(../image/case_r.png) no-repeat center center;}

.lc{ height:855px; padding-top:65px; background:#181a1c; overflow:hidden;}
.lc .content{ width:1280px; margin:0 auto;}
.lc1{ height:630px; background:url(../image/lc_line.gif) repeat-x center 9px; margin-top:32px;}
.lc dl{ width:248px; background:#fff; border-radius:20px; margin:90px 10px 0 0; height:510px; float:left; position:relative;}
.lc dt{ font:28px "Microsoft YaHei UI"; text-align:center; color:#c61523; height:360px;}
.lc dt em{ display:block; width:84px; height:80px; margin:0 auto 8px;}
.lc dt em img{display:block; width:84px; height:80px;}
.lc dt b{ display:block; font:24px Arial, Helvetica, sans-serif; color:#c61523; background:url(../image/lc_dot.png) no-repeat center top; padding-top:38px; height:115px; overflow:hidden; margin-top:-90px; text-align:center;}
.lc dd p{ display:none; font:16px "Microsoft YaHei UI"; line-height:24px; color:#c61523; padding:0 15px;}
.lc dd em{ width:100%; position:absolute; bottom:0;}
.lc dd em img{ display:block; width:100%; border-radius:0 0 20px 20px;}
.lc dl:last-child{ margin-right:0;}
.lc dl:hover{ margin:85px 10px 0 0; height:520px;}
.lc dl:hover dt b{ margin-top:-85px;}
.lc dl:hover p{ display:block;}
.lc dl:hover dd em{ display:none;}
.lc dl:last-child:hover{margin:85px 0 0 0;}
.lc dl:hover dt em img{-webkit-animation:hvr-buzz-out 0.75s linear;animation:hvr-buzz-out 0.75s linear;}
.lc_btn{ display:block; font:24px "Microsoft YaHei UI"; width:263px; height:63px; line-height:63px; color:#220a2d;background:url(../image/guan_btn.png) no-repeat;margin:20px auto 0;}
.lc_btn a{display:block;color:#220a2d;padding-left:90px;}

.par{ background:url(../image/par_bg.jpg) no-repeat center top; height:910px; overflow:hidden;}
.par .tit1 a{ color:#fff; padding:64px 0 0; display:block;}
.par .tit1 em{ display:block; font:18px "Microsoft YaHei UI"; opacity:0.5; margin:20px 0 90px;}
.par .content{ width:1200px;}
.par ul{ height:520px; width:1200px;}
.par li{ width:300px; float:left; position:relative;}
.par li:before{ content:""; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,0.1);}
.par li:after{content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.1);}
.par li:nth-child(4n):before,.par li:nth-child(5):after,.par li:nth-child(6):after,.par li:nth-child(7):after,.par li:nth-child(8):after{ background:rgba(255,255,255,0.1);}
.par li img{ display:block; width:100%;}
.par h5 a{ display:block; width:120px; font:18px "Microsoft YaHei UI"; color:#fff; background:url(../image/par_arr.png) no-repeat right center; margin:0 auto;}


.wit{ height:545px; background:#ebeaf8; padding-top:60px; overflow:hidden;}
.wit1{ height:325px; margin-top:66px;}
.wit dl{ width:490px; height:280px; background:#fff; border-radius:30px; padding:0 40px; margin-bottom:50px;}
.wit dl:nth-child(2n-1){ float:left;}
.wit dl:nth-child(2n){ float:right;}
.wit dt{ height:120px; border-bottom:1px solid #d5daea; margin-bottom:25px;}
.wit dt em{ display:block; width:125px; height:125px; overflow:hidden; position:relative; margin-top:-50px; float:left;}
.wit dt em img{display:block; width:125px; height:125px; border-radius:125px;}
.wit dt span{ display:block; width:340px; float:left; margin:30px 0 0 20px; font:24px Arial, Helvetica, sans-serif; font-weight:bold; color:#c61523; position:relative;}
.wit dt span i{ display:block; font:18px "Microsoft YaHei UI"; line-height:30px;}
.wit dt b{ display:block; font:40px "宋体"; position:absolute; top:0; right:0;}
.wit dd{ font:18px "Microsoft YaHei UI"; line-height:28px; color:#72798a;}
.witt{ height:20px; text-align:center;}
.witt a{ display:inline-block; width:20px; height:20px; border-radius:20px; background:#fff; margin:0 10px;}
.witt .cur{ background:#7a0ba2;}

/*新闻资讯*/
.new{ height:910px; margin-top:90px;overflow:hidden;}
.newt{ height:46px; margin:60px 0 50px 200px;}
.newt h3{ font:18px "Microsoft YaHei UI"; line-height:46px; height:46px; float:left; margin:0 40px;}
.newt h3 a{ display:block; height:43px; border-bottom:3px solid #fff; color:#c61523;}
.newt .cur{ border-bottom:3px solid #c61523; font-weight:bold;}
.new1{ height:580px;}
.new1 dl{ width:564px;padding-right:70px; overflow:hidden; border-right:1px solid #e0e0e0; float:left;}
.new1 dt{ width:564px; height:423px; position:relative; overflow:hidden;}
.new1 dt img{width:564px; display:block;}
.new1 dt em{ display:block; width:138px; height:38px; font:16px "Microsoft YaHei UI"; border:2px solid #c61523; border-radius:2rem; text-align:center; line-height:38px; color:#fff; position:absolute; bottom:20px; left:17px; color:#fff; background:#c61523;}
.new1 dd h4 a{ display:block; font:18px "Microsoft YaHei UI"; color:#c61523; margin:32px 0 22px;}
.new1 dd p{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#72798a;}
.new1 dd span{ display:block; font:16px "Microsoft YaHei UI"; margin-top:26px; position:relative;}
.new1 dd span a{ display:block; color:#c61523; background:url(../image/new_arr.png) no-repeat left center; padding-left:44px;}
.new1 dd span:before{ content:""; position:absolute; top:5px; left:30px; width:1px; height:10px; background:#dadada;}
.new1 dl:hover dd h4 a,.new1 li a:hover{ font-weight:bold;}
.new1 ul{ width:480px; float:right; overflow:hidden;}
.new1 li{ font:18px "Microsoft YaHei UI"; color:#c61523; margin:10px 0 52px;}
.new1 li a{ display:block; color:#c61523;}
.new1 li em{ display:block; font:14px "Microsoft YaHei UI"; color:#72798a; margin:12px 0 36px;}
.new1 li i{ display:block; font:16px "Microsoft YaHei UI";color:#c61523;}
.new1 li a span{float:right;display:block;}


.tit1{ text-align:center; font:48px "Microsoft YaHei UI"; color:#c61523; letter-spacing:6px;}
.tit1 a{ color:#c61523;}

.link{ position:relative;/*margin-top:-113px; z-index:8;*/}
.link p{ width:1200px;overflow: hidden; font:14px "Microsoft YaHei";line-height:30px;padding-top:10px;}
.link p a{ display: inline-block; padding:0 25px 0 0; font:14px "Microsoft YaHei"; line-height:30px; height:30px; position:relative; color:#c61523;}
.link p a:last-child{ background:none;}
.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);
  }
}