@charset 'utf-8';
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/myriadPro-regular.otf');
	font-weight: normal;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('../fonts/myriadPro-light.otf');
	font-weight: 300;
}
@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;
}
@font-face {
	font-family: 'gothicLt';
	src: url("../fonts/trade-gothic-lt-bold.ttf");
	font-weight: 600;
}
@font-face {
  font-family: 'Fjalla One';
  src: url('../fonts/FjallaOne-Regular.woff2') format('woff2'),
      url('../fonts/FjallaOne-Regular.woff') format('woff'),
      url('../fonts/FjallaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*-----RESET-----*/
	*{
		margin: 0;
		padding: 0;
	}
	#hd {
		margin: 0;
		padding:0;
		background-color: #000000;
	}
	#hd {
		background: #000000;
		color: #FFF;
		    overflow-x: hidden;
	}
	::selection {
		background: #1d2124;
		color: #CE0000;
	}
	::-moz-selection {
		background: #1d2124;
		color: #ffffff;
	}
	#hd * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-wrap: break-word;
		word-break: break-word;
	}

	#hd img {
		display: block;
		max-width: 100% !important;
		height: auto;
		border: none;
	}
	#hd a {
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 14px;
		text-decoration: none;
		color: #920000;
		font-weight: 600;
	}
	#hd a:hover {
		text-decoration: none;
		color: #d30000;
	}
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6 {
		font-family: 'TradeGothicLTPro', sans-serif;
		color: #FFF;
		line-height: 1.4rem;
		margin: 0;
		font-weight: normal;
	}
	#hd p ,
	#hd .p {
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 16px;
		font-weight: 300;
		letter-spacing: .5px;
		line-height: 1.5;
		margin: 0;
		padding-bottom: 20px;
		color: #FFF;
	}
	#hd b {
		display: block;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.5px;
	}
	#hd small {
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 12px;
		line-height: 13px;
		font-weight: 300;
	}
	#hd small.txt-red{
		font-weight: 600;
	}
	#hd ul {
		font-family: 'TradeGothicLTPro', sans-serif;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#hd ul li {
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 15px;
		color: #FFF;
	}
	#hd figure{
		margin:0;
		padding:0;
	}
	#fp-nav ul li .fp-tooltip{
		max-width: 300px;
		text-transform: uppercase;
	}
/*-----TXT-----*/
	#hd h1{
		font-family: 'TradeGothicLTPro', sans-serif;
	    font-size: 38px;
	    line-height: 1;
		font-weight: normal;
	    color: #fff !important;
	}
	#hd h1 span{
		font-size: 2.5em;
	}
	#hd h2{
		/*font-family: 'TradeGothicLTPro', sans-serif;*/
		font-family: 'TradeGothicLTPro', sans-serif;
		font-weight: 400;
		font-size: 44px;
		line-height: 1.2;
		padding-bottom:20px;
		position: relative;
		color:#fff !important;
	}
	#hd h3{
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 23px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
	#hd h4{
		font-family: 'TradeGothicLTPro', sans-serif;
		font-size: 28px;
		font-weight: 400;
		line-height: 1.3;
		text-transform: uppercase;
		margin-bottom: 15px;
	}
	#hd .txt-center{text-align: center; }
	#hd .txt-grey{
		color:#808080;
		font-weight: 400;
	}
	#hd a.hd-link {
		font-size: inherit;
		color: rgb(67, 153, 233);
		font-weight: 400;
		display: initial;
	}
	#hd a.hd-link svg path{
		stroke: rgb(67, 153, 233);
	}
	#hd a.hd-link:hover {
		color: white;
		opacity: 1;
	}
	#hd a.hd-link:hover svg path{
		stroke: #fff;
	}
/* 	#hd .title-pink{text-shadow: 0 0 10px #F700F9;}
	#hd .title-red{text-shadow: 0 0 10px #ff0000;}
	#hd .title-orange{text-shadow: 0 0 10px #ff7700;}
	#hd .title-yellow{text-shadow: 0 0 10px #fff100;}
	#hd .title-green{text-shadow: 0 0 10px #B6FF97;}
	#hd .title-blue{text-shadow: 0 0 10px #19e9f7;}
	#hd .title-blue2{text-shadow: 0 0 10px rgb(67, 153, 233);}
	#hd .title-blue3{text-shadow: 0 0 10px #0078FF;}
	#hd .title-cyan{text-shadow: 0 0 10px #82FFC8;}
	#hd .title-purple{text-shadow: 0 0 10px #6752FF;} */
	/*_:-ms-input-placeholder, :root #hd h2[class*="title-"] {background: transparent}*/
/*-----BLOCK-----*/
	#hd .w90{
		width: 90%;
		max-width: 1920px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	#hd .w1200,
	#hd .w1250,
	#hd .w1400,
	#hd .w1100,
	#hd .w1000{
	    width: 90%;
	    max-width: 1200px;
	    margin: 0 auto;
	    position: relative;
	}
	#hd .w1400 {max-width: 1400px; }
	#hd .w1250 {max-width: 1250px; }
	#hd .w1000 {max-width: 1000px; }
	#hd .w1100 {max-width: 1100px; }
	#hd .ib,
	#hd .col25,
	#hd .col30,
	#hd .col33,
	#hd .col40,
	#hd .col50,
	#hd .col60,
	#hd .col70{
		display: inline-block;
		margin-left: -5px;
		vertical-align: middle;
	}
	#hd .col25{width: 25%; }
	#hd .col30{width: 30%; }
	#hd .col33{width: 33%; }
	#hd .col40{width: 40%; }
	#hd .col50{width: 50%; }
	#hd .col60{width: 60%; }
	#hd .col70{width: 70%; }

	#hd .h750{height: 750px; }
	#hd .h680{height: 680px; }

	#hd .fleft {float: left; }
	#hd .fright {float: right; }

	#hd .hd-rtl{direction: rtl; }
	#hd .mobile-on{display: none; }

	#hd .hd-btn {
		display: inline-block;
		border: none;
		/* outline: none; */
		cursor: pointer;
		padding: 5px 20px;
		margin:20px 10px;
		font-family: 'TradeGothicLTPro', sans-serif;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		border-radius: 17px;
		position: relative;
		z-index: 1;
	}
	#hd .hd-btn:before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 17px;
		background: #0f0f0f;
	}
	#hd .hd-btn:after {
		content: '';
		display: block;
		width: calc(100% + 6px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -3px;
		z-index: -2;
		border-radius: 18px;
		background: #ff7700;
		background: -moz-linear-gradient(left, #ff7700 0%, #fff100 100%);
		background: -webkit-linear-gradient(left, #ff7700 0%, #fff100 100%);
		background: linear-gradient(to right, #ff7700 0%, #fff100 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7700', endColorstr='#fff100',GradientType=1 );
	}
	#hd .hd-btn:hover {
		color: #ff2b00;
	}


	#hd .hd-btn-r {
		display: inline-block;
		border: none;
		/* outline: none; */
		cursor: pointer;
		padding: 5px 20px;
		margin:20px 10px;
		font-family: 'TradeGothicLTPro', sans-serif;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		border-radius: 17px;
		position: relative;
		z-index: 1;
	}
	#hd .hd-btn-r:before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 17px;
		background: #0f0f0f;
	}
	#hd .hd-btn-r:after {
		content: '';
		display: block;
		width: calc(100% + 6px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -3px;
		z-index: -2;
		border-radius: 18px;
		background: #E40C50;
		background: -moz-linear-gradient(left, #E40C50 0%, #E02992 100%);
		background: -webkit-linear-gradient(left, #E40C50 0%, #E02992 100%);
		background: linear-gradient(to right, #E40C50 0%, #E02992 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7700', endColorstr='#fff100',GradientType=1 );
	}
	#hd .hd-btn-r:hover {
		color: #E40C50;
	}

/*-----SCROLL UP-----*/
	#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 #8D0000;
	    z-index: 999;
	    opacity: 0;
	}
	#scrollUp.hd-show {
	    opacity: 1;
	}
	#scrollUp:hover {
	    background-color: #8D0000;
	}
	#scrollUp:hover svg {
	    fill: #FFF;
	}
	#scrollUp svg {
	    display: block;
	    position: absolute;
	    margin: auto;
	    top: 0;
	    right: 0;
	    bottom: 5px;
	    left: 0;
	    fill: #8D0000;
	    -webkit-transform: rotateZ(270deg);
	    -moz-transform: rotateZ(270deg);
	    -ms-transform: rotateZ(270deg);
	    -o-transform: rotateZ(270deg);
	    transform: rotateZ(270deg);
	}


/*----- transition ---*/
	#hd a.hd-link,
	#kv .vid_btn,
	#switch_img li img{
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}

/*------------ KV -------------*/
	#hd #kv{
		position: relative;
		text-align: center;
		background-color: #000;
	}
	#kv .kv-info {
		background-position: center 0;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 32%;
		padding-bottom: 6%;
	}
	#kv .kv-info h2 {
		display: inline-block;
	}

