﻿body{

}



body.full{

	overflow: hidden;

}



.container{

	display: block;

	width: 100%;

	max-width:1170px;

	padding: 0 15px;

	margin: 0 auto;

}

#pcban{ display: block;}
#wapban{ display:none;}
@media screen and (max-width: 768px) {
#pcban{ display:none ;}
#wapban{ display:block;}
}
@media screen and (max-width: 640px) {

	.container{

		padding: 0 3%;

	}

}



.header{

	position: fixed;

	display: block;

	width: 100%;

	height: 55px;

	background-color: #111;

	z-index: 999;

	top:0;

	left:0;

}



.header .logo{

	display: block;

	float: left;

	width: 61px;

	margin: 13px 0;

}



.header .logo a{

	display: block;

	width: 61px;

	height: 29px;

	background: url(../imgs/logo.png) no-repeat center;

}



.header .nav{

	display: block;

	float: right;

	margin-right: 110px;

}



@media screen and (max-width: 890px) {

	.header .nav{

		margin-right: 30px;

	}

}



@media screen and (max-width: 768px) {

	.header .nav{

		display: none;

		position: absolute;

		width: 100%;

		margin: 0;

		top:55px;

		left:0;

		background-color: #333;

		background-color: rgba(20,20,20,0.9);

		z-index: 20;

	}

}



.header .nav li{

	display: block;

	float: left;

	padding: 0 20px;

	height: 55px;

	line-height: 55px;

}



@media screen and (max-width: 890px) {

	.header .nav li{

		padding:  0 16px;

	}

}



@media screen and (max-width: 768px) {

	.header .nav li{

		width: 50%;

		height: 51px;

		padding: 0;

		line-height: 50px;

		text-align: center;

		border: 1px solid #555;

		border-width: 0 1px 1px 0;

	}



	.header .nav li:nth-child(2n){

		border-right: none;

	}



	.header .nav li.hot-line{

		display: block;

		width: 100%;

		height: auto;

		border: none;

	}

}



@media screen and (max-width: 640px) {

	.header .nav li{

		width: 100%;

		height: 47px;

		line-height: 46px;

	}

	.header .nav li.hot-line{

		height: auto;

	}

}



.header .nav .hot-line{

	display: none;

	color: #fff;

	white-space: nowrap;

	background-color: #8a2677;

}



.header .nav .hot-line a{

	display: inline-block;

	color: #fff;

}



