@charset "UTF-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
	font-family: '微软雅黑','Microsoft YaHei','PingFangSC-Regular',sans-serif;
}

/*----------------------header------------------------*/
#header{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
	background-color: rgba(0,0,0,0.3);
}

#headerContainer{
	width: 100%;
	max-width: 1254px;
	min-width: 900px;
	height: 82px;
	margin: auto;
	position: relative;		
}

#logo{
	width: 207px;
	height: 43px;
	float: left;
	margin: 20px 0 0 20px;	
	background: url(../files/index/logo-white.png) no-repeat center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}

#menu{
	width: 610px;
	height: 82px;
	float: right;	
	position: absolute;
	right: 0;	
}

.menu1{
	color: white;
	text-decoration: none;
	font-size: 15px;
	font-weight:normal;
	line-height: 15px;
	float: left;
	padding-top: 34px;
	padding-bottom: 33px;
	padding-left: 22px;
	padding-right: 22px;	
}

.menu1:hover{
	color: #D0332C !important;
} 

#menu1_active{
	color: #D0332C;	
}

.menu2{
	font-size: 15px;
	font-weight: normal;
	line-height: 34px;
	color: #b3b3b3;
	display: block;
	text-decoration: none;
	padding-left: 30px;		
}

.menu2:hover{
	color: white;		
}

#menu div{
	width: 148px;	
	position: absolute;
	top: 82px;
	background-color: #333333;
	padding: 17px 0;
	display: none;	
	
}

#menuArchitecture{	
	left: 66px;		
}

#menuIndustry{
	left: 172px;	
}

#menuFilm{
	left: 275px; 	
}

#menuInteractive{
	left: 378px;	
}

#menuAbout{
	left: 499px;	
}
/*---------------home-----------------*/
#home{
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
	position: relative;
	
}

#bgVideoContainer{
	width: 100%;
	
}

#bgVideo{		
	width: 100%;
	height: 1000px;
	object-fit: cover;	
	float: left;	
	background: url(../files/index/bgVideo_load.jpg) no-repeat center;
	background-size: cover;
	background-color: #CECECE;
}

#hud{
	position: absolute;
	bottom: 0;
	left: 50%;	
	transform: translate(-50%,0);
	width: 1203px;
	height: 250px;	

}

#mouse{
	width: 30px;
	height: 45px;	
	margin: auto;
	border: 2px solid white;
	border-radius: 17px;
}

#button{
	width: 2px;
	height: 12px;
	background-color: white;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: 8px;
	opacity: 1;	
}

#line1{
	width: 100%;
	height: 1px;
	background: url(../files/index/line1.png) center;
	background-size: contain;
	margin-top: 48px;
}

#hudContainer{
	widows: 100%;
	height: 62px;	
	margin-top: 40px;
	text-align: left;
}

#hudContainer a{
	display: block;
	width: 140px;
	height: 100%;
	float: left;
	color: white;
	text-decoration: none;
	font-size: 19px;
	line-height: 33px;		
	padding: 0 80px;
}

#hudContainer a span{
	font-size: 15px;
	font-weight: normal;
}
.line2{
	height: 100%;
	width: 1px;
	background-color: #c2c2c2;
	float: left;
}


/*---------------neirong-----------------*/
.title{
	width: 100%;
	height: auto;	
	text-align: center;
	padding-top: 80px;
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.title h2{	
	font-size: 30px;
	font-weight: normal;	
}

.title h3{
	color: #d5d5d5;
	font-size: 28px;
	font-weight: normal;
	line-height: 40px;
	letter-spacing: 2px;
}

.redLine{	
	width: 64px;
	height: 2px;
	background-color: #D0332C;
	margin: 14px auto 53px;
}

/*---------------coreBusiness-----------------*/

#coreBusiness{
	width: 1208px;
	height: 573px;
	margin: auto;
	overflow: hidden;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.coreBusinessBoxOut{
	width: auto;
	padding: 0 2px;
	float: left;
	margin-top: 573px;
	opacity: 0;
	
}
.coreBusinessBoxIn{
	width: 236px;
	height: 571px;	
	margin: auto;
	border: 1px solid #b6b6b6;	
	position: relative;
	
}

#coreBusinessBox1{
	background: url(../files/index/coreBG1.jpg) no-repeat;
	background-size: cover;
}
#coreBusinessBox2{
	background: url(../files/index/coreBG2.jpg) no-repeat;
	background-size: cover;
}
#coreBusinessBox3{
	background: url(../files/index/coreBG3.jpg) no-repeat;
	background-size: cover;
}
#coreBusinessBox4{
	background: url(../files/index/coreBG4.jpg) no-repeat;
	background-size: cover;
}

