@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/ban_prev.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/ban_next.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:#0065d1;width: 12px;height: 12px;border-radius: 12px;border:0; box-shadow:0; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.slick-dots .slick-active button {background:#0065d1;border:0; width:32px;} 

.tit{ font:44px "Microsoft YaHei UI"; text-align:center; color:#000; height:135px; font-weight:bold;}
.tit a{ color:#000;}
.tit em{ display:block; font-size:18px; padding:32px 0 0; color:#666; margin-top:6px;font-weight:normal; background:url(../images/line.png) no-repeat center top;}

.guide{ height:535px; overflow:hidden; background:#f5f5f5; padding-top:67px;}
.guide dl{ height:450px; background:url(../images/guide_bg.png) no-repeat right top;}
.guide dt{ width:543px; height:328px;overflow:hidden; position:relative; float:right; margin:22px 84px 0 0;}
.guide dt em{ display:block;width:543px; height:328px; background:url(../images/guide_v.png) no-repeat center 130px; position:absolute; top:0;}
.guide dt img{ display:block;width:543px; height:328px;}
.guide dd{ width:488px; float:left; overflow:hidden;}
.guide dd h3{ font:36px "Microsoft YaHei UI"; font-weight:bold; color:#0065d1; height:72px; padding-top:54px; background:url(../images/guide_line.png) no-repeat left bottom;}
.guide dd p{font:14px "Microsoft YaHei UI"; line-height:26px; color:#666; margin:32px 0 48px;}
.guide dd span{ display:block; height:30px; width:190px; background:url(../images/guide_q.png) no-repeat right center; font:16px "Microsoft YaHei UI"; line-height:30px; color:#3a3a3a;}

.number1{ width:1200px; margin:-75px auto 0; position:relative; z-index:2; height:150px; box-shadow:0 0 1rem #ccc; background:#fff;}
.number1 li{ float:left; font:18px "Microsoft YaHei UI"; color:#3a3a3a; height:135px; padding:15px 95px 0; position:relative;}
.number1 li:before{ content:""; position:absolute; top:24px; right:0; width:1px; height:94px; background:#bdbdbd;}
.number1 li:last-child:before{ background:none;}
.number1 li span{ display:block; font:72px Arial, Helvetica, sans-serif; font-weight:bold; color:#1e1e1e; position:relative;}
.number1 li span i{ font:20px "Microsoft YaHei UI"; position:absolute; top:8px; left:74px;}
.number1 li:last-child{ padding:15px 90px 0 93px; position:absolute; top:0; right:0;}
.number1 li:last-child span i{ left:196px;}
.number1 li:hover{ background:#0065d1; 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;}
.number1 li:hover span{ color:#ffb900;}


.pro{padding-top:70px; height:1200px; overflow:hidden;}
.prot{ height:815px; overflow:hidden; width:247px; background:#f0f0f0; float:left; margin-top:15px;}
.prot h2 a{ display:block; height:103px; font:30px "Microsoft YaHei UI"; text-align:center; line-height:103px; overflow:hidden; color:#fff; background:url(../images/pro_fen1.jpg) no-repeat;}
.prot h3{ width:216px; height:46px; margin:16px auto 0; font:18px "Microsoft YaHei UI"; line-height:46px;}
.prot h3 a{ display:block; background:#666 url(../images/pro_arr1.png) no-repeat 166px center; padding-left:30px; color:#fff;}
.prot h3 a:hover{background:#0065d1 url(../images/pro_arr2.png) no-repeat 166px center;color:#ffb900;-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 ul{ width:216px; margin:12px auto;}
.prot li{ font:16px "Microsoft YaHei UI"; line-height:39px; height:39px; overflow:hidden; padding-left:48px; position:relative;}
.prot li a{ display:block; color:#666;}
.prot li:before{ content:""; position:absolute; top:12px; left:22px; width:12px; height:12px; border-radius:12px; border:1px solid #cdcdcd;}
.prot li a:hover{ font-weight:bold; color:#0065d1;}
.pro1{ width:927px; float:right; overflow:hidden;margin-top:15px;}
.pro1 li{ width:297px; float:left; overflow:hidden; position:relative; margin:0 17px 0 0;}
.pro1 li img{ display:block; width:297px; height:223px;}
.pro1 li span{ display:block; height:48px; font:14px "Microsoft YaHei UI"; line-height:48px; color:#666; padding-left:10px; overflow:hidden; background:url(../images/pro_arr3.png) no-repeat 260px center;}
.pro1 li:hover span{ color:#fff; background:#0065d1 url(../images/pro_arr4.png) no-repeat 260px center;-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;}
.pro1 li:hover img{ width:293px; height:219px; border:2px solid #0065d1;}
.pro1 li:nth-child(3n){ margin-right:0;}

.pro2{ height:110px; border:1px solid #e8e8e8; margin-top:50px;}
.pro2 h5{ width:245px; height:110px; float:left; overflow:hidden; background:#0065d1; font:20px "Microsoft YaHei UI"; font-weight:bold; color:#fff; line-height:110px; text-align:center;}
.pro2 p{ width:925px; float:right; margin-top:18px; font:15px "Microsoft YaHei UI"; line-height:40px; color:#666;}
.pro2 p a{ display:block; float:left; padding:0 25px;}
.pro2 p a:hover{ font-weight:bold; color:#0065d1;}

.fang{ height:auto;}
.fangt{ height:240px; width:1200px; margin:20px auto 0;}
.fangt h3{ width:277px; float:left; margin-right:30px; position:relative;}
.fangt h3 img{ display:block; width:277px; height:208px;}
.fangt h3 em{ display:block;display:block;position: absolute;bottom: 0; height: 50px; width: 100%;text-align: center;
    font: 16px "Microsoft YaHei UI"; line-height:50px;color: #fff;
    -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);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#000000',GradientType=0 );}
.fangt h3:last-child{ margin-right:0;}
.fangt .cur img{ width:271px; height:202px; border:3px solid #0065d1;}
.fangt .cur em{ height:208px; line-height:208px; background:rgba(0,101,209,0.9);}
.fangt .cur em:before{ content:""; position:absolute; top:208px; left:50%; margin-left:-10px; width:0; height:0; border-top:8px solid #0065d1; border-left:10px solid rgba(0,0,0,0);border-right:10px solid rgba(0,0,0,0);}
.fang1{ height:621px; overflow:hidden; background:url(../images/fang_bg.jpg) no-repeat center top; margin:20px 0 80px;}
.fang1 dl{ height:540px; padding-top:81px; width:1200px; margin:0 auto;}
.fang1 dt{ width:616px; height:462px; float:right; overflow:hidden; position:relative;}
.fang1 dt img{ display:block;width:616px; height:462px;}
.fang1 dd{ width:460px; float:left; overflow:hidden;}
.fang1 dd h3{ height:62px; margin:80px 0 35px; position:relative; font:32px "Microsoft YaHei UI"; color:#333;}
.fang1 dd h3 a{ display:block; color:#333;}
.fang1 dd h3:before{ content:""; position:absolute; bottom:0; left:0; width:62px; height:2px; background:#0065d1;}
.fang1 dd p{ font:15px "Microsoft YaHei UI"; line-height:26px; color:#666;}
.fang1 dd span a{ display:block; width:165px; height:44px; margin-top:30px; background:#ffb900; font:16px "Microsoft YaHei UI"; text-align:center; line-height:44px; color:#fff;}
.fang1 dl:hover h3 a{ font-weight:bold; color:#0065d1;}
.fang1 dl:hover dd span a{ background:#0065d1;-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;}
.fang1 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);}
.fang1 dt:hover:before{
            left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;
        }
		
.case{height:995px; overflow:hidden;}
.caset{ width:1200px; margin:0 auto; height:65px;}
.caset h3{ font:16px "Microsoft YaHei UI"; line-height:65px; float:left; padding:0 38px; position:relative;}
.caset h3:before{ content:""; position:absolute; top:24px; right:0; width:1px; height:15px; background:#eaeaea;}
.caset h3 a{ display:block;}
.caset h3 a:hover{ font-weight:bold; color:#0065d1;}
.caset h3:nth-child(1){ padding-left:0;}
.caset h3:nth-child(9){ padding:0; float:right;}
.case1 {width: 100%;min-width: 1200px;height: 760px;position: relative;}
.case2{width: 1200px;position: absolute;left: 50%;margin-left: -600px;}
.case1 .tempWrap{overflow: visible !important;}
.case1 .tempWrap .case3{margin-left: -1290px !important;}
.case1 dl { position: relative; float:left; margin:0 30px 40px !important; width:1200px; height:760px;}
.case1 dt{width:1200px; height:600px; overflow:hidden; position:relative;}
.case1 dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.case1 dt img{ display:block; width:1200px; height:600px;-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);}
.case1 dd{ position:absolute; top:480px; right:0; width:560px; height:200px; padding:40px 70px 0 70px; background:#0065d1;display:none;}
.case1 dd h3{ font:30px "Microsoft YaHei UI"; font-weight:bold; color:#fff;}
.case1 dd h3 a{ display:block; color:#fff;}
.case1 dd p{font:14px "Microsoft YaHei UI"; line-height:27px; color:#fff; padding:18px 0 0 0;}
.case1 dd span{ display:block; width:300px; height:30px; font:16px Arial, Helvetica, sans-serif; font-weight:bold; color:#000; line-height:30px; position:absolute; top:160px; left:-500px;}
.case1 dd span:before{ content:""; position:absolute; top:49%; left:45px; width:206px; height:2px; background:#ccc;}
.case1 dd span:after{ content:""; position:absolute; top:49%; left:45px; width:36px; height:2px; background:#0065d1;}
.case1 dd span em{ float:right;}
.case1 .cur1 dt:before{ display:none;}
.case1 .cur1 dd{ display:block;}
.prev2{width:52px;height: 97px;top:240px;z-index: 9;cursor: pointer;left: 50%;margin-left: -712px; background:#0065d1 url(../images/case_l.png) no-repeat center center;}
.next2{width:52px;height: 97px;top:240px;z-index: 9;cursor: pointer;left: 50%;margin-left: 660px;background:#0065d1 url(../images/case_r.png) no-repeat center center;}
.prev2:hover{background:#ffb900 url(../images/case_l.png) no-repeat center center;}
.next2:hover{background:#ffb900 url(../images/case_r.png) no-repeat center center;}	
		

.super{ height:1071px; position:relative;}
.super:before{ content:""; position:absolute; bottom:0; left:50%; margin-left:-960px; width:1920px; height:162px; background:url(../images/new_bg.jpg) no-repeat center top;}
.super2{ height:836px;}
.super1{ position:relative;}
.supert{ height:325px; min-width:1300px; max-width:1920px; width:89.0625%; margin:-162px auto 0; position:relative; background:#fff;}
.supert dl{ width:25%; float:left; height:325px; overflow:hidden; border-right:1px solid #eee; box-sizing:border-box;}
.supert dt{ padding:55px 8% 0 8%;}
.supert dt em{ display:block; height:67px; font:30px Arial, Helvetica, sans-serif; font-weight:bold; color:#666; line-height:67px;}
.supert dt em img{ display:block; float:right; width:67px; height:67px;}
.supert dt span{ display:block; padding:32px 0 0 0; font:30px "Microsoft YaHei UI"; font-weight:bold; color:#333;}
.supert dt span i{ display:block; font:16px "Microsoft YaHei UI"; color:#666; padding-top:5px;}
.supert dd{ display:none; padding:45px 8% 0 8%;}
.supert dd h3{ font:30px "Microsoft YaHei UI"; font-weight:bold; color:#ffb900; position:relative;}
.supert dd h3 em{ display:block; font:18px "Microsoft YaHei UI"; color:#fff; padding-top:5px;}
.supert dd h3 img{ position:absolute; top:-20px; right:0;}
.supert dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:rgba(255,255,255,0.4); margin-top:25px;}
.supert .cur{ background:#0065d1; height:325px;-webkit-transition:all 0.7s;
	transition:all 0.7s;}
.supert .cur dt{ display:none;}
.supert .cur dd{ display:block;}
.super2 dt{ height:773px; background:url(../images/ys1.jpg) no-repeat center top;}
.super2 dl:nth-child(2) dt{height:773px; background:url(../images/ys2.jpg) no-repeat center top;}
.super2 dl:nth-child(3) dt{height:773px; background:url(../images/ys3.jpg) no-repeat center top;}
.super2 dl:nth-child(4) dt{height:773px; background:url(../images/ys4.jpg) no-repeat center top;}
@media screen and (max-width: 1400px) {
   .supert dd{padding:25px 8% 0 8%;}
}


.news{ height:815px; padding-top:50px; overflow:hidden; background:url(../images/new_bg.jpg) no-repeat center bottom;}
.newst{ height:50px; border-bottom:1px solid #d9d9d9; margin:10px 0 18px;}
.newst h3{  float:left; width:160px; font:20px "Microsoft YaHei UI"; line-height:50px; text-align:center;}
.newst h3 a{ display:block; color:#666;}
.newst h3 a:hover,.newst .cur a{ background:#0065d1; color:#fff;}
.newst h5 a{ display:block; float:right; font:16px "Microsoft YaHei UI"; line-height:50px; color:#666;}
.news1{ height:560px;}
.news2{ position:relative;}
.news1 dl{ width:540px; height:140px; padding:23px 30px 0 30px; background:#fff; margin-bottom:17px;}
.news1 dt{ font:16px "Microsoft YaHei UI"; font-weight:bold; color:#333;}
.news1 dt a{ display:block; color:#333;}
.news1 dt em{ font:14px "Microsoft YaHei UI"; color:#adadad; float:right;}
.news1 dd{ font:15px "Microsoft YaHei UI"; line-height:26px; color:#666; margin:7px 0 0 0;}
.news1 dd a{ display:block; background:url(../images/new_arr.png) no-repeat; height:18px; margin-top:12px;}
.news1 dl:hover dt a{ color:#0065d1;}
.news1 h4{ width:587px; float:right; position:absolute; top:0; right:0; overflow:hidden;}
.news1 h4 img{ display:block; width:587px; height:440px;}
.news1 h4 span{ display:block; background:#0065d1; padding:19px 30px; font:16px "Microsoft YaHei UI"; font-weight:bold; color:#fff;}
.news1 h4 span em{ display:block; font:15px "Microsoft YaHei UI"; margin-top:6px;}


.about{ position:relative; margin-bottom:36px;}
.about h2 img{ display:block; width:100%;}
.about dl{ width:1200px; height:233px; background:#fff; margin:-116px auto 0; position:relative; box-shadow:0 0 1rem #ccc;}
.about dt{ width:270px; height:233px; background:#0065d1; font:70px "Microsoft YaHei UI"; color:#fff; float:left; text-align:center;}
.about dt a{ display:block; color:#fff; padding-top:50px;}
.about dt em{ display:block; font:36px "Microsoft YaHei UI";}
.about dd{ width:836px; float:left; padding:35px 0 0 36px;}
.about dd h3 a{ display:block; font:26px "Microsoft YaHei UI"; font-weight:bold; color:#373737;}
.about dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#666; margin:16px 0 22px;}
.about dd span a{display:block; width:165px; height:44px; background:#ffb900; font:16px "Microsoft YaHei UI"; text-align:center; line-height:44px; color:#fff;}


.pic{ height:360px;overflow:hidden;}
.pict{ height:50px; border-bottom:1px solid #efefef; margin-bottom:26px;}
.pict h3{ font:20px "Microsoft YaHei UI"; height:50px; float:left; margin-right:35px; line-height:50px;}
.pict h3 a{ display:block; color:#666; position:relative; height:50px;}
.pict h3 em{ display:block; float:left; width:22px; height:23px; overflow:hidden; margin:14px 8px 0 0;}
.pict h3 em img{ display:block;}
.pict h3 a:hover,.pict .cur a{ font-weight:bold; color:#0065d1;}
.pict h3 a:hover:before,.pict .cur a:before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#0065d1;} 
.pict h3 a:hover em img,.pict .cur img{ position:relative; margin-top:-23px;}
.pict h5 a{ float:right; display:block; font:16px "Microsoft YaHei UI"; color:#666; line-height:50px;}
.pic2{ height:250px; position:relative;}
.pic3{ overflow:hidden;}
.pic1 li{ width:274px; float:left; margin-right:34px; overflow:hidden; position:relative;border:1px solid #eee; box-sizing:border-box;}
.pic1 li img{ display:block; width:274px;height:auto;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pic1 li a:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.pic1 li span{display:block;position: absolute;
 bottom: 0;
    height: 0;
    width: 100%;
    text-align: center;
    font: 16px "Microsoft YaHei UI";
    color: #fff;
    background: rgba(0,101,209,0.9);
    -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);}
.pic1 li span em{ display:block; width:20px; height:20px; background:url(../images/pic_more.png) no-repeat; margin:72px auto 10px;}
.pic1 li a:hover span{ height:100%;}

.link{background:#272727;font:18px "Microsoft YaHei UI";color:#ababab;padding: 30px 0;}
.link em{ text-transform:uppercase; font:24px Arial, Helvetica, sans-serif; font-weight:bold; padding-right:4px; position:relative;}
.link span{padding-left: 80px;position: relative;line-height: 30px;display: block;height: 30px;width: 953px;float: right; overflow:hidden;}
.link span:before{content:"";position:absolute;left: 8px;top: 6px;width:0;height:0;border-left:10px solid #939393;border-top:8px solid rgba(0,0,0,0);border-bottom:8px solid rgba(0,0,0,0);}
.link a{display: inline-block;padding: 0 16px;font:14px "Microsoft YaHei";color:rgba(255,255,255,0.5);position:relative;}
.link a:hover{font-weight:bold; text-decoration:underline; color:#0065d1;}

@media (min-width: 1200px) and (max-width: 1680px) {
}


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