@import url(https://fonts.googleapis.com/css?family=Oswald);


#RGBLED-function {
    /* background-image: url("../images/red_bg_1920.jpg"); */
    background-position: 50% 100px;
    background-repeat: no-repeat;
    min-height: 1000px;
    position: relative;
    z-index: 15;
    overflow: hidden;
}



#RGBLED-function .title {
    z-index: 16;
    position: relative;
    margin-bottom: 90px;
}

#RGBLED-function .text {
    margin-top: -80px;
}

#RGBLED-function .text {
    width: 46%;
}

#RGBLED-function .rgbscale img {
    cursor: pointer;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

#RGBLED-function .rgbscale img:hover {
    transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
}

#rgbsoftware .conbox1 {
    position: relative;
    display: inline-block;
    width: 15%;    
    vertical-align: top;
    padding-top:0px;
}


#rgbsoftware .conbox2 {
    display: inline-block;
    position: relative;
    width: 82%;    
    padding-top:10px;
}

#rgbsoftware .conbox3 {
    position: relative;
    display: inline-block;
    width: 46%;
    vertical-align: top;
    text-align: center;
}

#rgbsoftware .conbox4 {
    display: inline-block;
    position: relative;
    width: 46%;
    margin-left: 4%;
    vertical-align: top;
    text-align: center;
}

        #RGBtext {
            position: relative;
            margin-bottom: 4%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px;
            line-height: 24px;
            color: rgb(221, 221, 221);
        }

        #RGBtext a {
            color: rgb(221, 221, 221);
        }

		#tabicon .tabcon{
			width:100%;
			/*background-color: #666;*/
			margin:0 auto;
			clear:both;
			margin-bottom: 10%;
			display:none;
		}
		#tabicon ol li{
			float: left;	
			text-align: center;
			transition:all 0.3s linear;
		}
		#tabicon .triP{
			background-color: #ff7200;
			width:100px;
			height:20px;
		}

		

		#tabicon ol li{
			list-style: none; 
			float: left;
			width:auto;
			cursor: pointer;
			border:1px solid #FF6600;
			
		}
		/*
		#tabicon ol li:hover{
			border:10px solid #FF6600;
		}
		*/

		.iconall{
			width:50%;
			margin:0 auto;
		}
		
		#tabbox {
			min-height:900px;
		}


		.trianglediv::after {
		    content: "";
		    position: absolute;
		    border-top: #FF6600 16px solid;
		    border-right: transparent 10px solid;
		    border-bottom: transparent 10px solid;
		    border-left: transparent 10px solid;
		    margin-top:10px;
		    z-index:1;
		}


		#fourway {
            background-color: #000;
            background-image: url(../images/four-way-graphics_1920.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 1400px;
        }
        #fourway .center{
			width:70%;
        }
		

		#triplepcie{
            background-color: #000;
            background-image: url(../images/triple_1920.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 1160px;
        }

        #triplepcie .center{
			width:60%;
        }

		#m2{
            background-color: #000;
            background-image: url(../images/M.2_1920.png);
            background-position: 50% top;
            background-repeat: no-repeat;
            min-height: 2300px;
        }

		#m2 .title{
			margin-top:3%;
		}

		#m2 .title1{
			width:96%;
			float:right;
			font-size:1.3em;
			color: #00A3FF;
			margin-top:35%;
		}

		#m2 .title2{
			width:84%;
			float:right;
			font-size:1.3em;
			margin-top:37%;
		}

		#m2 .note{
			width:20%;
			float:right;
			margin-top:3%;
		}

		#m2 .title3{
			width:93%;
			float:right;
			font-size:1.5em;
			color: hsla(205,100%,50%,1.00);
			margin-top:11%;
		}

		#m2 .title4{
			width:67%;
			float:right;
			font-size:1.1em;
			color: hsla(47,100%,50%,1.00);
			margin-top:30%;
			line-height:40px;
		}

		#m2 .title5{
			width:95%;
			float:right;
			font-size:0.6em;
			color:#938F8F;
			margin-top:3%;
		}

		#GoldPlatedSolid{
			background-image: url(../images/GoldPlatedSolid_1920.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 840px;
		}
		
		#GoldPlatedSolid .title2{
			font-size:1em;
		}


		#digitalpower{
            background-image: url(../images/digitalpower_1920.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 1100px;
        }

        #digitalpower .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }

        #digitalpower .digipotext{
            width:50%;
            float:right;
        }
		
		#slihb{
			background-image: url(../images/graybg.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            background-position: center; center;
		}
		
		

		.graylinebg{
			background-image: url(../images/graylinebg.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 80px;
		}

        #product .text {
            width: 54%;
            float: right;
        }

        #product .title {
            margin-top:-20px;
            width: 54%;
            float: right;
            font-size:1.9em;
        }

        #product img{
			margin-top:-20px;
            width:auto;
            float:left;
        }
		


