
.con-led{
	margin-left:10%;
	margin-right:10%;
}

.advan, .advan02, .advan03, .advan04, .advan05, .advan06{
	display:none;
}

.nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06{	
	width:100%;
	height:260px;
	padding-top:30px;
	border-radius:10px;
	background: #0c0c0c;
	background: -moz-linear-gradient(top, #0c0c0c 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #0c0c0c 0%,#000000 100%);
	background: linear-gradient(to bottom, #0c0c0c 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c0c0c', endColorstr='#000000',GradientType=0 );
	border: 2px solid #262626;
	

}
.nav-2 ul{
	margin-top:10px;
	margin-left:30px;
}

.advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul{
	margin-top:10px;
	margin-left:16%;
}

.nav-2 ul li, .advan ul li, .advan02 ul li, .advan03 ul li, .advan04 ul li, .advan05 ul li, .advan06 ul li{
	float:left;
	margin-right:20px;
	cursor:pointer;
	margin-bottom:3%;

}

map *:focus{
	outline:none;
}

.jQWCP-wWidget {
	background-color:transparent;
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
	border-radius: 0px;
	border: 0;
	outline:none;
}
.jQWCP-wWidget.jQWCP-block {
		box-shadow: inset 0px 0px 0px #ccc;
}

.jQWCP-wWheel {
		border: 0;
}

#color-css{
	display:block;
}





.box1{
	margin-top:-120px;
	width:100%;
	max-width:717px;
	position:relative;
	height:900px;
	overflow:hidden;
	margin-bottom:10%;
	
}

#a1{
	width:100%;
	height:900px;
	position:absolute;
	z-index:11;
	background-color:#ED1B2F;
	animation:led-style3 1.4s linear infinite;
	-webkit-animation:led-style3 1.4s linear infinite;
}

#a1-1{
	width:30%;
	height:400px;
	position:absolute;
	z-index:11;
	/*background-color:#ED1B2F;*/
	
	background: -moz-linear-gradient(left, rgba(77, 241, 23, 1) 0%, rgba(77, 241, 23, 1) 78%, rgba(125,185,232,0) 100%);
	background: -webkit-linear-gradient(left, rgba(77, 241, 23, 1) 0%,rgba(77, 241, 23, 1) 78%,rgba(125,185,232,0) 100%);
	background: linear-gradient(to right, rgba(77, 241, 23, 1) 0%,rgba(77, 241, 23, 1) 78%,rgba(125,185,232,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4df117', endColorstr='#007db9e8',GradientType=1 );
	display:none;
}

#a1-2{
	width:30%;
	height:400px;
	margin-left:30%;
	position:absolute;
	z-index:11;
	/*background-color:#ED1B2F;*/
	background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(0,130,229,1) 22%, rgba(0,130,229,1) 100%);
	background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0,130,229,1) 22%,rgba(0,130,229,1) 100%);
	background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(0,130,229,1) 22%,rgba(0,130,229,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0082e5',GradientType=1 );
	display:none;
}
#a1-5{
	width:30%;
	height:400px;
	margin-top:60%;
	margin-left:30%;
	position:absolute;
	z-index:11;
	background-color:#ffff00;
	display:none;
}

#a1-3{
	width:24%;
	height:472px;
	margin-left:60%;
	position:absolute;
	z-index:11;
	background-color:#ff00ff;
	display:none;
}

#a1-32{
	width:10%;
	height:140px;
	margin-left:80%;
	position:absolute;
	z-index:11;
	background-color:#ff00ff;
	display:none;	
}


#a1-4{
	width:30%;
	height:400px;
	margin-top:66%;
	margin-left:60%;
	position:absolute;
	z-index:11;
	background-color:#ED1B2F;
	display:none;
}

#a1-42{
	width:10%;
	height:500px;
	margin-left:90%;
	position:absolute;
	z-index:11;
	background-color:#ED1B2F;
	display:none;	
}


#a1-6{
	width:20%;
	height:500px;
	margin-top:50%;
	position:absolute;
	z-index:11;
	background-color:#FF6600;
	display:none;	
}

#color1{
	width:100%;
	max-height:900px;
	position:absolute;
	z-index:13;
	display:none;
	margin-top:-300px;
}


.b1{
	width:100%;
	position:absolute;
	z-index:14;

}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

#colorpicker-style{
	margin-left:240px;
	margin-top:-220px;
	margin-bottom:10px;
}

#colorpicker-a1-style, #colorpicker-a2-style, #colorpicker-a3-style, #colorpicker-a4-style, #colorpicker-a5-style, #colorpicker-a6-style{
	margin-left:240px;
	margin-top:-220px;
	position:absolute;
	display:none;
}


