*{
	box-sizing: border-box;
}
/*http://www.xyre.com/index.php/Ch/Cms/CompanyLetter/index*/

.lyf_banner{
	width:100%;
	height:auto;
}
.lyf_banner .swiper-container {
  width: 100%;
  height: 100%;
  overflow: inherit;
}

.lyf_banner .swiper-slide {
  /*text-align: center;*/
  /*font-size: 18px;*/
  /*background: #fff;*/

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.lyf_banner_box{
	width:250px;
	height:180px;
	position: absolute;
	bottom:180px;
	left: 500px;
	background: red;
}
.lyf_banner .swiper-slide img{
	width: 100%;
	height:100%;
}

.in_tab{
	width:1000px;
	height:230px;
	margin:0 auto;
	margin-top: -50px;
	z-index: 500
}
.in_tab_c{
	width:250px;
	height:180px;
	float: left;
	padding-top: 38px;
	padding-left: 24px;
	position: relative;
	cursor: pointer;
	z-index: 9999;
	transition:0.5s;
}
.in_tab_c h1{
	font-size: 22px;
	color:#fff;
	line-height: 22px;
	font-weight: normal;
	margin-bottom: 36px;
}
.in_tab_c h2{
	font-size: 24px;
	color:#fff;
	line-height: 32px;
	margin-bottom: 8px;
}
.in_tab_c p{
	font-size: 16px;
	color:#fff;
	line-height: 16px;
}
.in_tab .color1{
	background: #ffab3e;
}
.in_tab .color2{
	background: #105391;
}
.in_tab .color3{
	background: #d72445;
}

.in_tab .color4{
	background: #ffab3e;
}
.in_tab .color5{
	background: #4e4e4e;
}
.color1 .icon{
	width: 31px;
	height: 33px;
	background: url('/zh/public/images/index/head_15.png') no-repeat;
	position: absolute;
	bottom:38px;
	right:16px;
	z-index: 2;
}
.color4 .icon{
	width: 105px;
    height: 54px;
    /* background: url(/zh/public/images/index/head_16.png) no-repeat; */
    position: absolute;
    bottom: 21px;
    right: 16px;
    z-index: 2;
    /* display: none; */
    overflow: hidden;
}
.color4 .icon iframe{
	position: relative;
    left: -184px;
}
.in_tab_c .icon .icon_con1{
	width: 100%;
	height: 24px;
}
.in_tab_c .icon .icon_con1 h1{
	font-size: 24px;
	color: #fff;
	line-height: 24px;
	display: inline-block;
}
.in_tab_c .icon .icon_con1 img{
	width: 13px;
	height: 18px;
	float:right;
	margin-top: 4px;
}
.in_tab_c .icon .icon_con2{
	width: 100%;
	height: 20px;
	margin-top: 10px;
}
.in_tab_c .icon .icon_con2 span{
	display: inline-block;
	font-size: 12px;
	color: #fff;
	line-height: 12px;
	float: left;
}
.in_tab_c .icon .icon_con2 b{
	display: inline-block;
	font-weight: normal;
	color: #fff;
	font-size: 12px;
	line-height: 12px;
	float:right;
}
.color3 .icon{
	width: 97px;
    height: 59px;
    /* background: url(/zh/public/images/index/z2.png) no-repeat; */
    position: absolute;
    bottom: 21px;
    right: 16px;
    z-index: 2;
    /* display: none; */
    overflow: hidden;
}
.color3 .icon iframe{
	position: relative;
    top: 0;
    left: -36px;
}
.color2 .icon{
	width: 31px;
	height: 31px;
	background: url('/zh/public/images/index/head_17.png') no-repeat;
	position: absolute;
	bottom:38px;
	right:16px;
	z-index: 2;
}
.in_tab_c:hover{
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
}
.in_btn_swiper{
	width: 750px;
	height: 100%;
	float: left;
	padding-top: 50px;
}
.in_tab .in_tab_c1{
	width:250px;
	height:180px;
	float: left;
	padding-top: 38px;
	padding-left: 24px;
	position: relative;
	cursor: pointer;
	z-index: 9999;
	margin-top: 50px;
}
.in_tab .in_tab_c1 .swiper-button-next, .swiper-button-prev{
	width:56px;
	height:55px;
}
.in_tab .in_tab_c1 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
	width:56px;
	height:55px;
	margin-top: -20px;
}
.in_tab_c1 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
	right: 55px;
	background: url('/zh/public/images/index/head_19.png') no-repeat;
}
.in_tab_c1 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
	left: 55px;
	background: url('/zh/public/images/index/head_18.png') no-repeat;
}

