@charset "utf-8";
	body,html{
	margin:0;
	padding:0;
	font-family:"微软雅黑";
	width:100%;
}
img{ border:none;}

    ul li{
		list-style:none;
		}
		
	a{
		text-decoration:none;
		}	
	
	P{
		text-indent:2em;
		}
		
	article{
		width:100%
		}
		
	article header{
		padding-top:4%;
		text-align:center;
		//font-size:2vw;
		}		
	.header{
		z-index:1;
		background:#FFF;
		}
	#circle{
		width:100%;
		overflow:hidden;
		//background:#F93;
		//background:url(../image/bg.png) no-repeat;
		// z-index:1;
		 position: relative;
	    }
		
	#circle div {
		text-align:center;
		width: 100%;
		background-color:#0C9;
		position: absolute;
		top:0px;
		left: 0px;
		padding: 0px;
		margin: 0px;
		background-image: url('../image/1.png');
		background-repeat: no-repeat;
		//background-size: 500px;
		transition:left 1s; 
		}
		
	#circle div:last-child{
		left: 100%;
	}
	
	#circle div p{
		padding: 0px;
		margin: 0px;
		position: absolute;
		//bottom: 50%;
		//right: 30%;
		color:#FFF;
	}
		
		
	/*关于我们*/
	#about_us{
		//width:80%;
		margin:2% auto;
		padding-bottom:2%;
		text-align:center;
		}
	
	#about_us div{
		padding:0 2%;
		height: auto;
		width:auto;
		display: inline-block;
		margin:0 auto;
		}
		
	#about_us div p{
		text-align:left;
		}	
		
		
	/*产品*/	
	section article:nth-of-type(3){
		//background:#09F;
		background:#71D1E7;
        margin-top:-15px;
			padding:0px;
		}	
		
	section article:nth-of-type(3) header{
		color:#FFF;
		}
			
	.clearfix {
            text-align: center;
            }	
					
	.clearfix li {
            display: inline-block;
            //width: 170px;
            height: 130px;
            //padding:6% 8% 8% 0%;
            }
			
     .clearfix a {
            display: inline-block;
            width: 170px;
            //padding:40% 20% 20% 20%;
            position: relative;
            cursor: pointer;
            border-radius: 5px;
            vertical-align: top;
            color: #fff;
            text-decoration: none;
            font-size: 22px;
            //text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
			
	  .clearfix li:a{
		   background:#FFF;
		  }	

		.clearfix li a:hover{
			color:#71D1E7;
			border:2px solid #71D1E7;
            background:#FFF;
			}	
			
	   .clearfix li:nth-of-type(1) a::after{
		   background-image:url(../image/web1.png);
            background-color: #71D1E7;
            }
			
	   .clearfix li:nth-of-type(2) a::after{
		    background-image:url(../image/subway.png);
            background-color: #71D1E7;
            }
			
		.clearfix li:nth-of-type(3) a::after{
			 background-image:url(../image/crm.png);
            background-color: #71D1E7;
            }
			
		/*管理系统	
		#managent{
		    width:80%;
		    margin:4% auto;
		    padding-bottom:2%;
		    text-align:center;
		}
	
	    #managent div{
			padding:0 auto;
			height: auto;
			width:auto;
			display: inline-block;
			margin:0 auto;
		}
		
	   #managent div img{
		   width:60%;
		   }
		   
	   #managent div p{
			text-align:left;
			}	
			
	   #managent div:nth-of-type(2){
			//width:60%;
			}
			
	   #managent div button{
		   padding:0.5% 1%;
		   color:#FFF;
		   border:#F63 1px solid;
		   border-radius:8%;
		   background:#F63;
		   cursor: pointer;
		   }*/
		   
		/*公司动态*/ 
		section #trends{
			color:#FFF;
			background:#9CC;
            margin-top:-15px;
			padding:0px;
			}
			  
	   /*重要客户*/		   
	    section #customer{
            text-align: center;
		    }	
			
		section #customer img{
			display: inline-block;
            padding:3% 5% 5% 0%;
			}
			
		/*联系我们*/	
		section #contact_us{
			margin-top:6%;
            text-align: center;
			background:#333;
			color:#FFF;
			}
			
		section #contact_us div{
			display: inline-block;
			padding:2% 2%;
			}
			
		section #contact_us div p{
			text-align: left;
			color:#E70;
			text-indent:0em;
			}
			
		/*footer*/
		footer{
			font-size:small;
			color:#FFF;
			text-align:center;
			background:#000;
			padding:0.5% 0
			}
				
		footer p span a{
			color:#FFF;
			padding:0 0.5%;
			}
			
	/*	footer p span:nth-of-type(3),footer p span:nth-of-type(4),footer p span:nth-of-type(5){
			border-left:#FFF 1px solid;
			}*/

