.transition(@transition: .4s) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-ms-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}

.transform-origin(@origin) {
	-webkit-transform: @origin;
	-moz-transform: @origin;
	-ms-transform: @origin;
	-o-transform: @origin;
	transform: @origin;
}

.scale(@scale) {
	-webkit-transform: scale(@scale);
	-moz-transform: scale(@scale);
	-ms-transform: scale(@scale);
	-o-transform: scale(@scale);
	transform: scale(@scale);
}

.translateY(@distance) {
	-ms-transform: translateY(@distance);
	-webkit-transform: translateY(@distance);
	-o-transform: translateY(@distance);
	-moz-transform: translateY(@distance);
}

.border-radius(@border-radius) {
	-webkit-border-radius: @border-radius;
	-moz-border-radius: @border-radius;
	-o-order-radius: @border-radius;
	-ms-border-radius: @border-radius;
	border-radius: @border-radius;
}

.rotate(@rotate) {
	-webkit-transform: rotate(@rotate);
	-moz-transform: rotate(@rotate);
	-ms-transform: rotate(@rotate);
	-o-transform: rotate(@rotate);
	transform: rotate(@rotate);
}

@mc: #eee;
@mc1: #ff000a;
@mc2: #149c16;
@qt1: #573a59;
@qt2: #1a8fdf;
/*内页导航背景*/
@qt3: #1a8fdf;
/*内页分类侧边背景*/
@qt4: #099f52;
/*内页分类侧边li背景*/
@qt5: #fff;
/*悬浮背景变色后字体颜色*/
@qt6: #c5a46e;
/*按钮悬浮颜色 */

//调用方式  .border(3px);

.txt {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.browserupgrade {
	cursor: pointer;
	margin: 0;
	padding: 1em;
	background: #ccc;

	a {
		color: red;
	}
}

table {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

table td {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	text-align: center;
	vertical-align: middle;
}

input,
textarea {
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: none;
}

/*全局---头部----主体（主页）----底部---侧边---内页--*/
/*--------------------------------------------------------全局开始---------------------------------------------------*/

p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
label,
span,
i,
b,
div {
	margin: 0;
	padding: 0;
	font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

li {
	list-style: none;
}

.off {
	display: none;
}

/*隐藏*/
.slh() {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/*单行超出部分省略号显示*/
ul {
	padding: 0;
	margin: 0;
}

i {
	font-style: normal;
}

a {
	color: #333;
	text-decoration: none;
}

/*----------------头部--------------*/

body {
	margin: 0;
	padding: 0;
	background: #fff;
	max-width: 2600px;
	min-width: 1300px;
	color: #333;
	font-size: 14px;
	padding-top: 85px;
}

.fl,
.left {
	float: left;
}

.fr,
.right {
	float: right;
}

.w1920 {
	max-width: 1920px;
	margin: 0 auto;
}

.w1200,
.wrap,
.main {
	width: 1200px;
	margin: 0 auto;
}


#playercontainer {
	margin: 0 auto;
}

//顶部

.toptop {
	height: 85px;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	z-index: 88;
	background: #fff;
	.main{
		display: flex;
		justify-content: space-between;
	}
	.logo_box {
		margin-right: 200px;

		img {
			width: 55px;
			height: 85px;
			object-fit: contain;
			display: block;
		}
	}

	.nav {
		display: flex;
		li {
			height: 85px;
			box-sizing: border-box;
			margin-right: 40px;

			// > a {display: block;height: 85px;font-size: 16px;line-height: 85px;box-sizing:border-box;color: #fff;}
			>a {
				display: block;
				height: 85px;
				font-size: 16px;
				line-height: 85px;
				box-sizing: border-box;
				color: #333;
			}
		}

		.erji {
			position: absolute;
			width: 100%;
			height: 50px;
			background: rgba(0, 0, 0, 0.6);
			left: 0;
			right: 0;
			top: 85px;
			z-index: 10;
			text-align: center;
			display: none;

			a {
				display: inline-block;
				padding: 0px 15px;
				line-height: 50px;
				color: #fff;
			}
		}

		.active {
			.erji {
				display: block;
			}
		}
	}

	.btn-box{
		display: flex;
	}

	.shop_a {
		display: block;
		width: 105px;
		height: 38px;
		border-radius: 6px;
		color: #fff;
		margin-top: 24px;
		text-align: center;
		line-height: 38px;
		background: #ff000a;
		float: left;
	}
	.lang{
		width: 118px;
		margin-top: 30px;
		position: relative;
		cursor: pointer;
		background: url(../images/lan1.png) no-repeat top center;
		p{
			color: #333;
			font-size: 14px;
			height: 23px;
			line-height: 23px;
			text-align: center;
			text-indent: 5px;
		}
		.lan{
			position: absolute;
			background: #f5f5f5;
			width: 100%;
			top: 50px;
			opacity: 0;
			visibility: hidden;
			z-index: 100;
			transition: all 0.5s;
			a{
				display: block;
				width: 100%;
				line-height: 40px;
				text-align: center;
				color: #333;
				transition: 0.4s;
				&:hover{
					color: @mc1;
				}
			}
		}
		&.active{
			.lan{
				top: 40px;
				opacity: 1;
				visibility: visible;
				transition: all 0.5s;
			}
		}
	}

	.search_button {
		display: block;
		width: 25px;
		height: 25px;
		object-fit: contain;
		float: right;
		margin: 30px 20px 0;
		// background: url('../images/search.png') center center no-repeat;
		background: url('../images/search01.png') center center no-repeat;
	}

	.search_box {
		width: 100%;
		height: 85px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		margin: auto;
		z-index: 88;
		background: #fff;
		display: none;

		.main {
			height: 85px;
			background: url('../images/icon19.png') left center no-repeat;
			box-sizing: border-box;
			padding-top: 20px;
			position: relative;
		}

		form {
			width: 100%;
			input:nth-of-type(1) {
				width: 500px;
				float: left;
				height: 40px;
				font-size: 14px;
				color: #999999;
				margin-left: 50px;
				outline: none
			}

			button {
				width: 75px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #ff000a;
				border-radius: 4px;
				font-size: 14px;
				color: #fff;
				float: right;
				margin-right: 50px;
				border: none;
				display: block;
			}

			span {
				display: block;
				width: 30px;
				height: 30px;
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				cursor: pointer;
				border-radius: 15px;
				background: @mc1;

				&:after {
					display: block;
					content: '';
					width: 20px;
					height: 2px;
					background: #fff;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					transform: rotate(45deg);
				}

				&:before {
					display: block;
					content: '';
					width: 2px;
					height: 20px;
					background: #fff;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					transform: rotate(45deg);
				}
			}
		}
	}
}

.toptop_active {
	.nav li>a {
		color: #333 !important;
	}

	.search_button {
		background: url('../images/search01.png') center center no-repeat !important;
	}

	.nav .erji a {
		color: #fff;
	}
}

#menu {
	position: fixed;
	right: 2%;
	height: 196px;
	top: 0;
	bottom: 0;
	z-index: 12;
	width: 115px;
	margin: auto;

	li {
		box-sizing: border-box;
		position: relative;

		a {
			display: block;
			text-align: right;
			line-height: 28px;
			color: #fff;
			opacity: 0;
			padding-right: 25px;
		}

		&:after {
			display: block;
			content: '';
			width: 4px;
			height: 4px;
			background: #fff;
			position: absolute;
			right: 4px;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: -1;
		}
	}

	.active {
		a {
			opacity: 1;
		}

		&:after {
			width: 6px;
			height: 6px;
		}
	}
}

.menu_seven {
	li {
		a {
			color: #333 !important;
		}

		&:after {
			background: #333 !important;
		}
	}
}

.banner1 {
	height: 600px;
	position: relative;

	.swiper-prev {
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		position: absolute;
		left: 0px;
		top: 45%;
		z-index: 2;
		opacity: 0;
		.transition();
	}

	.swiper-next {
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		position: absolute;
		right: 0px;
		top: 45%;
		z-index: 2;
		opacity: 0;
		.transition();
	}

	&:hover {

		.swiper-next,
		.swiper-prev {
			opacity: 1;
			.transition();
		}
	}

	.swiper-pagination {
		bottom: 20px;

		.swiper-pagination-bullet {
			opacity: 1;
			width: 12px;
			height: 12px;
			background: #fff;
		}

		.swiper-pagination-bullet-active {
			background: @mc1;
		}
	}
}

.banner1 .swiper-slide {
	width: 100%;
	height: 100%;
}

.neiye_banner {

	// height: 300px;background: url('../images/banner.jpg') top center no-repeat;
	img {
		display: block;
		width: 100%;
	}
}

.fixed-none {
	display: none;
}

.factive {
	display: block;
}

.banner_nav {
	background: #666666;
	height: 30px;
	margin-bottom: 35px;

	.title {
		font-size: 12px;
		color: #fff;
		line-height: 30px;

		a,
		span {
			font-size: 12px;
			color: #fff;
			line-height: 30px;
		}
	}
}

// 首页开始

.main_title01 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 238px;
	width: 1200px;

	h3 {
		color: #fff;
		font-size: 30px;
		text-align: center;
		line-height: 90px;
		font-weight: bold;
	}

	p {
		font-size: 20px;
		color: #fff;
		text-align: center;
	}

	a {
		display: block;
		width: 165px;
		height: 50px;
		border: 1px solid #fff;
		font-size: 18px;
		text-align: center;
		line-height: 50px;
		margin: 70px auto 0;
		color: #fff;
		.transition();

		&:hover {
			border-color: @mc1;
			background: @mc1;
			.transition();
		}
	}

	h3,
	p {
		position: relative;
		bottom: -120%;
		opacity: 0;
	}

	a {
		position: relative;
		opacity: 0;
	}
}

.main_title02 {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	overflow: hidden;
	height: 238px;
	width: 1200px;

	h3 {
		color: #fff;
		font-size: 50px;
		line-height: 90px;
		font-weight: bold;
		text-align: right;
	}

	p {
		font-size: 20px;
		color: #fff;
		text-align: right;
	}

	a {
		display: block;
		width: 165px;
		height: 50px;
		border: 1px solid #fff;
		font-size: 18px;
		text-align: center;
		line-height: 50px;
		margin-top: 70px;
		color: #fff;
		.transition();
		float: right;

		&:hover {
			border-color: @mc1;
			background: @mc1;
			.transition();
		}
	}

	h3,
	p {
		position: relative;
		bottom: -120px;
		opacity: 0;
	}

	a {
		position: relative;
		opacity: 0;
	}
}


#dowebok {
	// transform: translate3d(0px, 0px, 0px) !important;
	transform: translate3d(0px, 0px, 0px);

	.section {
		height: 100% !important;
		.scale(1);
		.transition(1s);
	}

	.section01.active {
		.scale(1.08);
		.transition(6s);
	}

	.section02.active {
		.scale(1.08);
		.transition(6s);
	}

	.section03.active {
		.scale(1.08);
		.transition(6s);
	}

	.section04.active {
		.scale(1.08);
		.transition(6s);
	}

	.section05.active {
		.scale(1.08);
		.transition(6s);
	}
}



.section01 {
	background: url('../images/bg01.jpg?v=1.1') center center;
	background-size: cover;
	-webkit-background: cover;
}

.section02 {
	background: url('../images/bg02.jpg?v=1.0') center center;
	background-size: cover;
	-webkit-background: cover;
}

.section03 {
	background: url('../images/bg03.jpg?v=1.0') center center;
	background-size: cover;
	-webkit-background: cover;
}

.section04 {
	background: url('../images/bg04.jpg?v=1.0') center center;
	background-size: cover;
	-webkit-background: cover;
}

.section05 {
	background: url('../images/bg05.jpg?v=1.0') center center;
	background-size: cover;
	-webkit-background: cover;
}

