@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400,300,700');


    	body {
            font-size: 30px;
            background: #000;
            padding: 0;
            margin: 0;
            color: #fff;
        }

    	.title {
    		font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
            font-size: 1.4em;
            line-height: 1.4em;
            color: #FF7200;
        }
        
        .text {
            font-weight: 300;
            font-size: 20px;
            line-height: 1.3em;
            margin-top: 1em;
            margin-bottom: 1em;
            color: #ddd;
			font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Roboto Condensed', '微軟正黑體' !important;
        }
        
        .note {
            font-weight: 300;
            font-size: 12px;
            line-height: 1.25em;
            margin-left: 0.4em;
            text-indent: -0.4em;
            color: #bbb;
        }

		img {
            width: 100%;
            outline: none;
            border: 0;
        }

        .img-responsive {
			display: block;
			max-width: 100%;
			height: auto;
		}

		.frame {
            margin: 0 auto;
            padding: 1em 0;
            overflow: hidden;
            width: 1366px;
        }
		
	    .rgbfusion{
			width:70%;
			margin:0 auto;
			margin-top:4%;
			padding:30px 0px 30px 0px;
			border-radius:20px;
			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;
			overflow: hidden;
		}
	
        .rgbfusion ul{        	
        	margin:0 auto;
        }
        .rgbfusion ul li{
        	float:left;
        	margin-left:10%;
        	margin-bottom: 2%;
        	margin-top: 2%;
        }

        .rgbfusion ul li img{
        	width:140%;
        }


        #bridge-control {
                background-image: url("../images/Control-the-lighting-mode.jpg");
                background-repeat: no-repeat;
                background-size: 100%;
                min-height: 660px;
                position: relative;
                margin-bottom: 4%;
                margin-top: 4%;
       }
       
        
       #bridge-control .bridge01 {
                position:absolute; left: 10%; bottom: 10px;
       }

       #bridge-control .bridge02 {
                position:absolute; left: 68%; bottom: 40px;
       }

       #bridge-control .text{
			font-weight: 300;
            font-size: 30px;
            line-height: 1.3em;
            margin-top: 1em;
            margin-bottom: 1em;
            color: #ddd;
			font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Roboto Condensed', '微軟正黑體' !important;
       }

       #bridge-control .brideg01title{
       		text-decoration:underline;
       		font-size: 40px;
       		line-height: 2em;
       }
       


		#UHDresolutions {
                background-image: url("../images/UHD-resolutions.jpg");
                background-repeat: no-repeat;
                background-size: 100%;
                min-height: 660px;
                position: relative;
                margin-bottom: 4%;
                margin-top: 4%;
       }
       
        
       #UHDresolutions .bridge01 {
                position:absolute; left:4%; bottom: 4%;
       }
 		#UHDresolutions .bridge01 .t3{
				margin-top:30%;
       }
       #UHDresolutions .bridge02 {
                position:absolute; left: 80%; bottom: 30px;
       }

       #UHDresolutions .text{
			font-weight: 500;
            font-size: 30px;
            line-height: 1.3em;
            color: #fff;
			font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Roboto Condensed', '微軟正黑體' !important;
       }

       #UHDresolutions .UHDbox{
       		padding:14px;
       		border-radius: 10px;
       		border: 2px solid #ff7200;
       		text-align: center;
       		background: rgb(255,168,76);
			background: -moz-linear-gradient(top, rgb(255,168,76) 0%, rgb(234,96,16) 100%);
			background: -webkit-linear-gradient(top, rgb(255,168,76) 0%,rgb(234,96,16) 100%);
			background: linear-gradient(to bottom, rgb(255,168,76) 0%,rgb(234,96,16) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ea6010',GradientType=0 );
			margin-bottom:20%;
       }
       

		




@media screen and (max-width: 1366px) {
        .frame {
             width: 960px;
        }

        .rgbfusion{
			width:96%;
			margin:0 auto;
			margin-top:4%;
			padding:30px 0px 30px 0px;
		}

		#bridge-control {
                min-height: 500px;
                margin-bottom: 0%;
                margin-top: 4%;
       }

		#bridge-control .bridge01 {
                position:absolute; left: 10%; bottom: 10%;
       }

       #bridge-control .bridge02 {
                position:absolute; left: 68%; bottom: 14%;
       }

       #bridge-control .text{
            font-size: 20px;
       }

       #bridge-control .brideg01title{
       		font-size: 30px;
       }



       #UHDresolutions {
                background-image: url("../images/UHD-resolutions.jpg");
                background-repeat: no-repeat;
                background-size: 100%;
                min-height: 500px;
                position: relative;
                margin-bottom: 0%;
                margin-top: 4%;
       }
       
        
       #UHDresolutions .bridge01 {
                position:absolute; left:5%; bottom: 6%;
       }

       #UHDresolutions .bridge01 .t3{
				margin-top:60%;
       }

       #UHDresolutions .bridge02 {
                position:absolute; left: 80%; bottom: 14%;
       }
       

       #UHDresolutions .text{
			font-weight: 500;
            font-size: 20px;
       }

       #UHDresolutions .UHDbox{
       		padding:8px;
       		
       }
       
       
	

}        
        
        


