/* AUTHOR */



.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; 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 #cccccc}
.jQWCP-wWheel {border: 0}
#color-css {display: block}
.box1 {margin-top: -160px; 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; display: none}
#a1-2 {width: 30%; height: 400px; margin-left: 30%; position: absolute; z-index: 11; 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,"Ln",Microsoft\ JhengHei; font-family: "Roboto Condensed","Ln" !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}
@media screen and (max-width: 1366px) { #a1 {height: 800px} }
@media screen and (max-width: 1366px) { .nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06 {height: 200px} }
@media screen and (max-width: 1366px) { .nav-2 ul {margin-left: 50px} }
@media screen and (max-width: 1366px) { .nav-2 ul li {margin-right: 10px; width: 18%} }
@media screen and (max-width: 1366px) { .advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul {margin-left: 10%} }
@media screen and (max-width: 1366px) { .box1 {margin-top: 0px; width: 400px; height: 500px} }
@media screen and (max-width: 1366px) { #a1-2 {height: 260px} }
@media screen and (max-width: 1366px) { #a1-3 {height: 300px} }
@media screen and (max-width: 1366px) { #a1-6 {height: 260px} }
@media screen and (max-width: 1366px) { .temp-n {top: 60%; left: 70%} }
@media screen and (max-width: 960px) { #a1 {height: 700px} }
@media screen and (max-width: 960px) { .nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06 {width: 200%; height: 260px} }
@media screen and (max-width: 960px) { .nav-2 ul li {margin-right: 10px; width: 20%} }
@media screen and (max-width: 960px) { .box1 {margin-top: 0px; margin-right: 100px; height: 500px} }
@media screen and (max-width: 960px) { #a1-2 {height: 260px} }
@media screen and (max-width: 960px) { #a1-3 {height: 300px} }
@media screen and (max-width: 960px) { #a1-6 {height: 260px} }
@media screen and (max-width: 640px) { #a1 {height: 300px} }
@media screen and (max-width: 640px) { .nav-2, .advan, .advan02, .advan03, .advan04, .advan05, .advan06 {width: 100%; height: 140px} }
@media screen and (max-width: 640px) { .nav-2 ul {margin-left: 10px; width: 100%} }
@media screen and (max-width: 640px) { .nav-2 ul li {margin-right: 10px; width: 20%} }
@media screen and (max-width: 640px) { .advan ul, .advan02 ul, .advan03 ul, .advan04 ul, .advan05 ul, .advan06 ul {margin-left: 16%} }
@media screen and (max-width: 640px) { .advan ul li, .advan02 ul li, .advan03 ul li, .advan04 ul li, .advan05 ul li, .advan06 ul li {margin-right: 4px; width: 26%} }
@media screen and (max-width: 640px) { .click-n {width: 50%} }
@media screen and (max-width: 640px) { .box1 {width: 250px; height: 300px; margin-right: 0px} }
@media screen and (max-width: 640px) { #colorpicker-style {margin-left: 0px; margin-top: 0px} }
@media screen and (max-width: 640px) { #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} }
@media screen and (max-width: 640px) { #a1-2 {height: 160px} }
@media screen and (max-width: 640px) { #a1-3 {height: 160px} }
@media screen and (max-width: 640px) { #a1-6 {height: 160px} }
@media screen and (max-width: 640px) { .rgb-c, .rgb-ca {font-size: 15px} }
@media screen and (max-width: 640px) { .temp-n {top: 20%; left: 30%} }
@media screen and (max-width: 640px) { .music-n {top: 40%; left: 30%} }