.section06 {

	// background: url('../images/bg06.jpg?v=1.0') center center;;background-size: cover;
	.huodong_banner {
		width: 100%;
		height: 100%;

		.swiper-slide {
			a {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.hd-swiper-pagination {
		position: absolute;
		width: 1200px;
		bottom: 18%;
		z-index: 8;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;

		.swiper-pagination-bullet {
			width: 160px;
			height: 95px;
			border-radius: 5px;
			overflow: hidden;
			opacity: 1;
			position: relative;
			box-sizing: border-box;
			border: 2px solid #fff;

			img {
				display: block;
				width: 156px;
				height: 91px;
				object-fit: cover;
			}

			p {
				background: rgba(0, 0, 0, 0.5);
				text-align: center;
				.txt;
				width: 100%;
				.transition();
				color: #fff;
				line-height: 95px;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.swiper-pagination-bullet-active {
			p {
				opacity: 0;
				.transition();
			}
		}
	}
}

.section07 {
	position: relative;

	.section07_main {
		height: 360px;
		width: 1200px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;

		li {
			width: 360px;
			float: left;
			margin-right: 60px;
			margin-top: -90px;

			div {
				overflow: hidden;

				img {
					display: block;
					width: 390px;
					height: 220px;
				}
			}

			p:nth-of-type(1) {
				font-size: 18px;
				text-align: center;
				line-height: 45px;
				margin-top: 8px;
			}

			p:nth-of-type(2) {
				text-align: center;
				color: #666666;
			}

			p:nth-of-type(3) {
				text-align: center;
				color: @mc1;
				margin-top: 25px;
			}
		}

		li:last-of-type {
			margin-right: 0px;
		}
	}
}


// 首页结束

.layer_box {
	background: @mc1;
	width: 600px;
	height: 400px;
	box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px;
	overflow: hidden;

	>p {
		text-align: center;
		line-height: 108px;
		font-size: 34px;
		color: #fff;
		font-weight: bold;
	}

	form {
		box-sizing: border-box;
		text-align: center;
		padding: 28px 45px;
		display: block;
		width: 590px;
		background: #fff;
		position: relative;

		input:nth-of-type(2) {
			border: 1px solid #cccccc;
			width: 500px;
			height: 35px;
			text-indent: 1em;
			font-size: 14px;
			line-height: 35px;
			margin-bottom: 12px;
			float: left;
		}

		input:nth-of-type(3) {
			border: 1px solid #cccccc;
			width: 500px;
			height: 35px;
			text-indent: 1em;
			font-size: 14px;
			line-height: 35px;
			margin-bottom: 12px;
			float: right;
		}

		input:nth-of-type(4) {
			border: 1px solid #cccccc;
			width: 350px;
			height: 35px;
			text-indent: 1em;
			font-size: 14px;
			line-height: 35px;
			margin-bottom: 12px;
			float: left;
		}

		img {
			display: inline-block;
			height: 35px;
		}

		a {
			width: 280px;
			height: 35px;
			text-align: center;
			color: #fff;
			background: @mc1;
			border-radius: 5px;
			font-size: 16px;
			margin: 20px auto 10px;
			display: block;
			line-height: 35px;
		}

		p {
			text-align: center;
			color: @mc1;
			font-size: 16px;
		}
	}
}

//底部样式

.footer_box {
	margin-top: 100px;
	background: #f5f5f5 url('../images/bg07.jpg') center top no-repeat;
	padding: 15px 0;
	box-sizing: border-box;

	.foot_nav {
		padding-bottom: 15px;
		border-bottom: 1px solid #cccccc;
		margin-bottom: 15px;

		.foot_nav_item {
			width: 120px;
			padding-left: 50px;
			box-sizing: border-box;
			float: left;
			margin-right: 65px;

			h3 {
				width: 75px;
				color: #333;
				line-height: 45px;
				border-bottom: 1px solid #dedede;
				font-size: 16px;
				margin-bottom: 15px;
				font-weight: bold;
			}

			a {
				display: block;
				line-height: 24px;
				font-size: 12px;
			}
		}

		.foot_nav_item:first-of-type {
			width: 160px;

			a {
				display: inline-block;
				width: 32px;
				line-height: 24px;
				width: 52px;
			}
		}
	}

	.footer_bottom {
		.footer_bottom_item01 {
			width: 720px;
			float: left;

			p,
			a {
				line-height: 28px;
				color: #666666;
			}
		}

		.footer_bottom_item02 {
			width: 200px;
			float: left;

			a:nth-of-type(1) {
				background: url('../images/bg09.png') 0px 0px;
			}

			a:nth-of-type(2) {
				background: url('../images/bg10.png') 0px 0px;
			}

			a:nth-of-type(3) {
				background: url('../images/bg11.png') 0px 0px;
			}

			a {
				display: inline-block;
				width: 50px;
				height: 50px;
				margin: 0px 5px;
				border: 1px solid #c1c1c1;
				border-radius: 50%;
				position: relative;

				img {
					display: block;
					width: 120px;
					height: 120px;
					position: absolute;
					left: -35px;
					top: -125px;
					display: none;
					opacity: 0;
					.transition();
				}

				&:hover {
					background-position-y: -50px;
					border-color: @mc1;

					img {
						display: block;
						opacity: 1;
						.transition();
					}
				}
			}
		}

		.footer_bottom_item03 {
			float: right;

			p:nth-of-type(1) {
				color: #666;
				text-align: right;
			}

			p:nth-of-type(2) {
				font-size: 28px;
				line-height: 36px;
				color: @mc1;
				text-align: right;
			}
		}
	}
}

.fix_box {
	display: block;
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 99;
	width: 75px;
	margin: auto;
	height: 355px;

	>div {
		width: 75px;
		background: @mc1;
		margin-bottom: 1px;
		height: 70px;
		.transition();
		float: right;
		cursor: pointer;
		position: relative;

		img:nth-of-type(1) {
			display: block;
			margin: 0 auto;
		}

		img:nth-of-type(2) {
			display: none;
			width: 100px;
			height: 100px;
			position: absolute;
			right: 100px;
			border: 1px solid #eee;
			top: -20px;
		}

		p {
			color: #fff;
			text-align: center;
			font-size: 14px;
		}

		&:hover {
			width: 100px;
			.transition();
		}
	}

	>div:nth-of-type(3) {
		&:hover {
			img:nth-of-type(2) {
				display: block;
			}
		}
	}

	>div:nth-of-type(1) {
		width: 220px;
		position: relative;
		right: -145px;
		.transition(.8s);

		div:nth-of-type(1) {
			width: 75px;
			float: left;
		}

		div:nth-of-type(2) {
			height: 70px;
			float: right;
			width: 140px;
			box-sizing: border-box;
			padding-top: 15px;

			span {
				display: inline-block;
				height: 40px;
				border-left: 1px solid #fff;
				width: 140px;
				color: #fff;
				line-height: 40px;
				text-indent: 1em;
				font-size: 14px;
				letter-spacing: 1px;
			}
		}

		&:hover {
			right: 0px;
			.transition(.8s);
		}
	}
}

// 留言
.order {
	margin-left: 30px;
}

.order li {
	margin-top: 30px;
	position: relative;
	font-weight: bold;
	font-size: 18px;
}

.order>li:nth-child(5) {
	height: 70px;
}

.order li input {
	position: absolute;
	left: 150px;
	width: 375px;
}

.order li textarea {
	position: absolute;
	left: 150px;
	bottom: 0px;
	width: 375px;
	height: 100px;
}

.order p,
input {
	display: inline-block;
	font-size: 18px;
}

.order input {
	height: 20px;
	border: 1px solid #cfcfcf;
}

.order textarea {
	border: 1px solid #cfcfcf;
}

#submit {
	width: 230px;
	height: 50px;
	border-radius: 10px;
	background: #dd2121;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	margin: 0 auto;
	display: block;
}

#submit:hover {
	border: 2px solid #ddd;
}

// 联系我们

.contact_box01 {
	h3 {
		font-size: 36px;
		text-align: center;
		line-height: 48px;
	}

	p:nth-of-type(1) {
		font-size: 16px;
		text-align: center;
		color: #666;
		line-height: 30px;
	}

	p:nth-of-type(2) {
		font-size: 16px;
		text-align: center;
		color: #999;
		margin-bottom: 35px;
		text-transform: uppercase;
	}
}

.contact_box02 {
	li {
		width: 292px;
		box-sizing: border-box;
		height: 190px;
		border: 1px solid #e5e5e5;
		margin-right: 10px;
		background: #f5f5f5;
		padding-top: 80px;
		margin-bottom: 10px;
		float: left;

		p:nth-of-type(1) {
			font-size: 16px;
			line-height: 1;
			text-align: center;
			margin-bottom: 15px;
		}

		p:nth-of-type(2) {
			text-align: center;
			margin: 0 auto;
			line-height: 28px;
			width: 270px;

			a {
				overflow-wrap: break-word;
			}
		}
	}

	li:nth-of-type(4n) {
		margin-right: 0px;
	}

	li:nth-of-type(1) {
		background: #f5f5f5 url('../images/bg23.png') center 20px no-repeat;
	}

	li:nth-of-type(2),
	li:nth-of-type(3) {
		background: #f5f5f5 url('../images/bg25.png') center 20px no-repeat;
	}

	li:nth-of-type(4) {
		background: #f5f5f5 url('../images/bg30.png') center 20px no-repeat;
	}

	li:nth-of-type(5) {
		background: #f5f5f5 url('../images/bg_jd.png') center 20px no-repeat;
	}

	li:nth-of-type(6),
	li:nth-of-type(7) {
		background: #f5f5f5 url('../images/bg27.png') center 20px no-repeat;
	}

	li:nth-of-type(8) {
		background: #f5f5f5 url('../images/bg26.png') center 20px no-repeat;
	}

	li:nth-of-type(9) {
		background: #f5f5f5 url('../images/bg_chin.png') center 20px no-repeat;
	}

	li:nth-of-type(10) {
		background: #f5f5f5 url('../images/bg31.png') center 20px no-repeat;
	}

	li:nth-of-type(11) {
		background: #f5f5f5 url('../images/bg29.png') center 20px no-repeat;
	}

	li:nth-of-type(12) {
		background: #f5f5f5 url('../images/bg28.png') center 20px no-repeat;
	}
}

.contact_box03 {
	margin-top: 20px;

	h3 {
		font-size: 36px;
		text-align: center;
		line-height: 90px;
	}

	#allmap {
		width: 1200px;
		height: 400px;
		border: 1px solid #e5e5e5;
	}
}

.contact_box04 {
	margin-top: 20px;
	text-align: center;

	li {
		display: inline-block;
		width: 140px;

		img {
			display: block;
			width: 130px;
			height: 130px;
		}

		p {
			text-align: center;
			line-height: 30px;
		}
	}
}

.contact_main {
	position: relative;
	padding: 30px;
	background: #eee;
	box-sizing: border-box;
	margin-bottom: 20px;

	#dituContent,
	#allmap {
		width: 60%;
		height: 350px;
		overflow: hidden;
		border: 1px solid #ddd;
		float: right;
	}

	.contact-info {
		line-height: 30px;
		color: #333;
		width: 35%;
		float: left;
		padding-left: 10px;

		h2 {
			font-size: 20px;
			font-weight: bold;
		}

		p {
			display: block;
			line-height: 32px;
			color: #000;
		}

		img {
			display: block;
			width: 115px;
			height: 115px;
			margin-top: 10px;
		}
	}
}

// 联系我们结束

// 公司简介



// 公司简介结束

// 品牌文化

.ppbs_title {
	margin-bottom: 50px;
	position: relative;

	h3 {
		font-size: 36px;
		line-height: 48px;
	}

	p {
		font-size: 16px;
		color: #cccccc;
		text-transform: uppercase;
	}

	&:after {
		display: block;
		content: '';
		width: 40px;
		height: 4px;
		background: @mc1;
		position: absolute;
		left: 0;
		bottom: -15px;
	}
}

.ppbs {
	.ppbs_main {
		float: left;
		width: 780px;

		.ppbs_main_info {
			line-height: 30px;
			text-align: justify;
		}
	}

	img {
		display: block;
		width: 310px;
		float: right;
	}
}

.ppgs {
	background: linear-gradient(to bottom, #f8f8f8 0%, #f8f8f8 70%, #fff 70%, #fff 100%);

	.ppgs_main {
		width: 660px;
		float: right;
		padding-top: 70px;
	}

	img {
		display: block;
		float: left;
	}

	.ppgs_main_info {
		line-height: 30px;
		text-align: justify;
	}
}

.csr {
	margin-top: 90px;

	.csr_main {
		width: 730px;
		float: left;
	}

	>img {
		display: block;
		width: 440px;
		margin-top: 130px;
		float: right;
	}
}

.company {
	background: url('../images/bg17.jpg') center top no-repeat;
	padding: 80px 0px 100px;
	margin-top: 50px;

	.ppbs_title {

		h3,
		p {
			color: #fff;
		}
	}

	.company_title {
		color: #fff;
		font-size: 18px;
		line-height: 30px;
		margin-bottom: 40px;
	}

	.company_info {
		* {
			color: #fff !important;
		}
	}
}

.history_box {
	height: 739px;
	background: url('../images/bg18.jpg') center top no-repeat;
	box-sizing: border-box;

	.ppbs_title {
		padding-top: 55px;
	}

	.main {
		height: 739px;
		position: relative;

		ul {
			li {
				width: 145px;
				position: absolute;

				p:nth-of-type(1) {
					color: #000;
					line-height: 24px;
				}

				p:nth-of-type(2) {
					color: #666;
					line-height: 24px;
				}
			}

			li:nth-of-type(1) {
				left: -45px;
				top: 420px;
			}

			li:nth-of-type(2) {
				left: 37px;
				top: 310px;
			}

			li:nth-of-type(3) {
				left: 222px;
				top: 380px;
			}

			li:nth-of-type(4) {
				left: 310px;
				top: 268px;
			}

			li:nth-of-type(5) {
				left: 504px;
				top: 331px;
			}

			li:nth-of-type(6) {
				left: 572px;
				top: 170px;
			}

			li:nth-of-type(7) {
				left: 785px;
				top: 293px;
			}

			li:nth-of-type(8) {
				left: 804px;
				top: 100px;
			}

			li:nth-of-type(9) {
				left: 1069px;
				top: 197px;
			}

			li:nth-of-type(10) {
				left: 1030px;
				top: 56px;
			}
		}
	}
}

.design {
	padding-top: 60px;
	padding-bottom: 40px;

	.design_title {
		margin-bottom: 50px;
		position: relative;

		h3 {
			font-size: 36px;
			line-height: 48px;
			text-align: center;
		}

		p {
			font-size: 16px;
			color: #cccccc;
			text-transform: uppercase;
			text-align: center;
		}

		&:after {
			display: block;
			content: '';
			width: 40px;
			height: 4px;
			background: @mc1;
			position: absolute;
			left: 0;
			bottom: -15px;
			right: 0;
			margin: auto;
		}
	}

	.design_info {
		font-size: 14px;
		line-height: 30px;
		margin-bottom: 68px;
		color: #000;
		text-align: center;
	}

	.design_banner {
		.swiper-slide {
			.design_item {
				width: 290px;
				height: 410px;
				float: left;
				margin-right: 13px;

				div:nth-of-type(1) {
					overflow: hidden;

					img {
						display: block;
						width: 290px;
						height: 290px;
						object-fit: contain;
					}
				}

				div:nth-of-type(2) {
					width: 290px;
					height: 120px;
					background: #f2f2f2;
					box-sizing: border-box;
					padding: 12px 30px;

					p:nth-of-type(1) {
						font-size: 20px;
						color: 000;
						font-weight: bold;
						line-height: 45px;
					}

					p:nth-of-type(2) {
						color: #666666;
					}
				}
			}

			div:last-of-type {
				margin-right: 0px;
				float: right;
			}
		}
	}

	.design-swiper-pagination {
		text-align: center;
		margin-top: 30px;

		.swiper-pagination-bullet {
			border-radius: 0;
			opacity: 1;
			background: #dcdcdc;
		}

		.swiper-pagination-bullet-active {
			background: @mc1;
		}
	}
}

.join_box {
	background: url('../images/bg19.jpg') center center no-repeat;
	height: 739px;

	.ppbs_title {
		padding-top: 45px;

		h3 {
			color: #fff;
		}
	}

	.join_info {
		width: 1060px;

		* {
			color: #fff !important;
		}
	}

	.join_tel {
		font-size: 28px;
		color: @mc1;
		margin-top: 30px;
	}
}

.honor_box {
	background: url('../images/bg20.jpg') center bottom no-repeat;
	padding: 45px 0 90px;

	.ppbs_title::after {
		display: none;
	}

	ul {
		li {
			height: 55px;
			text-align: center;
			background: url('../images/bg21.png') center -55px no-repeat;
			.transition();
			cursor: pointer;

			span:nth-of-type(1) {
				display: inline-block;
				width: 65px;
				font-size: 30px;
				line-height: 55px;
				color: @mc1;
				text-indent: 22px;
				font-weight: bold;
				position: relative;
				vertical-align: top;

				&:after {
					display: block;
					content: '';
					width: 100px;
					border-top: 1px dashed #cccccc;
					position: absolute;
					left: 66px;
					top: 28px;
					z-index: 1;
				}

				&:before {
					display: block;
					content: '';
					height: 55px;
					border-left: 1px dashed #cccccc;
					position: absolute;
					left: 116px;
					top: 0px;
					z-index: 1;
				}
			}

			span:nth-of-type(2) {
				display: inline-block;
				width: 12px;
				height: 12px;
				border: 2px solid @mc1;
				border-radius: 8px;
				vertical-align: top;
				background: #fff;
				margin: 20px 39px;
				position: relative;
				z-index: 2;
			}

			p {
				display: inline-block;
				width: 1025px;
				line-height: 55px;
				font-size: 16px;
				text-indent: 20px;
				position: relative;
				vertical-align: top;
				text-align: left;

				&:after {
					display: block;
					content: '';
					width: 6px;
					height: 6px;
					border: 1px solid @mc1;
					border-left: none;
					border-bottom: none;
					transform: rotate(45deg);
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}

			&:hover {
				background-position-y: 0px;
				.transition();
			}
		}
	}
}

// 品牌文化结束


// 主营产品

.product_banner {
	width: 100%;
	position: relative;

	.swiper-slide {
		img {
			display: block;
			width: 100%;
		}
	}

	.product-swiper-pagination {
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30px;
		z-index: 8;

		.swiper-pagination-bullet {
			border-radius: 0;
			opacity: 1;
			background: #dcdcdc;
		}

		.swiper-pagination-bullet-active {
			background: @mc1;
		}
	}
}

.product_index1_type_box {
	margin-bottom: 85px;

	.product_index1_type_title {
		padding: 55px 0px;

		h3 {
			font-size: 34px;
			color: #000;
			text-align: center;
			line-height: 1.5;
		}

		p {
			font-size: 16px;
			color: #ccc;
			text-align: center;
			text-transform: uppercase;
		}
	}

	.product_index1_type_main01 {
		margin-bottom: 15px;

		.product_index1_type_main01_item {
			width: 390px;
			margin-right: 15px;
			position: relative;
			height: 580px;
			overflow: hidden;
			float: left;

			img {
				display: block;
				width: 390px;
				height: 580px;
				object-fit: cover;
				.transition();
			}

			div {
				width: 390px;
				position: absolute;
				left: 0;
				top: 0;
				padding-top: 50px;

				p:nth-of-type(1) {
					font-size: 22px;
					text-align: center;
					line-height: 45px;
					margin-bottom: 20px;
					position: relative;

					&:after {
						display: block;
						content: '';
						width: 20px;
						height: 2px;
						background: #000;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -8px;
						margin: auto;
					}
				}

				p:nth-of-type(2) {
					text-align: center;
					color: @mc1;
				}
			}

			&:hover {
				img {
					.scale(1.08);
					.transition();
				}
			}
		}

		.product_index1_type_main01_item:nth-of-type(3) {
			margin-right: 0px;
			float: right;
		}
	}

	.product_index1_type_main02 {
		.product_index1_type_main02_item {
			width: 227px;
			float: left;
			margin-right: 16px;

			div {
				overflow: hidden;
				margin-bottom: 15px;

				img {
					width: 227px;
					height: 220px;
					display: block;
					.transition();
				}
			}

			p {
				text-align: center;
				position: relative;
				line-height: 50px;

				&:after {
					display: block;
					content: '';
					width: 20px;
					height: 2px;
					background: #000;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0px;
					margin: auto;
				}
			}

			&:hover {
				img {
					.scale(1.08);
					.transition();
				}

				p {
					color: @mc1;

					&:after {
						background: @mc1;
						.transition();
					}
				}
			}
		}

		.product_index1_type_main02_item:nth-of-type(5) {
			margin-right: 0px;
		}
	}
}

.product_video {
	background: url('../images/bg14.jpg') center center no-repeat;
	height: 480px;
	box-sizing: border-box;
	padding-top: 120px;
	.transition();

	img {
		display: block;
		margin: 0 auto 30px;
	}

	p:nth-of-type(1) {
		font-size: 34px;
		color: #fff;
		text-align: center;
	}

	p:nth-of-type(2) {
		font-size: 16px;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
	}

	a {
		display: block;
		width: 130px;
		height: 38px;
		color: #fff;
		border: 1px solid #fff;
		text-align: center;
		line-height: 38px;
		margin: 30px auto 0;
		.transition();

		&:hover {
			background: @mc1;
			.transition();
			border-color: @mc1;
		}
	}

	&:hover {
		// .scale(1.03);
		.transition();
	}
}

.product_banner_box {
	padding-bottom: 65px;

	.product_title {
		padding: 55px 0px;

		h3 {
			font-size: 34px;
			color: #000;
			text-align: center;
			line-height: 1.5;
		}

		p {
			font-size: 16px;
			color: #ccc;
			text-align: center;
			text-transform: uppercase;
		}
	}

	.product01_banner {
		height: 520px;

		.swiper-slide {
			box-sizing: border-box;
			padding: 20px 20px 0;

			.product_item {
				width: 385px;
				float: left;
				margin-right: 0px;
				height: 500px;
				box-sizing: border-box;
				padding: 10px;
				.transition();
				border-radius: 5px;

				span {
					display: inline-block;
					background: #edecec;
					padding: 0px 13px;
					color: #999999;
					line-height: 30px;
					margin-bottom: 30px;
				}

				div {
					img {
						display: block;
						width: 365px;
						height: 365px;
						object-fit: cover;
					}
				}

				h3 {
					color: #666666;
					text-align: center;
					line-height: 60px;
				}

				&:hover {
					box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
					.transition();
				}
			}

			.product_item:nth-of-type(3) {
				margin-right: 0px;
				float: right;
			}
		}
	}

	.product01-swiper-pagination {
		text-align: center;
		z-index: 8;
		margin: 60px auto 0;

		.swiper-pagination-bullet {
			border-radius: 0;
			opacity: 1;
			background: #dcdcdc;
			margin: 0px 8px;
			width: 10px;
			height: 10px;
		}

		.swiper-pagination-bullet-active {
			background: @mc1;
		}
	}
}

.product_box01 {
	.product_box_item01 {
		width: 50%;
		position: relative;
		float: left;

		img {
			display: block;
			width: 100%;
		}

		div {
			width: calc(~"100% - 30px");
			height: calc(~"100% - 30px");
			padding-top: 14%;
			.transition();
			box-sizing: border-box;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;

			p:nth-of-type(1) {
				font-size: 34px;
				color: #fff;
				text-align: center;
			}

			p:nth-of-type(2) {
				font-size: 18px;
				color: #fff;
				text-transform: uppercase;
				line-height: 36px;
				text-align: center;
			}

			a {
				display: block;
				width: 130px;
				height: 40px;
				border: 1px solid #fff;
				margin: 30px auto 0;
				line-height: 40px;
				color: #fff;
				text-align: center;
				.transition();

				&:hover {
					border-color: @mc1;
					background: @mc1;
					.transition();
				}
			}

			&:hover {
				border: 3px solid rgba(255, 255, 255, 0.5);
				.transition();
			}
		}
	}
}

// 主营产品

// 售后服务

.service_custom {
	.service_before_main {
		padding-bottom: 65px;

		img {
			float: right;
		}

		h3 {
			font-size: 22px;
			line-height: 60px;
			width: 575px;
			float: left;
		}

		p {
			line-height: 30px;
			width: 575px;
			float: left;
		}
	}

	.service_after_main {
		li {
			width: 576px;
			margin-bottom: 40px;

			img {
				display: block;
				width: 575px;
				height: 253px;
				object-fit: cover;
			}

			p:nth-of-type(1) {
				font-size: 22px;
				line-height: 70px;
			}

			p:nth-of-type(2) {
				line-height: 30px;

				span {
					color: @mc1;
				}
			}
		}
	}

}



.search_list {
	li {
		margin-right: 13px;
		margin-bottom: 20px;
		width: 290px;
		float: left;

		div {
			width: 290px;
			height: 290px;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			border: 1px solid #eee;

			img {
				width: 288px;
				height: 288px;
				display: block;
				object-fit: contain;
				.transition();
			}
		}

		h4 {
			font-size: 16px;
			color: #333;
			line-height: 40px;
			text-align: center;
			background: #eee;
		}

		&:hover {
			h4 {
				color: @mc1;
			}

			// img {.scale(1.05);.transition();}
		}
	}

	li:nth-of-type(4n) {
		margin-right: 0px;
	}
}

.de-product-list {
	.de-page-mian {
		.page-inner {
			span {
				display: none;
			}

			input {
				display: none;
			}

			.page-btn {
				display: none;
			}
		}
	}
}

.goods_search_list {
	display: flex;
	flex-wrap: wrap;

	li {
		margin-right: 13px;
		margin-bottom: 20px;
		width: 290px;

		div:nth-of-type(1) {
			width: 290px;
			height: 195px;
			box-sizing: border-box;
			overflow: hidden;

			img {
				width: 290px;
				height: 195px;
				object: cover;
				display: block;
				.transition();
			}
		}

		h4 {
			font-size: 15px;
			color: #333;
			line-height: 40px;
			background: #eee;
			.transition();
			text-align: center;
			box-sizing: border-box;
			padding: 0 5px;
		}

		&:hover {
			img {
				.scale(1.05);
				.transition();
			}

			h4 {
				color: #fff;
				background: @mc1;
				.transition();
			}
		}
	}

	li:nth-of-type(4n) {
		margin-right: 0px;
	}
}

.search_pagenation {
	text-align: center;
	margin-top: 30px;

	a {
		display: inline-block;
		width: 80px;
		height: 35px;
		font-size: 14px;
		background: #333;
		color: #fff;
		line-height: 35px;
		margin: 0 5px;
	}

	.noothers {
		display: none;
	}
}


.no-goods {
	padding: 50px 0px;

	img {
		display: block;
		margin: 0 auto;
	}

	p {
		font-size: 16px;
		text-align: center;
		line-height: 60px;
	}
}

.product_index_type {
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 45px;
	padding-bottom: 10px;

	li {
		display: inline-block;
		margin-right: 10px;

		a {
			display: block;
			width: 100px;
			height: 30px;
			text-align: center;
			background: #eee;
			line-height: 30px;
		}

		&:hover {
			a {
				background: @mc1;
				color: #fff;
			}
		}
	}

	.active a {
		background: @mc1;
		color: #fff;
	}
}

.product_index_title {
	width: 930px;
	box-sizing: border-box;
	height: 50px;
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 50px;
	font-weight: bold;
}

.product_index {
	width: 930px;

	.product_index_main {
		li {
			width: 285px;
			float: left;
			margin-right: 37px;
			box-sizing: border-box;
			margin-bottom: 35px;
			height: 410px;
			.transition();
			box-sizing: border-box;
			padding: 74px 13px 0px;

			div {
				width: 259px;
				height: 259px;
				overflow: hidden;

				img {
					display: block;
					width: 259px;
					height: 259px;
					object-fit: contain;
					.transition();
					box-sizing: border-box;
				}
			}

			h3 {
				line-height: 80px;
				color: #666666;
				font-size: 14px;
				text-align: center;
			}

			&:hover {
				box-shadow: 0px 0px 20px rgba(0, 0, 0, .2);
				.transition();
			}
		}

		li:nth-of-type(3n) {
			margin-right: 0px;
			float: right;
		}
	}
}


.product_index1 {
	width: 927px;

	.product_index_title {
		width: 927px;
		background: #f5f5f5;
		box-sizing: border-box;
		height: 60px;
		border-left: 5px solid @mc1;
		font-size: 24px;
		padding-left: 20px;
		margin-bottom: 20px;
		line-height: 60px;
	}

	.product_index_main {
		li {
			width: 927px;
			border: 2px solid #e5e5e5;
			padding: 13px 30px 0px 13px;
			margin-bottom: 15px;
			height: 200px;
			box-sizing: border-box;
			.transition();

			img {
				display: block;
				width: 250px;
				height: 167px;
				object-fit: cover;
				float: left;
			}

			div {
				width: 610px;
				float: right;

				h3 {
					font-size: 18px;
					line-height: 34px;
					.transition();
				}

				p:nth-of-type(1) {
					font-size: 12px;
					line-height: 20px;
					color: #666;
					margin-bottom: 16px;
				}

				p:nth-of-type(2) {
					text-align: right;
					margin-top: 20px;
					margin-top: 50px;

					span {
						display: inline-block;
						width: 90px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						background: #b6b6b6;
						color: #fff;
						.transition();
					}
				}
			}

			&:hover {
				border-color: @mc1;
				.transition();

				h3 {
					color: @mc1;
					.transition();
				}

				span {
					background: @mc1  !important;
					.transition();
				}
			}
		}
	}
}


//产品详情 多图

.product_info_tab {
	padding-top: 20px;
	padding-left: 20px;

	.product_info_tab_box {
		.product_info_tab_box_img_big {
			width: 500px;
			height: 500px;

			img {
				height: 500px;
				width: 500px;
				display: block;
				box-sizing: border-box;
				border: 1px solid #eee;
			}

			a {
				display: none;
			}

			a:nth-of-type(1) {
				display: block;
			}
		}

		.product_info_tab_box_img_small {
			height: 100px;
			width: 500px;

			img {
				height: 96px;
				width: 96px;
				box-sizing: border-box;
				float: left;
				margin: 2px;
				border: 1px solid #eee;
			}

			img:hover {
				border: 1px solid #dd2121;
			}
		}
	}

	>div:nth-child(2) {
		width: 400px;

		h3 {
			font-size: 24px;
			line-height: 36px;
		}

		img:nth-of-type(1) {}

		div:nth-of-type(1) {
			text-align: center;
			margin-top: 100px;

			img {
				width: 240px;
				height: 240px;
				border: 1px solid #eee;
			}

			p {
				font-size: 20px;
				line-height: 38px;
				color: #545454;
				text-align: center;
			}
		}
	}
}

.title_1200 {
	margin: 0 auto 20px;
	padding: 12px 0px 9px 0px;
	width: 1200px;
	height: 25px;
	border-bottom: 2px solid #dbdbdb;

	strong {
		max-width: 150px !important;
		height: 25px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		float: left;
		display: inline-block;
		padding-bottom: 8px;
		height: 100%;
		border-bottom: 2px solid #414141;
		color: @mc1;
		text-align: center;
		font-size: 18px;
	}

	span {
		overflow: hidden;
		zoom: 1;
		font-size: 12px;
		padding-left: 20px;
		display: inline-block;
		float: right;
		height: 25px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #666;
		background: url('../images/sprite.gif') no-repeat;
		background-position: 0 -149px;

		a {
			color: #666;
		}
	}
}

.title1 {
	padding: 12px 0px 9px 0px;
	height: 25px;
	border-bottom: 2px solid #dbdbdb;
	margin-bottom: 30px;

	strong {
		max-width: 150px !important;
		height: 25px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		float: left;
		display: inline-block;
		padding-bottom: 8px;
		height: 100%;
		border-bottom: 2px solid #414141;
		color: #da020d;
		text-align: center;
	}

	span {
		overflow: hidden;
		zoom: 1;
		font-size: 12px;
		padding-left: 20px;
		display: inline-block;
		height: 25px;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: url('../Image/sprite.gif') no-repeat;
		background-position: 0 -150px;
	}
}

.title2 {
	width: 100%;
	height: 80px;

	.crumbs {
		line-height: 80px;
		height: 80px;
		box-sizing: border-box;
		float: left;
		font-size: 14px;
		position: relative;

		a {
			font-size: 14px;
		}

		// &:before {display: block;content:'';width: 4px;height: 21px;background: @mc1;position: absolute;left: 0;top: 0;bottom: 0;margin:auto; }
	}
}


.title3 {
	margin-bottom: 30px;
	width: 1300px;
	height: 40px;
	border-bottom: 1px solid #dedede;
	margin: 0 auto 30px;

	.crumbs {
		line-height: 40px;
		height: 40px;
		width: 400px;
		padding-left: 20px;
		box-sizing: border-box;
		float: left;
		font-size: 14px;
		position: relative;

		a {
			font-size: 14px;
		}

		&:before {
			display: block;
			content: '';
			width: 4px;
			height: 21px;
			background: @mc1;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
}


.article_content_1200 {
	border: 1px solid #ececec;
	box-sizing: border-box;
	padding: 30px;
	width: 1200px;
	margin: 0 auto;
	min-height: 300px;

	img {
		display: block;
		max-width: 1140px;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 800px;
		height: 600px;
		margin: 20px auto;
	}
}

.article_content_800 {
	box-sizing: border-box;
	padding: 30px 0;
	width: 800px;
	margin: 0 auto;
	min-height: 300px;

	img {
		display: block;
		max-width: 800px;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 800px;
		height: 600px;
		margin: 20px auto;
	}
}

.article_content_900 {
	box-sizing: border-box;
	padding: 30px 0;
	width: 900px;
	margin: 0 auto;
	min-height: 200px;

	p {
		font-size: 16px;
	}

	img {
		display: block;
		max-width: 900px;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 900px;
		height: 600px;
		margin: 20px auto;
	}
}



.article {
	overflow: hidden;
	margin-bottom: 12px;
	width: 920px;

	.article_content {
		width: 880px;
		margin: 30px auto;

		img {
			max-width: 850px;
			display: block;
			margin: 0 auto;
		}
	}

	.news_title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 60px;
	}

	.meta {
		color: #999;
		text-align: center;
		line-height: 28px;
		margin-bottom: 10px;
	}
}


.article_info {
	box-sizing: border-box;
	margin-bottom: 12px;
	width: 1200px;

	.article_title {
		font-size: 26px;
		text-align: center;
		line-height: 32px;
		margin: 0px auto 30px;
	}

	.meta {
		color: #999;
		text-align: center;
		line-height: 30px;
		margin-bottom: 20px;
		border-bottom: 1px solid @mc1;
		text-align: left;
		height: 30px;
		position: relative;

		span {
			display: block;
			width: 90px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			position: absolute;
			right: 0;
			background: @mc1;
			top: 0;
			color: #fff;
			cursor: pointer;
		}
	}

	img {
		max-width: 860px;
		display: block;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 800px;
		height: 500px;
		margin: 30px auto;
	}
}


.article_info_bottom {
	position: relative;
	border-top: 1px solid @mc1;
	line-height: 30px;
	margin-top: 20px;

	span {
		display: block;
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		position: absolute;
		right: 0;
		background: @mc1;
		top: 0;
		color: #fff;
		cursor: pointer;
	}
}

.hot_goods {
	h3 {
		line-height: 46px;
		border-bottom: 2px solid #dfdfdf;
		padding-left: 30px;
		box-sizing: border-box;
		font-size: 24px;
		background: url('../images/bg40.jpg') left center no-repeat;
		position: relative;
		margin: 40px auto 20px;

		span {
			display: inline-block;
			line-height: 46px;
			color: #c2c2c1;
			vertical-align: middle;
			margin-left: 10px;
		}

		&:after {
			display: block;
			width: 130px;
			content: '';
			background: @mc1;
			height: 2px;
			position: absolute;
			left: 0;
			bottom: -2px;
		}
	}

	ul {
		li {
			width: 220px;
			margin-right: 13px;
			box-sizing: border-box;
			border: 1px solid #dfdfdf;
			float: left;

			div {
				overflow: hidden;

				img {
					display: block;
					width: 218px;
					height: 145px;
					object-fit: cover;
					.transition();
				}
			}

			p {
				text-align: center;
				line-height: 40px;
			}

			&:hover {
				img {
					.scale(1.05);
					.transition();
				}

				p {
					color: #fff;
					background: @mc1;
				}
			}
		}

		li:nth-of-type(4) {
			margin-right: 0px;
		}
	}
}

.article_content {
	box-sizing: border-box;
	padding: 20px;

	img {
		max-width: 1160px;
		display: block;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 800px;
		height: 500px;
		margin: 30px auto;
	}
}

.article_1200 {
	box-sizing: border-box;
	padding: 30px 20px;
	border: 1px solid #ececec;

	img {
		max-width: 1160px;
		display: block;
		margin: 0 auto;
	}

	iframe {
		display: block;
		width: 800px;
		height: 500px;
		margin: 30px auto;
	}
}



#allmap1 {
	width: 1200px;
	height: 450px;
	overflow: hidden;
	border: 3px solid #eee;
	margin: 10px auto;
}

.company_box2 {
	li {
		width: 390px;
		display: inline-block;
		margin-bottom: 10px;
		height: 30px;

		p {
			font-size: 16px;
		}
	}
}

// 招商加盟

.com_dh {
	h2 {
		font-size: 36px;
		text-align: center;
		margin-bottom: 5px;
		font-weight: 400;
	}

	h4 {
		color: #666666;
		font-size: 18px;
		text-align: center;
		font-weight: 400;
	}
}

.jiameng_banner {
	background: url("../images/jiameng_banner.jpg")no-repeat top center;
	max-width: 1920px;
	height: 631px;
}

.jiameng1 {
	background: #ececec;
	position: relative;
	height: 666px;

	h2 {
		font-size: 36px;
		text-align: center;
		margin-bottom: 5px;
		font-weight: 400;
	}

	h4 {
		color: #666666;
		font-size: 18px;
		text-align: center;
		font-weight: 400;
		margin-bottom: 40px;
	}

	.jiameng1_nr {
		background: #fff;
		height: 666px;
		padding: 50px;
		box-sizing: border-box;
		margin: -67px auto 0;
		position: absolute;
		;
		z-index: 22;
		left: 0;
		right: 0;

		>img {
			float: right;
			margin-left: 40px;
			width: 513px;
			display: block;
		}

		.jiameng1_txt {
			h3 {
				font-size: 20px;
				color: #1f2a64;
				line-height: 60px;
				font-weight: bold;
			}

			p {
				line-height: 30px;
			}
		}
	}
}

.jiameng2 {
	background: #fff;
	padding: 50px 0;

	img {
		margin-top: 40px;
	}
}

.jiameng3 {
	background: url("../images/jiameng3.jpg") no-repeat top center fixed;
	height: 610px;
	box-sizing: border-box;
	padding-top: 60px;
	text-align: center;
	color: #fff;

	h2 {
		font-size: 36px;
		font-weight: 400;
		margin-bottom: 60px;
	}

	p {
		line-height: 36px;
	}
}

.jiameng4 {
	background: #fff;
	padding: 50px 0;
}


.fwlc {
	margin-top: 40px;
	overflow: hidden;
	height: 160px;
}

.fwlc1 {
	width: 1200px;
	margin: 0 auto;
}

.fwlc1_head h3 {
	font-size: 30px;
	color: #b62e27;
	text-align: center;
	margin-top: 50px;
	font-weight: normal;
	margin-bottom: 50px;
}

.fwlc1_con ul li {
	float: left;
	height: 133px;
	width: 130px;
	margin-right: 41px;
	text-align: center;
	position: relative;
}

.fwlc1_con ul li:last-child {
	margin-right: 0;
}

.fwlc1_con_text h3 {
	font-weight: normal;
	color: #555555;
	font-size: 24px;
	margin-top: 38px;
}

.fwlc1_con_text p {
	font-size: 14px;
	color: #555555;
}

.fwlc1_con_text span {
	display: block;
	width: 30px;
	height: 2px;
	background: #555555;
	margin: 0 auto;
	margin-top: 9px;
}

.pic img {
	-webkit-filter: grayscale(100%);
	/* Chrome, Safari, Opera */
	filter: grayscale(100%);
}

.fwlc1_con ul li:hover .pic img {
	-webkit-filter: grayscale(0);
	/* Chrome, Safari, Opera */
	filter: grayscale(0);
}

.fwlc1_con ul li:hover h3 {
	color: #cc3333;
}

.fwlc1_con ul li:hover p {
	color: #cc3333;
}

.fwlc1_con ul li:hover span {
	background: #cc3333;
}

.fwlc1_con ul li:hover .pic:before {
	background: url("../images/bg_progress_pic11.png") no-repeat;
}

.fwlc1_con ul li:hover .pic:after {
	background: url("../images/bg_progress_pic12.png") no-repeat;
}

.fwlc1_con li {
	float: left;
	width: 25%;
	text-align: center;
}

.fwlc1_con li .pic {
	position: relative;
	display: block;
	width: 136px;
	margin: 0 auto;
}

.fwlc1_con li .pic:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../images/bg_progress_pic.png) no-repeat;
	content: '';
}

.fwlc1_con li .pic:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../images/bg_progress_pic1.png) no-repeat;
	content: '';
}

