@font-face {
	font-family: 'ROGFontsv';
	src: url('../fonts/ROGFontsv1.5-Regular.otf');
	src: url('../fonts/ROGFontsv1.5-Regular.otf') format('embedded-opentype'));
	src: url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype");
	font-weight: normal;
	font-style: normal
}
@font-face {
	font-family: 'Xolonium';
	src: url('../fonts/xolonium-Regular.otf'),
		 url('../fonts/xolonium-Regular.otf') format('embedded-opentype'),
		 url("../fonts/xolonium-Regular.ttf") format("opentype"),
		 url("../fonts/xolonium-regular.eot");
	font-weight: normal;
	font-style: normal;
}
@import url('https://www.asus.com.cn/css/2015/fontapi.css');
*{
	margin: 0;
	padding:0;
}


#sectionOverview{
    padding: 0!important;
}
/* ---------- RESET ---------- */
	#hd{
		background-color: #000;
	}
	#hd *{
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		box-sizing: border-box;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd ul,
	#hd ol,
	#hd li {
		margin: 0;
		padding:0;
	}
	#hd,
	#hd section {
		margin: 0;
		padding: 0;
		border: 0;
		font: inherit;
		vertical-align: baseline;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd p,
	#hd a,
	#hd li,
	#hd b,
	#hd small {
		margin: 0;
		padding:0;
		line-height: normal;
		color: white;
	}
/* ---------- Element ---------- */
	#hd section{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	#hd img {
		display: block;
		margin:0 auto;
		max-width: 100% !important;
		height: auto;
		border: none;
	}
	#hd .hd-btn {
		background: none;
		border: none;
		outline: none;
		cursor: pointer;
	}
	#hd .hd-downloadbox,
	#hd .hd-tagbox {
		display: block;
		font-size: 21px;
		font-weight: 400;
		position: relative;
		text-align: center;
		background-color: #000;
		color:#fff;
		margin:10px auto 20px;
	}
	#hd .hd-downloadbox{
		font-family: "Fjalla One", sans-serif;
		line-height: 46px;
		width: 100%;
		max-width: 200px;
		height: 45px;
	}
	#hd .hd-tagbox{
		border-radius: 10px;
		width: 90%;
		padding:15px;
		text-transform: uppercase;
	}
	#hd .hd-tagbox p{
		margin-bottom: 5px;
		font-size: 22px;
		font-weight: 400;
	}
	#hd .hd-tagbox small{
		font-weight: 400;
		display: block;
		line-height: 14px;
	}
	#hd .hd-downloadbox:before,
	#hd .hd-tagbox:before{
		content:'';
		display: block;
		position: absolute;
		top: -2px;left: -2px;
		background: #c9c9c9;
		z-index: -1;
		background: #000000;
		background: -moz-linear-gradient(-20deg, #000000 0%, #c9c9c9 50%, #131313 100%);
		background: -webkit-linear-gradient(-20deg, #000000 0%,#c9c9c9 50%,#131313 100%);
		background: linear-gradient(160deg, #000000 0%,#c9c9c9 50%,#131313 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313',GradientType=1 );
	}
	#hd .hd-downloadbox:before{
		width:calc(100% + 4px);
		max-width: 204px;
		height: 49px;
	}
	#hd .hd-tagbox:before{
		border-radius: 10px;
		width:calc(100% + 4px);
		height: calc(100% + 4px);
	}

	#hd p.hd-skewtag {
		font-family: "Fjalla One", sans-serif;
		font-size: 21px;
		font-weight: 400 !important;
		position: relative;
		line-height: 46px;
		min-width: 200px;
		text-align: center;
		margin-bottom: 20px;
		z-index: 2;
	}
	#hd .hd-skewtag:before {
		content: "";
		display: block;
		width: 200px;
		height: 45px;
		position: absolute;
		margin: 0 auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-transform: skewX(340deg);
		-moz-transform: skewX(340deg);
		-ms-transform: skewX(340deg);
		-o-transform: skewX(340deg);
		transform: skewX(340deg);
		border: 2px solid #8D0000;
		z-index: 0;
	}
	#hd .hd-list-dot li {
		font-size: 16px;
		padding-left: 15px;
		position: relative;
	}
	#hd .hd-list-dot li:before {
		content: "";
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 2px;
		background-color: white;
		position: absolute;
		left: 0;
		top: 9px;
	}
	#hd .txt_decoline {
		background: url('../img/deco-line.png') right bottom no-repeat;
	}
	#hd .txt_decolineflip {
		background: url('../img/deco-line-flip.png') left bottom no-repeat;
	}
	#hd .hd-frame:before{
		content:"";
		display: block;
		width: 100%;
		height: 100%;
		padding:3px;
		position: absolute;
		top: -3px;
		left: -3px;
		z-index: -1;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#800c20+0,5d0600+15,9a0d0e+54,480600+100 */
		background: #800c20; /* Old browsers */
		background: -moz-linear-gradient(left,  #800c20 0%, #5d0600 15%, #9a0d0e 54%, #480600 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #800c20 0%,#5d0600 15%,#9a0d0e 54%,#480600 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #800c20 0%,#5d0600 15%,#9a0d0e 54%,#480600 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800c20', endColorstr='#480600',GradientType=1 ); /* IE6-9 */
	}

	#hd .hd-pic01 {
		width: 100%;
		background: center center no-repeat;
		background-size: 1920px;
	}
/* ---------- Block ---------- */
	#hd .hd-mobile_on,
	#hd .hd-1023on {
		display: none;
	}

	#hd .fleft {
		float: left;
	}

	#hd .fright {
		float: right;
	}
	
	#hd .hd-w1920,
	#hd .hd-w1500,
	#hd .hd-w1400,
	#hd .hd-w1300,
	#hd .hd-w1200,
	#hd .hd-w1100,
	#hd .hd-w1000,
	#hd .hd-w800,
	#hd .hd-w500{
		position: relative;
		width: 90%;
		margin:0 auto;
		z-index: 2;
	}
	#hd .hd-w1920 {
		max-width: 1920px;
		width: 100%;
	}
	#hd .hd-w1500 {
		max-width: 1500px;
	}
	#hd .hd-w1400 {
		max-width: 1400px;
	}
	#hd .hd-w1300 {
		max-width: 1300px;
	}
	#hd .hd-w1200 {
		max-width: 1200px;
	}
	#hd .hd-w1100 {
		max-width: 1100px;
	}
	#hd .hd-w1000 {
		max-width: 1000px;
	}
	#hd .hd-w800{
		max-width: 800px;
	}
	#hd .hd-w500{
		max-width: 500px;
	}
	#hd .hd-ib{
		display: inline-block;
		vertical-align: middle;
		margin-left: -5px;
	}
	#hd .ib-top{
		vertical-align: top;
	}
	#hd .hd-col40 {
		width: 40%;
	}
	#hd .hd-col45 {
		width: 45%;
	}
	#hd .hd-col50 {
		width: 50%;
	}
	#hd .hd-col55 {
		width: 55%;
	}
	#hd .hd-col60 {
		width: 60%;
	}
	#hd .hd-col65 {
		width: 65%;
	}
	#hd .hd-col80 {
		width: 80%;
	}
	#hd .hd-col85 {
		width: 85%;
	}
	#hd .hd-bgflip {
		background: top left no-repeat;
		-webkit-transform: scaleX(-1);
		-moz-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);
	}
	#hd .hd-bgflip .hd-w1100,
	#hd .hd-bgflip .hd-w1200,
	#hd .hd-bgflip .hd-w1400 {
		-webkit-transform: scaleX(-1);
		-moz-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);
	}
/* ---------- Text ---------- */
	#hd h2.right{
		text-align: right;
	}
	#hd h2 span{
		/*color: #ffffff;*/
		color: #b80202;
		font-size: 60px;
		line-height:66px;
		background: #fff;
		background: #b80202;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}
	#hd h2 span.top{
		display: block;
		margin:0 0 -30px 5px;
	}
	#hd h2 span.left,
	#hd h2 span.center{
		display: inline-block;
		width: 258px;
		text-align: right;
		line-height: 35px;
		padding-bottom: 40px;
		margin-bottom: -40px;
		margin-right: 10px;
	}
	#hd h2 span.center{
		width: 145px;
		text-align: left;
		margin-left: 10px;
	}
	/*ie11 above fixed*/
	_:-ms-fullscreen,
	:root #hd h2 span{
	    background: transparent !important;
	}
	#hd h3 {
		font-family: 'xolonium', sans-serif;
		text-transform: uppercase;
		font-weight: 300;
		letter-spacing: 1px;
		font-size:  38px;
		line-height:  38px;
		margin-bottom: 20px;
		position: relative;
	}
	#hd h4,
	#hd h5,
	#hd button,
	#hd .hd-btn {
		font-family: "Fjalla One", sans-serif;
		text-transform: uppercase;
	}
	#hd h4{
		font-size: 27px;
		font-weight: normal;
		margin-bottom: 20px;
	}
	#hd h5 {
		font-size: 16px;
		font-weight: 300;
		margin: 10px 0;
	}
	#hd b{
		font-weight: bold;
	}
	#hd small {
		font-size: 18px;
		font-weight: 300;
		letter-spacing: 0.5px;
	}

	#hd a.hd-link {
		color: #C50012;
		text-decoration: underline;
		font-weight: 400;
	}
	#hd a.hd-link:hover {
		color: white;
	}

	#hd .txt-grey {
		color: #808080;
		font-weight: 400;
	}
	#hd .txt-red {
		color: #b80202;
		font-weight: 400;
	}

	#hd .txt-center{
		text-align: center;
	}
	#hd .txt-left{
		text-align: left;
	}