@media screen and (max-width: 1680px) {

		#tabicon ol li{
			list-style: none; 
			float: left;
			margin-left: 0px;
			cursor: pointer;
			border:1px solid #FF6600;
			/*margin-left:4%;*/
		}

   
}



@media screen and (max-width: 1366px) {      

		.iconall{
			width:66%;
			margin:0 auto;
		}

		#tabicon ol li{
			width:30%;
			margin-bottom:1%;
			list-style: none; float: left;
			cursor: pointer;
			border:1px solid #FF6600;
			/*margin-left:4%;*/
		}

		#tabicon ol li:hover{
			border:10px solid #FF6600;
		}

		#tabicon img{
			width:100%;
		}

		#tabicon .tabcon{
			width:100%;
			margin:0 auto;
			overflow: visible;
			display:none;
		}

       	.tabbox{
       		overflow: visible;
			min-height:800px;
       	}

    #RGBLED-function {
        background-position: center center;
        position: relative;
        min-height: 450px;
    }

       	#fourway {
            background-color: #000;
            background-image: url(../images/four-way-graphics_1366.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 1060px;
        }
        #fourway .center{
			width:70%;
        }
		

		#triplepcie{
            background-color: #000;
            background-image: url(../images/triple_1366.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 950px;
        }

        #triplepcie .center{
			width:60%;
        }

		#m2{
            background-color: #000;
            background-image: url(../images/M.2_1366.png);
            background-position: 50% 60%;
            background-repeat: no-repeat;
            min-height: 1750px;
        }

		#m2 .title{
			margin-top:7%;
		}

		#m2 .title1{
			width:98%;
			float:right;
			font-size:0.9em;
			color: #00A3FF;
			margin-top:35%;
		}

		#m2 .title2{
			width:85%;
			float:right;
			font-size:0.9em;
			margin-top:39%;
		}

		#m2 .note{
			width:25%;
			float:right;
			margin-top:3%;
		}

		#m2 .title3{
			width:93%;
			float:right;
			font-size:1.3em;
			color: hsla(205,100%,50%,1.00);
			margin-top:10%;
		}

		#m2 .title4{
			width:67%;
			float:right;
			font-size:1.0em;
			color: hsla(47,100%,50%,1.00);
			margin-top:27%;
			line-height:40px;
		}

		#m2 .title5{
			width:97%;
			float:right;
			font-size:0.6em;
			color:#938F8F;
			margin-top:5%;
		}

		#GoldPlatedSolid{
			background-image: url(../images/GoldPlatedSolid_1366.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 700px;
		}
		
		#GoldPlatedSolid .title2{
			font-size:1em;
		}


		#digitalpower{
            background-image: url(../images/digitalpower_1366.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
			background-position:50% bottom;
            min-height: 1240px;
        }

        #digitalpower .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }

        #digitalpower img{
            margin-top:4%;
        }

        #digitalpower .digipotext{
            width:50%;
            float:right;
        }

        #product .text {
            width: 54%;
            float: right;
        }

        #product .title {
            margin-top:-20px;
            width: 54%;
            float: right;
            font-size:1.9em;
        }

        #product img{
			margin-top:-20px;
            width:45%;
            float:left;
        }


}


@media screen and (max-width: 960px) {

       	.tabbox{
       		overflow: visible;
			min-height:700px;
       	}


       	#fourway {
            background-color: #000;
            background-image: url(../images/four-way-graphics_960.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 860px;
        }
        #fourway .center{
			width:100%;
        }
		

		#triplepcie{
            background-color: #000;
            background-image: url(../images/triple_960.jpg);
            background-position: 50% 65%;
            background-repeat: no-repeat;
            min-height: 750px;
        }

        #triplepcie .center{
			width:100%;
        }

    #RGBLED-function .text {
        width: 100%;
    }

    #rgbsoftware .conbox1 {
        position: relative;
        display: inline-block;
        width: 100%;        
    }

    #rgbsoftware .conbox1 img{        
        margin:0 auto;
    }
    #rgbsoftware .conbox2 {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-left: 0%;
    }
    #rgbsoftware .conbox3 {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    #rgbsoftware .conbox4 {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-left: 0%;
    }

		#m2{
            background-color: #000;
            background-image: url(../images/M.2_960.png);
            background-position: 50% 70%;
            background-repeat: no-repeat;
            min-height:1183px;
        }

		#m2 .title{
			margin-top:-20px;
		}

		#m2 .title1{
			width:100%;
			font-size:0.6em;
			color: #00A3FF;
			margin-top:35%;
		}

		#m2 .title2{
			width:86%;
			float:right;
			font-size:0.6em;
			margin-top:40%;
		}

		#m2 .note{
			width:44%;
			float:right;
			margin-top:2%;
		}

		#m2 .title3{
			width:95%;
			float:right;
			font-size:1em;
			color: hsla(205,100%,50%,1.00);
			margin-top:12%;
		}

		#m2 .title4{
			width:67%;
			float:right;
			font-size:0.8em;
			color: hsla(47,100%,50%,1.00);
			margin-top:27%;
			line-height:28px;
		}

		#m2 .title5{
			width:99%;
			float:right;
			font-size:0.6em;
			color:#938F8F;
			margin-top:7%;
		}

		#GoldPlatedSolid{
			background-image: url(../images/GoldPlatedSolid_960.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 700px;
		}
		
		#GoldPlatedSolid .title2{
			font-size:1em;
		}


		#digitalpower{
            background-image: url(../images/digitalpower_960.jpg);
			background-position: top center;
            background-repeat: no-repeat;
            min-height: 1600px;
        }

        #digitalpower .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }

        #digitalpower img{
            margin-top:4%;
        }

        #digitalpower .digipotext{
            width:100%;
        }

        #product .text {
            width: 100%;
            float: right;
        }

        #product .title {
            margin-top:5%;
            width: 100%;
            float: right;
            font-size:1.9em;
        }

        #product img{
			margin-top:-50px;
            width:70%;
            float:left;
        }


   
}


