@charset 'utf-8';
@media screen and (min-width:1921px){
	/* ---------- BLOCK ---------- */
	#hd .w1200{
		max-width: 1240px;;
	}
	/* --------------TXT------------- */
	#hd h2{
		font-size: 1.8em;
	}
	#hd p,#hd li{
		font-size: 1em;
	}
	#hd small {
		font-size: .8em;
	}
	#hd small.note {
		font-size: 1em;
	}
	/* -----------section2 sec_neat ------------- */
	#hd #sec_neat ul li{
		font-size: 1.2em;
	}
	/* -------- section3 sec_hear--------------*/
	#hd .hearDac {
		margin-left: 0%;
	}
	/* -------- section4 sec_aura--------------*/
	.morePower::before {
		content: "";
		margin: 0 -10%;
	}
	/* -------- section5 sec_sync--------------*/
	#hd #sec_sync{
		margin-top: 10%;
	}

	
	/* -----------section8 sec_arc ------------- */
	#hd .arc-txt {
		padding: 8%;
	}
	/*----------- ligthing --------*/
	#hd .lighting .lighting_effect{
		width: 32%;
	}
	#hd #colorbox {
		width: 80%;
	}
	#hd .lighting_control {
		margin-right: -5%;
		width: 70%;
	}
	
}

@media screen and (max-width:1920px){
	/* -----------section3 sec_hear ------------- */
	#hd .hearDac {
		margin-top: -10%;
		margin-bottom: -10%;
		z-index: -1;
	}
	/*----------- ligthing --------*/
	#hd #colorpicker {
		top: 75%;
		left: 50%;
		z-index: 3;
	}



}



@media screen and (max-width:1680px){
	/* -----------section3 sec_hear ------------- */
	#hd .hearDac {
		margin-top: -10%;
		margin-bottom: -10%;
		z-index: -1;
	}
	/* -----------section7 sec_arc ------------- */
	#hd .arc {
		width:53%;
	}
	/*----------- ligthing --------*/
	#hd #colorpicker {
		top: 75%;
		left: 55%;
	}

}



@media screen and (max-width:1440px){
	/* ---------- BLOCK ---------- */
	#hd .w1200{
		max-width: 900px;;
	}

	/* --------------TXT------------- */
	#hd h2{
		font-size: 1.8em;
	}
	#hd p,#hd li{
		font-size: 1em;
	}
	#hd small {
		font-size: .8em;
	}
	#hd small.note {
		font-size: 1em;
	}
	/* -----------section3 sec_hear ------------- */
	#hd .hearDac-txt {
		z-index: 2;
		width: 60%;
	}
	#hd .hearDac {
		margin-top: -10%;
		margin-bottom: -10%;
		z-index: -1;
	}
	/* -----------section5 sec_sync ------------- */
	#hd .sync {
		width: 120%;
		margin-left: -13%;
		margin-top: -20%;
	}
	/* -----------section7 sec_arc ------------- */
	#hd .arc::before {
		margin: 0 -9%;
	}
	/* -----------section8 sec_armo ------------- */
	#hd .mb80 {
		margin-bottom: 1.5em;
	}
	#hd .fleft {
		width: 48%;
		margin-right: 2%;
	}
	#hd .fright {
		width: 48%;
		margin-left: 2%;
	}
	/*----------- ligthing -----------------*/
	#hd #colorpicker {
		margin-top: .2em;
		top: 95%;
    	left: 0%;
	}
	#hd .lighting_control {
		margin-right: -5%;
		width: 70%;
	}
}



@media screen and (max-width:1280px){
	/* -----------section3 sec_hear ------------- */
	#hd .hearDac {
		margin-top: -10%;
		margin-bottom: -10%;
		z-index: -1;
	}
	/* -----------section7 sec_arc ------------- */
	#hd .arc {
		width: 56%;
	}
	#hd .arc-txt {
		padding: 10%;	
	}
	/* -----------section8 sec_armo ------------- */
	#hd .mb80 {
		margin-bottom: 1.5em;
	}
	
}