.coreImg{
	padding-top: 242px;
}

.coreTitle{
	width: 390px;
	height: 300px;
	position: absolute;
	top: 100px;
	left: 40px;
	text-align: left;	
	opacity: 0;
}

.coreTitle h1{
	font-size: 35px;
	line-height: 35px;
	color: white;
	font-weight: normal;
	padding-bottom: 16px;
}

.coreTitle h2{
	font-size: 19px;
	line-height: 18px;
	color: white;
	font-weight: bold;
	padding-bottom: 25px;
}

.coreTitle p{
	font-size: 14px;
	line-height: 24px;
	color: white;
	font-weight: normal;
	padding-bottom: 40px;
}

.coreTitle a{
	display: block;
	float: left;
	width: 120px;
	height: 36px;
	border: 1px solid white;
	border-radius: 18px;	
	margin: 0 4px;
	font-size: 13px;
	line-height: 36px;
	color: white;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
}

.coreTitle a:hover{
	background-color: white;
	color: #D40003;
}
/*---------------case-----------------*/

#caseClassify{
	width: 1152px;
	height: 45px;	
	margin: auto;	
}

.caseClassifyButton {	
	display: block;
	width: 152px;
	height: 45px;
	float: left;
	margin: 0 20px;
	font-size: 14px;
	color: #111;
	text-decoration: none;
	line-height: 45px;
	background-color: #f1f1f1;
	position: relative;
}

.caseClassifyButton:hover{
	background-color: #e50013 !important; 
	color: white !important;
}

#caseClassifyIcon{
	position: absolute;
	top: 15px;
	left: 30px;
}

#caseClassifyIconContainer{
	width: 15px;
	height: 15px;	
	position: absolute;
	top: 15px;
	left: 30px;
}

#caseClassifyIcon1{
	width: 2px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 0;
	left: 0;
}
#caseClassifyIcon2{
	width: 11px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 0;
	right: 0;
}
#caseClassifyIcon3{
	width: 2px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 6px;
	left: 0;
}
#caseClassifyIcon4{
	width: 11px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 6px;
	right: 0;
}
#caseClassifyIcon5{
	width: 2px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 12px;
	left: 0;
}
#caseClassifyIcon6{
	width: 11px;
	height: 3px;
	background-color: black;
	position: absolute;
	top: 12px;
	right: 0;
}

#caseContainer{		
	width: 1920px;
	height: auto;
	max-height: 680px;
	margin: 50px auto auto;
	overflow: hidden;		
}

.caseContainerNum {	
	width: auto;
	height: auto;
	overflow: hidden;
	margin-top: 0;
}

.caseBox{
	display: block;
	width: 480px;
	height: 340px;
	float: left;	
	text-decoration: none;
	margin-top: 680px;
	
}

.casePicContainer{
	width: 480px;
	height: 300px;
	position: relative;
	overflow: hidden;
}

.casePic{
	display: block;
	width: 480px;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.caseTitle{
	width: 480px;
	height: 40px;
	background-color: #e5e5e5;
}

.caseTitle p{
	color: #333;
	font-size: 16px;
	line-height: 40px;
	text-align: left;
	padding-left: 30px;
}

#caseButton{
	width: 163px;
	height: 37px;
	margin: auto;
	margin-top: 48px;
}

.caseButtonArrow{
	display: block;
	float: left;
	width: 37px;
	height: 37px;
	border: 1px solid;	
	border-radius: 7px;
	border-color: #cfcfcf;
	color: #cfcfcf;
	font-size: 18px;	
	line-height: 35px;
	text-align: center;
	text-decoration: none;	
}

#caseButtonIconContainer{
	width: 24px;
	height: 24px;	
	margin: 8px 28px 0;
	float: left;
	position: relative;
}

.caseButtonIcon{
	width: 6px;
	height: 6px;
	background-color: #6a6a6a;
	position: absolute;
}