@media screen and (max-width: 640px) {      

		#tabicon .iconall{
			width:70%;
		}

		#tabicon ol li{
			width:28%;
			margin-bottom:10%;
			list-style: none; float: left;
			cursor: pointer;
			border:1px solid #FF6600;
			/*margin-left:4%;*/
		}

		#tabicon ol li:hover{
			border:6px solid #FF6600;
		}

		#tabicon img{
			width:100%;
		}
		

		#tabicon .tabcon{
			width:100%;
			margin:0 auto;
			overflow: visible;
			min-height:750px;
			display:none;
		}

       	.tabbox{
       		overflow: visible;
       	}


    #RGBLED-function {
        background-position: center 178px;
        min-height: 1300px;
        position: relative;
    }
    #RGBLED-function .frame .cell {
        width: 100%;
    }

       	#fourway {
            background-color: #000;
            background-image: url(../images/four-way-graphics_640.jpg);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 650px;
        }
        #fourway .center{
			width:100%;
        }
		

		#triplepcie{
            background-color: #000;
            background-image: url(../images/triple_640.jpg);
            background-position:50% 65%;
            background-repeat: no-repeat;
            min-height: 600px;
        }

        #triplepcie .center{
			width:100%;
        }

		#m2{
            background-color: #000;
            background-image: url(../images/M.2_640.png);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height:860px;
        }

		#m2 .title{
			margin-top:-25px;
		}

		#m2 .title1{
			width:100%;
			font-size:0.5em;
			color: #00A3FF;
			margin-top:38%;
		}

		#m2 .title2{
			width:100%;
			float:right;
			font-size:0.5em;
			margin-top:48%;
		}

		#m2 .note{
			width:66%;
			float:right;
			margin-top:5%;
		}

		#m2 .title3{
			width:95%;
			float:right;
			font-size:0.5em;
			color: hsla(205,100%,50%,1.00);
			margin-top:17%;
		}

		#m2 .title4{
			width:67%;
			float:right;
			font-size:0.5em;
			color: hsla(47,100%,50%,1.00);
			margin-top:27%;
			line-height:20px;
		}

		#m2 .title5{
			width:99%;
			float:right;
			font-size:0.4em;
			color:#938F8F;
			margin-top:6%;
		}

		#GoldPlatedSolid{
			background-image: url(../images/GoldPlatedSolid_640.jpg);
			background-size: 100%;
            background-repeat: no-repeat;
            min-height: 900px;
		}
		
		#GoldPlatedSolid .title2{
			font-size:1em;
		}


		#digitalpower{
            background-image: url(../images/digitalpower_640.jpg);
			background-position: top center;
            background-repeat: no-repeat;
            min-height: 1400px;
        }

        #digitalpower .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }

        #digitalpower img{
            margin-top:4%;
        }

        #digitalpower .digipotext{
            width:100%;
        }
		

}


@media screen and (max-width: 480px) { 

		#tabicon .tabcon{
			min-height:600px;
		}

		#digitalpower{
            background-image: url(../images/digitalpower_640.jpg);
			background-position: bottom center;
			background-repeat: no-repeat;
            min-height: 1200px;
		}
		
		#GoldPlatedSolid{
			background-image: url(../images/GoldPlatedSolid_640.jpg);
			background-position: bottom center;
            background-repeat: no-repeat;
			min-height: 700px;
			margin-bottom: 10%;
		}

 }