@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-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
            /*Firefox hack*/
            font-size: 30px;
            background: #000;
            padding: 0;
            margin: 0;
            color: #fff;
        }
        
        img {
            width: 100%;
            outline: none;
            border: 0;
        }
        
        .frame {
            margin: 0 auto;
            padding: 1em 0;
            overflow: hidden;
            width: 1366px;
        }

        .frame-1 {
            margin: 0 auto;
            padding: 1em 0;
            overflow: hidden;
            width: 1366px;
        }

        #playBtn {
            cursor: pointer;
        }
        
        .frame.full {
            width: 100%
        }
        
        .title {
            font-size: 2em;
            line-height: 1em;
            color: #FFC600;
        }
        
        .title-1 {
            font-size: 2em;
            line-height: 1.4em;
            color: #FFF;
        }

        .title-2 {
            font-size: 1em;
            line-height: 1em;
            color: #FFC600;
        }

        .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;
        }
        
        .video {
            height: 0;
            overflow: hidden;
            position: relative;
            margin: auto;
            padding-bottom: 56.25%;
            /* 16:9 */
        }
        
        .video video,
        .video iframe {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        p {
            margin: 0.5em 0;
        }
        
        .mainbar {
            width: 100%;
            background: #111;
            overflow: auto;
            height: 140px;
            font-size: 15px;
            line-height: 22px;
            color: #666;
            border-bottom: #111 solid 1px;
            text-align: center;
            transition: all 300ms ease-in-out;
        }
        
        .mainbar:hover {
            height: 150px;
            background: #000;
            color: #CCC;
            border-bottom: #ec6c00 solid 1px;
        }
        
        .mainbar p {
            padding: 20px 0 0 0;
            font-size: 36px;
            line-height: 40px;
        }
        
        .mainbar .btn {}
        
        .mainbar .btn a {
            color: #666;
            margin-left: 1em;
            margin-right: 1em;
        }
        
        .mainbar .btn a:hover {
            color: #ec6c00;
        }
        
        .table {
            /*display: table;*/
            /*min-height:500px;*/
            overflow: visible;
        }
        
        .table .cell {
            display: table-cell;
            vertical-align: middle;
        }
        
        .table .cell_HIDE {
            display: none;
            vertical-align: middle;
        }
        
        .table .cell_SHOW {
            display: table-cell;
            vertical-align: middle;
        }
        
        .table .cell .left {
            float: left;
            margin-left: 5%;
            /*margin-right:4%;*/
            text-align: left;
        }
        
        .table .cell .right {
            float: right;
            margin-right: 5%;
            /*margin-left:4%;*/
            text-align: left;
        }
        
        .table .cell .center {
            /*padding:1em 10% 0;*/
            padding: 0em 30px 0;
            /*min-height:400px;*/
            overflow: visible;
        }
        
        .table .cell .offsetRight {
            margin-right: -25%;
        }
        
        .table .cell .offsetLeft {
            margin-left: -25%;
        }
        
        .table .cell .btn a {
            color: #fff;
            background-color: #036;
            border-radius: 5px;
            box-shadow: 0px 0px 16px rgba(4, 111, 204, 1) inset;
            padding: 8px 16px;
            text-decoration: none;
            -o-transition: background .10s linear;
            -webkit-transition: background .10s linear;
            -moz-transition: background .10s linear;
            transition: background .10s linear;
        }
        
        .table .cell .btn a:hover {
            background-color: #03C;
        }
        
        .table .img {
            margin-top: 30px;
        }
        
        .table .side {
            width: 10%;
            display: block;
        }
        
        .table .margin0auto {
            margin-left: auto;
            margin-right: auto;
        }
        
        .table .break {
            clear: both;
        }
        
        .table .col1,
        .table .col1s,
        .table .col1l {
            width: 9.5%;
        }
        
        .table .col2,
        .table .col2s,
        .table .col2l {
            width: 19%;
        }
        
        .table .col3,
        .table .col3s,
        .table .col3l {
            width: 28.5%;
        }
        
        .table .col4,
        .table .col4s,
        .table .col4l {
            width: 38%;
        }
        
        .table .col5,
        .table .col5s,
        .table .col5l {
            width: 47.5%;
        }
        
        .table .col52,
        .table .col52s {
            width: auto;
        }
        
        .table .col6,
        .table .col6s,
        .table .col6l {
            width: 40%;
        }
        
        .table .col7,
        .table .col7s,
        .table .col7l {
            width: 56%;
        }
        
        .table .col8,
        .table .col8s,
        .table .col8l {
            width: 76%;
        }
        
        .table .col9,
        .table .col9s,
        .table .col9l {
            width: 85.5%;
        }
        
        .table .col10,
        .table .col10s,
        .table .col10l {
            width: 95%;
        }
        
        .fade {
            position: relative;
            overflow: auto;
            display: block;
        }
        
        .fade .pic2 {
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            z-index: 3;
        }
        
        .img-large {
            display: block;
        }
        
        .img-small {
            display: none;
        }
        /*features start*/
        
       
        
        #header {
            position: relative;
            /*height: 504px;*/
            background-repeat: no-repeat;
            /*min-height: 500px;
*/
        }
        
        #header .title {
            margin: 0 auto;
            width: auto;
            z-index: 11;
            left: 50%;
            top: 50%;
            position: absolute;
            color: #fff;
            margin: -67px 0 0 13px;
            /*border-radius: 5px;
*/
        }
        
        #header .frame {
            padding-top: 0;
        }
        

        .imgscale{
                cursor:pointer;
                transition: all 0.2s linear;
                -webkit-transition: all 0.2s linear;
        }

        .imgscale:hover{
                transform: scale(1.4, 1.4);
                -webkit-transform: scale(1.4, 1.4);
        }