/*ditu*/
.in_map{
	width:1000px;
	height:880px;
	margin:0 auto;
}
.in_map_t{
	width:1000px;
	height:76px;
	margin:86px auto 0;
	position: relative;
	z-index: 6;
}
.in_map_t_l{
	width:260px;
	height:74px;
	float: left;
}
.in_map_t_l img{
	width: 100%;
	height: 100%;
}
.in_map_t_r{
	width:252px;
	height: 54px;
	float: right;
	background: #5b5b5b;
}
.in_map_t_r .in_map_t_r_c{
	width:110px;
	height:43px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	line-height: 43px;
	margin-left:11px;
	float: left;
	cursor: pointer;
}
.in_map_t_r .mapTabActive{
	background: #df2d52;
}
.in_map_map_box{
	width: 992px;
	height:712px;
	position: relative;
}
.in_map_map{
	width: 992px;
	height:712px;
	margin-top: 30px;
	/*margin-left: 36px;*/
	position: absolute;
	left:0; top:0;
	z-index: 1;
	display: none;
}
.in_map_map1{
	background: url('/zh/public/images/index/head_21.png') no-repeat;
}
.in_map_map2{
	width: 1177px;
	height: 602px;
	margin-top: 112px;
	margin-left: -75px;
	background: url('/zh/public/images/index/head_42.png') no-repeat;
}
.map_cs{
	width:36px;
	height:64px;
	position: absolute;
}
.map_cs_cs{
	position: relative;
	cursor: pointer;
}
.map_cs h1{
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 4px;
}
.map_cs .hoIcon{
	display: block;
	width:36px;
	height:36px;
	background: url('/zh/public/images/index/head_22.png') no-repeat; 
}
/*.in_map_map .m0{
	
}
.in_map_map .m1{
	
}
.in_map_map .m2{
	
}*/
.in_map_map .m6{
	left:576px;
	top:391px;
}
/*.in_map_map .m4{
	
}
.in_map_map .m5{
	
}*/
.in_map_map .m7{
	left:505px;
	top:348px;
}
.in_map_map .m5{
	left:429px;
	top:422px;
}
.in_map_map .m9{
	left:692px;
	top:409px;
}
.in_map_map .m9 h1{
	position: absolute;
	top:36px;
}
.in_map_map .m16{
	left:678px;
	top:388px;
}
.in_map_map .m14{
	left:528px;
	top:657px;
}
.in_map_map .m13{
	left:596px;
	top:594px;
}
.in_map_map .m13 h1{
	position: absolute;
	top: 36px;
}
.in_map_map .m3{
	left:588px;
	top:557px;
}
.in_map_map .m10{
	left:580px;
	top:464px;
}
.in_map_map .m2{
	left:627px;
	top:300px;
}
.in_map_map .m11{
	left:683px;
	top:300px;
}
.in_map_map .m8{
	left:631px;
	top:257px;
}
.in_map_map .m15{
	left:637px;
	top:412px;
	width: 68px;
	height: 36px;
}
.in_map_map .m15 h1{
	float: left;
	line-height: 36px;
}
.in_map_map .m15 .hoIcon{
	float: right;
}
/*.in_map_map .m13{
	
}*/
.in_map_map .m12{
	left:637px;
	top:364px;
}
.in_map_map .m0{
	left:582px;
	top:340px;
}
.in_map_map .m4{
	left:713px;
	top:409px;
	width: 68px;
	height: 36px;
}
.in_map_map .m4 h1{
	float: right;
	line-height: 36px;
}
.in_map_map .m4 .hoIcon{
	float: left;
}
.in_map_map .m1{
	left:606px;
	top:235px;
}

/*.in_map_map .n0{
	left:855px;
	top:324px;
}*/
.in_map_map .n0{
	left:855px;
	top:324px;
}
.in_map_map .n0{
	width: auto;
}
.in_map_map .n0 h1{
	margin-left: -14px;
}
.in_map_map .n1{
	left:523px;
	top:143px;
}
.in_map_map .n2{
	left:270px;
	top:202px;
}
.map_cs_ho{
	width: 503px;
	height:165px;
	position: absolute;
	left:-236px;
	top:-164px;
	/*background: #ebebeb;*/
	/*padding:7px 7px 0 7px;*/
	display: none;
	z-index: 99;
}
.in_map_map1 .map_cs .csswwActive{
	width: 212px;
	left:-98px;
	top: -150px;
}
.in_map_map1 .map_cs .csswwActive2{
	width: 215px;
	height: 150px;
	padding:7px 7px 7px 7px;
}
.in_map_map2 .map_cs .csswwActive .map_cs_ho_gd{
	right: -3px;
}
.in_map_map1 .map_cs .csswwActive .map_cs_ho_gd{
	right: -3px;
}
.in_map_map1 .map_cs .csswwActive .swiper-pagination{
	display: none;
}
.in_map_map1 .map_cs .csswwActive .swiper-button-next{
	display: none;
}
.in_map_map1 .map_cs .csswwActive .swiper-button-prev{
	display: none;
}

