@charset "utf-8";
/*=================================
CSS Play
October 2012
By : Away
http://www.dfuns.idv.tw
https://www.f2e.idv.tw
=================================*/

a{ text-decoration:none; outline:0;}
img{ border:0;}
body{ background: #DDD url("../images/bgX.gif") repeat-x; font-family: "微軟正黑體", Arial, Helvetica, sans-serif;}
.wrap{ width:960px; margin:auto;}
header{ position:relative;}
.navi, .logo{ position:absolute;}
.navi{ right:0;}
.logo{ left:0; top:-17px;}
.logo a{ display:block; background:url("../images/logo.png"); width:300px; height:130px; text-indent:-9999px;}
section{ padding:280px 0 120px; background:url("../images/sectionBG.jpg") no-repeat 0 160px;}
section h1{ font-size:7em; color:#FFF; text-align:center; margin:0; text-shadow:-1px -1px #666;}
section p{ margin:0; opacity:.8; color:#FFF; text-align:center; line-height:1.8;}
article{ background:#FFF; border-radius:10px; padding:1em 2em; box-shadow:0 0 20px #666 inset; line-height:1.8; letter-spacing:1px; color:#333;}
footer{ line-height:60px; text-align:center;}

/* navgation ===========================================*/
.navi-ls{
	overflow: hidden;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.navi-item a {
	position: relative;
	display: block;
	padding: 0 1em;
	color: #666;
	font-weight: bold;
	line-height: 135px;
	transition: all .3s ease-out;
}
	
.navi-item a::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -132px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#09F;
	transition: top .3s;
}

.navi-item a:hover {
	color:#FFF;
}

.navi-item a:hover::after {
	top: 0;
}