/*****4 pic icon*****/  
        .m-wrap .picnav-item a:hover
        {
            cursor: pointer;
        }      
        .m-wrap .picnav-item a:hover .pic
        {
            cursor: pointer;
        }
        .m-wrap .picnav-item
        {
            border:1px solid #000;
            /*box-shadow:0px 0px 120px #FF7200;*/
        }
/*****End 4 pic icon*****/

.container .header {
    background-image: url("../images/morebar.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    /*background-color:#FF4700;*/
    color: #FFC600;
    cursor: pointer;
    font-weight: bold;
	text-align:center;
    min-height: 60px;
}

.container .content {
    display: none;
    padding : 5px;
	width: 100%;
	margin:auto;
}


/********************Motherboard 1920*************************************************/
		
		.conc{
			min-width:1024px;
			position:relative;
			overflow:hidden;
		}
		
        #wave2{            
            background-image: url("../images/wave2_1920.jpg");
            background-position: 50% 20%;
            background-repeat: no-repeat;
            min-height: 900px;
        }

        #wave2 .title-1{
            margin-top:4%;
        }

        #wave2 .text{
            width:40%;
        }
		
		#wave2 .img01{
			margin-top:6%;
		}
		
		#alc1220 {
			margin-top:3%;
		}

        #pcie {
            background-color: #000;
			min-height:600px;
        }
                
        #pcie .title{
            margin-top:5%;
			width: 50%;
        }

        #pcie .text{
			width: 65%;
        }

       #pcie .img01 {
                position:absolute; width: 900px; left: 450px;
       }
	   
	   #digitalled .title{
		   margin-top:3%;
	   }
	   
        #RGBW-UV-Light {            
            background-image: url("../images/rgbw_uv_light_1920.jpg");
            background-position: 50% 10%;
            background-repeat: no-repeat;
            min-height: 1200px;
        }

        #RGBW-UV-Light .title {
            margin-top:6%;
        }

        #RGBW-UV-Light  .rgblighttitle{
            font-size:30px;
            line-height: 40px;
        }
		
        #RGBW-UV-Light  .rgbwtitledata{   
            color:#000;
            font-weight:bold;
            font-size:32px;
            margin-top:145px;
            margin-bottom:1%;
        }

        #RGBW-UV-Light .rgbwsubtitledata{
            color:#000;
            font-size:24px;
        }

        #RGBW-UV-Light .rgbuvdata{
            float:left;
            width:20%;
            text-align: center;
            margin-right:30px;
        }
		
        #RGBW-UV-Light .rgbuvdata img{
            margin-top:10px;
        }

        #RGBW-UV-Light .rgbuvdata .text{
            text-align:justify;
            font-size:16px;
            color:#000;
        }
		
        #RGBW-UV-Light #rgbcalib{
            margin-top:-60px;
            margin-left:70px;
        }
		
        #rgbadvanced {
            background-image: url("../images/rgb_fusion_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 950px;                                
        }
        #rgbadvanced .title1{
            font-weight: 500;
            font-size:24px;  
        }
        #rgbadvanced .text1{            
            font-size:16px;  
        }
        #rgbadvanced .advanw01 .title1{
            color:#E50012;          
        }
        #rgbadvanced .advanw02 .title1{
            color:#009FE8;          
        }
        #rgbadvanced .advanw03 .title1{
            color:#009FE8;          
        }
        #rgbadvanced .advanw04 .title1{
            color:#FFF000;         
        }
        #rgbadvanced .advanw05 .title1{
            color:#6FB92C;         
        }
        
        #rgbadvanced .advanw01{
            position: relative;
            width:40%;
            top:60px;
            left:30px;
        }    
        #rgbadvanced .advanw02{
            position: relative;
            width:60%;
            top:10px;
            left:480px;
        }        
        #rgbadvanced .advanw04{
            position: relative;
            width:30%;
            top:460px;
            left:0px;
        }
        #rgbadvanced .advanw05{
            position: relative;
            width:30%;
            top:380px;
            left:500px;
        }
        #rgbadvanced .advanw03{
            position: relative;
            width:28%;
            top:-110px;
            left:930px;
        }

        #rgbapp {
            background-color: #000;
            background-image: url("../images/mb_rgbapp_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 700px;
        }

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

        #rgbapp .text{
			width:50%;
			float:left;
		}
		
        #rgbapp .rgbqrcode{    
            margin-top:18%;
            margin-left:0%;
        } 
		  
        #hybridfan {
                background-color: #000;
                background-position: center 30px;
                background-repeat: no-repeat;
        } 

        #NoConfusion{            
            background-image: url("../images/NoConfusion_1920.jpg");
            background-position: 50% 20%;
            background-repeat: no-repeat;
            min-height: 720px;
        }

        #NoConfusion .title{
            margin-top:10%;
        }

        #NoConfusion .text{
            width:50%;
        }

       #smartfan5 {
                background-color: #000;
                background-image: url("../images/mb_smartfan5_1920.jpg");
                background-position: center 30px;
                background-repeat: no-repeat;
                min-height: 900px;
       }
       
       #smartfan5 .title {
                margin-top: 10px;
       }
        
       #smartfan5 .smartfan501 {
                position:absolute; width: 594px; left: 30px; top: 657px;
       }

       #smartfan5 .smartfan502 {
                position:absolute; width: 617px; left: 677px; top: 620px;
       }

        #fancontrol .conbox1{
            position: relative;
            display: inline-block;
            vertical-align: top;width: 30%;
        }

        #fancontrol .conbox2 .title{             
             color:#009FE8;
             text-align: center;
        }

        #fancontrol .conbox2{
            display: inline-block;
            position: relative;
            width:66%; 
            margin-left:2%;
        } 

		#type-c {
            background-color: #000;
            background-image: url(../images/mb_type-c_1920.png);
            background-position: 50% top;
            background-repeat: no-repeat;
            min-height: 580px;
        }
        
        #type-c .text {
			margin-top:3%;
            width: 71%;
            float: right;
        }

		#type-c .title {
			font-size:1.9em;
		}

		#vr {
            background-color: #000;
            background-image: url("../images/mb_vr_1920.jpg");
            background-repeat: no-repeat;
            min-height: 950px;
            position: relative;
            background-position: center;
            /*
            animation: ac-vr 6s alternate infinite;
            -webkit-animation:ac-vr 6s alternate infinite;
            */
        }
		
        #vr .vrtext{
            padding:2%;
            background-color:rgba(255,216,14,0.6);
            width:44%;
            font-weight: 500;
            color:#000;
            font-size:24px;
            line-height: 34px;
            font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
        }

        #vr .vrtitlesub{
            font-weight: 500;
            color:#FFC600;
            font-size:1.2em;
            line-height: 1em;
            font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
        }

		#vr .vrimg{
			width:auto;margin-right:400px;
		}
		
        #vr .vrtitle{
            font-size:1.1em;font-weight:bold;
        }

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

        #locking .title {
            margin-top: 50px;
        }
		
        #dualbios {
            background-color: #000;
            background-image: url("../images/mb_dualbios_1920.jpg");
            background-position: 50% center;
            background-repeat: no-repeat;
            min-height: 504px;
        }
        #dualbios .title {
            margin-top:3%;
        }
        #dualbios .frame .cell {
            width: 40%;
        }

		#durable {
            background-color: #000;
            background-image: url("../images/mb_durable_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 740px;
        }

		#smartcam {
			background: url("../images/smartcam_1920.jpg") center 0 no-repeat;
			height: 1041px;
		}

        #CEC {
            background-color: #000;
            min-height: 700px;
        }

        #CEC .title{
			margin-top:4%;
		}

        #CEC .img01{
			margin-top:3%;
		}

        #CEC .img02{
			margin-top:12%;
		}
		
        #entertaining {
            background-color: #000;
            background-image: url("../images/entertaining_1920.png");
            background-position: 50% center;
            background-repeat: no-repeat;
            min-height: 650px;
        }

       #entertaining .entertain01 {
                position:absolute; width: 550px; left: 110px; top: 20px;
       }

       #entertaining .entertain02 {
                position:absolute; width: 530px; left: 725px; top: 20px;
       }

		
	
        @media screen and (max-width: 1366px) {
			.table .col6l{
                width: 50%;
			}
            .table .col52,
            .table .col52s {
                width: auto;
            }
            .frame {
                width: 960px;
            }

            .frame-1 {
                width: 1060px;
            }

            #header {
                background-color: #000;
                /* background-image: url(../images/header_1366.jpg);*/
                background-position: center;
                position: relative;
                /*height: 700px;*/
            }
			
            
            
