@charset "UTF-8";

@borderColor: #9b9b9b;
@bannercolor: #ffffff;
@fontcolor: #6d6e71;
@fontcolor2: #818285;

@fancyBoxColor: #363636;


.content(@width) {
	font-size:12px;
	font-weight:100;
	line-height:16px;
	word-wrap:break-word;
	float:left;
	width:@width;
	height:295px;
	overflow:auto;	
}



.smenu-head  {
	width: 980px;
	height: 120px;
	padding-top: 80px;
	
	.smenu {
		float: left;
		width: 241px;
	}
	
	ul {
		width: 241px;
	}
	
	li {
		width: 120px;
		padding-bottom: 7px;
	}
	
	.s1 {
		padding-left: 105px;
	}
	
	.s2 {
		padding-left: 84px;
	}
	
	.s3 {
		padding-left: 63px;
	}
	
	.s4 {
		padding-left: 41px;
	}
	
	.s5 {
		padding-left: 21px;
	}
	
	.point {
		padding-left: 20px;
		padding-top: 1px;
	}
	
	a {
		color: #6d6e71;
		font-size: 12px;
	}
	
	.head {
		float: left;
		width: 290px;
		padding-left: 321px;
		padding-top: 30px;
		
		p {
			color: @bannercolor;
		}
		
		.title {
			font-size: 36px;
			padding-left: 43px;	
		}
		
		.letter {
			display: none;
			font-size: 13px;
		}
	}

}

.content {
	.team-list  {
		padding-bottom: 0px;
	}
}

.achieve-list {
	width: 980px;
	padding-top: 55px;
	padding-bottom: 30px;
	
	li {
		float: left;
		width: 470px;
		padding-right: 10px;
		padding-left:  10px;
		padding-bottom: 20px;
	}
	
	.pic-detail {
		width: 470px;
			
		.pic-bg {
			float: left;
			width: 225px;
			height: 225px;
		}
		
		.pic {
			width: 225px;
			height: 225px;
			background-color: #e7e8e9;
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}
		
		.detail {
			float: right;
			width: 245px;
			/*
			height: 225px;
			*/
			position: relative;
			
			p {
				padding-top: 26px;
				padding-left: 20px;
				width: 190px;
				color: @fontcolor2;
				font-size: 11px;
				line-height: 18px;
			}
			
			span {
				font-size: 20px;
			}
			
			i {
				font-size: 12px;
			}
			
			.btn {
				position: absolute;
				bottom: 0px;
				width: 225px;
				height: 21px;
				
					.more {
						float: right;
					}
					
					.more1 {
						position: relative;
						z-index:1;
						width: 21px;
						overflow: hidden;
					}
					
					.more2 {
						overflow: hidden;
						position: absolute;
						right: 0;
						width: 21px;
					}
			}
		}
	}
}

.recruitmentp {
	.recruitments {
		width: 561px;
		
		.textBox {
			.bottomBox {
				padding-top:20px;
				
				.rightBottomBox {
					width: 450px;
				}
			}
		}
	}
}


.achievements {
	position:relative;
	width:1083px;
	height:494px;
	overflow:auto;
	background-color:#FFF;
	
	.textBox {
		position:absolute;
		left:0;
		top:0;
		width:561px;
		height:494px;
		
		.topBox {
			width:561px;
			height:100px;
			
			.iconBox {
				float:left;
				width:36px;
				height:100px;
				
				div {
					width:30px;
					height:30px;
				}
				
				.blue {
					background-image:url('images/works/point1.png')	
				}
				.red {
					background-image:url('images/works/point2.png')	
				}
				.yellow {
					background-image:url('images/works/point3.png')	
				}
				
				.bluegreen {
					background-image:url('images/works/point5.png')	
				}
			}
			.cateBox {
				float:left;
				width:36px;
				height:100px;
			}
			.titleBox {
				float:left;
				width:525px;
				height:100px;

				.headerText {
					word-wrap:break-word;
					width:393px;
					margin-left:20px;
					margin-top:30px;
					font-size:32px;
					color:@fancyBoxColor;
				}
			}
		}
		
		.bottomBox {
			padding-left:60px;
			padding-right:60px;	
			padding-top:40px;
			color:@fancyBoxColor;
			
			.leftBottomBox {
				float:left;
				width:109px;
				height:295px;
				
				a {
					text-decoration:underline;
				}
				
				div {
					margin-bottom:16px;	
					
					span {
						font-weight:bold;
						font-size:13px;
					}
					p {
						font-size:12px;
					}
				}
			}
			
			.rightBottomBox {
				.content(257px);
			}
			.fullBottomBox {
				.content(440px);
			}
		}
	}
	
	.photoBox {
		position:absolute;
		right:0;
		top:0;
		z-index:0;
		width:605px;
		height:494px;
		overflow:hidden;

		.photos {
			overflow:hidden;
			width:494px;
			height:494px;
			
			.photosUi {
				width:0;
				position:absolute;
				left:0;
				top:0;	
				
				li {
					list-style:none;
					display:inline-block;
					opacity:0.3;	
				}
				.current {
					opacity:1 !important;	
				}
			}
		}
		
		.leftBox {
			position:absolute;
			left:0;
			top:0;
			z-index:1;
			width:164px;
			height:494px;
			
			a {
				height:494px;
				display:block;
				opacity:0;
			}
		}
		.rightBox {
			position:absolute;
			left:441px;
			top:0;
			z-index:1;
			width:164px;
			height:494px;
			
			a {	
				height:494px;
				display:block;
				opacity:0;
			}
		}
	}
}