/*------------ SWITCHES ---------*/
	#hd #switches{
		background-color: #141414;
		position: relative;
		overflow: hidden;
		padding:80px 0;
	}
	#hd #switches .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 130px;
		bottom: 30px;
		background-size: 90%;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	#hd #switches .info{
		position: relative;
		left: 50%;
	}
	#hd #switches h2{
		position: relative;
	}
	#hd #switches h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100% - 40px);
		width: 3px;
		background-color: #60DCF4;
		transform: skew(30deg);
		top: 10px;
		left: -60px;
	}
	#hd #switches h2+p{
		max-width: 650px;
	}
	#hd #switch_img li{
		display: inline-block;
		vertical-align: top;
		width: 16%;
		margin-left: -7px;
		margin: 30px 0 20px;
		padding: 10px 0;
		text-align: center;
		position: relative;
	}
	#hd #switch_img li p{
		font-size: 16px;
		letter-spacing: 1px;
		margin:10px 0;
	}
	#hd #switch_img li img{
		width: 70%;
		max-width: 110px !important;
		margin:0 auto;
		transform-origin: center bottom;
	}
	#hd #switch_img li.active img{
		-webkit-transform: scale(1.3);
		   -moz-transform: scale(1.3);
		    -ms-transform: scale(1.3);
		     -o-transform: scale(1.3);
		        transform: scale(1.3);
	}
	#hd #switch_img li.active::before{
		content: "";
		display: block;
		width: 75%;
		height: 75%;
		background-color: rgba(255,255,255,.3);
		position: absolute;
		top: 10px;
		left: 1%;
		transform: skew(30deg);
		border-bottom: 8px solid;
	}
	#hd #switch_img li.red.active:before{border-bottom: #ba1e00 8px solid;}
	#hd #switch_img li.brown.active:before{border-bottom: #684024 8px solid;}
	#hd #switch_img li.blue.active:before{border-bottom: #00bcd4 8px solid;}
	#hd #switch_img li.black.active:before{border-bottom: #555555 8px solid;}
	#hd #switch_img li.speedSilverd.active:before{border-bottom: #9e9e9e 8px solid;}
	#hd #switch_img li.silentRed.active:before{border-bottom: #e4715b 8px solid;}

	#hd #switch_content{min-height: 95px; }
	#hd #switch_content li{
		display: none;
	}
	#hd #switch_content li p{
		position: relative;
		font-size: 14px;
		line-height: 1.25;
		color:#999999;
		padding:0 20px 0 23px;
		max-width: 500px;
	}
	#hd #switch_content li p:before{
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		left: 11px;
		top: 5px;
		opacity: 1;
		border-radius: 50%;
	}
	#hd #switch_content li.active{
		display: block;
		-webkit-animation: fadeInFromBottom .5s forwards;
		-o-animation: fadeInFromBottom .5s forwards;
		animation: fadeInFromBottom .5s forwards;
	}
	#hd #switch_content li.red p:before{background-color: #ba1e00;}
	#hd #switch_content li.brown p:before{background-color: #684024;}
	#hd #switch_content li.blue p:before{background-color: #00bcd4;}
	#hd #switch_content li.black p:before{background-color: #555555;}
	#hd #switch_content li.speedSilverd p:before{background-color: #9e9e9e;}
	#hd #switch_content li.silentRed p:before{background-color: #e4715b;}

/*------------ cherry ----------*/
	#hd #cherry{
		padding: 50px 0;
		background-color: #1f1f1f;
		text-align: center;
	}
	#hd #cherry p img{
		display: inline;
		margin: 0;
	}
	#hd #cherry p img:nth-child(1){
		margin-right: 10px;
		position: relative;
		top: -5px;
	}
	#hd #cherry p img:nth-child(2){
		margin-left: 10px;
		position: relative;
		bottom: -5px;
	}
	#hd #cherry .w1200 > img{
		margin: auto;
		margin-bottom: 30px;
		width: 280px;
	}
	#hd #cherry .cherry_video{
		width: 42%;
		margin:  30px auto 0;
		min-width: 300px;
	}
	#hd #cherry .vidbox{
		width: 95%;
		height: 0;
		padding-bottom: 54%;
		margin: auto;
		position: relative;
		z-index: 1;
	}
	#hd #cherry .vidbox:before {
		content: '';
		display: block;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		position: absolute;
		top: -2px;
		left: -2px;
		background: #E40C50;
		background: -moz-linear-gradient(-45deg, #c50000 1%, #E40C50 50%, #7f0000 100%);
		background: -webkit-linear-gradient(-45deg, #c50000 1%,#E40C50 50%,#7f0000 100%);
		background: linear-gradient(135deg, #c50000 1%,#E40C50 50%,#7f0000 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c50000', endColorstr='#7f0000',GradientType=1 );
		z-index: -1;
	}
	#hd #cherry .vidbox img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		z-index: 1;
	}

/*------------ ARMOURY ----------*/
	#hd #armoury{
		padding: 50px 0 50px;
		background-color: #141414;
		background-position: 0 45%;
		background-size: 57% auto;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}
	#hd #armoury h2{
		position: relative;
	}
	#hd #armoury h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100%);
		width: 3px;
		background-color: #FFC200;
		transform: skew(30deg);
		top:-30px;
		left: -60px;
	}
	#hd #armoury .text{
		display: inline-block;
		width: calc(40% - 4px);
	}
	#hd #armoury .text .hd-btn:hover{
		color: #FFC200;
	}
	#hd #armoury .pic{
		display: inline-block;
		width: calc(60% - 4px);
		text-align: center;
		position: relative;
		left: 50px;
	}
	#hd #armoury img{
		margin:20px auto 30px;
		width: 90%;
		max-width: 500px !important;
		position: relative;
		z-index: 2;
	}

/*------------ built ----------*/
 	#hd #built{
		padding: 50px 0;
		position: relative;
		background-size: cover;
		background-position: 60% center; 
		background-repeat: no-repeat;
		background-color: #141414;
	}
	#hd #built .text{
		margin-top: 6.5%;
	}
	#hd #built .text > div{
		width: 70%;
	}
	#hd #built h2{
		position: relative;
		margin-right: -30px;
	}
	#hd #built h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100%);
		width: 3px;
		background-color: #FF4557;
		transform: skew(30deg);
		top:-30px;
		left: -60px;
	}
	#hd #built .ppic{
		position: absolute;
		bottom: 36%;
		right: 32%;
	}

/*------------ play ----------*/
	#hd #play{
		padding: 50px 0;
		position: relative;
		overflow: hidden;
	}
	#hd #play h2{
		width: calc(50% - 94px);
		margin-left: 90px;
		display: inline-block;
		position: relative;
		vertical-align: top;
	}
	#hd #play h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100% - 40px);
		width: 3px;
		background-color: #FF3A91;
		transform: skew(30deg);
		top: 10px;
		left: -60px;
	}
	#hd #play .right{
		width: calc(50% - 4px);
		margin-top: 50px;
		display: inline-block;
		vertical-align: top;
	}
	#hd #play .high{
		margin-right: 10px;
		font-size: 18px;
		font-weight: 500;
		color: #FF3A91;
		display: inline-block;
	}
	#hd #play .contol{
		display: inline-block;
		vertical-align: middle;
	}
	#hd #play .contol span{
		margin: 0 10px;
		font-size: 30px;
	}
	#hd #play .contol .btnset1,
	#hd #play .contol .btnset2{
		width: 79px;
		height: 79px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	#hd #play .contol .btnset1 img,
	#hd #play .contol .btnset2 img{
		display: inline-block;
		transition: .3s;
		opacity: 0;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		/* animation: toggle2 .3s 1 forwards; */
	}
	#hd #play .contol .btnset1 .active,
	#hd #play .contol .btnset2 .active{
		opacity: 1;
		/* animation: toggle .3s 1 forwards; */
	}
	#hd #play .bg{
		position: absolute;
		bottom: 0;
		opacity: 0;
		transition: .3s;
		z-index: -1;
	}
	#hd #play .bg.active{
		opacity: 1;
	}
	/* @keyframes toggle2{
		0%    {opacity: 1;}
		50%   {opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes toggle{
		0%    {opacity: 0;}
		50%   {opacity: 1;}
		100%{opacity: 0;}
	} */

/*------------ magnetic ----------*/
	#hd #magnetic{
		padding: 50px 0;
		background-color: #141414;
		position: relative;
		text-align: center;
		overflow: hidden;
	}
	#hd #magnetic h2{
		display: inline-block;
		position: relative;
	}
	#hd #magnetic h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(50% - 10px);
		width: 3px;
		background-color: #0078FF;
		transform: skew(30deg);
		top: -10px;
		left: -60px;
	}
	#hd #magnetic h2 + p{
		max-width: 900px;
		margin:0 auto 10px;
	}
	#hd #magnetic figure{
		max-width: 80%;
		position: relative;
		display: inline-block;
		margin: auto;
		z-index: 2;
	}
	#hd #magnetic figure .chin,
	#hd #magnetic figure .highlight{
		position: absolute;
		top: 0;
		left: 0;
	}