/* ---------- scrollUp ---------- */
	#scrollUp {
		position: fixed;
		right: 30px;
		bottom: 30px;
		width: 45px;
		height: 45px;
		text-align: center;
		cursor: pointer;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border: 2px solid #f8b942;
		opacity: 0;
	}
	#scrollUp.hd-show {
		opacity: 1;
	}
	#scrollUp svg {
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 5px;
		left: 0;
		fill: #f8b942;
		-webkit-transform: rotateZ(270deg);
		-moz-transform: rotateZ(270deg);
		-ms-transform: rotateZ(270deg);
		-o-transform: rotateZ(270deg);
		transform: rotateZ(270deg);
		transition: all 0.3s;
	}
	#scrollUp:hover {
		background-color: #f8b942;
	}
	#scrollUp:hover svg {
		fill: #1f1b16;
	}
/* ---------- lightbox ---------- */
	#hd_lightbox {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		z-index: 10;
	}
	#hd .hd_filter {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
	}
	#hd .hd_box {
		width: 1000px;
		height: 480px;
		background: #232323;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		padding: 35px 60px;
		box-sizing: border-box;
	}
	#hd .hd_close {
		position: absolute;
		top: 25px;
		right: 20px;
		cursor: pointer;
	}
	#hd .hd_close>span {
		display: block;
		width: 20px;
		height: 3px;
		background: #777777;
		-webkit-border-radius: 1.5px;
		-moz-border-radius: 1.5px;
		border-radius: 1.5px;
	}
	#hd .hd_close>span:first-child {
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}
	#hd .hd_close>span:last-child {
		-webkit-transform: rotateZ(-45deg) translate(2px, -2px);
		-moz-transform: rotateZ(-45deg) translate(2px, -2px);
		-ms-transform: rotateZ(-45deg) translate(2px, -2px);
		-o-transform: rotateZ(-45deg) translate(2px, -2px);
		transform: rotateZ(-45deg) translate(2px, -2px);
	}
	#hd .hd_box>img {
		position: absolute;
		right: 40px;
		bottom: 60px;
	}
	#hd .hd_box iframe {
		width: 100%;
		height: 100%;
	}
/* ---------- transition ---------- */
	#scrollUp,
	#hd a.hd-link,
	#hd .hd-sec-overview .hd-menu li.hd-active,
	#hd .hd-sec-mode h4,
	#hd .hd-supremefx li,
	#hd .hd-sec-fan .fan_cover li{
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}

/* ------------ SEC_KV ------------ */
	#hd #kv{
		position: relative;
		text-align: center;
		margin-top: 20px;
		/*padding-left: 9%;*/
	}
	#hd #kv .kvbox{
		position: relative;
		overflow: hidden;
	}
	#hd #kv h1{
	    color: #fff !important;
	    font-family: "Xolonium";
	    font-size: 40px !important;
	    font-weight: 500;
	    padding: 20px;
	    text-transform: uppercase;
	}
	@media screen and (max-width: 500px) {
	#hd #kv h1{
	    font-size: 30px !important;
	}
	}
	#hd #kv img{
		margin:0;
	}
	#hd #kv_light{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
	}
	#hd #kv .hd-w500{
		position: absolute;
		top: 24%;
		left: 51%;
		text-align: left;
		z-index: 2;
	}
	#hd #kv .hd-w500 a{
		width: auto;
		margin-top: -5px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		padding:10px 20px;
		cursor:pointer;
	}
	/*#hd #kv .hd-w500 a:after{
		content:'';
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px 0 4px 6px;
		border-color: transparent transparent transparent #b80202;
		margin-left: 10px;
		margin-top: -2px;
	}*/
/* ------------ SEC_SPEC ------------ */
	#hd #specs{
		padding:50px 0;
	}
	#hd #specs .spec-main {
		width: 100%;
		height: 0;
		padding-bottom: 72%;
		background: url('../img/spec/spec.png') center center no-repeat;
		background-size: contain;
		/*margin-bottom: 0;*/
	}
	#hd #specs .spec-main.glow {
		background-image: url('../img/spec/spec_aura.png');
		-webkit-transition: background .25s ease;
		   -moz-transition: background .25s ease;
		    -ms-transition: background .25s ease;
		     -o-transition: background .25s ease;
		        transition: background .25s ease;
	}
	#hd #specs .hd-dots{
		text-align: center;
		position: absolute;
		left: 0;right: 0;
		bottom: 40px;
		z-index: 2;
	}
	#hd #specs .hd-dots li{
		display: inline-block;
		width: 15px;
		height: 10px;
		border-radius: 20px;
		margin:10px;
		background-color: #373737;
		cursor: pointer;
	}
	#hd #specs .hd-dots li.active{
		background-color: #b80202;
	}
	#hd #specs ol {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		counter-reset: mycounter;
	}
	#hd #specs ol li{
		position: absolute;
		font-size: 16px;
	}
	#hd #specs ol li:before{
		counter-increment: mycounter;
		content: counter(mycounter);
		display: none;
		width: 24px;
		height: 24px;
		line-height:24px;
		text-align: center;
		border-radius: 15px;
		border: 2px solid #8D0000;
		position: absolute;
		top: 0;
		left: -40px;
		z-index: 2;
	}
	#hd #specs ol li p {
		margin-bottom: 10px;
		letter-spacing: 0;
	}
	#hd #specs ol li small{
		display: block;
		line-height: 14px;
		margin:5px 0 10px;
	}
	#hd #specs ol li b{
		font-weight: 400;
	}

	/* spec li positions*/
		#hd #specs ol li:nth-child(-n+14){
			left: 10%;
		}
		#hd #specs ol li:nth-child(1){top: 6%;}
		#hd #specs ol li:nth-child(2){top:9.5%;}
		#hd #specs ol li:nth-child(3){top:12.5%;}
		#hd #specs ol li:nth-child(4){top:16%;}
		#hd #specs ol li:nth-child(5){top:20%;}
		#hd #specs ol li:nth-child(6){top:24.5%;}
		#hd #specs ol li:nth-child(7){top:28%;}
		#hd #specs ol li:nth-child(8){top:36%;}
		#hd #specs ol li:nth-child(9){top:43%;}
		#hd #specs ol li:nth-child(10){top:45.5%;}
		#hd #specs ol li:nth-child(11){top:48%;}
		#hd #specs ol li:nth-child(12){top:54%;}
		#hd #specs ol li:nth-child(13){top:58%;}
		#hd #specs ol li:nth-child(14){top:78.5%;}
		
		#hd #specs ol li:nth-child(n+15){
			left: 74%;
		}
		#hd #specs ol li:nth-child(15){top:15%;}
		#hd #specs ol li:nth-child(16){top:25%; max-width: 250px;}
		#hd #specs ol li:nth-child(17){top:33%;}
		#hd #specs ol li:nth-child(18){top:43%;}
		#hd #specs ol li:nth-child(19){top:53.2%;}
		#hd #specs ol li:nth-child(20){top:58%;}
		#hd #specs ol li:nth-child(21){top:63%;}
		#hd #specs ol li:nth-child(22){top:69%;}
		#hd #specs ol li:nth-child(23){top:73%;}
		#hd #specs ol li:nth-child(24){top:76%;}
/* ------------ SEC_LIGHTING ------------ */
	#hd .hd-sec-lighting {
	    position: relative;
	    z-index: -2;
	    margin: 0 auto;
	    padding-bottom: 30px;
	}
@media screen and (max-width: 1050px) {
	#hd .hd-sec-lighting {
	    padding-bottom: 100px;
	}
}
@media screen and (max-width: 980px) {
	#hd .hd-sec-lighting {
	    padding-bottom: 300px;
	}
}
@media screen and (max-width: 850px) {
	#hd .hd-sec-lighting {
	    padding-bottom: 450px;
	}
}
@media screen and (max-width: 700px) {
	#hd .hd-sec-lighting {
	    padding-bottom: 50px;
	}
}



	#hd .hd-sec-lighting .text{
	    margin-bottom: 80px;
	}

@media screen and (min-width: 2300px) {
	#hd .hd-sec-lighting .hd-lighting img{
	    max-width: 2400px !important;
	    width: 2400px !important;
	}
}


@media screen and (max-width: 1400px) {
	#hd .hd-sec-lighting .text{
	    margin-bottom: 20px;
	}
}




	#hd .hd-lightingbox {
	    position: relative;
	    width: 100%;
	}
	#hd .hd-lightingbox:after {
	    clear: both;
	    content: '';
	    display: block;
	}
	#hd .hd-lighting {
	    height: 100%;
	    width: 100%;
	    position: relative;
	    overflow: hidden;
	}
@media screen and (max-width: 700px) {
	#hd .hd-lighting {
	    width: 175%;
	}
}
	#hd .hd-lighting:before{
		content:'';
		display: block;
		width: 100%;
		height: 3px;
		position: absolute;
		top: 0;
		left: 0;
		background:#000;
		z-index: 3;
	}
	#hd .hd-lightingbox-block {
	    clear: both;
	    content: '';
	    display: block;
		width: 100%;
		height: 2px;
		position: absolute;
		bottom: -2px;
		left: 0;
		background: #000;
	}

	#hd .hd-sec-lighting .hd-col55 {
	    box-sizing: border-box;
	    position: relative;
	    z-index: 2;
	}

	#hd .hd-sec-lighting h3 {
	    margin-top: 50px;
	    margin-bottom: 30px;
	}
	#hd .hd-controls-wrapper {
		position: absolute;
		width: 44%;
		max-width: 620px;
		left: 54%;
		top: 25%;
		box-sizing: border-box;
		padding: 0 20px;
	}
