@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
#focusPic{
	border:8px #F1F1F1 solid;
	position:relative;/*最外层div设置为相对定位*/
	width:520px;
	height:280px;
	overflow: hidden;
}
#focusPic a{
	text-decoration:none;
	color:#000;
}
#focusPic #pre,#focusPic #next{
	position:absolute;/*前一页、后一页按钮设置为绝对定位*/
	top:120px;    /*坐标值，前一页、后一页按钮在垂直方向移至中间*/
	display:inline-block;/*设置a标签为行内块，即可设置其宽高值*/
	width:30px;
	line-height:30px;
	background-color:rgba(200,200,200,0.6); /*背景色为半透明*/
	text-align:center;
	border-radius: 15px; /*背景为圆形*/
}
#focusPic #pre{
	left:-8px; /*前一页按钮放置在左侧中部位置，显示半圆状*/
}
#focusPic #next{
	right:-8px;/*后一页按钮放置在右侧中部位置，显示半圆状*/
}
#focusPic #pre:hover,#focusPic #next:hover{
	display: inline-block;
	background-color:rgba(0,0,0,0.3);/*鼠标经过时，背景色变半透明黑色*/
	color:#CCC;
}
#focusPic .num{
	position:absolute;/*圆点按钮导航栏所在的div层设置为绝对定位*/
	bottom:13px;/*导航栏位置坐标*/
	left:214px;
	background-color:rgba(200,200,200,0.3);
	width:85px;
	height: 15px; /*利用高度值及行高值调整圆点按钮的垂直位置*/
	line-height: 11px;
	border-radius:10px;
	text-align:center;
}
#focusPic .num a{
	display:inline-block;/*设置a标签为行内块，即可设置其宽高值*/
	width:8px;
	height:8px;
	background-color:#B7B7B7;
	border-radius:4px; /*半径，显示为圆点按钮状*/
}
#focusPic .num a:hover{
	background-color:#F40;/*鼠标经过圆点按钮背景色变化为橙色*/
}
/*默认前后页按钮不显示，当鼠标经过焦点图时显示，鼠标移出后又消失*/
#focusPic #pre,#focusPic #next{ display:none;}
#focusPic:hover #pre,#focusPic:hover #next{display:inline-block;}