.titlebar{
			font-size:1.8em;
			font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
			color:#FFC600;
			text-align: center;
			padding:66px 0px 60px 0px;
			background-image: url("../images/line.png");
			background-position: top center;
			background-repeat: no-repeat;
		}

		.imagefadein {
			display:none;
		}

/* 8 icons */
		#featureicon {
			width:100%;
			margin:0 auto;
		}
		#featureicon .featurenav{
			float:left;
			width:24.76%;
			overflow: hidden;						
			position: relative;
			cursor:pointer;								
			border-left: 4px solid #000;			
		}
		#featureicon .featurenav img{
			transition: all 0.3s linear;
			-webkit-transition: all 0.3s linear;
			-ms-transition: all 0.3s linear;

			-webkit-filter:grayscale(1);			
            -ms-filter:grayscale(1);
            filter:grayscale(1);
            margin:0 auto; 
		}
		#featureicon .featurenav:hover img{
			transform: scale(1.2, 1.2);
			-webkit-transform: scale(1.2, 1.2);
			-ms-transform: scale(1.2, 1.2);
			-webkit-filter:grayscale(0);			
            -ms-filter:grayscale(0);
            filter:grayscale(0);		
		}
		#featureicon .title{
			border-bottom: 3px solid #ffcb05;			
			font-size:1.0em;
			line-height:1.8em;
			text-align: center;
			color:#ccc;
			bottom:0;
			background:rgb(63, 63, 63);
			position: absolute;
			width:100%;	
			transition: all 0.3s linear;
			-webkit-transition: all 0.3s linear;
		}
		#featureicon .featurenav:hover .title {
		   background:#ffcb05;
		   color:#000;

		}

/*learn more*/
		.moreicon{
			margin-top:2%;
			border-bottom:3px solid #FFC600;
			text-align: center;
			cursor: pointer;
			font-size:1.0em;
			line-height: 1.6em;
			color:#FFC600;
			margin-bottom: 50px;
		}

		.morecon{
			display:none;
		}

		.btnstyle{
			transition: all .2s;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			cursor: pointer;
			background: #FFC600;
			margin:0 auto;
			margin-bottom: -20px;
			z-index:99;
			position:relative;
		}

		.btnstyle span{
			transition: all .2s;
			content: "";
			display: block;
			width: 50%;
			height: 5px;  
			margin: 0 auto;
			background-color: #e8e8e8;
			transform: translateY(12px) rotate(90deg);
			-webkit-transform: translateY(12px) rotate(90deg);
			-ms-transform: translateY(12px) rotate(90deg);
		}

		.btnstyle:before{
			transition: all .2s;
			content: "";
			display: block;
			width: 50%;
			height: 5px;  
			margin: 0 auto;
			background-color: #e8e8e8;
			transform: translateY(18px) rotate(0deg);				
			-webkit-transform: translateY(18px) rotate(0deg);
			-ms-transform: translateY(18px) rotate(0deg);
		}

		.menuOpen span{
			transform: translateY(12px) rotate(-50deg);
			-webkit-transform: translateY(12px) rotate(-50deg);
			-ms-transform: translateY(12px) rotate(-50deg);
		}

		.menuOpen:before{
			transform: translateY(17px) rotate(-130deg);
			-webkit-transform: translateY(17px) rotate(-130deg);
			-ms-transform: translateY(17px) rotate(-130deg);
		}

		.menuOpen{
			background: #FFC600;
		}