@media screen and (max-width: 1250px) {
	#hd .hd-controls-wrapper {
		top: 7%;
	}
}
@media screen and (max-width: 700px) {
	#hd .hd-controls-wrapper {
		width: 100%;
		position: relative;
		left: auto;
		top: auto;
	}
}



	#hd .hd-controls {
	    position: relative;
	    text-align: left;
	    display: inline-block;
	    min-width: 400px;
	}
@media screen and (max-width: 1350px) {
	#hd .hd-controls {
	    min-width: 300px;
	}
}
@media screen and (max-width: 1100px) {
	#hd .hd-controls {
	    min-width: 250px;
	}
}
@media screen and (max-width: 980px) {
	#hd .hd-controls {
	    min-width: 100%;
	    margin-bottom: 20px;
	}
}

	#hd .hd-controls li {
	    width: 32%;
	    display: inline-block;
	    vertical-align: top;
	    max-width: 130px;
	    cursor: pointer;
	    opacity: .5;
	    text-align: center;
	    font-weight: normal;
	    font-family: "MyriadPro";
	    font-size: 18px;
	}
	#hd .hd-controls li:hover,
	#hd .hd-controls li.hd-active {
	    opacity: 1;
	}
	#hd .hd-controls li img {
	    display: block;
	    margin: 20px auto 10px;
	}
	#hd .hd-controls small {
	    width: 113px;
	    height: 65px;
	}
	#hd .hd-controls li b{
	    font-weight: normal;
	}

	.colorpicker-wrapper {
		float: right;
	}

	#colorpicker {
		float: right;
	}
	#color,
	#color2,
	.greybg {
	    width: 100%;
	    height: 0;
	    padding-bottom: 133%;
	    margin: 1px;
	    position: absolute;
	    top: 1px;
	    left: 1px;
	    right: 1px;
	    bottom: 1px;
	    z-index: -1;
	}
	.greybg {
	    background-color: #555555;
	    z-index: -2;
	}

	#color.hd-rainbow,
	#color2.hd-rainbow{
		padding-bottom: 1000%;
		background: url(../img/lighting/rainbow.jpg) 0 0 repeat;
	}
	.hd-comet {
	    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,545454+39,ff0000+54,ff0000+60,545454+73,545454+100 */
	    background: #000;/* Old browsers */
	    background: linear-gradient(45deg, #000 0%, #000 35%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 55%, #000 65%, #000 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#000', GradientType=1);/* IE6-9 fallback on horizontal gradient */
}
	/*
	.hd-flash {
	    background: #fff;
	    -webkit-animation: flash 3s infinite;
	    -o-animation: flash 3s infinite;
	    animation: flash 3s infinite;
	}
	*/
/*
	.hd-flash {
	    background: #555555;
	    background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
	    -webkit-animation: comet 3s infinite;
	    -o-animation: comet 3s infinite;
	    animation: comet 3s infinite;
	}
	#hd #color ul.hd-wave,
	#hd #color2 ul.hd-wave{
		display: block;
	}
	#hd #color .hd-wave li:first-child,
	#hd #color2 .hd-wave li:first-child{
		display: block;
		width: 140%;	
		height: 140%;	
		background: #555;
		box-shadow: 0 0 50px 50px #555;
		transform-origin: right bottom;
	    -webkit-animation: wave 10s infinite;
	    -o-animation: wave 10s infinite;
	    animation: wave 10s infinite;
	}
	#hd #color .hd-yoyo,
	#hd #color2 .hd-yoyo{
	    background: #555;
	    background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%);
	    -webkit-animation: yoyo 5s infinite;
	    -o-animation: yoyo 5s infinite;
	    animation: yoyo 5s infinite;
	}
*/
	
	#hd #color ul li,
	#hd #color2 ul li{
	    width: 15%;
	    height: 70%;
	    position: absolute;
	    background: radial-gradient(circle, #ffffff, rgba(255, 255, 255,0), rgba(255, 255, 255,0));
		display: none;
		transform: skew(0deg) rotate(-45deg);
	}
	#hd #color ul,
	#hd #color2 ul{
	    display: none;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
		background-color: transparent;
	}
	/*
	#hd #color ul.hd-flash,
	#hd #color2 ul.hd-flash{
		height: 200%;
	}
	*/
	#hd #color .hd-starry_night li,
	#hd #color2 .hd-starry_night li{
		display: block;
	}
	#hd #color .hd-starry_night li:nth-child(1),
	#hd #color2 .hd-starry_night li:nth-child(1){
	    right: 27%;
	    top: -8%;
	    animation: 	starryNight 2s 0s infinite,
	    			colorrun 2s 0s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(2),
	#hd #color2 .hd-starry_night li:nth-child(2){
	    right: 40%;
	    top: 0%;
	    animation: 	starryNight 2s 1s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(3),
	#hd #color2 .hd-starry_night li:nth-child(3){
	    right: 63%;
	    top: 0%;
	    animation: 	starryNight 2s 1.5s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(4),
	#hd #color2 .hd-starry_night li:nth-child(4){
	    right: 74%;
	    top: 7%;
	    animation: 	starryNight 2s .5s infinite,
	    			colorrun 2s infinite;
	}
	/*
	#hd #color .hd-starry_night li:nth-child(5),
	#hd #color2 .hd-starry_night li:nth-child(5){
	    right: 50%;
	    top: 54%;
	    animation: 	starryNight 2s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(6),
	#hd #color2 .hd-starry_night li:nth-child(6){
	    right: 5%;
	    top: 40%;
	    animation: 	starryNight 1.5s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(7),
	#hd #color2 .hd-starry_night li:nth-child(7){
	    right: 27%;
	    top: 15%;
	    animation: 	starryNight 1.3s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(8),
	#hd #color2 .hd-starry_night li:nth-child(8){
	    right: 65%;
	    top: 35%;
	    animation: 	starryNight 2s 1.5s infinite,
	    			colorrun 2s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(9),
	#hd #color2 .hd-starry_night li:nth-child(9){
	    right: 52%;
	    top: 52%;
	    animation: 	starryNight 1.4s infinite,
	    			colorrun 2.5s infinite;
	}
	#hd #color .hd-starry_night li:nth-child(10),
	#hd #color2 .hd-starry_night li:nth-child(10){
	    right: 62%;
	    top: 17%;
	    animation: 	starryNight 1.7s infinite,
	    			colorrun 1.8s infinite;
	}
	*/
/* ------------ rgbheader ------------ */
	#hd .hd-sec-rgbheader{
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 60% center;
		padding:50px 0 10%;
	}
	#hd .hd-sec-rgbheader .fleft{
		position: relative;
		z-index: 2;
		padding-right: 4%;
	}
	#hd .hd-sec-rgbheader .fleft:before{
		content:'';
		display: block;
		width: 200%;
		max-width: 800px;
		height: 0;
		padding-bottom: 134%;
		background: url(../img/lighting/bg-lighting2.png) 0 0 no-repeat;
		background-size: contain;
		position: absolute;
		left: -87%;
		top: 50%;
		z-index: -1;
	}
	#hd .hd-sec-rgbheader .fright{
		position: relative;
		margin-left: -5%;
		margin-right: -5%;
	}
	#hd .hd-sec-rgbheader .hd-description li{
		position: absolute;
	}
	#hd .hd-sec-rgbheader .hd-description li:nth-child(1){
		top: 7%;
		left: 58%;
	}
	#hd .hd-sec-rgbheader .hd-description li:nth-child(2){
		top: 102%;
		left: 23%;
	}
	#hd .hd-sec-rgbheader .hd-description li:nth-child(3){
		top: 102%;
		left: 50%;
	}
/* ------------ sdk ------------ */
	#hd .hd-sec-sdk h3 + p{
		margin-bottom: 70px;
	}
	#hd .hd-sec-sdk .hd-col50.left{
		vertical-align: top;
		padding-right: 5%;
	}
	#hd .hd-sec-sdk .hd-col50.right{
		vertical-align: top;
		padding-left: 5%;
	}
	#hd .hd-sec-sdk .hd-col50.left > img{
		-webkit-transform: perspective(660px) rotateY(10deg);
		   -moz-transform: perspective(660px) rotateY(10deg);
		    -ms-transform: perspective(660px) rotateY(10deg);
		     -o-transform: perspective(660px) rotateY(10deg);
		        transform: perspective(660px) rotateY(10deg);
	}
	#hd .hd-sec-sdk .hd-col50.right > img{
		-webkit-transform: perspective(660px) rotateY(-10deg);
		   -moz-transform: perspective(660px) rotateY(-10deg);
		    -ms-transform: perspective(660px) rotateY(-10deg);
		     -o-transform: perspective(660px) rotateY(-10deg);
		        transform: perspective(660px) rotateY(-10deg);
	}
	#hd .hd-sec-sdk img + p{
		position: relative;
		margin-top: -70px;
		z-index: 2;
	}
	#hd .hd-sec-sdk .hd-col50.left p{
		padding:0 15% 0 5%;
	}
	#hd .hd-sec-sdk .hd-col50.right p{
		padding:0 5% 0 15%;
	}
	#hd #sdk_logo{
		display: block;
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
	}
/* ------------ sync ------------ */
	#hd .hd-sec-sync {
	    position: relative;
	    padding-top: 50px;
	}
	#hd .hd-sec-sync h3{
	    margin-bottom: 50px;
	}
	#hd .title_logo {
	    display: inline-block;
	    vertical-align: middle;
	    width: 120px;
	    height: 120px;
	    margin: 10px;
	}
	#hd .hd-sec-sync .hd-col55 {
	    margin-left: auto;
	    padding-bottom: 25%;
	}
	#hd .hd-sec-sync .hd-bg{
		width: 100%;
		height: 0;
		padding-bottom: 41%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		margin-left: auto;
		margin-right: auto;
	}
	#hd .hd-sec-sync .hd-bg img{
		width: 100%;
		max-width: none;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#hd .hd-sec-sync .hd-bg img:first-child{
		-webkit-animation: colorrun 3s infinite;
		   -moz-animation: colorrun 3s infinite;
		    -ms-animation: colorrun 3s infinite;
		     -o-animation: colorrun 3s infinite;
		        animation: colorrun 3s infinite;
	}
	#hd .hd-sec-sync span{
		display: block;
		width: 100%;
		padding-bottom: 41%;
	}