/************************Motherboard1366***************************************/	
		
		
        #wave2{            
            background-image: url("../images/wave2_1366.jpg");
            background-position: 50% 20%;
            background-repeat: no-repeat;
            min-height: 650px;
        }

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

        #wave2 .text{
            width:43%;
        }

		#alc1220 {
			margin-top:0%;
		}
		
	   #digitalled .title{
		   margin-top:0%;
	   }

	   #digitalled .img01 {
		   width:83%;
	   }

        #RGBW-UV-Light {            
            background-image: url("../images/rgbw_uv_light_1366.jpg");
			background-origin:50% bottom;
            min-height: 1150px;
        }

        #RGBW-UV-Light .title {
            margin-top:6%;
        }       

         #RGBW-UV-Light  .rgbwtitledata{   
            font-size:23px;
            margin-top:60px;
        }
        #RGBW-UV-Light .rgbuvdata{
            margin-right:20px;
        }

        #RGBW-UV-Light .rgbwsubtitledata{
            font-size:20px;
        }

        #RGBW-UV-Light #rgbcalib{
            margin-top:-40px;
            margin-left:50px;
        }

        #pcie {
            background-color: #000;
			min-height:520px;
        }
                
        #pcie .title{
            margin-top:3%;
			width: 60%;
        }

        #pcie .text{
			width: 50%;
        }

       #pcie .img01 {
                position:absolute; width: 800px; left: 250px;
       }

        #rgbadvanced {            
            background-image: url("../images/rgb_fusion_1366.jpg");            
            min-height: 500px;                                
        }

        #rgbadvanced .advanw01{
            width:30%;
            top:70px;
            left:20px;
        }    
        #rgbadvanced .advanw02{            
            width:60%;
            top:10px;
            left:360px;
        }
        
        #rgbadvanced .advanw04{            
            width:30%;
            top:370px;
            left:0px;
        }
        #rgbadvanced .advanw05{
            width:30%;
            top:265px;
            left:360px;
        }
        #rgbadvanced .advanw03{            
            width:28%;
            top:-180px;
            left:670px;
        }

        #rgbapp {
            margin-top:0px;
            background-color: #000;
            background-image: url("../images/mb_rgbapp_1366.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 600px;
			margin-top:-150px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:27%;
            margin-left:0%;
        }

        #NoConfusion{            
            background-image: url("../images/NoConfusion_1366.jpg");            
            min-height: 590px;
        }
        #NoConfusion .title{
            font-size:1.6em;
        }

        #smartfan5 {
                background-color: #000;
                background-image: url("../images/mb_smartfan5_1366.jpg");
                background-position: center 30px;
                background-repeat: no-repeat;
                min-height: 700px;
       }
       #smartfan5 .smartfan501{
            width: 400px; left: 30px; top: 520px;
       }

       #smartfan5 .smartfan502{
            width: 460px; left: 470px; top: 480px;
       }

		#type-c {
            background-color: #000;
            background-image: url(../images/mb_type-c_1366.png);
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 430px;
        }

		#vr {
            background-color: #000;
            background-image: url("../images/mb_vr_1366.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 1000px;
            position: relative;
        }

        #vr .vrtext{
            width:66%;
        }

        #vr .vrimg{
            width:auto;margin-right:100px;
        }

        #locking .title {
            margin-top: -10px;
        }
		
        #durable {
            background-color: #000;
            background-image: url("../images/mb_durable_1366.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 760px;
        }

        #CEC {
            background-color: #000;
            min-height: 700px;
			margin-top:-50px;
        }

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

        #CEC .img01{
			margin-top:8%;
		}

        #CEC .img02{
			margin-top:10%;
		}

		#smartcam {
        background: url("../images/smartcam_1366.jpg") 50% bottom no-repeat;
        height: 850px;
		}
		
		#smartcam .title{
		 	font-size:1.6em;
		}

        #entertaining {
            background-color: #000;
            background-image: url("../images/entertaining_1366.png");
            background-position: 50% center;
            background-repeat: no-repeat;
            min-height: 650px;
        }

       #entertaining .entertain01 {
                position:absolute; width: 490px; left: -20px; top: 30px;
       }

       #entertaining .entertain02 {
                position:absolute; width: 490px; left: 500px; top: 20px;
       }

}

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

		  .frame {
                width: 640px;
                padding: 1.5em 0;
            }

		  .frame-1 {
                width: 640px;
                padding: 1.5em 0;
            }

            .table .col52,
            .table .col52s {
                width: 95%;
            }
            .title {
                font-size: 1.3em;
                line-height: 1.1em;
            }
            .text {
                font-size: 0.7em;
                line-height: 1.2em;
                margin-top: 1em;
            }
            .note {
                font-size: 0.5em;
                line-height: 1.5em;
                margin-top: 1.2em;
            }
            #header {
                background-color: #000;
                background-position: center;
                position: relative;
            }
            #header .title {
                width: auto;
                font-size: 1.1em;
                margin-top: -24px;
            }
            #header .frame {
                padding: 0em 0 1em;
            }
		
			
            .table .col5,
            .table .col5s,
            .table .col5l {
                width: 95%
            }

		
