@import url(https://fonts.googleapis.com/css?family=Oswald);

		body{
			font-family: sans-serif, Microsoft JhengHei;
            /*Firefox hack*/
            background: #000;
            padding: 0;
            margin: 0;
            color: #fff;
            font-size:18px;
            line-height: 30px;
            font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Roboto Condensed', '微軟正黑體' !important;
		}
		a{
			color:#fff;
		}

		.img-responsive {
          display: block;
          max-width: 100%;
          height: auto;
        }
		
		.title{
			color:#fff;			
			font-size:90px;
			text-align: center;
			line-height: 160%;
			text-shadow:0px 0px 30px #00C4A8;
			top:12%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
			width:100%;
			position:absolute;

		}
		.title2{
			color:#fff;			
			font-size:140px;
			line-height: 80%;
			text-align: center;
			text-shadow:0px 0px 30px #00C4A8;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;			
			top:26%;
			width:100%;
			position:absolute;

		}
		
		.subtitle1{
			background-image: url("../images/title-1.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle2{
			background-image: url("../images/title-2.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle3{
			background-position: center;
			color:#000;			
			font-size:14px;
			margin-top:0%;
			margin-bottom:0%;
		}


.a{
    color: #06c;
}
.a:hover{
    color:#5AA0E6;
    -o-transition: color .20s linear;
    -webkit-transition: color .20s linear;
    -moz-transition: color .20s linear;
    transition:  color .20s linear;
}

		#benefits {
			background:url(../images/background_1920.jpg) 50% 0 no-repeat fixed;
			color:#FFF;
			height:2100px;
			margin: 0 auto;
			padding:0;
		}
		
		/*model*/
		#model {
			min-height:500px;
		}

		#wtb {
			margin-left:8%;
			width:100%;
			margin-top:5%;
		}

		.left {
			float: left;
			margin-right:2%;
			margin-top:2%;
			width: 23%;
			}
			
		#model .wtb-img {
			margin-left:3%;
			width:100%;
			float:left;
		}
		
		.name {
			text-align:center;
		}

#wtb .left a{    
  color:#fff;
  line-height: 46px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}

#model .left a:hover{    
  color:#CCC;
}

#model .hover {position:relative;}

#model .hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 1s ease-in-out ;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
transition-duration: 0.2s, 0.8s;
width:100%;
}

#model .hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/}
  

		/*table*/
		.model_table{
			margin-top:4%;
			border: 1px solid #FD5600;
			color:#FFF;
			width:60%;
		}
		.model_table p{
			padding-left:2%;
		}

		.model_table a{
			color:#000;
			text-decoration: none;
		}

		.model_table a:hover{
			color:#000;
			text-decoration:underline;
		}
		.model_table tr:first-child td {
			background: #FD5600;
			border-right: none;
			border-left: none;
			
		}

		.table-title{
			font-size:28px;
		}

		.table-chipset{
			text-align: center;
		}

		.model_table td {
			border-bottom: 1px solid #FD5600;
			border-right: 1px solid #FD5600;
			padding:1%;
		}

		.model_table tr:first-child tr:first-child {
			background: #fff;
			border-right: none;
			border-left: none;
		}


	#Transitions{
		width:520px;
		height:100px;
		background: linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		background: -moz-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		background: -webkit-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		background: -o-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		opacity: 1;
		transition: all 0.4s ease-in-out;
				/*所有屬性都有過場動畫、過場動畫的運行時間、過場動畫型態*/
		-webkit-transition:all 0.4s ease-in-out; /* Safari and Chrome */
		-webkit-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		-moz-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		-o-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		-ms-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		font-size: 22px;
		font-weight:bold;
		color:#FFF;
		padding:20px;
		}
	
	#Transitions:hover{
		opacity: 1;
		transform:translate(-20px,0px);
		-webkit-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1);
		-moz-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		-o-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		-ms-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
		transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 	
		color:#FFF;
		}


        #optane{
            margin-top:-15%;
            margin-bottom:4%;
        }
        #optane .videowidth{    
            width:50%;           
            display: inline-block;
            position: relative;
            box-shadow: 0px 0px 100px #00C4A8;
        }

        #optane .text{            
            width:40%;
            margin-right:4%;
            display: inline-block;
            position: relative;
            vertical-align: top;
        }

        #M2ThermalGuard {
			background:url(../images/ThermalGuard_1920.jpg) 50% 20px no-repeat;
			min-height:800px;
		}
		
		#M2ThermalGuard .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;
             padding-top:4%;
             width: 52%;
        }

        #M2ThermalGuard .conbox2{
             display: inline-block;
             position: relative;
             width:42%; 
             margin-left:4%;
        } 

        #M2ThermalGuard .conbox3{
             display: inline-block;
             position: relative;
             width:70%; 
			 margin-top:3%;
        } 

		p{
			text-align: left;

		}
		p a{
			color:#fff;
		}


		footer{
			margin-top:2%;
			margin-bottom:2%;
			text-align: center;
			font-size:14px;
		}

		footer a{
			color:#fff;
		}
		
		footer a:hover{
			color:#fff;
		}
		.no2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		line-height: 16px;
		color: #CCCCCC;
		}