.in_map_map2 .map_cs .csswwActive{
	width: 212px;
	left:-98px;
	top: -150px;
}
.in_map_map2 .map_cs .csswwActive2{
	width: 215px;
	height: 150px;
	padding:7px 7px 7px 7px;
}
.in_map_map2 .map_cs .csswwActive .swiper-pagination{
	display: none;
}
.in_map_map2 .map_cs .csswwActive .swiper-button-next{
	display: none;
}
.in_map_map2 .map_cs .csswwActive .swiper-button-prev{
	display: none;
}
.in_map_map .map_cs_cs .mapConActive{
	color:#d72445;
}
.in_map_map .map_cs_cs .maphoIconActive{
	background: url('/zh/public/images/index/head_23.png') no-repeat;
}
/*.map_cs_cs:hover h1{
	color:#d72445;
}
.map_cs_cs:hover .hoIcon{
	background: url('/zh/public/images/index/head_23.png') no-repeat; 
}
.map_cs_cs:hover .map_cs_ho{
	display: block;
}*/
.map_cs_ho_gd{
	width:86px;
	height:26px;
	position: absolute;
	top: -26px;
	right:40px;
	background: #d72445;
	text-align: center;
	line-height: 26px;
	font-size: 12px;
	color: #fff;
}
.map_cs_ho .swiper-container {
  width: 422px;
  height: 165px;
  /*overflow: inherit;*/
  margin:0 auto;
  padding: 7px 7px 26px 7px;
  background: #ebebeb;
}

.map_cs_ho .swiper-slide {
  /*text-align: center;*/
  /*font-size: 18px;*/
  /*background: #fff;*/

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.map_cs_slide{
	width:205px;
	height:135px;
	position: relative;
}
.map_cs_slide img{
	width: 100%;
	height: 100%;
}
.map_cs_s_c{
	width:100%;
	height: 32px;
	position: absolute;
	left:0;
	bottom: 0;
	z-index: 3;
	background: #3e3e3e;
	color: #fff;
	text-align: center;
	line-height: 32px;
	font-size: 14px;

}
.map_cs_ho .swiper-button-next, .swiper-button-prev{
	width: 10px;
	height: 18px;
	margin-top: -10px;
}
.map_cs_ho .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
	background: url('/zh/public/images/index/head_26.png') no-repeat; 
	right: 15px;
}
.map_cs_ho .swiper-button-next:hover{
	background: url('/zh/public/images/index/head_28.png') no-repeat; 
}
.map_cs_ho .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
	background: url('/zh/public/images/index/head_25.png') no-repeat;
	left:15px;
}
.map_cs_ho .swiper-button-prev:hover{
	background: url('/zh/public/images/index/head_27.png') no-repeat; 
}
.map_cs_ho .swiper-pagination{
	width: 100%;
	bottom: 4px;
}
.map_cs_ho .swiper-pagination-bullet{
	width: 7px;
	height: 7px;
	margin: 0 3px;
	background: #3e3e3e;
	opacity: 1;
}
.map_cs_ho .swiper-pagination-bullet-active{
	background: #d72445;
}

