@charset "utf-8";
body{font-family: "Microsoft YaHei";}
.content{min-width: 1200px;max-width:1920px;width:1600px; margin: 0 auto;}
i,em,b{font-style: normal;}


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



.tit{font-size:55px; color:#333; text-align:center; margin-bottom:45px;}
.tit a{ display:block; color:#333;}
.tit em{ display:block;font-size:20px; line-height:55px; font-weight:normal;}

	  .ban{ position:relative; z-index:1;}
      .banner{max-height: 928px;overflow: hidden;}
      .banner img{width: 100%;display: block;}
      .banner .slick-arrow {position: absolute;top:45%;z-index: 9; width:50px; height:50px;border: 0; outline: none; border-radius:90px;font-size: 0;}
      .banner .slick-prev { left:5%; display: none; background:url(/Skins/Default/images/ban_l.png) no-repeat center center;}
      .banner .slick-next { right:5%; display: none;background:url(/Skins/Default/images/ban_r.png) no-repeat center center;} 
	  .slick-dots { position: absolute;left: 40%; font-size:0; bottom: 5%;width: 300px;text-align: center;z-index: 11;}
      .slick-dots li {display: inline-block;margin: 0 8px; }
      .slick-dots li button {display: block;background: #fff;width:15px;height: 15px;color: #fff; border-radius: 20px;border:0; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
      .slick-dots .slick-active button {background:#e50112;width: 50px;} 
/**/
.g_guide{ margin:80px 0;}
.g_guide dt{ width:43.75%; float:left;}
.g_guide dt h5{ font-size:60px; font-weight:bold; color:#e50112; height:210px;}
.g_guide dt h5 em{ display:block; font-size:16px; font-family: Arial; color:#333; font-weight:normal;}
.guide{ width:100%; overflow:hidden; position:relative;}
.guide img{ display:block; width:100%; border-radius:30px 0 30px 0;}
.guide:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5) url(/Skins/Default/images/yinz_v.png) no-repeat center center; border-radius:30px 0 30px 0;}
.g_guide dd{ width:50%; float:right;}
.yinz_r{ height:210px; position:relative;}
.yinz_r b{ display:block; font-size:20px; color:#333; font-weight:normal;}
.yinz_r p{ font-size:14px; line-height:22px; color:#666; margin-top:6px;}
.yinz_r span{ display:block; width:254px; height:63px; background:url(/Skins/Default/images/yinz_btn.png) no-repeat; position:absolute; bottom:0; left:0; font-size:16px; font-weight:bold; line-height:63px;}
.yinz_r span a{ color:#fff; padding-left:40px;}
.yinz_num{ margin-top:5.5rem;}
.yinz_num li{ width:32.5%; height:auto; background:url(/Skins/Default/images/yinz_bg1.png) no-repeat; background-size:100% 100%; float:left; padding:2.8rem 0; text-align:center; font-size:20px; color:#333; font-weight:normal;}
.yinz_num li i{ display:block; width:60px; height:52px; margin:0 auto; overflow:hidden;}
.yinz_num li i img{display:block; width:60px;}
.yinz_num li span{ display:block; font-size:24px; font-weight:bold; margin-top:1rem;}
.yinz_num li span b{ font-size:60px;}
.yinz_num li:nth-child(2){background:url(/Skins/Default/images/yinz_bg2.png) no-repeat; background-size:100% 100%; margin-left:12px;}
.yinz_num li:nth-child(3){background:url(/Skins/Default/images/yinz_bg3.png) no-repeat; background-size:100% 100%; float:right;}
.yinz_num li:hover{ color:#e50112;}
.yinz_num li:hover img{ margin-top:-52px;}
@media (max-width: 1440px) {
	.yinz_num{ margin-top:3.5rem;}
	.yinz_num li{ font-size:16px;}
	.yinz_num li:nth-child(2){ margin-left:7px;}
	.yinz_num li span{ font-size:20px;}
	.yinz_num li b{ font-size:40px;}
}


/**/
.g_pro{ padding:80px 0; background:#f3f3f3;}
.g_pro .content{ position:relative;}
.pro_tit{ width:24.0625%; position:absolute; top:0; left:0; background:#fff;border-radius:15px;}
.pro_tit li,.pro_tit h5{ height:138px; border-bottom:1px solid #d4d3d3; font-size:20px; line-height:138px;}
.pro_tit li a,.pro_tit h5 a{ display:block; color:#333; padding:0 50px; font-weight:normal;}
.pro_tit li em,.pro_tit h5 em{ display:block; float:right; width:30px; height:28px; overflow:hidden; margin-top:55px;}
.pro_tit li em img,.pro_tit h5 em img{transition: .5s;}
.pro_tit h5{ border-bottom:0;}
.pro_tit .cur a,.pro_tit h5:hover a{ background:#e50112; border-radius:15px; color:#fff; font-weight:bold;}
.pro_tit .cur img,.pro_tit h5:hover img{ margin-top:-28px;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.pro_img{ width:74.625%; float:right;  position:relative; overflow:hidden;}
.pro_img img{ display:block; width:100%; border-radius:15px;}
.pro_img: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);}
.pro_img:hover:before{left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;}

.pro_con{ position:relative;}
.pro_prev{ background:url(/Skins/Default/images/pro_l.png) no-repeat; width:17px; height:29px; position:absolute; top:55%; left:-50px; cursor:pointer;z-index:9;}
.pro_next{ background:url(/Skins/Default/images/pro_r.png) no-repeat; width:17px; height:29px; position:absolute; top:55%; right:-50px;cursor:pointer; z-index:9;}
.pro_tit2{ height:110px; line-height:110px; font-size:24px; font-weight:bold; color:#e50112; position:relative;}
.pro_tit2 a{ color:#e50112; display:block; padding-left:22px;}
.pro_tit2:before{ content:""; position:absolute; top:45px; left:0; width:7px; height:23px; background:#e50112;}
.pro_tit2 em{ float:right; font-size:16px; line-height:110px; font-weight:normal; color:#333;}
.pro_con li{ float:left; width:23.875%;margin-right:24px; position:relative;}
.pro_con li img{ display:block; width:100%;border-radius:15px; border:1px solid #fff; box-sizing:border-box;}
.pro_con li span{ display:block; font-size:16px; color:#666; text-align:center; line-height:50px;}
.pro_con li:hover span{ color:#e50112; font-weight:bold;}
.pro_con li:hover img{ border:1px solid #e50112; box-sizing:border-box;}
@media (max-width: 1440px) {
	.pro_tit li,.pro_tit h5{ height:104px; line-height:104px;}
	.pro_tit li em, .pro_tit h5 em{ margin-top:37px;}
}


/**/
.baoz{ position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:80px auto 0;}
.ys_con{position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:24px auto 0;}
.baoz_con{position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:0 auto; max-height:827px;}
.baoz_con p{ position:relative; overflow:hidden;}
.baoz_con p:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55);}
.baoz_con p img{ display:block; width:100%; max-height:827px;}
.baoz_t{ position:absolute; top:0; left:0; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:0 auto; max-height:827px;}
.baoz_t dl{ width:16.666%; float:left; padding-bottom:200px;}
.baoz_t dt{ padding:100px 0 0 15%; font-size:36px; color:#fff;}
.baoz_t dt img{ display:block; margin-bottom:40px;}
.baoz_t dt em{ display:block; font-size:18px; line-height:45px;}
.baoz_t dd em{ display:block; margin-top:40px; margin-left:15%; width:115px; height:30px; font-size:14px; line-height:30px; background:url(/Skins/Default/images/ys_arr.png) no-repeat right center; opacity:0;}
.baoz_t dd em a{ color:#fff;}
.baoz_t dd span a{ display:block; width:52px; height:52px; background:url(/Skins/Default/images/ys_more.png) no-repeat; margin-top:110px; margin-left:15%;}
.baoz_t .dd01{ margin-top:15px; font-size:16px; line-height:24px; color:#fff; padding:0 15%; height:192px;}
.baoz_t .dd01 p{ margin-bottom:6px; opacity:0;}
.baoz_t dl:hover{ background:#c20c18; border-radius:0 130px 0 0;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.baoz_t dl:hover .dd01 p,.baoz_t dl:hover dd em{ opacity:1;}
@media (max-width: 1680px) {
.baoz_t dd span a{margin-top:60px;}
}
@media (max-width: 1440px) {
.baoz_t dt{padding:60px 0 0 15%;font-size:32px;}
.baoz_t dt em{ font-size:14px;}
.baoz_t .dd01{ font-size:12px; padding:0 10%; line-height:22px; height:154px;}
.baoz_t dd em{ margin-top:20px;}
.baoz_t dd span a{margin-top:10px;}
}
@media (min-width: 1200px) and (max-width: 1400px) {

}

/**/
.fang{ background:#f7f7f8; padding:70px 0;}
.case_f{ background:#fff;}
.fang_tit{ width:29.6875%; float:right; overflow:hidden;}
.fang_tit li{ height:111px; border-bottom:1px solid #ccd6d6; padding:0 5%; overflow:hidden;}
.fang_tit li span{ display:block; float:left; font-size:24px; color:#333; margin-top:28px;}
.fang_tit li span em{ display:block; font-size:16px; color:#999; line-height:30px;}
.fang_tit li b{ display:block; float:right; width:56px; height:56px; overflow:hidden; margin-top:30px;}
.fang_tit li b img{ display:block;transition: .5s;}
.fang_tit li:last-child{border-bottom:0;} 
.fang_tit .cur{ background:#e50112; border-radius:0 40px 0 0;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.fang_tit .cur span,.fang_tit .cur span em{ color:#fff;}
.fang_tit .cur b img{ margin-left:-56px;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}

.fang_cont{ float:left; width:70.3125%; overflow:hidden;}
.fang_prev{ background:url(/Skins/Default/images/case_l.png) no-repeat; width:25px; height:40px; position:absolute; top:45%; left:-50px; cursor:pointer;z-index:9;}
.fang_next{ background:url(/Skins/Default/images/case_r.png) no-repeat; width:25px; height:40px; position:absolute; top:45%; right:-50px;cursor:pointer; z-index:9;}
.fang_prev:hover,.fang_next:hover{ background-position:0 -40px;}
.fang_con h4{ height:100px; line-height:100px; font-size:24px; font-weight:bold; color:#333; position:relative;}
.fang_con h4 a{ color:#333; display:block; padding-left:22px;}
.fang_con h4:before{ content:""; position:absolute; top:15px; left:0; width:7px; height:23px; background:#e50112;}
.fang_cont dl{position:relative;}
.fang_cont dt{ position:relative; overflow:hidden;}
.fang_cont dl:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.fang_cont dt img{ display:block; width:100%;}
.fang_cont dd{ width:91%; padding:0 4.5%;  position:absolute; top:0; left:0; height:100%;}
.fang_cont dd h3 a{ display:block; font-size:40px; font-weight:bold; color:#fff;overflow:hidden; padding-top:66px;}
.fang_cont dd p{ font-size:16px; line-height:30px; color:#fff; width:91%; position:absolute; bottom:35px; left:4.5%;}

.fang_con{}
.fang_con .content{ position:relative;}
.fang_con h4{ height:56px; font-size:22px; color:#333; font-weight:bold; line-height:56px; overflow:hidden; margin:24px 0 10px;}
.fang_con h4 a{ color:#333;}
.fang_con h4 em{ color:#e2ebf4; font-size:16px; background:#930214; padding:0.3rem 0.9rem; border-radius:0.9rem; font-weight:normal; margin-left:8px;}
.fang_con1{ overflow:hidden;}
.fang_con li{ width:23.125%; float:left; margin-right:40px; overflow:hidden; float:left; position:relative;}
.fang_con li: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);}
.fang_con li img{ display:block; width:100%;}
.fang_con li em{ display:block; text-align:center; font-size:16px; line-height:60px; color:#333; line-height:60px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.fang_con li:hover em{ font-weight:bold; color:#e50112; opacity:1;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.fang_con li:hover:before{left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;}

@media (max-width: 1440px) {
	.fang_tit a{ margin-right:8.6%;}
	.fang_tit li{ height:81px;}
	.fang_tit li span{ font-size:20px; margin-top:16px;}
	.fang_tit li span em{ font-size:12px;}
	.fang_tit li b{ margin-top:13px;}
	}
@media (min-width: 1200px) and (max-width: 1400px) {
}


/**/
.tixi{ margin:70px 0 0;}
.tixi_con dl{position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:0 auto; max-height:803px;}
.tixi_con dt{position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:0 auto; max-height:803px;}
.tixi_con dt img{ display:block; width:100%;}
.tixi_con dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.tixi_con dd{position:absolute;width:100%; width:100%; overflow:hidden; top:0; left:0;}
.tixi_con .tixi_dd{ width:50%; float:right; margin-top:9rem; color:#fff;}
.tixi_con .tixi_dd h3{ font-size:36px; margin-bottom:3.3rem;}
.tixi_con .tixi_dd h3 em{ display:block; font-size:18px; font-weight:normal;}
.tixi_con .tixi_dd p{ font-size:18px; line-height:33px;}
.tixi_con .tixi_dd span{display:block; width:254px; height:63px; background:url(/Skins/Default/images/yinz_btn.png) no-repeat; font-size:16px; font-weight:bold; line-height:63px; margin-top:3rem;}
.tixi_con .tixi_dd span a{ color:#fff; padding-left:40px;}

.tix{ position:relative;max-height:803px; overflow:hidden;}
.tixi_tit{ width:516px; position:absolute; top:0; left:8%; z-index:5;}
.tixi_tit li{ width:258px; height:268px; border:1px solid #fff; box-sizing:border-box; float:left; text-align:center; font-size:24px; color:#fff;}
.tixi_tit li:nth-child(1){ margin-right:10%;}
.tixi_tit li:nth-child(4){ margin-left:258px;}
.tixi_tit li em{ display:block; margin:4.375rem auto 1rem; width:58px; height:54px;}
.tixi_tit li em img{ display:block;}
.tixi_tit .cur{ background:#e50112;border:1px solid #e50112; font-weight:bold;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
@media (max-width: 1680px) {
	.tixi_tit li{ height:234px;}
}
@media (max-width: 1440px) {
	.tixi_tit{ width:390px;}
	.tixi_tit li{ height:177px; width:180px;}
	.tixi_tit li:nth-child(4){ margin-left:180px;}
	.tixi_tit li em{margin:2.375rem auto 1rem; }
	.tixi_con .tixi_dd p{ font-size:14px; line-height:30px;}
}
@media (min-width: 1200px) and (max-width: 1400px) {

}


/**/

@media (max-width: 1400px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1360px) {
}
@media (min-width: 1200px) and (max-width: 1400px) {

}
/**/


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

}


/**/
/**/
.new{ background:#f7f8fc; overflow:hidden; padding:60px 0;min-width:1200px; max-width:1920px; width:100%; margin:0 auto;}
.new_tit{ height:50px; border-bottom:1px solid #ccc; margin-bottom:40px;}
.new_tit li{ float:left; font-size:20px; line-height:50px; margin-right:60px; position:relative;}
.new_tit li a{ color:#666;}
.new_tit li em{ display:block; width:36px;height:30px; float:left; margin:10px 6px 0 0; overflow:hidden;}
.new_tit li em img{ display:block;}
.new_tit .cur a{ font-weight:bold; color:#e50112;}
.new_tit .cur:before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#e50112;}
.new_tit .cur em img{ margin-top:-30px;}
.new_tit h5 a{ display:block; float:right; line-height:50px; font-size:16px; color:#666; font-weight:normal;}

.new_dd1{ width:32.3125%; float:left; margin-right:1.5%;}
.new_dd1 dt{ overflow:hidden; position:relative;}
.new_dd1 dt img{ display:block; width:100%; border-radius:30px 0 0 0;}
.new_dd1 dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5) url(/Skins/Default/images/yinz_v.png) no-repeat center center; background-size:60px 60px; border-radius:30px 0 0 0;}
.new_dd1 dd{ padding:35px 5% 55px; background:#fff;}
.new_dd1 dd h3{ font-size:24px; font-weight:bold; color:#333;}
.new_dd1 dd h3 a{ color:#333;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; display:block;}
.new_dd1 dd h3 em{ display:block; font-size:14px; color:#bcbcbc; padding-top:1.9rem; font-weight:normal;}
.new_dd1 dd p{ font-size:14px; line-height:24px; color:#666; margin-top:1.4rem;}
.new_dd1:hover dd h3 a,.new_r dl:hover dd h3 a{ color:#e50112;}

.new_r{ width:32.3125%; float:right;}
.new_r dl{ padding:26px 0; border-bottom:1px solid #ccc;}
.new_r dt{ width:40.81%; float:left; overflow:hidden;}
.new_r dt img{ display:block; width:100%;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.new_r dt:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.new_r dd{ width:53.19%; float:right;}
.new_r dd h3{ font-size:18px; color:#333; margin-top:20px;}
.new_r dd h3 a{ color:#333; line-height:30px; height:30px; overflow:hidden; display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.new_r dd h3 em{ display:block; font-size:14px; color:#b7b8ba; padding:4px 0 22px; font-weight:normal;}
.new_r dd p{ font-size:14px; color:#666; line-height:24px;}
 @media (max-width: 1440px) {
	 .new_r dl{padding:30px 0;}
	 .new_r dd p{ height:48px; overflow:hidden;}
	 .new_r dd h3{ margin-top:0;}
}

.about{min-width:1200px; max-width:1920px; width:100%; margin:0 auto; position:relative;}
.about_im img{ display:block; width:100%;}
.about .tit{ width:100%; position:absolute; top:60px;}
.about .tit a{ color:#fff;}
.about .about_num{ width:100%; position:absolute; bottom:130px; left:0;}
.about li{ width:32.8125%; float:left; background:url(/Skins/Default/images/about_bg1.png) no-repeat; background-size:100% 100%; padding:68px 2.7% 30px; box-sizing:border-box;}
.about li:nth-child(2){ margin-left:0.75%; background:url(/Skins/Default/images/about_bg2.png) no-repeat; background-size:100% 100%;}
.about li:last-child{ float:right; background:url(/Skins/Default/images/about_bg3.png) no-repeat; background-size:100% 100%;}
.about li i{ display:block; width:6.75rem; height:6.75rem; float:left;}
.about li span{ display:block; float:right; width:68%; float:right; font-size:24px; color:#333;}
.about li span b{ display:block; font-weight:normal; font-size:16px; line-height:24px; height:48px; margin-top:10px;}
.about_v{ width:128px; height:128px; background:url(/Skins/Default/images/about_v.png) no-repeat; position:absolute; bottom:-64px; left:50%; margin-left:-64px; background-size:128px 128px;}
.about li:hover{ margin-top:-10px;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
 @media (max-width: 1440px) {
.about li span{width:63%;}	 
}

@keyframes wave {
        50%,
        75% {
            transform: scale(1.6);
        }
        60%,
        100% {
            opacity: 0;
        }
    }

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

.contus{ background:url(/Skins/Default/images/footer_bg_01.jpg) no-repeat center top; height:466px; padding-top:72px;}
.cont_tit h3{ width:30%; float:left; font-size:50px; color:#333;}
.cont_tit{ height:160px; overflow:hidden;}
.cont_tit h3 em{ display:block; font-size:30px; font-weight:bold; color:#666;}
.cont_tit h5{ line-height:37px; width:184px; float:right; text-align:center; font-size:14px; color:#666;}
.cont_tit h5 a{ display:block; width:184px; height:50px; color:#fff; line-height:50px; background:#e50112; font-size:16px; font-weight:bold; border-radius:6px;}
.contus ul{ height:214px; border:1px solid #c8c8c8; border-radius:20px 0 20px 0;}
.contus li{ width:25%; float:left; padding:30px 2% 0 2.3%; box-sizing:border-box;border-right:1px solid #c8c8c8; font-size:14px; color:#666; height:100%;}
.contus li em{ display:block; font-size:28px; color:#333; margin-top:6px;}
.contus li img{ display:block; width:53px; height:53px; margin-bottom:30px;}
.contus li:last-child{ border:0;}
.contus li:last-child em{ font-size:20px;}
 @media (max-width: 1440px) {
.contus li em{ font-size:24px;} 
.contus li:last-child em{ font-size:14px; line-height:30px;}
}

/*友情链接*/
.g_link{ font:14px "Microsoft YaHei UI"; line-height:94px;position:relative; margin-top:-94px;}
.g_link p{color:#f2a4a7; width:50%; float:right; text-align:right;}
.g_link a{color:#f2a4a7; display:inline-block; padding-left:4%;}
.g_link a:hover{ text-decoration:underline; color:#fff; font-weight:bold;}

@media (min-width: 1200px) and (max-width: 1440px) {
	.g_guide .content,.g_pro .content,.fang .content,.tixi .content,.new .content,.about .content,.contus .content,.g_link .content{ width:1200px; margin:0 auto;}
	}


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