.header .nav li a{

	display: block;

	color: #dedede;

	font-size: 16px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.header .nav li:hover a,.header .nav li.active a{

	color: #fff;

}



@media screen and (max-width: 768px) {

	.header .nav li a{

		font-size: 14px;

		padding: 0 20px;

	}

}



@media screen and (max-width: 640px) {

	.header .nav li a{

		font-size: 14px;

		padding: 0 3%;

	}

}



.header .search-btn{

	display: block;

	float: right;

	width: 18px;

	height: 55px;

	background:url(../imgs/icon/icons.png) no-repeat 0px -306px;

	border: none;

	cursor: pointer;

}



@media screen and (max-width: 768px) {

	.header .search-btn{

		display: none;

	}

}



.header .nav-toggle{

	display: none;

	float: right;

	margin-top: 14px;

	background: none;

	border: none;

	outline: none;

	cursor: pointer;

}



@media screen and (max-width: 768px) {

	.header .nav-toggle{

		display: block;

	}

}



.header .nav-toggle span{

	display: block;

	width: 20px;

	height: 1px;

	margin: 6px;

	background-color: #fff;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.header .nav-toggle.close .span1{

	-webkit-transform: rotate(45deg);

	-ms-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

	transform-origin: 0% 0%;

}



.header .nav-toggle.close .span2{

	opacity: 0;

}



.header .nav-toggle.close .span3{

	-webkit-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

	transform-origin: 0% 100% ;

}



.header .search{

	display: none;

	position: absolute;

	width: 100%;

	height: 50px;

	padding: 10px 0px 10px 15px;

	border-bottom: 1px solid #eee;

	top:55px;

	left:0;

	background-color: #fff;

}



.header .search input[type="text"]{

	display: block;

	width: 100%;

	float: left;

	height: 30px;

	border: none;

	line-height: 30px;

	z-index: 20;

	color: #666;

}



.header .search input[type="submit"]{

	position: relative;

	display: block;

	float: left;

	width: 50px;

	height: 30px;

	margin-right: -50px;

	right: 50px;

	border: none;

	background:url(../imgs/icon/search-btn.png) no-repeat center center;

	color: #000;

	z-index: 20;

	cursor: pointer;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.header .search input[type="submit"]:hover{

	opacity: 0.8;

}



.banner{

	position: relative;

	display: block;

	width: 100%;

	height: calc(100vh - 55px);

}



.seriser-a-enter{

	display: block;

	position: absolute;

	width: 100%;

	top: 32px;

	left: 0px;

	z-index: 10;

	opacity: 0.7;

}



@media screen and (max-width: 640px) {

	.seriser-a-enter{

		display: none;

	}

}



.seriser-a-enter:hover{

	opacity: 1;

}



.seriser-a-enter a{

	display: block;

	width: 197px;

	height: 197px;

	left: 0px;

	background: url(../imgs/badge.png) no-repeat center;

}



.banner .swiper-slide{

	position: relative;

	display: block;

	background-position: center center;

	background-repeat: no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.banner  .swiper-pagination{

	bottom:20px;

}



.banner .swiper-pagination-bullets .swiper-pagination-bullet{

	width: 14px;

	height: 14px;

	background:none;

	border: 2px solid #fff;

	opacity: 1;

	margin: 0 8px;

}



.banner .swiper-pagination-bullet.swiper-pagination-bullet-active{

	background-color: #fff;

}



.swiper-button-next, .swiper-button-prev{

	display: none;

	width: 30px;

	height: 52px;

	margin-top: -26px;

	text-align: center;

	line-height: 52px;

	font-size: 30px;

	color: #fff;

	font-family: "Simsun";

	background: #000;

	background: rgba(0,0,0,0.4);

	-webkit-transition: 0.3s ease;

	-moz-transition: 0.3s ease;

	-ms-transition: 0.3s ease;

	-o-transition: 0.3s ease;

	transition: 0.3s ease;

}



.swiper-button-next:hover, .swiper-button-prev:hover{

	background: rgba(0,0,0,0.6);

}



.banner:hover .swiper-button-next, .banner:hover .swiper-button-prev{

	display: block;

}



.banner .content{

	display: block;

	position: absolute;

	width: 100%;

	padding: 0 3%;

	text-align: center;

	top:50%;

	margin-top: -140px;

	left:0;

}



.banner .content h4{

	position: relative;

	display: block;

	font-size: 60px;

	color: #fff;

	opacity: 0;

	top:-20px;

	-webkit-transition: 0.3s 0.3s ease-in-out;

	-o-transition: 0.3s 0.3s ease-in-out;

	transition: 0.3s 0.3s ease-in-out;

}



.banner .swiper-slide-active .content h4{

	top: 0;

	opacity: 1;

}



@media screen and (max-width: 640px) {

	.banner .content h4{

		font-size: 32px;

	}

}



.banner .content h4 span{

	display: inline-block;

	font-size: 94px;

}



@media screen and (max-width: 640px) {

	.banner .content h4 span{

		font-size: 52px;

	}

}



.banner .content p{

	position: relative;

	display: block;

	font-size: 30px;

	color: #fff;

	margin-top: 28px;

	opacity: 0;

	top:-20px;

	-webkit-transition: 0.3s 0.5s ease-in-out;

	-o-transition: 0.3s 0.5s ease-in-out;

	transition: 0.3s 0.5s ease-in-out;

}



.banner .swiper-slide-active .content p{

	top:0;

	opacity: 1;

}





@media screen and (max-width: 640px) {

	.banner .content p{

		font-size: 18px;

		margin-top: 8%;

	}

}



.banner .content a{

	display: inline-block;

	padding: 0 20px;

	height: 34px;

	margin-top: 72px;

	text-align: center;

	line-height: 32px;

	border: 1px solid #fff;

	border-radius: 15px;

	color: #fff;

	font-size: 15px;

	opacity: 0;

	-webkit-transition: all 0.3s 0.7s ease-in-out,background 0.3s 0s ease-in-out,color 0.3s 0s ease-in-out;

	-o-transition: all 0.53s 0.7s ease-in-out,background 0.3s 0s ease-in-out,color 0.3s 0s ease-in-out;

	transition: all 0.3s 0.7s ease-in-out,background 0.3s 0s ease-in-out,color 0.3s 0s ease-in-out;

}



.banner .swiper-slide-active .content a{

	opacity: 1;

}



@media screen and (max-width: 640px) {

	.banner .content a{

		margin-top: 10%;

		width: 60%	

	}

}



.banner .content a:hover{

	background-color: #fff;

	color: #333;

}



.banner .content a span{

	padding-left: 9px;

	font-family: "Simsun";

}



.section-header{

	display: block;

	padding: 0px 0;

	text-align: center;

	font-size: 0;

}



@media screen and (max-width: 640px) {

	.section-header{

		padding: 8% 0;

	}

}



.section-header h3{

	display: block;

	height: 41px;

}



.section-header p{

	display: block;

	line-height: 1;

	font-size: 22px;

	color: #666666;

	margin-top: 14px;

}



@media screen and (max-width: 640px) {

	.section-header p{

		font-size: 18px;

	}

}



.product-desgin{

	display: block;

	overflow: hidden;

}



.product-header h3{

	background: url(../imgs/product-tit.jpg) no-repeat center;

}



.product-desgin .desginer{

	position: relative;

	display: block;

	float: left;

	width: 337px;

	margin-right: 10px;

	opacity: 0;

	top:-20px;

	-webkit-transition: 0.3s 0.2s ease-in-out;

	-o-transition: 0.3s 0.2s ease-in-out;

	transition: 0.3s 0.2s ease-in-out;

}



.product-desgin.animate .desginer{

	opacity: 1;

	top:0;

}



@media screen and (max-width: 768px) {

	.product-desgin .desginer{

		display: none;

	}

}



@media screen and (max-width: 640px) {

	.product-desgin .desginer{

		display: block;

		float: none;

		width: 100%;

	}

}



.product-desgin .desginer img{

	display: block;

	width: 337px;

	height: 465px;

}



@media screen and (max-width: 640px) {

	.product-desgin .desginer img{

		width: 100%; height:auto;

	}

}



.product-desgin .desginer .mask{

	display: block;

	position: absolute;

	bottom: 0;

	background-color: #333;

	background-color: rgba(0,0,0,0.6);

	padding: 22px;

}



@media screen and (max-width: 640px) {

	.product-desgin .desginer .mask{

		padding: 15px;

	}

}



.product-desgin .desginer .mask h4{

	display: block;

	font-size: 22px;

	color: #fff;

}



@media screen and (max-width: 640px) {

	.product-desgin .desginer .mask h4{

		font-size: 18px;

	}

}



.product-desgin .desginer .mask p{

	display: block;

	margin-top: 12px;

	font-size: 17px;

	line-height: 28px;

	color: #fff;

	letter-spacing: 1px;

}



@media screen and (max-width: 640px) {

	.product-desgin .desginer .mask p{

		font-size: 14px;

		line-height: 24px;

		margin-top: 6px;

	}

}



.product-desgin .menu{

	position: relative;

	display: block;

	float: left;

	width: 116px;

	opacity: 0;

	top: 20px;

	-webkit-transition: 0.3s 0.4s ease-in-out;

	-o-transition: 0.3s 0.4s ease-in-out;

	transition: 0.3s 0.4s ease-in-out;

}



.product-desgin.animate .menu{

	opacity: 1;

	top:0;

}



@media screen and (max-width: 640px) {

	.product-desgin .menu{

		width: 100%;

		float: none;

		margin-top: 4%;

		text-align: center;

		font-size: 0;

	}

}



.product-desgin .menu ul li{

	position: relative;

	display: block;

	width: 116px;

	height: 93px;

	text-align: center;

	line-height: 93px;

	color: #fff;

	font-size: 60px;

	cursor: pointer;
	
	z-index: 99 !important;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.product-desgin .menu ul li{

		display: inline-block;

		width: 40px;

		height: 40px;

		margin: 0 5px;

		font-size: 14px;

		line-height: 40px;

	}

}



.product-desgin .menu ul .bg1{

	background-color: #333;

}



.product-desgin .menu ul .bg2{

	background-color: #484848;

}



.product-desgin .menu ul .bg3{

	background-color: #5e5e5e;

}



.product-desgin .menu ul .bg4{

	background-color: #767676;

}


.product-desgin .menu ul .bg5{

	background-color: #999999;

}



.product-desgin .menu ul .active{

	background-color: #8a2677;

}



.product-desgin .menu ul li .arrow{

	display: none;

	position: absolute;

	width: 0;

	height: 0;

	border: 8px solid transparent;

	border-left: 10px solid #8a2677;

	top:50%;

	margin-top: -8px;

	right: -18px;

	z-index: 5;

}



@media screen and (max-width: 640px) {

	.product-desgin .menu ul li .arrow{

		border: 4px solid transparent;

		border-top: 6px solid #8a2677;

		top:100%;

		margin-top: 0;

		right:50%;

		margin-right: -4px;

	}

}



.product-desgin .menu ul .active .arrow{

	display: block;

}



.product-desgin .intro{

	position: relative;

	display: none;

	overflow: hidden;

	padding: 20px;

	height: 464px;

	background-color: #f3f3f3;

	opacity: 0;

	left: 20px;
	text-align:left !important;

	-webkit-transition: 0.3s 0.6s ease-in-out;

	-o-transition: 0.3s 0.6s ease-in-out;

	transition: 0.3s 0.6s ease-in-out;

}



.product-desgin.animate .intro{

	left:0;

	opacity: 1;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro{

		height: auto;

		padding: 0;

		margin-top: 4%;

		background-color: #fff;

	}

}



.product-desgin .intro.on{

	display: block;

}



.product-desgin .intro img{

	display: block;

	width: 100%;

	height: auto;

}



.product-desgin .intro h4{

	display: block;

	margin-top: 26px;

	line-height: 1;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro h4{

		margin-top: 5%;

	}

}



.product-desgin .intro h4 a{

	font-size: 22px;

	color: #8a2677;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro h4 a{

		font-size: 18px;

	}

}



.product-desgin .intro .line{

	display: block;

	width: 24px;

	height: 2px;

	background-color: #8a2677;

	margin-top: 15px;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro .line{

		margin-top: 10px;

	}

}



.product-desgin .intro p{

	display: block;

	line-height: 27px;

	color: #666666;

	font-size: 17px;

	margin-top: 13px;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro p{

		line-height: 24px;

		font-size: 14px;

		margin-top: 8px;

	}

}



.product-desgin .intro .more{

	display: block;

	width: 134px;

	height: 34px;

	border: 1px solid #e4e4e4;

	margin-top: 30px;

	border-radius: 15px;

	text-align: center;

	line-height: 32px;

	color: #777;

	font-size: 15px;
	float:left !important;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.product-desgin .intro .more{

		margin-top: 4%;

		width: 100%;

	}

}



.product-desgin .intro .more:hover{

	border: 1px solid #8a2677;

	background-color: #8a2677;

	color: #fff;

}



.product-desgin .intro .more span{

	padding-left: 9px;

	font-family: "Simsun";

}



.product-series{

	display: block;

	margin-top: 40px;

	overflow: hidden;

}



.product-series li{

	display: block;

	overflow: hidden;

	clear: both;

	background-color: #8a2677;
	z-index:-999px;

}



.product-series li .pic{

	position: relative;

	display: block;

	width: 50%;

	background-position: center center;

	background-repeat: no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

}



.product-series li .pic a{

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

}



.product-series .series-s .pic{

	opacity: 0;

	left:-20px;

	-webkit-transition: 0.3s 0.2s ease-in-out;

	-o-transition: 0.3s 0.2s ease-in-out;

	transition: 0.3s 0.2s ease-in-out;

}



.product-series .series-s.animate .pic{

	opacity: 1;

	left:0;

}



.product-series .series-a .pic{

	opacity: 0;

	left: 20px;

	-webkit-transition: 0.3s 0.4s ease-in-out;

	-o-transition: 0.3s 0.4s ease-in-out;

	transition: 0.3s 0.4s ease-in-out;

}



.product-series .series-a.animate .pic{

	opacity:1;

	left:0;

}



.product-series li.animate .pic:hover{

	opacity: 1;

	-webkit-transition: 0.3s 0s ease-in-out;

	-o-transition: 0.3s 0s ease-in-out;

	transition: 0.3s 0s ease-in-out;

}



@media screen and (max-width: 640px) {

	.product-series li .pic{

		width: 100%;

	}

}



.product-series li .content{

	position: relative;

	display: block;

	width: 50%;

	padding: 40px 0;

	background-color: #8a2677;

}



.product-series .series-s .content{

	opacity: 0;

	left: 20px;

	-webkit-transition: 0.3s 0.4s ease-in-out;

	-o-transition: 0.3s 0.4s ease-in-out;

	transition: 0.3s 0.4s ease-in-out;

}



.product-series .series-s.animate .content{

	opacity: 1;

	left:0;

}



.product-series .series-a .content{

	opacity: 0;

	left: -20px;

	-webkit-transition: 0.3s 0.2s ease-in-out;

	-o-transition: 0.3s 0.2s ease-in-out;

	transition: 0.3s 0.2s ease-in-out;

}



.product-series .series-a.animate .content{

	opacity: 1;

	left:0;

}





@media screen and (max-width: 640px) {

	.product-series li .content{

		width: 100%;

		padding: 6% 0;

	}

}



.product-series li .content .box{

	width: 100%;

	max-width: 585px;
}



.product-series li .content.l .box{

	float: right;

	padding: 0 50px 0 15px;

}



@media screen and (max-width: 768px) {

	.product-series li .content.l .box{

		padding: 0 15px 0 15px;

	}

}



@media screen and (max-width: 640px) {

	.product-series li .content.l .box{

		float: none;

		padding: 0 3%;

	}

}



.product-series li .content.r .box{

	float: left;

	padding: 0 15px 0 50px;

}



@media screen and (max-width: 768px) {

	.product-series li .content.r .box{

		padding: 0 15px 0 15px;

	}

}



@media screen and (max-width: 640px) {

	.product-series li .content.r .box{

		float: none;

		padding: 0 3%;

	}

}



.product-series li .content h4{

	display: block;

	font-size: 28px;

	color: #fff;

	line-height: 1;

	font-weight: bold;
	
	text-align: left;
	

}



@media screen and (max-width: 640px) {

	.product-series li .content h4{

		font-size: 18px;

		font-weight: normal;

	}

}



.product-series li .content h4 span{

	display: inline-block;

	font-size: 62px;

}



@media screen and (max-width: 640px) {

	.product-series li .content h4 span{

		font-size: 24px;
		
	}

}



.product-series li .content .intro{

	display: block;

	margin-top: 12px;

	color: #fff;

	font-size: 17px;

}



@media screen and (max-width: 640px) {

	.product-series li .content .intro{

		font-size: 14px;

		margin-top: 2%;

	}

}



.product-series li .content .intro .part1{

	display: block;

	line-height: 36px;
	text-align: left;

}



@media screen and (max-width: 640px) {

	.product-series li .content .intro .part1{

		line-height: 30px;

	}

}



.product-series li .content .intro .part2{

	display: block;

	line-height: 28px;

	margin-top: 6px;
	text-align: left;

}



@media screen and (max-width: 640px) {

	.product-series li .content .intro .part2{

		line-height: 24px;

	}

}



.product-series li .content a{

	display: block;

	width: 134px;

	height: 34px;

	border: 1px solid #cac4bf;

	border-radius: 15px;

	text-align: center;
	float:left;

	line-height: 32px;

	color: #fff;

	font-size: 15px;

	margin-top: 40px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.product-series li .content a{

		margin-top: 4%;

		width: 100%;

	}

}



.product-series li .content a:hover{

	background-color: #cac4bf;

}



.product-series li .content a span{

	padding-left: 9px;

	font-family: "Simsun";

}



.advantage{

	display: block;

	overflow: hidden;

}



.advantage-header h3{

	background: url(../imgs/advantage-tit.jpg) no-repeat center;

}



.advantage-group{

	display: block;

	border-bottom: 1px solid #8a2677;

	background-color: #f6f6f6;

}



.advantage-group .item1{

	-webkit-transition: all 0.3s 0.1s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.1s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.1s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group .item2{

	-webkit-transition: all 0.3s 0.2s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.2s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.2s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group .item3{

	-webkit-transition: all 0.3s 0.3s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.3s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.3s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group .item4{

	-webkit-transition: all 0.3s 0.4s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.4s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.4s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group .item5{

	-webkit-transition: all 0.3s 0.5s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.5s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.5s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group .item6{

	-webkit-transition: all 0.3s 0.6s ease-in-out,background 0.3s 0s ease-in-out;

	-o-transition: all 0.3s 0.6s ease-in-out,background 0.3s 0s ease-in-out;

	transition: all 0.3s 0.6s ease-in-out,background 0.3s 0s ease-in-out;

}



.advantage-group li{

	position: relative;

	display: block;

	float: left;

	width: 16.666%;

	padding: 39px 0;

	background-color: #f6f6f6;

	text-align: center;

	cursor: pointer;

	opacity: 0;

	top: -20px;

}



.advantage.animate .advantage-group li{

	opacity: 1;

	top:0;

}



@media screen and (max-width: 640px) {

	.advantage-group li{

		height: auto;

		padding: 4% 0;

	}

}



.advantage-group li.active{

	background-color: #8a2677;

}



.advantage-group li .round{

	position: relative;

	display: inline-block;

	width: 112px;

	height: 112px;

	border: 2px solid #a59585;

	border-top: 2px solid #ddd;

	border-radius: 50%;

	-webkit-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

}



@media screen and (max-width: 768px) {

	.advantage-group li .round{

		width: 90px;

		height: 90px;

	}

}



@media screen and (max-width: 640px) {

	.advantage-group li .round{

		width: 100%;

		height: 40px;

		border: none;

		margin-top: 0;

		-webkit-transform: rotate(0deg);

		-ms-transform: rotate(0deg);

		-o-transform: rotate(0deg);

		transform: rotate(0deg);

	}

}



.advantage-group li.active .round{

	border: 2px solid #fff;

}



@media screen and (max-width: 640px) {

	.advantage-group li.active .round{

		border: none;

	}

}



.advantage-group li .round i{

	display: inline-block;

	width: 108px;

	height: 108px;

	-webkit-transform: rotate(45deg);

	-ms-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

}



@media screen and (max-width: 768px) {

	.advantage-group li .round i{

		width: 86px;

		height: 86px;

	}

}



@media screen and (max-width: 640px) {

	.advantage-group li .round i{

		width: 40px;

		height: 40px;

		-webkit-background-size: 40px 40px;

		background-size: 40px 40px;

		-webkit-transform: rotate(0deg);

		-ms-transform: rotate(0deg);

		-o-transform: rotate(0deg);

		transform: rotate(0deg);

	}

}



.advantage-icon1{

	background:url(../imgs/icon/advantage-icon1.png) no-repeat center center;

}



.advantage-group .active .advantage-icon1{

	background:url(../imgs/icon/advantage-icon1-on.png) no-repeat center center;

}



.advantage-icon2{

	background:url(../imgs/icon/advantage-icon2.png) no-repeat center center;

}



.advantage-group .active .advantage-icon2{

	background:url(../imgs/icon/advantage-icon2-on.png) no-repeat center center;

}



.advantage-icon3{

	background:url(../imgs/icon/advantage-icon3.png) no-repeat center center;

}



.advantage-group .active .advantage-icon3{

	background:url(../imgs/icon/advantage-icon3-on.png) no-repeat center center;

}



.advantage-icon4{

	background:url(../imgs/icon/advantage-icon4.png) no-repeat center center;

}



.advantage-group .active .advantage-icon4{

	background:url(../imgs/icon/advantage-icon4-on.png) no-repeat center center;

}



.advantage-icon5{

	background:url(../imgs/icon/advantage-icon5.png) no-repeat center center;

}



.advantage-group .active .advantage-icon5{

	background:url(../imgs/icon/advantage-icon5-on.png) no-repeat center center;

}



.advantage-icon6{

	background:url(../imgs/icon/advantage-icon6.png) no-repeat center center;

}



.advantage-group .active .advantage-icon6{

	background:url(../imgs/icon/advantage-icon6-on.png) no-repeat center center;

}



@media screen and (max-width: 640px) {

	.advantage-group li.active .round i{

		width: 40px;

		height: 40px;

		-webkit-background-size: 40px 40px;

		background-size: 40px 40px;

	}

}



.advantage-group li .arrow{

	display: none;

	position: absolute;

	width: 0;

	height: 0;

	border: 8px solid transparent;

	border-top: 8px solid #8a2677;

	bottom: -16px;

	left: 50%;

	margin-left: -8px;

	z-index: 10;

	-webkit-transition: 0.5s ease-in-out;

	-o-transition: 0.5s ease-in-out;

	transition: 0.5s ease-in-out;

}



.advantage-group .active .arrow{

	display: block;

}



.advantage-body{

	position: relative;

	display: block;

	background-color: #f6f6f6;

	overflow: hidden;

}



.advantage-body .item{

	display: none;

	position: relative;

	padding: 20px 80px;

}



@media screen and (max-width: 768px) {

	.advantage-body .item{

		padding: 20px 45px;

	}

}



@media screen and (max-width: 640px) {

	.advantage-body .item{

		padding: 4%;

	}

}



.advantage-body .item.on{

	display: block;

}



.advantage-body .num{

	display: block;

	line-height: 1;

	font-size: 34px;

	color: #444;

}



@media screen and (max-width: 640px) {

	.advantage-body .num{

		font-size: 20px;

	}

}



.advantage-body .line{

	display: block;

	width: 24px;

	height: 2px;

	background-color: #8a2677;

	margin-top: 15px;

}



@media screen and (max-width: 640px) {

	.advantage-body .line{

		margin-top: 10px;

	}

}



.advantage-body h4{

	display: block;

	font-size: 21px;

	line-height: 1;

	color: #444;

	margin-top: 18px;

}



@media screen and (max-width: 640px) {

	.advantage-body h4{

		font-size: 18px;

		margin-top: 5%;

	}

}



.advantage-body p{ min-height:64px;

	display: block;

	font-size: 16px;

	color: #666;

	line-height: 32px;

	margin-top: 10px;

}





@media screen and (max-width: 640px) {

	.advantage-body p{

		font-size: 14px;

		line-height: 24px;

	}

}



.case{

	display: block;

	margin-top: 40px;

	position: relative;

	overflow: hidden;

}



.case .case-header{

	display: block;

	float: left;

	width: 25%; 

	text-align: center;

	padding: 0 3%;

	font-size: 0;

}



@media screen and (max-width: 640px) {

	.case .case-header{

		width: 50%;

	}

}



.case .case-header h3{

	display: block;

	margin-top: 26%;

}



@media screen and (max-width: 640px) {

	.case .case-header h3{

		margin-top: 22%;

	}

}



.case .case-header h3 img{

	display: block;

	max-width: 100%;

	width: auto;

	margin: 0 auto;

}



.case .case-header a{

	display: inline-block;

	width: 134px;

	height: 34px;

	border: 1px solid #e8e8e8;

	border-radius: 15px;

	margin-top: 15%;

	text-align: center;

	line-height: 32px;

	color: #777;

	font-size: 15px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.case .case-header a{

		font-size: 14px;

		margin-top: 13%;

		width: 120px;

		height: 30px;

		line-height: 28px;

	}

}



@media screen and (max-width: 375px) {

	.case .case-header a{

		width: 100px;

		height: 26px;

		line-height: 24px;

	}

}



.case .case-header a:hover{

	color: #fff;

	border: 1px solid #8a2677;

	background-color: #8a2677;

}



.case .item{

	position: relative;

	display: block;

	float: left;

	width: 25%;

	border: 1px solid #fff;

	overflow: hidden;

	opacity: 0;

	left: -20px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.case .item{

		width: 50%;

	}

}



.case .item>a>img{

	display: block;

	width: 100%;

	height: auto;

	-webkit-transition: 0.5s ease-in-out;

	-o-transition: 0.5s ease-in-out;

	transition: 0.5s ease-in-out;

}



.case .item:hover>a>img{

	-webkit-transform: scale(1.05);

	-ms-transform: scale(1.05);

	-o-transform: scale(1.05);

	transform: scale(1.05);

}



.case .item1{

	-webkit-transition-delay: 0.1s;

	-o-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.case .item2{

	-webkit-transition-delay: 0.2s;

	-o-transition-delay: 0.2s;

	transition-delay: 0.2s;

}



.case .item3{

	-webkit-transition-delay: 0.3s;

	-o-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



.case .item4{

	-webkit-transition-delay: 0.4s;

	-o-transition-delay: 0.4s;

	transition-delay: 0.4s;

}



.case .item5{

	-webkit-transition-delay: 0.5s;

	-o-transition-delay: 0.5s;

	transition-delay: 0.5s;

}



.case .item6{

	

	-webkit-transition-delay: 0.6s;

	-o-transition-delay: 0.6s;

	transition-delay: 0.6s;

}



.case .item7{

	-webkit-transition-delay: 0.7s;

	-o-transition-delay: 0.7s;

	transition-delay: 0.7s;

}



.case .item8{

	-webkit-transition-delay: 0.8s;

	-o-transition-delay: 0.8s;

	transition-delay: 0.8s;

}



.case .item9{

	-webkit-transition-delay: 0.9s;

	-o-transition-delay: 0.9s;

	transition-delay: 0.9s;

}



.case .item10{

	-webkit-transition-delay: 1s;

	-o-transition-delay: 1s;

	transition-delay: 1s;

}



.case .item11{

	-webkit-transition-delay: 1.1s;

	-o-transition-delay: 1.1s;

	transition-delay: 1.1s;

}



.case.animate .item{

	opacity: 1;

	left: 0;

}



.case .item .mask{

	display: block;

	position: absolute;

	width: 50px;

	height: 50px;

	background-color: #333;

	background-color: rgba(0,0,0,0.6);

	border-radius: 50%;

	z-index: 10;

	top:50%;

	margin-top: -25px;

	left:50%;

	margin-left: -25px;

	color: #fff;

	text-align: center;

	line-height: 50px;

	font-family: "Simsun";

	font-size: 40px;

	opacity: 0;

	-webkit-transform: scale(1.2);

	-ms-transform: scale(1.2);

	-o-transform: scale(1.2);

	transform: scale(1.2);

	-webkit-transition: 0.5s ease-in-out;

	-o-transition: 0.5s ease-in-out;

	transition: 0.5s ease-in-out;

}



.case .item:hover .mask{

	opacity: 1;

	-webkit-transform: scale(1);

	-ms-transform: scale(1);

	-o-transform: scale(1);

	transform: scale(1);

}



.about-header h3{

	background: url(../imgs/about-tit.jpg) no-repeat center;

}



.about-body{

	display: block;

	overflow: hidden;

}



.about-body .pic{

	position: relative;

	display: block;

	float: left;

	width: 37.28%;

	opacity: 0;

	left: -20px;

	-webkit-transition: 0.3s 0.3s ease-in-out;

	-o-transition: 0.3s 0.3s ease-in-out;

	transition: 0.3s 0.3s ease-in-out;

}



.about-body.animate .pic{

	opacity: 1;

	left:0;

}



@media screen and (max-width: 768px) {

	.about-body .pic{

		width: 100%;

		float: none;

	}

}



.about-body .pic img{

	display: block;

	max-width: 100%;

	margin: 0 auto;

}



.about-body .intro{

	position: relative;

	display: block;

	overflow: hidden;

	opacity: 0;

	left: 20px;

	-webkit-transition: 0.3s 0.6s ease-in-out;

	-o-transition: 0.3s 0.6s ease-in-out;

	transition: 0.3s 0.6s ease-in-out;

}



.about-body.animate .intro{

	opacity: 1;

	left:0;

}



.about-body .intro .content{

	display: block;

}



.about-body .intro .content .text{

	display: block;

	float: left;

	padding-right: 134px;

}



@media screen and (max-width: 768px) {

	.about-body .intro .content .text{

		padding-right: 120px;

	}

}



@media screen and (max-width: 640px) {

	.about-body .intro .content .text{

		padding-right: 0px;

		float: none;

	}

}



.about-body .intro .content h2{

	display: block;

	font-size: 22px;

	color: #444;

	margin-top: 38px;

	line-height: 1;

}



@media screen and (max-width: 640px) {

	.about-body .intro .content h2{

		font-size: 18px;

	}

}



.about-body .intro .content .line{

	display: block;

	width: 24px;

	height: 2px;

	background-color: #8a2677;

	margin-top: 25px;

}



@media screen and (max-width: 640px) {

	.about-body .intro .content .line{

		margin-top: 12px;

	}

}



.about-body .intro .content p{

	display: block;

	margin-top: 22px;

	line-height: 28px;

	color: #666;

	font-size: 17px;

}



@media screen and (max-width: 640px) {

	.about-body .intro .content p{

		font-size: 14px;

		margin-top: 10px;

	}

}



.about-body .intro .content .more{

	position: relative;

	display: block;

	float: right;

	width: 105px;

	height: 157px;

	padding: 75px 0;

	background-color: #444;

	margin-right: -105px;

	right:105px;

	margin-top: 114px;

	text-align: center;

	font-size: 0;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.about-body .intro .content .more{

		position: static;

		float: left;

		margin: 6px 0 0 0;

		padding: 15px 0;

		height: 38px;

	}

}



.about-body .intro .content .more:hover{

	background-color: #333;

}



.about-body .intro .content .more span{

	display: inline-block;

	width: 8px;

	height: 8px;

	background-color: #fff;

	border-radius: 50%;

	margin: 0px 4px;

}



.about-body .intro .contact-btn{

	display: block;

	width: 225px;

	height: 68px;

	float: right;

	padding-left: 90px;

	line-height: 68px;

	color: #fff;

	font-size: 22px;

	background: #8a2677 url(../imgs/icon/icons.png) no-repeat 50px -425px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.about-body .intro .contact-btn{

		float: left;

	}

}



.about-body .intro .contact-btn:hover{

	background-color: #91775c;

}



.video-wrap{

	position: relative;

	display: block;

	margin-top: 40px;

	background-position: center center;

	background-repeat: no-repeat;

	-webkit-background-size: cover;

	background-size: cover;

	overflow: hidden;

	opacity: 0;

	top:20px;

	-webkit-transition: 0.3s 0.2s ease-in-out;

	-o-transition: 0.3s 0.2s ease-in-out;

	transition: 0.3s 0.2s ease-in-out;

}



.video-wrap.animate{

	opacity: 1;

	top:0;

}



@media screen and (max-width: 640px) {



	.video-wrap{

		margin-top: 8%;

		min-height: 400px;

	}



	.video-wrap .container{

		position: relative;

		min-height: 400px;

	}



	.video-wrap .container{

		padding: 0;

	}

}



.video-wrap .video{

	display: block;

	width: 100%;

	opacity: 0;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.video-wrap .video{

		position: absolute;

		display: none;

		opacity: 1;

		top:0;

		left:0;

		width: 100%;

		height: 100%;

	}

}



.video-wrap .video.show{

	opacity: 1;

}



@media screen and (max-width: 640px) {

	.video-wrap .video.show{

		display: block;

	}

}



.video-wrap .mask{

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

	background-color: rgba(0,0,0,0.7);

	top:0;

	left:0;

	z-index: 5;

}



.video-wrap .play{

	display: block;

	position: absolute;

	width: 64px;

	height: 64px;

	top:50%;

	margin-top: -32px;

	left:50%;

	margin-left: -32px;

	background:url(../imgs/icon/icons.png) no-repeat 0px -361px;

	z-index: 10;

	outline: none;

	border: none;

	cursor: pointer;

	opacity: 0.7;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.video-wrap .play:hover{

	opacity: 1;

}



.online-service{

	display: block;

	padding: 100px 0;

	overflow: hidden;

}



@media screen and (max-width: 640px) {

	.online-service{

		padding: 8% 0;

	}

}



.online-service li{

	position: relative;

	display: block;

	float: left;

	width: 25%;

	text-align: center;

	padding: 0 20px;

	font-size: 0;

	top:-20px;

	opacity: 0;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.online-service .item1{

	-webkit-transition-delay: 0.2s;

	-o-transition-delay: 0.2s;

	transition-delay: 0.2s;

}



.online-service .item2{

	-webkit-transition-delay: 0.4s;

	-o-transition-delay: 0.4s;

	transition-delay: 0.4s;

}



.online-service .item3{

	-webkit-transition-delay: 0.6s;

	-o-transition-delay: 0.6s;

	transition-delay: 0.6s;

}



.online-service .item4{

	-webkit-transition-delay: 0.8s;

	-o-transition-delay: 0.8s;

	transition-delay: 0.8s;

}



.online-service.animate li{

	opacity: 1;

	top: 0;

}



@media screen and (max-width: 768px) {

	.online-service li{

		width: 50%;

		padding: 5% 0;

	}

}



@media screen and (max-width: 640px) {

	.online-service li{

		float: none;

		width: 100%;

		padding: 5% 0;

	}

}



.online-service li .icon{

	display: inline-block;

}



.online-service li h4{

	display: block;

	font-size: 17px;

	color: #8a2677;

	line-height: 1;

	margin-top: 21px;

}



@media screen and (max-width: 640px) {

	.online-service li h4{

		font-size: 16px;

	}

}



.online-service li p{

	display: block;

	font-size: 17px;

	color: #666;

	margin-top: 15px;

}



@media screen and (max-width: 640px) {

	.online-service li p{

		font-size: 16px;

	}

}



.online-service li a{

	display: inline-block;

	width: 180px;

	height: 50px;

	border: 1px solid #8a2677;

	border-radius: 2px;

	margin-top: 17px;

	color: #8a2677;

	text-align: center;

	line-height: 48px;

	font-weight: bold;

	font-size: 14px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.online-service li a{

		width: 80%

	}

}



.online-service li a:hover{

	color: #fff;

	background-color: #8a2677;

}



.online-service li .ewm{

	display: none;

	position: absolute;

	padding: 15px;

	background-color: #333;

	background-color: rgba(0,0,0,0.6);

	text-align: center;

	z-index: 20;

	border-radius: 5px;

	top: -50px;

	left: 50%;

	margin-left: -95px;

}



.online-service li .ewm img{

	display: block;

	width: 160px;

	height: 160px;

}





.book-experience{

	display: block;

	padding: 26px;

	background-color: #1a1a1a;

}



/*.book-experience1{

	margin-top: 40px;

}*/



@media screen and (max-width: 768px) {

	.book-experience{

		padding: 4% 0;

	}

}



@media screen and (max-width: 640px) {

	.book-experience{

		padding: 8% 0;

	}

}



.book-experience .advertising{

	position: relative;

	display: block;

	float: left;

	width: 220px;

	height: 97px;

	background: url(../imgs/advertising.png) no-repeat center;

	margin-left: -220px;

    left: -200px;

    opacity: 0;

    -webkit-transform: rotate(-60deg);

    -ms-transform: rotate(-60deg);

    -o-transform: rotate(-60deg);

    transform: rotate(-60deg);

    -webkit-transition: all 0.8s 0.1s ease-in-out;

	-o-transition: all 0.8s 0.1s ease-in-out;

	transition: all 0.8s 0.1s ease-in-out;

}



.book-experience.animate .advertising{

	left:220px;

	opacity: 1;

	-webkit-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

}



@media screen and (max-width: 768px) {

	.book-experience.animate .advertising{

		display: block;

		float: none;

		width: 100%;

		margin-left: 0;

		left:0;

	}

}



.book-experience .content{

	position: relative;

	display: block;

	float: left;

	width: 100%;

	padding: 0 205px 0 250px;

	color: #fff;

	opacity: 0;

	left: -20px;

	-webkit-transition: 0.8s 0.2s ease-in-out;

	-o-transition: 0.8s 0.2s ease-in-out;

	transition: 0.8s 0.2s ease-in-out;

}



.book-experience.animate .content{

	left:0;

	opacity: 1;

}



@media screen and (max-width: 768px) {

	.book-experience .content{

		float: none;

		padding: 0;

		text-align: center;

		padding: 4% 0 3% 0;

	}

}



@media screen and (max-width: 640px) {

	.book-experience .content{

		padding: 8% 0 6% 0;

	}

}



.book-experience .content h4{

	display: block;

	font-size: 24px;

	margin-top: 4px;

}



@media screen and (max-width: 768px) {

	.book-experience .content h4{

		margin-top: 0;

	}

}



@media screen and (max-width: 640px) {

	.book-experience .content h4{

		font-size: 18px;

	}

}



.book-experience .content p{

	display: block;

	line-height: 24px;

	font-size: 15px;

	margin-top: 6px;

}



@media screen and (max-width: 640px) {

	.book-experience .content p{

		font-size: 14px;

	}

}



.book-experience .book{

	position: relative;

	display: block;

	width: 163px;

	height: 44px;

	text-align: center;

	line-height: 44px;

	border-radius: 4px;

	color: #fff;

	font-size: 15px;

	background-color: #8a2677;

	float: left;

	margin: 28px -163px 0 0;

	opacity: 0;

	right: 183px;

	-webkit-transition: all 0.8s 0.2s ease-in-out,background 0.3s ease-in-out;

	-o-transition: all 0.8s 0.2s ease-in-out,background 0.3s ease-in-out;

	transition: all 0.8s 0.2s ease-in-out,background 0.3s ease-in-out;

}



.book-experience.animate .book{

	opacity: 1;

	right: 163px;

}



@media screen and (max-width: 768px) {

	.book-experience .book{

		position: static;

		margin: 0 auto;

		right: 0;

		float: none;

	}

}



.book-experience .book:hover{

	background-color: #91775c;

}

.book-experience .phone{
	display: block;
	float: left;
	position: relative;
	width: 200px;
	margin-right: -200px;
	margin-top: 20px;
	right:188px;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 768px) {

	.book-experience .phone{

		width: 100%;

		margin-right: 0;

		position: static;

		margin: 0 auto;

		right: 0;

		float: none;

	}

}

.book-experience .phone h4{
	display: block;
	font-size: 28px;
	font-weight: bold;
	white-space: normal;
}

.book-experience .phone p{
	display: block;
	margin-top: 4px;
	color: #ddd;
}

.footer{

	display: block;

	padding: 55px 15px;

	background-color: #f5f5f5;

	overflow: hidden;

}



@media screen and (max-width: 640px) {

	.footer{

		padding: 8% 3%;

	}

}



.cantact-box .contact-l{

	display: block;

	float: left;

	width: 60%;

	padding-right: 20px;

}



@media screen and (max-width: 768px) {

	.cantact-box .contact-l{

		width: 50%;

	}

}



@media screen and (max-width: 640px) {

	.cantact-box .contact-l{

		float: none;

		width: 100%;

		padding-right: 0;

	}

}



.cantact-box .contact-l h4{

	display: block;

	font-size: 17px;

	color: #666;

	margin-bottom: 6px;

}



@media screen and (max-width: 640px) {

	.cantact-box .contact-l h4{

		font-size: 18px;

	}

}



.cantact-box .contact-l p{

	display: block;

	line-height: 31px;

	color: #666;

}



.cantact-box .contact-l ul{

	display: block;

	font-size: 0;

}



.cantact-box .contact-l ul li{

	display: inline-block;

	line-height: 31px;

	font-size: 14px;

	padding-right: 5px;

	color: #666;

}



.cantact-box .contact-l ul li:not(:last-child):after{

	content: "丨";

}



@media screen and (max-width: 640px) {

	.cantact-box .contact-l ul li:not(:last-child):after{

		content: "";

	}

}



.cantact-box .contact-l ul li a{

	color: #6633ff;

	font-weight: bold;

}



.cantact-box .contact-l ul .line{

	padding: 0 3px;

}



.cantact-box .contact-l .btn{

	display: block;

	width: 180px;

	height: 50px;

	border: 1px solid #ccc;

	text-align: center;

	line-height: 48px;

	color: #666;

	font-weight: bold;

	margin-top: 30px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.cantact-box .contact-l .btn{

		width: 100%;

		margin-top: 4%;

	}

}



.cantact-box .contact-l .btn:hover{

	color: #fff;

	background-color: #8a2677;

	border: 1px solid #8a2677;

	border-radius: 2px;

}



.cantact-box .contact-r{

	display: block;

	float: right;

	width: 360px;

	padding-left: 20px;

}



@media screen and (max-width: 768px) {

	.cantact-box .contact-r{

		width: 50%;

	}

}



@media screen and (max-width: 640px) {

	.cantact-box .contact-r{

		width: 100%;

		float: none;

		margin-top: 10%;

		padding-left: 0;

	}

}



.cantact-box .contact-r li{

	position: relative;

	display: block;

	height: 42px;

	margin-bottom: 22px;

	clear: both;

}



.cantact-box .contact-r li i{

	display: block;

	float: left;

	margin-right: 10px;

}



.cantact-box .contact-r li .content{

	display: block;

	overflow: hidden;

	height: 42px;

	border-bottom: 1px solid #ddd;

	line-height: 40px;

	color: #666;

	font-size: 17px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



.cantact-box .contact-r li .content a{

	color: #666;

}



.cantact-box .contact-r li a:hover{

	color: #6633ff;

}



.cantact-box .contact-r li .ewm{

	display: none;

	position: absolute;

	padding: 15px;

	background-color: #333;

	background-color: rgba(0,0,0,0.6);

	text-align: center;

	z-index: 20;

	border-radius: 5px;

	top:0;

	left:50px;

}


@media screen and (max-width: 640px) {

	.cantact-box .contact-r li .ewm{
		top:-80px;
	}

}


.cantact-box .contact-r li .ewm p{

	display: block;

	font-size: 16px;

	color: #fff;

}



.cantact-box .contact-r li .ewm img{

	display: block;

	width: 200px;

	height: 200px;

}



.footer .info{

	display: block;

	margin-top: 30px;

	color: #666;

}



@media screen and (max-width: 640px) {

	.footer .info{

		text-align: center;

	}

}



.go-top{

	position: fixed;

	display: none;

	width: 64px;

	height: 64px;

	bottom:0;

	right:0;

	background: rgba(163,147,130,0.7) url(../imgs/go-top.png) no-repeat center;

	cursor: pointer;

	z-index: 999;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.go-top{

		width: 30px;

		height: 30px;

		-webkit-background-size: auto 14px;

		background-size: auto 14px;

	}

}



.go-top:hover{

	background-color: #8a2677;

}





@media screen and (max-width: 640px) {

	.section-header h3{

		height: 36px;

		-webkit-background-size: auto 36px;

		background-size: auto 36px;

	}

}



@media screen and (max-width: 375px) {

	.section-header h3{

		height: 32px;

		-webkit-background-size: auto 32px;

		background-size: auto 32px;

	}

}





@media screen and (max-width: 320px) {

	.section-header h3{

		height: 32px;

		-webkit-background-size: auto 30px;

		background-size: auto 30px;

	}

}



.modal-bg{

	display: none;

	position: fixed;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	bottom:0;

	right:0;

	z-index: 1000;

	background-color: #333;

	background-color: rgba(0,0,0,0.8);

}



.modal-bg-black{

	display: none;

	position: fixed;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	bottom:0;

	right:0;

	z-index: 1000;

	background-color: #000;

}





/*案例弹窗*/

.case-modal{

	display: none;

	position: fixed;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	z-index: 1001;

	font-size: 0;

	text-align: center;

}



.case-modal img{

	display: inline-block;

	max-width: 100%;

	max-height: 100%;

	vertical-align: middle;

	-webkit-transition: 0.5s 0.3s ease-out;

	-o-transition: 0.5s 0.3s ease-out;

	transition: 0.5s 0.3s ease-out;

}



.case-modal:before{

	display: inline-block;

	content: "";

	width: 0;

	height: 100%;

	vertical-align: middle;

}



.case-modal p{

	position: absolute;

	display: block;

	width: 100%;

	height: 60px;

	text-align: center;

	line-height: 60px;

	font-size: 18px;

	color: #fff;

	background-color: rgba(0,0,0,0.6);

	bottom:0;

	left:0;

	z-index: 1002;

}



@media screen and (max-width: 640px) {

	.case-modal p{

		height: 40px;

		line-height: 40px;

		font-size: 16px;

	}

}



.case-modal .btn{

	position: fixed;

	display: block;

	width: 40px;

	height: 60px;

	border-radius: 5px;

	text-align: center;

	line-height: 60px;

	font-size: 40px;

	font-family: "Simsun";

	font-weight: 100;

	color: #fff;

	top:50%;

	margin-top: -30px;

	background-color: #333;

	background-color: rgba(0,0,0,0.6);

	z-index: 1003;

}



@media screen and (max-width: 640px) {

	.case-modal .btn{

		width: 30px;

		height: 46px;

		line-height: 46px;

		font-size: 24px;

	}

}



.case-modal .btn.prev{

	left:10px;

}



.case-modal .btn.next{

	right:10px;

}



.case-modal .close-btn{

	display: block;

	position: fixed;

	width: 40px;

	height: 40px;

	border-radius: 50%;

	background: #333 url(../imgs/icon/close-white.png) no-repeat center;

	background: rgba(0,0,0,0.6) url(../imgs/icon//close-white.png) no-repeat center;

	-webkit-background-size: 20px 20px;

	background-size: 20px 20px;

	top: 10px;

	right: 10px;

	-webkit-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

	transition: 0.3s ease-in-out;

}



@media screen and (max-width: 640px) {

	.case-modal .close-btn{

		-webkit-background-size: 16px 16px;

		background-size: 16px 16px;

	}

}



.case-modal .close-btn:hover{

	-webkit-transform: rotate(180deg);

	-ms-transform: rotate(180deg);

	-o-transform: rotate(180deg);

	transform: rotate(180deg);

}



/*联系我们弹窗*/

.contact-modal{

	position: fixed;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	opacity: 0;

	z-index: -1000;

	text-align: center;

	overflow-x: hidden;

	overflow-y: auto;

	font-size: 0;

}



.contact-modal.show{

	opacity: 1;

	z-index: 1001;

}



.contact-modal .model-box{

    text-align: center;

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

}



@media screen and (max-width:768px) {

	.contact-modal .model-box{

		background-color: #fff;

	}

}



.contact-modal .model-box:before{

    content: '';

    display: inline-block;

    height: 100%;

    vertical-align: middle;

}



.contact-modal .modal-content{
   	position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    width: 100%;
    text-align: left;
    z-index: 1002;
}

.contact-modal .modal-content .contact-container{
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	background-color: #fff;
	opacity: 0;
	-webkit-transform: translateY(20px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(20px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(20px) perspective(600px) rotateX(10deg);
	transform: translateY(20px) perspective(600px) rotateX(10deg);
	-webkit-transition: all 0.3s  ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


@media screen and (max-width:640px) {
	#contact-container .contact-container{
		padding: 30px 10px;
	}
}

.contact-modal.show .modal-content .contact-container{
	opacity: 1;
	-webkit-transform: translateY(0) perspective(600px) rotateX(0);
	-ms-transform: translateY(0) perspective(600px) rotateX(0);
	-o-transform: translateY(0) perspective(600px) rotateX(0);
	transform: translateY(0) perspective(600px) rotateX(0);
}

.contact-modal .modal-content .contact-container iframe{
	height: 600px;
	width: 100%;
}

.contact-modal .modal-content .contact-container .modal-header{
	display: block;
	height: 48px;
	line-height: 48px;
	margin-bottom: 10px;
	font-weight: 300;
}

.contact-modal .modal-content .contact-container .modal-header h3{
	display: block;
	font-size: 36px;
	color: #333;
}

.contact-modal .modal-content .contact-container .close-btn{
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	outline: none;
	border: none;
	background: url(../imgs/icon/icon-close.png) no-repeat center;
	top: 15px;
	right: 15px;
	cursor: pointer;
	-webkit-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.contact-modal .modal-content .contact-container .close-btn:hover{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.contact-modal .modal-content .contact-container .modal-body{
	display: block;
}

.contact-modal .modal-content .contact-container .modal-body li{
	display: block;
	margin-bottom: 10px;
}

.contact-modal .modal-content .contact-container .modal-body li input[type="text"]{
	display: block;
	width: 100%;
	height: 60px;
	padding: 6px 12px;
	line-height: 46px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 16px;
	color: #666;
	background-color: #f5f5f5;
}

.contact-modal .modal-content .contact-container .modal-body li input.false[type="text"]{
	border: 1px solid #ffa1a1;
}

.contact-modal .modal-content .contact-container .modal-body li textarea{
	display: block;
	width: 100%;
	height: 130px;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 16px;
	line-height: 30px;
	color: #666;
	background-color: #f5f5f5;
	resize: none;
}

.contact-modal .modal-content .contact-container .modal-body li textarea.false{
	border: 1px solid #ffa1a1;
}

.contact-modal .modal-content .contact-container .modal-body li .submit{
	display: block;
	padding: 20px;
	min-width: 180px;
	margin-top: 20px;
	font-size: 12px;
	color: #fff;
	line-height: 1;
	font-weight: bold;
	background-color: #63f;
	border: none;
	cursor: pointer;
	border-radius: 3px;
	-webkit-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.contact-modal .modal-content .contact-container .modal-body li .submit:hover{
	background-color: #260099;
}

.hot-line-modal{
	display: block;
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	opacity: 0;
	z-index: -1000;
}

.hot-line-modal.show{
	opacity: 1;
	z-index: 1000;
}

.hot-line-modal .model-box{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0 10px;
}

.hot-line-modal .hot-line-body{
	position: absolute;
	display: block;
	background-color: #fff;
	text-align: center;
	top:50%;
	margin-top: -86px;
	left:50%;
	margin-left: -146px;
	opacity: 0;
	-webkit-transform: translateY(20px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(20px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(20px) perspective(600px) rotateX(10deg);
	transform: translateY(20px) perspective(600px) rotateX(10deg);
	-webkit-transition: all 0.3s  ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.diangw{ position:relative; overflow:hidden; position:relative;padding: 50px;}
.model-box .close-btn{ z-index:99999;
	display: block;
	position: absolute;
	width: 30px;top:10px; right:10px;	height: 30px;
	outline: none;
	border: none;
	background: url(../imgs/icon/icon-close.png) no-repeat center;
	cursor: pointer;
	-webkit-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.model-box .close-btn:hover{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}


@media screen and (max-width:768px) {

	.hot-line-modal .hot-line-body{
		width: 96%;
		left:0;
		margin-left: 2%;
	}

}

.hot-line-modal.show .hot-line-body{
	opacity: 1;
	-webkit-transform: translateY(0px) perspective(0px) rotateX(0deg);
	-ms-transform: translateY(0px) perspective(0px) rotateX(0deg);
	-o-transform: translateY(0px) perspective(0px) rotateX(0deg);
	transform: translateY(0px) perspective(0px) rotateX(0deg);
}

.hot-line-modal .hot-line-body h4{
	font-size: 35px;
	font-weight: bold;
	color: #8a2677;
}

.hot-line-modal .hot-line-body p{
	display: block;
	font-size: 18px;
	color: #666;
}



.c_xiugai{width:100%; overflow:hidden;}
.c_xiugai ul{margin-left: -10px; width: 100%;}
.c_xiugai ul li{width:50%; overflow: hidden;line-height: 24px; font-size:16px; height:160px; color: #666666; float: left;  margin-bottom: 10px; box-sizing: border-box; padding-right: 10px;}
.c_tu{ float: left; margin:39px 43px; width: 82px; height: 82px; overflow: hidden;}
.c_tu img{display: block; width: 100%; height: auto;}
.c_wen{display: block; overflow: hidden; padding: 20px 25px 20px 0; }
.c_wen .c_neir{}
.l_biaoti{ font-size:20px; color: #444; padding-bottom: 20px;}
.l_biaoti span{ background: url(../imgs/xian_03.jpg) no-repeat bottom center; margin-right: 20px; padding-bottom: 12px;}
.l_biaoti img{vertical-align: middle;}

.beijing{background: #f6f6f6;box-sizing: border-box; width: 100%; display: inline-block;height:160px;}

@media screen and (max-width: 1200px) {
.c_xiugai ul li{ height:180px;}
.beijing{ height:180px;}
.c_tu{ float: left; margin:49px 38px;}
}

@media screen and (max-width: 1000px) {
.c_xiugai ul li{ height:200px;}
.beijing{ height:200px;}
.c_tu{ float: left; margin:59px 38px;}

}

@media screen and (max-width: 920px) {
.c_xiugai ul li{ height:230px;}
.beijing{ height:230px;}
.c_tu{ float: left; margin:74px 38px;}

}


@media screen and (max-width: 768px) {
.c_tu{ float: left; margin:38px;}

	.c_xiugai ul{margin-left:0px;}
	.c_xiugai ul li{width:100%; padding-right:0px; height:auto;}
	.beijing{ height:auto;}
}
.c_tus{ display:none;}
@media screen and (max-width: 640px) {
	.beijing{ position:relative;}
    .c_tus{ display: block; position:absolute; top:50%; margin-top:-30px; left:20px;width: 60px; height: 60px;}
    .c_tus img{ display: block; width:60px; height:60px;}
	.c_tu{ float: left; width: 60px; height: 60px; overflow: hidden; margin:20px;}
	.c_tu img{ display:none;}
	.c_wen .c_neir{}
}