.fwlc1_con li.p0 .pic:after {
	-webkit-animation: rollP0 2s linear infinite;
	-o-animation: rollP0 2s linear infinite;
	animation: rollP0 2s linear infinite;
}

.fwlc1_con li.p0 .pic:before {
	-webkit-animation: rollP00 2s linear infinite;
	-o-animation: rollP00 2s linear infinite;
	animation: rollP00 2s linear infinite;
}

.fwlc1_con li.p1 .pic:after {
	-webkit-animation: rollP1 2s linear infinite;
	-o-animation: rollP1 2s linear infinite;
	animation: rollP1 2s linear infinite;
}

.fwlc1_con li.p1 .pic:before {
	-webkit-animation: rollP1 2s linear infinite;
	-o-animation: rollP11 2s linear infinite;
	animation: rollP11 2s linear infinite;
}

.fwlc1_con li.p2 .pic:after {
	-webkit-animation: rollP0 2s linear infinite;
	-o-animation: rollP0 2s linear infinite;
	animation: rollP0 2s linear infinite;
}

.fwlc1_con li.p2 .pic:before {
	-webkit-animation: rollP00 2s linear infinite;
	-o-animation: rollP00 2s linear infinite;
	animation: rollP00 2s linear infinite;
}

.fwlc1_con li.p3 .pic:after {
	-webkit-animation: rollP1 2s linear infinite;
	-o-animation: rollP1 2s linear infinite;
	animation: rollP1 2s linear infinite;
}

