html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit;}
html, body { height:100%;}
body {line-height:1;background:#fff;}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
table th {background:#181818;color:#ccc;padding:2px 3px;}
table td {
	color:#999;
	padding:2px 3px;
	background-color: #333;	
	
}
table tbody tr:nth-child(2n) {background: #333;}
body {-webkit-text-size-adjust:none;}
*:link, *:visited, *:hover, *:active, *:focus {-o-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-webkit-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-moz-transition:color .20s linear, background-color .20s linear, border-color .20s linear;transition:color .20s linear, background-color .20s linear, border-color .20s linear;}
b {font-weight:bold;}
p {
	padding-top:1em;
	padding-bottom:1em;
	color: #FFF;
}

#sBanner {
	background-color:#fff;
	color:rgba(255, 255, 255, 0.75);
	background-attachment:scroll;
	background-image:url("images/banner.jpg");
	background-repeat:no-repeat;
	background-size:auto ;
	background-position:top center;
	
	height:90%;
	}
@media screen and (max-width:480px) { #banner {background-position:45% top;background-size:300%;} }
#sHeader {
	background:#d0d0d0;
	border-bottom:1px solid #ccc;
	color:rgba(255, 255, 255, 0.15);
	height:55px;
	line-height:55px;
	cursor:default;
	position:fixed;
	left:0;
	top:0;
	z-index:10001;
	width:100%;
	}
#Logo {
	width:112px;
	height:46px;
	position:absolute;
	background:url(images/asrock.png) no-repeat;
	z-index:10010;
	left: 30px;
}

#Menu {
	display:none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
}
#sAbout{
	background-color:#000;
	background-image:url("images/bg01.jpg");
	}
#sControl{
	background-color:#000;
	background-image:url("images/bg.jpg");
	}	
	
#sSpecification{
	background-color:#000;
	background-image:url("images/bg.jpg");
	}
#sOptions{
	background-color:#000;
	background-image:url("images/bg.jpg");
	}
#nav {float:right;display:block;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#nav li{
	position:relative;
	float:left;
	color:#717171;
	display:block;
	padding:0 20px;
	height:55px;
	text-decoration:none;
	background-color: #d0d0d0;
	}
