﻿/* 
火凌导航临时二号的CSS
*/
/* css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
body { 
	background:#fff; 
	color:#555; font-size:14px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	}
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#000; text-decoration:none; }
a:hover { text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none;}/*列表不显示圆点*/
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

body{
	background:url(../img/bgp.svg) center top no-repeat;/*设置背景图片，中央，置顶，不重复平铺*/
	background-color: #0d1120;/*设置整体背景颜色*/
	font-family: arial, helvetica, sans-serif;
	-webkit-font-smoothing:antialiased;
}
/*顶部的灰色色带
.header{
	height: 30px;
	width: 90%;
	background: #00050c;
	box-shadow: 0px 2px 5px #000000;
	position:relative;
	left:5%;
	opacity:0.5;
}*/
#container{/*ID选择器，选择ID为container的模块*/
	width: 960px;/*设置网址项目的总宽度*/
	margin: 0 auto; /*上下边距为0，左右边距自动*/
	margin-top: 350px;/*控制网址项目模块和网页顶部的距离*/
}
.holen{
	width: 100%;
	background: #ffffff;/*设置网址列表的背景颜色*/
	margin-bottom: 10px;/*设置两个列表模块之间的间距*/
	border-radius: 6px;/*设置每个列表的边框角半径弧度*/
	overflow: hidden;/*当内容溢出元素框时，内容会被修剪，并且其余内容是不可见的。*/
}
.holen_name{/*默认标题栏底色为蓝色*/
	height: 40px;
	width: 100%;
	background: #45a3f0;
	overflow: hidden;
}
.holen .pink{/*holen类的派生类*/
	background: #fd6e86;
}
.holen .red{
	background: #f11048;
}
.holen .green{
	background: #28ddb3;
}
.holen .yellow{
	background: #ffc13a;
}
.holen .blue{
	background: #2594c7;
}
.holen .pink2{
	background: #fd6e75;
}
.holen .red2{
	background: #C52622;
}
.holen .green2{
	background: #23BE9B;
}
.holen .orange{
	background: #ff8d30;
}
.holen_name p{
	font-size: 22px;
	font-family: "微软雅黑";/*设置大分类标签的标题*/
	font-weight:bold;/*设置为粗体*/
	line-height: 40px;
	color: white;
	margin-left: 20px;
}
.holen li{
	float: left;
	text-align: center;
	display: block;
	width: 159px;/*设置单元格宽度，总宽度为960*/
	height: 40px;
	line-height: 40px;/*设置行高*/
	border-right:1px solid #e6e6e6;/*在一个声明中设置所有的右边框属性：1像素，实线，颜色浅灰*/
	border-bottom:1px solid #e6e6e6;/*在一个声明中设置所有的下边框属性：1像素，实线，颜色浅灰*/
	font-size: 16px;
	transition:color 0.5s,background-color 0.5s;/*过渡属性，具体颜色设置在hover属性中*/
	overflow: hidden;
}
.holen li:hover{/*鼠标放上去的样式，文本颜色：白色，背景颜色：深灰色*/
	color: #fff;
	background: #333333;
}
#licut{/*控制表格的分割线*/
	width: 960px;
	height:5px;
	background:#e6e6e6;
	cursor:default;/*控制鼠标移动到对象上的状态*/
	pointer-events: none;/*控制鼠标点击后的效果*/
}
.clear{/*设置<br>元素的*/
	clear:both;/*在左右两侧均不允许浮动元素。*/
	height:0;/*高度为0*/
}
.side{/*在窗口左下角分配一个容器空间，距离底端高度为“bottom+height”，和右侧距离为“right+width”*/
	position:fixed;
	bottom: 50%;/*设置模块和底部的距离，1080P下500px适合*/
	right: 20px;/*距离窗口最右边距离*/
	width: 60px;/*设置side模块的宽度*/
	height: 120px;/*控制side模块的高度*/
}
.side_div{/*侧边导航按钮*/
	width: 50px;
	height: 25px;
	background: #ffffff;/*设置背景为白色*/
	margin-top: 1px;/*设置与上一个模块的间距*/
}
.side_div_s{/*侧边导航顶部圆润按钮*/
	width: 50px;
	height: 25px;
	background: #ffffff;
	margin-top: 1px;
	border-radius:3px 3px 0 0;
}
.side_div_x{/*侧边导航底部圆润按钮*/
	width: 50px;
	height: 25px;
	background: #ffffff;
	margin-top: 1px;
	border-radius:0 0 3px 3px;
}
/*侧边导航的主页按钮，设置id为guide2*/
.side_div_l{
	width: 50px;
	height: 25px;
	background: #ff205a;/*设置背景为红色*/
	margin-top: 10px;/*设置与上一个模块的间距*/
	font-family:幼圆;
	text-align: center;
	font-size:21px;
	color: #fff;/*文字为白色*/
}
.side_div_l:hover{
	background:#FFF;
	/* background:#FCC800; */
	color:#ff205a;
	font-weight:bolder;
}
#guide{/*side_div、side_div_s、side_div_x三个类使用同id的文字样式*/
	font-family:微软雅黑;
	text-align: center;
	line-height: 25px;
	transition:background-color 0.3s;
	transition:opacity 0.5s;
	opacity:0.3;/*设置初始透明度*/
}
#guide:hover{
	background: #ff205a;
	opacity:0.9;/*设置改变后的透明度*/
	box-shadow: 2px 2px 5px #000000;
	border-radius:3px;
	width:51px;
	height:26px;
	font-size:15px;
	font-weight:bold;
}
@media screen and (max-width:1300px){/*当屏幕尺寸小于1300px时，应用下面的CSS样式*/
	#topcontrol{
		display: none;
	}
}
@media screen and (max-width:1200px){/*当屏幕尺寸小于1200px时，应用下面的CSS样式*/
	.side{
		display: none;
	}
	body{
		background-size:100% auto;
	}
}
@media screen and (max-width:960px){/*当屏幕尺寸小于960px时，应用下面的CSS样式*/
	body{
		background-size:100%;
	}
	#container{
		width:98%;
		margin-top: 40%;
	}
	.holen li{
		width: 20%;
		margin-right: -1px;
		height: 35px;
		line-height: 35px;
	}
	.holen_name{
	height: 35px;
	}
	.holen_name p{
	font-size: 21px;
	line-height: 35px;
	}
}
@media screen and (max-width:800px){/*当屏幕尺寸小于800px时，应用下面的CSS样式*/
	.holen li{
		font-size: 15px;
		height: 30px;
		line-height: 30px;
	}
	.holen_name{
	height: 30px;
	}
	.holen_name p{
	font-size: 20px;
	line-height: 30px;
	}
}
@media screen and (max-width:640px){/*当屏幕尺寸小于640px时，应用下面的CSS样式*/
	.holen li{
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	.holen_name{
	height: 30px;
	}
	.holen_name p{
	font-size: 17px;
	line-height: 30px;
	}
}
#container .footer{
	border-radius: 10px 10px 0 0;/*底部灰色信息模块边角半径0 0 0 0分别为左上，右上，左下，右下*/
	height:40px;
	margin-bottom: 0px;
	opacity: 0.7;
}
.footer p{
	text-align: center;
	line-height: 40px;
	color: #333333;
}
.footer p a{
	color: #333333;
}