@media screen and (max-width: 960px) {
        .frame {
            width: 640px;
            padding: 1.5em 0;
        }
        .rgbfusion ul li{
        	float:left;
        	margin-left:6%;
        	margin-bottom: 2%;
        	margin-top: 2%;
        }

        .rgbfusion ul li img{
        	width:120%;
        }

        #bridge-control {
                min-height: 320px;
                margin-bottom: 0%;
                margin-top: 4%;
       }

		#bridge-control .bridge01 {
                position:absolute; left: 0%; bottom: 0%;
       }

       #bridge-control .bridge02 {
                position:absolute; left: 68%; bottom: 6%;
       }
		



		#UHDresolutions {
                background-image: url("../images/UHD-resolutions.jpg");
                background-repeat: no-repeat;
                background-size: 100%;
                min-height: 400px;
                position: relative;
                margin-bottom: 0%;
                margin-top: 20%;
       }

	    #UHDresolutions .bridge01 {
                position:absolute; left:3%; bottom: 0%;
       }

       #UHDresolutions .bridge01 .t3{
				margin-top:0%;
       }

       #UHDresolutions .bridge02 {
                position:absolute; left: 80%; bottom: -10%;
       }
       

       #UHDresolutions .text{
			font-weight: 500;
            font-size: 20px;
       }

       #UHDresolutions .UHDbox{
       		padding:8px;
       		width:100px;
       		
       }


}        
        
            
@media screen and (max-width: 640px) {
        .frame {
	        padding: 1em 0;
	        width: 480px;
	        padding-left: 10px;
	        padding-right: 10px;             
        }
		
		.rgbfusion ul{        	
        	padding-left:6%; 	
        }
        .rgbfusion ul li{
        	float:left;
        	margin-left:0%;
        	margin-bottom: 2%;
        	margin-top: 2%;
        }

        .rgbfusion ul li img{
        	width:90%;
        }

	   #bridge-control {
                min-height: 280px;
                margin-bottom: 0%;
                margin-top:10%;
       }		
		
       #bridge-control .bridge01 {
                position:absolute; left: 0%; bottom: 10%;
       }

       #bridge-control .bridge02 {
                position:absolute; left: 68%; bottom: 16%;
       }

       #bridge-control .text{
            font-size: 16px;
       }

       #bridge-control .brideg01title{
       		font-size: 20px;
       }


		#UHDresolutions {
                background-image: url("../images/UHD-resolutions_640.jpg");
                background-repeat: no-repeat;
                background-position: top center;
                min-height: 700px;
                position: relative;
                margin-bottom: 0%;
                margin-top: 0%;
       }

	    #UHDresolutions .bridge01 {
                position:absolute; left:20%; top:10%;
       }

       #UHDresolutions .bridge01 .t3{
				margin-top:0%;
       }

       #UHDresolutions .bridge02 {
                position:absolute; left: 55%; top:50%;
       }
       

       #UHDresolutions .text{
			font-weight: 500;
            font-size: 16px;
       }

       #UHDresolutions .UHDbox{
       		padding:4px;
       		width:100px;
       		border-radius: 6px;
       		
       }


}        


@media screen and (max-width: 480px) {
        .frame {
	        padding: 1em 0;
	        width: 320px;
	        padding-left: 10px;
	        padding-right: 10px;
              
        }

        .title {
            font-size: 1em;
            line-height: 1.4em;
        }

		.rgbfusion{
			width:80%;
		}

		.rgbfusion ul{        	
        	padding-left:12%; 	
        }			
        .rgbfusion ul li img{
        	width:80%;
        }

        #bridge-control {
                min-height: 200px;
                margin-bottom: 0%;
                margin-top:10%;
       }		
		
       #bridge-control .bridge01 {
                position:absolute; left: 0%; bottom: 16%;
       }

       #bridge-control .bridge02 {
                position:absolute; left: 68%; bottom: 16%;
       }

       #bridge-control .text{
            font-size: 13px;
       }

       #bridge-control .brideg01title{
       		font-size: 16px;
       }


       #UHDresolutions {
                background-image: url("../images/UHD-resolutions_480.jpg");
                background-repeat: no-repeat;
                background-position: top center;
                min-height: 700px;
                position: relative;
                margin-bottom: 0%;
                margin-top: 0%;
       }

	    #UHDresolutions .bridge01 {
                position:absolute; left:10%; top:3%;
       }

       #UHDresolutions .bridge01 .t3{
				margin-top:0%;
       }

       #UHDresolutions .bridge02 {
                position:absolute; left: 48%; top:48%;
       }
       

       #UHDresolutions .text{
			font-weight: 500;
            font-size: 16px;
       }

       #UHDresolutions .UHDbox{
       		padding:4px;
       		width:100px;
       		border-radius: 6px;
       		
       }


}