/* ------------ oled ------------ */
	#hd .hd-sec-oled{
		padding:50px 0;
	}
	#hd .hd-sec-oled .hd-col40 img{
		width: 200px;
	}
	#hd .hd-sec-oled .hd-col70{
		margin-right: -20%;
		position: relative;
	}
	#hd .hd-sec-oled .hd-col70 .hd-window{
		width: 14%;
		position: absolute;
		top: 53.25%;
		left: 19%;
		z-index: -1;
		-webkit-transform: skew(-12deg) rotate(5deg);
		   -moz-transform: skew(-12deg) rotate(5deg);
		    -ms-transform: skew(-12deg) rotate(5deg);
		     -o-transform: skew(-12deg) rotate(5deg);
		        transform: skew(-12deg) rotate(5deg);
	}

/* ------------ SEC_CONNECTIVITY ------------ */
	#hd #connectivity{
		padding-top: 100px;
		padding-bottom: 30px;
	}
	#hd #connectivity h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 20%;
		background: url(../img/title/title_connectivity.jpg) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
/* ------------ wifi ------------ */
	#hd .hd-sec-wifi{
		padding-bottom: 50px;
	}
	#hd .hd-sec-wifi .fright{
		margin-left: -10%;
		margin-right: -11%;
		position: relative;
	}
	#hd .hd-sec-wifi .fright .hd-num{
		display: none;
	}
	#hd .hd-sec-wifi h3{
		font-size: 28px;
		padding-bottom: 20px;
		position: relative;
	}
	#hd .hd-sec-wifi p{
		margin-bottom: 15px;
	}
	#hd .hd-sec-wifi .fleft{
		margin-top: 10%;
		padding-right: 5%;
		position: relative;
		z-index: 2;
	}
	#hd .hd-sec-wifi .fleft h3:after{
		content:'';
		display: block;
		position: absolute;
		width: 28%;
		height: 1px;
		background-color: #940310;
		bottom: 0;
		left: 100%;
		z-index: -1;
	}
	#hd .hd-sec-wifi .fright:after{
		content:'';
		display: block;
		position: absolute;
		width: 2%;
		height:41%;
		border-top:1px solid #940310;
		border-right: 2px solid #940310;
		top: 29%;
		left: 34.5%;
		-webkit-transform: skew(45deg);
		   -moz-transform: skew(45deg);
		    -ms-transform: skew(45deg);
		     -o-transform: skew(45deg);
		        transform: skew(45deg);
	}


	#hd .hd-sec-wifi .hd-description li:nth-child(1){
		width: 68%;
		margin-top: -5%;
	}
	#hd .hd-sec-wifi .hd-description li:nth-child(1) h3:after{
		content:'';
		display: block;
		position: absolute;
		width: 59%;
		height:280%;
		border-bottom:1px solid #940310;
		border-right: 2px solid #940310;
		bottom: 0;
		left: 50%;
		-webkit-transform: skew(-30deg);
		   -moz-transform: skew(-30deg);
		    -ms-transform: skew(-30deg);
		     -o-transform: skew(-30deg);
		        transform: skew(-30deg);
	}
	#hd .hd-sec-wifi .hd-description li:nth-child(2) h3:after{
		content:'';
		display: block;
		position: absolute;
		width: 37%;
		height:740%;
		border-bottom:1px solid #940310;
		border-right: 2px solid #940310;
		bottom: 0;
		left: 38%;
		-webkit-transform: skew(-30deg);
		   -moz-transform: skew(-30deg);
		    -ms-transform: skew(-30deg);
		     -o-transform: skew(-30deg);
		        transform: skew(-30deg);
	}
/* ------------ languard ------------ */
	#hd .hd-sec-languard .fleft{
		padding-right: 2%;
	}
	#hd .hd-sec-languard .fright{
		position: relative;
		margin-left: -5%;
		max-width: 595px;
		padding-right: 60px;
	}
	#hd .hd-sec-languard .fright li{
		position: absolute;
		left: 78%;
		min-width: 120px;
	}
	#hd .hd-sec-languard .fright li:first-child{
		top: 19%;
	}
	#hd .hd-sec-languard .fright li:last-child{
		top: 31%;
	}
/* ------------ gamefirst ------------ */
	#hd .hd-sec-gamefirst{
		padding:70px 0;
	}
	#watchv,
	#gamevideo {
	    display: block;
	    width: 186px;
	    padding: 12px 22px;
	    margin-top: -30px;
	    margin-bottom: 80px;
	    border-radius: 5px;
	    overflow: hidden;
	    position: relative;
	    z-index: 2;
	    cursor: pointer;
	}
	#gamevideo {
	    margin: -20px auto;
	}
	#watchv:hover,
	#gamevideo:hover {
	    box-shadow: 0 0 0 1px #8D0000 inset;
	}
	#watchv:before,
	#gamevideo:before {
	    content: "";
	    display: block;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#910000+15,630000+38,b40000+66,800000+82,450000+100 */
	    background: #910000;
	    /* Old browsers */
	    background: -moz-linear-gradient(-20deg, #910000 15%, #630000 38%, #b40000 66%, #800000 82%, #450000 100%);
	    /* FF3.6-15 */
	    background: -webkit-linear-gradient(-20deg, #910000 15%, #630000 38%, #b40000 66%, #800000 82%, #450000 100%);
	    /* Chrome10-25,Safari5.1-6 */
	    background: linear-gradient(160deg, #910000 15%, #630000 38%, #b40000 66%, #800000 82%, #450000 100%);
	    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910000', endColorstr='#450000', GradientType=1);
	    /* IE6-9 fallback on horizontal gradient */
	}
	#watchv:hover:before,
	#gamevideo:hover:before {
	    opacity: .7;
	}
	#watchv h4,
	#gamevideo h4 {
	    margin: 0;
	    font-weight: normal;
	}
	#watchv.v-open h4 span.hd-open,
	#watchv h4 span.hd-close {
	    display: none;
	}
	#watchv h4 span.hd-open,
	#watchv.v-open h4 span.hd-close {
	    display: inline;
	}
	#hd .hd-videobox2 {
	    width: 100%;
	    height: 0;
	    overflow: hidden;
	    position: relative;
	}
	#hd .hd-videobox2.v-open {
	    height: auto;
	}
	#hd .hd-videobox2 video {
	    top: 0;
	    left: 0;
	    min-width: 100%;
	    min-height: 100%;
	    width: 100%;
	    /*width: auto;*/
	    height: auto;
	    background: url('../img/video_poster.jpg') no-repeat;
	    background-size: cover;
	}
/* ------------ triple ------------ */
	#hd .hd-sec-triple{
		position: relative;
		z-index: 3;
		padding:50px 0;
	}
	#hd .hd-sec-triple .hd-w800{
		margin-bottom: 70px;
	}
	#hd .hd-sec-triple .fleft{
		position: relative;
	}
	#hd .hd-sec-triple .fleft .hd-num{
		display: none;
	}
	#hd .hd-sec-triple .fleft img{
		margin-top: 4.2%;
	}
	#hd .hd-sec-triple li{
		position: relative;
		margin-bottom: 30px;
	}
	#hd .hd-sec-triple li:last-child{
		margin-top: -10.7%;
	}
	#hd .hd-sec-triple li h4{
		background-position: left bottom;
		padding-bottom: 10px;
		margin-bottom: 10px;
		font-size: 32px;
		background-size: contain;
		position: relative;
	}
	#hd .hd-sec-triple li h4:after{
		content:'';
		display: block;
		border-bottom: 1px solid #92000e;
		border-right: 2px solid #92000e;
		-webkit-transform: skew(-30deg);
		   -moz-transform: skew(-30deg);
		    -ms-transform: skew(-30deg);
		     -o-transform: skew(-30deg);
		        transform: skew(-30deg);
		position: absolute;
		top: 100%;
	}
	#hd .hd-sec-triple li:nth-child(1) h4:after{
		width: 29%;
		height: 31px;
		left: -30.5%;
	}
	#hd .hd-sec-triple li:nth-child(2) h4:after{
		width: 60%;
		height: 31px;
		left: -61.5%;
	}
	#hd .hd-sec-triple li p{
		margin-bottom: 10px;
	}
	#hd .hd-sec-triple li:first-child > img{
		width: 90%;
	}
	#hd .hd-sec-triple li:last-child > img{
		margin-left: 0;
	}
	#hd .hd-sec-triple .hd-btn-more{
		position: absolute;
		bottom: 5%;
		right: 2%;
		width: 130px;
		background: url(../img/connectivity/more.png) center center no-repeat;
		background-size: contain;
		z-index: 2;
	}
	#hd #triple_lightbox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.4);
		z-index: 99;
		display: none;
	}
	#hd #triple_lightbox .hd-box{
		width: 1200px;
		height: 600px;
		max-width: 90%;
		max-height: 80vh;
		position: absolute;
		top: 50px;right: 0;bottom: 0;left: 0;
		margin:auto;
		padding:10% 5%;
		background: #000 url('../img/bg-tri.png') center center no-repeat;
		background-size: 150%;
		box-shadow: 0 0 50px 2px rgba(255,255,255,.5);
		z-index: 100;
	}
	#hd #triple_lightbox .hd-box .hd-col50{
		padding:0 5%;
	}
	#hd #triple_lightbox .hd-box p{
		margin-bottom: 30px;
	}

	#hd #triple_lightbox ol {
		counter-reset: mycounter;
		list-style: none;
	}
	#hd #triple_lightbox ol li:nth-child(n){
		font-size: 16px;
		margin:5px 0;
		position: relative;
		padding-left: 20px;
		font-weight: 300;
	}
	#hd #triple_lightbox ol li:before{
		counter-increment: mycounter;
		content: counter(mycounter)".";
		display: block;
		color:#b80202;
		font-family: "ROGFontsv", sans-serif;
		font-size: 24px;
		width: 24px;
		height: 24px;
		line-height:24px;
		text-align: center;
		position: absolute;
		top: -10px;
		left: -5px;
	}
	#hd #triple_lightbox .closebox{
		position: absolute;
		top: 0;
		right: 40px;
		font-family: "ROGFontsv", sans-serif;
		font-size: 50px;
		color:#b80202;
		cursor: pointer;
	}
