#connect .tabs {
	background:#000000;
}
	   
#connect .conbox1 {
	width:50%;
	margin-left:25%;
	margin-bottom:5%;
	margin-top:3%;
}	   

#connect .a {
	text-decoration: none;
}

	   
        #connect .conbox2{
			float:left;
             width: 45%;
			 margin-right:6%;
			 margin-left:12%;
        }
		
        #connect .conbox3{
			display: inline-block;
			float:left;
             width: 30%;
			 margin-top:25%;
			 margin-bottom:5%;
        }
		
		#output.tabs-hdmi{
			background:#000000;
		}
		
		#output .a {
			text-decoration:none;
		}
	   
	    #perfect {
			 background:#111;
        }

        #perfect .conbox1{
			float:left;
             width: 50%;
        }
		
        #perfect .conbox2{
			display: inline-block;
			float:left;
             width: 50%;
        }
		
		#perfect .title1{
			text-align:center;
			font-size: 0.9em;
			line-height: 1.8em;
			margin-top:2%;
		}

		#perfect .text1{
			text-align:center;
			font-size: 20px;
			font-weight:300;
			line-height: 30px;
			margin-bottom:6%;
			font-family:"Roboto Condensed","sans-serif","微軟正黑體","Microsoft JhengHei";
			font-family:"Roboto Condensed","微軟正黑體 !important";
		}
		
		#processor {            
            background: url(../images/processor_1920_bg.jpg) 50% 0;
			color:#FFF;
			height:1000px;
			margin: 0 auto;
			padding:0;
        }

        #processor .conbox{
			margin-left:33%;
			margin-top:250px;
            width: 30%;
        }

        #processor .digitalled-ani01 {
            opacity: 0;
        }

		#bg {            
            background: url(../images/brix_1920_bg.jpg) 50% 0;
			height:50px;
			margin: 0 auto;
			padding:0;
        }

        #IRMT .conbox{
			float:left;
            width: 30%;
			margin-right:3%;
			margin-bottom:5%;
        }

        #IRMT .conbox-a{
			float:left;
            width: 28%;
        }

        #IRMT .conbox-b{
			float:left;
            width: 72%;
        }

        #IRMT .text1{
			text-align: left;
        }
		
		#IRMT a {
			text-decoration:underline;
			color:#FFF;
		}

		#IRMT a:hover{
			text-decoration:underline;
			color:#05c79c;
		}
		
		#output {
			background:#1a1a1a;
			box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		}
		
		#output .img01{
			margin-left:15%;
			width:70%;
		}

		#output .img02{
			margin-left:20%;
			width:55%;
		}

		#output .img03{
			margin-left:20%;
			width:55%;
		}
		
	#output-s {
		display:none;
	}

		#rs232 {
			margin-bottom:-30px;
		}

		#rs232 .img01{
			margin-left:35%;
			width:30%;
			margin-top:270px;
		}

        #rs232 .digitalled-ani02 {
            opacity: 0;
        }

        #rs232 .digitalled-ani03 {
            opacity: 0;
        }

#ddr4 {
    background-image: url("../images/ddr4_1920.jpg");
    background-position: bottom;
    min-height: 1000px;
    background-repeat: no-repeat;
}