/**/
.in_aCon_box{
	width:100%;
	height: auto;
	overflow: hidden;
}
.in_aCon1{
	width:100%;
	height:auto;
	padding-top: 70px;
	padding-bottom: 74px;
	overflow: hidden;
	transition:0.5s;
	/*cursor: pointer;*/
}
.in_aCon_box .in_aCon1_active0{
	background: #f3f3f3;
}
.in_aCon_box .in_aCon1_active1{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active2{
	background: #e5ebf1;
}
.in_aCon_box .in_aCon1_active3{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active4{
	background: #e9e9e2;
}
.in_aCon_box .in_aCon1_active5{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active6{
	background: #e9e9e2;
}
.in_aCon_box .in_aCon1_active7{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active8{
	background: #e9e9e2;
}
.in_aCon_box .in_aCon1_active9{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active10{
	background: #e9e9e2;
}
.in_aCon_box .in_aCon1_active11{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active12{
	background: #e9e9e2;
}
.in_aCon_box .in_aCon1_active13{
	background: #ffffff;
}
.in_aCon_box .in_aCon1_active14{
	background: #e9e9e2;
}

/*.in_aCon1_active{
	background: #f3f3f3;
}*/
.in_aCon1_b{
	width:1000px;
	height: 100%;
	margin:0 auto;
}
.aCon1_tit{
	width: 100%;
	height: 65px;
	margin-bottom: 42px;
}
.in_aCon1_b .aCon1_tit_Active{
	float: left;
}
.aCon1_tit_l{
	width:52px;
	height:52px;
	float: left;
}
.aCon1_tit_l img{
	width:100%;
	height:100%;
}
.aCon1_tit_r{
	float:left;
	margin-left: 18px;
}
.aCon1_tit_r h1{
	font-size: 42px;
	color:#4b4b4b;
	line-height: 42px;
	margin-bottom: 12px;
}
.aCon1_tit_r p{
	font-size: 16px;
	color: #4b4b4b;
	text-transform:Uppercase;
}
.aCon1_con{
	width:100%;
	height:auto;
	overflow: hidden;
}
.aCon1_con_l{
	width:551px;
	height:auto;
	float: left;
	overflow: hidden;
}
.in_aCon1 :hover .aCon1_con_l>img{
	transform:scale(1.2,1.2);
}
.aCon1_con_l img{
	width:100%;
	transition:0.5s;
	height:100%;
}
.aCon1_con_r{
	width:390px;
	height:100%;
	float: right;
}
.aCon1_con_r p{
	font-size: 14px;
	color:#818181;
	text-align: justify;
	line-height: 32px;
	margin-bottom: 14px;
	/*letter-spacing: 18px;*/
}
.aCon1_con_r a{
	text-decoration: none;
}
.aCon1_con_r h1{
	font-size: 16px;
	color:#d00e31;
	line-height: 16px;
	font-weight: normal;
}

/**/
.in_shequ{
	width:100%;
	height:592px;
	background: #ededed;
	padding-top:78px;
}
.in_shequ_b{
	width:1000px;
	height: 405px;
	margin:0 auto;
}
.in_shequ_b_u{
	width: 100%;
	height:62px;
	overflow: hidden;
}
.in_shequ_b_u li{
	padding:14px 28px;
	float: left;
	cursor: pointer;
}
.in_shequ_b_u li .li_div_c{
	display: block;
	float: left;
	width:38px;
	height:38px;
	overflow: hidden;
}
.in_shequ_b_u li .li_span1{
	display: block;
}
.in_shequ_b_u li .li_span2{
	display: none;
}
.in_shequ_b_u li .li_div_c img{
	width: 100%;
	height: 100%;
}
/*.in_shequ_b_u li:nth-child(1) span{
	background: url('/zh/public/images/index/h0.png') no-repeat;
}
.in_shequ_b_u li:nth-child(2) span{
	background: url('/zh/public/images/index/e1.png') no-repeat;
}
.in_shequ_b_u li:nth-child(3) span{
	background: url('/zh/public/images/index/e2.png') no-repeat;
}
.in_shequ_b_u li span.spanActive1{
	background: url('/zh/public/images/index/e0.png') no-repeat;
}
.in_shequ_b_u li span.spanActive2{
	background: url('/zh/public/images/index/e1.png') no-repeat;
}
.in_shequ_b_u li span.spanActive3{
	background: url('/zh/public/images/index/e2.png') no-repeat;
}*/
.in_shequ_b_u li b{
	display: block;
	float: left;
	font-size: 18px;
	color:#4e4e4e;
	font-style: normal;
	/*font-weight: normal;*/
	line-height: 34px;
	margin-left: 8px;
}
.in_shequ_b_u .sqBackActive{
	background: #d72445;
}
.in_shequ_b_u .sqBackActive b{
	color: #fff;
}
.in_shequ_b_c{
	width:100%;
	height:342px;
	position: relative;
}
.in_shequ_b_c1{
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	z-index: 1;
	display: none;
}
.in_shequ_b_c_l{
	width:548px;
	height:100%;
	float: left;
	overflow: hidden;
}
.in_shequ_b_c_l img{
	width: 100%;
	height:100%;
}
.in_shequ_b_c_r{
	width:452px;
	height: 100%;
	float: left;
	padding: 54px 46px;
	background: #fff;
}
.shequ_b_c_r_t{
	width:100%;
	height: 66px;
	margin-bottom: 25px;
}
.shequ_b_c_r_t_l{
	width:56px;
	height: 66px;
	float: left;
}
.shequ_b_c_r_t_l img{
	width: 100%;
	height: 100%;
}
.shequ_b_c_r_t_r{
	width: 285px;
	height: 100%;
	float: left;
	margin-left: 15px;
}
.shequ_b_c_r_t_r h1{
	font-size: 22px;
	color: #8f8f8f;
	line-height: 33px;
	margin-bottom: 6px;
}
.shequ_b_c_r_t_r h2{
	font-size: 22px;
	color: #4e4e4e;
	line-height: 22px;
}
.shequ_b_c_r_c{
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}
.shequ_b_c_r_c p{
	font-size: 14px;
	text-align: justify;
	color: #4b4b4b;
	line-height: 32px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    /*text-indent: 2rem;*/
}
.in_shequ_b_c_r a{
	text-decoration: none;
}
.in_shequ_b_c_r h3{
	font-size: 16px;
	color:#d00e31;
	line-height: 16px;
	font-weight: normal;
}

@media screen and (min-width: 1400px){
	.in_tab{
		width: 1400px;
		margin-top: -50px;
	}
	.in_tab_c{
		width: 350px;
	}
	.in_btn_swiper{
		width: 1050px;
		height: 100%;
		float: left;
		padding-top: 50px;
	}

	.in_tab .in_tab_c1{
		width: 350px;
		margin-top: 50px;
	}
	.in_tab_c1 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
		left:108px;
	}
	.in_tab_c1 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
		right: 108px;
	}
	.in_tab_c{
		padding-left: 38px;
	}
	.color1 .icon{
		right: 40px;
	}
	.color2 .icon{
		right: 40px;
	}
	.color3 .icon{
		right: 40px;
	}
	.in_map_t{
		width: 1400px;
	}
	.in_aCon1_b{
		width: 1400px;
	}
	.in_aCon1_b .aCon1Pa14{
		padding-top: 86px;
	}
	.in_aCon1{
		/*height: 769px;*/
		padding-top: 72px;
		padding-bottom: 72px;
	}
	.aCon1_tit{
		margin-bottom: 62px;
	}
	.aCon1_con_l{
		width: 804px;
		height: 501px;
	}
	.aCon1_con_r{
		width: 503px;
	}
	.aCon1_con_r p{
		margin-bottom: 86px;
	}
	.in_shequ{
		height: 732px;
	}
	.in_shequ_b{
		width: 1400px;
	}
	.in_shequ_b_u li{
		padding:15px 63px 20px;
	}
	.in_shequ_b_u li b{
		font-size: 22px;
	}
	.in_shequ_b_c{
		height: 500px;
	}
	.in_shequ_b_c_l{
		width: 803px;
		height: 500px;
	}
	.in_shequ_b_c_r{
		width: 596px;
		height: 500px;
		padding: 89px 104px;
	}
	.shequ_b_c_r_t_r h1{
		font-size: 26px;
	}
	.shequ_b_c_r_t_r h2{
		font-size: 24px;
	}
	.shequ_b_c_r_c{
		margin-bottom: 40px;
	}
}

/*搜索*/
.s_in_b{
	width: 100%;
	height: 59px;
	background:#f2f2f2;
	position: relative;
	z-index: 99;
	top: -3px;
}
.s_in{
	width: 817px;
	height: 59px;
	position: absolute;
	z-index: 99;
	background: #fff;
	margin-top: -30px;
	left:50%;
	margin-left: -408px;
}
.s_in_input{
	width: 654px;
	height: 100%;
	float: left;
}
.s_in_input .search_in{
	width: 100%;
	height: 100%;
	border:none;
	background: none;
	line-height: 59px;
	text-indent: 32px;
	font-size: 14px;
	color: #a5a5a5;
}
.s_in_ss{
	width: 163px;
	height: 100%;
	float: left;
	background: #d72445;
	text-align: center;
	cursor: pointer;
	line-height: 72px;
	overflow: hidden;
}
.s_in_ss img{
	width: 24px;
	height: 25px;
}
/**/
.sarch_con{
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #f2f2f2;
	padding-top: 66px;
	padding-bottom: 130px;
	position: relative;
	top: -3px;
}
.sarch_c_c{
	width: 1000px;
	height: auto;
	overflow: hidden;
	margin:0 auto;
	position: relative;
	background: #f2f2f2;
	padding-top: 62px;
}
.sarch_c_p{
	width: 100%;
	overflow: hidden;
}
.sarch_c_c .list_ul{
	display: none;
}



.yuanAnimte{
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.yuanAnimte {
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
}
.yuanAnimte::before, .yuanAnimte::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.spin {
  width: 6em;
  height: 6em;
  padding: 0;
}
.spin:hover {
  color: #f44336;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #f44336;
  border-right-color: #f44336;
  border-bottom-color: #f44336;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
          transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #f44336;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
          transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}