.c-box{
	margin:0 auto;
	padding:0 10% 0 10%;
}

/*nav**********************************/
nav a{
	cursor:pointer;
}

.navbar-nav {
	font-size:15px;
}

.navbar-inverse .navbar-nav>li>a{
	color:#FFFFFF;
	transition:all 0.2s linear;
}

.navbar-inverse{
	background-color:#000;
}
		
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	background-color: #000;
}

.navbar-inverse .navbar-nav>li>a{
	color: #FF4F00;
	font-family: 'Oswald', sans-serif, Microsoft JhengHei;
	font-size:20px;
}

.con-box{
	width:80%;
	margin:0 auto;
}

.con-box1{
	width:65%;
	margin:0 20%;
}
	#mainopt{
			margin-top:5%;
	}		


/*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;
}

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


.note {
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            color: #000;

        }

.video-container{
margin-top:4%;
margin-bottom: 4%;
position:relative;

padding-bottom:56.25%;

padding-top:30px;height:0;overflow:hidden;

}

.video-container iframe,

.video-container object,

.video-container embed{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}        


 @media screen and (max-width: 1366px) {
 		
		.model_table{	
			width:80%;
		}

		.title{
			font-size:80px;
			line-height: 160%;
			top:12%;
		
		}
		.title2{
			font-size:100px;
			line-height: 100%;
			top:26%;
		}

		.subtitle1{
			background-image: url("../images/title-1_1366.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle2{
			background-image: url("../images/title-2_1366.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		#benefits {
			height:2230px;
		}

        #M2ThermalGuard {
			background:url(../images/ThermalGuard_1366.jpg) 50% 30px no-repeat;
			min-height:800px;
		}
		
		#M2ThermalGuard .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;
             padding-top:5%;
             width: 52%;
        }

        #M2ThermalGuard .conbox2{
             display: inline-block;
             position: relative;
             width:42%; 
             margin-left:4%;
        } 

        #M2ThermalGuard .conbox3{
             display: inline-block;
             position: relative;
             width:70%; 
			 margin-top:3%;
        } 

	#Transitions{
		width:500px;
		height:100px;
background: linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -moz-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -webkit-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -o-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		opacity: 1;
		transition: all 0.4s ease-in-out;
				/*所有屬性都有過場動畫、過場動畫的運行時間、過場動畫型態*/
		-webkit-transition:all 0.4s ease-in-out; /* Safari and Chrome */
		-webkit-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
font-size: 22px;
font-weight:bold;
color:#FFF;
padding:20px;
	}
	
	#Transitions:hover{
		opacity: 1;
		transform:translate(-20px,0px);
-webkit-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 	
color:#FFF;
}

.con-box1{
	width:90%;
	margin:0 8%;
}

		/*model*/
		#model {
			min-height:870px;
		}

		#wtb {
			margin-left:8%;
			width:100%;
			margin-top:5%;
		}

		.left {
			float: left;
			margin-right:2%;
			margin-top:2%;
			width: 33%;
			}
			
		#model .wtb-img {
			margin-left:3%;
			width:100%;
			float:left;
		}
		
		.name {
			text-align:center;
		}

#wtb .left a{    
  color:#fff;
  line-height: 46px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}

#model .left a:hover{    
  color:#CCC;
}

#model .hover {position:relative;}

#model .hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 1s ease-in-out ;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
transition-duration: 0.2s, 0.8s;
width:100%;
}

#model .hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/}

 
.note {
            font-weight: 300;
            font-size: 12px;
            line-height: 14px;
            color: #000;
        }