.fwlc1_con li.p3 .pic:before {
	-webkit-animation: rollP1 2s linear infinite;
	-o-animation: rollP11 2s linear infinite;
	animation: rollP11 2s linear infinite;
}

.fwlc1_con li.p4 .pic:after {
	-webkit-animation: rollP0 2s linear infinite;
	-o-animation: rollP0 2s linear infinite;
	animation: rollP0 2s linear infinite;
}

.fwlc1_con li.p4 .pic:before {
	-webkit-animation: rollP00 2s linear infinite;
	-o-animation: rollP00 2s linear infinite;
	animation: rollP00 2s linear infinite;
}

.fwlc1_con li.p5 .pic:after {
	-webkit-animation: rollP1 2s linear infinite;
	-o-animation: rollP1 2s linear infinite;
	animation: rollP1 2s linear infinite;
}

.fwlc1_con li.p5 .pic:before {
	-webkit-animation: rollP11 2s linear infinite;
	-o-animation: rollP11 2s linear infinite;
	animation: rollP11 2s linear infinite;
}

.fwlc1_con li.p6 .pic:after {
	-webkit-animation: rollP0 2s linear infinite;
	-o-animation: rollP0 2s linear infinite;
	animation: rollP0 2s linear infinite;
}

.fwlc1_con li.p6 .pic:before {
	-webkit-animation: rollP00 2s linear infinite;
	-o-animation: rollP00 2s linear infinite;
	animation: rollP00 2s linear infinite;
}

.fwlc1_con li .pic img {
	display: block;
	width: 100%;
}

.fwlc1_con li h3 {
	margin: 30px 0 15px;
	font-size: 18px;
	font-weight: normal;
	color: #555556;
}

.fwlc1_con li p {
	margin: 0;
}