.clientBox {
	width:169px;
	height:169px;
	position:relative;
	left:0;
	top:0;
	
	.imgBox {
		width:169px;
		height:169px;
		position:absolute;
		left:0;
		top:0;
		z-index:1;	
		
		.overImg {
			width:169px;
			height:169px;
			background-repeat:no-repeat;
			background-position:left top;
			position:absolute;
			left:0;
			top:0;
			z-index:1;	
		}
		
		.bottomImg {
			width:169px;
			height:169px;
			background-repeat:no-repeat;
			background-position:left top;
			position:absolute;
			left:0;
			top:0;
			opacity:0;
			z-index:2;	
		}
	}
	
	.barBox {
		width:169px;
		height:28px;
		position:absolute;
		left:0;
		bottom:0;
		z-index:2;	
		
		.overBar {
			width:169px;
			height:28px;
			background-color:#E7E8E9;
			background:url(images/client/more_btn.png) no-repeat right bottom;
			position:absolute;
			left:0;
			bottom:0;
			z-index:1;	
		}
		
		.bottomBar {
			display:table-cell;
			vertical-align:middle;
			width:169px;
			height:28px;
			background: url(/images/client/client_namebg.png) no-repeat center bottom;
			left:0;
			bottom:0;
			opacity:0;
			z-index:2;
			font-size: 11px;
			color: #F2F3F3;
			text-align: center;
			line-height:12px;
			
		}
	}
}

.leftBox {
	width:164px;
	background:no-repeat;
	background-image:url(/images/company/left.png);
	background-position:left top;	
}

.rightBox {
	width:164px;
	background:no-repeat;
	background-image:url(/images/company/right.png);
	background-position:right top;
}

.photoBox {
	background-color:#000000;
}@charset "UTF-8";

@borderColor: #9b9b9b;
@bannercolor: #ffffff;
@fontcolor: #6d6e71;
@fontcolor2: #818285;
@fancyBoxColor: #363636;

@linkcolor: #4fc8e7;

/* new home page setting */

.swiper-slide img {
	opacity: 1;
}

.swiper-pagination-bullet {
	background: url(/images/banner_point.png) no-repeat top center !important;
	padding-left: 13px;
    padding-right: 13px;
	opacity: 1 !important;
}

.swiper-pagination-bullet-active {
	background: url(/images/banner_pointb.png) no-repeat top center !important;
}

.background-slider {
	background: url(/images/slider_bg.png) no-repeat top center;
	min-height: 500px;
	padding-top: 18px;
	padding-bottom: 35px;
	width: 780px;
	margin: 0 auto;
	
}

.bgslider {
	width:714px;
	margin: 0 auto;
}

.btns {
	width: 170px;
	margin: 0 auto;
	
	li {
		float: left;
		padding-left: 13px;
		padding-right: 13px;
		
		img {
			cursor: pointer;
		}
	}
}

.banner {
	padding-bottom: 43px;
}
/*
.banner div {
	position:relative;
	left:0;
	top:0;
	height:428px;
	width: 714px;
}

.banner div div:first-child {
	left: 0px ;
	opacity:1 ;
}

.banner div div {
	position:relative;
	position:absolute;
	left:0px;
	top:0;
	height:428px;
	width: 714px;
}
*/

/* works.html */