#divOne_1 {
    font-size: small;
    color: #FFF;
    text-align: center;
    padding: 0.5% 0px;
}

@media only screen and (min-width:1170px){
	section #title{
		display:none;
		}	
	article header{
		font-size:2vw;
		}
	 .header{
		width:100%;
	
		position: fixed; 
		top:0%;
		left:0%;
		margin:0% 0%;
		
		}
			
	.header nav{
		margin:0 0 0 25%;
		}
		
	.header nav a{
		float:left;
		color:#999;
		padding:0.5% 3%;
		}
		
	.header nav a:hover,.header nav a:active{
		border:1px solid #999;
		}	
		
	#logo {
		padding:0% 10%;
		}
		
	#logo li{
		float:left;
		}
		
	#logo li ul{
		margin:0% 0 0 -12px;
		padding:0%;
		}
	
	#logo li ul li{
		clear:left;
		
		}
	#logo img{
		width:70%;
	}
	
	#logo h4 {
		color:#025720;
		margin-top: 0px;
		}
	#logo h5{
		color:#EE7700;
		margin-top: -22px;
		}
	#circle{
		height:600px;
		margin:6% 0 0% 0;
		}	
	#circle div{
		background-position:30% center;
		//margin-top:3%;
		height: 600px;
		background-size: 500px;
		}
		
	#circle div p{
		bottom:50%;
		right:25%;
		font-size:2vw;
		}	
		
	#about_us div:nth-of-type(2){
		width:60%;
		}	
		
	.clearfix li {
      width: 170px;
      padding: 6% 8% 8% 0%;}	
	
	 .clearfix a {
            width: 170px;
            padding:40% 20% 20% 20%;
			border: 4px solid #FFF;
	}
	.clearfix li ::after{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left:-65px;
            top: -80px;
            }
			
	#managent div:nth-of-type(2) {
    width: 60%;
    }
	footer p{
		text-indent: 0em;
		}	
    #content header{
		padding-top:4%;
		}
}

@media only screen and (min-width: 801px) and (max-width:1170px){
	article header{
		font-size:3vw;
		}
	section #title{
		display:none;
		}	
	 .header{
		width:100%;
		//height:10%;
		position:fixed;
		top:0%;
		left:0%;
		margin:0% 0%;
		}
			
	.header nav{
		float: left;
        margin: 0px 0% 0px 5%;
        width: 50%;
		}
		
	.header nav a{
		
		color:#999;
		padding:1% 2%;
		margin-right:0%;
		font-size:14px;
		}
		
	#logo {
		margin-left:3% 0 0 0;
		padding:0% 0% 0 5%;
		}
		
	#logo li{
		float:left;
		}
		
#logo li ul{
		margin:0% 0 0 -12px;
		padding:0%;
		}
	
	#logo li ul li{
		clear:left;
		
		}
	#logo img{
		width:70%;
	}
	
	#logo h4 {
		color:#025720;
		margin-top: 0px;
		}
	#logo h5{
		color:#EE7700;
		margin-top: -22px;
		}
	#circle{
		height:500px;
		margin:3% 0 0% 0;
		}	
	#circle div{
		margin-top:5%;
		height: 400px;
		background-size: 300px;
		background-position:30% center;
		}
		
	#circle div p{
		bottom:50%;
		right:20%;
		font-size:3vw;
		}	
		
	#about_us div:nth-of-type(2) {
       width: 80%;
      }
	  
	.clearfix li {
    width: 100px;
    padding: 16% 18% 8% 0%;}
	
    .clearfix a {
            width: 170px;
            padding:60% 20% 20% 20%;
			border: 4px solid #FFF;
			}
			
	.clearfix li ::after{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left:-65px;
            top: -80px;
            }		
		   
	#managent div:nth-of-type(2) {
    //width: 60%;
    }	
	footer p{
		text-indent: 0em;
		}	
	}
	
