@font-face {
	font-family: "Octin College";
    src: url("../font/ce48a1f55fc7320fcc20a256c1957d03.eot");
    src: url("../font/ce48a1f55fc7320fcc20a256c1957d03.eot?#iefix") format("embedded-opentype"),
    url("../font/ce48a1f55fc7320fcc20a256c1957d03.woff2") format("woff2"),
    url("../font/ce48a1f55fc7320fcc20a256c1957d03.woff") format("woff"),
    url("../font/ce48a1f55fc7320fcc20a256c1957d03.ttf") format("truetype"),
    url("../font/ce48a1f55fc7320fcc20a256c1957d03.svg#Octin College") format("svg");
}

/* ---------- OUTSIDE ---------- */
	* {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
	}
	/*nav{
		height:55px;
		width:100%;
		background:#232323;
	}*/
/* ---------- END OUTSIDE ---------- */
/* ---------- MAIN SETTINGS ---------- */
	#hdc8{
		background: black;
	}
	#hdc8 ul,
	#hdc8 li{
		margin: 0;
	}
	#hdc8,
	#hdc8 .hdc8_sec_top,
	#hdc8 .hdc8_sec02,
	#hdc8 .hdc8_sec_sync,
	#hdc8 .hdc8_sec04{
		margin: 0;
		padding: 0;
		border: 0;
		font: inherit;
		vertical-align: baseline;
	}
	#hdc8 h1,
	#hdc8 h2,
	#hdc8 h3,
	#hdc8 h4,
	#hdc8 p,
	#hdc8 a,
	#hdc8 li {
		font-family: "Segoe UI", "Hind Siliguri", "Microsoft JhengHei", "Arial",sans-serif;
		margin: 0;
		line-height: normal;
		text-align: center;
		color: white;
	}
	#hdc8 h1,
	#hdc8 h2,
	#hdc8 h3{
		font-family: "Octin College",sans-serif;
		font-weight: 300;
		text-transform: capitalize;
		position: relative;
		z-index: 1;
	}
	#hdc8 h1 {
		font-size: 3.60rem;
		margin-top: 55px;
		letter-spacing: 1px;
	}
	#hdc8 h2 {
		font-size: 48px;
		color: #C7CFDD;
		letter-spacing: 0.5px;
		padding:0 20px;
		margin-bottom: 30px;
	}
	#hdc8 h3 {
		font-size: 21px;		
		color: #C7CFDD;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	#hdc8 h4 {
		font-family: "Segoe UI", "Hind Siliguri", "Microsoft JhengHei", "Arial",sans-serif;
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 1px;
		text-align: center;
	}
	#hdc8 p {
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.2rem;
		margin: 0;
	}
	#hdc8 .hdc8_desciption{
		width: 1070px;
		max-width: 90%;
		font-size: 17px;
		margin:0 auto 55px;
		position: relative;
		z-index: 1;
		font-weight: 300;
	}
	#hdc8 .hdc8_note{
		width: 785px;
		max-width: 100%;
		font-size: 14px;
		margin:0 auto;
		font-weight: 300;
		color: #C7CFDD;
	}
	#hdc8 p a{
		color:inherit;
		text-decoration: underline;
		word-break: break-all;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hdc8 p a:hover{
		font-weight: 400;
	}
	#hdc8 .hdc8_sec_fbg{
		/*width: 100%;*/
		max-width: 1920px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin:0 auto;
		background-repeat: no-repeat;
		background-position: left top;
	}
	#hdc8 .hdc8_mobile_off{
		display: block;
	}
	#hdc8 .hdc8_mobile_on{
		display: none;
	}
/* ---------- END MAIN SETTINGS ---------- */
/* ---------- SEC_top ---------- */
	#hdc8 .hdc8_sec_topbg{
		background: black center top no-repeat;
		background-size: cover;
		width: 100%;
		height: 0;
		padding-bottom: 49%;
		-webkit-animation: colorrun 3s infinite;
		   -moz-animation: colorrun 3s infinite;
		    -ms-animation: colorrun 3s infinite;
		     -o-animation: colorrun 3s infinite;
		        animation: colorrun 3s infinite;
		position: absolute;
	}
	#hdc8 .hdc8_sec_topbg_stable{
		background: center top no-repeat;
		background-size: cover;
		width: 100%;
		height: 0;
		padding-bottom: 49%;
		position: absolute;
	}
	#hdc8 .hdc8_sec_top .hdc8_container{
		width: 1230px;
		height: 0;
		padding-bottom: 49%;
		margin:0 auto;
		position: relative;
	}
	#hdc8 .hdc8_sec_top .hdc8_img{
		display: block;
		width: 200px;
		height: 200px;
		margin:0px auto;
		position: absolute;
		right: 0;
		bottom: 40px;
	}
	@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);
		}
	}
