@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; list-style:none; font-size:14px; font-family:"微软雅黑"}
a{ text-decoration:none; color:#3d3d3d;}
.clear{ clear:both;}
.banner{ width:100%; height:450px; background:url(../images/server/banner.jpg) center no-repeat; color:#fff;}
.banner h1{ padding:80px 0 15px; font-size:32px; font-weight:700;}
.banner .add-title{ width:600px; font-size:16px;font-weight:700; color:#fff; text-align:left; line-height:36px; margin-left:0;}
.banner span{ font-size:20px; color:#34bbfa;}

.button{ display:block;width:320px;border-radius: 6px;font-size:16px; background:#3a62f4; margin:70px auto 20px; text-align:center; line-height:40px; font-weight:700; color:#fff;}

.banner .button{ display:block;width:320px;border-radius: 6px;font-size:20px; background:#3a62f4; margin:60px 0 20px; text-align:center; line-height:56px; font-weight:700;}
.button:hover{ background:#284dd4;}
.container{ width:1180px; margin:0 auto;}
.banner .test{color:#34bbfa;}

.menu{ width:100%; height:60px; background:#1d1d1d}
.menu-list{ width:1200px; margin:0 auto;}
.menu-list li{ width:33.3%; float:left; border-right:1px solid #474646; text-align:center;line-height:60px; box-sizing:border-box;}
.menu-list li a{ color:#fff;font-size:16px;display: inline-block; width: 100%;}
.menu-list li:first-child{ background:#f2f2f2;}
.menu-list li:first-child a{ color:#1d1d1d;}


#wrapper{
	width:1100px;
	margin:50px auto;
	height:800px;
	position:relative;
	color:#fff;
	text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;	
}

#slider-wrap{
	width:1100px;
	height:800px;
	position:relative;
	overflow:hidden;
	box-shadow:0 0 10px #d1cfcf;
	border-radius:6px;
}

#slider-wrap ul#slider{
	width:100%;
	height:100%;
	
	position:absolute;
	top:0;
	left:0;		
}

#slider-wrap ul#slider li{
	float:left;
	position:relative;
	width:1100px;
	height:800px;	
}

#slider-wrap ul#slider li img{ width:100%;}

#slider-wrap ul#slider li > div{
	position:absolute;
	top:20px;	
}

#slider-wrap ul#slider li > div h3{
	font-size:36px;
	text-transform:uppercase;	
}



#slider-wrap ul#slider li i{
	text-align:center;
	line-height:400px;
	display:block;
	width:100%;
	font-size:90px;	
}


/*btns*/
.btns{
	position:absolute;
	width:50px;
	height:60px;
	top:50%;
	margin-top:-25px;
	line-height:57px;
	text-align:center;
	cursor:pointer;	
	background:rgba(0,0,0,0.1);
	z-index:100;
	
	
	-webkit-user-select: none;  
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-ms-user-select: none;
	
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

.btns:hover{
	background:rgba(0,0,0,0.3);	
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
	top: 30px; 
	right:35px; 
	width:auto;
	position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}


/*bar*/
#pagination-wrap{
	min-width:20px;
	margin-top:750px;
	margin-left: auto; 
	margin-right: auto;
	height:15px;
	position:relative;
	text-align:center;
}

#pagination-wrap ul {
	width:100%;
}

#pagination-wrap ul li{
	margin: 0 4px;
	display: inline-block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#999;
	opacity:0.5;
	position:relative;
  top:0;
  
  
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
	opacity:1;
	box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;	
}




/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
}





 h2{ font-size:24px; font-weight:700; text-align:center;color:#191c3d; line-height:60px;}
 .add-title{ font-size:14px; color:#666; text-align:center; line-height:25px;width: 85%; margin: 0 auto;}
.center{ width:100%; padding:80px 0;}
.server{ margin:50px auto 0;}
.server-configuration{ width:30%; float:left; margin:50px 0 0;}
.server-configuration li{ width:70%; height:65px; border-radius:6px; background:#f4f8ff; margin:15px; padding:0 8%;  color:#3a62f4; font-weight:500;}
.server-configuration li e{ display:inline-block; margin-top:20px; width:25px; height:25px; border-radius:20px; background:#3a62f4; color:#fff; line-height:25px; text-align:center;}
.server-configuration li span{ display:inline-block;font-size:20px;line-height:30px; margin-left:20px;}
.server-img{ width:70%; float:left;}



table{ width:80%; margin:30px auto;}
table td,table th{ border:1px solid #bfbfbf; text-align:center; font-size:14px; padding:20px 0;}
table td a{ color:#3a62f4; font-weight:700; font-size:18px;}
table td span{ font-size:20px; color:#d0021b; font-weight:700}


.speed{width:100%; background:#f5f8fb; padding:80px 0;}
.speed .form{color:#3a62f4; text-align:center; font-size:18px; line-height:60px; font-weight:600; margin-top:30px;}


.cabinet-bg{width:100%; padding:80px 0;}
.cabinet{ text-align:center;box-shadow:0 0 10px #d1cfcf; border-radius:5px; margin:50px auto; padding:30px 0;}
.cabinet img{ width:90%; margin:0 auto;}

.advantage{width:100%; background:#f5f8fb; padding:80px 0;}
.advantage-list{ margin:30px auto;}
.advantage-list li{ width:280px; height:150px; float:left; background:#fff; box-shadow:0 0 10px #d1cfcf; border-radius:5px;margin:15px; text-align:center; padding:35px 40px; line-height:25px; color:#3d3d3d;}
.advantage-list li span{ font-size:18px; font-weight:700; line-height:50px;}

.operation{width:100%; padding:80px 0;}
.operation-list{width:100%; margin:30px auto}
.operation-list li{ width:560px; height:120px; float:left; background:#fff; box-shadow:0 0 10px #d1cfcf; border-radius:5px; margin:15px; line-height:120px;}
.operation-list li img{float:left; margin:35px 50px;}
.operation-list li p{ float:left; color:#3d3d3d}








.case{ width:100%;background:#f5f8fb; padding:80px 0;}
.case-list{margin:50px auto; }
.case-list li{ width:300px; height:410px; background:#fff; float:left; margin:0 16px; box-shadow:0 0 15px #c9c9ca; padding:30px; }
.case-img{ text-align:center;}
.case-list li:hover{margin:-2px 16px;}
.case-list li strong{ color:#666; font-size:18px; line-height:50px; text-align:center; display:inline-block; width:100%; margin-top:10px;}
.case-list li .parameter{ height:170px;}

.case-list li p{ color:#3d3d3d; font-size:14px; line-height:25px; display:inline-block; margin:5px 10px}

.case-list li .button,.solution .button{ background:#2164ed; display:block; width:160px; height:40px; border-radius:20px; line-height:40px; text-align:center; color:#fff; font-size:14px; margin:5px auto;}

.case-list li .button:hover,.solution .button:hover{ background:#0f51d7;}


.product{width:100%;padding:80px 0;}
.product-list{ margin:30px auto;}
.product-list li{ width:29%; float:left; padding:2%; line-height:25px;}
.product-title{ color:#3a62f4; font-size:18px; line-height:50px; font-weight:700;}
		
		
		

		
@media screen and (max-width: 768px){
.banner{ height:300px; padding-top:40px; text-align:center;}
.banner .add-title{ font-size:14px;width: 97%;line-height: 25px; text-align:center;}

.button{ width:220px;font-size:14px;  margin:30px auto 10px;}

.banner .button{width:200px;font-size: 14px;  line-height:40px;margin: 20px auto 10px;}
.container{ width:92%; min-width:360px;}

.banner h1{ font-size:24px;padding:35px 0 15px;}
.banner span{ font-size:18px;}

h2{ font-size:18px; line-height:30px;width: 90%; margin: 0 auto;}
.add-title{ line-height:22px; width: 95%; margin:10px auto;text-align: center;}

.menu-list{ width:100%;}
.menu-list li a{font-size:14px; }

.speed,.cabinet-bg,.operation,.case{padding: 30px 0;}
.center{padding: 40px 0;}

table{ width:90%;margin: 15px auto;}
table td, table th{padding: 8px 0;}
.data-center{padding:30px 0;}
table td a{ font-size:16px;}


#wrapper{width:100%;height:300px;margin: 20px auto;color: #999;}
#slider-wrap{width:100%;height:300px;}
#slider-wrap ul#slider li{width:50%;height:300px;}
#pagination-wrap{margin-top: 260px;}
#counter{top: 10px; right: 15px;}



.cabinet{margin: 30px auto;padding:5% 0;width: 96%;}
.server{margin:0 auto;}
.server-configuration{ width:100%;margin: 20px 0 0;}
.server-configuration li{ width:17%;height: 50px; float:left; padding:0; margin:5px 0.5%;}
.server-configuration li span{font-size: 16px;margin:0 1%;}
.server-configuration li:last-child{ width:45%;}
.server-configuration li e{ margin-left:5px;width: 20px;height: 20px;margin-top: 15px;line-height: 20px;}
.server-img{ width:100%;}
.server-img img{ width:100%;}

.advantage{padding: 40px 0;}
.advantage-list{ margin: 20px auto;}
.advantage-list li{width: 75%;height: 120px; float:none;margin: 10px auto; padding:10px 10%;line-height: 22px;}
.advantage-list li span{line-height: 30px;}

.speed .form{ font-size:14px;line-height:30px; width:95%; margin:20px auto 0;}

.cabinet img{ width:100%;}
.operation-list{margin: 20px auto;width:95%; }
.operation-list li{ width:100%;margin:6px 0;line-height:25px;height: 80px;}
.operation-list li img{margin:15px;}
.operation-list li p{ width:70%;margin-top: 18px;}


.product{ padding:40px 0;}
.prameters{width:90%; margin:10px auto 0; float:none;}
.prameters li{ font-size:18px; line-height:60px}
.prameters li img{ width:12%;margin: 10px 20px 0 0}




.case-list li{ width:100%; height:380px; background:#fff; float:left; margin:5px 0; box-shadow:0 0 10px #c9c9ca; padding:20px 0; border-radius:6px;}
.case-list{margin: 20px auto;width:98%;}
.case-list li .parameter{ padding:0 10px;}
.case-list li p{ line-height:22px;}
 
 
.product-list li{width:95%;padding: 2% 0; margin:0 auto; float:none;}
.product-title{ font-size:16px; line-height:30px;}
 
}