@charset "utf-8";
/* CSS Document */
body{
	/*background-color:#ececec;*/}
	
	
	
.web .pageBody {
	height:auto;
	height:2150px;
	background-image:url(../images/pageBodyBg.png);
	background-position:center bottom;
}

.web .pageBody .wrapper{
	background-image:url(../images/pageBodyBg.png);
	height:1700px;
	width:1200px;
	background-position:center bottom;
	background-repeat: no-repeat;
	position:relative;
}


.web .banner{ height: 450px;}
.web .banner .alpha{ height:450px; }
.web .banner .control{ top:420px;}

.web #company{ top:30px;}





.web #productCatelog{
	position:absolute;
	width:1200px;
	height:505px;
	left:0px;
	top:350px;
	
	/*background-image:url(../images/productCatelogBg.png);*/
}
.web #productCatelog .container{
	position:absolute;
	left:45px;
	top:25px;
	width:1125px;
	height:450px;
	display:block;
	overflow:hidden;
}

.web #productCatelog ul{
	width:100%;
}
.web #productCatelog li{
	position:relative;
	width:25%;
	height:450px;
	float:left;
	
	
	transition: width 0.5s;
	cursor:pointer;
	
}
.web #productCatelog li div.bg{
	position:absolute;
	width:auto;
	height:445px;
	border-bottom:solid 5px #f39800;
	background-color:#43cae8;
	
	background-image:url(../images/cb1.jpg);
	left:0px;
	right:10px;
	top:0;
	bottom:0;
	
	background-position:-200px 0;
	transition: background-position 0.5s,opacity 0.5s;
	opacity:0.5;
}

.web #productCatelog li.focusOpen div.bg{
	background-position:0 0;
	opacity:1;
}

.web #productCatelog li#listItem1 div.bg{
	background-image:url(../images/cb1.jpg);
}
.web #productCatelog li#listItem2 div.bg{
	background-image:url(../images/cb2.jpg);
}
.web #productCatelog li#listItem3 div.bg{
	background-image:url(../images/cb3.jpg);
}
.web #productCatelog li#listItem4 div.bg{
	background-image:url(../images/cb4.jpg);
}


.web #productCatelog li.focusOpen{
	/*width:705px;*/
}
.web #productCatelog li div.content{
	position:absolute;
	left:0px;
	top:0;
	right:10px;
	bottom:0;
	width:130px;
	width:auto;
	height:445px;
	overflow:hidden;
}
.web #productCatelog li.focusOpen div{
}
.web #productCatelog img{
	transition: left 0.5s;
	position:absolute;
	left:-100px;
	top:25px;
}
.web #productCatelog li.focusOpen img{
	left:-70px;
}
.web #productCatelog h2{
	position:absolute;
	font-size:32px;
	left:15px;
	top:370px;
	font-weight:normal;
	transition: left 0.5s, top 0.5s,font-size 0.5s;
	color:#FFF;
	width:500px;
}
.web #productCatelog li.focusOpen h2{
	/*left:95px;*/
	top:240px;
	font-size:48px;
}
.web #productCatelog h2 small{
	font-size:14px;
	display:block;
}

.web #productCatelog li p{
	position:absolute;
	left:15px;
	top:445px;
	width:500px;
	line-height:030px;
	transition: left 0.5s, top 0.5s;
	color:#FFF;
}
.web #productCatelog li.focusOpen p{
	/*left:95px;*/
	top:325px;
}
.web #productCatelog li a{ display:block; color:#FFF;}






.web #product{ padding-top: 0px; width:1200px; margin:auto;}

.web #product .titleBar{ display: block; width: 100%; text-align: center; height: 80px;}
.web #product .columnName{ display: block; font-weight: normal; font-size: 26px; padding-top: 25px;}

.web #product .more{ background-color: #3a5e8f; display: block; width: 120px; height: 50px; line-height: 50px; position: relative; left: 0; top: 0; right: 0; text-align: center; color: #fff; margin: auto; display: none;}

.web #product ul{ position: relative; height: 600px;}
.web #product li{ width: 25%; height: 300px; float: left;}
.web #product ul .columnName{ display: none;}
.web #product ul .feature{ display: none;}
.web #product ul .upDateTime{ display: none;}


.web #product .preview{ position: relative; width: 240px; height: 240px; display: block; overflow: hidden; margin: auto; border: solid 1px #eee;}
.web #product .preview img{ width: 240px;}
.web #product .title{ text-align: center; line-height: 4em; display: block; width: 100%;}
.web #product .description{ display:none;}







.web #case{ padding-top: 0px; width:1200px; margin:auto;}

.web #case .titleBar{ display: block; width: 100%; text-align: center; height: 80px;}
.web #case .columnName{ display: block; font-weight: normal; font-size: 26px; padding-top: 25px;}

.web #case .more{ background-color: #3a5e8f; display: block; width: 120px; height: 50px; line-height: 50px; position: relative; left: 0; top: 0; right: 0; text-align: center; color: #fff; margin: auto; display: none;}

.web #case ul{ position: relative; height: 600px; width: 600px; position: absolute; left: 620px;}
.web #case li{ height: 200px; position: relative;}
.web #case ul .columnName{ display: none;}
.web #case ul .upDateTime{ display: none;}


.web #case .preview{ position: relative; width: 240px; height: 180px; display: block; overflow: hidden; border: solid 1px #eee;}
.web #case .preview img{ width: 240px;}
.web #case .title{ position: absolute; left: 280px;top: 0px; text-align: left; line-height: 2.5em; display: block; width: 300px; font-size: 20px; font-weight:bold;}
.web #case .description{ position: absolute; left: 280px;top: 35px; text-align: left; line-height: 2.5em; display: block; width: 300px;}





.web #case ul.recommend{ height: 600px; width: 600px; position: absolute; left: 20px;}
.web #case ul.recommend li{ height: 200px; position: relative; width: 280px;}

.web #case ul.recommend .preview{ position: relative; width: 560px; height: 580px; display: block; overflow: hidden; border: solid 1px #eee;}
.web #case ul.recommend .preview img{ width: 560px; height: 580px;}
.web #case ul.recommend .title{ position: absolute; left: 0px;top: 0px; text-align: center; line-height: 50px; display: block; width: 560px; font-size: 30px; font-weight:bold;background-color: rgba(0,0,0,0.30);color:#fff;}
.web #case ul.recommend .description{ position: absolute; left: 0px;top: 50px; padding-left: 20px; padding-right: 20px; text-align: left; line-height: 2.5em; display: block; width: 520px; background-color: rgba(0,0,0,0.30);color:#fff;}