@-webkit-keyframes rollP0 {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-o-keyframes rollP0 {
	0% {
		-o-transform: rotate(0deg);
	}

	100% {
		-o-transform: rotate(360deg);
	}
}

@-moz-keyframes rollP0 {
	0% {
		-moz-transform: rotate(0deg);
	}

	100% {
		-moz-transform: rotate(360deg);
	}
}

@keyframes rollP0 {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rollP00 {
	0% {
		-webkit-transform: rotate(360deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
	}
}

@-o-keyframes rollP00 {
	0% {
		-o-transform: rotate(360deg);
	}

	100% {
		-o-transform: rotate(0deg);
	}
}

@-moz-keyframes rollP00 {
	0% {
		-moz-transform: rotate(360deg);
	}

	100% {
		-moz-transform: rotate(0deg);
	}
}

@keyframes rollP00 {
	0% {
		transform: rotate(360deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

@-webkit-keyframes rollP1 {
	0% {
		-webkit-transform: rotate(270deg);
	}

	100% {
		-webkit-transform: rotate(630deg);
	}
}

@-o-keyframes rollP1 {
	0% {
		-o-transform: rotate(270deg);
	}

	100% {
		-o-transform: rotate(630deg);
	}
}

@-moz-keyframes rollP1 {
	0% {
		-moz-transform: rotate(270deg);
	}

	100% {
		-moz-transform: rotate(630deg);
	}
}

@keyframes rollP1 {
	0% {
		transform: rotate(270deg);
	}

	100% {
		transform: rotate(630deg);
	}
}

@-webkit-keyframes rollP11 {
	0% {
		-webkit-transform: rotate(630deg);
	}

	100% {
		-webkit-transform: rotate(270deg);
	}
}

@-o-keyframes rollP11 {
	0% {
		-o-transform: rotate(630deg);
	}

	100% {
		-o-transform: rotate(270deg);
	}
}

@-moz-keyframes rollP11 {
	0% {
		-moz-transform: rotate(630deg);
	}

	100% {
		-moz-transform: rotate(270deg);
	}
}

@keyframes rollP11 {
	0% {
		transform: rotate(630deg);
	}

	100% {
		transform: rotate(270deg);
	}
}

.fwlc1_con_text {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
}



.jiameng5 {
	background: #ececec;
	padding-bottom: 50px;

	h2 {
		text-align: center;
		font-size: 36px;
		font-weight: 400;
		padding: 50px 0;
	}

	form {
		.form-tr {
			width: 300px;
			float: left;

			p {
				width: 40px;
				float: left;
				line-height: 40px;
			}

			input {
				background: #fff;
				height: 40px;
				border: 1px solid #dcdcdc;
				width: 227px;
				text-indent: 1em;
				font-size: 14px;
			}

			.captcha {
				width: 120px;
				vertical-align: top;
			}

			img {
				display: inline-block;
				height: 40px;
			}
		}

		.submit {
			background: #d53f22;
			color: #fff;
			height: 40px;
			width: 200px;
			line-height: 40px;
			margin-top: 20px;
			text-align: center;
			display: block;
			margin: 40px auto 0;
		}
	}
}

// 产品详情

.product_info_box {
	.product_info_box_right {
		width: 927px;
		float: right;

		.banner_box {
			height: 475px;
			width: 400px;
			position: relative;
			float: left;

			.productinfo_banner {
				width: 400px;
				height: 400px;

				.swiper-slide {
					img {
						display: block;
						width: 400px;
						height: 400px;
						object-fit: contain;
						border: 1px solid #eee;
						box-sizing: border-box;
					}
				}
			}

			.productinfo-swiper-pagination {
				overflow: hidden;
				text-align: center;
				height: 64px;
				width: 400px;
				margin: 15px auto 0;

				li {
					width: 50px;
					height: 52px;
					margin: 0 4px;
					box-sizing: border-box;
					padding-top: 1px;

					img {
						width: 48px;
						height: 48px;
						display: block;
						object-fit: cover;
					}
				}

				.swiper-pagination-bullet {
					opacity: 1;
					background: none;
					border: 1px solid #eee;
					border-radius: 0;
				}

				.swiper-pagination-bullet-active {
					opacity: 1;
					background: none;
					border: 1px solid @mc1;
					box-sizing: border-box;
				}
			}

			.swiper-prev {
				position: absolute;
				left: 0px;
				bottom: 0px;
				cursor: pointer;
			}

			.swiper-next {
				position: absolute;
				right: 0px;
				bottom: 0px;
				cursor: pointer;
			}
		}

		.product_info_box_right_info {
			width: 450px;
			float: right;

			h1 {
				font-size: 20px;
				line-height: 1;
				padding-bottom: 15px;
				font-weight: bold;
				border-bottom: 1px solid #dedede;
			}

			>p:nth-of-type(1) {
				line-height: 24px;
				overflow: hidden;
				color: #666;
				border-bottom: 1px solid #dedede;
				padding: 20px 0px;
			}

			ul {
				margin-top: 20px;

				li {
					display: inline-block;
					width: 140px;

					img {
						display: block;
						width: 130px;
						height: 130px;
					}

					p {
						text-align: center;
						line-height: 30px;
					}
				}
			}

			a {
				color: #fff;
				background: @mc1;
				width: 120px;
				height: 36px;
				line-height: 36px;
				margin-top: 20px;
				text-align: center;
				display: inline-block;
				border-radius: 5px;
				margin-right: 20px;
			}
		}
	}
}

.product_info_content_box {
	.product_info_title {
		line-height: 40px;
		margin: 20px auto 0;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;

		span {
			font-size: 18px;
			display: block;
			line-height: 40px;
			width: 160px;
			text-align: center;
			color: #666;
		}
	}

	.param_more {
		width: 900px;
		margin: 20px auto;

		p {
			width: 450px;
			float: left;
			background: #eee;
			margin-bottom: 2px;
			height: 40px;

			span:nth-of-type(1) {
				width: 150px;
				box-sizing: border-box;
				border-right: 2px solid #fff;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
				float: left;
			}

			span:nth-of-type(2) {
				width: 300px;
				box-sizing: border-box;
				float: left;
				text-align: center;
				line-height: 40px;
				border-right: 2px solid #fff;
			}
		}
	}

	.newsPage {
		width: 925px;
		margin: 0 auto;
		border-top: 1px solid #eaeaea;
		padding-top: 10px;
	}

	.goods_info_bottom {
		position: relative;
		border-top: 1px solid @mc1;
		line-height: 30px;
		margin-top: 20px;
		margin-bottom: 30px;

		span {
			display: block;
			width: 90px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			position: absolute;
			right: 0;
			background: @mc1;
			top: 0;
			color: #fff;
			cursor: pointer;
		}
	}
}

.info_title {
	clear: both;
	margin: 20px auto;
	width: 1200px;
	height: 40px;
	border-top: 1px solid #e0dede;
	border-bottom: 1px solid #e0dede;

	span {
		display: inline-block;
		width: 90px;
		height: 100%;
		text-align: center;
		color: #333;
		line-height: 40px;
	}
}

.newsPage {
	margin-top: 20px;

	.page-a {
		line-height: 30px;
		text-align: left;
		color: #fff;
		position: relative;
		z-index: 2;
		margin-bottom: 5px;

		a {
			display: inline-block;
			margin-left: 10px;
		}

		&:before {
			width: 60px;
			height: 30px;
			background: #a2a2a2;
			display: block;
			position: absolute;
			left: -4px;
			top: 0;
			z-index: -1;
			content: '';
		}
	}
}

//新闻index

.news_index {
	li {
		padding: 30px 0px;
		border-bottom: 1px solid #e6e6e6;

		img {
			display: block;
			margin-right: 20px;
			object-fit: cover;
			width: 300px;
			height: 200px;
			float: left;
		}

		.news_index_info {
			width: 880px;
			float: right;

			h3 {
				font-size: 18px;
				line-height: 45px;
				color: #333;
				font-weight: bold;
			}

			p:nth-of-type(1) {
				font-size: 14px;
				line-height: 30px;
				color: #666;
				height: 60px;
				overflow: hidden;
				margin-bottom: 20px;
				text-indent: 2em;
			}

			p:nth-of-type(2) {
				background: url('../images/icon7.png') left center no-repeat;
				line-height: 30px;
				font-size: 12px;
				color: #999;
				padding-left: 20px;

				time {
					display: inline-block;
					line-height: 30px;
					color: #999;
					float: right;
				}
			}

			time {
				color: #666;
			}
		}

		&:hover {
			h3 {
				color: @mc1;
			}
		}
	}
}

//新闻index1

.article_type {
	margin-bottom: 30px;

	li {
		display: inline-block;

		a {
			display: block;
			width: 150px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background: #eee;
			margin-right: 8px;

			&:hover {
				background: @mc1;
				color: #fff;
			}
		}
	}
}

.videoType {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;

	li {
		margin-right: 100px;

		&:last-of-type {
			margin-right: 0;
		}

		a {
			line-height: 30px;
			font-size: 20px;
			color: #000;
		}
	}

	.activeLi {
		a {
			font-weight: bold;
			font-size: 22px;
		}
	}
}

.news_index1 {
	li {
		border: 1px solid #ededed;
		box-sizing: border-box;
		padding: 30px;
		margin-bottom: 20px;
		height: 350px;

		div:nth-of-type(1) {
			width: 200px;
			height: 290px;
			overflow: hidden;
			box-sizing: border-box;
			margin-right: 45px;
			float: left;

			img {
				width: 200px;
				height: 290px;
				.transition();
				object-fit: cover;
				display: block;
			}
		}

		div:nth-of-type(2) {
			float: left;
			padding-top: 30px;
			width: 800px;

			h3 {
				font-size: 24px;
			}

			p:nth-of-type(1) {
				font-size: 16px;
				line-height: 60px;
			}

			p:nth-of-type(2) {
				background: #f5f9fd;
				color: #666;
				line-height: 24px;
				box-sizing: border-box;
				padding-top: 20px;
			}
		}

		&:hover {
			img {
				.scale(1.05);
				.transition();
			}

			h3 {
				color: @mc1;
			}
		}
	}

}

//新闻index2

.news_index2 {
	li {
		width: 370px;
		height: 345px;
		margin-right: 45px;
		box-sizing: border-box;
		float: left;

		div {
			overflow: hidden;

			img {
				display: block;
				width: 370px;
				height: 220px;
				object-fit: cover;
				.transition();
			}
		}

		h3 {
			font-size: 20px;
			line-height: 60px;
		}

		p {
			text-indent: 25px;
			background: url('../images/bg22.png') left center no-repeat;
			color: #999999;
			font-size: 12px;
			line-height: 20px;

			time {
				float: right;
				display: block;
				color: #999999;
				line-height: 20px;
			}
		}

		&:hover {
			h3 {
				color: @mc1;
			}

			img {
				.scale(1.08);
				.transition();
			}
		}
	}

	li:nth-of-type(3n) {
		margin-right: 0px;
	}
}

//新闻index3

.news_index3 {
	li {
		margin-bottom: 15px;

		h3 {
			font-size: 18px;
			line-height: 45px;
			color: #333;
			text-indent: 40px;
			background: url('../images/bg13.png') left 6px no-repeat;
		}

		div {
			background: #f5f5f5;
			padding: 10px 20px;

			p:nth-of-type(1) {
				text-indent: 40px;
				background: url('../images/bg13.png') left -81px no-repeat;
				line-height: 45px;
			}

			p:nth-of-type(2) {
				color: #666;
				line-height: 30px;
			}
		}

		&:hover {
			h3 {
				color: @mc1;
			}
		}
	}
}


//新闻index4

.news_index4 {
	li {
		border: 1px solid #dedede;
		width: 390px;
		margin-right: 15px;
		box-sizing: border-box;
		float: left;
		margin-bottom: 20px;
		height: 210px;
		padding-top: 30px;

		div:nth-of-type(1) {
			width: 95px;
			box-sizing: border-box;
			height: 110px;
			border-right: 1px solid #dedede;
			margin-right: 15px;
			float: left;

			time:nth-of-type(1) {
				font-size: 40px;
				line-height: 70px;
				text-align: center;
				display: block;
				text-align: center;
			}

			time:nth-of-type(2) {
				font-size: 14px;
				text-align: center;
				display: block;
			}
		}

		div:nth-of-type(2) {
			width: 260px;
			float: left;
			height: 110px;

			h3 {
				font-size: 18px;
				line-height: 50px;
			}

			p {
				font-size: 14px;
				line-height: 24px;
				height: 48px;
				overflow: hidden;
				color: #666;
			}
		}

		.news_index_more {
			border-top: 1px solid #dedede;
			padding: 0 15px;
			color: #666;
			line-height: 40px;
			height: 40px;
			margin-top: 30px;

			span {
				display: inline-block;
				line-height: 40px;
				color: #000;
				float: right;
				margin-right: 10px;
				.transition();
			}
		}

		&:hover {
			h3 {
				color: @mc1;
			}

			.news_index_more {
				color: @mc1;

				span {
					margin-right: 0px;
					color: @mc1;
					.transition();
				}
			}
		}
	}

	li:nth-of-type(3n) {
		margin-right: 0px;
		float: right;
	}
}



//新闻index5

.news_index5 {
	li {
		width: 280px;
		box-sizing: border-box;
		border: 1px solid #ededed;
		float: left;
		margin-right: 26px;
		margin-bottom: 15px;

		.img {
			width: 278px;
			height: 200px;
			overflow: hidden;
			box-sizing: border-box;

			img {
				width: 278px;
				display: block;
				height: 200px;
				.transition();
				object-fit: cover;
			}
		}

		h3 {
			line-height: 36px;
			box-sizing: border-box;
			padding: 0px 10px;
			font-size: 16px;
			background: #eee;
			text-align: center;
		}
	}

	li:nth-of-type(4n) {
		margin-right: 0px;
		float: right;
	}
}



//新闻index6

.news_index6 {
	li {
		margin-bottom: 15px;

		h3 {
			font-size: 18px;
			line-height: 45px;
			color: #333;
			text-indent: 40px;
			background: url('../Images/bg13.png') left 6px no-repeat;
		}

		div {
			background: #f5f5f5;
			padding: 20px;

			p:nth-of-type(1) {
				text-indent: 40px;
				background: url('../Images/bg13.png') left -81px no-repeat;
				line-height: 45px;
			}

			p:nth-of-type(2) {
				color: #666;
				line-height: 30px;
			}
		}
	}
}


.news_index7 {
	li {
		display: block;
		width: 370px;
		height: 415px;
		box-sizing: border-box;
		float: left;
		background: #f5f5f5;
		position: relative;
		margin-right: 45px;

		img {
			display: block;
			width: 370px;
			height: 240px;
			object-fit: cover;
			margin-bottom: 15px;
		}

		div:nth-of-type(1) {
			width: 350px;
			margin: 0 auto;

			h3 {
				font-size: 16px;
				line-height: 55px;
				border-bottom: 1px solid #ccc;
				margin-bottom: 15px;
			}

			p {
				color: #666;
				height: 48px;
				line-height: 24px;
				overflow: hidden;
			}
		}

		div:nth-of-type(2) {
			background: #006ace;
			width: 75px;
			height: 75px;
			position: absolute;
			left: 0px;
			top: 0px;
			box-sizing: border-box;
			padding-top: 14px;

			time:nth-of-type(1) {
				color: #fff;
				font-size: 22px;
				display: block;
				text-align: center;
			}

			time:nth-of-type(2) {
				color: #fff;
				font-size: 14px;
				display: block;
				text-align: center;
			}
		}

		&:hover {
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
			.transition();

			div:nth-of-type(1) {
				h3 {
					border-color: #006ace;
				}
			}
		}
	}

	li:nth-of-type(3) {
		float: right;
		margin-right: 0px;
	}
}

.xwlb {
	.xwlb_title {
		width: 927px;
		background: #f5f5f5;
		box-sizing: border-box;
		height: 60px;
		border-left: 5px solid @mc1;
		font-size: 24px;
		padding-left: 20px;
		margin-bottom: 20px;
		line-height: 60px;
	}

	ul {
		li {
			width: 927px;
			border: 2px solid #e5e5e5;
			padding: 13px 30px 0px 13px;
			margin-bottom: 15px;
			height: 200px;
			box-sizing: border-box;
			.transition();

			img {
				display: block;
				width: 250px;
				height: 167px;
				object-fit: cover;
				float: left;
			}

			div {
				width: 610px;
				float: right;

				h3 {
					font-size: 18px;
					line-height: 34px;
					.transition();
				}

				p:nth-of-type(1) {
					font-size: 12px;
					line-height: 20px;
					color: #666;
					margin-bottom: 16px;
				}

				p:nth-of-type(2) {
					line-height: 24px;
					color: #666;
					height: 48px;
					overflow: hidden;
				}

				p:nth-of-type(3) {
					text-align: right;
					margin-top: 20px;

					span {
						display: inline-block;
						width: 90px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						background: #b6b6b6;
						color: #fff;
						.transition();
					}
				}
			}

			&:hover {
				border-color: @mc1;
				.transition();

				h3 {
					color: @mc1;
					.transition();
				}

				span {
					background: @mc1  !important;
					.transition();
				}
			}
		}
	}
}

.cjwt {
	.cjwt_title {
		width: 927px;
		background: #f5f5f5;
		box-sizing: border-box;
		height: 60px;
		border-left: 5px solid @mc1;
		font-size: 24px;
		padding-left: 20px;
		margin-bottom: 20px;
		line-height: 60px;
	}

	ul {
		li {
			margin-bottom: 15px;

			h3 {
				font-size: 18px;
				line-height: 45px;
				color: #333;
				text-indent: 40px;
				background: url('../images/bg13.png') left 6px no-repeat;
			}

			div {
				background: #f5f5f5;
				padding: 10px 20px;

				p:nth-of-type(1) {
					text-indent: 40px;
					background: url('../images/bg13.png') left -81px no-repeat;
					line-height: 45px;
				}

				p:nth-of-type(2) {
					color: #666;
					line-height: 30px;
				}
			}

			&:hover {
				h3 {
					color: @mc1;
				}
			}
		}
	}
}

.ypsg {
	ul {
		li {
			width: 300px;
			height: 275px;
			float: left;
			margin-right: 9px;
			margin-bottom: 9px;

			div {
				width: 300px;
				height: 225px;
				box-sizing: border-box;
				border: 1px solid #e5e5e5;
				padding: 10px;

				img {
					display: block;
					width: 278px;
					height: 201px;
					object-fit: cover;
				}
			}

			p {
				line-height: 50px;
				background: #f0f0f0;
				text-align: center;
				.transition();
			}

			&:hover {
				p {
					background: @mc1;
					color: #fff;
					.transition();
				}
			}
		}

		li:nth-of-type(3n) {
			margin-right: 0px;
		}
	}
}

.hzkh {
	.hzkh_title {
		width: 927px;
		background: #f5f5f5;
		box-sizing: border-box;
		height: 60px;
		border-left: 5px solid @mc1;
		font-size: 24px;
		padding-left: 20px;
		margin-bottom: 20px;
		line-height: 60px;
	}

	ul {
		li {
			width: 300px;
			height: 275px;
			float: left;
			margin-right: 9px;
			margin-bottom: 9px;

			div {
				width: 300px;
				height: 225px;
				box-sizing: border-box;
				border: 1px solid #e5e5e5;
				padding: 10px;

				img {
					display: block;
					width: 278px;
					height: 201px;
					object-fit: contain;
				}
			}

			h3 {
				line-height: 50px;
				background: #f0f0f0;
				text-align: center;
				.transition();
			}

			&:hover {
				p {
					background: @mc1;
					color: #fff;
					.transition();
				}
			}
		}

		li:nth-of-type(3n) {
			margin-right: 0px;
		}
	}
}

.message {
	padding: 50px 0px 30px 30px;
	background: #eee;
	overflow: hidden;

	h3 {
		font-size: 30px;
		text-align: center;
		font-weight: bold;
		margin-bottom: 40px;
	}

	.form-tr {
		width: 550px;
		margin-right: 30px;
		float: left;
		margin-bottom: 20px;

		textarea {
			height: 80px;
			width: 550px;
			font-size: 18px;
			line-height: 38px;
			text-indent: 1em;
			border: 1px solid #dfdfdf;
			display: inline-block;
			margin-right: 14px;
			margin-bottom: 20px;
			font-size: 14px;
		}

		input {
			width: 550px;
			line-height: 38px;
			text-indent: 1em;
			margin-right: 14px;
			border: 1px solid #dfdfdf;
			font-size: 14px;
		}

		img {
			height: 38px;
			vertical-align: middle;
		}

		.captcha {
			width: 350px;
		}

		.error {
			font-size: 14px;
			color: #ce2029;
		}
	}

	.form-submit {
		.submit {
			display: block;
			width: 180px;
			height: 40px;
			border-radius: 5px;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			background: @mc1;
			color: #fff;
			margin: 20px auto;
		}
	}
}


.message_index1 {
	height: 800px;
	background: url('../images/message2_bg.jpg') center top no-repeat;
	box-sizing: border-box;
	padding-top: 170px;

	h2 {
		font-size: 55px;
		color: #fff;
		text-align: center;
	}

	h3 {
		font-size: 24px;
		color: #fff;
		text-align: center;
		margin-bottom: 190px;
		line-height: 2;
	}

	.contact_message {
		padding-left: 90px;
		position: relative;

		p:nth-of-type(1) {
			font-size: 30px;
			color: #666;
		}

		p:nth-of-type(2) {
			font-size: 14px;
			color: #999;
			margin-bottom: 20px;
			line-height: 40px;

			span {
				color: #c10708;
			}
		}

		.form-tr {
			width: 340px;
			height: 40px;
			display: inline-block;
			margin-bottom: 20px;
			margin-bottom: 20px;
		}

		input {
			width: 300px;
			height: 40px;
			text-indent: 1em;
			font-size: 14px;
			background: #f5f5f5;
		}

		img {
			position: absolute;
			left: 635px;
			top: 166px;
			height: 30px;
		}

		.form-submit {
			display: inline-block;

			a {
				background: @mc1;
				color: #fff;
				width: 300px;
				height: 40px;
				display: block;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}
}

.service_message {
	text-align: center;
	padding: 30px 0;

	h3 {
		font-size: 36px;
		color: #333;
	}

	h4 {
		font-size: 16px;
		color: #999;
		line-height: 2;
		margin-bottom: 20px;
	}

	li {
		display: inline-block;
		width: 200px;
		margin: 0px 30px;
	}
}


.pagination {
	text-align: center;
	margin-bottom: 20px;
	padding-top: 20px;
	line-height: 30px;

	.btn {
		display: inline-block;
		height: 30px;
		padding: 0px 5px;
		line-height: 30px;
		text-align: center;
		border: 1px solid #999;
		vertical-align: top;
	}

	.btn-inverse {
		background: @mc1;
		color: #fff;
		vertical-align: top;
	}

	select {
		height: 30px;
		vertical-align: top;
		border: 1px solid #999;
	}
}

.goods_list {
	margin-top: 30px;
}

//sidebar

.sidebar1_box {
	width: 230px;
	float: left;
	border: 1px solid #e9e9e9;
}

.sidebar_box_01 {
	width: 230px;
	margin-bottom: 25px;

	h3 {
		background: @mc1;
		color: #fff;
		line-height: 80px;
		text-align: center;
		font-size: 24px;
		margin-bottom: 2px;
	}

	a {
		display: block;
		width: 240px;
		box-sizing: border-box;
		padding: 0px 20px;
		line-height: 55px;
		margin-bottom: 2px;
		background: #ececeb;
		.transition();
		font-size: 16px;

		span {
			color: #fff;
			float: right;
			font-size: 24px;
			line-height: 55px;
			font-weight: bold;
		}

		&:hover {
			background: @mc1;
			color: #fff;
			.transition();
		}
	}

	.active {
		background: @mc1;
		color: #fff;
	}
}

.sidebar_box_03 {
	width: 230px;
	border: 1px solid #e9e9e9;
	float: left;

	h3 {
		color: #000000;
		line-height: 50px;
		font-size: 24px;
		text-indent: 20px;
		font-weight: bold;
	}

	li {
		>a {
			display: block;
			width: 230px;
			box-sizing: border-box;
			line-height: 50px;
			.transition();
			.transition();
			font-size: 16px;
			position: relative;
			border-top: 1px solid #e9e9e9;

			p {
				width: 190px;
				line-height: 50px;
				font-size: 16px;
				text-indent: 18px;
				color: #000;
			}

			&:after {
				width: 12px;
				height: 2px;
				content: '';
				display: block;
				background: #999;
				right: 24px;
				top: 0;
				bottom: 0;
				margin: auto;
				position: absolute;
			}

			&:before {
				width: 2px;
				height: 12px;
				content: '';
				display: block;
				background: #999;
				right: 29px;
				top: 0;
				bottom: 0;
				margin: auto;
				position: absolute;
			}

			&:hover {
				background: @mc1;
				color: #fff;
				.transition();
				background: #2a292b;

				p {
					color: #fff;
				}

				&:before {
					opacity: 0;
				}

				&:after {
					background: #fff;
				}
			}
		}

		// .active {
		// 	background: @mc1;color: #fff;.transition(); 
		// 	p {color: #fff;}
		// 	&:before {opacity: 0;}
		// }
		.erji {
			overflow: hidden;
			display: none;

			a {
				display: block;
				width: 230px;
				height: 50px;
				border-top: 1px solid #e9e9e9;
				box-sizing: border-box;
				line-height: 50px;
				text-indent: 18px;

				&:hover {
					background: #2a292b;
					color: #fff;
				}
			}
		}
	}
}


.article_930 {
	float: right;
	width: 927px;
}

.product_sidebar {
	width: 255px;
	border: 1px solid #ecedef;
	padding-bottom: 40px;
	float: left;
	margin-bottom: 20px;
	box-sizing: border-box;

	.product_sidebar_title {
		height: 105px;
		padding-top: 20px;
		background: #017045;
		box-sizing: border-box;

		p:nth-of-type(1) {
			font-size: 28px;
			color: #fff;
			text-align: center;
		}

		p:nth-of-type(2) {
			font-size: 16px;
			color: #fff;
			text-align: center;
			text-transform: uppercase;
			font-family: 'Time New Roman';
			line-height: 30px;
		}
	}

	ul {
		margin-bottom: 30px;

		li {
			width: 233px;
			height: 40px;
			margin: 15px auto 0;

			a {
				display: block;
				color: #333;
				padding-left: 30px;
				line-height: 40px;
				background: #eeeef0;

				&:hover {
					background: @mc1;
					color: #fff;
				}
			}
		}
	}

	.sidebar_info {
		.sidebar_info_title {
			height: 60px;
			line-height: 60px;
			background: #017045;
			font-size: 24px;
			text-align: center;
			color: #fff;
		}

		img {
			margin: 0 auto;
			display: block;
		}

		p {
			width: 220px;
			margin: 15px auto 0;
			font-size: 14px;
			line-height: 36px;

			span {
				display: block;
				line-height: 36px;
				color: @mc1;
				font-weight: bold;
			}
		}
	}
}

.news_sidebar {
	width: 240px;
	margin-bottom: 25px;

	h3 {
		background: @mc1;
		color: #fff;
		line-height: 60px;
		text-align: center;
		font-size: 22px;
		margin-bottom: 2px;
	}

	li {
		box-sizing: border-box;

		a {
			display: block;
			width: 240px;
			box-sizing: border-box;
			padding: 0px 20px;
			line-height: 45px;
			margin-bottom: 2px;
			background: #eee;
			.transition();
			font-size: 14px;

			span {
				color: #fff;
				float: right;
				font-size: 24px;
				line-height: 55px;
				font-weight: bold;
			}

			&:hover {
				background: @mc1;
				color: #fff;
				.transition();
			}
		}
	}
}

.content {
	margin-bottom: 30px;
	overflow: hidden;
}

.custom_article {
	img {
		max-width: 1200px;
	}

	h1 {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	.meta {
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}
}

//人才招聘

.jobs_list {
	margin-bottom: 1px;

	h3 {
		background: #eee;
		line-height: 60px;
		box-sizing: border-box;
		padding: 0px 65px 0px 85px;
		font-size: 24px;
		.transition();
		cursor: pointer;
		position: relative;

		&:after {
			display: block;
			width: 20px;
			height: 2px;
			content: '';
			background: #333;
			position: absolute;
			right: 66px;
			top: 25px;
		}

		&:before {
			display: block;
			width: 2px;
			height: 20px;
			content: '';
			background: #333;
			position: absolute;
			right: 75px;
			top: 16px;
			.transition();
		}
	}

	.jobs_list_info {
		box-sizing: border-box;
		padding: 40px 90px;
		border: 1px solid #dcdcdc;
		display: none;
	}

	.active {
		background: #000000;
		.transition();
		color: #fff;

		&:before {
			opacity: 0;
			.transition();
			background: #fff;
		}

		&:after {
			background: #fff;
		}
	}
}

.jobs_list:hover {
	h4 {
		font-weight: 600;
	}
}

.neiye_nav {
	height: 46px;
	margin-bottom: 24px;
	border-bottom: 1px solid #e5e5e5;

	a {
		display: inline-block;
		margin-right: 40px;
		padding: 0 5px;
		line-height: 45px;
	}

	.active {
		border-bottom: 2px solid @mc1;
	}
}

//招聘详情页
.jobs {
	table {
		border: 1px solid #333;
		width: 100%;

		tr:nth-of-type(1) {
			background: #000;

			td {
				text-align: center;

				strong {
					color: #fff;
				}
			}
		}

		td {
			text-align: center;
			width: 25%;
		}
	}

	tr {
		height: 40px;
	}

	.well {
		min-height: 300px;

		>p:nth-child(1) {
			font-size: 18px;
			color: #202020;
			margin-top: 20px;
			margin-bottom: 20px;
			background: #eee;
			line-height: 30px;
			text-indent: 1em;
		}

		>a:last-child {
			margin-top: 60px;
			font-size: 18px;
			color: #fff;
			display: block;
			width: 150px;
			height: 50px;
			text-align: center;
			background: @mc1;
			line-height: 50px;
		}

		>a:last-child:hover {
			font-weight: bold;
		}
	}
}

//招聘留言页面

#form2 {
	.order {
		width: 1000px;
		margin: 0 auto;
		border: 1px dashed #ccc;

		tr {
			td:nth-of-type(1) {
				width: 300px;
			}

			td:nth-of-type(2) {
				width: 700px;
			}
		}
	}
}

.clearfix,
.clear {
	clear: both;
}

// 荣誉资质列表页

.honor_index_box {
	ul {
		li {
			width: 220px;
			height: 340px;
			box-sizing: border-box;
			border: 1px solid #dcdcdc;
			float: left;
			margin-right: 25px;
			margin-bottom: 30px;

			.img {
				width: 218px;
				height: 298px;
				overflow: hidden;
				box-sizing: border-box;

				img {
					width: 218px;
					display: block;
					height: 298px;
					.transition();
					object-fit: contain;
					.transition();
				}
			}

			h3 {
				line-height: 40px;
				box-sizing: border-box;
				padding: 0px 10px;
				font-size: 16px;
				text-align: center;
			}

			&:hover {
				img {
					.scale(1.05);
					.transition();
				}
			}
		}

		li:nth-of-type(5n) {
			margin-right: 0px;
			float: right;
		}
	}
}


// 分页
.de-page-mian {
	overflow: hidden;
	text-align: center;
	font-size: 0;
	margin: 20px 0;

	.page-inner {
		display: inline-block;
		overflow: hidden;

		a {
			display: block;
			float: left;
			min-width: 26px;
			padding: 0 5px;
			height: 36px;
			border: 1px solid #dddddd;
			background: #fff;
			text-align: center;
			line-height: 36px;
			font-size: 14px;
			color: #333;
			margin-right: -1px;
			overflow: hidden;

			&.active,
			&:hover {
				color: #fff;
				border-color: @mc1;
				background: @mc1;
			}

			&.prev {
				margin-right: 10px;
				background: #fff url(../images/prev.jpg) no-repeat center;

				&.on {
					background: #fff url(../images/prev-hover.jpg) no-repeat center;
				}

				&:hover {
					background-color: #fff;
					border-color: #dddddd;
				}
			}

			&.next {
				margin-left: 10px;
				margin-right: 15px;
				background: #fff url(../images/next.jpg) no-repeat center;

				&.on {
					background: #fff url(../images/next-hover.jpg) no-repeat center;
				}

				&:hover {
					background-color: #fff;
					border-color: #dddddd;
				}
			}

			&.page-btn {
				font-size: 12px;
				margin-right: 0;
				width: 63px;
				margin-left: 10px;
			}
		}

		span {
			display: block;
			font-size: 12px;
			color: #333;
			float: left;
			line-height: 38px;
		}

		input {
			display: block;
			float: left;
			height: 36px;
			width: 36px;
			border: 1px solid #dddddd;
			text-align: center;
			line-height: 36px;
			font-size: 14px;
			color: #333;
			margin: 0 5px;
		}
	}
}

.news_info_content {
	width: 950px;

	.page-header {
		h1 {
			font-size: 25px;
			color: #000;
			margin-bottom: 10px;
		}

		p {
			text-align: center;
		}

		margin-bottom: 25px;
	}

	.list-con {
		min-height: 450px;
	}
}



.news_info {
	min-height: 450px;
}

.product_info_main {
	min-height: 450px;
	margin-top: 20px;
	width: 950px;

	>div:nth-of-type(1) {
		height: 400px;

		.product_info_main_img {
			width: 500px;
			height: 400px;
			position: relative;
			overflow: hidden;
			margin: 0 auto;
			border: 1px solid #ccc;

			img {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

		>div:nth-of-type(2) {
			width: 430px;
			height: 400px;

			h1 {
				display: block;
				margin: 10px auto;
				text-align: left;
				font-size: 22px;
				border-bottom: dashed 1px #ccc;
				padding-bottom: 15px;
			}

			p {
				margin-top: 20px;
				font-size: 14px;
				line-height: 36px;
				margin-bottom: 30px;
			}

			a {
				display: block;
				background: @mc2;
				width: 150px;
				line-height: 50px;
				text-align: center;
				color: #fff;
			}
		}
	}

	>div:nth-child(2) {
		height: 40px;
		background: #eee;
		margin-bottom: 20px;
		margin-top: 20px;

		h4 {
			width: 20%;
			background: @mc2;
			color: #fff;
			font-size: 16px;
			text-align: center;
			line-height: 40px;
		}
	}

	.product_info_content {
		min-height: 200px;
		width: 950px;
		margin: 0 auto;
	}
}


.product_info_main2 {
	.product_info_main2_top {
		.product_info_main_img {
			margin: 20px auto;

			// width: 500px;height: 500px;border:1px solid #ccc;position:relative;margin:0 auto;
			// img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:auto;max-width: 100%;max-height: 100%;margin:auto;}
			img {
				display: block;
				max-height: 500px;
				margin: 0 auto;
			}
		}

		h1 {
			text-align: center;
			font-size: 20px;
			line-height: 40px;
		}
	}

	.product_info_content_title {
		background: #ccc;
		margin-top: 30px;

		h4 {
			display: inline-block;
			line-height: 40px;
			background: #999;
			padding: 0px 20px;
			color: #fff;
		}
	}

	.product_info_content {
		min-height: 200px;
		padding: 20px 0;
	}
}



.product_info_main1 {
	min-height: 450px;
	width: 950px;

	>div:nth-of-type(1) {
		.product_info_main_img {
			width: 500px;
			height: 400px;
			position: relative;
			overflow: hidden;
			margin: 0 auto;
			border: 1px solid #ccc;
			background: #fff;

			img {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

		>div:nth-of-type(2) {
			width: 390px;
			height: 400px;

			h1 {
				display: block;
				margin: 10px auto;
				text-align: left;
				font-size: 22px;
				border-bottom: dashed 1px #ccc;
				line-height: 80px;
				margin-bottom: 30px;
			}

			table {
				width: 300px;

				tr {
					td:nth-of-type(1) {
						width: 80px;
						height: 40px;
						line-height: 40px;
					}

					td:nth-of-type(2) {
						width: 220px;
						height: 40px;
						line-height: 40px;
					}
				}
			}
		}
	}

	>div:nth-child(2) {
		height: 40px;
		background: #eee;
		margin: 30px auto;

		h4 {
			width: 20%;
			background: @mc1;
			color: #fff;
			font-size: 16px;
			text-align: center;
			line-height: 40px;
		}
	}

	.product_info_content {
		min-height: 200px;
		width: 1000px;
		margin: 0 auto;
	}
}



// 右侧悬浮侧边


.fix_side {
	width: 50px;
	position: fixed;
	top: 50%;
	right: 0;
	margin-top: -100px;
	z-index: 18;

	li {
		display: block;
		width: 50px;
		height: 50px;
		margin-bottom: 5px;
		position: relative;

		a {
			display: block;
			width: 50px;
			height: 50px;
		}
	}

	.back_to_top {
		cursor: pointer;
		background: #666666 url('../images/side04.png') center center no-repeat;
	}

	.qiao {
		cursor: pointer;
		background: #666666 url('../images/side05.png') center center no-repeat;
	}

	.sidemessage {
		background: #666666 url('../images/side02.png') center center no-repeat;

		span {
			position: absolute;
			height: 40px;
			line-height: 40px;
			display: block;
			background: @mc1;
			color: #fff;
			right: -240px;
			width: 240px;
			top: 5px;
			text-align: center;
			.transition();
		}

		&:hover {
			span {
				left: -240px;
				.transition();
			}
		}
	}

	.phone {
		background: #666666 url('../images/side01.png') center center no-repeat;

		span {
			position: absolute;
			height: 40px;
			line-height: 40px;
			display: block;
			background: @mc1;
			color: #fff;
			right: -115px;
			width: 115px;
			top: 5px;
			text-align: center;
			.transition();
		}

		&:hover {
			span {
				left: -115px;
				.transition();
			}
		}
	}

	.wx {
		background: #666666 url('../images/side03.png') center center no-repeat;

		img {
			position: absolute;
			right: -115px;
			top: -30px;
			border: 1px solid #ccc;
			width: 113px;
			height: 113px;
			.transition();
		}

		&:hover {
			img {
				left: -115px;
				.transition();
			}
		}
	}
}

.move_self:hover {
	-ms-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
}

//悬浮 图片向上移动
.move_y:hover img {
	-ms-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
}

//悬浮 图片放大
.move_big:hover img {
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
}


.move_big_self:hover {
	transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-o-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transition: all 0.7s;
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

.move_circle:hover img {
	-webkit-transform: rotate(360deg);
	animation: rotation 15s linear infinite;
	-moz-animation: rotation 15s linear infinite;
	-webkit-animation: rotation 15s linear infinite;
	-o-animation: rotation 15s linear infinite;
}

//按钮效果
.btn-0 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-0:before {
	background: @qt1;
	content: '';
	.transition(all .6s);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	z-index: -1;
}

.btn-0:hover:before {
	width: 100%;
}


.btn-1 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-1:before {
	.transition(all .6s);
	content: '';
	width: 0;
	height: 0;
	.rotate(360deg);
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: @mc1 transparent transparent transparent;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.btn-1:hover:before {
	border-width: 900px 900px 0 0;
}


.btn-2 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-2:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent transparent transparent @mc1;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
}

.btn-2:after {
	border-style: solid;
	content: '';
	width: 0;
	height: 0;
	border-width: 0 0 0 0;
	border-color: transparent @mc1 transparent transparent;
	position: absolute;
	right: 0;
	top: 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
}

.btn-2:hover:before {
	border-width: 165px 0 0 165px;
}

.btn-2:hover:after {
	border-width: 0 165px 165px 0;
}

.btn-3 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-3:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent transparent transparent @qt6;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
}

.btn-3:after {
	border-style: solid;
	content: '';
	width: 0;
	height: 0;
	border-width: 0 0 0 0;
	border-color: transparent transparent @qt6 transparent;
	position: absolute;
	right: 0;
	bottom: 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
}

.btn-3:hover:before {
	border-width: 222px 0 0 222px;
}

.btn-3:hover:after {
	border-width: 0 0 222px 222px;
}

.btn-4 {
	position: relative;
	overflow: hidden;
	.transition(all .2s);
	display: block;
	z-index: 1;
}

.btn-4:before,
.btn-4:after {
	position: absolute;
	top: 50%;
	content: '';
	width: 20px;
	height: 20px;
	background: #3655ca;
	.border-radius(50%);
	z-index: -1;
}

.btn-4:before {
	left: -20px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.btn-4:after {
	right: -20px;
	-webkit-transform: translate(50%, -50%);
	-moz-transform: translate(50%, -50%);
	-mz-transform: translate(50%, -50%);
	-o-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
}

.btn-4:hover:before {
	-webkit-animation: criss-cross-left 0.8s both;
	-moz-animation: criss-cross-left 0.8s both;
	-o-animation: criss-cross-left 0.8s both;
	-ms-animation: criss-cross-left 0.8s both;
	animation: criss-cross-left 0.8s both;
}

.btn-4:hover:after {
	-webkit-animation: criss-cross-right 0.8s both;
	-moz-animation: criss-cross-right 0.8s both;
	-ms-animation: criss-cross-right 0.8s both;
	-o-animation: criss-cross-right 0.8s both;
	animation: criss-cross-right 0.8s both;
}

@-webkit-keyframes criss-cross-left {
	0% {
		left: -20px;
	}

	50% {
		left: 50%;
		width: 20px;
		height: 20px;
	}

	100% {
		left: 50%;
		width: 375px;
		height: 375px;
	}
}

@keyframes criss-cross-left {
	0% {
		left: -20px;
	}

	50% {
		left: 50%;
		width: 20px;
		height: 20px;
	}

	100% {
		left: 50%;
		width: 375px;
		height: 375px;
	}
}

@-webkit-keyframes criss-cross-right {
	0% {
		right: -20px;
	}

	50% {
		right: 50%;
		width: 20px;
		height: 20px;
	}

	100% {
		right: 50%;
		width: 375px;
		height: 375px;
	}
}

@keyframes criss-cross-right {
	0% {
		right: -20px;
	}

	50% {
		right: 50%;
		width: 20px;
		height: 20px;
	}

	100% {
		right: 50%;
		width: 375px;
		height: 375px;
	}
}


.btn-5 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-5:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	top: 0;
	right: 0;
	border-color: transparent #3f444e transparent transparent;
}

.btn-5:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	bottom: 0;
	left: 0;
	border-color: transparent transparent transparent #3f444e;
}

.btn-5:hover:before,
.btn-5:hover:after {
	border-width: 80px 433px;
}


.btn-6 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-6:before,
.btn-6:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 0;
	background: @qt6;
	.transition(all .6s);
	z-index: -1;
}

.btn-6:after {
	top: auto;
	bottom: 0;
}

.btn-6:hover:before,
.btn-6:hover:after {
	height: 40px;
}

.btn-7 {
	position: relative;
	transform-style: preserve-3d;
	transition: 0.4s;
}

.btn-7:hover {
	transform: translateZ(20px) rotateX(360deg) scale(1.1);
}

.btn-8 {
	position: relative;
	transform-style: preserve-3d;
	transition: 0.4s;
}

.btn-8:hover {
	transform: rotateY(360deg) scale(1.1);
}

.btn-9 {
	position: relative;

	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: @qt6;
		transition: transform .4s cubic-bezier(.4, 0, .2, 1);
		transform-origin: right bottom;
		transform: scaleX(0);
		z-index: -1;
	}
}

.btn-9:hover::after {
	transform: scaleX(1);
	transform-origin: left bottom;
}



//btn-span-1<a><span>标签</span></a>
.btn-span-1 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.btn-span-1:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: transparent transparent transparent @qt6;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
}

.btn-span-1:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	top: 0;
	right: 0;
	border-color: transparent @qt6 transparent transparent;
}

.btn-span-1 span:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	bottom: 0;
	right: 0;
	border-color: transparent transparent @qt6 transparent;
}

.btn-span-1 span:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	top: 0;
	left: 0;
	border-color: @qt6 transparent transparent transparent;
}

.btn-span-1:hover:before {
	border-width: 165px 0 0 165px;
}

.btn-span-1:hover:after {
	border-width: 0 165px 165px 0;
}

.btn-span-1:hover span:before {
	border-width: 0 0 165px 165px;
}

.btn-span-1:hover span:after {
	border-width: 165px 165px 0 0;
}

//btn-span-2<a><span>标签</span></a>
.btn-span-2 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-span-2:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	top: 0;
	right: 0;
	border-color: transparent @qt6 transparent transparent;
}

.btn-span-2:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	bottom: 0;
	left: 0;
	border-color: transparent transparent transparent @qt6;
}

.btn-span-2:before,
.btn-span-2:after {
	border-color: @qt6;
}

.btn-span-2span:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	top: 0;
	left: 0;
	border-color: @qt6 transparent transparent transparent;
}

.btn-span-2span:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 0 0;
	.rotate(360deg);
	.transition(all .6s);
	z-index: -1;
	right: 0;
	bottom: 0;
	border-color: transparent transparent @qt6 transparent;
}

.btn-span-2span:before,
.btn-span-2span:after {
	border-color: @qt6;
}

.btn-span-2:hover:before {
	border-width: 20px 62.5px;
}

.btn-span-2:hover:after {
	border-width: 20px 62.5px;
}

.btn-span-2:hover span:before {
	border-width: 20px 62.5px;
}

.btn-span-2:hover span:after {
	border-width: 20px 62.5px;
}

//btn-span-3<a>标签<span></span></a>
.btn-span-3 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	;
	z-index: 1;
}

