/* Needed for the lightbox */
/* CSS for the loading div */

.sp-loading {
	text-align: center;
	width: 800px;
	padding: 15px;
	border: 5px solid #eee;
	border-radius: 3px;
	font-size: 12px;
	color: #888;
}

/* Element wrapper */

.sp-wrap {
	display: none;
	line-height: 0;
	font-size: 0;
	background: #eee;
	border: 5px solid #eee;
	border-radius: 3px;
	position: relative;
	float: left;
	/**************
	  Set max-width to your thumbnail width
	***************/
	
	width: 400px;
}

/* Thumbnails */

.sp-thumbs {
	text-align: left;
	display: inline-block;
}
.sp-thumbs img {
	height: 50px;
	width: 50px;
}
.sp-thumbs a:link, .sp-thumbs a:visited {
	width: 80px;
	height: 80px;
	margin: 6px;
	overflow: hidden;
	opacity: .6;
	display: inline-block;
	background-size: cover;
	background-position: center;
	-webkit-transition: all .2s ease-out;
	-moz-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.sp-thumbs a:hover {
	opacity: 1;
}

/* Styles for the currently selected thumbnail */

.sp-thumbs a:active, .sp-current {
	opacity: 1!important;
	position: relative;
}

/* Image currently being viewed */

.sp-large {
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
}
.sp-large a img {
	width: 100%;
	height: auto;
}
.sp-large a {
	display: block;
}

/* Panning Zoomed Image */

.sp-zoom {
	position: absolute;
	left: -50%;
	top: -50%;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
	display: none;
}
/* Lightbox */

.sp-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, .9);
	z-index: 500;
	display: none;
	cursor: pointer;
}
.sp-lightbox img {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 35%;
	height: auto;
	border: 2px solid #fff;
}
#sp-prev, #sp-next {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	z-index: 501;
	color: #fff;
	padding: 14px;
	text-decoration: none;
	background: #000;
	border-radius: 25px;
	border: 2px solid #fff;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	transition: .2s;
}
#sp-prev {
	left: 10px;
}
#sp-prev:before {
	content: '';
	border: 7px solid transparent;
	border-right: 15px solid #fff;
	position: absolute;
	top: 16px;
	left: 7px;
}
#sp-next {
	right: 10px;
}
#sp-next:before {
	content: '';
	border: 7px solid transparent;
	border-left: 15px solid white;
	position: absolute;
	top: 16px;
	left: 18px;
}
#sp-prev:hover, #sp-next:hover {
	background: #444;
}

.product-new-container{
	margin: 2%;
 }
.menji-p2 h1{
	font-size: 38px;
	text-align: center;
	margin: 2%;
}

.product-new-menji h2{
	font-size: 30px;
	margin: 6%;
	font-weight: bold;
}
.menji-text>p{
	font-size: 16px;
	margin: 4% 6%;
	line-height: 35px;
	color: #333;
}
.menji-btn{
	margin: 4% 6%;
}
.menji-btn>p{
	font-size: 16px;
	line-height: 28px;
	color: #333;
}
.menji-btn a:hover, {
	color: #00ffcf;
}
.menji-btn-phone {
	background: #243136;
	display: block;
	padding: 6%;
	color: #fff;
	margin: 6% 0;
	text-align: center;
	border: 4px solid #1dbeb1;
	border-radius: 20px;
}

.menji-btn-phone b{
	font-size: 16px;
}
.menji-btn-phone i{    
	font-size: 36px;
	font-weight: bold;
}

.menji-p3 h1, .menji-p4 h1, .menji-p5 h1, .menji-p7 h1, .menji-p8 h1{
	font-size: 38px;
	text-align: center;
	padding-bottom: 2%;
}

.menji-youlin{
	padding: 5px;
}
.menji-p3{
	margin: 4% 0;
}
.menji-p4 .p4-8item{
	padding: 2% 4%;

}
.menji-tedian-8item{
	text-align: center;
}