/*******************Motherboard 960*************************************************/		


        #wave2{            
            background-image: url("../images/wave2_960.jpg");
            background-position: 50% 67%;
            background-repeat: no-repeat;
            min-height: 950px;
        }

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

        #wave2 .text{
            width:100%;
        }

		#wave2 .img01{
			margin-top:65%;
		}

        #pcie {
            background-color: #000;
			min-height:820px;
        }
                
        #pcie .title{
            margin-top:3%;
			width: 100%;
        }

        #pcie .text{
			width: 100%;
        }

       #pcie .img01 {
                position:absolute; width: 800px; left: -250px; top: 320px;
       }

	   #digitalled .img01 {
		   width:90%;
	   }

        #RGBW-UV-Light {
            background-image: url("../images/rgbw_uv_light_960.jpg");
            min-height: 1420px;
        }

        #RGBW-UV-Light  .rgbwtitledata{   
            font-size:16px;
            margin-top:510px;        
        }
        #RGBW-UV-Light .rgbuvdata{
            width:18%;
            margin-right:20px;
        }

        #RGBW-UV-Light .rgbwsubtitledata{
            font-size:14px;
            margin-top:10px;
        }

        #RGBW-UV-Light .rgbuvdata .text{
            text-align:left;
            font-size:14px;
            color:#000;
        }

        #RGBW-UV-Light #rgbcalib{
            margin-top:-40px;
            margin-left:80px;
        }

        #rgbadvanced {            
            background-image: url("../images/rgb_fusion_960.jpg");            
            min-height: 1400px;                                
        }

        #rgbadvanced .advanw01{
            width:100%;
            top:30px;
            left:0px;
        }    
        #rgbadvanced .advanw02{            
            width:70%;
            top:50px;
            left:140px;
        }        
        #rgbadvanced .advanw04{            
            width:46%;
            top:375px;
            left:0px;
        }
        #rgbadvanced .advanw05{
            width:49%;
            top:275px;
            left:320px;
        }
        #rgbadvanced .advanw03{            
            width:100%;
            top:320px;
            left:0px;
        }

         #rgbapp {
            margin-top:0px;
            background-color: #000;
            background-image: url("../images/mb_rgbapp_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 900px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:100%;
            margin-left:0%;
        }   

        #rgbapp .text{
			width:100%
		}

        #smartfan5 {        
                background-image: url("../images/mb_smartfan5_960.jpg");        
                min-height: 1200px;
        }

        #smartfan5 .smartfan501{
            width: 500px; left: 0px; top: 960px;
       }

       #smartfan5 .smartfan502{
            width: 400px; left: 30%;  top: 420px;
       }

        #fancontrol .conbox1{            
            width: 100%;
         }

        #fancontrol .conbox2 .title{            
            text-align: left;            
         } 

        #fancontrol .conbox2{
            width:100%; 
            margin-left:0%;
        } 

		#type-c {
            background-color: #000;
            background-image: url(../images/mb_type-c_960.png);
            background-position: 50% 90%;
            background-repeat: no-repeat;
            min-height: 450px;
        }

            #type-c .title {
                font-size:1.1em;
                width:100%;
                margin-top:0px;
            }

            #type-c .title-1 {
                font-size:1.0em;
                width:100%;
            }

            #type-c .text {
                width:60%;
            }

		#vr {
            min-height: 900px;
            position: relative;
            background-position: center;
		}

        #vr .vrtext{
            width:90%;
            padding:4%;
        }

        #vr .vrimg{
            margin-right:0px;
        }

        #locking .title {
          margin-top:-30px;
        }
		
		#dualbios {
            background-color: #000;
            background-image: url("../images/mb_dualbios_960.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 800px;
        }
        
		#dualbios .title{
			margin-top:-10px;
		}
		
        #durable {
            background-color: #000;
            background-image: url("../images/mb_durable_960.jpg");
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 670px;
        }

		#smartcam {
				background: url("../images/smartcam_960.jpg") center 0 no-repeat;
				height: 787px;
		}

        #CEC {
            background-color: #000;
            min-height: 800px;
			margin-top:-20px;
        }

        #CEC .title{
			margin-top:4%;
		}
		
		#CEC .img01{
			margin-left:5%;
		}

        #entertaining {
            background-color: #000;
            background-image: url("../images/entertaining_960.png");
            background-position: 50% center;
            background-repeat: no-repeat;
            min-height: 1150px;
        }
		
		#entertaining .img01{
			width:70%;
			margin-left:10%;
		}

       #entertaining .entertain01 {
                position:absolute; width: 550px; left: 50px; top: -10px;
       }

       #entertaining .entertain02 {
                position:absolute; width: 545px; left: 50px; top: 500px;
       }

			#type-c .frame .cell {
					width: auto;
			}