.companyp {

	.smenu-head  {
		background: url(/images/company/head.png) no-repeat right bottom;
	
	.head {
		padding-left:80px;
		}
	
	}

	.this {
		background: url(/images/company/point.png) no-repeat left top;
	}
}


.workp {

	.smenu-head  {
		background: url(/images/works/head.png) no-repeat right bottom;
		
	}
	
	.photoBox {
		background:#000;
	}
	
}

.check-point {
	width: 155px;
	float: left;
	padding-left: 70px;
	
	.radios {
		padding-top: 10px;
	}
	
	.part {
		width: 110px;
		padding-top: 3px;
		padding-bottom: 3px;
		font-size: 11px;
		color: #ffffff;
	}
	
	.p1 {
		padding-left: 78px;
	}
	
	.p2 {
		padding-left: 64px;
	}
	
	.p3 {
		padding-left: 35px;
	}
	
	.p4 {
		padding-left: 18px;
	}
	
	.p5 {
		padding-left: 0px;
	}
	
	.p6 {
		padding-left: 50px;
	}
	
}

.work-list {
	width: 984px;
	padding-top: 55px;
	padding-bottom: 30px;
	
	li {
		float: left;
		width: 227px;
		padding-left: 17px;
		padding-right: 1px;
		padding-bottom: 20px;
	}
	
	.work-type {
		width: 227px;
		height: 90px;
		position: relative;
		z-index: 2;
	}
	
	.work-type2 {
		padding-left: 169px;
		padding-top: 78px;
		width: 58px;
		height: 58px;
		position: relative;
		z-index: 3;
	}

	.work-image {
		width: 226px;
		height: 226px;
		position: absolute;
		z-index: 1;
		display: block;
		top: 0;
		left: 0;
	}
	
	.bg {
		width: 227px;
		height: 226px;
		cursor: pointer;
		position: relative;
	}
}

.aboutp {
	.head {
		
		p {
			width: 331px;
		}
		
	}
}

.about-bg {
	background: url(/images/company/about/bg.png) no-repeat 3px top;
	width: 980px;
	
	    p {
			width: 695px;
			font-size: 12px;
			color: @fontcolor;
			line-height: 13px;
			
			padding-left: 240px;
			padding-top: 160px;
			padding-bottom: 150px;
	    }
}

.quotationp {

	.smenu-head  {
		background: url(/images/company/quotation/head.png) no-repeat right bottom;
		
		.head {
			
			p {	
				width: 300px;
			}
		}
	}
	
}

.map-contact {
	width: 980px;
	padding-top: 45px;
	padding-bottom: 45px;
		
		.map {
			float: left;
			width: 466px;
			height: 466px;
			
				#map_canvas {
					width: 466px;
					height: 466px;
				}
		}
		
		.contact {
			float: right;
			widht: 475px;
			
					.fields {
						width: 470px;
		
						li {
							list-style: none;
							float: right;
							font-size: 12px;
							padding-top: 10px;
							width: 470px;
							color: #ff0000;
						}
		
						.field {
							width: 470px;
							padding-bottom: 10px;
							color: @fontcolor;
							
							input {
								width: 470px;
								height: 20px;
								border: 1px solid #bbbbbb;
							}
						}

						.field2 {
							width: 470px;
							padding-bottom: 10px;
							color: @fontcolor;
							
							textarea {
								width: 470px;
								height: 200px;
								resize: none;
								border: 1px solid #bbbbbb;
								font-family: arial;
								font-size: 12px;
							}
							
						}
		
						.field3 {
							display: none;
						}
						
						.display {
							display: block !important;
						}
						
					}
				
					
					.message {
						font-weight: bold;
						color: @fontcolor;
						line-height: 24px;
						padding-bottom: 8px;
						font-size: 18px;
						padding-right: 60px;
					}
		}
}

.contact-list {
	background: url("images/footer_line.png") no-repeat scroll right top transparent;
    padding-top: 32px;
    width: 960px;
	
	.office-address {
		padding-bottom: 25px;
		
		.office {
			float: left;
			width: 256px;
			
			p {
				width: 217px;
			}
	
		}
		
		.address {
			width: 320px;
			
			p {
				width: 320px;
			}
		}
		
		p {
			font-size: 12px;
			color: @fontcolor;
			line-height: 15px;
		}

	}
		
}


.btn {
	position: absolute;
	width: 225px;
	height: 21px;
	float: right;
	right: 0;
	
		.more {
			float: right;
		}
		
		.more1 {
			position: relative;
			z-index:1;
			width: 21px;
			overflow: hidden;
		}
		
		.more2 {
			overflow: hidden;
			position: absolute;
			right: 0;
			width: 21px;
		}
		
		.click {
			cursor: pointer;
		}
}