/* ------------ vroc ------------ */
	#hd .hd-sec-vroc{
		padding:50px 0;
		background-size: contain;
	}
	#hd .hd-sec-vroc .fleft{
		margin-left: -10%;
		margin-right: -5%;
	}
	#hd .hd-sec-vroc .fright{
		margin-top:7%;
		position: relative;
		z-index: 2;
	}
/* ------------ logos ------------ */
	#hd .hd-sec-logos{
		padding:5% 0;
	}
	#hd .hd-sec-logos .hd-col50{
		padding:0 5%;
	}
	#hd .hd-sec-logos img{
		margin-bottom: 30px;
	}

/* ------------ SEC_PERFORMANCE ------------ */
	#hd #performance{
		padding-top: 100px;
	}
	#hd #performance h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 20%;
		background: url(../img/title/title_performance.jpg) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
/* ------------ overview ------------ */
	#hd .hd-sec-overview{
		padding:50px 0 70px;
	}
	#hd .hd-sec-overview .hd-menu{
		width: 100%;
		margin-bottom: 30px;
	}
	#hd .hd-sec-overview .hd-menu ul{
		display: flex;
		justify-content: space-around;
		padding:30px 0;
	}
	#hd .hd-sec-overview .hd-menu li{
		width: 17%;
		color:#808080;
		background-color: #000000;
		cursor: pointer;
		-webkit-transform: skewX(-40deg);
		   -moz-transform: skewX(-40deg);
		    -ms-transform: skewX(-40deg);
		     -o-transform: skewX(-40deg);
		        transform: skewX(-40deg);
		position: relative;
	}
	#hd .hd-sec-overview .hd-menu li:before{
		content:'';
		width:calc(100% + 4px);
		height:calc(100% + 2px);
		position: absolute;
		top: -1px;
		left: -2px;
		background: #111111;
		background: -moz-linear-gradient(45deg, #111111 0%, #bbc3d1 29%, #000000 51%, #bbc3d1 78%, #131313 100%);
		background: -webkit-linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);
		background: linear-gradient(45deg, #111111 0%,#bbc3d1 29%,#000000 51%,#bbc3d1 78%,#131313 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#131313',GradientType=1 );
		z-index: -1;
	}
	#hd .hd-sec-overview .hd-menu li:after{
		content:'';
		width:100%;
		height:100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000000;
		z-index: -1;
	}
	#hd .hd-sec-overview .hd-menu li h4{
		font-size: 21px;
		line-height: 27px;
		color:inherit;
		margin-bottom: 0;
		padding:13px 0;
		text-transform: none;
		-webkit-transform: skewX(40deg);
		   -moz-transform: skewX(40deg);
		    -ms-transform: skewX(40deg);
		     -o-transform: skewX(40deg);
		        transform: skewX(40deg);
	}
	#hd .hd-sec-overview .hd-menu li:hover{
		color:white;
	}
	#hd .hd-sec-overview .hd-menu li.hd-active{
		background-color: #37000a;
		color:white;
	}
	#hd .hd-sec-overview .hd-menu li.hd-active:before,
	#hd .hd-sec-overview .hd-menu li.hd-active:after{
		display: none;
	}
	
	#hd .hd-details .hd-col60{
		margin:0 auto 70px;
		float:none;
	}
	#hd .hd-details .hd-detail{
		display: none;
	}
	#hd .hd-details .hd-open{
		display: block;		
		-webkit-animation: showfrombottom .8s ease;
		   -moz-animation: showfrombottom .8s ease;
		    -ms-animation: showfrombottom .8s ease;
		     -o-animation: showfrombottom .8s ease;
		        animation: showfrombottom .8s ease;
	}
	#hd .hd-details img.hd-col50{
		display: inline-block;
		vertical-align: middle;
		margin:30px 0;
	}
	#hd .hd-details div.hd-col50{
		display: inline-block;
		vertical-align: middle;
		margin-left: -8px;
		padding-left: 80px;
	}
/* ------------ fan ------------ */
	#hd .hd-sec-fan{
		padding:90px 0;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#hd .hd-sec-fan .fleft{
		position: relative;
	}
	#hd .hd-sec-fan .fan_cover li{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin:0 auto;
		opacity: 0;
	}
	#hd .hd-sec-fan .fan_cover li.hd-active{
		opacity: 1;
	}
	#hd .hd-sec-fan h3 + p{
		margin-bottom: 70px;
	}
	#hd .hd-sec-fan .hd-filter{
		padding:6% 0;
	}
	#hd .hd-sec-fan .hd-filter li{
		display: inline-block;
		vertical-align: top;
		width: 25%;
		margin:20px 0 20px -5px;
		cursor: pointer;
	}
	#hd .hd-sec-fan li p{
		margin-bottom: 0;
	}
	#hd .hd-sec-fan .hd-content{
		position: relative;
		background: url(../img/bg-glow.jpg) center center no-repeat;
		background-size: 180%;
		padding:50px 16%;
	}
	#hd .hd-sec-fan .hd-content:before{
		content:'';
		display: block;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -2px;
		background: #bbc3d1;
		background: -moz-linear-gradient(15deg, #bbc3d1 0%, #131313 51%, #131313 51%, #bbc3d1 100%);
		background: -webkit-linear-gradient(15deg, #bbc3d1 0%,#131313 51%,#131313 51%,#bbc3d1 100%);
		background: linear-gradient(15deg, #bbc3d1 0%,#131313 51%,#131313 51%,#bbc3d1 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbc3d1', endColorstr='#bbc3d1',GradientType=1 );
		z-index: -1;
	}
	#hd .hd-sec-fan .hd-content li{
		display: none;
	}
	#hd .hd-sec-fan .hd-content li.hd-active{
		display: block;
	}


	#hd .fan_icon{
		background-image: url(../img/performance/fan/spritesheet.png);
		background-repeat: no-repeat;
		display: block;
		width: 47px;
		height: 47px;
		margin:0 auto 5px;
		opacity: .8;
	}
	#hd .hd-sec-fan li:hover .fan_icon{
		opacity: 1;
	}
	/* icon position */
		#hd .fan_icon.fan_temp{
	    	background-position: -119px -119px;
		}
		#hd .hd-active .fan_icon.fan_temp{
			background-position: -176px -119px;
		}
		#hd .fan_icon.fan_pump{
			background-position: -119px -176px;
		}
		#hd .hd-active .fan_icon.fan_pump{
			background-position: -176px -176px;
		}
		#hd .fan_icon.fan_pwm{
			background-position: -5px -5px;
		}
		#hd .hd-active .fan_icon.fan_pwm{
			background-position: -62px -5px;
		}
		#hd .fan_icon.fan_card{
			background-position: -5px -62px;
		}
		#hd .hd-active .fan_icon.fan_card{
			background-position: -62px -62px;
		}
		#hd .fan_icon.fan_protection{
			background-position: -5px -176px;
		}
		#hd .hd-active .fan_icon.fan_protection{
			background-position: -62px -176px;
		}
		#hd .fan_icon.fan_inout{
			background-position: -5px -119px;
		}
		#hd .hd-active .fan_icon.fan_inout{
			background-position: -62px -119px;
		}
		#hd .fan_icon.fan_flow{
			background-position: -119px -62px;
		}
		#hd .hd-active .fan_icon.fan_flow{
			background-position: -176px -62px;
		}
		#hd .fan_icon.fan_sensor{
			background-position: -119px -5px;
		}
		#hd .hd-active .fan_icon.fan_sensor{
			background-position: -176px -5px;
		}
/* ------------ ddr4 ------------ */
	#hd .hd-sec-ddr4{
		padding:90px 0;
	}
	#hd .hd-sec-ddr4 .fleft{
		margin-left: -20%;
		margin-right: -10%;
	}
	#hd .hd-sec-ddr4 .fright{
		position: relative;
		z-index: 2;
	}
	#hd .hd-sec-ddr4 .hd-tagbox{
		margin-left: 0;
	}