.navbar-inverse .navbar-nav>li>a{
			color:#FF4F00;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
			font-size:18px;
		}

	#mainopt{
			margin-top:6%;
	}		

 }


 @media screen and (max-width: 960px) {
		
	#mainopt{
			margin-top:8%;
	}		

		.subtitle1{
			background-image: url("../images/title-1_960.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle2{
			background-image: url("../images/title-2_960.png");
			background-position: center;
			color:#FFF;			
			font-size:36px;
			line-height: 72px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}
		
		#benefits {
			background:url(../images/background_960.jpg) 50% 0 no-repeat fixed;
			color:#FFF;
			height:2400px;
			margin: 0 auto;
			padding:0;
		}

     	.model_table{	
			width:90%;
		}

		.table-title{
			font-size:22px;
		}

    	.title{
			font-size:50px;
			line-height: 100%;
			top:20%;
		
		}

		.title2{
			font-size:60px;
			line-height: 100%;
			top:30%;
		}

		.navbar-inverse .navbar-nav>li>a{
			color:#FF4F00;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
			font-size:16px;
		}

        #optane .videowidth{    
            width:100%;           
        }

        #optane .text{            
            width:100%;
            margin-right:0%;
        }

        #M2ThermalGuard {
			background:url(../images/ThermalGuard_960.jpg) 50% 30px no-repeat;
			min-height:800px;
		}
		
		#M2ThermalGuard .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;
             padding-top:5%;
             width: 52%;
        }

        #M2ThermalGuard .conbox2{
             display: inline-block;
             position: relative;
             width:42%; 
             margin-left:4%;
        } 

        #M2ThermalGuard .conbox3{
             display: inline-block;
             position: relative;
             width:100%; 
			 margin-top:3%;
        } 

	#Transitions{
		width:550px;
		height:100px;
background: linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -moz-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -webkit-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -o-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		opacity: 1;
		transition: all 0.4s ease-in-out;
				/*所有屬性都有過場動畫、過場動畫的運行時間、過場動畫型態*/
		-webkit-transition:all 0.4s ease-in-out; /* Safari and Chrome */
		-webkit-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
font-size: 22px;
font-weight:bold;
color:#FFF;
padding:20px;
	}
	
	#Transitions:hover{
		opacity: 1;
		transform:translate(-20px,0px);
-webkit-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 	
color:#FFF;
}

.con-box1{
	width:65%;
	margin:0 17%;
}

		/*model*/
		#model {
			min-height:870px;
		}

		#wtb {
			margin-left:8%;
			width:100%;
			margin-top:5%;
		}

		.left {
			float: left;
			margin-right:2%;
			margin-top:2%;
			width: 48%;
			}
			
		#model .wtb-img {
			margin-left:3%;
			width:100%;
			float:left;
		}
		
		.name {
			text-align:center;
		}

#wtb .left a{    
  color:#fff;
  line-height: 46px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}

#model .left a:hover{    
  color:#CCC;
}

#model .hover {position:relative;}

#model .hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 1s ease-in-out ;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
transition-duration: 0.2s, 0.8s;
width:100%;
}

#model .hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/}


.note {
            font-weight: 300;
            font-size: 12px;
            line-height: 12px;
            color: #000;
        }


 }


 @media screen and (max-width: 640px) {
 		.navbar-inverse .navbar-nav>li>a{
	color:#FF4F00;
	font-family: 'Oswald', sans-serif, Microsoft JhengHei;
	font-size:26px;
}

	#mainopt{
			margin-top:10%;
	}		

		#benefits{
			min-height:2950px;
		}

		.table-title{
			font-size:20px;
			line-height:24px;
		}

		.table-chipset{
			font-size:16px;
			line-height:24px;
		}

        #optane .videowidth{             
            box-shadow: 0px 0px 20px #00C4A8;
        }

        #M2ThermalGuard {
			background:url(../images/ThermalGuard_640.jpg) 50% 30px no-repeat;
			min-height:900px;
		}
		
		#M2ThermalGuard .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;
             padding-top:5%;
             width: 100%;
			 margin-top:70%;
        }

        #M2ThermalGuard .conbox3{
             display: inline-block;
             position: relative;
             width:100%; 
			 margin-top:3%;
        } 

		.subtitle1{
			background-image: url("../images/title_640.png");
			background-position: center;
			color:#FFF;			
			font-size:30px;
			line-height: 58px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle2{
			background-image: url("../images/title_640.png");
			background-position: center;
			color:#FFF;			
			font-size:30px;
			line-height: 58px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.title{
			font-size:30px;
			line-height: 100%;
			top:26%;
		
		}
		.title2{
			font-size:40px;
			line-height: 100%;
			top:36%;
		}
		
		p {
			font-size:16px;
		}

	#Transitions{
		width:420px;
		height:90px;
background: linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -moz-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -webkit-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -o-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		opacity: 1;
		transition: all 0.4s ease-in-out;
				/*所有屬性都有過場動畫、過場動畫的運行時間、過場動畫型態*/
		-webkit-transition:all 0.4s ease-in-out; /* Safari and Chrome */
		-webkit-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
font-size: 18px;
font-weight:bold;
color:#FFF;
padding:20px;
	}
	
	#Transitions:hover{
		opacity: 1;
		transform:translate(-20px,0px);
-webkit-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 	
color:#FFF;
}