/*mb-spec*/
		#mbspec {		
            background-image: url("../images/model_intro_1920.png");
            background-position: 50% top;
            background-repeat: no-repeat;
			min-height: 1100px;			
			position:relative;
			overflow: hidden;
		}
		.mbspec-s{
			display:none;
		}
		
		#mbspec .spec1{			
			position:relative;
			width:927px;
			float: left;
		}

		#mbspec .speclist{
			position: absolute;	
		}

		#mbspec .spec1 .speclist{
			text-align: right;
			right:620px;
		}

		#mbspec .spec2{
			position:relative;
			width:300px;
			float: left;
			
		}
		#mbspec .specpoint{
			width:30px;
			height:30px;
			border-radius:50%;			
			background-color:#FFC600;
			color:#fff;
			font-size:1em;
			line-height: 1.8em;
			margin-right:6px;
			text-align: center;
			display: inline-block;
			margin-bottom:4%;
			display:none;
			
			
		}
		.spec1 #specitemlist01{
			top:190px;
		}

		.spec1 #specitemlist02{
			top:258px;
		}
		.spec1 #specitemlist03{
			top:318px;
		}

		.spec1 #specitemlist04{
			top:535px;
		}
		.spec1 #specitemlist05{
			top:605px;
		}
		.spec1 #specitemlist06{
			top:740px;
		}
		.spec1 #specitemlist07{
			top:800px;
		}




		.spec2 #specitemlist08{
			top:180px;
		}
		.spec2 #specitemlist09{
			top:255px;
		}
		.spec2 #specitemlist10{
			top:420px;
		}
		.spec2 #specitemlist11{
			top:470px;
		}
		.spec2 #specitemlist12{
			top:632px;
		}

		.spec2 #specitemlist13{
			top:770px;
		}
		.spec2 #specitemlist14{
			top:880px;
		}
		.spec2 #specitemlist15{
			top:960px;
		}



		
/* slider images ************************************/
        #Lighting-img{
            overflow: hidden;
            margin-bottom: 4%;
            max-width: 1920px;
        }

        #Lighting-img .imgbox{
            margin:0 auto;
            background-color: #fff;
        }

        #Lighting-img .mask{
            background-color: rgba(0, 0, 0, 0.60);
            position: absolute;                   
            width:15%;
            height:540px;
        }
        
        #Lighting-img .imgbox #m1{
            /*background-image: url("../images/lightimg01.jpg");*/
            background-position:left;
            background-size:cover;
            height:540px;
            background-repeat: no-repeat;
            width:15%;
            float: left;
        }

        #Lighting-img .imgbox #m2{
            width:70%;
            float: left;
            position: relative;
            margin:0 auto;
        }

        #Lighting-img .imgbox #m3{            
            /*background-image: url("../images/lightimg04.jpg");*/
            background-position:center;
            background-size:cover;
            height:540px;
            background-repeat: no-repeat;
            width:15%;
            float: left;
        }


        #Lighting-img #m2 .left{
            width:40px;
            height: 60px;
            background-color:rgba(87, 87, 87, 0.70);
            border-radius: 6px;
            position: absolute;
            top:40%;
            margin-left:2%;
            cursor:pointer;
            transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            z-index:99;
        }

        #Lighting-img #m2 .right{
            width:40px;
            height: 60px;
            background-color:rgba(87, 87, 87, 0.70);
            border-radius: 6px;
            position: absolute;
            top:40%;
            right:0;
            margin-right:2%;
            cursor:pointer;
            transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            z-index:99;
        }

        #Lighting-img .left span{
            content: "";
		    position: absolute;
		    border-top: transparent 10px solid;
		    border-right: #FFFFFF 16px solid;
		    border-bottom: transparent 10px solid;
		    border-left: transparent 10px solid;
		    margin-top:20px;

        }

        #Lighting-img .left span{
		    position: absolute;
		    border-top: transparent 10px solid;
		    border-right: #FFFFFF 16px solid;
		    border-bottom: transparent 10px solid;
		    border-left: transparent 10px solid;
		    margin-top:20px;
        }

        #Lighting-img .right span{
		    position: absolute;
		    border-top: transparent 10px solid;
		    border-right: transparent 10px solid;
		    border-bottom: transparent 10px solid;
		    border-left: #FFFFFF 16px solid;
            margin-top:20px;
            margin-left:14px;
        }

        #Lighting-img #m2 .left:hover{
		    background-color:rgba(126, 126, 126, 0.70);
        }

        #Lighting-img .left:hover span{
            border-right:  #FF7100 16px solid;
        }


        #Lighting-img #m2 .right:hover{
		    background-color:rgba(126, 126, 126, 0.70);
        }
        #Lighting-img .right:hover span{
            border-left:  #FF7100 16px solid;
        }

