body {
	font-family: 'Segoe UI', Myriad Pro, Arial, Helvetica, sans-serif, '微軟正黑體';
	/*font-size:75%;*/
	background:#000;
	padding:0;
	margin:0;
	color:#fff;
}

img {
	width:100%;
	outline:none;
	border:0;
}
	

.frame {
	margin:0 auto; padding:5em 0; overflow:hidden;
	width:1440px;
}
/*.title {
	font-size:1.85em; line-height:1.3em; color:#FF7200;
}
.text {
	font-size:1em; line-height:1.6em; margin-top:0.8em; margin-bottom:1.5em;
}
*/
.title {
	/*font-style:italic;*/ font-size:2em; line-height:1.2em; color:#FF5400;
}
.text {
	/*font-style:italic;*/ font-size:1.2em; line-height:1.2em; margin-top:0.8em; margin-bottom:1.5em;
}
.note {
	color:#CCC; font-size:0.6em; line-height:1.1em ;margin-top:0.8em;
}

.table {
	display:table; min-height:500px;
}
.table .cell {
	display:table-cell; vertical-align: middle;
}
.table .cell_HIDE {
	display:none; vertical-align: middle;
}
.table .cell_SHOW {
	display:table-cell; vertical-align: middle;
}
.table .cell .left {
	float:left; margin-right:4%; text-align:left;
}
.table .cell .right {
	float:right; margin-left:4%; text-align:left;
}
.table .cell .center {
	padding:1em 10% 0; overflow:visible;
}
.table .cell .offsetRight {
	margin-right:-25%;
}
.table .cell .offsetLeft {
	margin-left:-25%;
}
.table .cell .btn a{
	color:#fff;
	background-color:#036;
	border-radius:5px;
	box-shadow:0px 0px 16px rgba(4,111,204,1) inset;
	padding:8px 16px;
	text-decoration:none;
	-o-transition: background .10s linear;
	-webkit-transition: background .10s linear;
	-moz-transition: background .10s linear;
	transition:  background .10s linear;
}
.table .cell .btn a:hover{
	background-color:#03C;
}
.table .side{
	width:10%; display:block;	
}
.table .col1, .table .col1s{
	width:8%;
}
.table .col2, .table .col2s{
	width:16%;
}
.table .col3, .table .col3s{
	width:24%;
}
.table .col4, .table .col4s{
	width:32%;
}
.table .col5, .table .col5s{
	width:40%;
}
.table .col6, .table .col6s{
	width:48%;
}
.table .col7, .table .col7s{
	width:56%;
}
.table .col8, .table .col8s{
	width:64%;
}
.table .col9, .table .col9s{
	width:72%;
}
.table .col10, .table .col10s{
	width:80%;
}

.fade {
	position:relative;
	overflow:auto;
	display:block;
}
.fade .pic2{
	position:absolute;
	display:none;
	top:0;
	left:0;
	z-index:3;
}

.filter { 
	transition:all ease-out 300ms;
}
.filter:hover {
	-webkit-filter:brightness(1.2) contrast(1.2);
}
#Graphic {
	background-color:#000;
	background-image:url(../images/01_Graphic-80.jpg);
	background-position:center;
	background-repeat:no-repeat;
	min-height:800px;
}

#CPU {
	background-color:#000;
	background-image:url(../images/02_cpu-100.jpg);
	background-position:50% -60px;
	background-repeat:no-repeat;
	min-height:860px;
}
#Storage {
	background-color:#000;
	background-image:url(../images/03_storage-100.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	min-height:800px;
}
#Bluray {
	background-color:#000;
	background-image:url(../images/04_Blu-ray-80.jpg);
	background-position:40% -50px;
	background-repeat:no-repeat;
	min-height:750px;
}
#Sound {
	background-color:#000;
	background-image:url(../images/05_Sound-80.jpg);
	background-position:center 35px;
	background-repeat:no-repeat;
	min-height:800px;
}
#FullHD {
	background-color:#000;
	background-image:url(../images/06_FullHD-80.jpg);
	background-position:center -60px;
	background-repeat:no-repeat;
	min-height:700px;
}
#XSplit {
	background-color:#000;
	background-image:url(../images/10_XSplit-100.jpg);
	background-position:center -200px;
	background-repeat:no-repeat;
	min-height:800px;
	position:relative;
}
#XSplit .container {
	position:absolute;
	top:480px;
	left:-500px;
	margin-left:50%;
	width:300px;
}
#Fantweak {
	background-color:#000;
	background-image:url(../images/11_Fanweak-100.jpg);
	background-position:center -150px;
	background-repeat:no-repeat;
	min-height:500px;
}
#Keyboard {
	background-color:#000;
	background-image:url(../images/07_Keyboard-80.jpg);
	background-position:40% 0px;
	background-repeat:no-repeat;
	min-height:780px;
}
#Design {
	background-color:#000;
	background-image:url(../images/08_design-100.jpg);
	background-position:center -200px;
	background-repeat:no-repeat;
	min-height:500px;
}
#Dashboard {
	background-color:#000;
	background-image:url(../images/12_Dashboard-100.jpg);
	background-position:50% -80px;
	background-repeat:no-repeat;
	min-height:850px;
}

