@charset "utf-8";
html{color:#000;background:#FFF; }
body { color:#666;font:12px/1.231 "Microsoft Yahei";} /*网站字体颜色*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;} 
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; }
input,button,textarea,select{*font-size:100%;}
input,select{vertical-align:middle;}
i,em{ font-style:normal;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%; border-collapse:collapse;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}

.mt10{ margin-top:10px;}

a { color:#666; text-decoration:none;}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
.vam { vertical-align:middle;}
.clear{ clear:both; height:0; line-height:0; font-size:0;}
.clearfix:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.clearfix{*zoom:1}
p{ word-spacing:-1.5px;}
.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
/* -- 购物车外部框架 -- */
.cart_header , .cart_content , .cart_footer { width:760px; margin:0 auto;}

/* -- 页面整体布局 -- */
.header , .content , .footer { width:1200px; margin:0 auto;  }
.h_nav li a:-webkit-any-link{ display:block;}






/* -- 以上部分以前resetcommon -- */



/* -- 首页样式开始 -- */
.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{min-width: 1200px;max-width: 1920px;margin: 0 auto;overflow-x: hidden; width: 100%;}

.bantest {position: relative;width: 100%;overflow: hidden;}  
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow {position: absolute;font-size: 0;top: 50%;z-index: 9; width:73px; height: 73px; margin-top: -73px;border: 0; outline: none;overflow:hidden;}
.banner .slick-prev {left: 10%; display: none; background:url(../images/fang_l.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/fang_r.png) no-repeat;}   
.slick-dots { position: absolute;left: 50%; font-size:0; bottom: 8%;width: 300px;text-align: center;margin-left: -175px;z-index: 11;}
.slick-dots li {display: inline-block;margin: 0 8px; }
.slick-dots li button {display: block;background: #ba0000;width: 15px;height: 15px;color: #1352ba; border-radius: 10px;border-color:#ba0000; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.slick-dots .slick-active button {background-color: #ba0000;border-color: #e60013;width: 60px;} 

.tit{text-align: center;color: #2e2f2f;font-size:48px;line-height:62px;font-family: "Microsoft Yahei";clear: both;display: block;white-space: nowrap;padding: 0 0 35px; font-weight:bold;}
.tit em{ display: block;font-size:24px;line-height:34px;font-weight: normal; color:#666;}
.tit a{color: #2e2f2f;}

.guide{/* height:600px; */ padding-top:65px; overflow:hidden;}
.guide dl{ height:385px; overflow:hidden;}
.guide dt{ width:524px; height:351px; float:left; overflow:hidden; position:relative;}
/*.guide dt em{ display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0;}*/
.guide dt img{ display:block;width:524px; height:351px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.guide dt:hover img,.pro1 img:hover{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
/*.guide dt:before{ content:""; position:absolute; top:145px; left:232px; background:url(../images/guide_v.png) no-repeat; width:57px; height:57px; z-index:1;}*/
.guide dd{ width:618px; float:right;}
.guide dd h3{ position:relative; font:40px "Microsoft YaHei UI"; color:#2e2f2f;}
.guide dd h3 em{ display:block; font:14px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#ba0000; letter-spacing:5px; padding:25px 0 10px; position:relative; margin-bottom:14px;}
.guide dd h3 b{ display:block; font:22px "Microsoft YaHei UI"; color:#666; margin:14px 0 23px;}
.guide dd h3 em:before{ content:""; position:absolute; bottom:0; left:-68px; width:170px; height:1px; background:#333;}
.guide dd p{ font:16px "Microsoft YaHei UI"; line-height:28px; color:#666666; margin-bottom:32px;}
.guide dd span{ display:block; width:195px; height:48px; font:20px "Microsoft YaHei UI"; background:#ba0000 url(../images/guide_arr.png) no-repeat 134px center; line-height:48px;}
.guide dd span a{ display:block; color:#fff; padding-left:30px;}

.guide ul{ height:152px;}
.guide li{float:left; position:relative; font:18px "Microsoft YaHei UI"; color:#666666;padding:30px 0 0 100px; width:220px;}
.guide li:before{ content:""; position:absolute; top:44px; right:0; width:1px; height:74px; background:#e0e0e0;}
.guide li:last-child:before{ background:none;}
.guide li:last-child{ float:right; width:130px; padding-left:0;}
.guide li:nth-child(2){ width:350px;}
.guide li:nth-child(1){ padding-left:0; width:190px;}
.guide li span{ display:block; font:24px "Microsoft YaHei UI"; color:#666;}
.guide li span b{ font-size:60px;}
.guide li:hover span{ color:#ba0000;}

/*为什么*/
.chara{clear: both;font-family:"Microsoft Yahei";line-height:24px;font-size: 14px;padding:86px 0;position: relative;background:url(../images/why_bg.jpg) no-repeat center 0;color: #666;}
.chara_p{width: 100%;left: 0;top: 168px;z-index: 1;}
.chara_p,.chara_p img{width: 100%;display: block;}
.chara_c{padding:30px 0 0; position:relative;}
.chara_c li{width: 33%;height: 210px;border-left: 2px solid #adadad;float: left;box-sizing:border-box;padding-left:20px;}
.chara_c li span{font-size: 18px;color: #333;display: block;line-height: 38px;white-space: nowrap; }
.chara_c li span b{font-size: 30px;color: #ba0000;display: block;line-height: 32px;margin-bottom:20px;}
.chara_c li p{width: 258px; font-size:16px;}
.chara_l1{height: 443px;}
.chara_l2{height: 223px;}
.chara_l1 li:nth-child(1),.chara_l1 li:nth-child(3),.chara_l2 li:nth-child(3){width: 24.3%;}
.chara_l1 li:nth-child(1){margin-left: 7.66%;}
.chara_l2 li:nth-child(1){margin:14px 0 0 14.84%;}
.chara_l2 li:nth-child(2){width: 27.2%;}
.chara_l2 li:nth-child(3){margin-top: 20px;}
.chara_l2 li{padding-top: 58px;}
@media screen and (max-width: 1680px) {
    .chara_l1{height: 400px;}
}
@media screen and (max-width: 1580px) {
    .chara_l1{height: 366px;}
}
@media screen and (max-width: 1440px) {
    .chara_l1{height: 356px;}
}


/*方案*/
.casebj{ height:780px;padding-top:80px; overflow: hidden; font-family:"Microsoft Yahei";position: relative; }
.cases .content{ position:relative;}
.cases1{ width:792px; float:left; overflow:hidden;}
.cases1 dt{margin-bottom: 20px;width:792px; height:445px;overflow: hidden;}
.cases1 dt img{ display:block; width:792px; height:auto;transition: all 0.3s linear 0s;}
.cases1 dd{ border-bottom:1px solid #ccc; padding-bottom:18px;}
.cases1 dd h3 a{display: block; font:18px "Microsoft YaHei"; font-weight:bold; color:#ba0000; line-height: 44px;}
.cases1 dd p{ font:16px "Microsoft YaHei"; line-height:22px; color:#666666;}
.cases1:hover dt img{transform: scale(1.1);}

.casest{ width:359px; float:right; height:439px; position:relative; border-top:3px solid #5f5f5f;border-bottom:3px solid #5f5f5f;}
.casest h5{width:359px; overflow:hidden; font:16px "Microsoft YaHei"; color:#323233; line-height:30px;height:128px; font-weight:bold;padding-top:20px;}
.casest h5 em{ display:block;font:42px Arial; font-weight:bold; color:#00368f;}
.casest2{ position:absolute; top:9px; right:0; z-index:2; height:440px; width:420px; overflow:hidden;}
.casest li{ width:420px; height:139px;overflow:hidden; position:relative;}
.casest li:before{ content:""; position:absolute; bottom:0; right:0; width:359px; height:1px; background:#eee;}
.casest li:nth-child(3n):before{ background:none;}
.casest li em{ display:block; width:30px; height:30px; background:#323233; border-radius:30px; color:#fff; font:16px Arial; line-height:30px; overflow:hidden; text-align:center; margin:40px 20px 0 60px; float:left;}
.casest li span{ display:block; float:left; width:190px; font:20px "Microsoft YaHei"; font-weight:bold; color:#333333; margin-top:38px;}
.casest li span i{ display:block; font:14px Arial; color:#666666; font-weight:normal;padding-top:3px;}
.casest li b{ display:block; width:110px; height:60px; float:left; margin-top:40px;}
.casest li b img{display:block; width:110px; height:60px;}
.casest li:hover,.casest .on{ background:#ba0000;}
.casest li:hover:before,.casest .on:before{ background:none;}
.casest li:hover em,.casest .on em{ background:#f8e6e6;color:#ba0000;}
.casest li:hover span,.casest .on span{ color:#fff;}
.casest li:hover span i,.casest .on span i{color:#fff;}

.arr1{ font:16px "Microsoft YaHei"; width:115px; height:100px;  text-align:center;background:url(../images/cases_r.png) no-repeat right center;color:#444; font-weight:bold; position:absolute; top:470px; left:0;cursor: pointer;}
.arr2{font:16px "Microsoft YaHei"; width:115px;height:100px; text-align:center;background:url(../images/cases_l.png) no-repeat left center; color:#444; font-weight:bold; position:absolute; top:470px; right:0;cursor: pointer;}
.arr1 em,.arr2 em{ display:block; font:16px "Microsoft YaHei"; font-weight: bold; color:#444444;height:100px; line-height: 100px;}
.arr1.prevStop,.arr2.nextStop{ color:#ba0000;}
.arr1.prevStop em,.arr2.nextStop em{ color:#ba0000;}
.pageState{ font:42px Arial, Helvetica, sans-serif; color:#fff; position:absolute; top:377px; left:680px; letter-spacing:6px;}
.pageState span{ font-size:18px; padding:}


/*产品*/
.pro{}
.prot{ width:1200px; margin:0 auto; height:65px; overflow:hidden;}
.prot a{ display:block; float:left;width: 160px; height:41px; border:1px solid #dcdcdc; margin-right:9px; font:18px"Microsoft YaHei UI"; text-align:center; line-height:41px; color:#2e2f2f; overflow:hidden;}
.prot a:hover{ color:#fff; border:1px solid #ba0000;background:#ba0000;-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;}
.prot a:last-child{ margin-right:0;}
.pro1 dl{ width:50%; position:relative; overflow:hidden; float:left;border:1px solid #eee;  box-sizing:border-box; }
.pro1 dt{ overflow:hidden;}
.pro1 dt img{ display:block; width:100%;transition: all 0.3s linear 0s;}
.pro1 dd{ width:92%;padding:20px 4%; position:absolute; bottom:0; left:0;background:rgba(0,0,0,0.8);}
.pro1 dd h3 a{ display:block; font:24px "Microsoft YaHei UI"; color:#fff;}
.pro1 dd p{ font:16px "Microsoft YaHei UI"; color:#fff; line-height:30px;}
.pro1 dd span a{ display:block; width:130px; height:50px; font:16px "Microsoft YaHei UI"; line-height:50px; color:#fff; background:#ba0000 url(../images/pro_arr.png) no-repeat 115px center; padding-left:25px; position:absolute; bottom:22px; right:4%;}
.pro1 ul{width:50%; float:left;}
.pro1 li{ width:50%; float:left; overflow:hidden; border:1px solid #eee;  box-sizing:border-box; position:relative;}
.pro1 li img{ display:block; width:100%;transition: all 0.3s linear 0s;}
.pro1 li em{ display:block; font:16px "Microsoft YaHei UI"; text-align:center; position:absolute; bottom:0; width:100%; background:rgba(0,0,0,0.8); color:#fff; height:40px; line-height:40px;}



/*案例*/
.g-cases{ height:820px; margin:75px 0 0;font-family:"Microsoft Yahei";box-sizing: border-box; position: relative;}
.g-cases:before{ content:""; position:absolute; top:120px; left:0; width:100%; height:1px; background:#dbdbdb;}
.g-cases:after{ content:""; position:absolute; top:225px; left:0; width:100%; height:1px; background:#dbdbdb;}
.g-cases .tit{ height:120px; overflow:hidden; padding-bottom:0;}
.case{position: relative;width:1200px;margin:0 auto;}
.case-nav{width:1200px;margin:0 auto 23px;height: 105px;}
.case-nav li{ float:left; width:200px; height:105px; font:18px "Microsoft YaHei UI"; text-align:center; color:#666; position:relative;}
.case-nav li:before{ content:""; position:absolute; top:20px; right:0; width:1px; height:60px; background:#dbdbdb;}
.case-nav li:last-child:before{ background:none;}
.case-nav li a{ display:block; color:#666; }
.case-nav li em{ display:block; width:38px; height:38px; overflow:hidden; margin:18px auto 5px;}
.case-nav li em img{ display:block;}
.case-nav li.cur a,.case-nav li:hover a{color:#ba0000; font-weight:bold; }
.case-nav li.cur img,.case-nav li:hover img{ position:relative; margin-top:-38px;}

.carousel-container{width: 1200px;margin:0 auto;}
.carousel {height:575px;width:1200px;position:relative;}
.carousel-image {border:0;display:block; position: relative;}
.carousel-feature {position:absolute;top:0;left:200px;border:0px solid #5d5d5d;cursor:pointer;box-shadow: 0 0 20px #c0c0c0;}

.carousel-caption {position:absolute;bottom:0;width:840px;left:0;height:60px;background:rgba(186, 0, 0, 0.9);z-index: 5;padding:0 30px;}
.carousel-caption .case-desc h4{ font:20px "Microsoft YaHei UI"; line-height:60px; float:left; color:#fff;}
.carousel-caption .case-desc p{ font:16px "Microsoft YaHei UI"; line-height:60px; color:#fff; padding-left:25px; float:left;}
.carousel-feature .case-desc span { display:block;font-size:18px;color:#fff; float: right; text-align: right; line-height:60px;}
.tracker-summation-container {position:absolute;color:white;right:48px;top:230px;padding:3px;margin:3px;background-color:#000;}
.tracker-individual-container { position:absolute;color:white;left:50%;top:420px; padding:0; margin:0 0 0 -39px;}
.tracker-individual-container li {list-style:none; }
.tracker-individual-container .tracker-individual-blip {margin:0 7px;text-align:center;width: 12px;height: 12px;border-radius: 100%;font-size: 0;background: #8b8f94;}
.tracker-individual-container .tracker-individual-blip-selected {color:white; font-weight:bold;background-color:#00418a;}

.carousel-left {position:absolute;top:50%;margin-top: -35px; left:-90px;cursor:pointer; background:url(../images/case_l.png) no-repeat;width:64px;height:64px;z-index: 5;}
.carousel-right {position:absolute;top:50%;margin-top: -35px;right:-90px; cursor:pointer;background:url(../images/case_r.png) no-repeat;width:64px;height:64px;z-index: 5;}
.tracker-summation-container{display: none;}



/*优势*/
.super{ background:#f3f3f3; padding-top:75px;position:relative;}
.super .tit{ padding-bottom:0;}
.super:before{content: "";position: absolute;width:100%;height:1px;left:0;top:263px;background:#dedede;z-index:0;}
.super2{  height:674px;}
.super1{ height:674px;}
.super1 dl{ height:674px; position:relative;}
.super1 dt{ height:674px; width:1200px; margin:0 auto; position:relative;}
.super1 dt img{ display:block; width:1920px; height:674px; position:absolute; top:0; left:50%; margin-left:-960px;}
.super1 dd{ width:1200px; height:130px; background:#ba0000; position:absolute; bottom:0; left:50%; margin-left:-600px;}
.super1 dd h3{ width:180px; height:130px; float:left; text-align:center; font:38px "Microsoft YaHei UI"; font-weight:bold; color:#fff; line-height:130px;}
.super1 dd p{ width:960px; font:16px "Microsoft Yahei"; line-height:25px; color:#fff; margin:35px 0 0 20px; float:left;}
.super_t{height: 126px;text-align: center;z-index: 2;font-size: 24px;line-height: 58px;color: #212121; width:1200px; margin:0 auto;}
.super_t li{width: 300px;float: left;position: relative;}
.super_t li:before{content: "";position: absolute;width:18px;height:18px;left:50%;top:83px;background:#fff;z-index: 1;box-sizing:border-box;border: solid 3px #999;border-radius: 100%;margin-left: -9px;}
.super_t li:after{content: "";position: absolute;width:10px;height:3px;top:91px;left:50%;background:#ba0000;transform: translateX(-50%);transition: all 0.6s cubic-bezier(.075, .82, .165, 1);}
.super_t li span{display: block;font-size: 34px;line-height:94px;height: 94px;color: #333;font-weight: bold;}
.super_t li.cur span{color: #ba0000;}
.super_t li.cur:before{border-color: #ba0000; background:#ba0000;}
.super_t li.cur:after{width:55%;}



/*新闻*/
.new{ height:860px;/* padding-top:60px; */ overflow:hidden;}
.new .tit{ padding-bottom:10px;}
.new1{ width:661px; overflow:hidden;}
.tit2{ height:80px; overflow:hidden; position:relative; font:24px "Microsoft YaHei UI"; font-weight:bold; line-height:80px; color:#000000;}
.tit2:before{ content:""; position:absolute; top:50%; left:112px; width:310px; height:1px; background:#ededed;}
.tit2 a{ color:#000000;}
.tit2 em{ float:right; font:16px "Microsoft YaHei UI"; color:#666; line-height:80px;}
.newt{ height:80px; position:relative;}
.newt:before{ content:""; position:absolute; top:50%; right:60px; width:330px; height:1px; background:#ededed;}
.newt:after{ content:""; position:absolute; top:30px; left:123px; width:1px; height:20px; background:#ededed;}
.newt h3{ font:24px "Microsoft YaHei UI"; line-height:80px; float:left; margin-right:50px;}
.newt em a{ display:block; font:16px "Microsoft YaHei UI"; line-height:80px; float:right; color:#666;}
.newt h3 a:hover,.newt .cur a{ font-weight:bold; color:#ba0000;}
.newt h3 a{ display:block; color:#666;}
.new1 dl{ height:530px; overflow:hidden;}
.new1 dt{ width: 659px; height:373px; overflow:hidden;border: 1px solid #ba0000;}
.new1 dt img{ display:block; width:100%; width:661px; height:373px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.new1 dd h3 a,.baike dd h3 a{ display:block; font:24px "Microsoft YaHei UI"; line-height:35px; height:35px; margin:23px 0 10px; font-weight:bold; color:#000; overflow:hidden;}
.new1 dd h3 em{ display:block; float:left; width:85px; height:35px; background:#ba0000; margin-right:10px; font:20px "Microsoft YaHei UI"; line-height:35px; color:#fff; text-align:center; font-weight:bold;}
.new1 dd p,.baike dd p{ font:16px "Microsoft YaHei UI"; line-height:26px; color:#666;}
.new1 dd p a{ color:#808080;}
.new1 li,.baike li{ font:16px "Microsoft YaHei UI"; height:43px; overflow:hidden; line-height:43px; border-top:1px dashed #f1f1f1;}
.new1 li a,.baike li a{ display:block; color:#666;}
.new1 li em{ float:right;}
.new1 li a:hover,.new1 dl:hover h3 a,.baike li a:hover,.baike dd h3 a:hover{ color:#ba0000; font-weight:bold;}
.new1 dl:hover dt img,.baike dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}

.baike{ width:482px; overflow:hidden;}
.baike dl{ height:442px;}
.baike dt{ width:481px; height:272px;  overflow:hidden;}
.baike dt img{ display:block;width: 479px; height: 270px;-webkit-transition: 1s;
-moz-transition: 1s;
border: 1px solid #ba0000;transition: 1s;}
.baike dd p a{ color:#e1362c; display:block; line-height:35px;}

/*关于*/
.about dt img{ display:block; width:100%;}
.about dd{ width:1200px; margin:-250px auto 0; height:200px; position:relative; background:#fff; padding:50px 30px 35px 30px;}
.about dd h3{ text-align:center; font:34px "Microsoft YaHei UI"; font-weight:bold; color:#d73236;}
.about dd h3 a{ display:block; color:#d73236;}
.about dd h3 em{ display:block; font-size:20px; color:#333; padding-top:5px;}
.about dd p{ padding:20px 80px 0 80px; text-align:center; font:14px "Microsoft YaHei UI"; line-height:26px; color:#666;}
.about dd p a{ font-weight:bold; color:#ba0000;}

/*相册*/
.pic{ width:1200px; height:390px; margin:0 auto; position:relative;}
.pict{ height:68px; margin-left:264px;}
.pict a{ display:block; width:220px; height:46px; border:1px solid #ececec; float:left; margin-left:-1px; font:18px "Microsoft YaHei UI"; text-align:center; line-height:46px; color:#666;}
.pict a:hover,.pict .cur{ color:#fff;background:#ba0000;-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;}
.pic1{ overflow:hidden;}
.pic li{ width:296px;float:left; overflow:hidden;margin-right:5px;}
.pic li img{ display:block; width:294px; height:220px;border:1px solid #eee;}
.pic li em{display:block; font:16px "Microsoft YaHei UI"; text-align:center; line-height:48px; height:48px; overflow:hidden;}
.pic li a:hover em{ font-weight:bold; color:#ba0000;}
.pic li a:hover img{ border:4px solid #ba0000;width:288px; height:214px;}


/*友情链接*/
.link{ height:66px;font:12px "Microsoft YaHei"; color:#a4a6a1;  background:#222; border-top:1px solid #323232;}
.link a{ display: inline-block; font:12px "Microsoft YaHei"; color:#a4a6a1; height:66px; line-height:66px; padding-right:50px;}
.link a:hover{font-weight:bold; text-decoration:underline; color:#b90302;}


@keyframes living {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top:0px;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
}
@keyframes living1 {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top: 0;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 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);
  }
}