
﻿*{
	padding:0;
	margin:0;
	outline:none;	
	text-decoration:none;
}
html{
	font-size:18px;		
}
body{
	font-family:Arial,"微软雅黑";	
	-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	border: none;
	margin: 0;
	padding: 0;
}
ul,li{
	list-style-type:none;	
}

input{
	border:0;
	background:none;
	outline:none;
}
button{
	border:none;
	background:none;
	outline:none;
}
.topBar{
	width:100%;
	height:110px;	
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.topLogo{
	float:left;
	margin-left:50px;
	margin-top:30px;
}
.comTitle{
	width:100%;
	text-align:center;
	padding:35px 0;
}
.comTitle h1{
	font-size:40px;
	line-height:60px;
	color:#555555;
	font-weight:400;
}
.comTitle h2{
	display:inline-block;
	padding:0 10px;
	color:#8a8f99;
	font-size:16px;
	font-weight:400;
	line-height:30px;
	border-top:2px solid #b5b5b5;
}
.hamburger{
	position:absolute;
	top:30px;
	right:40px;
	background:none;
	outline:none;
}
.hamburger .line{
  width: 60px;
  height: 4px;
  border-radius:10px;
  background-color: #ecf0f1;
  display: block;
  margin: 12px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}


#hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(16px) rotate(45deg);
  -ms-transform: translateY(16px) rotate(45deg);
  -o-transform: translateY(16px) rotate(45deg);
  transform: translateY(16px) rotate(45deg);
}

#hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-16px) rotate(-45deg);
  -ms-transform: translateY(-16px) rotate(-45deg);
  -o-transform: translateY(-16px) rotate(-45deg);
  transform: translateY(-16px) rotate(-45deg);
}
.topBar2{
	width:100%;	
	height:110px;	
	position:fixed;
	left:0;
	top:0;
	z-index:3;
	background:rgba(255,255,255,.98);
	border-bottom:1px solid #ddd;
}
.topBar2 .hamburger .line{
	background:#999999;
}
.copy{
	width:100%;
	min-height:40px;
	line-height:40px;
	background:#fff;
	font-size:18px;	
	color:#999;
	text-align:center;
	padding-top:20px;
	padding-bottom:40px;
	overflow:hidden;
	margin-top:10px;
}
.copy img{
	padding:0 10px;
}
.copy div{
	margin-top:10px;
	float:left;
}
@media (min-width: 100px) { 
	.copy div{width:100%}
}
@media (min-width: 1200px) { 
	.copy div{width:50%}
}
.nav{
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	position:fixed;
	left:0;
	top:0;
	z-index:5;
	overflow:hidden;
	display:none;
}
.navBar .hamburger .line{
	background:#999999;
}
.navBar{
	width:350px;
	height:100%;
	background:#fff;
	float:right;
	position:relative;
}
.navMenu{
	margin-top:50px;
}
.navMenu li{
	line-height:90px;
	height:90px;
	text-align:center;
	border-bottom:1px solid #ddd;
}
.navMenu li a{
	font-size:24px;
	color:#8c8c8c;
	text-decoration:none;
}
.navContact{
	text-align:center;
	column-count: 1; 
	column-gap: 0;		
}
.navContact div{
	padding-top:15px;
	break-inside: avoid; 
	box-sizing: border-box; 	
}
.navContact div span{
	display:block;
	margin:0 auto;
}
.navContact div p{
	padding-bottom:10px;
	line-height:30px;
	font-size:24px;
	color:#333;
}
@media (min-height: 500px) { 
	.navContact{column-count: 3; }
	.navBar{width:700px;}
	.navMenu{margin-top:30px;}	
}
@media (min-height: 920px) { 
	.navContact{column-count: 1; }
	.navBar{width:350px;}	
	.navMenu{margin-top:50px;}	
}
.caseCont{
	width:100%;
	margin-top:120px;
	overflow:hidden;
	background:#fff;
	padding-top:40px;
}
.artTitle{
	font-size:36px;
	font-size:36px;
	color:#333;
	line-height:40px;
	font-weight:400;
	text-align:center;
}
.artTime{
	font-size:18px;
	color:#999999;
	font-weight:400;
	line-height:40px;
	text-align:center;	
}
.artTag{
	font-size:18px;
	color:#666666;
	font-weight:400;
	padding-bottom:30px;
	text-align:center;	
}
.artCont{
	font-size:1.6em;	
	text-align:left;
	line-height:45px;
	padding:0 20px;
	overflow:hidden;	
}
.artCont p{
	text-indent:30px;
	padding-bottom:20px;	
}
.artCont img{
	margin:0;
	padding:0;
	width:100%;
}
.relevant{
	padding:0 20px;
	margin-top:10px;
	background:#fff;
	overflow:hidden;
	text-align:center;
}
.relevant h2{
	font-size:30px;
	font-weight:400px;
	line-height:80px;
}
.relevantCase{
	column-count: 1; 
	column-gap: 0;	
	text-align:center;	
}