@media only screen and (max-width: 800px){
	*{
		font-size:14px;
		}
		
	article header{
		font-size:4.5vw;
		}
	   
	.header{
			background: rgb(50, 60, 60); 
			position:fixed; left: -210px; top: 0px; bottom: 0;
			width:200px;
			height:100%;
			opacity: 1; 
			text-align: center;
			transition:left 0.3s;
		    box-shadow:0 0 10px 5px #000;
	}
	.header .count{
           width:auto;
           position:absolute;
           left:10px;
           bottom:10px;
           margin:0 auto;
}
	#logo {
		margin:0;
		padding:0;
		}
		
	#logo li img{
		position:absolute;
		top:45px;
		left:35%;
		width:50px;
		border-radius:50%;
		background:#fff;
		display:block;
		padding:10px;
		}
		
	#logo li h4{
		clear:left;
		position:absolute;
		top:100px;
		left:0px;
		width:200px;
		margin:0px 0px 0 0px;
		padding:0%;
		color:#fff;
		display:none;
		font-size:14px;
		}

	#logo li  h5{
		display:none;
		}
		
	.header nav{
		width:200px;
		  background: rgb(50, 60, 60); 
		   position: absolute;
		   left:0px; 
		   top: 130px;
		   bottom: 0; 
		   padding: 0px 0 0px 0;
		   margin:0%;
		   height:100%;
		   text-align:center;
		   
		 }
		 
	.header nav a{
		   color: white;
		   text-decoration: none; 
		   font: bold 12px/40px Montserrat; display: block;
	}
	
	#title{
		width:100%;
		height:50px;	
		background:#4D4D4D;
		display:block;
		position:fixed;
		top:0px;
		left:0px;
		z-index:10;
		transition:left 0.3s;
		}
		
	#title p{
		font-size:18px;
		position:absolute;
		top:0px;
		left:33%;
		color:#FFF;
		}
	article{
		transition:margin-left 0.3s;
		margin-left:0px;
		}	
	 #menu{
		display: block;
		border: medium none;
		cursor: pointer;
		transition:left 0.3s;
		position:fixed;
		top: 15px;
		left: 10px;
		color: #BDD43E;
		background-size:25px 25px;
		width:25px;
		height:25px;
		z-index:999;
        background-image: url(../image/hamburger.png);
		}
		
		#menu:hover,#menu:active{
			color: #BDD43E;
			background-size:25px 25px;
			background-image: url(../image/hamburger-active.png);
       }
	  #tm:checked ~ #menu{left:200px;}
	  #tm:checked ~ .header{left:0px;}
	  #tm:checked ~ #title{left:200px;}
	  #tm:checked ~ article{margin-left:200px;}
	 
		#about_us div:nth-of-type(2){
		width:80%;
		}
		
		#circle{
		height:400px;
		width:100%;
		margin:0% 0 0% 0;
		padding:0px;
		}
		
		#circle div{
		height: 400px;
		background-size: 200px;
		margin:0px;
		padding:0px;
		background-position:center center;
		}
		
		#circle div p{
		position:absolute;
		bottom:20%;
		width:100%;
		left:0px;
		margin:0px;
		padding:0px;
		text-indent:0px;
		text-align:center;
		font-size:3vw;
			}	
			
	   .clearfix{
		//margin-top:20%;
		}	
		
	   .clearfix li {
        margin:20% 10% 5% 0%;
	    }
	
	   .clearfix a {
            width: 110px;
            padding:20% 15% 10% 15%;
			font-size:16px;
			border: 3px solid #FFF;
			}
			
		.clearfix li ::after{
            content:"";
            display: block;
            height: 80px;
            width: 80px;
            border: 3px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left:-45px;
            top: -60px;
			background-size:80px;
            }  
	   section #contact_us div p{
			font-size:12px;
			text-indent:0em;
			margin-left:5%;
			}
			
		footer p{
		text-indent: 0em;
        margin:10px;
	font-size:12px;
		}
	  	footer p span{
        padding:0 8px;
}	
	}