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

/*features*/
        
        #Realtek8118 .t1{
            position: relative;
            margin-bottom:-6%;
            margin-top:4%;
        }

        #Realtek8118 .t2{
            position: relative;
            margin-bottom:-8%;    
        }

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

        #m2 .text{
			width: 70%;
        }

       #m2 .img01 {
                position:absolute; width: 900px; left: 450px;
       }
        
        #hdmi {
            background-color: #000;
            background-image: url("../images/mb_hdmi_1920.jpg");
            background-position: 50% 10%;
            background-repeat: no-repeat;
            min-height: 650px;
            margin-bottom:6%;
        }

        #hdmi .text {
            width: 72%;
            float: right;
        }

        #hdmi .title {
            margin-top:3%;
            width: 72%;
            float: right;
            font-size:1.9em;
        }
    
        #smartfan5fan {
            background-color: #000;
            background-position: 50% 0%;
            background-repeat: no-repeat;
            min-height: 1100px;
        }
		
        #smartfan5fan .title{			
			font-size:2.2em;
		}

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

        #smartfan5fan .conbox2{
             display: inline-block;
             position: relative;
             width:65%; 
             margin-left:2%;
        } 
        
        #smartfan5fan .conbox3{
             position: relative;
             display: inline-block;
             vertical-align: top;
             width: 51%;
        }

        #smartfan5fan .conbox4{
            display: inline-block;
            position: relative;
            width:40%; 
            margin-left:2%;
            margin-top:8%;
        }

        #smartfan5fan .conbox5{
            display: inline-block;
            position: relative;
            width:48%;
        }

        #smartfan5fan .conbox5 .smarttitle{
            vertical-align: text-top;

        }

        #smartfan5fan .conbox6{
            border-left:1px solid #999;
            padding-left:4%;
            display: inline-block;
            position: relative;
            width:42%; margin-left:2%;
            margin-bottom:4%;
        }    

        #smartfan5fan .smartlist{
            font-size:26px;
            font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
            line-height: 40px;
            font-weight: 500;
            margin-left:2%;            
            padding-left:2%;
            padding-bottom:2%;            
        }

        #smartfan5fan .smartlist img{
            margin-right:2%;
            margin-bottom:-2%;
        }

        #smartfan5fan .smartlist1{
            font-size:26px;
            font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
            line-height: 40px;
            font-weight: 500;
        }

        #smartfan5fan .smarttitle{
            color:#FFD80E;
            font-weight: 500;
        }

        #smartfan5fan .smarttitle2{
            
            font-size:14px;
        }

        #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%;
        } 

        #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;
        }

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

        #vr .vrtitlesub{
            font-weight: 500;
            color:#FFD80E;
            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;
        }

        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1100px;
            background-size:cover;
            position: relative;
        }
        #anti-sulfur .title{
            text-align: right;
            margin-top:12%;
            font-size:2.6em;
            text-shadow:1px 1px 10px #000;
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 50%;
        }

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

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

        #smartcam {
			background: url("../images/smartcam_1920.jpg") center 0 no-repeat;
			height: 1041px;
        }
        
        #XSplit {
            background-color: #000;
            background-image: url("../images/xsplit_1920.jpg");
            background-position: 50% 130px;
            background-repeat: no-repeat;
            min-height: 750px;
        }
        
        .XSplit_MV {
            position: absolute;
            color: #fff;
            left: 57%;
            top: 40%;
            z-index: 10;
            display: block;
        }
        
        .MV2 {
            width: 440px;
            height: 285px;
        }
        
        a.more {
            display: block;
            width: 208px;
            height: 45px;
            background-image: url("../images/more.png");
            text-indent: -99999px;
            position: absolute;
            color: #fff;
            right: -2%;
            bottom: -20%;
            transition: background-image .5s;
        }
        
        a.more:hover {
            background-image: url("../images/more2.png");
        }

        #humidity {
            background-color: #000;
            background-image: url(../images/mb_humidity_1920.jpg);
            background-position: 50% 40%;
            background-repeat: no-repeat;
            min-height: 650px;
        }
		
		#humidity .title{
			margin-top:5%;
		}

		#temperature {
            background-color: #000;
            background-image: url(../images/mb_temperature_1920.jpg);
            background-position: 50% 60%;
            background-repeat: no-repeat;
            min-height: 650px;
        }

		#temperature .text {
            width: 70%;
        }

        #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: 70px;
       }

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

        

        

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

        

        #m2 {
            background-color: #000;
			min-height:480px;
        }
                
        #m2 .title{
            margin-top:5%;
			width: 60%;
        }

        #m2 .text{
			width: 60%;
        }

       #m2 .img01 {
                position:absolute; width: 800px; left: 250px;
       }
        
        #smartfan5fan {
			min-height:900px;
		}
			
		#smartfan5fan .title {
            margin-top:-10px;
        }
        #smartfan5fan .smartlist1{
            font-size:22px;
            line-height: 40px;
        }    
        
        #smartfan5fan .conbox4{
            margin-top:4%;
        }      

        #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;
        }

        #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;
        }

        #hdmi {
            background-color: #000;
            background-image: url("../images/mb_hdmi_1366.jpg");
            background-position: 50% 40%;
            background-repeat: no-repeat;
            min-height: 600px;
        }

        #smartcam {
            background: url("../images/smartcam_1366.jpg") center 0 no-repeat;
            height: 893px;
        }            
        #smartcam .title{
                 font-size:1.6em;
        }
        
       #XSplit {
        background-color: #000;
        background-image: url("../images/xsplit_1366.jpg");
        background-position: bottom center;
        background-repeat: no-repeat;
        min-height: 750px;
         }
    
        #XSplit .frame {
            padding-top: 1em;
        }
        
        .XSplit_MV {
            position: absolute;
            color: #fff;
            left: 62%;
            top: 50%;
            z-index: 10;
            display: block;
        }
        
        .MV2 {
            width: 400px;
            height: 270px;
        }
        
        a.more {
            display: block;
            width: 208px;
            height: 45px;
            background-image: url("../images/more.png");
            text-indent: -99999px;
            position: absolute;
            color: #fff;
            right: -2%;
            bottom: -20%;
            transition: background-image .5s;
        }
        
        a.more:hover {
            background-image: url("../images/more2.png");
        }

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

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

        #humidity {
                background-color: #000;
                background-image: url(../images/mb_humidity_1366.jpg);
                background-position: center;
                background-repeat: no-repeat;
                min-height: 600px;
        }

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

        #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: 80px;
       }

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



}