@media screen and (max-width:1024px){
	/* ---------- BLOCK ---------- */
	#hd .w1200{
		max-width: 800px;;
	}
	/* --------------TXT------------- */
	#hd h2{
		font-size: 1.8em;
	}
	#hd p,#hd li{
		font-size: .9em;
	}
	#hd small {
		font-size: .8em;
	}
	#hd small.note {
		font-size: .9em;
	}
	/* -----------section3 sec_hear ------------- */
	#hd .hearDac-txt {
		z-index: 2;
		width: 75%;
	}
	/* -----------section7 sec_arc ------------- */
	#hd .arc-txt {
		padding: 8%;		
	}	
	/*----------- ligthing --------*/
	#hd .lighting_effect{
		width: 44%;
	}
	/* ---------- color effect --- */
	@-webkit-keyframes rainbow{
		0%	{-webkit-transform: translateX(-55%); }
		100%{-webkit-transform: translateX(-12%); }
	}
	@keyframes rainbow{
		0%	{transform: translateX(-55%); }
		100%{transform: translateX(-12%); }
	}

}



@media screen and (max-width:768px){
	/* ---------- BLOCK ---------- */
	#hd .w1200{
		max-width: 630px;;
	}    
	/* ---------- fp-nav --------- */
	#fp-nav ul {
		display: none;
	}
	/* --------------TXT------------- */
	#hd h2{
		font-size: 1.4em;
	}
	#hd p,#hd li{
		font-size: .8em;
	}
	#hd small {
		font-size: .6em;
	}
	#hd small.note {
		font-size: .8em;
	}
	#hd th ,#hd td{
		font-size: .8em;
	}
	/* -----------section3 sec_hear ------------- */

	#hd .hearDac-txt {	
		width: 92%;
	}
	/* -----------section4  sec_aura ------------- */
	#hd .aura {
		position: absolute;
		top: 5%;
		left: 85%;
		z-index: 3;
	}
	
	#hd #colorpicker{
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 40%;
		z-index: 3;
	}

	/* -----------section6 sec_morePower ------------- */
	#hd .morePower-txt {
		padding: 8% ;
	}
	/*----------- ligthing --------*/
	#hd .lighting_control{
		width: 48%;
		margin-right: 0;
	}
	#hd .lighting_effect{
		width: 50%;
	}
	/* ---------- color effect --- */
	@-webkit-keyframes rainbow{
		0%	{-webkit-transform: translateX(-60%); }
		100%{-webkit-transform: translateX(-12%); }
	}
	@keyframes rainbow{
		0%	{transform: translateX(-60%); }
		100%{transform: translateX(-12%); }
	}
	
}


@media screen and (max-width:620px){
	/* ---------- BLOCK ---------- */
	#hd .w1200{
		max-width: 551px;
	}
	/* --------------TXT------------- */
	#hd h2{
		padding-bottom: 15px
	}
	/* -----------section1  sec_kv ------------- */
	#hd .kv-txt h2{
		padding: 2% 3%
	}
	/* -----------section2  sec_neat ------------- */
	#hd #sec_neat .neatSetupbox{
		flex-wrap: wrap-reverse;
		justify-content: center;
		margin: 10% auto;
	}
	#hd .neatSetup-txt{
		width: 90%;
	}
	/* -----------section3  sec_hear ------------- */
	#hd #sec_hear .hearDacbox{
		flex-wrap:wrap;
		justify-content: center;
		margin: 10% auto;
	}
	#hd .hearDac {
		margin-top: -18%;
	}
	#hd .hearDac-txt{
		width: 90%;
		margin-top: -23%;
		margin-bottom: 3%;
	}
	/* -----------section4  sec_aura ------------- */
	#hd #sec_aura .lightingBox{
		flex-wrap: wrap;
		justify-content: center;
		margin: 5% auto;
	}
	#hd #sec_aura .lighting_effect{
		width: 60%;
    	margin-top: -8%;	
	}
	#hd #sec_aura .lighting_control{
		width: 90%;
	}
	#hd #colorpicker{
		opacity: 0;
		z-index: 3;
	}
	#hd .hd-controls{
		margin-top: -5%;
	}
	#hd .aura {
		left: 20%;
   		top: 40%;
	}
	/* -----------section5  sec_sync ------------- */
	#hd #sec_sync{
		margin: 20% 0 10% 0;
	}
	#hd #sec_sync .syncBox{
		margin-top: 0;
		margin: 10% 0 auto;
	}
	#hd .sync-txt{
		width: 90%;
	}
	#hd .sync-txt{
		width: 80%;
	}
	#hd .sync-txt br{
		display: none;
	}
	/* -----------section6  sec_morePower ------------- */
	#hd .morePower::before {
		width: 105%;
		height: 90%;
		margin: 0 -1%;
		transform: skew(10deg);
	}
	#hd .morePower-txt {
		padding: 7% 3%;
	}
	/* -----------section7  sec_arc ------------- */
	#hd .arc , #hd .arc-txt {
		width: 50%;
		margin-top: -5%;
	}
	#hd .arc::before {
		transform: skew(-10deg);
		height: 90%;
		margin: 0 -14%;
	}
	#hd .arc-txt{
		padding: 5% ;
	}
	/* -----------section8  sec_armo ------------- */
	#hd .mt80 {
		margin-top: 2em;
	}
	#hd .armoBtn {
		font-size: 1em;
	}
}