.mediacp {

	.smenu-head  {
		
		
		.head {
			width: 320px;
			
		}
	}
	
}

.servicesp {

	.smenu-head  {
		background: url(/images/services/head.png) no-repeat right bottom;
		
		.head {
			width: 600px;
			
			.location {
				display: none;
				font-size: 13px;
				color: #ffffff;
				padding-left: 14px;
				padding-right: 14px;
			}
			
			.point { 
				background: url(/images/services/point.png) no-repeat center bottom;
			}
		}
	}
	
}

.services-list {
	width: 980px;
	padding-top: 30px;
	padding-bottom: 30px;
	
	.list {
		padding-bottom: 30px;
		
		.top {
			padding-bottom: 5px;
			
			.pt {
				float: left;
				
				.spImg {
					position:relative;
					min-height:213px;
					
					.spImgOver {
						position:absolute;
						left:0;
						top:0;
						display:block;	
					}
					
					.spImgBottom {
						position:absolute;
						left:0;
						top:0;
						display:block;
						opacity:0;	
					}
				}
			}
			
			.pic {
				width: 215px;
			}
			
			.detail {
				width: 350px;
				padding-left: 65px;
				padding-right: 39px;
				padding-top: 35px;
				
					p {
						width: 350px;
						text-align: justify;
						line-height: 13px;
						font-size: 11px;
						color: @fontcolor;
						
						span {
							font-size: 25px;
							color: @fontcolor2;
							font-weight: bold;
							line-height: 25px;
						}
					
					}
			}
			
			.feature {
				width: 200px;
				padding-top: 38px;
				font-size: 11px;
				color: @fontcolor;
				line-height: 15px;
				
				.title {
					background: url(/images/services/feature_bg.png) no-repeat left top;
					font-size: 10px;
					width: 118px;
					color: @fontcolor2;
					display: block;
					padding-left: 3px;
					padding-bottom: 1px;
				}
			}
		
		
		}
		
		.bottom {
			width: 980px;
			display: none;
		}
	}
}

.playp {

	.smenu-head  {
		background: url(/images/company/play/head.png) no-repeat right bottom;
		
		.head {
			padding-left: 80px;
			width: 400px;
			
			
			
			.location {
				display: none;
				font-size: 13px;
				color: #ffffff;
				padding-left: 14px;
				padding-right: 14px;
			}
			
			.point { 
				background: url(/images/company/play/point.png) no-repeat center bottom;
			}
		}
	}
	
}

.clientp {

	.smenu-head  {
		background: url(/images/client/head.png) no-repeat right bottom;
		
		.head {
			width: 455px;
			
			
			
			.location {
				display: none;
				font-size: 13px;
				color: #ffffff;
				padding-left: 14px;
				padding-right: 14px;
			}
			
			.point { 
				background: url(/images/client/point.png) no-repeat center bottom;
			}
		}
	}
	
}

.client-list {
	width: 980px;
	padding-top: 50px;
	padding-bottom: 50px;
	
	ul {
	
		width: 980px;
		
		li {
			float: left;
			width: 170px;
			padding-bottom: 40px;
		}
		
		.second {
			padding-left: 100px;
			padding-right: 50px;
		}
		
		.third {
			padding-left: 50px;
			padding-right: 100px;
		}
		
		
	}
		
		
	.change {
		width: 170px;
		height: 210px;
		position: relative;
		
		.logo-letter {
			position: absolute;
			
			width: 170px;
			
			.logo {
				width: 169px;
				height: 169px;
			}
			
			.letter {
				width: 169px;
				height: 19px;
				background-color: #E7E8E9;
			}
			
			.btn {
				float: right;
				width: 19px;
			}
		}
		
		.logo-letter2 {
			position: absolute;
			width: 170px;
			display: none;
			
			.logo {
				width: 169px;
				height: 169px;
			}
			
			.letter {
				background: url(/images/client/client_namebg.png) no-repeat center top;
				width: 169px;
				height: 19px;
				background-color: #E7E8E9;
				font-size: 12px;
				color: #f2f3f3;
				text-align: center;
				line-height: 19px;
			}
		}
	}		
}


.mediap {
	.content {
		.detail {
			button {
				background:#d13b50;
				border:none;
				width:110px;
				text-align:center;
				color:#FFF;
			}
		}
	}
}