/* ---------- END SEC_top ---------- */
/* ---------- SEC_feature ---------- */
	#hdc8 .hdc8_sec_feature{
		background: transparent center top no-repeat;
		position: relative;
		background-size: 1920px;
	}
	#hdc8 .hdc8_sec_feature .hdc8_container{
		padding:100px 0 0;
	}
	#hdc8 .hdc8_sec_feature .hdc8_keyboard{
		max-width: 729px;
		height: 420px;
		/*height: 0;
		padding-bottom: 20%;*/
		margin:0 auto;
		position: relative;
		background-image: url('../img/ROG-Claymore.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	/* ---------- SEC_feature tag ---------- */
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li > p{
			display: inline-block;
			position: absolute;
			text-align: left;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li > p:after,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:before{
			content:"";
			display: block;
			height: 1px;
			width: 0;
			background: white;
			position: absolute;
			top: 10px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:before,
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:before{			
			height: 2px;
			-webkit-transform: skewY(130deg);
			   -moz-transform: skewY(130deg);
			    -ms-transform: skewY(130deg);
			     -o-transform: skewY(130deg);
			        transform: skewY(130deg);
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(1) > p{
			top: 8%;
			left: -10%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(1) > p:after{
			width:20px;
			right: -30px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p{
			top: 37%;
			left: -24%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p:after{
			width: 90px;
			right: -100px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p{
			top: 69%;
			left: -19%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p:after{
			width: 100px;
			right: -110px;
		}		
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p{
			top: -1%;
			right: 19%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p:after{
			width: 110px;
			left: -120px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p:before{
			width:40px;
			top:33px;
			left: -160px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p{
			top: 5%;
			right: 5%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p:after{
			width:130px;
			left: -140px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p:before{
			width:20px;
			top:22px;
			left: -160px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p{
			top: 14%;
			right: -21%;
			width: 280px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:after{
			width: 50px;
			left: -60px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:before{
			width:80px;
			top:57px;
			left: -140px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p{
			top: 89%;
			left: -9%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:after{
			width: 54px;
			right: -64px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:before{
			width:80px;
			top:-38px;
			right: -144px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p{
			top: 36%;
			right: -24%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:after{
			width: 20px;
			left: -30px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:before{
			width:20px;
			top:22px;
			left: -50px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(9) > p{
			top: 88%;
			right: 35%;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(9) > p:after{
			width: 100px;
			right: -110px;
		}
	/* ---------- END SEC_feature tag ---------- */
	#hdc8 .hdc8_sec_feature .hdc8_kb_descript{
		/*background:#1e1e1e;*/
		margin-top: -157px;
	}
	#hdc8 .hdc8_sec_feature .hdc8_kb_descript:before{
		content:"";
		display: block;
		width: 100%;
		max-width: 1920px;
		margin:0 auto;
		height: 157px;
		background: #191919;
	}
	#hdc8 .hdc8_sec_feature .hdc8_kb_descript > p{
		width: 955px;
		padding: 40px 0 130px;
		margin: 0 auto;
		word-wrap: break-word;
		text-align: center;
		position: relative;
		z-index: 2;
	}
/* ---------- END SEC_feature ---------- */
/* ---------- SEC_detach ---------- */
	#hdc8 .hdc8_sec_detach{
		background: center top no-repeat;
		position: relative;
		margin-top: -100px;
		z-index: -2;
	}
	#hdc8 .hdc8_sec_detach .hdc8_container{
		width: 1200px;
		margin:0 auto;
		padding:220px 0 120px;
	}
	#hdc8 .hdc8_sec_detach .hdc8_detachable,
	#hdc8 .hdc8_sec_detach .hdc8_content{
		display: inline-block;
		vertical-align: bottom;
	}
	#hdc8 .hdc8_sec_detach .hdc8_detachable{
		max-width: 600px;
		margin:0 auto;
	}
	#hdc8 .hdc8_sec_detach .hdc8_content{
		width: 570px;
		padding-bottom: 125px;
	}
	#hdc8 .hdc8_sec_detach .hdc8_content p,
	#hdc8 .hdc8_sec_detach .hdc8_content h2{
		text-align: left;
		padding-left: 20px;
	}
/* ---------- END SEC_detach ---------- */
/* ---------- SEC_sync ---------- */
	#hdc8 .hdc8_sec_sync{
		max-width: 1920px;
		margin:0 auto;
		position: relative;
		z-index: -2;
		overflow: hidden; /*for > 1920*/
	}
	#hdc8 .hdc8_sec_sync .hdc8_box{
		height: 0;
		position: absolute;
		bottom: 6%;
		left: 0;
		width: 100%;
		max-width: 1920px;
		padding-bottom: 1115px;
		overflow: hidden;
	}
	#hdc8 .hdc8_sec_sync .hdc8_color,
	#starry{
		position: absolute;
		width: 90%;
		height: 0;
		margin:0 auto;
		bottom: 18%;
		left: 0;
		right: 0;
		padding-bottom: 500px;
		z-index: -1;
	}
	#starry{
		width: 80%;
	}
	#quicksand_color{
		position: absolute;
		width: 80%;
		height: 0;
		margin:0 auto;
		bottom: 18%;
		left: 0;
		right: 0;
		padding-bottom: 500px;
		z-index: -2;
		display: none;
		background: -webkit-linear-gradient(top,black,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,black);
		background: -o-linear-gradient(top,black,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,black);
		background: -moz-linear-gradient(top,black,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,black);
		background: linear-gradient(to bottom,black,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,black);
	}
	#hdc8 .hdc8_sec_sync .hdc8_logo_color{
		position: absolute;
		width: 50%;
		height: 0;
		margin:0 auto;
		bottom: 265px;
		left: 0;
		right: 0;
		padding-bottom: 50px;
		z-index: -1;
		background: rgb(0, 222, 255);
		display: none;
		-webkit-animation: quicksand_logo 25s -2s infinite;
		-o-animation: quicksand_logo 25s -2s infinite;
		animation: quicksand_logo 25s -2s infinite;
	}
	#quicksand_color.hdc8_active,
	#hdc8 .hdc8_sec_sync .hdc8_logo_color.hdc8_active{
		display: block;
	}
	#hdc8 .hdc8_sec_sync .hdc8_bg{
		width: 100%;
		height: 0;
		padding-bottom: 1115px;
		background: center top no-repeat;
		background-size: 1920px;
	}
	#hdc8 .hdc8_sec_sync .hdc8_container{
		width: 1250px;
		padding:70px 0 0;
		margin:0 auto;
		position: relative;
		z-index: 1;
		margin-top: -70px;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls{
		position: relative;
		width: 100%;
		margin-left: auto;
		/*padding-bottom: 31%;*/
		/* padding-bottom: 530px; */
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls span{
		display: block;
		opacity: 0;
		width: 100%;
		height: 510px;
		pointer-events: none;
	}
	
	#hdc8 .hdc8_sec_sync .hdc8_controls ul{
		width: 1150px;
		margin:0 auto 25px;
		text-align: center;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls li{
		display: inline-block;
		vertical-align: top;
		width: 9.1%;
		min-width: 103px;
		margin-left: -4px;
		padding:10px 0;
		cursor:pointer;
		opacity: .6;
		-webkit-transition: .4s ease;
		   -moz-transition: .4s ease;
		    -ms-transition: .4s ease;
		     -o-transition: .4s ease;
		        transition: .4s ease;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls li:hover{
		opacity: 1;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls li.hdc8_active{
		opacity: 1;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls li.hdc8_active h4,
	#hdc8 .hdc8_sec_sync .hdc8_controls li.hdc8_active p{
		text-shadow: 0 0 3px white;
	}
	#hdc8 .hdc8_sec_sync .hdc8_controls li img{
		width: 54px;
		height: 54px;
	}

	#hdc8 #colorpicker{
		width: 130px;
		position: absolute;
		right: 0;
		bottom: 30px;
	}

	#hdc8 .hdc8_sec_sync .hdc8_note{
		padding: 3% 0 3%;
	}
	#hdc8 .hdc8_sec_sync .hdc8_sec_fbg{
		position: relative;
	}
/* ---------- END SEC_sync ---------- */
/* ---------- color effect ---------- */
	.hdc8_rainbow{
		background: -webkit-linear-gradient(left,red,yellow,yellow,#00CB07,#00CB07,#07A9FF,#07A9FF,#1044FF,#1044FF,#1B2F7F,#1B2F7F,#D92F7F,#D92F7F,red);
		background: -o-linear-gradient(left,red,yellow,yellow,#00CB07,#00CB07,#07A9FF,#07A9FF,#1044FF,#1044FF,#1B2F7F,#1B2F7F,#D92F7F,#D92F7F,red);
		background: -moz-linear-gradient(left,red,yellow,yellow,#00CB07,#00CB07,#07A9FF,#07A9FF,#1044FF,#1044FF,#1B2F7F,#1B2F7F,#D92F7F,#D92F7F,red);
		background: linear-gradient(to right, red,yellow,yellow,#00CB07,#00CB07,#07A9FF,#07A9FF,#1044FF,#1044FF,#1B2F7F,#1B2F7F,#D92F7F,#D92F7F,red);
		-webkit-transform: scaleX(1.5) skewX(45deg);
		   -moz-transform: scaleX(1.5) skewX(45deg);
		    -ms-transform: scaleX(1.5) skewX(45deg);
		     -o-transform: scaleX(1.5) skewX(45deg);
		        transform: scaleX(1.5) skewX(45deg);
	}
	.hdc8_quicksand{
		position: relative;
		opacity: 1;
		background-color: transparent!important;
		background-image: url(../img/quicksand.png);
		background-position-x: center;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	.hdc8_ripple{
		background: url(../img/ripple.png) repeat;
		background-size: 100%;
		background-position-x: center;
		background-position-y: 40%;
	}
	.hdc8_reactive{
		background: url(../img/reactive.png) repeat;
		background-size: cover;
		background-position-x: center;
		background-position-y: center;
	}
	#starry li{
		width: 110px;
		height: 110px;
		background: red url(../img/starrynight-1.png);
		position: absolute;
		bottom: 50%;
		left: 50%;
	}
	#starry li:nth-child(1){		
		-webkit-animation: cycle 35s infinite, starry 35s infinite;
		   -moz-animation: cycle 35s infinite, starry 35s infinite;
		    -ms-animation: cycle 35s infinite, starry 35s infinite;
		     -o-animation: cycle 35s infinite, starry 35s infinite;
		        animation: cycle 35s infinite, starry 35s infinite;
	}
	#starry li:nth-child(2){		
		-webkit-animation: cycle 35s -5s infinite, starry 25s -5s infinite;
		   -moz-animation: cycle 35s -5s infinite, starry 25s -5s infinite;
		    -ms-animation: cycle 35s -5s infinite, starry 25s -5s infinite;
		     -o-animation: cycle 35s -5s infinite, starry 25s -5s infinite;
		        animation: cycle 35s -5s infinite, starry 25s -5s infinite;
	}
	#starry li:nth-child(3){		
		-webkit-animation: cycle 35s -3s infinite, starry 35s -15s infinite;
		   -moz-animation: cycle 35s -3s infinite, starry 35s -15s infinite;
		    -ms-animation: cycle 35s -3s infinite, starry 35s -15s infinite;
		     -o-animation: cycle 35s -3s infinite, starry 35s -15s infinite;
		        animation: cycle 35s -3s infinite, starry 35s -15s infinite;
	}
	#starry li:nth-child(4){		
		-webkit-animation: cycle 35s -5s infinite, starry 35s -10s infinite;
		   -moz-animation: cycle 35s -5s infinite, starry 35s -10s infinite;
		    -ms-animation: cycle 35s -5s infinite, starry 35s -10s infinite;
		     -o-animation: cycle 35s -5s infinite, starry 35s -10s infinite;
		        animation: cycle 35s -5s infinite, starry 35s -10s infinite;
	}
	#starry li:nth-child(5){		
		-webkit-animation: cycle 35s  -30s infinite, starry 35s -30s infinite;
		   -moz-animation: cycle 35s  -30s infinite, starry 35s -30s infinite;
		    -ms-animation: cycle 35s  -30s infinite, starry 35s -30s infinite;
		     -o-animation: cycle 35s  -30s infinite, starry 35s -30s infinite;
		        animation: cycle 35s  -30s infinite, starry 35s -30s infinite;
	}
	#starry li:nth-child(6){		
		-webkit-animation: cycle 35s  -20s infinite, starry 35s -20s infinite;
		   -moz-animation: cycle 35s  -20s infinite, starry 35s -20s infinite;
		    -ms-animation: cycle 35s  -20s infinite, starry 35s -20s infinite;
		     -o-animation: cycle 35s  -20s infinite, starry 35s -20s infinite;
		        animation: cycle 35s  -20s infinite, starry 35s -20s infinite;
	}
	#starry li:nth-child(7){		
		-webkit-animation: cycle 35s  -25s infinite, starry 35s -25s infinite;
		   -moz-animation: cycle 35s  -25s infinite, starry 35s -25s infinite;
		    -ms-animation: cycle 35s  -25s infinite, starry 35s -25s infinite;
		     -o-animation: cycle 35s  -25s infinite, starry 35s -25s infinite;
		        animation: cycle 35s  -25s infinite, starry 35s -25s infinite;
	}
	#starry{
		display: none;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	#starry.hdc8_active{
		display: block;
		margin:0 auto;
	}
	@-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: .3}
	}
	@keyframes breathing{
		0% {opacity: 1}
		50%{opacity: .3}
	}
	@-webkit-keyframes strobing{
		0% {opacity: 1}
		50%{opacity: .3}
	}
	@keyframes strobing{
		0% {opacity: 1}
		50%{opacity: .3}
	}
	@-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: red}
		15%		{background-color: orange}
		30%		{background-color: yellow}
		45%		{background-color: #00CB07}
		60%		{background-color: #07A9FF}
		75%		{background-color: #1044FF}
		90%		{background-color: #a12fd9}
		100%	{background-color: red}
	}
	@keyframes cycle{
		0%		{background-color: red}
		15%		{background-color: orange}
		30%		{background-color: yellow}
		45%		{background-color: #00CB07}
		60%		{background-color: #07A9FF}
		75%		{background-color: #1044FF}
		90%		{background-color: #a12fd9}
		100%	{background-color: red}
	}
	@-webkit-keyframes rainbow{
		0%  	{-webkit-filter:hue-rotate(359deg);}
		100%	{-webkit-filter:hue-rotate(0deg);}
	}
	@keyframes rainbow{
		0%  	{-webkit-filter:hue-rotate(359deg);filter:hue-rotate(359deg)}
		100%	{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}
	}
	@-webkit-keyframes wave{
		0%  	{background-position-x: 100%; background-size: 300% 100%; }
		100%	{background-position-x: -50%; background-size: 300% 100%; }
	}
	@keyframes wave{
		0%  	{background-position-x: 100%; background-size: 300% 100%; }
		100%	{background-position-x: -50%; background-size: 300% 100%; }
	}
	@-webkit-keyframes cpu{
		0%		{background-color: red}
		30%		{background-color: yellow}
		60%		{background-color: green}
		90%		{background-color: yellow;}
	}
	@keyframes cpu{
		0%		{background-color: red}
		30%		{background-color: yellow}
		60%		{background-color: green}
		90%		{background-color: yellow;}
	}

	@-webkit-keyframes quicksand {
		0%		{background-position-y:-10%;}
	    100%	{background-position-y: 200%;}
	}
	@keyframes quicksand {
		0%		{background-position-y:-10%;}
	    100%	{background-position-y: 200%;}
	}
	@-webkit-keyframes quicksand_logo{
		0% {background: #0a79ff;}
		10%{background: rgb(0,0,0);}
		20% {background: #ff2a79;}
		30%{background: rgb(0,0,0);}
		40% {background: #00fff4;}
		50%{background: rgb(0,0,0);}
		60%{background: #fd91f5;}
		70% {background: rgb(0,0,0);}
		80%{background: #ff2a79;}
		90% {background: rgb(0,0,0);}
		100%{background: #0a79ff;}
	}
	@keyframes quicksand_logo{
		0% {background: #0a79ff;}
		10%{background: rgb(0,0,0);}
		20% {background: #ff2a79;}
		30%{background: rgb(0,0,0);}
		40% {background: #00fff4;}
		50%{background: rgb(0,0,0);}
		60%{background: #fd91f5;}
		70% {background: rgb(0,0,0);}
		80%{background: #ff2a79;}
		90% {background: rgb(0,0,0);}
		100%{background: #0a79ff;}
	}
	@-webkit-keyframes jumping {
		0%		{bottom:-30%; left: 20%;}
		25%		{bottom:30%; left:20%;}
		50%		{bottom:-15%; left: -30%;}
		75%		{bottom:20%; left: -30%;}
	}
	@keyframes jumping {
		0%		{bottom:-15%; left: 20%;}
		25%		{bottom:30%; left:20%;}
		50%		{bottom:-15%; left: -30%;}
		75%		{bottom:20%; left: -30%;}
	}
	@-webkit-keyframes ripple {
		0%		{
			   -webkit-transform: scale(1);
			        opacity: 1;
		}
		100%	{
			   -webkit-transform: scale(19);
			        opacity: .2;
		}
	}
	@keyframes ripple {
		0%		{
			   -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
			        opacity: 1;
		}
		100%	{
			   -moz-transform: scale(19);
			    -ms-transform: scale(19);
			     -o-transform: scale(19);
			        transform: scale(19);
			        opacity: .2;
		}
	}
	@-webkit-keyframes reactive {
		0%		{bottom:14%; left: -38%;opacity: 1;}
		13%		{bottom:14%; left: -38%;opacity: .2;}
		14%		{opacity: 0;}
		15%		{bottom:19%; left:-8%;opacity: 1;}
		23%		{bottom:19%; left:-8%;opacity: 0.2;}
		24%		{opacity: 0;}
		25%		{bottom:20%; left:-51%;opacity: 1;}
		33%		{bottom:20%; left:-51%;opacity: 0.2;}
		34%		{opacity: 0;}
		35%		{bottom:24%; left:-25%;opacity: 1;}
		48%		{bottom:24%; left:-25%;opacity: 0.2;}
		49%		{opacity: 0;}
		50%		{bottom:15%; left: -16%;opacity: 1;}
		58%		{bottom:15%; left: -16%;opacity: 0.2;}
		59%		{opacity: 0;}
		60%		{bottom:24%; left: -9%;opacity: 1;}
		73%		{bottom:24%; left: -9%;opacity: 0.2;}
		74%		{opacity: 0;}
		75%		{bottom:24%; left: -35%;opacity: 1;}
		83%		{bottom:24%; left: -35%;opacity: 0.2;}
		84%		{opacity: 0;}
		85%		{bottom:24%; left: -41%;opacity: 1;}
		98%		{bottom:24%; left: -41%;opacity: 0.2;}
		99%		{opacity: 0;}
		100%	{bottom:14%; left: -38%;opacity: 1;}
	}
	@keyframes reactive {
		0%		{bottom:14%; left: -38%;opacity: 1;}
		13%		{bottom:14%; left: -38%;opacity: .2;}
		14%		{opacity: 0;}
		15%		{bottom:19%; left:-8%;opacity: 1;}
		23%		{bottom:19%; left:-8%;opacity: 0.2;}
		24%		{opacity: 0;}
		25%		{bottom:20%; left:-51%;opacity: 1;}
		33%		{bottom:20%; left:-51%;opacity: 0.2;}
		34%		{opacity: 0;}
		35%		{bottom:24%; left:-25%;opacity: 1;}
		48%		{bottom:24%; left:-25%;opacity: 0.2;}
		49%		{opacity: 0;}
		50%		{bottom:15%; left: -16%;opacity: 1;}
		58%		{bottom:15%; left: -16%;opacity: 0.2;}
		59%		{opacity: 0;}
		60%		{bottom:24%; left: -9%;opacity: 1;}
		73%		{bottom:24%; left: -9%;opacity: 0.2;}
		74%		{opacity: 0;}
		75%		{bottom:24%; left: -35%;opacity: 1;}
		83%		{bottom:24%; left: -35%;opacity: 0.2;}
		84%		{opacity: 0;}
		85%		{bottom:24%; left: -41%;opacity: 1;}
		98%		{bottom:24%; left: -41%;opacity: 0.2;}
		99%		{opacity: 0;}
		100%	{bottom:14%; left: -38%;opacity: 1;}
	}
	@-webkit-keyframes starry{
		0%		{bottom:28%; left:27%;opacity: 1;}
		13%		{bottom:28%; left:27%;opacity: 0.2;}
		14%		{opacity: 0;}
		15%		{bottom:40%; left:20%;opacity: 1;}
		23%		{bottom:40%; left:20%;opacity: 0.2;}
		24%		{opacity: 0;}
		25%		{bottom:65%; left:29%;opacity: 1;}
		33%		{bottom:65%; left:29%;opacity: 0.2;}
		34%		{opacity: 0;}
		35%		{bottom:50%; left:20%;opacity: 1;}
		48%		{bottom:50%; left:20%;opacity: 0.2;}
		49%		{opacity: 0;}
		50%		{bottom:53%; left: 50%;opacity: 1;}
		58%		{bottom:53%; left: 50%;opacity: 0.2;}
		59%		{opacity: 0;}
		60%		{bottom:51%; left: 78%;opacity: 1;}
		73%		{bottom:51%; left: 78%;opacity: 0.2;}
		74%		{opacity: 0;}
		75%		{bottom:48%; left: 60%;opacity: 1;}
		83%		{bottom:48%; left: 60%;opacity: 0.2;}
		84%		{opacity: 0;}
		85%		{bottom:38%; left: 49%;opacity: 1;}
		98%		{bottom:38%; left: 49%;opacity: 0.2;}
		99%		{opacity: 0;}
		100%	{bottom:28%; left:27%;opacity: 1;}
	}
	@keyframes starry{
		0%		{bottom:28%; left:27%;opacity: 1;}
		13%		{bottom:28%; left:27%;opacity: 0.2;}
		14%		{opacity: 0;}
		15%		{bottom:40%; left:20%;opacity: 1;}
		23%		{bottom:40%; left:20%;opacity: 0.2;}
		24%		{opacity: 0;}
		25%		{bottom:65%; left:29%;opacity: 1;}
		33%		{bottom:65%; left:29%;opacity: 0.2;}
		34%		{opacity: 0;}
		35%		{bottom:50%; left:20%;opacity: 1;}
		48%		{bottom:50%; left:20%;opacity: 0.2;}
		49%		{opacity: 0;}
		50%		{bottom:53%; left: 50%;opacity: 1;}
		58%		{bottom:53%; left: 50%;opacity: 0.2;}
		59%		{opacity: 0;}
		60%		{bottom:51%; left: 78%;opacity: 1;}
		73%		{bottom:51%; left: 78%;opacity: 0.2;}
		74%		{opacity: 0;}
		75%		{bottom:48%; left: 60%;opacity: 1;}
		83%		{bottom:48%; left: 60%;opacity: 0.2;}
		84%		{opacity: 0;}
		85%		{bottom:38%; left: 49%;opacity: 1;}
		98%		{bottom:38%; left: 49%;opacity: 0.2;}
		99%		{opacity: 0;}
		100%	{bottom:28%; left:27.52%;opacity: 1;}
	}
/* ---------- END color effect ---------- */
/* ---------- SEC_tech ---------- */
	#hdc8 .hdc8_sec_tech{
		background: center top no-repeat;
		position: relative;
		margin-top: -100px;
	}
	#hdc8 .hdc8_sec_tech .hdc8_container{
		width: 1200px;
		padding:0 20px 70px;
		margin: 0 auto;
	}
	#hdc8 .hdc8_sec_tech .hdc8_content{
		width: 630px;
		background: transparent;
		display: inline-block;
		position: relative;
		z-index: 1;
	}
	#hdc8 .hdc8_sec_tech .hdc8_content h3,
	#hdc8 .hdc8_sec_tech .hdc8_content p{
		text-align: left;
	}
	#hdc8 .hdc8_sec_tech .hdc8_kbbg{
		width: 1034px;
		height: 780px;
		display: inline-block;
		position: absolute;
		left:39%;
		top:125px;
		background: black 0 0 no-repeat;
	}
	#hdc8_key{
		position: absolute;
		left: 37%;
    	top: 12.5%;
    	opacity: 1;
	}

	#hdc8 .hdc8_sec_tech .hdc8_color_table{
		width: 540px;
		margin:30px 0 60px;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li{
		display: inline-block;
		padding:15px 35px;
		margin-left: -5px;
		position: relative;
		cursor: pointer;
		border:3px solid transparent;
		border-bottom: none;
		border-radius: 2px 2px 0 0;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:first-child{
		margin-left: 0;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:before{
		content:"";
		display: block;
		width: 1px;
		height: 20px;
		background: #666666;
		position: absolute;
		left: 0;
		top: 15px;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li h3{
		margin:0;
		text-align: center;
		color: #666666;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li.hdc8_active{
		border-color:white;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:first-child:before,
	#hdc8 .hdc8_sec_tech .hdc8_title li.hdc8_active:before,
	#hdc8 .hdc8_sec_tech .hdc8_title li.hdc8_active+li:before{
		display: none;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(1).hdc8_active h3{
		color:#C1272D;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(1).hdc8_active{
		background: rgb(58, 11, 13);
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(2).hdc8_active h3{
		color:#5799ff;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(2).hdc8_active{
		background: #475469;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(3).hdc8_active h3{
		color:#988374;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(3).hdc8_active{
		background: rgb(68, 57, 49);
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(4).hdc8_active h3{
		color:#999999;
	}
	#hdc8 .hdc8_sec_tech .hdc8_title li:nth-child(4).hdc8_active{
		background: rgb(55,55,55);
	}
	#hdc8 .hdc8_sec_tech .hdc8_tcontent {
		max-height: 106px;
		overflow: hidden;
		background: rgba(75,75,75,.4);
		box-sizing: border-box;
		padding:20px;
		border:3px solid white;
		border-radius: 2px;
		margin-top: -3px;
	}
	#hdc8 .hdc8_sec_tech .hdc8_tcontent li{
		display: none;
		text-align: left;
		color:#C7CFDD;
		line-height: 20px;
	}
	#hdc8 .hdc8_sec_tech .hdc8_tcontent li.hdc8_active{
		display: block;
	}

	#hdc8 .hdc8_sec_tech .hdc8_repeat{
		display: inline-block;
		vertical-align: top;
		text-align: justify;
		width: 50%;
		padding-right: 20px;
		box-sizing: border-box;
	}
	#hdc8 .hdc8_sec_tech .hdc8_repeat:last-child{
		max-width: 302px;
		margin-left: -4px;
		padding-right: 0;
	}
/* ---------- END SEC_tech ---------- */
/* ---------- SEC_custom ---------- */
	#hdc8 .hdc8_sec_custom{
		background: black center top no-repeat;
		background-size: 1920px;
	}
	#hdc8 .hdc8_sec_custom .hdc8_container{
		width: 1200px;
		padding:200px 0 125px;
		margin: 0 auto;
	}
	#hdc8 .hdc8_sec_custom .hdc8_content{
		width: 100%;
		min-height: 295px;
		margin-top: 130px;
		position: relative;
	}
	#hdc8 .hdc8_sec_custom li{
		display: inline-block;
		width: 33%;
		margin-left: -4px;
	}
	#hdc8 .hdc8_sec_custom li:first-child{
		margin-left: 0;
	}
	#hdc8 .hdc8_sec_custom .hdc8_cover{
		width: 110%;
		cursor: pointer;
		box-shadow: 0 0 20px 3px rgba(0,0,0,.4);
		-webkit-transform: perspective(700px) rotateY(28deg);
		   -moz-transform: perspective(700px) rotateY(28deg);
		    -ms-transform: perspective(700px) rotateY(28deg);
		     -o-transform: perspective(700px) rotateY(28deg);
		        transform: perspective(700px) rotateY(28deg);
		-webkit-transition: all .8s ease;
		   -moz-transition: all .8s ease;
		    -ms-transition: all .8s ease;
		     -o-transition: all .8s ease;
		        transition: all .8s ease;
	}
	#hdc8 .hdc8_sec_custom li.hdc8_active .hdc8_cover{
		width: 100%;
		max-width: 950px;
		box-shadow: 0 0 30px 5px rgba(0,0,0,.8);
		cursor: default;
		position: absolute;
		top: -285px;
		left: 0;
		right: 0;
		margin:auto;
		z-index: 2;
		/*pointer-events: none;*/
		-webkit-transform: perspective(700px) rotateY(0deg);
		   -moz-transform: perspective(700px) rotateY(0deg);
		    -ms-transform: perspective(700px) rotateY(0deg);
		     -o-transform: perspective(700px) rotateY(0deg);
		        transform: perspective(700px) rotateY(0deg);
	}
/* ---------- END SEC_custom ---------- */
/* ---------- SEC_all ---------- */
	#hdc8 .hdc8_sec_all{
		position: relative;
	}
	#hdc8 .hdc8_sec_all .hdc8_container{
		width: 1200px;
		padding:70px 0 0;
		margin: 0 auto;
	}
	#hdc8 .hdc8_sec_all .hdc8_content{
		background: #171717;
		padding:1px 0 31px 0;
	}
	#hdc8 .hdc8_sec_all .hdc8_contentwrap{
		width: 1200px;
		margin: 0 auto;
		padding-left: calc(290px + 8%);
		box-sizing: border-box;
	}
	#hdc8 .hdc8_sec_all .hdc8_contentwrap h3,
	#hdc8 .hdc8_sec_all .hdc8_contentwrap p{
		text-align: left;
		position: relative;
		z-index: 2;
	}
	#hdc8 .hdc8_sec_all .hdc8_contentwrap .hdc8_note{
		width: 100%;
		margin-top: 20px;
		position: relative;
		z-index: 2;
	}
	#hdc8 .hdc8_sec_all span{
		display: block;
		position: relative;
		opacity: 0;
		height: 0;
		padding-bottom: 319px;
	}
	#hdc8 .hdc8_sec_all .hdc8_all_pic{
		width: 100%;
		height: 609px;
		/*padding-bottom: 32%;*/
		max-width: 1920px;
		margin:0 auto;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-size: 1920px;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	#hdc8 .hdc8_sec_all .hdc8_all_pic .hdc8_img{
		position: absolute;
		width: 200px;
		height: 200px;
		left: 20%;
		bottom: 0;
	}