/* Video 1 ************************************/

		.video-container{
			position:relative;
			padding-bottom:56.25%;
			height:0;overflow:hidden;
		}
	
		.video-container iframe,
		.video-container object,
		.video-container embed{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}        

/* Video 2 ************************************/
        #ytvedio{
            background-image: url("../images/videobg_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
			min-height: 1150px;   
			max-width: 1920px;

        }

		#killervideo{
			transform: perspective(1000px) rotateY(10deg); 
			/*box-shadow:inset 0px 10px 100px #333;  */
			width: 1080px;
			height: 640px;
			position: relative; 
			top:211px;
			left:171px;
			
		}
		
		.killervimg {
			background-image: url('../images/yt.jpg');
			background-repeat: no-repeat;
			background-size:cover;
			background-position:center;		
			cursor: pointer;
		}

/* tabicon ************************************/

		#tabicon .tabcon{
			width:100%;
			/*background-color: #666;*/
			margin:0 auto;
			clear:both;
			margin-bottom: 10%;
			display:none;
		}
		#tabicon ol li{
			float: left;	
			text-align: center;
			transition:all 0.3s linear;
		}
		
		#tabicon .triP{
			background-color: #FFC600;
			width:100px;
			height:20px;
		}

		#tabicon ol li{
			list-style: none; 
			float: left;
			width:auto;
			cursor: pointer;
			border:1px solid #FF6600;
			
		}

		.iconall{
			width:50%;
			margin:0 auto;
		}
		
		#tabbox {
			min-height:900px;
		}


		.trianglediv::after {
		    content: "";
		    position: absolute;
		    border-top: #FF6600 16px solid;
		    border-right: transparent 10px solid;
		    border-bottom: transparent 10px solid;
		    border-left: transparent 10px solid;
		    margin-top:10px;
		    z-index:1;
		}

/* start RGB main page */
        .mainpage{                  
            width: 100%; 
            z-index:9;   
        }
        .mainpage1{
            position: absolute;
            display: block;
            width: 100%;
            height: auto;
            top:0;  
            animation:led-style5 2s alternate  infinite;
            -webkit-animation:led-style5 2s alternate  infinite;
        }

            
        .mainpage2{
            position: absolute;
            display: block;
            width: 100%;
            height: auto;
            top:0;  
            animation:led-style5 1s alternate infinite;
            -webkit-animation:led-style5 1s alternate infinite;
            animation-delay: 1s;
        }

       

 		@keyframes led-style5 {
           0%   {opacity: 1}
            10%  {opacity: 0.8}
            20%  {opacity: 0.7}
            50%  {opacity: 0.5}
            70%  {opacity: 0.2}
            85%  {opacity: 0.6}
            95%  {opacity: 0.8}
            100% {opacity: 1}
        }

        @-webkit-keyframes led-style5 {
           0%   {opacity: 1}
            10%  {opacity: 0.8}
            20%  {opacity: 0.7}
            50%  {opacity: 0.5}
            70%  {opacity: 0.2}
            85%  {opacity: 0.6}
            95%  {opacity: 0.8}
            100% {opacity: 1}
        }

        @-ms-keyframes led-style5 {
           0%   {opacity: 1}
            10%  {opacity: 0.8}
            20%  {opacity: 0.7}
            50%  {opacity: 0.5}
            70%  {opacity: 0.2}
            85%  {opacity: 0.6}
            95%  {opacity: 0.8}
            100% {opacity: 1}
        }
/* end main page */