/*------------ SDK ----------*/
	#hd #sdk{
		padding: 50px;
		text-align: center;
	}
	#hd #sdk > img{
		margin: -280px auto -150px;
	}
	#hd #sdk h2{
		display: inline-block;
		position: relative;
	}
	#hd #sdk h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100%);
		width: 3px;
		background-color: #6899FF;
		transform: skew(30deg);
		top:-30px;
		left: -60px;
	}

/*------------ colorDiv -------*/	
	#switches-colorDiv,
	#armoury-colorDiv,
	#built-colorDiv,
	#play-colorDiv,
	#instant-colorDiv,
	#magnetic-colorDiv,
	#versatile-colorDiv{
		position: absolute;
		height: 900px;
		width: 8%;
	}
	#switches-colorDiv .s,
	#armoury-colorDiv .s,
	#built-colorDiv .s,
	#play-colorDiv .s,
	#instant-colorDiv .s,
	#magnetic-colorDiv .s,
	#versatile-colorDiv .s{
		height: 100%;
		width: 100%;
		transform: skew(30deg);
	}
	#switches-colorDiv.active .s,
	#armoury-colorDiv.active .s,
	#built-colorDiv.active .s,
	#play-colorDiv.active .s,
	#instant-colorDiv.active .s,
	#magnetic-colorDiv.active .s,
	#versatile-colorDiv.active .s{
		animation: asd 2s forwards;
	}
	#switches-colorDiv::after,
	#switches-colorDiv::before,
	#armoury-colorDiv::after,
	#armoury-colorDiv::before,
	#built-colorDiv::after,
	#built-colorDiv::before,
	#play-colorDiv::after,
	#play-colorDiv::before,
	#instant-colorDiv::after,
	#instant-colorDiv::before,
	#magnetic-colorDiv::after,
	#magnetic-colorDiv::before,
	#versatile-colorDiv::after,
	#versatile-colorDiv::before{
		content: "";
		position: absolute;
		height: 100%;
		display: block;
		top: 0;
		transform: skew(30deg);
	}


	#switches-colorDiv{
		bottom: 0;
		left: 0;
	}
	#switches-colorDiv::after{
		width: 80%;
		right: -80%;
		background-color: rgba(81,214,240,.1);
	}
	#switches-colorDiv::before{
		width: 300%;
		left: -300%;
		background-color: rgba(81,214,240,.1);
	}
	#switches-colorDiv .s{
		background: -webkit-linear-gradient(rgba(81,214,240,.5),rgba(81,214,240,.2));
		background: 		linear-gradient(rgba(81,214,240,.5),rgba(81,214,240,.2));
	}


	#armoury-colorDiv{
		bottom: 0;
		right: 0;
		height: 100%;
		max-height: 750px;
	}
	#armoury-colorDiv::after{
		width: 300%;
		right: -300%;
		background-color: rgba(238,178,52,.1);
	}
	#armoury-colorDiv::before{
		width: 80%;
		left: -80%;
		background-color: rgba(238,178,52,.1);
	}
	#armoury-colorDiv .s{
		background: -webkit-linear-gradient(rgba(238,178,52,.5),rgba(238,178,52,.2));
		background: 		linear-gradient(rgba(238,178,52,.5),rgba(238,178,52,.2));
	}

	#instant-colorDiv{
		bottom: 0;
		right: 0;
		height: 100%;
		max-height: 750px;
	}
	#instant-colorDiv::after{
		width: 300%;
		right: -300%;
		background-color: rgba(103,82,255,.1);
	}
	#instant-colorDiv::before{
		width: 80%;
		left: -80%;
		background-color: rgba(103,82,255,.1);
	}
	#instant-colorDiv .s{
		background: -webkit-linear-gradient(rgba(103,82,255,.5),rgba(103,82,255,.2));
		background: 		linear-gradient(rgba(103,82,255,.5),rgba(103,82,255,.2));
	}

	#built-colorDiv{
		bottom: 0;
		left: 0;
		max-height: 750px;
	}
	#built-colorDiv::after{
		width: 80%;
		right: -80%;
		background-color: rgba(255,70,115,.1);
	}
	#built-colorDiv::before{
		width: 300%;
		left: -300%;
		background-color: rgba(255,70,115,.1);
	}
	#built-colorDiv .s{
		background: -webkit-linear-gradient(rgba(255,70,115,.5),rgba(255,70,115,.2));
		background: 		linear-gradient(rgba(255,70,115,.5),rgba(255,70,115,.2));
	}

	#play-colorDiv{
		bottom: 0;
		left: 0;
		max-height: 750px;
	}
	#play-colorDiv::after{
		width: 80%;
		right: -80%;
		background-color: rgba(255,93,176,.1);
	}
	#play-colorDiv::before{
		width: 300%;
		left: -300%;
		background-color: rgba(255,93,176,.1);
	}
	#play-colorDiv .s{
		background: -webkit-linear-gradient(rgba(255,93,176,.5),rgba(255,93,176,.2));
		background: 		linear-gradient(rgba(255,93,176,.5),rgba(255,93,176,.2));
	}

	#magnetic-colorDiv{
		bottom: 0;
		left: 0;
	}
	#magnetic-colorDiv::after{
		width: 80%;
		right: -80%;
		background-color: rgba(0,120,255,.1);
	}
	#magnetic-colorDiv::before{
		width: 300%;
		left: -300%;
		background-color: rgba(0,120,255,.1);
	}
	#magnetic-colorDiv .s{
		background: -webkit-linear-gradient(rgba(0,120,255,.5),rgba(0,120,255,.2));
		background: 		linear-gradient(rgba(0,120,255,.5),rgba(0,120,255,.2));
	}

	#versatile-colorDiv{
		bottom: 0;
		left: -7%;
	}
	#versatile-colorDiv::after{
		width: 80%;
		right: -80%;
		background-color: rgba(0,120,255,.1);
	}
	#versatile-colorDiv::before{
		width: 300%;
		left: -300%;
		background-color: rgba(0,120,255,.1);
	}
	#versatile-colorDiv .s{
		background: -webkit-linear-gradient(rgba(0,120,255,.5),rgba(0,120,255,.2));
		background: 		linear-gradient(rgba(0,120,255,.5),rgba(0,120,255,.2));
	}

	#versatile-colorDiv.cyan::after{
		width: 80%;
		right: -80%;
		background-color: rgba(0, 177, 255, 0.2);
	}
	#versatile-colorDiv.cyan::before{
		width: 300%;
		left: -300%;
		background-color: rgba(0, 177, 255, 0.2);
	}
	#versatile-colorDiv.cyan .s{
		background: -webkit-linear-gradient(rgba(0, 177, 255, 0.6),rgba(0, 255, 226, 0.3));
		background: 		linear-gradient(rgba(0, 177, 255, 0.6),rgba(0, 255, 226, 0.3));
	}

	#versatile-colorDiv.pink::after{
		width: 80%;
		right: -80%;
		background-color: rgba(255,70,115,.1);
	}
	#versatile-colorDiv.pink::before{
		width: 300%;
		left: -300%;
		background-color: rgba(255,70,115,.1);
	}
	#versatile-colorDiv.pink .s{
		background: -webkit-linear-gradient(rgba(255,70,115,.5),rgba(255,70,115,.2));
		background: 		linear-gradient(rgba(255,70,115,.5),rgba(255,70,115,.2));
	}

	@keyframes asd{
		0% {transform: scale(2) translateX(70%) translateY(-20%) skew(30deg);}
		100% {transform: scale(1) translateX(0) translateY(0) skew(30deg);}
	}

