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

/*features*/
        
#ryzencpu {
    padding-top: 2%;
}
        
#ryzencpu .conbox1 {
  display: inline-block;
  width: 63%;
}

#ryzencpu .conbox2 {
  display: inline-block;
  margin-left: 10%;
  width: 25%;
  vertical-align:bottom;
}
        
        #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:10%;
        }
        
        #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: 900px;
            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;
        }

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

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

        #rgbadvanced{
        background-image: url("../images/rgb_fusion_1920.jpg");
        background-position: center;
        background-repeat: no-repeat;
        min-height: 1000px;

       }
       #rgbadvanced .title2{
            font-size:1.4em; 
            font-weight: bold;
            margin-bottom: 4px;
        }

        #rgbadvanced .conbox1{                        
            position: absolute;
            top:760px;
            width:50%;
            left:100px;
       }

       #rgbadvanced .conbox2{            
            position: absolute;
            width:40%;
            top:740px;        
            left:480px;            
        }
       #rgbadvanced .conbox3{
            position: absolute;
            width:50%;             
            top:760px;
            left:740px;
       }

        #rgbapp {
            background-color: #000;
            background-image: url("../images/mb_rgbapp_1920.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 1400px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:62%;
            margin-left:2%;
        }    

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

        #hdaudio .hdaudio-ac ul{
            margin-left:12%;
        }

        #hdaudio .hdaudio-ac ul li{
            width:38%;
            border:3px solid #FFD80E;
            float:left;
            cursor:pointer;
            transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            box-shadow:0px 0px 20px #FFD80E;
            margin:20px;
            text-align: center;
            font-size:0.8em;
            line-height: 1.6em;
        }

        #hdaudio .hdaudio-ac ul li:hover{
              transform: scale(1.2, 1.2);
              -webkit-transform: scale(1.2, 1.2);
              box-shadow:0px 0px 80px #FFD80E;
        }
    
        #High-End-Audio{
            margin-bottom: 4%;
        }

        #High-End-Audio .conbox1{
            position: relative;
            display: inline-block;
            width: 44%;
            padding:2%;
        }
        
        #Solid-Pin .conbox1{
             position: relative;
             display: inline-block;             
             width: 50%;
             vertical-align:top;
        }

        #Solid-Pin .conbox2{
             display: inline-block;
             position: relative;
             width:46%;             
             margin-left:2%;
        }

        #Solid-Pin ol li{
            list-style-type: disc;
        }
         #Solid-Pin .t1{
            border-left:4px solid #ffc600;
            padding-left:10px;
            line-height: 30px;
            margin-top:80px;
            margin-left:-20px;
        }
            
        #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%;
        }

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

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

		#temperature .text {
            width: 70%;
        }

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

        #hd4khdmi{
            margin-top:6%;            
        }

        #hd4khdmi .title{
            text-align: center;
            font-size:1em;
        }
            

        #hd4khdmi .conbox1{
            background-image: url("../images/4k-bg.jpg");
            background-position: top left;
            background-repeat: no-repeat;
            position: relative;
            display: inline-block;
            width: 42%;
            padding:2%;            
            min-height: 600px;
            vertical-align: top;
        }
        
        #hd4khdmi .conbox2{
                background-image: url("../images/hdmi-bg.jpg");
                background-position: top center;
                background-repeat: no-repeat;
                display: inline-block;
                position: relative;
                width:42%; 
                text-align: left;
                padding:2%;
                min-height: 600px;
                vertical-align: top;           
        }

        

        

@media screen and (max-width: 1366px) {
        
#ryzencpu .conbox1 {
  display: inline-block;
  width: 65%;
}