.menji-tedian-8item h1{
	margin: 4% 0;
}
.menji-tedian-8item>div{
	background:#262930;
	border-radius: 30px;
	padding: 4% 8%;
}
.menji-tedian-8item>div img{
	padding: 8%;
}
.menji-tedian-8item>div p{
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

.menji-peijian-4item .peijian-4item-bg{
	background:#262930;
	text-align: center;
	padding: 4%;
}
.menji-peijian-4item .peijian-4item-bg h5{
	font-size: 28px;
	font-weight: bold;
	color: #00ffdf;
}
.menji-peijian-4item .peijian-4item-bg p{
	font-size: 12px;
	padding: 5px;
	color: #fff;
}
.menji-peijian-4item .peijian-4item-bg img{
	border-radius: 20px;
}
.menji-peijian-4item .peijian-4item-bg{
	font-size: 16px;
	color: #fff;
	border-radius: 20px;
	box-shadow: 3px 3px 5px #606060;
}
.menji-peijian-4item .p5-4item{
	padding: 5px;
	cursor: e-resize;
}
.menji-p6{
	background:#262930;
	padding: 4%;
}
.menji-p6 h1{
	font-size: 38px;
	text-align: center;
	color: #fff;
}
.menji-p6 .menji-p6-img h2{
	font-size: 18px;
	padding: 20px;
	color: #fff;
}
.menji-p6-img{
	padding: 4%;
}
.menji-p6-img img{
	border-radius: 30px;
}
.menji-p7-btn{
	text-align: right;
}

.menji-p7-btn a{
	font-size: 20px;
	font-weight: bold;
	color: #00a694;
}
.menji-p8 .xiangguan-4item-text{
	padding: 4%;
	background: -moz-linear-gradient(top, #262a31 0%, #17625c 100%);
	background: -webkit-linear-gradient(top, #262a31 0%, #17625c 100%);
	background: -o-linear-gradient(top, #262a31 0%, #17625c 100%);
	background: -ms-linear-gradient(top, #262a31 0%, #17625c 100%);
	background: linear-gradient(top, #262a31 0%, #17625c 100%);
	color: #fff;
}
.menji-p8 .xiangguan-4item-text h5{
	font-size: 28px;
	color: #fff;
	padding: 2% 0;
}
.menji-p8 .p8-4item p{
	color: #fff;
}
.menji-p8 .p8-4item{
	padding: 2%;
}

.menji-p8 .p8-4item img{
	background:#f0f0f0;
}
.menji-table-mo{
	display: none;
}

/* Tweak styles for small viewports */

@media screen and (max-width: 767px) {
	.menji-p2 h1 {
	    font-size: 24px;
	}
	.sp-thumbs a:link, .sp-thumbs a:visited {
		width: 65px;
		height: 65px;
		margin: 4px;
	}
	.sp-lightbox img {
		width: 65%;
		height: auto;
	}
	.product-new-menji h2 {
		font-size: 24px;
	}
	.menji-p3 h1, .menji-p4 h1, .menji-p5 h1, .menji-p7 h1, .menji-p8 h1 {
		font-size: 24px;
	}
	.menji-tedian-8item>div p {
		font-size: 12px;
	}
	.menji-p4 .p4-8item {
		padding: 2%;
	}
	.menji-peijian-4item .peijian-4item-bg h5 {
		font-size: 18px;
	}
	.menji-peijian-4item .peijian-4item-bg p {
		font-size: 12px;
	}
	.menji-p6 h1 {
		font-size: 24px;
	}
	.menji-p6 {
		padding: 4% 0;
	}
	.menji-p6-img {
		padding: 4% 0;
	}
	.menji-p8 .xiangguan-4item-text h5 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.menji-p8 .p8-4item p {
		font-size: 12px;
		color: #c0c0c0;
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.product-new-container {
		margin: 0;
	}
	.menji-p8 .layui-container {
		padding: 0;
	}
	.layui-container h1{
		margin: 4% 0;
	}
	
	.menji-table-pc{
		display: none;
	}
	.menji-table-mo{
		display: block;
	}
}

@media screen and (max-width: 400px) {
	.sp-wrap {
		margin: 0 0 15px 0;
	}
	#sp-prev, #sp-next {
		top: auto;
		margin-top: 0;
		bottom: 25px;
	}
	.sp-thumbs a:link, .sp-thumbs a:visited {
		width: 56px;
		height: 56px;
		margin: 4px;
	}
}
@media screen and (max-width: 350px) {
	.sp-thumbs a:link, .sp-thumbs a:visited {
		width: 45px;
		height: 45px;
		margin: 4px;
	}
}