/*------------ LIGHTING -------*/
	#hd #lighting{
		padding: 50px 0;
		position: relative;
		text-align: center;
	}
	#hd #lighting h2{
		display: inline-block;
		position: relative;
	}
	#hd #lighting h2::before{
		content: "";
		display: block;
		position: absolute;
		height: calc(100% - 10px);
		width: 3px;
		background-color: #82FFC8;
		transform: skew(30deg);
		bottom: 30px;
		left: -60px;
	}
	#hd #lighting h2 + p{
		max-width: 900px;
		margin:0 auto 10px;
	}
	#hd #lighting .hd-controls{
		max-width: 800px;
		margin:0 auto;
		position: relative;
		z-index: 6;
	}
	#hd #lighting .hd-controls li{
		display: inline-block;
		vertical-align: top;
		width: 10%;
		margin-left: -5px;
		opacity: .3;
		cursor: pointer;
		-webkit-transition: opacity .25s ease;
		   -moz-transition: opacity .25s ease;
		    -ms-transition: opacity .25s ease;
		     -o-transition: opacity .25s ease;
		        transition: opacity .25s ease;
	}
	#hd #lighting .hd-controls li:hover{opacity: .8; }
	#hd #lighting .hd-controls li.hd-active{opacity: 1; }
	#hd #lighting .hd-controls li img{margin:0 auto 5px;}
	#hd #lighting .hd-controls li small{display: block;}

	#hd #lighting .hd-lighting{
		width: 80%;
		max-width: 967px;
		margin: -2% auto 0;
		overflow: hidden;
		text-align: center;
		position: relative;
		z-index: 5;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	#color,
	#greybg{
		position: absolute;
		width: 100%;
		max-width: 960px;
		height: 100%;
		max-height: 91%;
		top:6%;
		left: 0;
		right: 0;
		margin:0 auto;
		z-index: -2;
	}
	#greybg {
		background-color: #4e4e4e;
		z-index: -3;
	}
	#color + img{
		width: 100%;
		margin:0 auto;
		opacity: 1;
	}
	#color.hd-hidden{opacity: 0; }
	#color.hd-black{
		background-color: #141414 !important;
		z-index: -3;
	}

	#colorpicker {
		display: block;
		width: 140px;
		position: absolute;
		bottom: 15%;
		right: -2%;
		z-index: 6;
	}
	#colorpicker canvas{top: 0;left: 0; }
	/*-----keyboard-----*/
		#keyboard{
			position: absolute;
			width: 100%;
			max-width: 960px;
			height: 100%;
			max-height: 91%;
			overflow: hidden;
			top: 6%;
			left: 0;
			right: 0;
			margin:0 auto;
			z-index: -1;
			opacity: 0;
			pointer-events: none;
		}
		#keyboard.hd-active{
			opacity: 1;
			pointer-events: all;
		}
		#keyboard.hd-line,
		#keyboard.hd-custom{
			opacity: 1;
			pointer-events: none;
		}
		#keyboard.hd-custom li div{opacity: 1; }
		/*-----keyboard row-----*/
			#keyboard li{
				position: absolute;
				left: 0;
				width: 100%;
				height: 0;
				padding-bottom: 4.2%;
			}
			#keyboard li:nth-child(1){
				/*background-color: #ff8f26;*/
				top:12%;
				padding-bottom: 4.5%;
			}
			#keyboard li:nth-child(2){
				/*background-color: #dcff1c;*/
				top:22%;
				padding-bottom: 4.5%;
			}
			#keyboard li:nth-child(3){
				/*background-color: #11c470;*/
				top:31%;
			}
			#keyboard li:nth-child(4){
				/*background-color: #1ccdff;*/
				top:39%;
			}
			#keyboard li:nth-child(5){
				/*background-color: #a74fff;*/
				top:47%;
			}
			#keyboard li:nth-child(6){
				/*background-color: #ffb7e2;*/
				padding-bottom: 5%;
				top:55%;
			}
		/*-----keyboard single-----*/
			#keyboard li div{
				background-color:#51d140;
				box-shadow: 0 0 5px 5px rgba(0,0,0,0);
				position: relative;
				padding-bottom:inherit;
				float:left;
				border-radius: 3px;
				width: 3.3%;
				margin-left: 0;
				opacity: 0;
				-webkit-transition: opacity 1.5s ease;
				   -moz-transition: opacity 1.5s ease;
				    -ms-transition: opacity 1.5s ease;
				     -o-transition: opacity 1.5s ease;
				        transition: opacity 1.5s ease;
			}
			#keyboard li div.hd-active{
				opacity: 1;
				-webkit-transition: opacity .1s ease;
				   -moz-transition: opacity .1s ease;
				    -ms-transition: opacity .1s ease;
				     -o-transition: opacity .1s ease;
				        transition: opacity .1s ease;
			}
			#keyboard li div:last-child:after{
				content:'';
				display: block;
				width: 0;
				height: 0;
				clear:both;
			}
			#keyboard li div:nth-child(1){margin-left: 3.65%; }
			/*-----row1-----*/
				#keyboard li:nth-child(1) div{width: 4.1%; }
				#keyboard li:nth-child(1) div:nth-child(1){width: 4.2%; }
				#keyboard li:nth-child(1) div:nth-child(2){margin-left: 4.5%; }
				/* #keyboard li:nth-child(1) div:nth-child(n+3){margin-left: -.5%; } */
				#keyboard li:nth-child(1) div:nth-child(6),
				#keyboard li:nth-child(1) div:nth-child(14){margin-left: 1.8%; }
				#keyboard li:nth-child(1) div:nth-child(10){margin-left: 1.9%; }
				#keyboard li:nth-child(1) div:nth-child(17){
					width: 13.5%;
					padding-bottom: 5%;
					margin-top: 0;
					margin-left: 4%;
					pointer-events: none !important;
				}
			/*-----row2-----*/
				#keyboard li:nth-child(2) div{width: 4.14%; }
				/* #keyboard li:nth-child(2) div:nth-child(1){width: 3.85%; } */
				#keyboard li:nth-child(2) div:nth-child(14){width: 8.5%; }
				#keyboard li:nth-child(2) div:nth-child(15){margin-left: 1%;}
				#keyboard li:nth-child(2) div:nth-child(18){margin-left: 1%;}
			/*-----row3-----*/
				#keyboard li:nth-child(3) div{width: 4.12%; }
				#keyboard li:nth-child(3) div:nth-child(1){width: 6.5%; }
				#keyboard li:nth-child(3) div:nth-child(14){width: 6.5%; }
				#keyboard li:nth-child(3) div:nth-child(15){margin-left: .7%;}
				#keyboard li:nth-child(3) div:nth-child(18){margin-left: 1.3%;}
				#keyboard li:nth-child(3) div:last-child{
					padding-top: 3.9%;
					z-index: 1;
				}
			/*-----row4-----*/
				#keyboard li:nth-child(4) div{width: 4.12%; }
				#keyboard li:nth-child(4) div:nth-child(1){width: 7.2%; }
				#keyboard li:nth-child(4) div:nth-child(13){width: 9.3%; }
				#keyboard li:nth-child(4) div:nth-child(14){margin-left: 15.2%; }
			/*-----row5-----*/
				#keyboard li:nth-child(5) div{width: 4.12%; }
				#keyboard li:nth-child(5) div:nth-child(1){width: 9.6%; }
				#keyboard li:nth-child(5) div:nth-child(12){width: 11%; }
				#keyboard li:nth-child(5) div:nth-child(13){margin-left: 5.4%;}
				#keyboard li:nth-child(5) div:nth-child(14){margin-left: 5.8%;}
				#keyboard li:nth-child(5) div:last-child{
					width: 4%;
					padding-top: 4%;
					z-index: 1;
				}
			/*-----row6-----*/
				#keyboard li:nth-child(6) div{width: 4.12%; }
				#keyboard li:nth-child(6) div:nth-child(1){width: 9.6%; }
				#keyboard li:nth-child(6) div:nth-child(3){width: 5%;}
				#keyboard li:nth-child(6) div:nth-child(4){width: 22.7%; }
				#keyboard li:nth-child(6) div:nth-child(5),
				#keyboard li:nth-child(6) div:nth-child(6),
				#keyboard li:nth-child(6) div:nth-child(7),
				#keyboard li:nth-child(6) div:nth-child(8){width: 5.1%;}
				#keyboard li:nth-child(6) div:nth-child(9){margin-left: 1.4%;}
				#keyboard li:nth-child(6) div:nth-child(12){
					width: 8.7%;
					margin-left: 1.2%;
				}
	/*-----lighting starry-----*/
		#keyboard.hd-starry li:nth-child(1) div:nth-child(3){
			background-color: #ffaa00 !important;
			box-shadow: 0 0 5px 1px #ffaa00 !important;
			-webkit-animation: keyFadeIn 3s 1s infinite;
			-o-animation: keyFadeIn 3s 1s infinite;
			animation: keyFadeIn 3s 1s infinite;
		}
		#keyboard.hd-starry li:nth-child(2) div:nth-child(9){
			background-color: #ff0000 !important;
			box-shadow: 0 0 5px 1px #ff0000 !important;
			-webkit-animation: keyFadeIn 5s 1s infinite;
			-o-animation: keyFadeIn 5s 1s infinite;
			animation: keyFadeIn 5s 1s infinite;
		}
		#keyboard.hd-starry li:nth-child(3) div:nth-child(5){
			background-color: #e100ff !important;
			box-shadow: 0 0 5px 1px #e100ff !important;
			-webkit-animation: breathing 4s 2s infinite;
			-o-animation: breathing 4s 2s infinite;
			animation: breathing 4s 2s infinite;
		}
		#keyboard.hd-starry li:nth-child(4) div:nth-child(18){
			background-color: #cc0033 !important;
			box-shadow: 0 0 5px 1px #cc0033 !important;
			-webkit-animation: showroutine 2s 2s infinite;
			-o-animation: showroutine 2s 2s infinite;
			animation: showroutine 2s 2s infinite;
		}
		#keyboard.hd-starry li:nth-child(5) div:nth-child(10){
			background-color: #0093ff !important;
			box-shadow: 0 0 5px 1px #0093ff !important;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		}
		#keyboard.hd-starry li:nth-child(6) div:nth-child(2){
			background-color: #0034d2 !important;
			box-shadow: 0 0 5px 1px #0034d2 !important;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		}
		#keyboard.hd-starry li:nth-child(6) div:nth-child(13){
			background-color: #b0ff00 !important;
			box-shadow: 0 0 5px 1px #b0ff00 !important;
			-webkit-animation: showroutine 4s 1s infinite;
			-o-animation: showroutine 4s 1s infinite;
			animation: showroutine 4s 1s infinite;
		}
	/*-----lighting quicksand-----*/
		.hd-quicksand{
			position: relative;
			opacity: 1;
			background-color: transparent!important;
			background-image: url(../img/lighting-quicksand.png);
			background-position-x: center;
			background-size: 100%;
			background-repeat: repeat-y;
		}
	/*-----lighting current-----*/
		#keyboard.hd-current li:nth-child(1) div:nth-child(3),
		#keyboard.hd-current li:nth-child(1) div:nth-child(4),
		#keyboard.hd-current li:nth-child(1) div:nth-child(5),
		#keyboard.hd-current li:nth-child(1) div:nth-child(6){
			background-color: #ffaa00 !important;
			box-shadow: 0 0 5px 1px #ffaa00 !important;
			-webkit-animation: keyFadeIn 3s 1s infinite;
			-o-animation: keyFadeIn 3s 1s infinite;
			animation: keyFadeIn 3s 1s infinite;
		}
			#keyboard.hd-current li:nth-child(1) div:nth-child(4){
			-webkit-animation: keyFadeIn 3s 1.1s infinite;
			-o-animation: keyFadeIn 3s 1.1s infinite;
			animation: keyFadeIn 3s 1.1s infinite;
			}
			#keyboard.hd-current li:nth-child(1) div:nth-child(5){
			-webkit-animation: keyFadeIn 3s 1.2s infinite;
			-o-animation: keyFadeIn 3s 1.2s infinite;
			animation: keyFadeIn 3s 1.2s infinite;
			}
			#keyboard.hd-current li:nth-child(1) div:nth-child(6){
			-webkit-animation: keyFadeIn 3s 1.3s infinite;
			-o-animation: keyFadeIn 3s 1.3s infinite;
			animation: keyFadeIn 3s 1.3s infinite;
			}
		#keyboard.hd-current li:nth-child(2) div:nth-child(12),
		#keyboard.hd-current li:nth-child(2) div:nth-child(13),
		#keyboard.hd-current li:nth-child(2) div:nth-child(14),
		#keyboard.hd-current li:nth-child(2) div:nth-child(15){
			background-color: #ff0000 !important;
			box-shadow: 0 0 5px 1px #ff0000 !important;
			-webkit-animation: keyFadeIn 5s 1s infinite;
			-o-animation: keyFadeIn 5s 1s infinite;
			animation: keyFadeIn 5s 1s infinite;
		}
			#keyboard.hd-current li:nth-child(2) div:nth-child(13){
			-webkit-animation: keyFadeIn 5s 1.1s infinite;
			-o-animation: keyFadeIn 5s 1.1s infinite;
			animation: keyFadeIn 5s 1.1s infinite;
			}
			#keyboard.hd-current li:nth-child(2) div:nth-child(14){
			-webkit-animation: keyFadeIn 5s 1.2s infinite;
			-o-animation: keyFadeIn 5s 1.2s infinite;
			animation: keyFadeIn 5s 1.2s infinite;
			}
			#keyboard.hd-current li:nth-child(2) div:nth-child(15){
			-webkit-animation: keyFadeIn 5s 1.3s infinite;
			-o-animation: keyFadeIn 5s 1.3s infinite;
			animation: keyFadeIn 5s 1.3s infinite;
			}
		#keyboard.hd-current li:nth-child(3) div:nth-child(8),
		#keyboard.hd-current li:nth-child(3) div:nth-child(7),
		#keyboard.hd-current li:nth-child(3) div:nth-child(6),
		#keyboard.hd-current li:nth-child(3) div:nth-child(5){
			background-color: #e100ff !important;
			box-shadow: 0 0 5px 1px #e100ff !important;
			-webkit-animation: breathing 4s 2s infinite;
			-o-animation: breathing 4s 2s infinite;
			animation: breathing 4s 2s infinite;
		}
			#keyboard.hd-current li:nth-child(3) div:nth-child(7){
			-webkit-animation: breathing 4s 2.1s infinite;
			-o-animation: breathing 4s 2.1s infinite;
			animation: breathing 4s 2.1s infinite;
			}
			#keyboard.hd-current li:nth-child(3) div:nth-child(6){
			-webkit-animation: breathing 4s 2.2s infinite;
			-o-animation: breathing 4s 2.2s infinite;
			animation: breathing 4s 2.2s infinite;
			}
			#keyboard.hd-current li:nth-child(3) div:nth-child(5){
			-webkit-animation: breathing 4s 2.3s infinite;
			-o-animation: breathing 4s 2.3s infinite;
			animation: breathing 4s 2.3s infinite;
			}
		#keyboard.hd-current li:nth-child(4) div:nth-child(2),
		#keyboard.hd-current li:nth-child(4) div:nth-child(3),
		#keyboard.hd-current li:nth-child(4) div:nth-child(4),
		#keyboard.hd-current li:nth-child(4) div:nth-child(5){
			background-color: #ccff00 !important;
			box-shadow: 0 0 5px 1px #ccff00 !important;
			-webkit-animation: showroutine 5s 2s infinite;
			-o-animation: showroutine 5s 2s infinite;
			animation: showroutine 5s 2s infinite;
		}
			#keyboard.hd-current li:nth-child(4) div:nth-child(3){
			-webkit-animation: showroutine 5s 2.1s infinite;
			-o-animation: showroutine 5s 2.1s infinite;
			animation: showroutine 5s 2.1s infinite;
			}
			#keyboard.hd-current li:nth-child(4) div:nth-child(4){
			-webkit-animation: showroutine 5s 2.2s infinite;
			-o-animation: showroutine 5s 2.2s infinite;
			animation: showroutine 5s 2.2s infinite;
			}
			#keyboard.hd-current li:nth-child(4) div:nth-child(5){
			-webkit-animation: showroutine 5s 2.3s infinite;
			-o-animation: showroutine 5s 2.3s infinite;
			animation: showroutine 5s 2.3s infinite;
			}
		#keyboard.hd-current li:nth-child(5) div:nth-child(10),
		#keyboard.hd-current li:nth-child(5) div:nth-child(9),
		#keyboard.hd-current li:nth-child(5) div:nth-child(8),
		#keyboard.hd-current li:nth-child(5) div:nth-child(7){
			background-color: #0093ff !important;
			box-shadow: 0 0 5px 1px #0093ff !important;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		}
			#keyboard.hd-current li:nth-child(5) div:nth-child(9){
			-webkit-animation: showroutine 5s .1s infinite;
			-o-animation: showroutine 5s .1s infinite;
			animation: showroutine 5s .1s infinite;
			}
			#keyboard.hd-current li:nth-child(5) div:nth-child(8){
			-webkit-animation: showroutine 5s .2s infinite;
			-o-animation: showroutine 5s .2s infinite;
			animation: showroutine 5s .2s infinite;
			}
			#keyboard.hd-current li:nth-child(5) div:nth-child(7){
			-webkit-animation: showroutine 5s .3s infinite;
			-o-animation: showroutine 5s .3s infinite;
			animation: showroutine 5s .3s infinite;
			}
		#keyboard.hd-current li:nth-child(6) div:nth-child(5),
		#keyboard.hd-current li:nth-child(6) div:nth-child(6),
		#keyboard.hd-current li:nth-child(6) div:nth-child(7),
		#keyboard.hd-current li:nth-child(6) div:nth-child(8){
			background-color: #0034d2 !important;
			box-shadow: 0 0 5px 1px #0034d2 !important;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		}
			#keyboard.hd-current li:nth-child(6) div:nth-child(6){
			-webkit-animation: showroutine 5s .1s infinite;
			-o-animation: showroutine 5s .1s infinite;
			animation: showroutine 5s .1s infinite;
			}
			#keyboard.hd-current li:nth-child(6) div:nth-child(7){
			-webkit-animation: showroutine 5s .2s infinite;
			-o-animation: showroutine 5s .2s infinite;
			animation: showroutine 5s .2s infinite;
			}
			#keyboard.hd-current li:nth-child(6) div:nth-child(8){
			-webkit-animation: showroutine 5s .3s infinite;
			-o-animation: showroutine 5s .3s infinite;
			animation: showroutine 5s .3s infinite;
			}
		#keyboard.hd-current li:nth-child(6) div:nth-child(10),
		#keyboard.hd-current li:nth-child(6) div:nth-child(11),
		#keyboard.hd-current li:nth-child(6) div:nth-child(12),
		#keyboard.hd-current li:nth-child(6) div:nth-child(13){
			background-color: #b0ff00 !important;
			box-shadow: 0 0 5px 1px #b0ff00 !important;
			-webkit-animation: showroutine 4s 1s infinite;
			-o-animation: showroutine 4s 1s infinite;
			animation: showroutine 4s 1s infinite;
		}
			#keyboard.hd-current li:nth-child(6) div:nth-child(11){
				-webkit-animation: showroutine 4s 1.1s infinite;
				-o-animation: showroutine 4s 1.1s infinite;
				animation: showroutine 4s 1.1s infinite;
			}
			#keyboard.hd-current li:nth-child(6) div:nth-child(12){
				-webkit-animation: showroutine 4s 1.2s infinite;
				-o-animation: showroutine 4s 1.2s infinite;
				animation: showroutine 4s 1.2s infinite;
			}
			#keyboard.hd-current li:nth-child(6) div:nth-child(13){
				-webkit-animation: showroutine 4s 1.3s infinite;
				-o-animation: showroutine 4s 1.3s infinite;
				animation: showroutine 4s 1.3s infinite;
			}
	/*-----lighting rain-----*/
		#keyboard.hd-rain li div:nth-child(1){
			background-color: #ffaa00 !important;
			box-shadow: 0 0 5px 1px #ffaa00 !important;
			-webkit-animation: keyFadeIn 5s 1s infinite;
			-o-animation: keyFadeIn 5s 1s infinite;
			animation: keyFadeIn 5s 1s infinite;
		}
			#keyboard.hd-rain li:nth-child(2) div:nth-child(1){
				-webkit-animation: keyFadeIn 5s 1.1s infinite;
				-o-animation: keyFadeIn 5s 1.1s infinite;
				animation: keyFadeIn 5s 1.1s infinite;
			}
			#keyboard.hd-rain li:nth-child(3) div:nth-child(1){
				-webkit-animation: keyFadeIn 5s 1.2s infinite;
				-o-animation: keyFadeIn 5s 1.2s infinite;
				animation: keyFadeIn 5s 1.2s infinite;
			}
			#keyboard.hd-rain li:nth-child(4) div:nth-child(1){
				-webkit-animation: keyFadeIn 5s 1.3s infinite;
				-o-animation: keyFadeIn 5s 1.3s infinite;
				animation: keyFadeIn 5s 1.3s infinite;
			}
			#keyboard.hd-rain li:nth-child(5) div:nth-child(1){
				-webkit-animation: keyFadeIn 5s 1.4s infinite;
				-o-animation: keyFadeIn 5s 1.4s infinite;
				animation: keyFadeIn 5s 1.4s infinite;
			}
			#keyboard.hd-rain li:nth-child(6) div:nth-child(1){
				-webkit-animation: keyFadeIn 5s 1.5s infinite;
				-o-animation: keyFadeIn 5s 1.5s infinite;
				animation: keyFadeIn 5s 1.5s infinite;
			}
			/* left light */
			/* #keyboard.hd-rain:before{
				content:'';
				display: block;
				width: 10%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #ffaa00;
				opacity: 0;
				-webkit-animation: keyFadeIn 5s 1s infinite;
				-o-animation: keyFadeIn 5s 1s infinite;
				animation: keyFadeIn 5s 1s infinite;
			} */
		#keyboard.hd-rain li:nth-child(1) div:nth-child(9),
		#keyboard.hd-rain li:nth-child(2) div:nth-child(11),
		#keyboard.hd-rain li:nth-child(3) div:nth-child(11),
		#keyboard.hd-rain li:nth-child(4) div:nth-child(11),
		#keyboard.hd-rain li:nth-child(5) div:nth-child(10),
		#keyboard.hd-rain li:nth-child(6) div:nth-child(5){
			background-color: #b0ff00 !important;
			box-shadow: 0 0 5px 1px #b0ff00 !important;
			-webkit-animation: keyFadeIn 5s 1s infinite;
			-o-animation: keyFadeIn 5s 1s infinite;
			animation: keyFadeIn 5s 1s infinite;
		}
			#keyboard.hd-rain li:nth-child(2) div:nth-child(11){
				-webkit-animation: keyFadeIn 5s 1.1s infinite;
				-o-animation: keyFadeIn 5s 1.1s infinite;
				animation: keyFadeIn 5s 1.1s infinite;
			}
			#keyboard.hd-rain li:nth-child(3) div:nth-child(11){
				-webkit-animation: keyFadeIn 5s 1.2s infinite;
				-o-animation: keyFadeIn 5s 1.2s infinite;
				animation: keyFadeIn 5s 1.2s infinite;
			}
			#keyboard.hd-rain li:nth-child(4) div:nth-child(11){
				-webkit-animation: keyFadeIn 5s 1.3s infinite;
				-o-animation: keyFadeIn 5s 1.3s infinite;
				animation: keyFadeIn 5s 1.3s infinite;
			}
			#keyboard.hd-rain li:nth-child(5) div:nth-child(10){
				-webkit-animation: keyFadeIn 5s 1.4s infinite;
				-o-animation: keyFadeIn 5s 1.4s infinite;
				animation: keyFadeIn 5s 1.4s infinite;
			}
			#keyboard.hd-rain li:nth-child(6) div:nth-child(5){
				-webkit-animation: keyFadeIn 5s 1.5s infinite;
				-o-animation: keyFadeIn 5s 1.5s infinite;
				animation: keyFadeIn 5s 1.5s infinite;
			}
		#keyboard.hd-rain li:nth-child(1) div:nth-child(2),
		#keyboard.hd-rain li:nth-child(2) div:nth-child(3),
		#keyboard.hd-rain li:nth-child(3) div:nth-child(3),
		#keyboard.hd-rain li:nth-child(4) div:nth-child(3),
		#keyboard.hd-rain li:nth-child(5) div:nth-child(2),
		#keyboard.hd-rain li:nth-child(6) div:nth-child(3){
			background-color: #e100ff !important;
			box-shadow: 0 0 5px 1px #e100ff !important;
			-webkit-animation: breathing 4s 2s infinite;
			-o-animation: breathing 4s 2s infinite;
			animation: breathing 4s 2s infinite;
		}
			#keyboard.hd-rain li:nth-child(2) div:nth-child(3){
				-webkit-animation: breathing 4s 2.1s infinite;
				-o-animation: breathing 4s 2.1s infinite;
				animation: breathing 4s 2.1s infinite;
			}
			#keyboard.hd-rain li:nth-child(3) div:nth-child(3){
				-webkit-animation: breathing 4s 2.2s infinite;
				-o-animation: breathing 4s 2.2s infinite;
				animation: breathing 4s 2.2s infinite;
			}
			#keyboard.hd-rain li:nth-child(4) div:nth-child(3){
				-webkit-animation: breathing 4s 2.3s infinite;
				-o-animation: breathing 4s 2.3s infinite;
				animation: breathing 4s 2.3s infinite;
			}
			#keyboard.hd-rain li:nth-child(5) div:nth-child(2){
				-webkit-animation: breathing 4s 2.4s infinite;
				-o-animation: breathing 4s 2.4s infinite;
				animation: breathing 4s 2.4s infinite;
			}
			#keyboard.hd-rain li:nth-child(6) div:nth-child(3){
				-webkit-animation: breathing 4s 2.5s infinite;
				-o-animation: breathing 4s 2.5s infinite;
				animation: breathing 4s 2.5s infinite;
			}
		#keyboard.hd-rain li:nth-child(1) div:nth-child(14),
		#keyboard.hd-rain li:nth-child(2) div:nth-child(15),
		#keyboard.hd-rain li:nth-child(3) div:nth-child(15),
		#keyboard.hd-rain li:nth-child(6) div:nth-child(9){
			background-color: #cc0033 !important;
			box-shadow: 0 0 5px 1px #cc0033 !important;
			-webkit-animation: showroutine 2s 2s infinite;
			-o-animation: showroutine 2s 2s infinite;
			animation: showroutine 2s 2s infinite;
		}
			#keyboard.hd-rain li:nth-child(2) div:nth-child(15){
				-webkit-animation: showroutine 2s 2.1s infinite;
				-o-animation: showroutine 2s 2.1s infinite;
				animation: showroutine 2s 2.1s infinite;
			}
			#keyboard.hd-rain li:nth-child(3) div:nth-child(15){
				-webkit-animation: showroutine 2s 2.2s infinite;
				-o-animation: showroutine 2s 2.2s infinite;
				animation: showroutine 2s 2.2s infinite;
			}
			#keyboard.hd-rain li:nth-child(6) div:nth-child(9){
				-webkit-animation: showroutine 2s 2.4s infinite;
				-o-animation: showroutine 2s 2.4s infinite;
				animation: showroutine 2s 2.4s infinite;
			}
		#keyboard.hd-rain li:nth-child(2) div:nth-child(21),
		#keyboard.hd-rain li:nth-child(3) div:nth-child(21),
		#keyboard.hd-rain li:nth-child(4) div:nth-child(17),
		#keyboard.hd-rain li:nth-child(5) div:nth-child(17){
			background-color: #0093ff !important;
			box-shadow: 0 0 5px 1px #0093ff !important;
			-webkit-animation: showroutine 5s infinite;
			-o-animation: showroutine 5s infinite;
			animation: showroutine 5s infinite;
		}
			#keyboard.hd-rain li:nth-child(3) div:nth-child(21){
				-webkit-animation: showroutine 5s .1s infinite;
				-o-animation: showroutine 5s .1s infinite;
				animation: showroutine 5s .1s infinite;
			}
			#keyboard.hd-rain li:nth-child(4) div:nth-child(17){
				-webkit-animation: showroutine 5s .2s infinite;
				-o-animation: showroutine 5s .2s infinite;
				animation: showroutine 5s .2s infinite;
			}
			#keyboard.hd-rain li:nth-child(5) div:nth-child(17){
				-webkit-animation: showroutine 5s .3s infinite;
				-o-animation: showroutine 5s .3s infinite;
				animation: showroutine 5s .3s infinite;
			}
			/* right light */
			/* #keyboard.hd-rain:after{
				content:'';
				display: block;
				width: 10%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #0093ff;
				opacity: 0;
				-webkit-animation: showroutine 5s infinite;
				-o-animation: showroutine 5s infinite;
				animation: showroutine 5s infinite;
			} */