#ryzencpu .conbox2 {
    display: inline-block;
    margin-left: 4%;
    padding-top: 0%;
    padding-bottom: 10%;
  width: 30%;
}

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

        #smartfan5fan {
            min-height: 950px;
        }

        #smartfan5fan .title {
            margin-top:-10px;
        }
        #smartfan5fan .smartlist1{
            font-size:22px;
            line-height: 40px;
        }    
        
        #smartfan5fan .conbox4{
            margin-top:6%;
        }      

        #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: 900px;
            position: relative;
        }

        #vr .vrtext{
            width:66%;
        }

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

        #rgbadvanced{
            background-image: url("../images/rgb_fusion_1366.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 900px;
    
           }    
            #rgbadvanced .conbox1{                        
                position: absolute;
                top:580px;
                width:30%;
                left:40px;
           }
    
           #rgbadvanced .conbox2{            
                position: absolute;
                width:40%;
                top:560px;        
                left:280px;            
            }
           #rgbadvanced .conbox3{
                position: absolute;
                width:50%;             
                top:580px;
                left:520px;
           }

        #hdaudio .hdaudio-ac ul{
            margin-left:10%;

        }
       
       #hdaudio .hdaudio-ac ul li{
            width:36%;
           
        }

         #Solid-Pin .t1{            
            margin-top:20px;            
        }

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

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

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

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

        #smartcam {
            background: url("../images/smartcam_1366.jpg") center 0 no-repeat;
            height: 893px;
        }            
        #smartcam .title{
                 font-size:1.6em;
        }
        
       #hd4khdmi .conbox2{
            margin-left:2%;
       }

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



}


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

#ryzencpu .conbox1 {
  width: 100%;
}

#ryzencpu .conbox2 {
    margin-left: 20%;
    padding-top: 3%;
    padding-bottom: 0%;
  width: 60%;
}

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

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

            #rgbadvanced{
            background-image: url("../images/rgb_fusion_960.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 800px;
    
           }    
           #rgbadvanced .title2{
               font-size:1em;
           }
            #rgbadvanced .conbox1{                        
                position: static;                
                width:100%;
                left:40px;
           }
    
           #rgbadvanced .conbox2{            
                position: absolute;
                width:40%;
                top:520px;        
                left:30px;            
            }
           #rgbadvanced .conbox3{
                position: absolute;
                width:50%;             
                top:520px;
                left:260px;
           }
        
            #rgb7color .conbox1{
                position: relative;
                display: inline-block;
                vertical-align: top;width: 100%;
           }
    
           #rgb7color .conbox2{
                display: inline-block;
                position: relative;
                width:100%; 
                margin-left:2%;
           }
        
            #hdaudio .hdaudio-ac ul li{
                font-size:0.7em;
                line-height: 1.5em;
            }

        #Solid-Pin .conbox1{
             width: 100%;
        }

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

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

		#humidity {
                background-color: #000;
                background-image: url(../images/mb_humidity_960.jpg);
                background-position: 50% 75%;
                background-repeat: no-repeat;
                min-height: 780px;
        }
		#humidity .text {width:100%;}

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

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

        #hd4khdmi .conbox1{
            width: 100%;   
        }
        
       #hd4khdmi .conbox2{
            margin-left:0%;
            width:100%;             
       }
       #hd4khdmi .conbox1 p, #hd4khdmi .conbox2 p{
            margin-left:4%;
            margin-right:4%;         
        }

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


}


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

#ryzencpu .conbox2 {
    margin-left: 0%;
    padding-top: 3%;
  width: 100%;
}

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

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

            #rgbadvanced{
            background-image: url("../images/rgb_fusion_640.jpg");
            background-position: 50% -60px;
            background-repeat: no-repeat;
            min-height: 700px;
    
           }    
           #rgbadvanced .title2{
               font-size:1em;
           }
            #rgbadvanced .conbox1{                        
                position: static;                
                width:100%;
                left:40px;
           }
    
           #rgbadvanced .conbox2{            
                position: absolute;
                width:100%;
                top:420px;        
                left:50px;            
            }   
           #rgbadvanced .conbox3{
                position: absolute;
                width:100%;             
                top:340px;
                left:0px;
           }
		   
		   #hdaudio .hdaudio-ac ul{
			   min-height:760px;
            }
            
            #hdaudio .hdaudio-ac ul{
            margin-left:0%;
            }

            #hdaudio .hdaudio-ac ul li{
                width:100%;
            }

            #hdaudio .frame .cell {
                width:100%;
            }

        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:800px;
            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%;
        }

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

        #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%;}
        
        #hd4khdmi .conbox1{           
            min-height: 440px; 
        }            
        #hd4khdmi .conbox2{   
                min-height: 540px;      
        }

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



}

@media screen and (max-width: 480px) {
        #rgbapp {
            margin-top:0px;
            background-color: #000;
            background-image: url("../images/mb_rgbapp_480.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 800px;
        }
            
        #rgbapp .rgbqrcode{    
            margin-top:100%;
            margin-left:0%;
        }


}