/*tabs*/
			#functiontabs {
				position: relative;			
				margin-bottom:6%;
			}

			#functiontabstitle{
				margin-top:4%;
			}

			#functiontabs .tabtitle{
				
				padding:1% 3% 1% 3%;
				float:left;
				cursor: pointer;
				background-color: #262626;
				border:1px solid #FFCC00;
				color:#FFC600;				
			}
			#functiontabs .tabtitle:hover{
				color:#fff;
				
			}

			
			#functiontabs .funtabs{
				clear:both;
				margin-top:10%;
				background-image: url("../images/tabsbg.jpg");
				background-size:cover;
				padding-top:6%;
				padding-bottom:6%;
				
				
			}

			#functiontabs .conbox1{
				position: relative;
				display: inline-block;
				vertical-align: top;width: 46%;
		   }
   
		   #functiontabs .conbox2{
				display: inline-block;
				position: relative;
				width:49%; 
				margin-left:2%;
		   } 	
		   #functiontabs .title{
				color:#fff;
				font-size:1.6em;
		   }


		   #funtabs2, #funtabs3, #funtabs4{
			   display:none;
		   }


			/*TOP*/
			#gotop{
				width:100px;
				background-color:rgba(51,51,51, 0.8);
				color:#FFFFFF;
				border-radius:10px;
				margin:10px;
				padding:10px;
				cursor:pointer;
				text-align:center;
				font-size:13px;
				bottom:46px;
				right:4%;
				position:fixed;	
				display:none;
				transition:all 0.3s linear;
				font-family: Arial, Helvetica, sans-serif;
			}

			#gotop:hover{
				background-color:#de5801;
			}



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

		#tabicon ol li{
			list-style: none; 
			float: left;
			margin-left: 0px;
			cursor: pointer;
			border:1px solid #FFC600;
			/*margin-left:4%;*/
		}

/* 8 icons */
		#featureicon .featurenav{
			width:24.7%;
		}

   
}



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

		
/* 8 icons */
		#featureicon .featurenav{			
			width:24.58%;		
		}
		
		#featureicon .title{
			font-size:0.8em;
		}


/*mb-spec*/
		#mbspec {		
			background-image: url("../images/model_intro_1366.png");
			background-position: 50% top;
			background-repeat: no-repeat;
			min-height: 1000px;			
			position:relative;
			overflow: hidden;
		}
		#mbspec .spec1 .imgset img{
			width:150px;
		}
		#mbspec .spec2 .imgset img{
			width:150px;
		}

		.mbspec-s{
			display:none;
		}
			
		#mbspec .text{		
			font-size:15px;
		}
		
		#mbspec .spec1{			
			position:relative;
			width:707px;
			float: left;
		}

		#mbspec .speclist{
			position: absolute;				
			
		}
		#mbspec .spec1 .speclist{
			text-align: right;
			right:565px;
		}
		#mbspec .spec2{
			position:relative;
			width:155px;
			float: left;			
        }
        
		#mbspec .specpoint{
			width:30px;
			height:30px;
			border-radius:50%;			
			background-color:#FFD80E;
			color:#000;
			font-size:1em;
			line-height: 1.8em;
			margin-right:6px;
			text-align: center;
			display: inline-block;
			margin-bottom:4%;
			display:none;		
			font-weight:bold;		
		}

		.spec1 #specitemlist01{
			top:180px;
		}

		.spec1 #specitemlist02{
			top:240px;
		}
		.spec1 #specitemlist03{
			top:295px;
		}

		.spec1 #specitemlist04{
			top:490px;
		}
		.spec1 #specitemlist05{
			top:550px;
		}
		.spec1 #specitemlist06{
			top:670px;
		}
		.spec1 #specitemlist07{
			top:735px;
		}



		.spec2 #specitemlist08{
			top:160px;
		}
		.spec2 #specitemlist09{
			top:235px;
		}
		.spec2 #specitemlist10{
			top:380px;
		}
		.spec2 #specitemlist11{
			top:430px;
		}
		.spec2 #specitemlist12{
			top:580px;
		}
		.spec2 #specitemlist13{
			top:705px;
		}
		.spec2 #specitemlist14{
			top:805px;
		}
		.spec2 #specitemlist15{
			top:880px;
		}




		.iconall{
			width:66%;
			margin:0 auto;
		}
/* slider images ************************************/
		#Lighting-img .mask{
            height:0px;
        }
        
        #Lighting-img .imgbox #m1{
            height:300px;
        }

        #Lighting-img .imgbox #m2{
            width:70%;
        }

        #Lighting-img .imgbox #m3{            
            height:300px;

        }


