@charset "utf-8";
#wrapper {
        width: 960px;   /*寬度設定為900px*/
        margin: auto;   /*版面居中對齊*/
		box-shadow:0px 4px 12px 1px rgba(20%,20%,40%,0.5);
        }

#header {
        height: 234px; /*高度設定為214px*/
        }
.header_top{
	width : 960px;
	height: 20px;
	background-image: url(hizon-website/background_top.jpg);
	background-repeat: repeat;
	}
.header_top ul{
	list-style-type:none;/* 取消ul樣式符號 */
	margin:0;/* 重設ul邊界與留白為零 */
	padding:3px 0 3px 0;
	overflow:auto;
	}
.header_top ul li{
	
	display:block;
	/* 這邊也要設float，否則IE6會以100%寬度顯示 */
	border-left:#666 1px solid;
	float:right;
	height:20px;
	width: auto;
	padding:0px 10px 0px 10px;
	text-align:center;
	
	
	}
.header_top ul li a{
	
	color:#000;
	font-family:"微軟正黑體", Calibri, "Times New Roman";
	color: #666;
	font-size:14px;
	}
/*------------nav設定----------*/
#nav{
	     width : 960px;
		 height: 40px;
		 background-image: url(hizon-website/960-40.png);
	}
#nav ul {
	list-style-type:none;/* 取消ul樣式符號 */
	margin:0;/* 重設ul邊界與留白為零 */
	padding:0;
	overflow:auto;/* 內有浮動元件時，需設overflow才會自動調整大小 */
	
	}
#nav ul li{
	float:left;/* 利用float讓第一層li水平排列 */
	}
#nav ul li a {
	/* 將a改為區塊元件，以便指定寬高 */
	display:block;
	/* 這邊也要設float，否則IE6會以100%寬度顯示 */
	float:left;
	/* 固定高度 */
	height:40px;
	width: 120px;
	text-align: center;
	
}	
#nav ul li ul {
	/* 讓第二層ul跳脫文件流以利定位 */
	position:absolute;
	/* 固定寬度 */
	width:120px;
	/* 避免出現捲軸 */
	overflow:visible;
	/* 讓ul與母階層li相同位置 */
	clear:left;
	margin-top: 40px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#nav ul li ul li {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none; 
	text-align: center;
}
#nav ul li ul li a {
	/* 覆寫繼承自第一層的浮動設定 */
	float:none;
	width: 100%;/* 註：display、height、padding繼承第一層的設定 */
}
#nav ul li ul li ul {
	margin-top: -30px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 100px;
	width: 100%;
}

/* ---------- 隱藏與顯示階層 ---------- */
#nav ul li ul {
	/* 預先隱藏第二層 */
	visibility:hidden;
}
#nav ul li:hover ul {
	/* 觸動第一層時，顯示第二層 */
	visibility: visible;
}
#nav ul li:hover ul li ul {
	/* 顯示第二層時，隱藏第三層，避免同時彈出 */
	visibility:hidden;
}
#nav ul li ul li:hover ul {
	/* 觸動第二層時，顯示第三層 */
	visibility:visible;
}

/* ---------- 以下為美化用 ---------- */
/* 預設字體 */
#nav {
	font-size:16px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif,微軟正黑體,標楷體;
	
}
/* 第一層ul背景色彩與邊框 */
#nav ul {
	
	
}
/* 第一層a字型 */
#nav ul li a {
	color:#FFF;
	font-size:16px;
	text-decoration:none;
	line-height: 40px;
	font-weight:bolder;
	
}
/*第二層ul背景色彩與邊框  */
#nav ul li ul {
	background:#34406d;
	
	
}
/* 第二層a字型 */
#nav ul li ul li a {
	font-size:14px;
	color:#FFF;
	
}

/* 觸動第一層li時，改變背景色 */
#nav ul li:hover {
	color:#77AEFF;
}

#nav ul li a:hover {
	color:#FFF;
}

#nav ul li:hover a{
	color: #77AEFF;
	
}

#nav ul li ul li:hover a, #nav ul li ul li a:hover {
	color:#FFF;
	
}


/*-------------nav 設定 end --------*/


#content {
	height:auto;
	    
	 
      
        }
		

#footer {
	    height:107px;
		width:960px;
		background-image:url(hizon-website/homepage-3_3.png);
		
		/*可不用設定寬度和高度，由文字來決定*/
         }
#body {
        margin : 0px;   /*緊貼頂部(上下左右)，沒有空隙*/
        background-color:#ffffff; /*背景色設定*/
		
        }
.footer_top{
	height:80px
		}
.footer_top ul{
	
	list-style-type:none;/* 取消ul樣式符號 */
	margin:0;/* 重設ul邊界與留白為零 */
	padding:0;
	overflow:auto;/* 內有浮動元件時，需設overflow才會自動調整大小 */
	font-family: "微軟正黑體", Calibri, "Times New Roman";
	color:#FFF;
	font-size:14px;
	}
.footer_top ul li{
	padding:5px 0 0 40px;
	}
.footer_bottom{
	color:#FFF;
	text-align: center;
	font-size:14px;
	font-family:"微軟正黑體", Calibri, "Times New Roman";
	}
	
	
/*圖片輪播*/
.imageRotation{
	height:400px;
	width:960px;
	overflow:hidden;  /*--超出容器的所有元素都不可见--*/
	position:relative;  /*--相对定位--*/
	border:0px solid #eee;
	bodrer-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	}
/*-------------图片容器---------------*/
.imageBox{
	position:absolute;  /*--固定定位--*/
	height:400px;
	top:0px;
	left:0px;
	overflow:hidden;
	}
.imageBox img {
	display:block;
	height:400px;
	width:960px;
	float:left;
	border:none;
	}
/*-------------标题容器---------------*/
.titleBox{
	position:absolute;
	bottom:0px;
	width:960px;
	height:40px;
	overflow:hidden;
	}
.titleBox p{
	position: absolute;
	bottom: -40px;
	width: 960px;
	height: 40px;
	margin: 0px;
	padding: 0px 10px;
	line-height: 40px;
	z-index: 1;
	border-top: 1px solid #000;
	background-color: #000;
	color: #fff;
	font-family: "微软雅黑","yahei";
	opacity: 0.5;
	-moz-opacity: 0.5;
	-webkit-opacity: 0.5;
	filter: alpha(opacity=50);
	left: 4px;
	}
.titleBox p span{
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	filter:alpha(opacity=100);
	}
.titleBox p.active{
	bottom:0px;
	}
/*-------------图标容器---------------*/
.icoBox{
	position:absolute;  /*--固定定位--*/
	bottom:14px;
	right:15px;
	width:76px;
	height:12px;
	text-align:center;
	line-height:40px;
	z-index:2;
	}
.icoBox span{
	display:block;
	float:left;
	height:12px;
	width:12px;
	margin-left:3px;
	overflow:hidden;
	background:url("images/ico.png") 0px 0px no-repeat;
	cursor:pointer;
	}
.icoBox span.active {
	background-position:0px -12px;
	cursor:default;
	}
