/* Basic
========================================================================== */
	body {
		background: #eee url(../img/bg.jpg) no-repeat center 0;
		font-family: 微軟正黑體,"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 16px;
		letter-spacing: .6px;
		min-width: 955px;
	}
	.float-left { float: left;}
	.float-right { float: right;}

/* Navigation
========================================================================== */
	#nav { margin: 345px auto 0; width: 950px;}
	#nav ul {
		height: 46px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#nav ul li { float: left;}
	#nav ul li a {
		background: url(../img/nav.png) no-repeat 0 0;
		display: block;
		height: 46px;
		text-indent:  -9999em;
		width: 136px;
	}
	#nav ul li a.story-1 { background-position: 0 0; width: 137px;}
	#nav ul li a.story-2 { background-position: -137px 0;}
	#nav ul li a.story-3 { background-position: -273px 0;}
	#nav ul li a.story-4 { background-position: -409px 0;}
	#nav ul li a.story-5 { background-position: -545px 0;}
	#nav ul li a.story-6 { background-position: -681px 0;}
	#nav ul li a.back-home { background-position: -817px 0; width: 132px;}

	#nav ul li a.story-1:hover, #nav ul li a.story-1.active,
	body.story-1 #nav ul li a.story-1
	{ background-position: 0 -46px;}

	#nav ul li a.story-2:hover,	#nav ul li a.story-2.active,
	body.story-2 #nav ul li a.story-2
	{ background-position: -137px -46px;}

	#nav ul li a.story-3:hover,	#nav ul li a.story-3.active,
	body.story-3 #nav ul li a.story-3
	{ background-position: -273px -46px;}

	#nav ul li a.story-4:hover, #nav ul li a.story-4.active,
	body.story-4 #nav ul li a.story-4
	{ background-position: -409px -46px;}

	#nav ul li a.story-5:hover, #nav ul li a.story-5.active,
	body.story-5 #nav ul li a.story-5
	{ background-position: -545px -46px;}

	#nav ul li a.story-6:hover, #nav ul li a.story-6.active,
	body.story-6 #nav ul li a.story-6
	{ background-position: -681px -46px;}

	#nav ul li a.back-home:hover { background-position: -817px -46px;}

/* Content
========================================================================== */
	#content {
		background: #fff;
		margin: 0 auto;
		padding: 10px;
		width: 950px;
	}

	/* Home Video Block */
	.video div:first-child { width: 640px;}
	.video div + div { width: 280px;}
		.video-link {
			display: block;
			height: 175px;
			width: 280px;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		.video-link + a { margin-top: 10px;}
		.video-link:hover { opacity: 0.8;}

	/* Home Intro */
	.intro { margin: 15px 0 25px 0;}
		.intro h1 {	margin: 0; text-indent: -9999em;}
		.intro h1.title-story { background: url(../img/home_title.png) no-repeat 0 0;}
		.intro h1.title-series-video { background: url(../img/home_title.png) no-repeat 0 -44px;}

	/* Home Series Video */
	.series-video {
		list-style: none;
		margin: 0;
		overflow: hidden;
		padding: 0;
	}
	.series-video li { float: left; margin: 10px 7px 5px 0;}
	.series-video li:nth-child(4) { margin-right: 0}
	.series-video li a {
		display: block;
		height: 221px;
		width: 225px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.series-video li a:hover { opacity: 0.8;}

	/* Article */
	.article { padding: 0 20px;}
	.article .title {
		background: url(../img/article_title_bg.png) no-repeat center;
		text-align: center;
	}
	.article h1 {
		color: #19c4e9;
		font-size: 30px;
	}
	.article h2 {
		color: #000;
		font-size: 24px;
	}
	.article h3 {
		color: #ff4800;
		font-size: 20px;
	}
	.article p {
		color: #666;
		line-height: 1.6;
	}
	.column { width: 100%;}
	.column-single { width: 50%;}
	.video-play { margin-bottom: 20px;}
	.video-play-holder { margin: 0 auto; width: 640px;}

/* Products For you
========================================================================== */
	.products-for-you .title { border-bottom: 3px solid #ccc;}
	.products-for-you .title h5 {
		background: #000;
		-webkit-border-radius: 8px 8px 0 0;
				border-radius: 8px 8px 0 0;
		color: #fff;
		font-size: 14px;
		margin: 0;
		padding: 5px 0;
		text-align: center;
		width: 120px;
	}
	.pro-List {
		list-style: none;
		margin: 0;
		overflow: hidden;
		padding: 20px 0 0 0;
	}
	.pro-List li {
		background: #fff;
		border: 1px solid #ccc;
		float: left;
		height: 227px;
		margin: 0 14px 28px 0;
		overflow: hidden;
		position: relative;
		width: 166px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.pro-List li:hover { border-color: #777;}
		.pro-item {
			display: block;
			text-decoration: none;
		}
		.pro-name {
			background: #f6f6f6;
			color: #777;
			font-size: 12px;
			height: 25px;
			line-height: 25px;
			margin: 0;
			padding: 0 0 0 5px;
		}
		.pro-img {
			border-bottom: 1px solid #ccc;
			border-top: 1px solid #ccc;
			height: 168px;
			width: 166px;
		}
		.pro-img img {
			height: 166px;
			width: 166px;
		}
		.pro-tech {
			background: #f6f6f6;
			top: 192px;
			height: 102px;
			left: 0;
			position: absolute;
			width: 166px;
		}
		.pro-tech a {
			float: left;
			height: 25px;
			margin: 4px 1px;
			/*width: 25px;*/
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		.pro-tech a:hover { opacity: 0.5;}
		.pro-tech a img {
			height: 25px;
			/*width: 25px;*/
		}

/* Footer
========================================================================== */
	#footer {
		color: #909090;
		font-size: 13px;
		margin: 15px auto;
		text-align: center;
		width: 950px;
	}


/* Helper classes
========================================================================== */
	.clearfix:before,
	.clearfix:after { content: " "; display: table;}
	.clearfix:after { clear: both;}
	.clearfix { *zoom: 1;}