@media screen and (max-width: 960px) {
            #Realtek8118 .t1{
            position: static;
            margin-bottom:0%;
            margin-top:4%;
        }

        #Realtek8118 .t2{
            position: static;    
            margin-bottom:0%;   
        }

        #m2 {
            background-color: #000;
			min-height:600px;
        }
                
        #m2 .title{
            margin-top:0%;
			width: 100%;
        }

        #m2 .text{
			width: 100%;
        }

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

        #smartfan5fan .title{
            margin-top:4%;
            font-size:3.4em;
            color:#fff;
            text-align: center;
        }

         #smartfan5fan .conbox1{
             width: 100%;
             margin-left:10%;
        }

        #smartfan5fan .conbox2{            
             width:100%; 
        } 
        
        #smartfan5fan .conbox3{
             width: 100%;
        }

        #smartfan5fan .conbox4{
            width:100%;                            
        }
        #smartfan5fan .smartlist1{
            font-size:26px;
            line-height: 40px;
        }                 

        #fancontrol .conbox1{            
            width: 100%;
         }
        #fancontrol .conbox2 .title{            
            text-align: left;            
         } 
        #fancontrol .conbox2{
            width:100%; 
            margin-left:0%;
        } 

        #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;            
        }

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

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

        #hdmi {
            background-color: #000;
            background-image: url("../images/mb_hdmi_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 640px;
            }
            
        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1100px;
            position: relative;
        }

        #anti-sulfur .title{
            text-align:left;
            margin-top:70%;
            font-size:2.2em;
            text-shadow:1px 1px 10px #000;
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 100%;
            margin-top:-4%;
        }

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

        #XSplit {
            background-image: url("../images/xsplit_960.jpg");
            background-position: 45% 90px;
            background-repeat: no-repeat;
            min-height: 650px;
        }
        
        .XSplit_MV {
            position: absolute;
            color: #fff;
            left: 60%;
            top: 50%;
            z-index: 10;
            display: block;
        }
        
        .MV2 {
            width: 250px;
            height: 170px;
        }
        
        a.more {
            display: block;
            width: 208px;
            height: 45px;
            background-image: url("../images/more.png");
            text-indent: -99999px;
            position: absolute;
            color: #fff;
            right: -2%;
            bottom: -32%;
            transition: background-image .5s;
        }
        
        a.more:hover {
            background-image: url("../images/more2.png");
        }

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

		#surge .title{
			margin-top:-50px;
		}

		#humidity {
                background-color: #000;
                background-image: url(../images/mb_humidity_960.jpg);
                background-position: 50% 90%;
                background-repeat: no-repeat;
                min-height: 840px;
        }
		
		#humidity .title{
			margin-top:3%;
		}
		
		#humidity .text {width:100%;}

		#temperature {
                background-color: #000;
                background-image: url(../images/mb_temperature_960.jpg);
                background-position: 50% bottom;
                background-repeat: no-repeat;
                min-height: 960px;
        }
        #temperature .text {width:100%;}

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

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

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



}


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


        #m2 {
            background-color: #000;
			min-height:450px;
        }
                
        #m2 .title{
            margin-top:0%;
			width: 100%;
        }

        #m2 .text{
			width: 100%;
        }

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

        #smartfan5fan .smartlist{
            font-size:20px;          
        }

        #smartfan5fan .title{
            font-size:1.4em;
            margin-top:0;
        }

        #smartfan5fan .conbox1{
             margin-left:0%;
        }

        #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;        
        }
        
        #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;
        }

        #hdmi {
                background-color: #000;
                background-image: url("../images/mb_hdmi_640.jpg");
                background-position: 50% 100%;
                background-repeat: no-repeat;
                min-height: 550px;
            }
            
            #hdmi .text {
                width: 100%;
                float: right;
            }

            #hdmi .title {
                margin-top:3%;
                width: 100%;
                font-size:1em;
            }

        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:900px;
            position: relative;
        }

        #anti-sulfur .title{
            text-align:left;
            margin-top:110%;
            font-size:14px;
            text-shadow:1px 1px 10px #000;
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 100%;
            margin-top:0%;
        }

        #smartcam {
            background: url("../images/smartcam_640.jpg") center bottom no-repeat;
            height: 840px;
        }
        #smartcam .title{
            font-size:0.8em;margin-top:-30px;
        }
        #smartcam .text{width:100%;}
        
       #XSplit {
        background-image: url("../images/xsplit_640.jpg");
        background-position: 30% 360px;
        background-repeat: no-repeat;
        min-height: 900px;		
        }
    
        #XSplit .t  itle {
            font-size:1em;
        }
	
    .XSplit_MV {
        position: absolute;
        color: #fff;
        left: 30%;
        top: 46%;
        z-index: 10;
        display: block;
    }
    
    .MV2 {
        width: 220px;
        height: 124px;
    }
    
    a.more {
        display: block;
        width: 208px;
        height: 45px;
        background-image: url("../images/more.png");
        text-indent: -99999px;
        position: absolute;
        color: #fff;
        right: -2%;
        bottom: -45%;
        transition: background-image .5s;
    }
    
    a.more:hover {
        background-image: url("../images/more2.png");
    }

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

		#surge .title{
			margin-top:0px;
		}

			#humidity {
                background-image: url(../images/mb_humidity_640.jpg);
                min-height: 1200px;
            }
                
            #humidity .frame .cell {
                width:100%;
            }
            #temperature {
                background-image: url(../images/mb_temperature_640.jpg);
				background-position:50% 55%;
                min-height: 780px;
            }
                
            #temperature .frame .cell {
                width:100%;
            }

        #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;
       }
              

}

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


}