/* banner */
.banner{
	width: 100%;
	background: #000000;
}
canvas {
	display:block;
}
.banner>.waves {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.banner>i{
	position: absolute;
	bottom: 4%;
	left: 50%;
	margin-left: -30px;
	
	animation: down 1s infinite linear;
	--webkit-animation: down 1s infinite linear;
	-o-animation: down 1s infinite linear;
	-ms-animation: down 1s infinite linear;
}
@-webkit-keyframes down{
	0%{bottom: 0%; opacity: 0.4;}
	50%{bottom: 4%; opacity: 1;}
	100%{bottom: 0%; opacity: 0.4;}
}
@-o-keyframes down{
	0%{bottom: 0%; opacity: 0.4;}
	50%{bottom: 4%; opacity: 1;}
	100%{bottom: 0%; opacity: 0.4;}
}
@-moz-keyframes down{
	0%{bottom: 0%; opacity: 0.4;}
	50%{bottom: 4%; opacity: 1;}
	100%{bottom: 0%; opacity: 0.4;}
}
@-ms-keyframes down{
	0%{bottom: 0%; opacity: 0.4;}
	50%{bottom: 4%; opacity: 1;}
	100%{bottom: 0%; opacity: 0.4;}
}
/* banner */



.demo{
	margin: 0 auto;
	width: 100%;
	max-width: 12rem;	
}
/* demo1 */
.title{
	margin:  0 auto;
	width: 7.4rem;
}
.title h1{
	padding: 1rem 0 20px;
	width: 100%;
	color: #444444;
	font: bold 0.32rem "微软雅黑";
	text-align: center;	
}
.title>div{
	margin: 0 auto;
	width: 0.6rem;
	height: 4px;
	background: #00ceff;
}
.title h6{
	padding: 20px 0 0.8rem;
	width: 100%;
	color: #888888;
	font: normal 12px "微软雅黑";
	text-align: center;	
	line-height: 20px;
}


.demo1 .project{
	width: 100%;
}
.demo1 .project ul{
	width: 100%;
}
.demo1 .project ul li{
	float: left;
	margin-right: 60px;
	width: 3.6rem;
	height: 4.4rem;
	box-sizing: border-box;
	border: 1px solid #DDDDDD;
	border-radius: 10px;
	
	transition: box-shadow 0.5s linear 0s; 
	-webkit-transition: box-shadow 0.5s linear 0s; 
	-o-transition: box-shadow 0.5s linear 0s; 
	-moz-transition: box-shadow 0.5s linear 0s; 
	-ms-transition: box-shadow 0.5s linear 0s; 
}
.demo1 .project ul li:hover{
	border: none;
	box-shadow: 0 0 40px rgba(0,229,238,0.6);
}
.demo1 .project ul li:last-child{
	margin: 0;
}
.demo1 .project ul li span,.demo1 .project ul li h6,.demo1 .project ul li p{
	display: block;
	margin: 0.6rem auto 30px;
	width: 2.2rem;
	font: 1rem "impact";
	text-align: center;
}
.demo1 .project ul li div{
	margin: 0 auto;
	width: 2rem;
	height: 1px;
	background: #DDDDDD;
}
.demo1 .project ul li h6{
	margin: 30px auto 20px;
	font: 0.2rem "微软雅黑";
}
.demo1 .project ul li p{
	margin: 0 auto;
	width: 1.2rem;
	font: 12px "微软雅黑";
	color: #888888;
	line-height: 20px;
	
	word-break:normal;
	word-wrap:break-word;
}
/* demo1 */




/* demo2 */
.demo2{
	margin: 0.8rem auto 0;
	max-width: 100%;
	background: rgba(0,299,238,0.03);
}
.demo2 .title h1{
	padding-top: 0.6rem;
}
.demo2 .product{
	margin: 0 auto;
	width: 100%;
	max-width: 12rem;
}
.demo2 .product ul{
	width: 100%;
	overflow: hidden;
}
.demo2 .product ul li{
	margin-bottom: 0.4rem;
	float: left;
	margin-right: 0.6rem;
	height: 5rem;
	width: 5.7rem;
}
.demo2 .product ul li:nth-child(2n+2){
	margin-right: 0;
}
.demo2 .product ul li h1{
	padding: 20px 0 14px;
	font: 0.38rem "微软雅黑";
	color: #444444;
}
.demo2 .product ul li h6{
	font: 14px "微软雅黑";
	color: #444444;
}
.demo2 .product ul li a{
	margin-top: 14px;
	width: 1.4rem;
	height: 0.4rem;
	background: #00ceff;
	
	font: 16px "微软雅黑";
	color: #FFFFFF;
	text-align: center;
	line-height: 0.4rem;
	
	transition: all 0.2s linear 0s; 
	-webkit-transition: all 0.2s linear 0s; 
	-o-transition: all 0.2s linear 0s; 
	-moz-transition: all 0.2s linear 0s; 
	-ms-transition: all 0.2s linear 0s; 
}
.demo2 .product ul li a:hover{
	background: #00b9e5;
}
/* demo2 */



/* demo3 */
.demo3 .product{
	padding-bottom: 0.4rem;
	width: 100%;
}
.demo3 .product ul{
	width: 100%;
	overflow: hidden;
}
.demo3 .product ul li{
	float: left;
	margin-right: 0.6rem;
	margin-bottom: 0.6rem;
	width: 3.6rem;
	height: 3rem;
	overflow: hidden;
	box-sizing: border-box;
}
.demo3 .product ul li:nth-child(3n+3){
	margin-right: 0;
}
.demo3 .product ul li:hover{
	border: 1px solid #CCCCCC;
}
.demo3 .product ul li a{
	width: 100%;
	height: 100%;
	
	position: relative;
}
.demo3 .product ul li a p{
	position: absolute;
	top: 100%;
	width: 100%;
	height: 20%;
	background: #EEEEEE;
	
	font: 14px "微软雅黑";
	color: #444444;
	text-align: center;
	line-height: 0.6rem;
	
	transition: all 0.5s linear 0s;
	-webkit-transition: all 0.5s linear 0s;	
	-moz-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	-ms-transition: all 0.5s linear 0s;
}
.demo3 .product ul li:hover a p{
	top: 80%;
}
.demo3 .product>a{
	margin: 0 auto 0;
	width: 1.4rem;
	height: 0.4rem;
	background: #00CEFF;
	font: 14px "微软雅黑";
	color: #FFFFFF;
	text-align: center;
	line-height: 0.4rem;
	
	transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;	
	-moz-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
} 
.demo3 .product>a:hover{
	background: #00CEFF;
	color: #FFFFFF;
	box-shadow:0 0 20px #00CEFF;
}
/* demo3 */