.relevantCaseList{
	padding-bottom:30px;
	overflow:hidden;
	break-inside: avoid; 
	box-sizing: border-box; 
	
}
.relevantCaseList img{
	width:530px;
	border-radius:10px;
}
.relevantCaseList a{
	color:#666;
	text-decoration:none;
	line-height:50px;
	font-size:24px;
}
@media (min-width: 450px) { 
	.relevantCase { column-count: 1;} 
	.relevantCaseList img{width:530px;}	
}
@media (min-width: 1000px) { 
	.relevantCase { column-count: 2;} 
	.relevantCaseList img{width:450px;}
}
@media (min-width: 1500px) { 
	.relevantCase { column-count: 3;} 
	.relevantCaseList img{width:450px;}	
}
@media (min-width: 1800px) { 
	.relevantCase { column-count: 3;} 
	.relevantCaseList img{width:530px;}	
}
.banner_About{
	display:table;		
	width:100%;
	height:400px;
	background:url(../../images/aboutbg.jpg) no-repeat;	
	background-position: center 80px;
	background-attachment: fixed;	
	overflow:hidden;
	margin-top:80px;
	text-align:center;
	color:#fff;
}
.banner_About div{
	display:table-cell;
	vertical-align:middle;
}
.banner_About h1{
	font-size:48px;
	font-weight:400;
}
.banner_About p{
	font-size:20px;
	padding-bottom:40px;
}
.banner_About h2{
	font-size:40px;
	font-weight:400;
}
.bdTop{
	border-top:1px solid #ddd;
}
.about_Cont1 div{
	padding:0 20px;
}
.about_Cont1 div p{
	padding-bottom:30px;
	font-size:1.5em;
	color:#666666;
	line-height:50px;
	text-indent:50px;
}
.service { 
	column-count: 2; 
	column-gap: 0;
	margin-bottom:40px;
}
.item { 
	break-inside: avoid; 
	box-sizing: border-box; 
	padding: 10px; 

}
@media (min-width: 200px) { 
	.service { column-count: 1;} 
}
@media (min-width: 450px) { 
	.service { column-count: 2;} 
}
@media (min-width: 1050px) { 
	.service { column-count: 4;} 

}
.serveList{
	height:310px;
	padding:30px;
	overflow:hidden;
	text-align:center;
	border:1px solid #ddd;
}
.serveList img{
	
}
.serveList h3{
	font-size:24px;
	color:#333;
	line-height:60px;	
}
.serveList p{
	font-size:18px;
	color:#999999;
	line-height:30px;	
}
.cases{
	column-count: 1; 
	column-gap: 0;	
	text-align:center;	
}

.caseList{
	padding-bottom:30px;
	overflow:hidden;	
}
.caseList img{
	width:530px;
	border-radius:10px;
}
.caseList a{
	color:#666;
	text-decoration:none;
	line-height:50px;
	font-size:24px;
}
@media (min-width: 450px) { 
	.cases { column-count: 1;} 
	.caseList img{width:530px;}	
}
@media (min-width: 1000px) { 
	.cases { column-count: 2;} 
	.caseList img{width:450px;}
}
@media (min-width: 1500px) { 
	.cases { column-count: 3;} 
	.caseList img{width:450px;}	
}
@media (min-width: 1800px) { 
	.cases { column-count: 3;} 
	.caseList img{width:530px;}	
}
.contact{
	background:#f3f3f3;
	width:100%;	
}
.contactCont{
	width:100%;
	text-align:center;
	overflow:hidden;
}
.codeColumn{
	max-width:500px;	
	margin:0 auto;
	column-count: 1; 
	column-gap: 0;	
	text-align:center;	
}
@media (min-width: 100px) { 
	.codeColumn { column-count: 1;} 
}
@media (min-width: 450px) { 
	.codeColumn { column-count: 2;} 
}
.codeColumn div span{
	display:block;
	margin:0 auto;
}
.codeColumn div p{
	padding-bottom:10px;
	line-height:30px;
	font-size:24px;
	color:#333;
}
.contactInfo{
	line-height:40px;
	padding:40px 20px;
}
.contactInfo h2{
	font-size:24px;
	color:#333333;
}
.contactInfo p{
	font-size:1.2em;
	color:#999;
}
.contact2{
	background:none;
	padding-top:110px;
}
.map{
	padding-bottom:40px;
}
.map img{
	width:100%;
}
.mtTop{
	margin-top:110px;
}