/*****4 pic icon*****/
        .m-wrap .picnav-item .title
        {
            font-size:1.4em;
            padding-bottom: 4px;
        }

        .m-wrap .picnav-item .title span
        {
            vertical-align:bottom;
        }

/*****End 4 pic icon*****/    

			
}

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

            .frame-1 {
                padding: 1em 0;
                width: 100%;
                padding-left: 10px;
                padding-right: 10px;
            }

            .title {
                font-size: 1.2em;
            }
            .text {
                font-size: 15px;
                line-height: 1.4em;
                margin-top: 1em;
            }
            .note {
                font-size: 12px;
                line-height: 1.5em;
                margin-top: 1.2em;
            }
            .table {
                display: block;
            }
            .table .cell {
                display: block;
            }
            .table .cell_HIDE {
                display: block;
            }
            .table .cell_SHOW {
                display: none;
            }
            .table .col1l,
            .table .col2l,
            .table .col3l,
            .table .col4l,
            .table .col5l,
            .table .col6l,
            .table .col7l,
            .table .col8l,
            .table .col9l,
            .table .col10l {
                width: 100%;
                margin: 0;
            }
            .table .col1,
            .table .col2,
            .table .col3,
            .table .col4,
            .table .col5,
            .table .col6,
            .table .col7,
            .table .col8,
            .table .col9,
            .table .col10 {
                width: 90;
                margin: 0 0;
            }
            .table .col1s,
            .table .col2s,
            .table .col3s,
            .table .col4s,
            .table .col5s,
            .table .col6s,
            .table .col7s,
            .table .col8s,
            .table .col9s,
            .table .col10s {
                width: 60%;
                margin: 0 20%;
            }
            .table .cell .left,
            .table .cell .right,
            .table .cell .center {
                float: inherit;
                margin: 4 % 0;
                text-align: left;
            }
            .table .cell .center {
                padding: 0 0 0;
            }
            .table .cell .offsetRight,
            .table .cell .offsetLeft {
                margin-right: 0;
                margin-left: 0;
            }
            .table .side {
                display: none;
            }
            .img-large {
                display: none;
            }
            .img-small {
                display: block;
            }
            #header {
                background-color: #000;
                background-position: center 80px;
                background-repeat: no-repeat;
                position: relative;
            }
            #header .title {
                font-size: 0.8em;
                margin: 7px 0 0 -128px;
            }
            #header .frame {
            }

			


