@charset "utf-8";
            @import url(https://fonts.googleapis.com/css?family=Titillium+Web:500);
            /* CSS Document */

			html, body{
				background: #010000;
				font-family: 'Titillium Web', sans-serif, '微軟正黑體', Microsoft JhengHei;
				font-family: 'Titillium Web', '微軟正黑體' !important;/*Firefox hack*/
				font-size: 22px;
				width: 100%;
			}

			a {
				text-decoration: none;
				color: #0CF;
			}

			h2 {
				padding-left: 6%;
				padding-top: 10%;
				color:#ff3300;
				font-size: 30px;
				letter-spacing:2px;	
				width: 90%;
				font-weight:bold;
				/*text-shadow:#F00 0px 0px 6px;*/
			}
			h3{ 
			    position:relative;
				margin-top:-5%;
				padding-bottom:3%;
				text-align:center;
				font-size: 40px;
				color: #FFF;
				font-weight:700px;
				text-shadow: #F60 0px 0px 6px;
				
			}
			
			p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 18px;
				line-height:28px;
				width: 90%;
				letter-spacing: 1px;

				
			}
			
			
			.content_01{
                background-image:url(../img/light.jpg);
                background-repeat:no-repeat;
                background-size:100%;
                
            }
			



			.v_rail{
                background-image:url(../img/v_rail/21_2.png);
                background-size:100%;
                background-repeat:no-repeat;
            }

             .ytcontainer {
					display: inline-block;
                    padding: 25px; 
                    width: 100%; 

            }

            #ytplayer {
                max-width: 1200px;  
                margin: 0 auto;
            }

            #ytplayer3 {
                max-width: 1200px;  
                margin: 0 auto;
            }





            .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 

            .embed-container iframe, .embed-container object, .embed-container .embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }






