@charset "utf-8";
/* CSS Document */
body{
	font-family: 'Kanit', sans-serif;
	margin: auto;	
	padding: 0;
	max-width: 1024px;

	
}



.con-text{
	
	margin: 0;
	padding: 0;
	
	background-image: url("img/1x/Asset 2.png");
	background-size: 100%;

	
}

.con-text img{
	width: 40%;
	margin: 120px 0 0 50px;
	float: left;
}

.rigth{
	width: 40%;
	float: right;
	word-wrap: break-word;
	margin: 80px 30px 50px 50px;
}
.rigth li{
	list-style: none;
}
.rigth li h4{
	margin: 20px 100px;
}
.left-down{
	width: 25%;
	margin: 30px 30px 10px 60px;
	float: left;
	word-wrap: break-word;
	
}
.left-down li{
	list-style: none;
	
}

.rigth-down{
	width: 40%;
	float: right;
	word-wrap: break-word;
	margin: 0px 30px;
}

.clearfix{
	clear :both;
}



@media only screen and (max-width:900px){
	 /* For mobile phones: */
	
	.container{ 
		width: 108%;
		
	}
	.container .topbar {
	
	width: 80%;
		
	}
				.container .topbar .m{

					width: 25%;

				}
				.container .topbar .f{

					width: 20%;

				}
				.container .topbar .p{

					width: 15%;

				}
	
	.container  .mid{

		width: 90%;
		margin-right: 20px;
		margin-left: 20px;
		margin-top: 35%;
		

	}

	.container  .mid  a{
	
			margin-right:20px;
			font-size: 14px;
			margin-left: 20px;
			font-size: 14px;
	}
	
		.con-text img{
			width: 30%;
			margin: 20px 150px;
			float: none;
		}

		.rigth{
			width: 70%;
			float: none;
			margin: 20px auto;
		}
	
		.left-down{
			width: 70%;
			margin: 10px auto;
			float: none;
	

		}

		.rigth-down{
			width: 70%;
			float: none;
			margin: 50px auto;
			padding-bottom: 50px;
		}

}
@media only screen and (max-width:768px){
	 /* For mobile phones: */
	
	.container{ 
		width: 108%;
		
	}
	.container .topbar {
	
	width: 80%;
		
	}
				.container .topbar .m{

					width: 25%;

				}
				.container .topbar .f{

					width: 20%;

				}
				.container .topbar .p{

					width: 15%;

				}
	
	.container  .mid{

		width: 90%;
		margin-right: 20px;
		margin-left: 20px;
		margin-top: 35%;
		

	}

	.container  .mid  a{
	
			margin-right:20px;
			font-size: 14px;
			margin-left: 20px;
			font-size: 14px;
	}

	
}
	
@media only screen and (max-width:600px){
	 /* For mobile phones: */
	
	.container{ 
		width: 108%;
		
	}
	.container .topbar {
	
	width: 90%;
		
	}
				.container .topbar .m{

					width: 27%;

				}
				.container .topbar .f{

					width: 22%;

				}
				.container .topbar .p{

					width: 17%;

				}
	
	
	.container  .mid{

		width: 90%;
		margin-right: 20px;
		margin-top: 32%;

	}

	.container  .mid  a{
		margin-top: 10%;
	
			color: #000000;
			margin-right:20px;
		font-size: 10px;
		}
	.con-text{
	background-size: 220%;

	
}
	
}
@media only screen and (max-width:500px){
	 /* For mobile phones: */
	
	.container{ 
		width: 108%;
		
	}
	.container .topbar {
	
	width: 90%;
		
	}
				.container .topbar .m{

					width: 27%;

				}
				.container .topbar .f{

					width: 22%;

				}
				.container .topbar .p{

					width: 17%;

				}
	
	
	.container  .mid{

		width: 90%;
		margin-right: 20px;
		margin-top: 32%;

	}

	.container  .mid  a{
		margin-top: 10%;
	
			color: #000000;
			margin-right:20px;
		font-size: 10px;
		}
	.con-text img{
		width: 50%;
	
	}


	
}