#nav li:hover {
	cursor:pointer;
	color: #fff;
	background-color: #666;
}
@media screen and (max-width: 1500px) { #nav li {padding:0 20px;}}
@media screen and (max-width: 1024px) {
	#Menu {display:inline-block;background:#d0d0d0;padding:0 1em;color: #fff;float:right;font-size:1.1em;cursor:pointer;}
	#nav {display:none;position:absolute;width:100%;margin-top:56px;}
	#nav li {float:none;}
}
@media screen and (max-width: 480px) {
	#Logo {width:112px;}
}

.wrapper1 {padding:0 0 2em 0;position:relative;}
.wrapper1 > .inner1 {margin:0 auto;width:80em;}
.wrapper1 h1 {
	color:#333;
	line-height:1.2em;
	border-bottom:1px solid #D4D4D4;
	text-align:left;
	padding:40px 20px 10px 10px;
	font-size: 42px;
	font-family: Verdana, Geneva, sans-serif;
}
.wrapper1 h2 {
	color:#00474D;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:30px 20px 10px 30px;
	font-size: 25px;
	letter-spacing:-1px;
}
.wrapper1 p {
	color:#666;
	line-height:1.5em;
	font-family: Verdana, Geneva, sans-serif;
	
}


.slide-btn{
	color: #08080B;
	border: 1px solid #999;
	border-left: 4px solid #999;
	padding: 0.89em 1.8em;
	display: inline-block;
	font-family: Verdana, Geneva, sans-serif;
	margin: 20px 0px 20px 10px;
	font-size: 0.875em;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	text-decoration : none;
}
.slide-btn:hover{
	border: 1px solid #000;
	border-right: 8px solid #000;
	text-decoration : underline;
	
}







.wrapper {padding:0 0 2em 0;position:relative;}
.wrapper > .inner {margin:0 auto;width:80em;}
.wrapper h1 {
	color:#fff;
	line-height:1.2em;
	text-shadow:2px 2px #000;
	text-align:left;
	padding-top:1em;
	padding-bottom:0.2em;
	font-size: 42px;
	font-family: Verdana, Geneva, sans-serif;
}
.wrapper h2 {
	color:#00cfe1;
	font-family: Verdana, Geneva, sans-serif;
	
	line-height:1em;
	padding:1.5em auto 1em;
	padding-top:3em;
	padding-bottom:0.2em;
	font-size: 20px;
}
.wrapper h3 {
	color:#333;
	line-height:1.2em;
	
	text-align:left;
	padding:60px 20px 10px 10px;
	font-size: 42px;
	font-family: Verdana, Geneva, sans-serif;
	}
.wrapper h4 {
	border-bottom:1px solid #D4D4D4;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:90px 20px 10px 30px;
	font-size: 25px;
	letter-spacing:-1px;
	
}

.wrapper h5 {
	color:#09C;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:30px 30px 0px 30px;
	font-size: 20px;
}

.wrapper p, .wrapper li {
	color:#CCC;
	line-height:1.5em;
	font-family: Arial, Helvetica, sans-serif;
}

.wrapper li {list-style:circle;margin-left:1.2em;}
.wrapper p a, .wrapper td a, .wrapper li a {color:#5ff;text-decoration:none;}
.wrapper p a:hover, .wrapper td a:hover, .wrapper li a:hover {color:#ff0;text-decoration:underline;}
.wrapper input[type="submit"], .wrapper input[type="reset"], .wrapper input[type="button"], .wrapper button, .wrapper .button {-moz-appearance: none;-webkit-appearance: none;-ms-appearance: none;appearance: none;border-radius: 2.5em;border: 0;cursor: pointer;display: inline-block;font-weight: 700;height: 2.85em;line-height: 2.95em;min-width: 10em;margin:0.5em;padding: 0 1.5em;text-align: center;text-decoration: none;white-space: nowrap;background-color: #555;border:1px solid #666;box-shadow: none;color: #eee !important;}
.wrapper input[type="submit"].icon:before, .wrapper input[type="reset"].icon:before, .wrapper input[type="button"].icon:before, .wrapper button.icon:before, .wrapper .button.icon:before { color: #bbb; }
.wrapper input[type="submit"]:hover, .wrapper input[type="reset"]:hover, .wrapper input[type="button"]:hover, .wrapper button:hover, .wrapper .button:hover { background-color: #777;text-shadow:1px 1px #000; border:1px solid #888; }
.wrapper input[type="submit"]:active, .wrapper input[type="reset"]:active, .wrapper input[type="button"]:active, .wrapper button:active, .wrapper .button:active { background-color: #444;}
@media screen and (max-width: 1280px) {
	.wrapper > .inner {width: 90%;}
}
@media screen and (max-width: 980px) {
	.wrapper > .inner {width: 95%;}
}
@media screen and (max-width: 480px) {
	.wrapper {padding:1em 0;}
	.wrapper > .inner {width: 99%;}
}


.grid-1 {
	width:100%;
	background-color: #fff;
	height: 100%;	
}

.grid-1 .image-L {
	width:100%;
	float:left;
	display:block;
	margin: 10px 40px 10px 30px;	
}
.grid-1 .image-L1 {
	width:100%;
	max-width: 580px;
	float:left;
	display:block;
	margin: 10px 0px 10px 0px;	
}

.grid-1 .image-L2 {
	width:100%;
	max-width: 800px;
	float:rihgt;
	display:block;
	margin: 10px 40px 10px 30px;
	
}

.grid-1 .image-L3 {
	width:100%;
	max-width: 600px;
	float:rihgt;
	display:block;
	margin: 10px 40px 10px 30px;
	
}

.grid-1 .image-L4 {
	width:100%;
	max-width: 960px;
	float:rihgt;
	display:block;
	margin: 10px 40px 10px 30px;
	
}

.grid-1 .image-R {
	width:100%;
	max-width: 600px;
	float:rihgt;
	display:block;
	margin: 10px 10px 30px 30px;
	
}

.grid-1 .image-R0 {
	width:100%;
	max-width: 400px;
	float:rihgt;
	display:block;
	margin: 10px 10px 30px 30px;
	
}
.grid-1 .image-R1 {
	width:100%;
	max-width: 350px;
	float:rihgt;
	display:block;
	margin: 10px 10px 30px 60px;
	
}
.grid-1 p{
	color:#CACACA;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:20px 20px 10px 30px;
	font-size: 15px;
	line-height: 15px;
}




.grid-2 {width:50%;float:left;}

.grid-2 h3{
	color:#000;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:30px 20px 10px 30px;
	font-size: 20px;
	line-height: 20px;
	}
	
.grid-2 h2{
	color:#00cfe1;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:1.5em auto 1em;
	padding-top:3em;
	padding-bottom:0.2em;
	font-size: 20px;
}

.grid-2 .image-1 {
	width:100%;
	max-width: 355px;
}
.grid-2 .image-2 {
	width:100%;
	max-width: 180px;
	}


.grid-3 {
	width:50%;
	float:left;
	background-color: #313131;
	height: 100%;		
}
.grid-3 .image{
	width:100%;
	max-width: 600px;
	display:block;
	float: left;	
	margin: 10px 40px 10px 30px;	
	}

.grid-3 h2{
	color:#00cfe1;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:30px 20px 10px 30px;
	font-size: 20px;
	line-height: 20px;
		
	}

.grid-3-1 {
	width:50%;
	float:right;
	background-color: #fff;
	height: 100%;		
}
.grid-3-1 .image{
	width:100%;
	max-width: 600px;
	display:block;
	float: right;	
	margin: 10px 10px 10px 30px;
	}

.grid-3-1 h2{
	color:#333;
	font-family: Verdana, Geneva, sans-serif;
	line-height:1em;
	padding:30px 20px 10px 30px;
	font-size: 20px;
	line-height: 20px;
	}


.grid-4 {width:25%;float:left;}











.grid-5 {
	width:100%;
	
}


.grid-5 .image{
	width:100%;
	max-width: 950px;
	vertical-align: middle;
	display:block;
	margin: 10px 10px 10px 10px;
	
}

.grid-6 {
	width:25%;
	float:left;
}
.grid-6 .image{
	width:100%;
	max-width: 200px;
	display:block;
	margin: 10px 10px 10px 120px;
	}
.grid-7 {
	width:15%;
	float:left;
}

.grid-7 .image{
	width:100%;
	max-width: 180px;
	display:block;
	margin: 20px 0px 10px 10px;
	}
	


@media screen and (max-width: 980px) {
	.grid-4 {width:33.3%;}
	.grid-2, .grid-3, .grid-3-1, {width:50%;}
	.grid-1, .grid-6 {width:100%;}
}
@media screen and (max-width:736px) {
	.grid-4, .grid-3, .grid-3-1, .grid-2 {width:50%;}
	.grid-1, .grid-6 {width:100%;}
}
@media screen and (max-width: 480px) {
	.grid-4, .grid-3, .grid-3-1, .grid-2, .grid-1, .grid-6 {width:100%;}
	
}

.image {border-radius: 0;border: 0;display: inline-block;position: relative;width: 100%;}
.image img {border-radius: 0;display: block;}
.image.left, .image.right {max-width: 50%;}
.image.left img, .image.right img {width: 100%;}
.image.left {float: left; padding: 0 1.5em 1em 0; top: 0.25em;}
.image.right {float: right; padding: 0 0 1em 1.5em; top: 0.25em;}



#footer {background-color: #fff;color: rgba(255, 255, 255, 0.75);text-align: center;}
#footer .inner {
	padding: 2em 0 1em 0;
	border-top: solid 1px rgba(255, 255, 255, 0.1);
	margin: 0 auto;
	width: 75%;
	font-family: Verdana, Geneva, sans-serif;
	color: #666;
}
@media screen and (max-width: 980px) {
	#footer .inner {padding: 5em 0 3em 0;width: 100%;}
}
@media screen and (max-width: 736px) {
	#footer .inner {padding: 3em 0 1em 0;}
}
@media screen and (max-width: 480px) {
	#footer .inner {padding: 2em 0 0.1em 0;}
}

.transhover {filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}

.Spec1 {width:80%;margin:0 auto;}
.Spec1 tr td{
	vertical-align:middle;
	background-color:#ACACAC;
	color:#000;
	border-bottom:1px solid #fff;
	border-right: 1px solid #fff;
	
	text-align: center;
	padding: 10px 0 5px 0;
	font-size:12px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:1.6em;
}
.Spec1 tr:nth-child(even) td{	
background-color:#555;
color:#f0f0f0;
border-bottom:1px solid #444;

}

.Spec1 h2{color:#000;font:400 2em "Trebuchet MS"; text-shadow:2px 2px #ccc; line-height:1em;padding:0.2em auto 1em;padding-top:0.2em;padding-bottom:0.2em;}

.concept1 {
	color:#eee;
	border-left:1px solid #888;
	margin-top:20em;
	padding:1.5em 0 1em 1em;
	line-height:1.5em;
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
}
.concept2 {
	width:100%;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
	background:#333;
	color:#eee;
}

.concept2 p{
	width:90%;
	font-size:1em;
	line-height:1.5em;
	font-family: Arial, Helvetica, sans-serif;
	
	text-shadow:1px 1px #000;
	text-align:left;
	display:block;
	margin: auto;
}


#GoTop {width:80px;height:80px;position:fixed;right:1em;bottom:1em;;z-index:10005;background:url(images/arrow.png);display:none;cursor:pointer;}

@media screen and (max-width:980px) {
	.concept1 {margin-top:8em;}
	.concept2 { padding:3em 0;}
}
@media screen and (max-width:480px) {
	.Spec1 {width:99%;}
	.concept1 {margin-top:1em;margin-bottom:1em;}
	.concept2 { padding:3em 0;}
}