.btn-span-3 span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	.border-radius(50%);
	background: @qt6;
	z-index: -1;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: width 0.4s, height 0.4s;
	-moz-transition: width 0.4s, height 0.4s;
	-ms-transition: width 0.4s, height 0.4s;
	-o-transition: width 0.4s, height 0.4s;
	transition: width 0.4s, height 0.4s;
}

.btn-span-3:hover span {
	width: 562.5px;
	height: 562.5px;
}

//btn-span-4<a><span>标签</span></a>
.btn-span-4 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-span-4:before,
.btn-span-4:after,
.btn-span-4 span:before,
.btn-span-4 span:after {
	content: '';
	position: absolute;
	top: 0;
	width: 63.5px;
	height: 0;
	background: #012f04;
	.transition(all .6s);
	z-index: -1;
}

.btn-span-4:before {
	left: 0;
}

.btn-span-4:after {
	left: 125px;
}

.btn-span-4 span:before,
.btn-span-4 span:after {
	top: auto;
	bottom: 0;
}

.btn-span-4 span:before {
	left: 62.5px;
}

.btn-span-4 span:after {
	left: 187.5px;
}

.btn-span-4:hover {
	color: #c0d3c1;
}

.btn-span-4:hover:before,
.btn-span-4:hover:after,
.btn-span-4:hover span:before,
.btn-span-4:hover span:after {
	height: 80px;
}