/*******************Motherboard 640*************************************************/		
		 
        #wave2{            
            background-image: url("../images/wave2_640.jpg");
            background-position: 50% 70%;
            background-repeat: no-repeat;
            min-height: 800px;
        }

        #wave2 .title-1{
            margin-top:-20px;
			font-size:1.4em;
			line-height:1.2em;
        }

        #wave2 .title-2{
			line-height:1.2em;
        }

        #wave2 .text{
            width:100%;
        }

		#wave2 .img01{
			margin-top:83%;
		}

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

        #pcie {
            background-color: #000;
			min-height:525px;
        }
                
        #pcie .title{
            margin-top:3%;
			width: 100%;
        }

        #pcie .text{
			width: 100%;
        }

       #pcie .img01 {
                position:absolute; width: 500px; left: -160px; top: 230px;
       }

        #RGBW-UV-Light {            
            background-image: url(../images/rgbw_uv_light_640.jpg);
			background-position: 50% 0%;
            min-height: 2600px;
        }

        #RGBW-UV-Light .rgbuvdata{
            float:none;
            width:100%;            
            margin-right:0px;            
        }
        #RGBW-UV-Light #rgbcalib{
            margin-top:0px;
            margin-left:0px;
        }

        #RGBW-UV-Light  .rgbwtitledata{   
            color:#fff;            
            font-size:30px;
            line-height: 40px;
            font-weight:400;
            margin-top:270px;
        }
        #RGBW-UV-Light .rgbwsubtitledata{
            font-size:30px;
            margin-top:0px;
            color:#FFF;
        }
        #RGBW-UV-Light .rgbuvdata .text{            
            font-size:16px;            
            color:#FFF;
        }

        #rgbadvanced {            
            background-image: url("../images/rgb_fusion_640.jpg");            
            min-height: 1500px;                                
        }

        #rgbadvanced .advanw01{
            width:100%;
            top:30px;
            left:0px;
        }    
        #rgbadvanced .advanw02{            
            width:90%;
            top:80px;
            left:60px;
        }        
        #rgbadvanced .advanw04{            
            width:80%;
            top:290px;
            left:0px;
        }
        #rgbadvanced .advanw05{
            width:100%;
            top:330px;
            left:0px;
        }
        #rgbadvanced .advanw03{            
            width:100%;
            top:370px;
            left:0px;
        }

            #rgbapp {
            margin-top:0px;
            background-color: #000;
            background-image: url("../images/mb_rgbapp_640.jpg");
            background-position: 50% 60%;
            background-repeat: no-repeat;
            min-height: 700px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:150%;
            margin-left:0%;
        }   

        #NoConfusion{            
            background-image: url("../images/NoConfusion_640.jpg");            
            min-height: 590px;
        }

        #NoConfusion .title{
            margin-top:0%;
            color:#FFC600;   
            font-size:30px;  
            line-height: 40px;       
        }

        #NoConfusion .text{
            width:100%;
        }

        #smartfan5 {
            background-image: url("../images/mb_smartfan5_640.jpg");
            min-height: 960px;
        }
        #smartfan5 .smartfan501{
            width: 300px; left: 0px; top: 780px;

       }

       #smartfan5 .smartfan502{
            width: 300px; left: 0px; top: 410px;
        
       }

            #type-c {
                background-color: #000;
                background-image: url(../images/mb_type-c_640.png);
                background-position: 50% 55%;
                background-repeat: no-repeat;
                min-height: 470px;
            }

            #type-c .title {
                margin-top:0px;
				line-height:1.2em;
            }

            #type-c .title-1 {
				font-size:0.7em;
				line-height:1.5em;
            }

        #vr .vrimg{
            width:auto;margin-right:0px;
        }
        #vr .vrtitle{
            font-size:0.6em;
        }

        #vr .vrtitlesub{
            font-size:1.2em;
            line-height: 1.2em;
            margin-bottom: 4%;
        }

        #vr .vrtext{
            padding:6%;
            width:90%;
            font-size:16px;
            line-height: 26px;
        }
        
        #locking .title {
            width:100%;
            margin-top:0px;
        }

        #dualbios {
            background-image: url("../images/mb_dualbios_640.jpg");
			background-position:50% 65%;
            min-height: 620px;
        }
        
        #dualbios .frame .cell {
            width:100%;
        }

        #durable {
            background-image: url("../images/mb_durable_640.jpg");
			background-position:50% 80%;
            min-height: 550px;
        }
        #durable .text {
            width:100%;
        }
        
		#smartcam {
        background: url("../images/smartcam_640.jpg") center bottom no-repeat;
        height: 680px;
		}
		#smartcam .title{
			font-size:0.8em;margin-top:-30px;
		}
		#smartcam .text{width:100%;}

        #CEC {
            min-height: 600px;
        }

        #entertaining {
            background-color: #000;
            background-image: url("../images/entertaining_640.png");
            background-position: 50% top;
            background-repeat: no-repeat;
            min-height: 850px;
        }

       #entertaining .entertain01 {
                position:absolute; width: 390px; left: -30px; top: -20px;
       }

       #entertaining .entertain02 {
                position:absolute; width: 385px; left: -30px; top: 345px;
       }


/*****4 pic icon*****/
        .m-wrap .picnav-item .title
        {
            font-size:1em;
            padding-bottom: 0;
        }
        .m-wrap .picnav-item .title span
        {
            vertical-align:bottom;
        }
/*****End 4 pic icon*****/
}



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


        #rgbapp {
            margin-top:0px;
            background-color: #000;
            background-image: url("../images/mb_rgbapp_480.jpg");
            background-position: 50% 60%;
            background-repeat: no-repeat;
            min-height: 650px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:125%;
            margin-left:0%;
        }

        #dualbios {
            background-image: url("../images/mb_dualbios_640.jpg");
            min-height: 650px;
			background-position:50% 60%;
        }

}



@media only screen and (max-width: 480px) {
  .tabs {
    width: 100%;
  }
  .tabs li {
    float: none;
    margin-top: 20px;
  }
  .tabs .tab-content {
    position: relative;
    display: block;
    top: 0;
  }
  .tabs label {
    top: 0;
    padding-top: 17px; 
    background: #FFF;       
  }
  .tabs label:hover {
    background: #FFF;
  }


}




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