@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: 5%;
				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;
            }

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

	.content2{
		position:relative;
		right:5%;
	}


	.body1{
		background-image: url(../img/modular_design/7.png);
		background-size: cover;
		width:100%; 
		margin:auto;
	}

	.body2{
		background-image: url(../img/modular_design/11.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;

	}

	.body3{

	}

	.mobile_show{
		display: none;
	}

	.img1{
		padding-top: 10%;
	}

	.content4{
		padding-top:5%;
	}

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

    
}

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

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

    }

    .imgleft{

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

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

	.content1_1{
		min-height: 250px;
	}

	.content2{
		position:relative;
		right:5%;
	}
	.contnet3{
		min-height: 1500px;
	}



	.body1{
		background-image: url(../img/modular_design/7.png);
		background-size: 100%;
		width:100%; 
		margin:auto;
	}

	.body2{
		background-image: url(../img/modular_design/11.png);
		background-size: cover;
		width: 100%;
		
	}

	.mobile_show{
		display: none;
	}

	.img1{
		padding-top: 10%;
	}


    
}


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

	.content2{
		position:relative;
		right:0;
	}

	.content3{
		min-height: 1300px;
	}

	.body1{
		background-image: url(../img/modular_design/8.png);
		background-size: cover;
		width:100%; 
		margin:auto;
	}


	.body2{
		background-image: url(../img/modular_design/12.png);
		background-size: cover;
		width: 100%;
		
	}

	.mobile_show{
		display: none;
	}

	.img1{
		padding-top: 0;
	}


    
}

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

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


	.content2{
		position:relative;
		right:0;
	}

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

	.body1{
		background-image: url(../img/modular_design/7.png);
		background-size: cover;
		width:100%; 
		margin:auto;
	}

	.body2{
		background-image: url();
		background-size: 100%;
		width: 100%;
		
	}

	.mobile_show{
		display: block;
	}


	.img1{
		padding-top: 0;
	}

    
}