/*------------ FEATURE --------*/
	#hd #feature{
		padding:5% 0;
		background-position: top right;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
		text-align: center;
		background-image: url(../img/bg-features.jpg);
	}
	#hd #feature ul{
		display: flex;
		align-items: stretch;
		justify-content: center;
		flex-wrap: wrap;
	}
	#hd #feature li{
		padding:0 10px;
		margin:70px 0 70px 0;
		position: relative;
		vertical-align: top;
		text-align: center;
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	/* #hd #feature li:after{
		content:'';
		display: block;
		width: 90%;
		height: 8px;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;right: 0;
		margin:0 auto;
	} */
	#hd #feature li img{
		width: 100%;
		max-width: 207px !important;
	}
	#hd #feature li img + div{
		width: 100%;
		max-width: 350px;
		/* padding-left: 15px; */
	}
	#hd #feature h3{/* min-height: 60px; */}
	/* #hd #feature li:nth-child(2) h3{font-size: 20px; } */
	#hd #feature p{
		font-size: 1em;
		padding-bottom: 0;
		margin-bottom: 10px;
		/* min-height: 83px; */
	}
	#hd #feature .tb{
		padding-top: 10px;
		border-top: 1px solid rgba(255,255,255,.3);
		text-align: left;
	}

/* ---------- ANIMATIONS ---------- */
	@-webkit-keyframes fadeInFromBottom{
		from{
			opacity: 0;
			-webkit-transform: translateY(10%);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes fadeInFromBottom{
		from{
			opacity: 0;
			   -moz-transform: translateY(10%);
				-ms-transform: translateY(10%);
				 -o-transform: translateY(10%);
					transform: translateY(10%);
		}
		to  {
			opacity: 1;
			   -moz-transform: translateY(0);
				-ms-transform: translateY(0);
				 -o-transform: translateY(0);
					transform: translateY(0);
		}
	}
	#hd .colorrun{
		-webkit-animation: colorrun 5s infinite;
		-o-animation: colorrun 5s infinite;
		animation: colorrun 5s infinite;
	}
	@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);
		}
	}

	@-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 cycle {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  26.9%		{background-color: #b0ff00;}
	  35.2%		{background-color: #00db4a;}
	  43.5%		{background-color: #00ffd9;}
	  51.8%		{background-color: #00deff;}
	  60.1%		{background-color: #0093ff;}
	  68.4%		{background-color: #0023ff;}
	  76.7%		{background-color: #8e00ff;}
	  85%		{background-color: #e100ff;}
	  93.3%		{background-color: #ff008b;}
	  100%		{background-color: red;}
	}
	@keyframes cycle {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  26.9%		{background-color: #b0ff00;}
	  35.2%		{background-color: #00db4a;}
	  43.5%		{background-color: #00ffd9;}
	  51.8%		{background-color: #00deff;}
	  60.1%		{background-color: #0093ff;}
	  68.4%		{background-color: #0023ff;}
	  76.7%		{background-color: #8e00ff;}
	  85%		{background-color: #e100ff;}
	  93.3%		{background-color: #ff008b;}
	  100%		{background-color: red;}
	}

	@-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: 0;
		}
	}
	@keyframes ripple {
		0%		{
			   -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
		}
		100%	{
			   -moz-transform: scale(100);
			    -ms-transform: scale(100);
			     -o-transform: scale(100);
			        transform: scale(100);
		}
	}
	@-webkit-keyframes quicksand {
		0%		{background-position-y:-650%;}
	    100%	{background-position-y: 970%;}
	}
	@keyframes quicksand {
		0%		{background-position-y:-650%;}
	    100%	{background-position-y: 970%;}
	}
	@keyframes wave_block {
	  0%		{background-color: red;}
	  2%		{background-color: red;}
	  10.3%		{background-color: orange;}
	  18.6%		{background-color: yellow;}
	  35.2%		{background-color: #00db4a;}
	  51.8%		{background-color: #00deff;}
	  68.4%		{background-color: #0023ff;}
	  85%		{background-color: #e100ff;}
	  100%		{background-color: red;}
	}

	.hd-rainbow{
		background-image:url(../img/lighting-wave.png);
		background-repeat: repeat-x;
		background-position: center 0;
	}
	.hd-wave:before{
		/*content:'';
		display: block;
		width: 15%;
		height: 20%;
		position: absolute;
		top: 5%;
		right: 18%;
		background-color: #ffffff;
		-webkit-animation: wave_block 1.95s -1.4s infinite;
		-o-animation: wave_block 1.95s -1.4s infinite;
		animation: wave_block 1.95s -1.4s infinite;*/
	}

	.hd-ripple{
		background-color: transparent!important;
		background: url(../img/lighting-ripple.png) repeat;
		background-size: 100%;
		background-position-x: center;
		background-position-y: center;
	}
	.hd-ripple ~ #keyboard{
		opacity: 1;
		z-index: -3;
	}
	.hd-ripple ~ #keyboard:before{
		content:'';
		display: block;
		width: 160%;
		height: 100%;
		position: absolute;
		top: 0;
		left: -30%;
		background: #4e4e4e;
		background: -moz-linear-gradient(left, #4e4e4e 0%, #4e4e4e 12%, #ff2828 12%, #ff9028 21%, #f7e92e 38%, #4ded2d 58%, #207cca 70%, #bc25ea 87%, #4e4e4e 88%, #4e4e4e 100%);
		background: -webkit-linear-gradient(left, #4e4e4e 0%,#4e4e4e 12%,#ff2828 12%,#ff9028 21%,#f7e92e 38%,#4ded2d 58%,#207cca 70%,#bc25ea 87%,#4e4e4e 88%,#4e4e4e 100%);
		background: linear-gradient(to right, #4e4e4e 0%,#4e4e4e 12%,#ff2828 12%,#ff9028 21%,#f7e92e 38%,#4ded2d 58%,#207cca 70%,#bc25ea 87%,#4e4e4e 88%,#4e4e4e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#131313',GradientType=1 );
	}
	.hd-quicksand ~ #keyboard{
		opacity: 1;
		z-index: -3;
	}
	.hd-quicksand ~ #keyboard:before{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 1.5%;
		background: #0a79ff;
		background: -webkit-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: -o-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: -moz-linear-gradient(top,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		background: linear-gradient(to bottom,#4e4e4e,#4e4e4e,#0a79ff,#ff2a79,#00fff4,#0a79ff,#fd91f5,#0a79ff,#4e4e4e,#4e4e4e);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a79ff', endColorstr='#ff2a79',GradientType=1 );
	}
	#keyboard.hd-starry,
	#keyboard.hd-current,
	#keyboard.hd-rain{
		opacity: 1;
		z-index: -3;
	}

	@-webkit-keyframes showroutine{
		0%		{opacity: 0;}
		10%		{opacity: 1;}
		11%		{opacity: 1;}
		20%		{opacity: 0;}
		100%	{opacity: 0;}
	}
	@keyframes showroutine{
		0%		{opacity: 0;}
		10%		{opacity: 1;}
		11%		{opacity: 1;}
		20%		{opacity: 0;}
		100%	{opacity: 0;}
	}

	@keyframes keyFadeIn {
		0% {opacity: 0;}
		10% {opacity: 1;}
		15% {opacity: 0;}
		100% {opacity: 0;}
	}
	@-webkit-keyframes keyFadeIn {
		0% {opacity: 0;}
		10% {opacity: 1;}
		15% {opacity: 0;}
		100% {opacity: 0;}
	}

/**/
/*#hd #BE92-overview*/
#hd #BE92-overview{
/*background-image: linear-gradient(to top right, #0d526f 20%, #1078af 60%);*/
    background: #021033;
    background-size: 100%;
    position: relative;
}
#hd #BE92-overview .maintitle {    
        margin: 0 auto;
    padding-right: 18px;
    padding-left: 18px;
    padding-bottom: 40px;
    position: absolute;
    left: 42%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* max-width: 600px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
#hd #BE92-overview .bg{
    position: relative;
    /*top: 0;
    left: 0;
    transform: translate(0%, 0%);*/
    margin: 0% 0;
    width: 100%;
}
#hd #BE92-overview .bg img {
    /* width: 100% !important; */
    width: 100% !important;
    margin-left: 0%;
    padding-top: 0px;
}
#hd .font-rog {
    font-family: "ROGFonts","TradeGothicBold","Roboto Condensed","Segoe UI","Arial","PingFang TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
    font-weight: normal !important
}
#hd #BE92-overview .maintitle h2 {
    /* display:flex; */
    /* flex-direction:column; */
    align-items: flex-start;
    justify-content: center;
    /* font-size:3.7em; */
    /* letter-spacing:.12em; */
    /* line-height:1.25; */
    text-align: left;
    position: relative;
    /* top: 13.5%;
    right: 53%; */
    z-index: 2;
    line-height: 1;
    padding-bottom: 0.1em;
    font-size: clamp(1em, 5vw, 6em);
    /* pointer-events:none; */
    /* user-select:none; */
    mix-blend-mode: lighten;
}

#hd #BE92-overview .maintitle h2 strong {
    background-color: #e10600;
    background-image: -moz-linear-gradient(180deg, #e10600,#e10600);
    background-image: -webkit-linear-gradient(180deg, #e10600,#e10600);
    background-image: linear-gradient(180deg, #e10600,#e10600)
}

#hd #BE92-overview .maintitle h2 strong,#hd .sec-kv .hd-wrapper h2 span {
    background-color: #e10600;
    background-image: -moz-linear-gradient(180deg, #e10600,#e10600);
    background-image: -webkit-linear-gradient(180deg, #e10600,#e10600);
    background-image: linear-gradient(180deg, #e10600,#e10600);
    display: block;
    font-weight: normal;
    pointer-events: all;
    user-select: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    color: #252525;
    text-shadow: 0 0 10px #e10600;
        letter-spacing: 0.02em;
}
#hd #BE92-overview .maintitle h3{
	text-align: center;
	font-size: clamp(1em, 2.8vw, 3.2em);
	text-align: justify;
	letter-spacing: 0.15em;
	line-height: 1.1em;
}
#hd #BE92-overview .maintitle h3 span{
	letter-spacing: 0.05em;
}
#hd #BE92-overview .maintitle img.overview{
    max-width: 600px;
}
#hd #BE92-overview .maintitle .info{
    background:#0b596d;
    color: #fff !important;
    padding: 3% 5%;
    text-align: center;
}
@media only screen and (max-width: 1680px){

}
@media only screen and (max-width: 1280px){
    #hd #BE92-overview .maintitle {
            width: 100%;
        max-width: 500px;

    }
    #hd #BE92-overview .bg img{
        width: 100% !important;
        max-width: inherit !important;
    }
}

@media only screen and (max-width: 768px){
    #hd #BE92-overview{
        background: #ffffff;
        background-size: 200%;
    }
    #hd #BE92-overview .bg{
        position: relative;
    }
    #hd #BE92-overview .maintitle{
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0%, 0%);
        max-width: inherit;
        padding-top: 1.5em;
        background: #000;
    }
    #hd #BE92-overview .bg img{
              width: 250% !important;
        margin: -10% 0 0% -113% !important;
        max-width: none !important;
    }
    #hd #BE92-overview .maintitle .info{
        padding: 5% !important;
        margin-top: 20px !important;
    }

    #hd #BE92-overview .maintitle h2 {
		    font-size: clamp(3.5em, 6vw, 6em);
		}

		#hd #BE92-overview .maintitle h3{
			font-size: clamp(2em, 3.8vw, 3.2em);
		}
		#hd #BE92-overview .maintitle h2 strong,#hd .sec-kv .hd-wrapper h2 span {

	    color: #000;
	}
}
@media only screen and (max-width: 480px){

}
/*#hd #BE92-WPA3*/
#hd #BE92-WPA3{
/*background-image: linear-gradient(to top right, #0d526f 20%, #1078af 60%);*/
    background: #021033;
    background-size: 100%;
    position: relative;
}
#hd #BE92-WPA3 .maintitle {    
        margin: 0 auto;
    padding-right: 18px;
    padding-left: 18px;
    padding-bottom: 0px;
    position: absolute;
    text-align: left;
    left: 35%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 370px;
}
#hd #BE92-WPA3 .bg{
    position: relative;
    /*top: 0;
    left: 0;
    transform: translate(0%, 0%);*/
    margin: 0% 0;
    width: 100%;
}
#hd #BE92-WPA3 .bg img {
    /* width: 100% !important; */
    width: 100% !important;
    margin-left: 0%;
    padding-top: 0px;
}
#hd #BE92-WPA3 .maintitle img.overview{
    max-width: 600px;
}
#hd #BE92-WPA3 .maintitle .info{
    background:#0b596d;
    color: #fff !important;
    padding: 3% 5%;
    text-align: center;
}
@media only screen and (max-width: 1680px){
	#hd #BE92-WPA3 .maintitle {
        width: 100%;
        max-width: 370px;
                left: 28%;

    }
    #hd #BE92-WPA3 .bg img{
                width: 130% !important;
        max-width: inherit !important;
        margin: 0 0 0 -15%;
    }
}
@media only screen and (max-width: 1280px){
    #hd #BE92-WPA3 .maintitle {
        width: 100%;
        max-width: 370px;
                left: 28%;

    }
    #hd #BE92-WPA3 .bg img{
                width: 150% !important;
        max-width: inherit !important;
        margin: 0 0 0 -24%;
    }
}