//btn-span-5<a><span>标签</span></a>
.btn-span-5 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-span-5:before,
.btn-span-5:after,
.btn-span-5 span:before,
.btn-span-5 span:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: fade(@qt6, 50%);
	.transition(all .6s);
	z-index: -1;
}

.btn-span-5:after,
.btn-span-5 span:before {
	top: auto;
	bottom: 0;
}

.btn-span-5 span:before,
.btn-span-5 span:after {
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
	z-index: -1;
}

.btn-span-5:hover:before,
.btn-span-5:hover:after,
.btn-span-5:hover span:before,
.btn-span-5:hover span:after {
	height: 80px;
}

//btn-span-6<a><span>标签</span></a>
.btn-span-6 {
	position: relative;
	overflow: hidden;
	.transition(all .6s);
	display: block;
	z-index: 1;
}

.btn-span-6:before,
.btn-span-6:after,
.btn-span-6 span:before,
.btn-span-6 span:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 80px;
	background: fade(@qt6, 25%);
	.transition(.4s);
	z-index: -1;
}

.btn-span-6:after,
.btn-span-6 span:before {
	left: auto;
	right: 0;
}

.btn-span-6 span:before,
.btn-span-6 span:after {
	-webkit-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.btn-span-6:hover:before,
.btn-span-6:hover:after,
.btn-span-6:hover span:before,
.btn-span-6:hover span:after {
	width: 250px;
}


//btn-span-7<a data-text="{$vo1.name}"><span>标签</span></a>
.btn-span-7 {
	.transition(.5s);
	position: relative;
	overflow: hidden;
	display: block;
}

.btn-span-7 span {
	.transition(.3s);
}

.btn-span-7:hover {
	background-color: @qt6;
}

.btn-span-7:hover>span {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0px, -40px);
	transform: translate(0px, -40px);
}

