body {
	font-family: 'Segoe UI', Myriad Pro, Arial, Helvetica, sans-serif, '微軟正黑體';
	/*font-size:75%;*/
	background:#000;
	padding:0;
	margin:0;
	color:#fff;
}
/*---------------slider-----------------*/
.cbp-fwslider {
	position: relative;
	margin:0 auto;
	overflow: hidden;
	/*padding-bottom:50px;*/
}

.cbp-fwslider ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.cbp-fwslider ul li {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	position:relative;
	
}

.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
	display: block;
	text-align:center;
	outline: none;
	margin:0 auto;	
}

.cbp-fwslider ul li > a img {
	border: none;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.cbp-fwslider nav span {
	position: absolute;
	padding:14px 4px;
	top: 50%;
	max-width: 50px;
	background-color:rgba(149,149,149,0.2);
	border-radius: 5px;
	text-align: center;
	margin-top: -50px;
	cursor: pointer;
	-o-transition: all .5s linear;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	transition:  all .5s linear;
}
	
.cbp-fwslider nav span:hover {
	background-color:rgba(149,149,149,0.8);
}

.cbp-fwslider nav span.cbp-fwnext {
	right: 0px;
	padding-right:0.3em;
	-o-transition: padding-right .20s linear;
	-webkit-transition: padding-right .20s linear;
	-moz-transition: padding-right .20s linear;
	transition:  padding-right .20s linear;
}

.cbp-fwslider nav span.cbp-fwnext:hover {
	padding-right:0.15em;
	
}
	
.cbp-fwslider nav span.cbp-fwprev {
	left: 0px;
	padding-left:0.3em;
	-o-transition: padding-left .20s linear;
	-webkit-transition: padding-left .20s linear;
	-moz-transition: padding-left .20s linear;
	transition:  padding-left .20s linear;
}

.cbp-fwslider nav span.cbp-fwprev:hover {
	padding-left:0.15em;
	
}
	
.cbp-fwdots {
	position: absolute;
	bottom: 3em;
	white-space: nowrap;
	text-align: center;
	width: 100%;
}

.cbp-fwdots span {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: #ddd;
	margin: 4px;
	border-radius:50%;
	cursor: pointer;
}

.cbp-fwdots span:hover {
	background: #999;
}

.cbp-fwdots span.cbp-fwcurrent {
	background: #555555;
	box-shadow: 0 0 0 2px #959595;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	-moz-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

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-100.jpg);
	background-position:center;
	background-repeat:no-repeat;
	min-height:800px;
}

#VRAM {
	background-color:#000;
	background-image:url(../images/01_2_VRam-100.jpg);
	background-position:center;
	background-repeat:no-repeat;
	min-height:800px;
}

#Design {
	background-color:#000;
	background-image:url(../images/02_Design-100.jpg);
	background-position:50% 40%;
	background-repeat:no-repeat;
	min-height:700px;
}

#Macro {
	background-color:#000;
	background-image:url(../images/03_Macro-Function-80.jpg);
	background-position:40% 50%;
	background-repeat:no-repeat;
	min-height:400px;
}

#Cooling {
	background-color:#000;
	background-image:url(../images/04_Cooling-100.jpg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	min-height:800px;
	position:relative;
	overflow:hidden;
}

#Cooling .table .cell {
	vertical-align: top;
}

#Cooling #Cooling_arrow {
	background-image:url(../images/arrow-100.png);
	background-position:center;
	background-repeat:no-repeat;
	width:1920px;
	height:1080px;
	left:50%;
	margin-left:-960px;
	position:absolute;
	top:-100px;
	animation:arrow_100 1s linear infinite /*alternate*/;
	-webkit-animation:arrow_100 1s linear infinite /*alternate*/;
}
@keyframes arrow_100 
{
	0% { top:-100px; }
	50% { top:-300px; opacity:0; }
	100% { top:-300px; opacity:0; }
}
@-webkit-keyframes arrow_100
{
	0% { top:-100px; }
	50% { top:-300px; opacity:0; }
	100% { top:-300px; opacity:0; }
}
#Storage {
	background-color:#000;
	background-image:url(../images/06_Storage-100.jpg);
	background-position:55% 50%;
	background-repeat:no-repeat;
}
#Storage .table {
	display:table; min-height:350px;
}
#RAID {
	background-color:#000;
	background-image:url(../images/07_RAID-Storm-100.jpg);
	background-position:45% 50%;
	background-repeat:no-repeat;
}
#RAID .table {
	display:table; min-height:350px;
}
#Box_07 {
	background-color:#000;
	background-image:url(../images/P35-keyfeatures-07-Swappable-70.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	min-height:650px;
}
#FullHD {
	background-color:#000;
	background-image:url(../images/09_Full-HD-100.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	min-height:875px;
}