/* ---------- END SEC_all ---------- */
/* ---------- SEC_hotkeys ---------- */
	#hdc8 .hdc8_sec_hotkeys {
		background-repeat: no-repeat;
		background-position: center top;
		position: relative;
	}
	#hdc8 .hdc8_sec_hotkeys .hdc8_container{
		width: 1200px;
		padding-top:90px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
	#hdc8 .hdc8_sec_hotkeys .hdc8_desciption{
		margin: 0 auto 30px;
	}
	
	#hdc8 .hdc8_htbg{
		width: 100%;
		max-width: 1920px;
		height: 0;
		padding-bottom: 46%;
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center bottom;
		position: absolute;
		/*top:50px;*/
		bottom: 180px;
		left: 0;
		right: 0;
		margin:0 auto;
		z-index: 0;
	}
	#hdc8 .hdc8_sec_hotkeys span{
		display: block;
		width: 100%;
		height: 0;
		opacity: 0;
		padding-bottom: 47%;
	}
	#hdc8 .hdc8_sec_banner{
		width: 100%;
		height: 245px;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 1920px;
		position: relative;
		z-index: 2;
	}
/* ---------- END SEC_hotkeys ---------- */
/* ---------- SEC_hktable ---------- */
	#hdc8 .hdc8_sec_hktable{
		margin-top: -30px;
		position: relative;
		background-repeat: no-repeat;
		background-position: top center;
	}
	#hdc8 .hdc8_sec_hktable h2{
		margin-bottom: 90px;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_container{
		padding: 190px 0 150px;
		width: 1200px;
		margin:0 auto;
	}

	#hdc8 .hdc8_sec_hktable .hdc8_keyboard{
		margin: 50px auto 30px;
		position: relative;
		text-align: center;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_keyboard  img{
		width: 100%;
		max-width: 1162px;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_keyboard li,
	#hdc8 .hdc8_sec_hktable > img{
		position: absolute;
		top: 0;
		left: 0;
		right:0;
		margin:auto;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_keyboard li.hdc8_active{
		opacity: 1;
		pointer-events: all;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title{
		display: inline-block;
		vertical-align: top;
		width: 50%;
		min-width: 575px;
		padding:20px;
		padding-right: 0;
		text-align: left;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title li{
		display: inline-block;
		position: relative;
		min-width: 275px;
		margin-right: 10px;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title h3{
		padding-right: 10px;
		margin:7px 0;
		color:#666666;
		cursor:pointer;
		text-align: left;
		-webkit-transition: color .25s ease;
		   -moz-transition: color .25s ease;
		    -ms-transition: color .25s ease;
		     -o-transition: color .25s ease;
		        transition: color .25s ease;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title li:nth-child(2n-1):after{
		content:"";
		display: block;
		width: 2px;
		height: 20px;
		background:#666666;
		position: absolute;
		top: 10px;
		right: 0;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title h3:hover{
		color:#cccccc;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_title h3.hdc8_active{
		color:white;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_mcontent{
		display: inline-block;
		vertical-align: top;
		width: 47%;
		min-width: 574px;
		height: 265px;
		margin:20px 0;
		padding:20px 20px 30px 20px;
		box-sizing: border-box;
		background:rgba(75,75,75,.4);
	}
	#hdc8 .hdc8_sec_hktable .hdc8_mcontent li{
		display: none;
		opacity: 0;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_mcontent li.hdc8_active{
		display: block;
		opacity: 1;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_mcontent h3{
		margin: 10px 0;
		text-align: left;
	}
	#hdc8 .hdc8_sec_hktable .hdc8_mcontent p{
		text-align: left;
		font-size: 1.2rem;
	}
/* ---------- END SEC_hktable ---------- */
/* ---------- RWD ---------- */
	@media screen and (max-width: 1366px) {
		#hdc8 .hdc8_sec_topbg,
		#hdc8 .hdc8_sec_topbg_stable{
			background-size: 140%;
			padding-bottom: 70%;
		}
		#hdc8 .hdc8_sec_top .hdc8_container{
			width: 90%;
			padding-bottom: 70%;
		}

		#hdc8 .hdc8_sec_sync .hdc8_container{
			width: 90%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_controls span{
			height: 0;
			padding-bottom: 35%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_box{			
			padding-bottom: 55%;
			bottom:22%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_color,
		#starry{
			bottom:6%;
		}
		.hdc8_reactive{
			-webkit-transform: translateY(25%);
			   -moz-transform: translateY(25%);
			    -ms-transform: translateY(25%);
			     -o-transform: translateY(25%);
			        transform: translateY(25%);
		}
		#hdc8 .hdc8_sec_sync .hdc8_color,
		#quicksand_color,
		#starry{
			padding-bottom: 27%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_logo_color{
			padding-bottom: 4%;
			bottom:8%;
		}		
		#hdc8 .hdc8_sec_sync .hdc8_bg{
			background-size: 112%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_note{
			padding: 50px 0 25px;
		}
		#hdc8 .hdc8_sec_all .hdc8_contentwrap{
			width: 90%;
		}

		#hdc8 .hdc8_sec_hotkeys span{
			padding-bottom: 30%;
		}
		#hdc8 .hdc8_htbg{
			bottom:200px;
		}
	}
	@media screen and (max-width: 1250px){
		#hdc8 .hdc8_sec_hktable .hdc8_keyboard,
		#hdc8 .hdc8_sec_hktable .hdc8_content{
			display: block;
			width: 100%;
			text-align: center;
		}
		#hdc8 .hdc8_sec_hktable .hdc8_content{
			margin:30px auto 0;
		}
	}
	@media screen and (max-width: 1200px) {
		#hdc8 .hdc8_sec_detach .hdc8_container,
		#hdc8 .hdc8_sec_sync .hdc8_container,
		#hdc8 .hdc8_sec_tech .hdc8_container,
		#hdc8 .hdc8_sec_custom .hdc8_container,
		#hdc8 .hdc8_sec_all .hdc8_container,
		#hdc8 .hdc8_sec_hotkeys .hdc8_container,
		#hdc8 .hdc8_sec_hktable .hdc8_container{
			width: 90%;
		}
		#hdc8 .hdc8_sec_detach .hdc8_container{
			padding-top:180px;
		}
		#hdc8 .hdc8_sec_detach .hdc8_content {
			width: 33%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_controls ul{
			width: 100%;
		}
		
		#hdc8 .hdc8_sec_all .hdc8_container{
			padding-top: 30px;
		}
		#hdc8 .hdc8_sec_all .hdc8_all_pic{
			background-size: 150%;
			bottom:calc(30px + 2%);
		}
		#hdc8 .hdc8_sec_all .hdc8_contentwrap{
			padding-left: 30%;
		}
		
		#hdc8 .hdc8_htbg{
			bottom: 22%;
		}
		#hdc8 .hdc8_sec_banner{
			height: 0;
			padding-bottom: 19%;
			background-size: 150%;
		}
	}
	@media screen and (max-width: 1150px){
		/* ---------- SEC_feature tag ---------- */
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p{
				top: 26%;
				left: -10%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p:after{
				width: 20px;
				height: 2px;
				top: 45px;
				right: -4px;
				-webkit-transform: skewY(40deg);
				   -moz-transform: skewY(40deg);
				    -ms-transform: skewY(40deg);
				     -o-transform: skewY(40deg);
				        transform: skewY(40deg);
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p{
				left: -10%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p:after{
				width: 40px;
				right: -50px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p{
				right: -9%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:after{
				display: none;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:before{
				width: 12px;
				top: 30px;
				left: 65px;
			}
		/* ---------- END SEC_feature tag ---------- */
	}
	@media screen and (max-width: 1024px) {
		#hdc8 .hdc8_sec_top .hdc8_img{
			width: 150px;
			height: 150px;
		}		

		#hdc8 .hdc8_sec_feature .hdc8_kb_descript > p{
			width: 90%;
		}

		#hdc8 .hdc8_sec_detach .hdc8_container{
			padding:130px 0 100px;
			position: relative;
		}
		#hdc8 .hdc8_sec_detach .hdc8_detachable,
		#hdc8 .hdc8_sec_detach .hdc8_content {
			display: block;
			width: 100%;
		}
		#hdc8 .hdc8_sec_detach .hdc8_detachable{
			position: absolute;
			bottom: 110px;
			left: 0;
			right: 0;
		}
		#hdc8 .hdc8_sec_detach .hdc8_content{
			padding-bottom: 650px;
		}
		#hdc8 .hdc8_sec_detach .hdc8_content p,
		#hdc8 .hdc8_sec_detach .hdc8_content h2{
			text-align: center;
		}
		#hdc8 .hdc8_sec_detach .hdc8_content p{
			padding-left: 0px;
		}

		#hdc8 .hdc8_sec_tech .hdc8_content{
			margin-top: 200px;
		}
		#hdc8 .hdc8_sec_tech .hdc8_kbbg{
			width: 100%;
			left:0;
			top:100px;
			background-size: contain;
		}
		#hdc8_key{
			width: 20%;
			left: 37%;
		}
		#hdc8 .hdc8_sec_tech .hdc8_container{
			padding-bottom: 30px;
		}
		
		#hdc8 .hdc8_sec_custom li{
			margin-left: -30px;
		}
		#hdc8 .hdc8_sec_custom .hdc8_cover{
			width: 140%;			
		-webkit-transform: perspective(700px) rotateY(45deg);
		   -moz-transform: perspective(700px) rotateY(45deg);
		    -ms-transform: perspective(700px) rotateY(45deg);
		     -o-transform: perspective(700px) rotateY(45deg);
		        transform: perspective(700px) rotateY(45deg);
		}

		#hdc8 .hdc8_sec_all .hdc8_container{
			padding-top: 0px;
		}
	}
	@media screen and (max-width: 930px) {
		#hdc8 .hdc8_sec_feature .hdc8_keyboard{
			width: 550px;
			height: 0;
			padding-bottom: 380px;
			background-size: contain;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_descript > p{
			padding:23px 0 130px;
		}
		/* ---------- SEC_feature tag ---------- */
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(1) > p{
				top:16%;
				left: -17%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p{
				top:26%;
				left: -17%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(2) > p:after{
				width: 15px;
				right: 0px;
				top:48px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p{
				top: 67%;
				left: -17%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(3) > p:after{
				width: 20px;
				right: -30px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(5) > p{
				top: 11%;
				right: -14%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p{
				top: 3%;
				right:5%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(4) > p:after{
				width: 110px;
				left: -120px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p{
				top: 59%;
				right: -14%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:after{
				width: 10px;
				left: -20px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(6) > p:before{
				top: -24px;
				left: -100px;
				-webkit-transform: skewY(40deg);
				   -moz-transform: skewY(40deg);
				    -ms-transform: skewY(40deg);
				     -o-transform: skewY(40deg);
				        transform: skewY(40deg);
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p{
				top: 82%;
				left: -14%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:after{
				width: 20px;
				right: -30px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(7) > p:before{
				width: 60px;
				top: -26px;
				right: -89px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p{
				top:35%;
				right: -16%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(8) > p:after{
				width: 20px;
				right: -30px;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag > li:nth-child(9) > p{
				top:82%;
			}
		/* ---------- END SEC_feature tag ---------- */
		
		#hdc8 .hdc8_sec_all .hdc8_contentwrap{
			padding-left: 0;
		}
		#hdc8 .hdc8_sec_all span{
			padding-bottom: 50%;
		}
		#hdc8 .hdc8_sec_all .hdc8_all_pic{
			bottom:0
		}
	}
	@media screen and (max-width: 768px) {
		#hdc8 h2 {
			font-size: 35px;
		}
		#hdc8 .hdc8_mobile_off{
			display: none;
		}
		#hdc8 .hdc8_mobile_on{
			display: block;
		}

		#hdc8 .hdc8_sec_top{
			background: center top no-repeat;					
			background-size: 130%;
		}
		#hdc8 .hdc8_sec_top .hdc8_container{
			height: 100px;
		}
		#hdc8 .hdc8_sec_top .hdc8_img{
			position: relative;
			padding-top: 72%;
		}

		#hdc8 .hdc8_sec_feature{
			background: transparent 75% top no-repeat;
		}
		#hdc8 .hdc8_sec_feature .hdc8_container{
			padding-top: 30px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li p{
			width: 43%;
			min-width: 220px;
			margin:0 auto;
			padding:5px 0 5px 40px;
			text-align: left;
			position: relative;
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li p:before{
			display: block;
			width: 20px;
			height: 20px;
			border:1px solid white;
			border-radius: 10px;
			background: transparent;
			position: absolute;
			top:5px;
			left: 0;
			text-align: center;
			line-height: 18px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(1) p:before{
			content: "A";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(2) p:before{
			content: "B";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(3) p:before{
			content: "C";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(4) p:before{
			content: "D";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(5) p:before{
			content: "E";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(6) p:before{
			content: "F";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(7) p:before{
			content: "G";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(8) p:before{
			content: "H";
		}
		#hdc8 .hdc8_sec_feature .hdc8_tag_descript li:nth-child(9) p:before{
			content: "I";
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_descript{
			margin-top: -100px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_descript:before{
			display: none;
		}
		#hdc8 .hdc8_sec_feature .hdc8_kb_descript > p{
			padding:175px 0 100px;
		}
		#hdc8 .hdc8_sec_feature .hdc8_keyboard{
			width: 100%;
			height: 0;
			padding-bottom: 50%;
			background-size: contain;
			margin: 30px 0;
			background-image: url('../img/RGB-Claymore-Core-768.png');
		}
		/* ---------- feature tags ----------*/
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(1){
				/*bottom:94%;*/
				right: 84%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(2){
				/*bottom:67%;*/
				right: 77%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(3){
				bottom: 31%;
				right: 64%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(4){
				/*bottom: 91%;*/
				right: 54%;
			}
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(5){
				/*bottom: 92%;*/
				right: 45%;
			}
			/*#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(6){
				bottom: 68%;
				right: -12%;
			}*/
			#hdc8 .hdc8_sec_feature .hdc8_kb_tag li:nth-child(7){
				bottom: 37%;
				right: 45%;
			}
		/* ---------- END feature tags ----------*/
		#hdc8 .hdc8_sec_sync{
			overflow: initial;
		}
		#hdc8 .hdc8_sec_sync .hdc8_container{
			padding-top: 0px;
			margin-top: -50px;
		}
		#hdc8 .hdc8_sec_sync .hdc8_controls span{
			padding-bottom: 40%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_box{
			bottom:240px;
			padding-bottom: 70%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_bg{
			background-size: 150%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_logo_color{
			bottom:18px;
		}		
		.hdc8_reactive{
			-webkit-transform: translate(2%,30%) scale(1.5);
			   -moz-transform: translate(2%,30%) scale(1.5);
			    -ms-transform: translate(2%,30%) scale(1.5);
			     -o-transform: translate(2%,30%) scale(1.5);
			        transform: translate(2%,30%) scale(1.5);
		}
		.hdc8_starrynight{
			-webkit-transform: translate(23%,29%);
			   -moz-transform: translate(23%,29%);
			    -ms-transform: translate(23%,29%);
			     -o-transform: translate(23%,29%);
			        transform: translate(23%,29%);
			background-size: 135%;
		}
		#hdc8 .hdc8_sec_sync .hdc8_controls li{
			padding:5px 0;
		}
		#hdc8 .hdc8_sec_sync .hdc8_controls li img{
			width: 40px;
			height: 40px;
		}
		#hdc8 #colorpicker {
			position: relative;
			margin:0 auto;
			bottom:0;
		}

		#hdc8 .hdc8_sec_tech{
			margin-top: -150px;
		}
		#hdc8 .hdc8_sec_tech .hdc8_container{
			padding-bottom: 0px;
		}
		#hdc8 .hdc8_sec_tech .hdc8_kbbg{
			width: 100%;
			left:0;
			top:100px;
			background-size: 120%;
		}
		#hdc8_key{
			width: 25%;
			left: 44%;
		}
		#hdc8 .hdc8_sec_tech .hdc8_content,
		#hdc8 .hdc8_sec_tech .hdc8_color_table{
			width: 100%;
		}
		#hdc8 .hdc8_sec_tech .hdc8_title li{
			width: 25%;
			padding:15px 5px;
			box-sizing: border-box;
		}
		#hdc8 .hdc8_sec_tech .hdc8_tcontent{
			max-height: none;
		}
		#hdc8 .hdc8_sec_tech .hdc8_content h3,
		#hdc8 .hdc8_sec_tech .hdc8_content p{
			text-align: center;
		}
		#hdc8 .hdc8_sec_tech .hdc8_content h3{
			font-size: 16px;
		}

		#hdc8 .hdc8_sec_custom{
			background-position: 20% top;
		}
		#hdc8 .hdc8_sec_custom .hdc8_container{
			padding-bottom: 100px;
		}
		#hdc8 .hdc8_sec_custom li{
			margin-left: -50px;
		}
		#hdc8 .hdc8_sec_custom .hdc8_cover{
			width: 180%;			
		-webkit-transform: perspective(700px) rotateY(60deg);
		   -moz-transform: perspective(700px) rotateY(60deg);
		    -ms-transform: perspective(700px) rotateY(60deg);
		     -o-transform: perspective(700px) rotateY(60deg);
		        transform: perspective(700px) rotateY(60deg);
		}
		#hdc8 .hdc8_sec_custom li.hdc8_active .hdc8_cover{
			top:-100px;
		}

		#hdc8 .hdc8_htbg{
			bottom: 0;
		}
		#hdc8 .hdc8_sec_mhotkeys{
			background-color: #232323;
		}
		#hdc8 .hdc8_sec_banner{
			background-position: 20% top;
			height: 122px;
			padding-bottom: 0;
			background-size: 768px;
		}
		#hdc8 .hdc8_sec_bcontent{
			background: #9d1e23;
			margin-top: -15px;
			text-align: center;
			padding:50px 0 20px;
			/*margin-bottom: 124px;*/
			position: relative;
			z-index: 2;
		}
		#hdc8 .hdc8_sec_bcontent>p{
			width: 90%;
			margin:0 auto 30px;
		}
		#hdc8 .hdc8_sec_bcontent>img{
			width: 100%;
			max-width: 415px;
		}
	
		#hdc8 .hdc8_sec_hktable{
			background-position: 5% top ;
		}
		#hdc8 .hdc8_sec_hktable .hdc8_container{
			padding-top: 130px;
		}
		#hdc8 .hdc8_sec_hktable h2{
			margin-bottom: 0;
		}
		#hdc8 .hdc8_sec_hktable .hdc8_keyboard{
			margin-top: 20px;
		}

		#hdc8 .hdc8_sec_hktable .hdc8_title,
		#hdc8 .hdc8_sec_hktable .hdc8_mcontent,
		#hdc8 .hdc8_sec_hktable .hdc8_title li{
			min-width: 0;
			width: 100%;
		}
		#hdc8 .hdc8_sec_hktable .hdc8_title li h3{
			text-align: center;
			line-height: 18px;
		}
		#hdc8 .hdc8_sec_hktable .hdc8_title li:nth-child(2n-1):after{
			display: none;
		}
	}
	@media screen and (max-width: 680px){
		#hdc8 .hdc8_sec_detach .hdc8_content{
			padding-bottom: 110%;
		}
	}
	@media screen and (max-width: 500px){
		#hdc8 .hdc8_sec_tech .hdc8_kbbg{
			top:150px;
		}
	}
	@media screen and (max-width: 480px) {
		#hdc8 h2 {
			font-size: 30px;
		}
		#hdc8 h4{
			font-size: 14px;
		}

		#hdc8 .hdc8_sec_top .hdc8_container{
			height: 120px;
		}
		#hdc8 .hdc8_sec_top .hdc8_img{
			position: relative;
			padding-top: 80%;
		}

		#hdc8 .hdc8_sec_feature .hdc8_kb_descript > p {
		    padding: 120px 0 100px;
		}

		#hdc8 .hdc8_sec_detach .hdc8_container{
			padding-top: 100px;
		}

		#hdc8 .hdc8_sec_sync .hdc8_box{
			bottom:230px;
		}

		#hdc8 .hdc8_sec_tech .hdc8_desciption{
			margin-bottom: 0px;
		}
		#hdc8 .hdc8_sec_tech .hdc8_kbbg{
			width: 120%;
			position: relative;
			height: 350px;
			top: 0;
			left: -15%;
		}
		#hdc8 .hdc8_sec_tech .hdc8_content{
			margin-top: -100px;
		}
		#hdc8 .hdc8_sec_tech .hdc8_repeat{
			display: block;
			width: 100%;
		}
		#hdc8 .hdc8_sec_tech .hdc8_repeat:last-child{
			margin: 20px auto 0;
		}
		#hdc8 .hdc8_sec_custom .hdc8_content{
			margin-top: 100px;
			min-height: 300px;
		}
		#hdc8 .hdc8_sec_custom .hdc8_cover{
			width: 250%;			
		-webkit-transform: perspective(700px) rotateY(50deg);
		   -moz-transform: perspective(700px) rotateY(50deg);
		    -ms-transform: perspective(700px) rotateY(50deg);
		     -o-transform: perspective(700px) rotateY(50deg);
		        transform: perspective(700px) rotateY(50deg);
		}
		#hdc8 .hdc8_sec_custom li.hdc8_active .hdc8_cover{
			top:-100px;
		-webkit-transform: perspective(700px) rotateY(0deg) translateZ(100px);
		   -moz-transform: perspective(700px) rotateY(0deg) translateZ(100px);
		    -ms-transform: perspective(700px) rotateY(0deg) translateZ(100px);
		     -o-transform: perspective(700px) rotateY(0deg) translateZ(100px);
		        transform: perspective(700px) rotateY(0deg) translateZ(100px);
		}

		#hdc8 .hdc8_sec_hktable{
			background-position: 15% top ;
		}
	}
	@media screen and (max-width: 390px){
		#hdc8 .hdc8_sec_sync .hdc8_box{
			bottom:250px;
		}
		#hdc8 .hdc8_sec_sync .hdc8_logo_color{
			bottom:12px;
		}
		#hdc8 #colorpicker{
			margin-bottom: 50px;
		}
		#hdc8 .hdc8_sec_custom .hdc8_content {
			min-height: 200px;
		}
	}
	@media screen and (max-width: 390px) and (min-width: 340px){
		#hdc8 .hdc8_sec_custom .hdc8_content{
			min-height: 230px;
		}
	}
/* ---------- END RWD ---------- */