/* ------------ ocdesign ------------ */
	#hd .hd-sec-ocdesign{
		padding:90px 0 50px;
		background-position: right top;
		background-repeat: no-repeat;
	}
	#hd .hd-sec-ocdesign h3{
		margin-bottom: 70px;
	}
	/*#hd .hd-sec-ocdesign figure{
		margin-bottom: 30px;
	}*/
	#hd .hd-sec-ocdesign .hd-tagbox{
		width: 95px;
		padding-top: 25px;
		padding-bottom: 10px;
		margin-right: 20px;
		margin-top: 20px;
	}
	#hd .hd-sec-ocdesign .hd-tagbox p{
		font-size: 30px;
		margin-bottom: 3px;
	}
	#hd .hd-sec-ocdesign .hd-tagbox span{
		font-size: 60px;
		font-weight: 300;
		padding-right: 5px;
	}
	#hd .hd-sec-ocdesign .hd-tagbox small{
		font-size: 18px;
		font-weight: 300;
	}
	#hd .hd-sec-ocdesign .hd-tagbox + .hd-col80{
		max-width: calc(100% - 115px);
	}

	#hd .hd-sec-ocdesign .bar-red,
	#hd .hd-sec-ocdesign .bar-grey{
		display: inline-block;
		height: 8px;
		margin-right: 20px;
		-webkit-transform: skew(-50deg);
		   -moz-transform: skew(-50deg);
		    -ms-transform: skew(-50deg);
		     -o-transform: skew(-50deg);
		        transform: skew(-50deg);
	}
	#hd .hd-sec-ocdesign .bar-red{
		width: calc(100% - 150px);
		background: #ad0202;
		background: -moz-linear-gradient(left, #200000 0%, #ad0202 100%);
		background: -webkit-linear-gradient(left, #200000 0%,#ad0202 100%);
		background: linear-gradient(to right, #200000 0%,#ad0202 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#200000', endColorstr='#ad0202',GradientType=1 );
	}
	#hd .hd-sec-ocdesign .bar-grey{
		width: 13%;
		background: #b0b8c6;
		background: -moz-linear-gradient(left, #31342f 0%, #b0b8c6 100%);
		background: -webkit-linear-gradient(left, #31342f 0%,#b0b8c6 100%);
		background: linear-gradient(to right, #31342f 0%,#b0b8c6 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31342f', endColorstr='#b0b8c6',GradientType=1 );
	}
/* ------------ proclock ------------ */
	#hd .hd-sec-proclock figure{
		position: relative;
	}
	#hd .hd-sec-proclock figure div{
		position: absolute;
		top: 37%;
		width: 51%;
		left: 24%;
	}
/* ------------ mode ------------ */
	#hd .hd-sec-mode{
		padding-bottom: 100px;
	}
	#hd .hd-sec-mode p{
		margin:0 auto 80px;
	}
	#hd .hd-sec-mode .hd-col50{
		display: inline-block;
		vertical-align: top;
		padding:0 40px;
		text-align: center;
	}
	#hd .hd-sec-mode .hd-col50:last-child{
		margin-left: -6px;
	}

	#hd .hd-sec-mode h4{
		max-width: 470px;
		margin:-70px auto 10px;
		cursor: pointer;
		text-align: left;
		padding:10px 5px;
	}
	#hd .txt_decoline svg{
		margin-left: 10px;
		fill:#8D0000;
		-webkit-transform: rotateZ(90deg);
		   -moz-transform: rotateZ(90deg);
		    -ms-transform: rotateZ(90deg);
		     -o-transform: rotateZ(90deg);
		        transform: rotateZ(90deg);
	}
	#hd .hd-open svg{		
		-webkit-transform: rotateZ(270deg);
		   -moz-transform: rotateZ(270deg);
		    -ms-transform: rotateZ(270deg);
		     -o-transform: rotateZ(270deg);
		        transform: rotateZ(270deg);
	}
	#hd .hd-sec-mode .txt_decoline:hover{
		color:white;
	}
	#hd .hd-sec-mode .txt_decoline:hover svg{
		fill:white;
	}
	#hd .hd-sec-mode .mode-content {
		display: none;
		margin:5px;
		position: relative;
	}
	#hd .hd-sec-mode .mode-content ul{
		padding:25px 35px;
		background:#3A3A3A;
		box-shadow: 0 0 200px 100px black inset;
		text-align: left
	}
	#hd .hd-sec-mode .mode-content p{
		margin-bottom: 20px;
	}
	#hd .hd-sec-mode .mode-content p.txt-red{
		color:#AE171B;
		font-weight: bold;
		margin-bottom: 5px;
	}

	#hd .hd-sec-mode~.hd-pic01{
		height: 189px;
	}
	#hd .hd-sec-mode~.hd-pic01 div{
		width: 50%;
		margin:0 auto;
		padding:80px 20px 50px 20%;
	}
	#hd .hd-sec-mode~.hd-pic01 div h4{
		margin-bottom: 9px;
	}
	#hd .hd-sec-mode~.hd-pic01 div p{
		letter-spacing: 0;
		margin-bottom: 0;
	}

/* ------------ SEC_AUDIO ------------ */
	#hd #audio{
		padding-top: 90px;
	}
	#hd #audio h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 20%;
		background: url(../img/title/title_audio.png) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
/* ------------ audio ------------ */
	#hd .hd-sec-audio{
		position: relative;
		padding-bottom: 150px;
	}
	#hd .hd-sec-audio:before{
		content:'';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 80%;
		padding-bottom: 46%;
		max-width: 1080px;
		background: url(../img/audio/supremefx_bg.png) 0 0 no-repeat;
		background-size: contain;
		z-index: 3;
		pointer-events: none;
	}
	#hd .hd-supremefx{
		position: relative;
		padding-top: 10%;
	}
	#hd .hd-supremefx img{
		margin-right: 0;
	}
	#hd .hd-supremefx li:not(:first-child){
		position: absolute;
		bottom: 0;
		left: 0;right: 0;
		margin:0 auto;
		opacity: 0;
	}
	#hd .hd-supremefx li:first-child.hd-active{
		opacity: .3;
	}
	#hd .hd-supremefx li:not(:first-child).hd-active{
		opacity: 1;
	}
	#hd .audio-filter{
		display: flex;
		justify-content: space-around;
	}
	#hd .audio-filter li{
		display: inline-block;
		vertical-align: top;
		width: 18%;
		margin:0 2% 0 -5px;
		padding:30px 10px;
		position: relative;
		background: #000;
		cursor: crosshair;
	}
	#hd .audio-filter li:before{
		content:'';
		display: block;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -2px;
		z-index: -1;
		background: #46505a;
		background: -moz-linear-gradient(left, #46505a 0%, #7f8180 18%, #7f8084 29%, #6d767d 38%, #67717a 46%, #67747c 46%, #727c85 48%, #727f87 48%, #9ca9b1 55%, #a2afb5 56%, #636c75 68%, #6f747a 77%, #6f7478 78%, #7f8082 93%, #7f7f7f 100%);
		background: -webkit-linear-gradient(left, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);
		background: linear-gradient(to right, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46505a', endColorstr='#7f7f7f',GradientType=1 );
	}
	#hd .audio-filter li h4{
		font-size: 24px;
		min-height: 60px;
		margin-bottom: 5px;
	}
	#hd .audio-filter li p{
		margin-bottom: 0;
	}
/* ------------ sonic ------------ */
	#hd .hd-sec-sonic{
		padding-bottom: 50px;
		overflow: hidden;
		position: relative;
	}
	#hd .hd-sec-sonic figure{
		position: relative;
		width: 80%;
		max-width: 580px;
		margin:15% auto 0;
	}
	#hd .hd-sec-sonic:before{
		content:'';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;right: 0;
		margin: 0 auto;
		width: 90%;
		max-width: 1200px;
		height: 70%;
		/*background: url(../img/bg-glow.jpg) center 110% no-repeat;
		background-size: contain;*/
		border-radius: 50%;
		background: #333;
		border:2px solid #000;
		box-shadow: 0 80px 200px 220px #000 inset,
					0 0 0 1px #000 inset;
		z-index: -1;
	}
	#hd .hd-sec-sonic figure > img{
		cursor: pointer;
	}
	#hd .hd-sec-sonic .hd-num{
		display: none;
	}
	#hd .hd-sec-sonic figure li{
		width: 55%;
		position: absolute;
	}
	#hd .hd-sec-sonic figure li h4{
		font-size: 24px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		background-size: 95%;
		position: relative;
	}
	#hd .hd-sec-sonic figure li h4,
	#hd .hd-sec-sonic figure li p{
		padding-left: 70px;
	}
	#hd .hd-sec-sonic figure li:nth-child(1){
		top: 31%;
		left: -60%;
	}
	#hd .hd-sec-sonic figure li:nth-child(1) h4:after,
	#hd .hd-sec-sonic figure li:nth-child(2) h4:after{
		content:'';
		display: block;
		width: 110%;
		height: 1px;
		background-color: #b80202;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#hd .hd-sec-sonic figure li:nth-child(2){
		top: 80%;
		left: -60%;
	}
	#hd .hd-sec-sonic figure li:nth-child(3){
		top: 16%;
		right: -50%;
		width: 60%;
	}
	#hd .hd-sec-sonic figure li:nth-child(3) h4{
		padding-right: 70px;
		margin-bottom: 30px;
	}
	#hd .hd-sec-sonic figure li:nth-child(3) h4:after{
		content:'';
		display: block;
		width: 90%;
		height: 1px;
		background-color: #b80202;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	#sonic_ui_on{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.4);
		z-index: 99;
		display: none;
	}
	#sonic_ui_on img{
		max-width: 90% !important;
		max-height: 80vh;
		position: absolute;
		top: 50px;right: 0;bottom: 0;left: 0;
		margin:auto;

		box-shadow: 0 0 50px 2px rgba(255,255,255,.5);
	}