#FullHD .table .cell {
	vertical-align: top;
}

#MiniDisplay {
	background-color:#000;
	background-image:url(../images/10_4K-output-100.jpg);
	background-position:50% 50%;
	background-repeat:no-repeat;
	min-height:850px;
}

#MiniDisplay .table .cell {
	vertical-align: top;
}

#Dolby {
	background-color:#000;
	background-image:url(../images/11_Dolby-80.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	min-height:800px;
}

#Dolby .table .cell {
	vertical-align: top;
}

#Backlit {
	background-color:#000;
	background-image:url(../images/12_Backlit-KB-100.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	min-height:500px;
}

#Backlit .table .cell {
	vertical-align: top;
}

#WiFi {
	background-color:#000;
	background-image:url(../images/13_wifi-100.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	min-height:750px;
}

#WiFi .table .cell {
	vertical-align: top;
}

#Box_10 {
	background-color:#000;
	background-image:url(../images/P35-keyfeatures-08-Sound-80.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	min-height:800px;
}

#Box_11 {
	background-color:#000;
	background-image:url(../images/P35-keyfeatures-09-keyboard-80.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
	min-height:650px;
}
@media screen and (max-width: 1200px) {
	#RAID {
		background-image:url(../images/07_RAID-Storm-80.jpg);
		background-position:50% 50%;
	}	
}
@media screen and (max-width: 1500px) {
	.frame {
		width:100%;
	}
	#Dolby {
		min-height:800px;
		background-position:50% 30px;

	}
	#WiFi {
	background-color:#000;
	background-image:url(../images/13_wifi-100.jpg);
	background-position:50% 100%;
	background-repeat:no-repeat;
	min-height:750px;
}
	

}
@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-80.jpg);
		min-height:600px;
	}
	#VRAM {
		background-image:url(../images/01_2_VRam-80.jpg);
		min-height:600px;
	}
	#Design {
		background-image:url(../images/02_Design-80.jpg);
		min-height:600px;
	}
	#Macro {
		background-image:url(../images/03_Macro-Function-60.jpg);
		background-position:50% 50%;
	}
	#Cooling {
		background-image:url(../images/04_Cooling-80.jpg);
		background-position:50% 50%;
		min-height:700px;
	}
	#Cooling #Cooling_arrow {
		background-image:url(../images/arrow-80.png);
		width:1536px;
		height:864px;
		margin-left:-768px;
		top:-50px;
		animation:arrow_80 1s linear infinite /*alternate*/;
		-webkit-animation:arrow_80 1s linear infinite /*alternate*/;
	}
	
	@keyframes arrow_80 
	{
		0% { top:-50px; }
		50% { top:-200px; opacity:0; }
		100% { top:-200px; opacity:0; }
	}	
	
	@-webkit-keyframes arrow_80
	{
		0% { top:-50px; }
		50% { top:-200px; opacity:0; }
		100% { top:-200px; opacity:0; }
	}
	#Storage {
		background-image:url(../images/06_Storage-80.jpg);
		background-position:55% 50%;
	}
	#Storage .table {
		display:table; min-height:250px;
	}
	#RAID {
		background-image:url(../images/07_RAID-Storm-80.jpg);
		background-position:45% 50%;
	}
	#RAID .table {
		display:table; min-height:250px;
	}
	#Box_07 {
		background-image:url(../images/P35-keyfeatures-07-Swappable-50.jpg);
		min-height:600px;
	}
	#FullHD {
		background-image:url(../images/09_Full-HD-80.jpg);
		background-position:50% 80%;
		min-height:700px;
	}
	#MiniDisplay {
		background-image:url(../images/10_4K-output-80.jpg);
		background-position:50% 50%;
		min-height:750px;
	}
	#Backlit {
		background-image:url(../images/12_Backlit-KB-80.jpg);
		background-position:50% 100%;
		min-height:500px;
	}
	#WiFi {
		background-image:url(../images/13_wifi-80.jpg);
		background-position:50% 100%;
		min-height:600px;
	}
	#Box_10 {
		background-image:url(../images/P35-keyfeatures-08-Sound-60.jpg);
		min-height:650px;
	}
	#Box_11 {
		background-image:url(../images/P35-keyfeatures-09-keyboard-60.jpg);
		min-height:550px;
	}
}
@media screen and (max-width: 800px) {
	.cbp-fwslider nav span {
		max-width: 50px;
	}
	.title {
		font-size:1.5em;
	}
	.text {
		font-size:0.9em; margin-top:1em;
	}
	.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-60.jpg);
		background-position:50% 150px;
		min-height: 600px;
	}
	#Graphic .table .cell .left .left {
		text-align:center;
	}
	#Graphic .table .cell .left .left img {
		max-width:80%;
		margin-top:70%;
	}
	#VRAM {
		background-image:url(../images/01_2_VRam-60.jpg);
		background-position:50% 20%;

	}
	#VRAM .frame{
		padding:0;
	}
	#VRAM .table .cell .left .left {
		text-align:center;
	}
	#VRAM .table .cell .left .left img {
		max-width:80%;
		margin-top:60%;
	}
	#Design {
		background-image:url(../images/02_Design-80-c.jpg);
		background-position:50% -75px;
		min-height:600px;
	}
	#Macro {
		background-image:url(../images/03_Macro-Function-60.jpg);
		background-position:20% 0%;
	}
	#Cooling {
		background-image:url(../images/04_Cooling-60.jpg);
		background-position:50% 0%;
		min-height:600px;
	}
	#Cooling #Cooling_arrow {
		background-image:url(../images/arrow-60.png);
		width:1152px;
		height:648px;
		margin-left:-576px;
		top:0px;
		animation:arrow_60 1s linear infinite /*alternate*/;
		-webkit-animation:arrow_60 1s linear infinite /*alternate*/;
	}	
	@keyframes arrow_60 
	{
		0% { top:0px; }
		50% { top:-100px; opacity:0; }
		100% { top:-100px; opacity:0; }
	}	
	
	@-webkit-keyframes arrow_60
	{
		0% { top:0px; }
		50% { top:-100px; opacity:0; }
		100% { top:-100px; opacity:0; }
	}
	#Storage {
		background-image:url(../images/06_Storage-80s.jpg);
		background-position:50% 100%;
		min-height:640px;
	}
	#RAID {
		background-image:url(../images/07_RAID-Storm-80s.jpg);
		background-position:50% 200px;
		min-height:500px;
	}
	#Box_07 {
		background-image:url(../images/P35-keyfeatures-07-Swappable-40-w.jpg);
		min-height:550px;
	}
	#FullHD {
		background-image:url(../images/09_Full-HD-60.jpg);
		background-position:50% 100%;
		min-height:640px;
	}
	#MiniDisplay {
		background-image:url(../images/10_4K-output-60.jpg);
		background-position:50% 100%;
		min-height:600px;
	}
	#Dolby {
		background-image:url(../images/11_Dolby-60.jpg);
		background-position:40% 100%;
		min-height:675px;
	}
	#Backlit {
		background-image:url(../images/12_Backlit-KB-100.jpg);
		background-position:35% 100%;
		min-height:500px;
	}
	#WiFi {
		background-image:url(../images/13_wifi-60.jpg);
		background-position:40% 100%;
		min-height:550px;
	}
	#Box_10 {
		background-image:url(../images/P35-keyfeatures-08-Sound-60.jpg);
		min-height:650px;
	}
	#Box_11 {
		background-image:url(../images/P35-keyfeatures-09-keyboard-60.jpg);
		min-height:550px;
	}
}