.con-box1{
	width:30%;
	margin:0 10%;
}

		/*model*/
		#model {
			min-height:1600px;
		}

		#wtb {
			margin-left:8%;
			width:100%;
			margin-top:5%;
		}

		.left {
			float: left;
			margin-left:10%;
			margin-top:0%;
			width: 50%;
			}
			
		#model .wtb-img {
			margin-left:3%;
			width:100%;
			float:left;
		}
		
		.name {
			text-align:center;
			width:130%;
			font-size:16px;
		}

#wtb .left a{    
  color:#fff;
  line-height: 46px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}

#model .left a:hover{    
  color:#CCC;
}

#model .hover {position:relative;}

#model .hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 1s ease-in-out ;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
transition-duration: 0.2s, 0.8s;
width:100%;
}

#model .hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/}



 }

 @media screen and (max-width: 480px) {
	 	.title{
			font-size:20px;
			line-height: 100%;
			top:30%;
		
		}
		.title2{
			font-size:20px;
			line-height: 100%;
			top:40%;
		}

		.subtitle1{
			background-image: url("../images/title_640.png");
			background-position: center;
			color:#FFF;			
			font-size:20px;
			line-height: 58px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

		.subtitle2{
			background-image: url("../images/title_640.png");
			background-position: center;
			color:#FFF;			
			font-size:20px;
			line-height: 58px;
			margin-top:0%;
			margin-bottom:0%;
			font-family: 'Oswald', sans-serif, Microsoft JhengHei;
		}

	#mainopt{
			margin-top:14%;
	}		

		/*model*/
		#model {
			min-height:1500px;
		}

		#wtb {
			margin-left:8%;
			width:100%;
			margin-top:5%;
		}

		.left {
			float: left;
			margin-left:4%;
			margin-top:0%;
			width: 100%;
			}
			
		#model .wtb-img {
			margin-left:3%;
			width:100%;
			float:left;
		}
		
		.name {
			text-align:center;
			font-size:15px;
			width:100%;
		}

#wtb .left a{    
  color:#fff;
  line-height: 46px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}

#model .left a:hover{    
  color:#CCC;
}

#model .hover {position:relative;}

#model .hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 1s ease-in-out ;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
transition-duration: 0.2s, 0.8s;
width:100%;
}

#model .hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時，透明度變0*/}

	#Transitions{
		width:350px;
		height:80px;
background: linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -moz-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -webkit-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
background: -o-linear-gradient(360deg, rgba(255, 97, 0, 1)49%, rgba(255, 94, 0, 0)100%); 
		opacity: 1;
		transition: all 0.4s ease-in-out;
				/*所有屬性都有過場動畫、過場動畫的運行時間、過場動畫型態*/
		-webkit-transition:all 0.4s ease-in-out; /* Safari and Chrome */
		-webkit-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(0px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
font-size: 14px;
font-weight:bold;
line-height:20px;
color:#FFF;
padding:20px;
	}
	
	#Transitions:hover{
		opacity: 1;
		transform:translate(-20px,0px);
-webkit-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-moz-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-o-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
-ms-transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 
transform: translate(-20px, 0px) rotate(0deg) skew(-20deg, 0deg) scale(1, 1); 	
color:#FFF;
}

.con-box1{
	width:30%;
	margin:0 5%;
}

        #M2ThermalGuard {
			background:url(../images/ThermalGuard_640.jpg) 50% 30px no-repeat;
			min-height:950px;
		}
		
		#M2ThermalGuard .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;
             padding-top:5%;
             width: 100%;
			 margin-top:90%;
        }

        #M2ThermalGuard .conbox3{
             display: inline-block;
             position: relative;
             width:100%; 
			 margin-top:3%;
        } 


 }