@media only screen and (max-width: 768px){
    #hd #BE92-WPA3{
        background: #ffffff;
        background-size: 200%;
    }
    #hd #BE92-WPA3 .bg{
        position: relative;
    }
    #hd #BE92-WPA3 .maintitle:after{
    	        content: "";
        width: 100%;
        height: 10vw;
        background: -moz-linear-gradient(top, #240c1c 0%, rgba(255, 241, 0, 0) 100%);
				background: -webkit-linear-gradient(top, #240c1c 0%, rgba(255, 241, 0, 0) 100%);
				background: linear-gradient(to top, #240c1c 0%, rgba(255, 241, 0, 0) 100%);
        position: absolute;
        bottom: 100%;
        left: 0;
    }
    #hd #BE92-WPA3 .maintitle{
                position: relative;
        left: 0;
        top: 0;
        transform: translate(0%, 0%);
        max-width: inherit;
        padding-top: 1.5em;
        background: #240c1c;
        text-align: center;
        padding-bottom: 50px;
        margin-top: -20vw;
    }
    #hd #BE92-WPA3 .bg img{
                width: 280% !important;
        margin: 0% 0 0% -120% !important;
        max-width: none !important;
    }
    #hd #BE92-WPA3 .maintitle .info{
        padding: 5% !important;
        margin-top: 20px !important;
    }
    #hd #BE92-WPA3 .maintitle p{
    	padding-bottom: 0;
    }
}
@media only screen and (max-width: 480px){

}
#hd #BE92-faster{
	    padding: 5% 0;
    background: #000 url(../img/bg_faster.jpg) no-repeat center center;
    background-size: contain;
}
#hd #BE92-Plug{
	    padding: 5% 0;
    background: #0d0d0d;
    margin-top: 5%;
}
#hd #BE92-Plug img{
	margin-bottom: 20px;
}
#hd #BE92-Plug .compare-container{
	margin-top: 30px;
}
#hd #BE92-Plug .compare-container p{
	padding-bottom: 0;
}
#hd #BE92-Plug .compare-container .hd-col50:first-child{
	padding-right: 15px;
}
#hd #BE92-Plug .compare-container .hd-col50:last-child{
	padding-left: 15px;
}
@media only screen and (max-width: 596px){
	#hd #BE92-Plug{
		padding: 50px 0;
	}
	#hd #BE92-Plug .compare-container{
		margin-top: 0;
	}
	#hd #BE92-Plug .compare-container .hd-col50{
		width: 100%;
		padding: 0 !important;
	}
	#hd #BE92-Plug .compare-container .hd-col50:last-child{
		margin-top: 30px;
	}
}
#hd #BE92-faster h2{
	
}
#hd h2.title_h2 strong{
	letter-spacing: 0.02em;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}
#hd .txt_red{
	color: #e10600 !important;
}
/**/
#versatile .chang_info {
  position: relative; /* 父容器設置相對定位 */
  display: grid; /* 使用 grid 布局 */
}

#versatile .chang_info div {
  grid-area: 1 / 1; /* 讓所有元素重疊 */
  opacity: 0; /* 預設透明 */
  visibility: hidden; /* 預設不可見 */
  transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* 過渡效果 */
}

#versatile .chang_info div.active {
  opacity: 1; /* 顯示時透明度為 1 */
  visibility: visible; /* 顯示時可見 */
  transition: opacity 0.5s ease-in-out, visibility 0s 0s; /* 同步顯示過渡效果 */
}
#hd img.br20{
	border-radius: 20px;
}
#pageContent-kv{
	padding: 5% 0;
	    background: #000;
    position: relative;
}
#pageContent-slider-kv{
    		width: 90%;
    		max-width: 800px;
}
#hd p.note{
	font-size: 14px !important;
}
@media only screen and (max-width: 768px){
	#pageContent-kv{
		padding: 50px 0 0;
	}
}