@media screen and (max-width: 500px) {
	#Graphic {
		background-image:url(../images/01_Graphic-40.jpg);
		background-position:50% 47.5%;
	}
	#Graphic .table .cell .left .left img {
		max-width:100%;
		margin-top:60%;
	}
	#VRAM {
		background-image:url(../images/01_2_VRam-40.jpg);
		background-position:50% 47.5%;
	}
	#VRAM .table .cell .left .left img {
		max-width:100%;
		margin-top:60%;
	}
	#Design {
		background-image:url(../images/02_Design-60.jpg);
		background-position:50% 0px;
		min-height:550px;
	}
	#Macro {
		background-image:url(../images/03_Macro-Function-40.jpg);
		background-position:50% 130px;
		min-height:400px;
	}
	#Cooling {
		background-image:url(../images/04_Cooling-40.jpg);
		background-position:50% 100%;
		min-height:600px;
	}
	#Cooling #Cooling_arrow {
		background-image:url(../images/arrow-40.png);
		width:768px;
		height:432px;
		margin-left:-384px;
		top:180px;
		animation:arrow_40 1s linear infinite /*alternate*/;
		-webkit-animation:arrow_40 1s linear infinite /*alternate*/;
	}	
	@keyframes arrow_40 
	{
		0% { top:180px; }
		50% { top:100px; opacity:0; }
		100% { top:100px; opacity:0; }
	}	
	
	@-webkit-keyframes arrow_40
	{
		0% { top:180px; }
		50% { top:100px; opacity:0; }
		100% { top:100px; opacity:0; }
	}	
	#Storage {
		background-image:url(../images/06_Storage-80s.jpg);
		background-position:50% 100%;
		min-height:660px;
	}
	#RAID {
		background-image:url(../images/07_RAID-Storm-80s.jpg);
		background-position:50% 220px;
		min-height:560px;
	}
	#Box_07 {
		background-image:url(../images/P35-keyfeatures-07-Swappable-40.jpg);
		background-position:50% 240px;
		min-height:540px;
	}
	#Box_07 .frame{
		padding-top:0;
	}

	#FullHD {
		background-image:url(../images/09_Full-HD-30.jpg);
		background-position:50% 300px;
		min-height:350px;
	}
	#MiniDisplay {
		background-image:url(../images/10_4K-output-30.jpg);
		background-position:50% 100%;
		min-height:400px;
	}
	#Dolby {
		background-image:url(../images/11_Dolby-40.jpg);
		background-position:50% 100%;
		min-height:600px;
	}
	#WiFi {
		background-image:url(../images/13_wifi-40.jpg);
		background-position:40% 80%;
		min-height:500px;
	}

	#Backlit {
		background-image:url(../images/12_Backlit-KB-100.jpg);
		background-position:28% 100%;
		min-height:500px;
	}
	
}