@media screen and (max-width: 1500px) {
	.frame {
		width:100%;
	}
	#Graphic {
		background-image:url(../images/01_Graphic-70.jpg);
		background-position:50% 80px;
		min-height:800px;
	}
	#CPU {
		background-image:url(../images/02_cpu-80.jpg);
		background-position:50% 30px;
		min-height:730px;
	}
	#Bluray {
		background-image:url(../images/04_Blu-ray-60.jpg);
		background-position:50% 50px;
		min-height:675px;
	}
	#Sound {
		background-image:url(../images/05_Sound-60.jpg);
		background-position:50% 180px;
		min-height:750px;
	}
	#FullHD {
		background-image:url(../images/06_FullHD-70.jpg);
		background-position:center -40px;
		min-height:700px;
	}
	#Keyboard {
		background-image:url(../images/07_Keyboard-70.jpg);
		background-position:40% 20px;
		min-height:700px;
	}
}
@media screen and (max-width: 1200px) {
	#XSplit {
		background-image:url(../images/10_XSplit-80.jpg);
		background-position:center -50px;
		min-height:720px;
	}
	#XSplit .container {
		top:490px;
		left:-370px;
		width:230px;
	}	
	#Fantweak {
		background-image:url(../images/11_Fanweak-80.jpg);
		background-position:center -30px;
		min-height:500px;
	}
	#Dashboard {
		background-image:url(../images/12_Dashboard-80.jpg);
		background-position:50% 70px;
		min-height:830px;
	}
}
@media screen and (max-width: 1000px) {
	.table {
		min-height:350px;
	}
	.title {
		font-size:1.7em;
	}
	.text {
		font-size:0.9em; margin-top:1em;
	}
	.note {
		font-size:0.6em; margin-top:1.2em;
	}
	#Graphic {
		background-image:url(../images/01_Graphic-60.jpg);
		background-position:50% 30px;
		min-height:650px;
	}
	#CPU {
		background-image:url(../images/02_cpu-60.jpg);
		background-position:50% 60px;
		min-height:580px;
	}
	#Storage {
		background-image:url(../images/03_storage-60.jpg);
		background-position:center 0px;
		min-height:500px;
	}
	#Bluray {
		background-image:url(../images/04_Blu-ray-40.jpg);
		background-position:50% 100px;
		min-height:520px;
	}
	#Sound {
		background-image:url(../images/05_Sound-60.jpg);
		background-position:50% 100px;
		min-height:650px;
	}
	#FullHD {
		background-image:url(../images/06_FullHD-60w.jpg);
		background-position:center -50px;
		min-height:500px;
	}
	#XSplit {
		background-image:url(../images/10_XSplit-80.jpg);
		background-position:center -100px;
		min-height:680px;
	}
	#XSplit .container {
		top:450px;
		left:-340px;
		width:230px;
	}	
	#Fantweak {
		background-image:url(../images/11_Fanweak-80.jpg);
		background-position:center -100px;
		min-height:500px;
	}
	#Keyboard {
		background-image:url(../images/07_Keyboard-60.jpg);
		background-position:40% 20px;
		min-height:600px;
	}
	#Design {
		background-image:url(../images/08_design-60.jpg);
		background-position:40% 0px;
		min-height:550px;
	}
	#Dashboard {
		background-image:url(../images/12_Dashboard-80.jpg);
		background-position:50% -20px;
		min-height:720px;
	}
}
@media screen and (max-width: 800px) {
	.title {
		font-size:1.5em;
	}
	.text {
		font-size:0.9em; margin-top:1em;line-height:1.4em;
	}
	.note {
		font-size:0.6em; margin-top:1.2em;
	}
	.table {
		display:block;
	}
	.table .cell {
		display:block;
	}
	.table .cell_HIDE {
		display:block;
	}
	.table .cell_SHOW {
		display:none; 
	}
	.table .col1, .table .col2, .table .col3, .table .col4, .table .col5, .table .col6, .table .col7, .table .col8, .table .col9, .table .col10 {
		width:80%; margin:0 10%;
	}
	.table .col1s, .table .col2s, .table .col3s, .table .col4s, .table .col5s, .table .col6s, .table .col7s, .table .col8s, .table .col9s, .table .col10s {
		width:60%; margin:0 20%;
	}
	.table .cell .left, .table .cell .right, .table .cell .center  {
		float:inherit; margin:4% 0; text-align:left;
	}
	.table .cell .center {
		padding:1em 0 0;
	}
	.table .cell .offsetRight, .table .cell .offsetLeft {
		margin-right:0;
		margin-left:0;
	}
	.table .side{
		display:none;	
	}
	#Graphic {
		background-image:url(../images/01_Graphic-50.jpg);
		background-position:50% 130px;
		min-height:630px;
	}
	#CPU {
		background-image:url(../images/02_cpu-60.jpg);
		background-position:50% 120px;
		min-height:630px;
	}
	#Storage {
		background-image:url(../images/03_storage-60.jpg);
		background-position:55% 40px;
		min-height:540px;
	}
	#Bluray {
		background-position:70% 100px;
		min-height:450px;
	}
	#Sound {
		background-image:url(../images/05_Sound-50.jpg);
		background-position:50% 180px;
		min-height:630px;
	}
	#FullHD {
		background-image:url(../images/06_FullHD-60.jpg);
		background-position:55% 180px;
		min-height:750px;
	}	
	#XSplit {
		background-image:url(../images/10_XSplit-70-c.jpg);
		background-position:center 30px;
		min-height:800px;
	}
	#XSplit .container {
		top:640px;
		left:-160px;
		width:290px;
	}	
	#Fantweak {
		background-image:url(../images/11_Fanweak-60.jpg);
		background-position:center 40px;
		min-height:300px;
	}
	#Keyboard {
		background-image:url(../images/07_Keyboard-60.jpg);
		background-position:30% 50px;
		min-height:640px;
	}
	#Dashboard {
		background-image:url(../images/12_Dashboard-80.jpg);
		background-position:50% 30px;
		min-height:780px;
	}
}