/* Video 2 ************************************/
		#ytvedio{
			background-image: url("../images/videobg_1366.jpg");
			background-position: top center;
			background-repeat: no-repeat;			
			min-height: 817px;
		}

		#killervideo{
			transform: perspective(1000px) rotateY(14deg); 
			/*box-shadow:inset 0px 10px 100px #333;  */
			width: 780px;
			height: 460px;
			position: relative; 
			top:140px;
			left:103px;	
		}



/* tabicon ************************************/

		#tabicon ol li{
			width:30%;
			margin-bottom:1%;
			list-style: none; float: left;
			cursor: pointer;
			border:1px solid #FFC600;
			/*margin-left:4%;*/
		}

		#tabicon ol li:hover{
			border:10px solid #FFC600;
		}

		#tabicon img{
			width:100%;
		}

		#tabicon .tabcon{
			width:100%;
			margin:0 auto;
			overflow: visible;
			display:none;
		}

       	.tabbox{
       		overflow: visible;
			min-height:800px;
		   }
		   
/* contentflow */
#CFw{
	min-height: 300px;
	margin-top:-200px;
	}




}


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

/* 8 icons */
		#featureicon .featurenav{			
			width:49.3%;		
		}


/*mb-spec*/

		#mbspec {		
            background-image: url("");
            background-position: top center;
            background-repeat: no-repeat;					
			overflow: hidden;
		}
		.mbspec-s{
			display:block;
		}
		#mbspec .text{		
			font-size:0.6em;
			overflow: hidden;
		}

		#mbspec .spec1{			
			position: relative;
			display: inline-block;
			width: 54%;
			padding-bottom: 0%;
		}

		#mbspec .spec1 .imgset img{
			width:auto;
			float:none;
		}
		#mbspec .spec2 .imgset img{
			width:auto;
		}

		#mbspec .speclist{
			position:  relative;	
		}

		#mbspec .spec1 .speclist{			
			left:0px;			
			text-align: left;
		}
		#mbspec .spec2{
			display: inline-block;
			position:  relative;
			width: 42%;
			right:0%;
			left:3%;
			
		}
		#mbspec .specpoint{		
			display:inline-block;
		}

		.spec1 #specitemlist01{
			top:0px;
		}
		.spec1 #specitemlist02{
			top:0px;
		}
		.spec1 #specitemlist03{
			top:0px;
		}
 		.spec1 #specitemlist04{
			top:0px;
		}
		.spec1 #specitemlist05{
			top:0px;
		}
		.spec1 #specitemlist06{
			top:0px;
		}
		.spec1 #specitemlist07{
			top:0px;
		}
		
		
		
		.spec2 #specitemlist08{
			top:0px;
		}
		.spec2 #specitemlist09{
			top:0px;
		}
		.spec2 #specitemlist10{
			top:0px;
		}
		.spec2 #specitemlist11{
			top:0px;
		}
		.spec2 #specitemlist12{
			top:0px;
		}
		.spec2 #specitemlist13{
			top:0px;
		}
		.spec2 #specitemlist14{
			top:0px;
		}
		.spec2 #specitemlist15{
			top:0px;
		}



/* Video 2 ************************************/
		#ytvedio{
			background-image: url("../images/videobg_960.jpg");			
			background-position: top center;
			background-repeat: no-repeat;			
			min-height: 580px;
		}

		#killervideo{
			transform: perspective(1000px) rotateY(17deg); 
			/*box-shadow:inset 0px 10px 100px #333;  */
			width: 558px;
			height: 322px;
			position: relative; 
			top:74px;
			left:36px;	
		}



/* tabicon ************************************/
	
       	.tabbox{
       		overflow: visible;
			min-height:700px;
		   }
		   
/* contentflow */
		#CFw{
		min-height: 300px;
		margin-top:0px;
		display: none;
		}
		#cfw-small, #siv-small, #easy-small, #osd-small, #bios-small{
			display:block;		
		}		


		.mb5text div{
			width:90%;
		}