#ddr4 .note{
	margin-left:63%;
	margin-top:32%;
}

		#vesa {
			background:#111;
		}

		#vesa .img01{
			margin-left:30%;
			width:40%;
		}

        #overview .conbox1{
			float:left;
            width: 30%;
			margin-left:20%;
			margin-right:3%;
			margin-bottom:3%;
        }
		
        #overview .conbox2{
			display: inline-block;
			float:left;
             width: 30%;
			margin-bottom:3%;
        }

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




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

		#perfect .title1{
			font-size: 0.8em;
			line-height: 1.8em;
			margin-top:2%;
		}

		#perfect .text1{
			font-size: 17px;
			line-height: 30px;
			margin-bottom:6%;
		}

		#processor {            
			height:900px;
			margin: 0 auto;
			padding:0;
        }

        #processor .conbox{
			margin-left:33%;
			margin-top:250px;
            width: 30%;
        }

		#bg {            
            background: url(../images/brix_1366_bg.jpg) 50% 0;
			color:#FFF;
			height:50px;
			margin: 0 auto;
			padding:0;
        }

		#rs232 .img01{
			margin-left:30%;
			width:40%;
		}

        #IRMT .conbox{
			float:left;
            width: 31%;
			margin-right:2%;
        }
		
		#output .img03 {
			margin-left:15%;
			width:70%;
		}
			
    #ddr4 {
        background-color: #000;
        background-image: url("../images/ddr4_1366.jpg");
        background-position: bottom;
        min-height: 784px;
        background-repeat: no-repeat;
    }
}

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

        #perfect .conbox1{
             width: 100%;
        }
		
        #perfect .conbox2{
             width: 100%;
        }

		#perfect .title1{
			font-size: 1em;
			line-height: 1.8em;
			margin-top:2%;
		}

		#perfect .text1{
			font-size: 20px;
			line-height: 30px;
			margin-bottom:7%;
		}

		#processor {            
            background: url(../images/processor_1920_bg.jpg) 50% -100px;
			color:#FFF;
			height:750px;
			margin: 0 auto;
			padding:0;
        }

        #processor .conbox{
			margin-left:30%;
			margin-top:180px;
            width: 40%;
        }

		#bg {            
            background: url(../images/brix_1366_bg.jpg) 50% -100px;
			color:#FFF;
			height:80px;
			margin: 0 auto;
			padding:0;
        }

		#output .img01{
			margin-left:0%;
			width:100%;
		}

		#output .img02{
			margin-left:7%;
			width:90%;
		}

		#output .img03{
			margin-left:7%;
			width:90%;
		}

		#rs232 {
			margin-bottom:-45px;
		}

		#rs232 .img01{
			margin-left:27%;
			margin-top:200px;
			width:50%;
		}

        #IRMT .conbox{
			float:left;
            width: 48%;
			margin-right:2%;
        }

		#vesa .img01{
			margin-left:20%;
			width:60%;
		}

        #overview .conbox1{
			float:left;
            width: 40%;
			margin-left:10%;
			margin-right:3%;
			margin-bottom:3%;
        }
		
        #overview .conbox2{
			display: inline-block;
			float:left;
             width: 40%;
			margin-bottom:3%;
        }

    #ddr4 {
        background-color: #000;
        background-image: url("../images/ddr4_960.jpg");
        background-position: center;
        min-height: 656px;
        background-repeat: no-repeat;
    }

}


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

	#output {
		display:none;
	}
	
	#output-s {
		display:block;
			background:#1a1a1a;
	}

	#output-s .subtitle {
		font-size:18px;
		font-weight:300;
    	text-align:center;
	}


}



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

		#perfect {
			min-height:2950px;
		}

		#perfect .title1{
			font-size: 0.7em;
			line-height: 1.8em;
			margin-top:2%;
		}

		#perfect .text1{
			font-size: 16px;
			line-height: 30px;
			margin-bottom:7%;
		}

		#processor {            
            background: url(../images/processor_1500_bg.jpg) 50% 0;
			color:#FFF;
			height:700px;
			margin: 0 auto;
			padding:0;
        }

        #processor .conbox{
			margin-left:25%;
			margin-top:170px;
            width: 50%;
        }

    #ddr4 {
        background-color: #000;
        background-image: url("../images/ddr4_960.jpg");
        background-position: bottom;
        min-height: 656px;
        background-repeat: no-repeat;
    }
	
	#ddr4 .note{
	    margin-left:40%;
	    margin-top:5%;
	}
	
		#connect {            
			height:550px;
        }

		#rs232 {
			margin-bottom:-55px;
		}

		#rs232 .img01{
			margin-top:120px;
		}

        #IRMT .conbox{
			float:left;
            width: 100%;
			margin-right:1%;
        }
		
		#IRMT {
	        min-height:700px;
        }

		#vesa .img01{
			margin-left:20%;
			width:60%;
		}

        #overview .conbox1{
            width: 70%;
			margin-left:17%;
			margin-right:0%;
			margin-bottom:3%;
        }
		
        #overview .conbox2{
			margin-left:17%;
             width: 70%;
			margin-bottom:3%;
        }

		#bg {            
            background: url(../images/brix_640_bg.jpg) 50% -200px;
			height:50px;
			margin: 0 auto;
			padding:0;
        }

}

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

		#perfect {
			min-height:2350px;
		}

		#IRMT {
	        min-height:920px;
        }

}