.btn-span-7::after {
	position: absolute;
	content: attr(data-text);
	-webkit-transform: translate(0, 30%);
	transform: translate(0, 30%);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	.transition(.3s);
}

.btn-span-7:hover::after {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-7-1<a data-text="{$vo1.name}"><span>标签</span></a>
.btn-span-7-1 {
	.transition(.5s);
	position: relative;
	overflow: hidden;
	display: block;
}

.btn-span-7-1 span {
	.transition(.3s);
}

.btn-span-7-1:hover {
	background-color: @qt6;
}

.btn-span-7-1:hover>span {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0px, 40px);
	transform: translate(0px, 40px);
}

.btn-span-7-1::after {
	position: absolute;
	content: attr(data-text);
	-webkit-transform: translate(-30%, 0);
	transform: translate(-30%, 0);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	.transition(.3s);
}

.btn-span-7-1:hover::after {
	-webkit-transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100);
	transform: translate(0, 0);
}

//btn-span-7-2<a data-text="{$vo1.name}"><span>标签</span></a>
.btn-span-7-2 {
	.transition(.5s);
	position: relative;
	overflow: hidden;
	display: block;
}

.btn-span-7-2 span {
	.transition(.3s);
}

.btn-span-7-2:hover {
	background-color: @qt6;
}

.btn-span-7-2:hover>span {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0px, 40px);
	transform: translate(0px, 40px);
}

.btn-span-7-2::after {
	position: absolute;
	content: attr(data-text);
	-webkit-transform: translate(-30%, -50%) rotate(-30deg);
	transform: translate(-30%, -50%) rotate(-30deg);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	.transition(.3s);
}

.btn-span-7-2:hover::after {
	-webkit-transform: translate(0, 0);
	opacity: 1;
	filter: alpha(opacity=100);
	transform: translate(0, 0);
}

//btn-span-8<a><span>标签</span></a>
@-webkit-keyframes jello {

	from,
	11.1%,
	to {
		-webkit-transform: none;
		transform: none;
	}

	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}

	33.3% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}

	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}

	77.7% {
		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
		transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
}

@keyframes jello {

	from,
	11.1%,
	to {
		-webkit-transform: none;
		transform: none;
	}

	22.2% {
		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}

	33.3% {
		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
		transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}

	55.5% {
		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}

	77.7% {
		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
		transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
}

.btn-span-8 {
	.transition(.5s);
	position: relative;
	display: block;
}

.btn-span-8:hover {
	background-color: fade(@qt6, 20%);
	-webkit-animation-name: jello;
	animation-name: jello;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

//btn-span-9<a><span>标签</span></a>
.btn-span-9 {
	.transition(.5s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.btn-span-9 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-9::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(0.5, 1);
	transform: scale(0.5, 1);
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: @qt6;
	.transition(.4s);
}

.btn-span-9:hover::before {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

//btn-span-9-1<a><span>标签</span></a>
.btn-span-9-1 {
	.transition(.5s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.btn-span-9-1 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-9-1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(1, 0.5);
	transform: scale(1, 0.5);
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: @qt6;
	.transition(.4s);
}

.btn-span-9-1:hover::before {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

//btn-span-10<a><span>标签</span></a>
.btn-span-10 {
	.transition(.5s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-10 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-10::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	background-color: @qt6;
	.transition(.4s);
}

.btn-span-10:hover::before {
	transform: skewX(-180deg) scale(0.6, 1);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: skewX(-180deg) scale(0.6, 1);
}

//btn-span-11<a><span>标签</span></a>
.btn-span-11 {
	.transition(.5s);
	position: relative;
	display: block;
}

.btn-span-11 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-11::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.5);
	.transition(.4s);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-span-11::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.transition(.5s);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-11:hover::before {
	.rotate(-45deg);
	background-color: rgba(255, 255, 255, 0);
}

.btn-span-11:hover::after {
	.rotate(45deg);
	background-color: rgba(255, 255, 255, 0);
}

//btn-span-12<a><span>标签</span></a>
.btn-span-12 {
	.transition(.5s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	perspective: 2000px;
}

.btn-span-12 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-12::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.4s);
}

.btn-span-12::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.transition(.5s);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-12:hover::before {
	-webkit-transform: rotateX(60deg) translate(0px, 40px);
	transform: rotateX(60deg) translate(0px, 40px);
}

.btn-span-12:hover::after {
	-webkit-transform: rotateX(-60deg) translate(0px, -40px);
	transform: rotateX(-60deg) translate(0px, -40px);
}

//btn-span-13<a><span>标签</span></a>
.btn-span-13 {
	.transition(.5s);
	position: relative;
	display: block;
}

.btn-span-13 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-13::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.4s);
}

.btn-span-13:hover::before {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

.btn-span-13::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.transition(.5s);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.25);
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}

.btn-span-13:hover::after {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

//btn-span-13-1<a><span>标签</span></a>
.btn-span-13-1 {
	.transition(.5s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.btn-span-13-1 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-13-1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.4s);
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
}

.btn-span-13-1:hover::before {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
}

.btn-span-13-1::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	.transition(.3s);
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-span-13-1:hover::after {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

//btn-span-14<a><span>标签</span></a>
.btn-span-14 {
	.transition(.5s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14::before,
.btn-span-14::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(0, -100%);
	transform: translate(0, -100%);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14:hover::before,
.btn-span-14:hover::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-14-1<a><span>标签</span></a>
.btn-span-14-1 {
	.transition(.5s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14-1 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14-1::before,
.btn-span-14-1::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(-100%, 0);
	transform: translate(-100%, 0);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-1::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14-1:hover::before,
.btn-span-14-1:hover::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-14-2<a><span>标签</span></a>
.btn-span-14-2 {
	.transition(.5s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14-2 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14-2::before,
.btn-span-14-2::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(-13%, -190%) rotate(-30deg);
	transform: translate(-13%, -190%) rotate(-30deg);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-2::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14-2:hover::before,
.btn-span-14-2:hover::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-14-3<a><span>标签</span></a>
.btn-span-14-3 {
	.transition(.3s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14-3 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14-3::before,
.btn-span-14-3::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(13%, 190%) rotate(-30deg);
	transform: translate(13%, 190%) rotate(-30deg);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-3::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14-3:hover::before,
.btn-span-14-3:hover::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-14-4<a><span>标签</span></a>
.btn-span-14-4 {
	.transition(.3s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14-4 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14-4::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(13%, 190%) rotate(-30deg);
	transform: translate(13%, 190%) rotate(-30deg);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-4::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(-13%, -190%) rotate(-30deg);
	transform: translate(-13%, -190%) rotate(-30deg);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-4::before {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14-4:hover::before,
.btn-span-14-4:hover::after {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-14-5<a><span>标签</span></a>
.btn-span-14-5 {
	.transition(.3s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-14-5 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-14-5::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(13%, -190%) rotate(30deg);
	transform: translate(13%, -190%) rotate(30deg);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-5::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	-webkit-transform: translate(-13%, -190%) rotate(-30deg);
	transform: translate(-13%, -190%) rotate(-30deg);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-14-5::before {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-14-5:hover::before,
.btn-span-14-5:hover::after {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}

//btn-span-15<a><span>标签</span></a>
.btn-span-15 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(0, -105%);
	transform: translate(0, -105%);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15:hover::before {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-15-1<a><span>标签</span></a>
.btn-span-15-1 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15-1 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15-1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.3s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(-105%, 0);
	transform: translate(-105%, 0);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15-1:hover::before {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-15-2<a><span>标签</span></a>
.btn-span-15-2 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15-2 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15-2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.5s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(-13%, -190%) rotate(-30deg);
	transform: translate(-13%, -190%) rotate(-30deg);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15-2:hover::before {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-15-3<a><span>标签</span></a>
.btn-span-15-3 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15-3 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15-3::before,
.btn-span-15-3::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.5s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(0, -105%);
	transform: translate(0, -105%);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15-3::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-15-3:hover::before,
.btn-span-15-3:hover::after {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-15-4<a><span>标签</span></a>
.btn-span-15-4 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15-4 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15-4::before,
.btn-span-15-4::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.5s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(-105%, 0);
	transform: translate(-105%, 0);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15-4::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-15-4:hover::before,
.btn-span-15-4:hover::after {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-15-5<a><span>标签</span></a>
.btn-span-15-5 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.btn-span-15-5 span {
	z-index: 2;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.btn-span-15-5::before,
.btn-span-15-5::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.25);
	.transition(.5s);
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: translate(-13%, -190%) rotate(-30deg);
	transform: translate(-13%, -190%) rotate(-30deg);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-15-5::after {
	-webkit-transition-delay: 0.2s;
	/* Safari */
	transition-delay: 0.2s;
}

.btn-span-15-5:hover::before,
.btn-span-15-5:hover::after {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-16<a><span>标签</span></a>
.btn-span-16 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 1);
}

.btn-span-16:hover {
	border: 1px solid rgba(255, 255, 255, 0);
}

.btn-span-16::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	.transition(.5s);
	-webkit-transform: translate(-100%, -600%) rotate(30deg);
	transform: translate(-100%, -600%) rotate(30deg);
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.btn-span-16:hover::before {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}

//btn-span-17<a><span>标签</span></a>
.btn-span-17 {
	.transition(.3s);
	position: relative;
	display: block;
	overflow: hidden;
}

.btn-span-17 span {
	position: relative;
	.transition(.3s);
	z-index: 2;
	letter-spacing: 0;
}

.btn-span-17::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	.transition(.3s);
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255, 255, 255, 0.5);
	border-bottom-color: rgba(255, 255, 255, 0.5);
	-webkit-transform: scale(0.1, 1);
	transform: scale(0.1, 1);
}

.btn-span-17:hover span {
	letter-spacing: 2px;
}

.btn-span-17:hover::before {
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-span-17::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.transition(.3s);
	background-color: rgba(255, 255, 255, 0.25);
}

.btn-span-17:hover::after {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(0.1, 1);
	transform: scale(0.1, 1);
}

//btn-span-18<a><span>标签</span></a> translate Y轴高度取决于a标签的一半高度
.btn-span-18 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: rgba(255, 255, 255, 0.5);
	border-left-color: rgba(255, 255, 255, 0.5);
}

.btn-span-18 span {
	.transition(.3s);
	letter-spacing: 0;
}

.btn-span-18:hover span {
	letter-spacing: 2px;
}

.btn-span-18:hover {
	border-right-color: rgba(255, 255, 255, 0);
	border-left-color: rgba(255, 255, 255, 0);
}

.btn-span-18::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	.transition(.3s);
	background-color: rgba(255, 255, 255, 0.5);
}

.btn-span-18:hover::before {
	transform: translate(0, -45px) rotate(-45deg);
}

.btn-span-18::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	.transition(.3s);
	background-color: rgba(255, 255, 255, 0.5);
}

.btn-span-18:hover::after {
	transform: translate(0, 45px) rotate(45deg);
}

//btn-span-19<a><span>标签</span></a>
.btn-span-19 {
	.transition(.3s);
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255, 255, 255, 0.5);
	border-bottom-color: rgba(255, 255, 255, 0.5);
}

.btn-span-19 span {
	.transition(.3s);
	letter-spacing: 0;
}

.btn-span-19:hover span {
	letter-spacing: 2px;
}

.btn-span-19:hover {
	border-top-color: rgba(255, 255, 255, 0);
	border-bottom-color: rgba(255, 255, 255, 0);
}

.btn-span-19::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	z-index: 1;
	.transition(.3s);
	background-color: rgba(255, 255, 255, 0.5);
}

.btn-span-19:hover::before {
	-webkit-transform: translate(-94.9845px, 0) rotate(270deg);
	-moz-transform: translate(-94.9845px, 0) rotate(270deg);
	transform: translate(-94.9845px, 0) rotate(270deg);
}

.btn-span-19::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	z-index: 1;
	.transition(.3s);
	background-color: rgba(255, 255, 255, 0.5);
}

.btn-span-19:hover::after {
	-webkit-transform: translate(94.9845px, 0) rotate(180deg);
	-moz-transform: translate(94.9845px, 0) rotate(180deg);
	transform: translate(94.9845px, 0) rotate(180deg);
}

//btn-span-20<a><span data-hover="{$vo2.name}">标签</span></a> 文字顶上去的效果
.btn-span-20 {
	position: relative;
	overflow: hidden;
	;
	display: block;

	span {
		display: block;
		.transition(.4s);
	}

	span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		.transition(.4s);
		left: 0;
	}
}

.btn-span-20:hover {
	span {
		transform: translateY(-100%);
	}
}