@media screen and (max-width:480px){
	/* --------------TXT------------- */
	#hd h2{
		font-size: 1.1em;
	}
	#hd p,#hd li{
		font-size: .8em;
		/* font-weight: 300; */
	}
	#hd small {
		font-size: .6em;
	}
	#hd small.note {
		font-size: .8em;
	}
	
	/* -----------section4  sec_aura ------------- */
	#hd img.aura{
		width: 20%;
		top: 53%;
		left: 15%
	}
	#hd .hd-controls{
		justify-content: center;
	}
	#hd .hd-controls li{
		width: 28%;
		margin-right: .8em;
	}
	/* -----------section5  sec_sync ------------- */
	#hd #sec_sync {
		margin: 15% 0;
	}
	/* -----------section6  sec_morePower ------------- */
	#hd .morePowerBox{
		flex-wrap: wrap;
		justify-content: center;
	}
	#hd .morePower{
		width: 80%;
	}
	#hd .morePower-txt {
		width: 90%;
		padding: 1% 3%;
		margin-bottom: 2.5em;
		margin-top: -5%;
	}
	#hd .morePower::before {
		width: 138%;
		margin: 0 -13%;
	
	}
	/* -----------section7  sec_arc ------------- */
	#hd .arcBox{
		flex-wrap: wrap-reverse;
		justify-content: center;
	}
	#hd .arc{
		width: 80%;
	}
	#hd .arc-txt{
		width: 90%;
		margin-top: -12%;
	}
	/* -----------section7  sec_arc ------------- */
	#hd .arc{
		padding: 8%;
	}	
	#hd .arc::before {
		margin: 0 -43%;
    	width: 150%;
		height: 80%;
	}
	/* -----------section8  sec_armo ------------- */
	#hd .armo-txt{
		width: 90%;
		margin: 0 auto;
	}
	/* ---------- color effect --- */
	@-webkit-keyframes rainbow{
		0%	{-webkit-transform: translateX(-70%); }
		100%{-webkit-transform: translateX(-12%); }
	}
	@keyframes rainbow{
		0%	{transform: translateX(-70%); }
		100%{transform: translateX(-12%); }
	}
}

@media screen and (max-width:414px){
	/* -----------block------------- */
	#hd section{
		margin: 10% 0 10%;
	}
	/* -----------section4  sec_aura ------------- */
	#hd img.aura{
		width: 20%;
		top: 57%;
		left: 15%
	}
	#hd .hd-controls {
		margin-top: -7%;
	}
	#hd .hd-controls li{
		width: 25%;
		justify-content: center;
	}
	

}

@media screen and (max-width:375px){
	/* -----------block------------- */
	#hd section{
		margin: 10% 0 10%;
	}
	/* -----------section4  sec_aura ------------- */
	#hd img.aura{
		width: 20%;
		top: 62%;
		left: 15%
	}	
	#hd .hd-controls li{
		width: 22%;
		justify-content: center;
		margin: 0 1em;
	}

}



@media screen and (max-width:320px){
	/* --------------TXT------------- */
	
	#hd th ,#hd td{
		font-size: .8em;
		
	}
	#hd th ,#hd .sheet tbody td{
		padding: 1.8em 1.2em;
	}
	/* -----------block------------- */
	#hd section{
		margin: 10% 0 10%;
	}
	/* -----------section4  sec_aura ------------- */
	#hd img.aura{
		width: 20%;
		top: 65%;
		left: 15%
	}
	/*----------- ligthing --------*/
	#hd .hd-rainbow {
		width: 700%;
	}

	/* ---------- color effect --- */
	@-webkit-keyframes rainbow{
		0%	{-webkit-transform: translateX(-70%); }
		100%{-webkit-transform: translateX(-8%); }
	}
	@keyframes rainbow{
		0%	{transform: translateX(-70%); }
		100%{transform: translateX(-8%); }
	}
}