@charset "utf-8";
/* CSS Document */


/* 头部 */
.menu{
	width:100% ;
	height:108px ;
	background:#1e2432 ;
	}
	
	/* logo */
.menu .logo{
	width:322px ;
	height:108px ;
	background:url("../../index/images/logo.png") #fff center center no-repeat  ;
	}
	
/* menu */
.menu-box{
/*	width:900px ;  */
	height:108px ;
	}
.menu-box li{
	width:150px ;
	height:108px ;
	float:left ;
	display:inline ;
	}
.menu-box li a{
	display:block ;
	width:100% ;
	line-height:108px ;
	text-align:center ;
	color:#fff ;
	font-size:14px ;
	
	position:relative ;

	transition:all 0.4s ;
	-webkit-transition:all 0.4s ;
	-ms-transition:all 0.4s ;
	-moz-transition:all 0.4s ;
	-o-transition:all 0.4s ;
	}
.menu-box li a .menu-line{
	display:block ;
	width:22px ;
	height:3px ;
	background:rgba(255,255,255,0) ;
	
	position:absolute ;
	bottom:20px ;
	left:50% ;
	margin-left:-11px ;

	}
	/* 悬停状态 */
.menu-box li a:hover{
	background:#2a3142 ;
	color:#fff ;
	}
.menu-box li a:hover .menu-line{
	width:22px ;
	background:rgba(255,255,255,10) ;
	bottom:30px ;
	}
	/* 选中状态 */
.menu-box li a.menu-active{
	background:#22d3b6 ;
	color:#fff ;
	}
.menu-box li a.menu-active .menu-line{
	width:22px ;
	background:rgba(255,255,255,10) ;
	bottom:30px ;
	}

/* 分享 */
.share{
	width:180px ;
	height:40px ;
	padding:34px 0 ;
	margin-right:10px ;
}
.share-ic{
	display:block ;
	width:40px ;
	height:40px ;
	float:left ;
	display:inline ;	
	margin:0 10px ;
	cursor:pointer ;
	
	border-radius:40px ;	
	-webkit-border-radius:40px ;
	-ms-border-radius:40px ;
	-moz-border-radius:40px ;
	-o-border-radius:40px ;

	transition:all 0.4s ;
	-webkit-transition:all 0.4s ;
	-ms-transition:all 0.4s ;
	-moz-transition:all 0.4s ;
	-o-transition:all 0.4s ;
	
	position:relative ;
}

.elastic-layer-box{
	width:120px ; 
	height:auto ;
	padding: 20px 10px 10px 10px ;
	background:url("../../index/images/elastic-layer-box.png") top center no-repeat ;
	color:rgba(0,0,0,0.6) ;
	position:absolute ;
	right:-10px ;
	top:40px ;
	z-index:9 ;
	display:none ;
	text-align:center ;
	
	}
.elastic-layer-box p img{
	width:120px ;
	height:120px ;
	}	
.elastic-layer-txt{
	font-weight:bold ;
}	
.elastic-layer-item{
	width:100px ;
	height:45px ;
	border-bottom:1px dotted #dedede ;
	text-align:left ;
	font-size:14px ;
	margin: 0 auto ;
	}
.elastic-layer-item a{
	display:block ;
	width:100% ;
	height:45px ;
	line-height:45px ;
	color:rgba(0,0,0,0.5) ;
	transition:all 0.3s ;
	-webkit-transition:all 0.3s ;
	-ms-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	-o-transition:all 0.3s ;	
}
.elastic-layer-item i{
	display:block ;
	float:left ;
	margin-left:5px ;
	margin-right:10px ;
	margin-top:16px ; 
	width:16px ;
	height:16px ;
	background:url("../../index/images/icon-qq.png") top center no-repeat  ;

}
.elastic-layer-item a:hover{
	color:rgba(34,211,182,1) ;
}
.elastic-layer-item:hover i{
	background:url("../../index/images/icon-qq.png") bottom center no-repeat  ;
}

.share-ic:hover .elastic-layer-box{
	display:block ;
}
	
.tencent{ 
	background:url("../../index/images/icon-share.png") #171d29 top left no-repeat 
 
}
.wechat{ 
	background:url("../../index/images/icon-share.png") #171d29 top center no-repeat 
 
}
.sina{ 
	background:url("../../index/images/icon-share.png") #171d29 top right no-repeat 
 
}
.tencent:hover{
	background:url("../../index/images/icon-share.png") #30c1ed bottom left no-repeat

}
.wechat:hover{ 
	background:url("../../index/images/icon-share.png") #1df254 bottom center no-repeat 
 
}
.sina:hover{ 
	background:url("../../index/images/icon-share.png") #f21d36 bottom right no-repeat 
 
}



@media screen and (max-width: 1439px) {/*当屏幕尺寸小于1439px时，应用下面的CSS样式*/
	.menu .logo{
		width:222px ;
		}
	}
@media screen and (max-width: 1365px) {/*当屏幕尺寸小于1365px时，应用下面的CSS样式*/
	.menu-box li{
		width:14% ;
		}
	.menu-box{
		width:850px ;
		height:108px ;
		}
	}
@media screen and (max-width: 1279px) {/*当屏幕尺寸小于1279px时，应用下面的CSS样式*/
	.share{
		display:none
		}
	}
@media screen and (max-width: 959px) {/*当屏幕尺寸小于959px时，应用下面的CSS样式*/
	.menu .logo{
		width:162px ;
		}
	.menu-box li{
		width:14% ;
		}
	.menu-box{
		width:600px ;
		height:108px ;
		}
	}
@media screen and (max-width: 799px) {/*当屏幕尺寸小于799px时，应用下面的CSS样式*/
	.menu .logo{
		display:none ;
		}
	.menu-box li{
		width:14% ;
		}
	.menu-box{
		width:100% ;
		height:108px ;
		}

}