@media screen and (max-width: 500px) {
	.frame {
		padding:2em 0;
	}
	#Graphic {
		background-image:url(../images/01_Graphic-30.jpg);
		background-position:center 250px;
		min-height:940px;
	}
	#CPU {
		background-image:url(../images/02_cpu-60.jpg);
		background-position:50% 150px;
		min-height:650px;
	}
	#Storage {
		background-image:url(../images/03_storage-40.jpg);
		background-position:55% 120px;
		min-height:470px;
	}
	#Bluray {
		background-image:url(../images/04_Blu-ray-40.jpg);
		background-position:70% 100px;
		min-height:510px;
	}
	#Sound {
		background-image:url(../images/05_Sound-40.jpg);
		background-position:50% 200px;
		min-height:570px;
	}
	#FullHD {
		background-image:url(../images/06_FullHD-40.jpg);
		background-position:center 150px;
		min-height:550px;
	}
	#XSplit {
		background-image:url(../images/10_XSplit-50-c.jpg);
		background-position:center 80px;
		min-height:700px;
	}
	#XSplit .container {
		top:520px;
		left:-140px;
		width:250px;
	}	
	#Fantweak {
		background-image:url(../images/11_Fanweak-40.jpg);
		background-position:center 70px;
		min-height:300px;
	}
	#Keyboard {
		background-image:url(../images/07_Keyboard-50.jpg);
		background-position:30% 40px;
		min-height:500px;
	}
	#Design {
		background-image:url(../images/08_design-40.jpg);
		background-position:50% 50px;
		min-height:400px;
	}
	#Dashboard {
		background-image:url(../images/12_Dashboard-60.jpg);
		background-position:50% 70px;
		min-height:650px;
	}
}

@media screen and (max-width: 360px) {
	#Graphic {
		background-image:url(../images/01_Graphic-20.jpg);
		background-position:center 360px;
		min-height:800px;
	}
	#CPU {
		background-image:url(../images/02_cpu-40.jpg);
		background-position:50% 300px;
		min-height:620px;
	}
	#Storage {
		background-image:url(../images/03_storage-30.jpg);
		background-position:55% 230px;
		min-height:500px;
	}
	#Bluray {
		background-image:url(../images/04_Blu-ray-30.jpg);
		background-position:60% 180px;
		min-height:500px;
	}
	#Sound {
		background-image:url(../images/05_Sound-30.jpg);
		background-position:center 340px;
		min-height:620px;
	}
	#FullHD {
		background-image:url(../images/06_FullHD-40.jpg);
		background-position:55% 250px;
		min-height:650px;
	}
	#XSplit {
		background-image:url(../images/10_XSplit-50-c.jpg);
		background-position:center 160px;
		min-height:720px;
	}
	#XSplit .container {
		top:600px;
		left:-100px;
		width:200px;
	}	
	#Fantweak {
		background-image:url(../images/11_Fanweak-30.jpg);
		background-position:center 180px;
		min-height:300px;
	}
	#Keyboard {
		background-image:url(../images/07_Keyboard-40.jpg);
		background-position:30% 140px;
		min-height:540px;
	}
	#Design {
		background-image:url(../images/08_design-40.jpg);
		background-position:50% 80px;
		min-height:450px;
	}
	#Dashboard {
		background-image:url(../images/12_Dashboard-40.jpg);
		background-position:50% 210px;
		min-height:600px;
	}
}