@media screen and (min-width: 1200px) {
    .contentleft{
    	padding-top:7%;
    	padding-left:10%;
    }

    .contentright{
    	padding-top:7%;
    	padding-right:10%;

    }

    .imgleft{

    }
	
	.imgright{
		padding-top:10%;
	}

	.content1{
		position:relative;
		left:5%;
	}

	.content1_1{
		min-height: 300px;
	}

	.content_2{
		max-width: 750px;
	}

	.content5{
		padding-top: 15%;
	}


	.body1{
		padding-left:10%;
		padding-right:10%;
		max-width: 1800px;
	}

	.body2{
		padding-left:10%;
		padding-right:10%;
		max-width: 1800px;
	}

	.body3{
		padding-left:9%;
		padding-right:9%;
		padding-top: 0%;
		max-width: 1800px;
		
		
	}

	.body4{
		padding-left:9%;
		padding-right:9%;
		max-width: 1800px;
	}

	.body5{
		padding-left:10%;
		padding-right:10%;
		background-image: url(..//img/xm300/36.png);
		background-size: 100%;
		max-width: 1800px;
	}

	.body6{
		padding-left:8%;
		padding-right:10%;
		padding-top: 5%;
		max-width: 1800px;
	}

	.body7{
		padding-top: 5%;
		padding-right: 9%;
		padding-left: 9%;
		max-width: 1800px;
	}

	.body8{
		padding-left: 7%;
		padding-right: 7%;
		max-width: 1800px;
	}


	.mouse_move{
		
	}

	.mobile_show{
		display: none;
	}

	.img1{
		padding-top: 0%;
	}

	.img2{
		padding-left:10%;
		padding-bottom:3%;
	}

	.content4{
		padding-top:5%;
	}


	 .ytcontainer {
					display: inline-block;
                    padding: 25px; 
                    width: 100%; 

            }

	

    
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .contentleft{
    	padding-top:4%;
    	padding-left:5%;
    }  

     .contentright{
     	padding-top:6%;
     	padding-right:5%;

    }

    .mouse_move{
		background-image: url(../img/xm300/14.png);
		background-size: 100%;
		height: 450px;
		background-repeat: no-repeat;
	}

    .imgleft{

    }
	
	.imgright{
		padding-top:15%;
	}

	.content1{
		position:relative;
		left:5%;
	}

	.content1_1{
		min-height: 250px;
	}

	.content_2{
		max-width: 600px;
	}

	.contnet3{
		min-height: 1500px;
	}

	.content5{
		padding-top: 5%;
	}



	.body1{
		padding-left:1%;
		padding-right:0%;
	}

	.body2{
		padding-left:0%;
		padding-right:0%;
		
	}

	.body3{
		padding-left:2%;
		padding-right:0%;
		padding-top: 5%;
		background-image: url(../img/xm300/13.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.body4{
		padding-left:0%;
		padding-right:0%;
	}

	.body5{
		padding-top: 2%;
		background-image: url(..//img/xm300/36.png);
		background-size: 100%;
	}

	.body6{
		padding-left:0%;
		padding-right:0%;
	}

	.body7{
		padding-top: 6%;
		padding-right: 0%;
		padding-left: 0%;
	}

	.body8{
		padding-left: 0%;
		padding-right: 0%;
	}

	.mobile_show{
		display: none;
	}

	.img1{
		padding-top: 15%;
	}

	.img2{
		padding-top:5%;
		
		margin: auto;
		position: relative;
		left: -20%;
	}


	 .ytcontainer {
					display: inline-block;
                    padding: 25px; 
                    width: 100%; 

            }


    
}


@media screen and (min-width: 768px) and (max-width: 992px) {
    .contentleft{
    	padding-top:4%;
    	padding-left:5%;
    }  

     .contentright{
     	padding-top:6%;
     	padding-right:5%;

    }

    .imgleft{

    }
	
	.imgright{
		padding-top:20%;
	}

	.v_rail{
                background-image:url(../img/v_rail/21_2.png);
                background-size: 1500px;
                background-repeat:no-repeat;
            }

    .content1{
		position:relative;
		left:0;
	}

	.content1_1{
		min-height: 250px;
	}

	.content_2{
		
	}

	.content3{
		min-height: 1300px;
	}

	.body1{
		padding-left:0%;
		padding-right:0%;
	}


	.body2{
		padding-left:0%;
		padding-right:0%;
		
	}

	.body3{
		padding-top:0%; 
		padding-left:0%;
		padding-right:0%;
	}

	.body4{
		padding-left:0%;
		padding-right:0%;
	}

	.body5{
		padding-top: 8%;

	}

	.body7{
		padding-top: 0%;
		padding-right: 0%;
		padding-left: 0%;
	}

	.body8{
		padding-left: 0%;
		padding-right: 0%;
	}

	.mobile_show{
		display: block;
	}

	.img1{
		padding-top: 0;
	}

	.img2{
		padding-right:10%;
		padding-bottom:0%;
		position: relative;
		left:-50px;
	}


	 .ytcontainer {
					display: inline-block;
                    padding: 25px; 
                    width: 100%; 

            }


    
}

@media screen and (max-width: 768px) {
    .contentleft{
    	padding-top:0%;
    	padding-left:0%;
    }   

     .contentright{
     	padding-top:0%;
     	padding-right:0%;

    }

    .imgleft{

    }
	
	.imgright{
		padding-top:20px;
	}

	.closer{
		position:relative;
		top:-30px;
	}

	
	.closer1{
		position:relative;
		top:-40px;
	}

	.closer2{
		position:relative;
		top:-50px;
	}

	.closer3{
		position:relative;
		top:-60px;
	}

	.closer4{
		position:relative;
		top:-70px;
	}

	.closer5{
		position:relative;
		top:-80px;
	}

	.closer6{
		position:relative;
		top:-90px;
	}

	.closer0{
		position:relative;
		top:-20px;
	}

	.v_rail{
                background-image:url(../img/v_rail/21.png);
                background-size: 1500px;
                background-repeat:no-repeat;
            }

    .content1{
		position:relative;
		left:0;
	}

	.content1_1{
		min-height: 250px;
	}


	.content_2{
		max-width: 600px;
	}

	/*.content3{
		min-height: 700px;
	}*/

	.body1{
		padding-left:0%;
		padding-right:0%;
	}

	.body2{
		padding-left:0%;
		padding-right:0%;
		
	}

	.body3{
		padding-left:0%;
		padding-right:0%;
		
	}

	.body4{
		padding-left:0%;
		padding-right:0%;
		
	}

	.body5{
		padding-top: 8%;
		padding-left:0%;
		padding-right:0%;
	}

	.body7{
		padding-top: 0%;
		padding-right: 0%;
		padding-left: 0%;
	}

	.body8{
		padding-left: 0%;
		padding-right: 0%;
	}

	.mobile_show{
		display: block;
	}


	.img1{
		padding-top: 0;
	}

	.img2{
		margin: auto;
		max-width: 160px;
		
	}


	 .ytcontainer {
					display: inline-block;
                    padding: 25px; 
                    width: 100%; 

            }



	p {
				margin-top:1%;
				padding-top: 1%;
				padding-left:1%;
				margin-left:5%;
				padding-bottom:1%;	
				color: #ccc;
				font-size: 18px;
				line-height:24px;
				width: 90%;
				letter-spacing: 1px;

				
			}

    
}