/* ------------ radar ------------ */
	#hd .hd-sec-radar{
		background: center center no-repeat;
		background-image: url('../img/audio/audio-bg2.jpg');
		padding:50px 0 95px;
		margin-bottom: 100px;
	}
	#hd .hd-sec-radar p.hd-col80{
		margin:0 auto 100px;
	}
	#hd #audiogif{
		transform: perspective(660px) rotateY(12deg);
	    position: relative;
	    left: -29px;
	    top: -7px;
	    margin:0;
	}
	#hd .gif-focus{
		position: absolute;
		display: none;
	}
	#hd .ghost-bg{
		position: absolute;
		right: -8%;
		bottom:-20%;
	}
	
	#hd .hd-sec-radar li.audio-tag{
		position: absolute;
		z-index: 2;
	}
	#hd .hd-sec-radar li.audio-tag:before{
		content: "";
		display: block;
		position: absolute;
		border:1px solid #FF0000;
	}
	#hd .hd-sec-radar .txt_decoline{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	#hd .hd-sec-radar li.audio-tag small{
		display: block;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(1){
		width: 400px;
		top: 40%;
		right: 3%;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(1):before{
		display: none;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(2){
		width: 355px;
		top: 60%;
		right: 8%;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(2):before{
		/*width: 185px;
		height: 40px;
		left: -197px;
		top:43px;*/
		width: 52%;
		height: 37%;
		left: -55%;
		top: 40%;
		border-top: none;
		border-left: none;
		transform: skewX(-30deg);
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(2):after{
		content:"";
		display: block;
		position: absolute;
		width: 136px;
		height: 136px;
		border-radius: 68px;
		border:1px solid #ff0000;
		/*left: -335px;
    	top: 50px;*/
		left: -94%;
		top: 47%;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(2) h4,
	#hd .hd-sec-radar li.audio-tag:nth-child(2) small{
		padding-left: 45px;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(3){
		width: 330px;
		top: 80%;
		right: 8%;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(3) h4,
	#hd .hd-sec-radar li.audio-tag:nth-child(3) small{
		padding-left: 20px;
	}	
	#hd .hd-sec-radar li.audio-tag:nth-child(3):before{
		width: 125px;
		height: 75px;
		left: -148px;
    	top: -33px;
		border-bottom: none;
		border-left: none;
		transform: skewX(30deg);
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(4){
		width: 366px;
		bottom: -18%;
		left: 40%;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(4) h4,
	#hd .hd-sec-radar li.audio-tag:nth-child(4) small{
		padding-left: 10px;
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(4):before{
		/*width: 215px;
	    height: 254px;
	    left: -341px;
	    top: -189px;*/
	    width: 59%;
	    height: 290%;
	    left: -93%;
	    top: -215%;
		border-top: none;
		border-right: none;
		transform: skewX(40deg);
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(4) small:before{
		content:"";
		display: block;
		position: absolute;
		width: 1px;
	    height: 22px;
	    left: -10px;
	    top: 44px;
	    border-right: 1px solid #FF0000;
		transform: skewX(-40deg);
	}
	#hd .hd-sec-radar li.audio-tag:nth-child(4):after{
		content:"";
		display: block;
		position: absolute;
		width: 80px;
		height: 80px;
		border-radius: 40px;
		border:1px solid #ff0000;
		/*left: -517px;
    	top: -259px;*/
		left: -140%;
		top: -298%;
	}

/* ------------ SEC_PROTECTION ------------ */
	#hd #protection{
		padding-top: 110px;
	}
	#hd #protection h2{
		font-size: 132px;
		margin-bottom: 90px;
	}
	#hd #protection h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 20%;
		background: url(../img/title/title_protection.jpg) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
/* ------------ rogarmor ------------ */
	#hd .hd-sec-rogarmor h3{
		margin-bottom: 50px;
		padding-right: 5%;
	}
	#hd .hd-sec-rogarmor .fright{
		margin-top: 13%;
		padding-right: 10%;
	}
	#hd .hd-sec-rogarmor:nth-child(3) .fright{
		margin-top: 0;
		margin-right: -25%;
	}
	#hd .hd-sec-rogarmor:nth-child(3) .fleft{
		margin-top: 5%;
		position: relative;
		z-index: 2;
	}
	#hd .hd-sec-rogarmor:nth-child(4) .fright{
		padding-right: 2%;
	}
/* ------------ protectionmore ------------ */
	#hd .hd-sec-protectionmore .hd-w800 {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-around;
	    padding:100px 0;
	}
	#hd .hd-sec-protectionmore figure {
	    width: 29%;
	    margin: 20px 2%;
	    text-align: center;
	}
	#hd .hd-sec-protectionmore .txt_decoline {
	    background-size: 130%;
	    text-align: left;
	    padding: 20px 0;
	}
	#hd .hd-sec-protectionmore .hd-frame:before{
		background: #46505a;
		background: -moz-linear-gradient(left, #46505a 0%, #7f8180 18%, #7f8084 29%, #6d767d 38%, #67717a 46%, #67747c 46%, #727c85 48%, #727f87 48%, #9ca9b1 55%, #a2afb5 56%, #636c75 68%, #6f747a 77%, #6f7478 78%, #7f8082 93%, #7f7f7f 100%);
		background: -webkit-linear-gradient(left, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);
		background: linear-gradient(to right, #46505a 0%,#7f8180 18%,#7f8084 29%,#6d767d 38%,#67717a 46%,#67747c 46%,#727c85 48%,#727f87 48%,#9ca9b1 55%,#a2afb5 56%,#636c75 68%,#6f747a 77%,#6f7478 78%,#7f8082 93%,#7f7f7f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46505a', endColorstr='#7f7f7f',GradientType=1 );
	}
	#hd .hd-sec-protectionmore .hd-content {
	    height: 275px;
	    position: relative;
	    margin: 5px;
	    display: block;
	    padding: 50px 35px;
	    background: #3A3A3A;
	    box-shadow: 0 0 100px 50px black inset;
	}
	#hd .hd-sec-protectionmore h4{
		font-size: 22px;
		text-align: left;
	}
	#hd .hd-sec-protectionmore .hd-content p {
		font-size: 14px;	
	    margin-bottom: 20px;
	}
	#hd .hd-sec-protectionmore .hd-content p span {
	    font-family: "Fjalla One", sans-serif;
	    text-transform: uppercase;
	    font-size: 60px;
	}

/* ------------ SEC_MORE------------ */
	#hd #more{
		padding-top: 100px;
	}
	#hd #more h2{
		padding-bottom: 0;
		margin-bottom: 100px;
	}
	#hd #more h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 24%;
		background: url(../img/title/title_more.jpg) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
/* ------------ overwolf ------------ */
	#hd .hd-sec-overwolf {
	    position: relative;
	    padding-bottom: 200px;
	}
	#hd .hd-sec-overwolf .hd-w1200 {
	    z-index: 2;
	}
	#hd .hd-sec-overwolf .hd-morebg {
	    padding-right: 50px;
	    z-index: 0;
	    position: absolute;
	    right: 0;
	    top: -5%;
	}
	#hd .hd-sec-overwolf h3 {
	    margin-bottom: 50px;
	}
	#hd .hd-sec-overwolf .hd-skewtag:before {
	    -webkit-transform: skewX(20deg);
	    -moz-transform: skewX(20deg);
	    -ms-transform: skewX(20deg);
	    -o-transform: skewX(20deg);
	    transform: skewX(20deg);
	}
	#hd .hd-sec-overwolf .hd-box {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin-top: -20px;
		margin-bottom: 20px;
	    position: relative;
	    justify-content: flex-start;
	}
	#hd .hd-redtags {
	    margin-left: -20px;
	}
	#hd .hd-greytags {
	    margin-left: 15px;
	}
	#hd .hd-greytags .hd-skewtag:before {
	    border-color: #808080;
	}
	#hd .hd-redtags li:nth-child(2) {
	    margin-left: 40px;
	}
	#hd .hd-redtags li:nth-child(3) {
	    margin-left: 80px;
	}
	#hd .hd-greytags li:nth-child(1) {
	    margin-left: -185px;
	}
	#hd .hd-greytags li:nth-child(2) {
	    margin-left: -40px;
	}
	#hd .hd-greytags li:nth-child(1) .hd-skewtag:before {
	    width: 220px;
	}
	#hd .hd-greytags li:nth-child(2) .hd-skewtag:before {
	    width: 320px;
	}
	#hd .hd-greytags li:nth-child(3) .hd-skewtag {
	    width: 320px;
	}
	#hd .hd-greytags li:nth-child(3) .hd-skewtag:before {
	    width: 330px;
	}
	#hd .hd-greytags li:nth-child(3) .hd-skewtag {
	    padding-left: 20px;
	}
	/*	#hd .hd-videobox2 {
	    width: 100%;
	    height: 0;
	    overflow: hidden;
	    position: relative;
	}
	#hd .hd-videobox2.v-open {
	    height: auto;
	}
	#hd .hd-videobox2 video {
	    top: 0;
	    left: 0;
	    min-width: 100%;
	    min-height: 100%;
	    width: 100%;
	    height: auto;
	    background: url('../img/video_poster.jpg') no-repeat;
	    background-size: cover;
	}*/
/* ------------ clone ------------ */
	#hd .hd-sec-clone {
	    padding-bottom: 70px;
	}
	#hd .hd-sec-clone .hd-col55 {
	    margin-top: 2%;
	}
	#hd .hd-sec-clone .hd-col65 {
	    position: relative;
	    margin-left: -20%;
	    z-index: -1;
	}
/* ------------ ramcache ------------ */
	#hd .hd-sec-ramcache {
	    padding-bottom: 0;
	}
	#hd .hd-sec-ramcache~.hd-pic {
	    margin-top: -100px;
	    margin-bottom: 50px;
	    position: relative;
	}
	#hd .hd-sec-ramcache~.hd-pic img {
	    position: relative;
	    z-index: -1;
	    margin: 0 auto;
	}
	#hd .hd-sec-ramcache~.hd-pic p {
	    text-align: left;
	    width: 20%;
	    max-width: 250px;
	    position: absolute;
	    top: 25%;
	    left: 75%;
	    z-index: 2;
	}