/*tabs*/

		#functiontabs .tabtitle{			
			padding:2% 3% 2% 3%;
			float:left;
			cursor: pointer;
			background-color: #262626;
			border:1px solid #FFC600;
			color:#FFC600;
			width:42%;
			font-size:0.8em;
			
		}

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

		#functiontabs .conbox2{
			display: inline-block;
			position: relative;
			width:100%; 
			margin-left:0%;
		} 	

   
}


@media screen and (max-width: 640px) {  
		.titlebar{
			font-size:1.2em;
			padding:76px 0px 60px 0px;
		}

/* 8 icons */
		#featureicon .featurenav{			
			width:49%;			
		}

		#featureicon .title{			
			font-size:0.6em;
			line-height:2em;			
		}

		#mbspec .specpoint{
			width:20px;
			height:20px;	
			font-size:0.6em;
			margin-bottom:1%;		
	
		}

		#mbspec .spec1{			
			position: relative;
			display: inline-block;
			width: 100%;
			top:-50%;
		}

		#mbspec .spec2{
			display: inline-block;
			position:  relative;
			width: 100%;
			right:0%;
			left:0%;
			margin-left:0%;
			
		}
/* slider images ************************************/
		#Lighting-img .mask{
			height:0px;
		}

		#Lighting-img .imgbox #m1{
			height:0px;
		}

		#Lighting-img .imgbox #m2{
			width:100%;
		}

		#Lighting-img .imgbox #m3{            
			height:0px;

		}



/* Video 2 ************************************/

		#ytvedio{
			background-image: url("../images/videobg_640.jpg");			
			background-position: top center;
			background-repeat: no-repeat;			
			min-height: 390px;
		}

		#killervideo{
			transform: perspective(1000px) rotateY(22deg); 
			/*box-shadow:inset 0px 10px 100px #333;  */
			width: 380px;
			height: 210px;
			position: relative; 
			top:40px;
			left:-14px;	
		}

/* tabicon ************************************/

		#tabicon .iconall{
			width:70%;
		}

		#tabicon ol li{
			width:28%;
			margin-bottom:10%;
			list-style: none; float: left;
			cursor: pointer;
			border:1px solid #FFC600;
			/*margin-left:4%;*/
		}

		#tabicon ol li:hover{
			border:6px solid #FFC600;
		}

		#tabicon img{
			width:100%;
		}
		

		#tabicon .tabcon{
			width:100%;
			margin:0 auto;
			overflow: visible;
			min-height:750px;
			display:none;
		}

       	.tabbox{
       		overflow: visible;
		   }
		   
/* contentflow */		   
		#CFw{
			min-height: 300px;
			margin-top:-80px;
			}

			.mb5text div{
				width:90%;
				margin-bottom: 10%;
			}
			#x-fi2{
				min-height:1100px;
			}
			
			#functiontabs .tabtitle{			
				padding:2% 3% 2% 3%;
				width:100%;
				font-size:0.8em;	
				text-align: center;			
			}
			/*TOP*/
			#gotop{
				width:100%;
				background-color:rgba(51,51,51, 0.8);
				color:#FFFFFF;
				border-radius:0px;
				margin:0px;
				padding:10px;
				cursor:pointer;
				text-align:center;
				font-size:13px;
				bottom:0px;
				right:0%;
				position:fixed;	
				display:none;
				transition:all 0.3s linear;
				font-family: Arial, Helvetica, sans-serif;

			}


}


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

/* 8 icons */
		#featureicon .featurenav{			
			width:100%;			
		}

		/* Video 2 ************************************/

		#ytvedio{
			background-image: url("../images/videobg_480.jpg");			
			background-position: top center;
			background-repeat: no-repeat;			
			min-height: 390px;
		}

		#killervideo{
			transform: perspective(1000px) rotateY(30deg); 
			/*box-shadow:inset 0px 10px 100px #333;  */
			width: 306px;
			height: 156px;
			position: relative; 
			top:20px;
			left:20px;	
		}

		#tabicon .tabcon{
			min-height:600px;
		}
 }