#caseButtonIcon1{
	top: 0;
	left: 0;
}
#caseButtonIcon2{
	top: 0;
	left: 9px;
}
#caseButtonIcon3{
	top: 0;
	right: 0;
}
#caseButtonIcon4{
	top: 9px;
	left: 0;
}
#caseButtonIcon5{
	top: 9px;
	left: 9px;
}
#caseButtonIcon6{
	top: 9px;
	right: 0;
}
#caseButtonIcon7{
	bottom: 0;
	left: 0;
}
#caseButtonIcon8{
	bottom: 0;
	left: 9px;
}
#caseButtonIcon9{
	bottom: 0;
	right: 0;
}

#caseLine{
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
	margin-top: 30px;
}
/*---------------mate-----------------*/

#mate{
	list-style-type: none;
	width: 1433px;
	height: 400px;
	margin: auto auto 100px;
}

#mate-container{
	width: 75vw;
	max-width: 1400px;
	min-width: 1000px;
	height: auto;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
}

#mate li{
	width: 238px;
	height: 150px;
	float: left;
	border-left: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	line-height: 150px;		
}

#mate li:hover{	
	cursor: default;
	box-shadow: 0px 0px 5px 0px #ccc;	
}

#mate li img{
	vertical-align: middle;	
}

/*---------------news-----------------*/

#news{
	background-color: #f5f7f8;
	height: 686px;
	padding-top: 50px;	
	
}

#newsContainer{
	width: 1200px;
	height: 418px;
	background-color: white;
	margin: auto;
	
}

#newsContainer a{
	color: black;
	
}
#newsContainer a:hover{
	color: black;
	cursor: pointer !important;
}


.newsPicContainer{
	width: 590px;
	height: 418px;	
	float: left;
	position: relative;
	margin-left: 7px;
	
}

.newsTitle{
	font-size: 18px;
	width: 465px;
	float: right;
	text-align: left;
	margin-top: 10px;
	margin-right: 28px;
	line-height: 29px;

}

.newsTitle span{
	font-size: 13px;
	color: #4d4d4d;
	line-height: 0;
	
}

.dateContainer{
	width: 86px;
	height: 86px;
	background-color: #e4e4e4;
	position: absolute;
	bottom: 8px;
	left: 8px;
}

.dateContainer p{
	font-size: 27px;
	color: #CC0100;
	margin-top: 7px;
}

.dateContainer div{
	width: 56px;
	height: 1px;
	background-color: #434343;
	margin: 2px auto 3px;
}
.dateContainer span{
	font-size: 11px;
	color: #434343;
	
}

.imgContainer{
	width: 539px;
	height: 303px;
	overflow: hidden;
	margin-top: 6px;
	margin-left: 31px;
	position: relative;	
}

#newsContainer div img{
	
	width: 539px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);	
}

#more{
	color: black;
	font-size: 16px;
	text-decoration: none;
	display: block;
	border-bottom: 2px solid #a5a5a5;	
	padding-bottom: 6px;
	width: 90px;
	margin: 42px auto auto;

}

#more:hover{
	color: #D0332C;
	border-bottom: 2px solid #D0332C;
}

/*---------------end-----------------*/
#end{
	width: 100%;
	height: 305px;
	background-color: #2d2d2d;
}

#endContainer{
	width: 1142px;
	height: 305px;	
	margin: auto;
}

#end400{
	padding-top: 50px;
	float: left;
	
}

.quanGuo{
	color: white;
	font-size: 13px;
	line-height: 13px;

}

.phone{
	padding-top: 16px;
	color: white;
	font-size: 24px;
	line-height: 24px;
	font-weight: bold;
}

#end400 img{
	padding-top: 30px; 
}

#endMenu{

	float: right;
	padding-top: 55px;
	
}

.endList{
	float: right;
	width: 140px;
	height: 135px;
	color: white;
	list-style-type: none;
	font-size: 14px;
	line-height: 14px;
	border: 0.5px solid #434343;
	border-top-style: none;
	border-bottom-style: none;
	text-align: left;
	padding-top: 3px;	
}

.endList ul{
	padding-left: 40px;
	cursor: default;
}

.endList p{
	
	color: #ececec;
	padding-bottom: 28px;
}

.endList li{
	line-height: 22px;
	list-style-type: none;
	color: #858585;
	
}
.endList li a{
	text-decoration: none;
	color: #858585;
	font-weight: normal;
}

.endList li a:hover{
	color: #ececec;
}

#beiAn{
	width: 100%;
	color: #888;	
	font-size: 12px;	
	float: left;
	text-align: center;
}

#beiAn p{
	display: inline-block;
}

#beiAn a {
	display: inline-block;
	color: #888;
	text-decoration: none;
}

#beiAn a:hover{
	color: #ddd;
}