/* ------------ keybot ------------ */
	#hd .hd-sec-keybot {
	    padding-top: 100px;
	    padding-bottom: 50px;
	}
	#hd .hd-sec-keybot img.hd-col60 {
	    width: 75%;
	    position: absolute;
	    top: 0;
	    right: -15%;
	    z-index: -1;
	}
	#hd .hd-sec-keybot figure {
	    width: 85%;
	    position: relative;
	}
	#hd .hd-sec-keybot figure .hd-picnote {
	    position: absolute;
	    margin: auto;
	    width: 80%;
	    top: 0;
	    right: 0;
	    left: auto;
	    bottom: auto;
	    margin-left: 15%;
	}
	#hd .hd-pic02 {
	    width: 100%;
	    background: center center no-repeat;
	    background-size: 1920px;
	    height: 175px;
	    margin-bottom: 100px;
	}
/* ------------ andmore ------------ */
	#hd #more .hd-sec-andmore h2 {
		background: transparent;
		-webkit-background-clip: unset;
		-webkit-text-fill-color: #fff;
		text-shadow: none;
	    margin-bottom: 130px;
	}
	#hd .hd-sec-andmore h2:before,
	#hd .hd-sec-andmore h2:after {
	    display: none;
	}
	#hd #more .hd-sec-andmore{
		padding-bottom: 90px;
	}
	#hd .hd-sec-andmore .hd-pic {
	    width: 100%;
	    height: 200px;
	    background: center center no-repeat;
	    background-size: 1920px;
	    margin-bottom: 15px;
	}
	#hd .hd-sec-andmore .hd-w1336 {
	    width: 1336px;
	    margin: 0 auto;
	}
	#hd .hd-sec-andmore .hd-w1336 ul {
	    display: flex;
	    justify-content: space-between;
	}
	#hd .hd-sec-andmore .hd-w1336 li {
	    width: 12.5%;
	}
	#hd .hd-sec-andmore .hd-w1336 li p.txt-red{
		margin-bottom: 5px;
		font-weight: bold;
	}
/* ------------ vr ------------ */
	#hd .hd-sec-vr {
	    text-align: center;
	}
	#hd .hd-sec-vr .hd-w1400 {
	    padding-bottom: 0;
	}
	#hd .hd-sec-vr p {
	    margin-bottom: 10px;
	}
	#hd .hd-sec-vr img {
	    margin-top: -5%;
	    margin-bottom: 100px;
	    width: 100%;
	    z-index: -1;
	    position: relative;
	}
/* ------------ SEC_intel ------------ */
	#hd #intel{
		padding-top: 150px;
		padding-bottom: 100px;
	}
	#hd #intel h2{
		max-width: 1300px;
		/*font-size: 132px;*/
		margin-bottom: 100px;
	}
	#hd #intel h2:before{
		content:'';
		width: 100%;
		height: 0;
		padding-bottom: 30%;
		background: url(../img/title/title_intel.jpg) 0 0 no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	#hd .hd-sec-intel {
	    padding-bottom: 50px;
	}
	#hd .hd-sec-intel .hd-col80 {
	    margin: 0 auto;
	}
	#hd .hd-sec-intel img {
	    width: 110px;
	    display: inline-block;
	    vertical-align: top;
	}
	#hd .hd-sec-intel img~div {
	    width: calc(100% - 130px);
	    padding-left: 40px;
	    display: inline-block;
	    vertical-align: top;
	}
	#hd .hd-sec-intel img~div p:first-child {
		font-size: 18px;
		font-weight: bold;
	    margin-bottom: 10px;
	}

/* ---------- hidden-section ---------- */
	#hd .hd-more {
		width: 100%;
		height: 61px;
		padding:0 20px;
		margin:50px 0;
		text-align: center;
		background: url(../img/more.png) center center no-repeat;
		background-size: contain;
		cursor: pointer;
		position: relative;
		z-index: 2;
	}
	#hd .hd-btn-more {
		display: block;
		width: 100%;
		height: 61px;
		padding:0 20px;
		margin:0;
		text-align: center;
		background: url(../img/more.png) center center no-repeat;
		background-size: contain;
		cursor: pointer;
	}
	#hd .hd-sec-hidden {
		display: none;
	}
/* ---------- ANIMATION ---------- */
	@keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@-webkit-keyframes fadeIn{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	@keyframes colorrun {
	    from {
	        -webkit-filter: hue-rotate(0deg);
	        filter: hue-rotate(0deg);
	    }
	    to {
	        -webkit-filter: hue-rotate(359deg);
	        filter: hue-rotate(359deg);
	    }
	}
	@-webkit-keyframes colorrun {
	    from {
	        -webkit-filter: hue-rotate(0deg);
	        filter: hue-rotate(0deg);
	    }
	    to {
	        -webkit-filter: hue-rotate(359deg);
	        filter: hue-rotate(359deg);
	    }
	}
/* ---------- COLOR EFFECT ---------- */



#light_off{
    animation: breathing linear 4s infinite; /*set 'breathing' as default*/
}

	@-webkit-keyframes static{
		0% {opacity: 1}
		50%{opacity: 1}
	}
	@keyframes static{
		0% {opacity: 1}
		50%{opacity: 1}
	}
	@-webkit-keyframes breathing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@keyframes breathing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@-webkit-keyframes strobing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@keyframes strobing{
		0% {opacity: 1}
		50%{opacity: 0}
	}
	@-webkit-keyframes music{
		0%  {opacity: 1}
		10% {opacity: .3}
		40% {opacity: 1}
		60% {opacity: .3}
		70% {opacity: 1}
		100%{opacity: .3}
	}
	@keyframes music{
		0%  {opacity: 1}
		10% {opacity: .3}
		40% {opacity: 1}
		60% {opacity: .3}
		70% {opacity: 1}
		100%{opacity: .3}
	}
	@-webkit-keyframes cycle{
		0%		{background-color: #fc5050}
		15%		{background-color: #fc9d50}
		30%		{background-color: #fffc51}
		45%		{background-color: #71f276}
		60%		{background-color: #82d3ff}
		75%		{background-color: #6d8dff}
		90%		{background-color: #d47cff}
		100%	{background-color: #fc5050}
	}
	@keyframes cycle{
		0%		{background-color: #fc5050}
		15%		{background-color: #fc9d50}
		30%		{background-color: #fffc51}
		45%		{background-color: #71f276}
		60%		{background-color: #82d3ff}
		75%		{background-color: #6d8dff}
		90%		{background-color: #d47cff}
		100%	{background-color: #fc5050}
	}
	@-webkit-keyframes rainbow{
		0%	{
		    transform: translateY(-100%) skewY(40deg) scale(2,2);
		}
		100%{
		    transform: translateY(0%) skewY(40deg) scale(2,2);
		}
	}
	@keyframes rainbow{
		0%	{
		    transform: translateY(-100%) skewY(40deg) scale(2,2);
		}
		100%{
		    transform: translateY(0%) skewY(40deg) scale(2,2);
		}
	}
	@-webkit-keyframes cpu{
		0%		{background-color: #fc5050}
		30%		{background-color: #fffc51}
		60%		{background-color: #59f773}
		90%		{background-color: #fffc51;}
	}
	@keyframes cpu{
		0%		{background-color: #fc5050}
		30%		{background-color: #fffc51}
		60%		{background-color: #59f773}
		90%		{background-color: #fffc51;}
	}
	@keyframes flash {
	    0% {
			background-color: #56d4ff;
	    }
	    30% {
			background-color: #56d4ff;
	    }
	    40% {
			background-color: #ffffff;
	    }
	    50% {
			background-color: #56d4ff;
	    }
	    100% {
			background-color: #56d4ff;
	    }
	}
	@keyframes comet {
	    0% {
	    	height: 200%;
	        transform: translateY(-100%);
	    }
	    100% {
	    	height: 200%;
	        transform: translateY(50%);
	    }
	}
	@-webkit-keyframes comet {
	    0% {
	        height: 200%;
	        transform: translateY(-100%);
	    }
	    100% {
	        height: 200%;
	        transform: translateY(50%);
	    }
	}

/*
	@keyframes wave{
		0%{
			opacity: 0;
		}
		10%{
			opacity: 1;
			        transform: rotate(0deg);
		}
		48%{
			        transform: rotate(-90deg);
		}
		50%{
			opacity: 0;
		}
		52%{
			opacity: 0;
			        transform: rotate(-90deg);
		}
		58%{
			opacity: 1;
		}
		90%{
			        transform: rotate(0deg);
		}
		100%{
			opacity: 0;
		}
	}
*/
	@keyframes yoyo{
		0% {opacity: 1}
		60%{opacity: 0}
		80%{opacity: 1}
		95%{opacity: 0.5}
		100%{opacity: 1}
	}

/*
	@keyframes yoyo-wave {
	    0% {
	        height: 200%;
	        transform: translateY(-100%);
	    }
	    100% {
	        height: 200%;
	        transform: translateY(50%);
	    }
	}

	@keyframes yoyo {
	    0% {
	        height: 150%;
	        transform: translateY(-50%);
	    }
	    50% {
	        height: 150%;
	        transform: translateY(100%);
	    }
	    65% {
	        height: 150%;
	        transform: translateY(-50%);
	    }
	    85% {
	        height: 150%;
	        transform: translateY(100%);
	    }
	    100% {
	        height: 150%;
	        transform: translateY(-50%);
	    }
	}
*/

	@-webkit-keyframes starryNight {
	    0% {opacity: 0;}
	    80% {opacity: 0;}
	    95% {opacity: 1;}
	    100% {opacity: 1;}
	}
	@keyframes starryNight {
	    0% {opacity: 0;}
	    80% {opacity: 0;}
	    95% {opacity: 1;}
	    100% {opacity: 1;}
	}