/* ------------------------------------------------------------------
   
   [Table of contents]
   1. tablet landscape
   2. tablet portrait
   3. mobile landscape
   4. mobile portrait

------------------------------------------------------------------ */
/* [ 1. tablet landscape ] */

@media only screen and (max-width:1024px) {
 .container{
	 width:95%;
	 margin:0 auto;
	 }
}
/* [ 2. tablet potrait ] */

@media only screen and (min-width: 768px) and (max-width: 959px) {
img{max-width:100%; min-width:auto; height:auto;}
.main_div{width:96%; margin:0 auto;}
#logo{width:36%;}
#right{width:61%;}
.l{float:right;}
.l1{width:50%;}
.text_img{width:28%;}
.text{width:70%;}
.text1{width:100%;}
.pro{width:30%; margin:12px;}

}

/* [ 3. mobile landscape ] */

@media only screen and (min-width: 640px) and (max-width: 767px) {
img{max-width:100%; min-width:auto; height:auto;}
.main_div{width:96%; margin:0 auto;}
.left{float:none; width:100%;}
.right{float:none; width:100%; margin:0 auto;}
#logo{width:36%;}
#right{width:61%;}
.l{float:right;}
.l1{width:50%; padding:20px 5px;}
.text_img{width:28%;}
.text{width:70%;}
.text1{width:100%;}
.pro{width:30%; margin:10px;}
}


/* [ 3. mobile landscape ] */

@media only screen and (max-width: 480px) {
img{max-width:100%; min-width:auto; height:auto;}
.main_div{width:96%; margin:0 auto;}
.left{float:none; width:100%;}
.right{float:none; width:100%; margin:0 auto;}
#logo{width:100%; float:none; margin:5px auto; text-align:center;}
#right{width:100%; float:none; margin:5px auto;}
.l{float:right;}
.l1{width:50%; padding:20px 5px;}
.text_img{width:40%; float:none; margin:5px auto;}
.text{width:100%; float:none; margin:0 auto;}
.text1{width:100%;}
.pro{width:90%; margin:10px auto; float:none;}
.contact, .map{width:96%; margin:10px auto; float:none;}
}

/* [ 4. mobile potrait ] */

@media only screen and (max-width: 360px) {
img{max-width:100%; min-width:auto; height:auto;}
.main_div{width:96%; margin:0 auto;}
.left{float:none; width:100%;}
.right{float:none; width:100%; margin:0 auto;}
.w{float:none; width:98%; margin:0 auto; text-align:center;}
#logo{width:100%; float:none; margin:5px auto; text-align:center;}
#right{width:100%; float:none; margin:5px auto;}
.l, .menu_top{float:none; width:100%; text-align:center;}
.l1{width:100%; padding:20px 0px; float:none; text-align:center;}
.text_img{width:70%; float:none; margin:5px auto; padding-top:10px;}
.text{width:100%; float:none; margin:0 auto;}
.pro{width:90%; margin:10px auto; float:none;}
.wel{font-size:24px;}

}