.rgb-c, .rgb-ca{
	width:30%;
	height:50px;
	border-radius:10px;
	clear:both;
	cursor:pointer;
	text-align:center;
	line-height:50px;
	font-size:26px;
	background: #0d0d0d;
	display:inline-block;
	font-family: 'Roboto Condensed', sans-serif, '·L³n¥¿¶ÂÅé', Microsoft JhengHei;
	font-family: 'Roboto Condensed', '·L³n¥¿¶ÂÅé' !important;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #262626;
	border-right-color: #262626;
	border-bottom-color: #262626;
	border-left-color: #262626;
}
.rgb-c{
	color:#ff6400;
}

.rgb-c:hover, .rgb-ca:hover{
	color:#ff6400;
}

.click-n{
	z-index:22;
	top:0%;
	left:0%;
	position:absolute;
	display:none;
}

.temp-n{

	width:125px;
	height:200px;
	z-index:20;
	top:66%;
	left:75%;
	position:absolute;
	display:none;
}
.music-n{
	z-index:21;
	top:66%;
	left:60%;
	position:absolute;
	display:none;
}


@keyframes led-style4{
	0%   {opacity: 1}
    100% {opacity: 1}
}

@-webkit-keyframes led-style4{
	0%   {opacity: 1}
    100% {opacity: 1}
}

@-ms-keyframes led-style4{
	0%   {opacity: 1}
    100% {opacity: 1}
}

@keyframes led-style1{
	0%   {opacity: 1}
	10%  {opacity: 0.8}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.2}
   	85%  {opacity: 0.6}
    95%  {opacity: 0.8}
    100% {opacity: 1}
}

@-webkit-keyframes led-style1{
	0%   {opacity: 1}
	10%  {opacity: 0.8}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.2}
   	85%  {opacity: 0.6}
    95%  {opacity: 0.8}
    100% {opacity: 1}
}

@-ms-keyframes led-style1{
	0%   {opacity: 1}
	10%  {opacity: 0.8}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.2}
   	85%  {opacity: 0.6}
    95%  {opacity: 0.8}
    100% {opacity: 1}
}

@keyframes led-style2 {
	0%   {opacity: 1}
	10%  {opacity: 0.4}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.8}
   	85%  {opacity: 0.4}
    95%  {opacity: 0.9}
    100% {opacity: 1}
}

@-webkit-keyframes led-style2 {
	0%   {opacity: 1}
	10%  {opacity: 0.4}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.8}
   	85%  {opacity: 0.4}
    95%  {opacity: 0.9}
    100% {opacity: 1}
}

@-ms-keyframes led-style2 {
	0%   {opacity: 1}
	10%  {opacity: 0.4}
	20%  {opacity: 0.7}
    50%  {opacity: 0.5}
   	70%  {opacity: 0.8}
   	85%  {opacity: 0.4}
    95%  {opacity: 0.9}
    100% {opacity: 1}
}


@keyframes led-style3 {
	0% {background: rgba(77, 241, 23, 1);}
    7%{opacity: 0.9;}
    14%{background: rgba(109, 205, 221, 1);}
    21%{opacity: 0.9;}
    28% {background: rgba(9, 61, 216, 1);}
    35%{opacity: 0.8;}
    42% {background: rgba(252, 12, 185, 1);}
    49%{opacity: 0.9;}
    56% {background: rgba(240, 31, 37, 1);}
    63%{opacity: 0.8;}
    70% {background: rgba(243, 236, 23, 1);}
    77%{opacity: 0.9;}
    85% {background: rgba(255, 255, 255, 1);}
    92%{opacity: 0.8;}
    100% {background: rgba(77, 241, 23, 1);}
}

@-webkit-keyframes led-style3 {
	0% {background: rgba(77, 241, 23, 1);}
    7%{opacity: 0.9;}
    14%{background: rgba(109, 205, 221, 1);}
    21%{opacity: 0.9;}
    28% {background: rgba(9, 61, 216, 1);}
    35%{opacity: 0.8;}
    42% {background: rgba(252, 12, 185, 1);}
    49%{opacity: 0.9;}
    56% {background: rgba(240, 31, 37, 1);}
    63%{opacity: 0.8;}
    70% {background: rgba(243, 236, 23, 1);}
    77%{opacity: 0.9;}
    85% {background: rgba(255, 255, 255, 1);}
    92%{opacity: 0.8;}
    100% {background: rgba(77, 241, 23, 1);}
}