@media screen and (max-width: 360px) {
	#Graphic {
		background-image:url(../images/01_Graphic-40.jpg);
		background-position:50% 330px;
		
	}
	#Graphic .table .cell .left .left img {
		max-width:100%;
		margin-top:100%;
	}
	#VRAM {
		background-image:url(../images/01_2_VRam-40.jpg);
		background-position:50% 310px;
	}
	#VRAM .table .cell .left .left img {
		max-width:100%;
		margin-top:100%;
		padding-bottom:30px;
	}
	

	#Design {
		background-image:url(../images/02_Design-60.jpg);
		background-position:47% 0px;
		min-height:540px;
	}
	#Macro {
		background-position:50% 230px;
		min-height:540px;
	}
	#FullHD {
		background-position:50% 380px;
		min-height:570px;
	}

	#Cooling {
		background-image:url(../images/04_Cooling-40.jpg);
		background-position:50% 280px;
		min-height:690px;
	}
	#Cooling #Cooling_arrow {
		background-image:url(../images/arrow-40.png);
		width:768px;
		height:432px;
		margin-left:-384px;
		top:180px;
		animation:arrow_40 1s linear infinite /*alternate*/;
		-webkit-animation:arrow_40 1s linear infinite /*alternate*/;
	}	
	@keyframes arrow_40 
	{
		0% { top:260px; }
		50% { top:180px; opacity:0; }
		100% { top:180px; opacity:0; }
	}	
	
	@-webkit-keyframes arrow_40
	{
		0% { top:260px; }
		50% { top:180px; opacity:0; }
		100% { top:180px; opacity:0; }
	}	
	

	#Storage {
		background-image:url(../images/06_Storage-60.jpg);
		background-position:50% 420px;
		min-height:620px;
	}
	#RAID {
		background-image:url(../images/07_RAID-Storm-60.jpg);
		background-position:50% 340px;
		min-height:550px;
	}
	#Box_07 {
		background-position:50% 340px;
		min-height:640px;
	}
	#Dolby {
		background-position:50% 430px;
		min-height:730px;
	}

	#WiFi {
		background-image:url(../images/13_wifi-40.jpg);
		background-position:40% 150px;
		min-height:550px;
	}
}