@keyframes led-style5 {
	0%   {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes led-style5 {
	0%   {opacity: 1}
    100% {opacity: 0}
}

@-ms-keyframes led-style5 {
	0%   {opacity: 1}
    100% {opacity: 0}
}

/*
@keyframes led-style7 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1000px;
  }
}
*/

@keyframes led-style7 {
  0% {
    top: -500px;
  }
  100% {
    top: 400px;
  }
}

@-webkit-keyframes led-style7 {
  0% {
    top: -500px;
  }
  100% {
    top: 400px;
  }
}
@-ms-keyframes led-style7 {
  0% {
    top: -500px;
  }
  100% {
    top: 400px;
  }
}



@keyframes led-style8 {

	0% {background: rgba(77, 241, 23, 1);opacity:1;}
    20%{opacity: 0;}
    30% {background: rgba(243, 236, 23, 1);opacity:1;}
    50%{opacity: 0;}
    70% {background: rgba(255, 102, 0, 1);opacity:1;}
    90%{opacity: 0;}
    100% {background: rgba(77, 241, 23, 1);opacity:1;}
}

@-webkit-keyframes led-style8 {

	0% {background: rgba(77, 241, 23, 1);opacity:1;}
    20%{opacity: 0;}
    30% {background: rgba(243, 236, 23, 1);opacity:1;}
    50%{opacity: 0;}
    70% {background: rgba(255, 102, 0, 1);opacity:1;}
    90%{opacity: 0;}
    100% {background: rgba(77, 241, 23, 1);opacity:1;}	
}

@-ms-keyframes led-style8 {

	0% {background: rgba(77, 241, 23, 1);opacity:1;}
    20%{opacity: 0;}
    30% {background: rgba(243, 236, 23, 1);opacity:1;}
    50%{opacity: 0;}
    70% {background: rgba(255, 102, 0, 1);opacity:1;}
    90%{opacity: 0;}
    100% {background: rgba(77, 241, 23, 1);opacity:1;}
}


@keyframes led-style9 {

	0% {background-image:url(../images/temp01.png);opacity:1;}
    20%{opacity: 0;}
    30% {background-image:url(../images/temp02.png);opacity:1;}
    50%{opacity: 0;}
    70% {background-image:url(../images/temp03.png);opacity:1;}
    90%{opacity: 0;}
    100% {background-image:url(../images/temp01.png);opacity:1;}	
}

@-webkit-keyframes led-style9 {

	0% {background-image:url(../images/temp01.png);opacity:1;}
    20%{opacity: 0;}
    30% {background-image:url(../images/temp02.png);opacity:1;}
    50%{opacity: 0;}
    70% {background-image:url(../images/temp03.png);opacity:1;}
    90%{opacity: 0;}
    100% {background-image:url(../images/temp01.png);opacity:1;}	
}

@-ms-keyframes led-style9 {

	0% {background-image:url(../images/temp01.png);opacity:1;}
    20%{opacity: 0;}
    30% {background-image:url(../images/temp02.png);opacity:1;}
    50%{opacity: 0;}
    70% {background-image:url(../images/temp03.png);opacity:1;}
    90%{opacity: 0;}
    100% {background-image:url(../images/temp01.png);opacity:1;}	
}

@media screen and (max-width: 1366px) {

	.temp-n{top:60%;left:70%;}
	#a1{height:800px;}
	.nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06{height:200px;}
	.nav-2 ul {margin-left:50px;}
	.nav-2 ul li{margin-right:10px;width:18%;}
	
	.advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul{margin-left:10%;}
	
	.box1{margin-top:0px;width:400px;height:500px;}
	#a1-1{height:260px;}
	#a1-2{height:260px;}
	#a1-3{height:300px;}
	#a1-6{height:260px;}

}

@media screen and (max-width: 960px) {
	#a1{height:700px;}
	.nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06{height:160px;}
	
	.advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul{margin-left:16%;}
	.advan ul li, .advan02 ul li, .advan03 ul li, .advan04 ul li, .advan05 ul li, .advan06 ul li{margin-right:4px;width:26%;}
	
	.rgb-c, .rgb-ca{font-size:15px;}
	.nav-2 ul{margin-left:10px;}
	.nav-2 ul li{margin-right:10px;width:20%;}
	.box1{margin-top:0px;margin-right:100px;height:500px;}
	#a1-2{height:260px;}
	#a1-3{height:300px;}
	#a1-6{height:260px;}
}	
@media screen and (max-width: 640px) {
	#a1{height:300px;}
	.nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06{height:170px;}
	.nav-2 ul{margin-left:10px;}
	.nav-2 ul li{margin-right:10px;width:20%;}
	
	.advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul{margin-left:16%;}
	.advan ul li, .advan02 ul li, .advan03 ul li, .advan04 ul li, .advan05 ul li, .advan06 ul li{margin-right:4px;width:26%;}
	
	.click-n{width:50%;}
	.box1{width:250px;height:300px;margin-right:50px;}
	#colorpicker-style{margin-left:0px;margin-top:0px;}
	#colorpicker-a1-style, #colorpicker-a2-style, #colorpicker-a3-style, #colorpicker-a4-style, #colorpicker-a5-style, #colorpicker-a6-style{margin-left:0px;margin-top:0px;position:static;}
	
	#a1-2{height:160px;}
	#a1-3{height:160px;}
	#a1-6{height:160px;}
	
	.rgb-c, .rgb-ca{font-size:15px;}
	.music-n{top:40%;left:30%;}
	.temp-n{top:20%;left:30%;}
	
}







