@charset "utf-8";
/* CSS Document */

.mayor{
	margin:0;
	padding:0;
	height:558px;
	position:relative;
	background:url(../../images/content/mayor/bg.jpg) top center no-repeat;	
}
.mayor .mayor-block{
	width:800px;
	height:558px;
	position:absolute;
	top:0;
	left:252px;
}
.mayor .mayor-pic{
	position:absolute;
	left:0;
	top: 34px;
}
.mayor .mayor-pic img{
	width:100%;
	
}
.mayor .mayor-text{
	position:absolute;
	left: -55px;
	top: 34px;
}
.mayor .mayor-vision{
	margin-top:180px;
	padding-bottom:20px;
	color: #ffffff;
	font: 16px/24px 'Kanit', Arial, sans-serif;
	background:url(../../images/content/mayor/line.jpg) bottom left no-repeat;
}
.mayor .mayor-name{
	padding-top:20px;
	font: 35px/35px 'Kanit', Arial, sans-serif;
	color: #f3ff40;
}
.mayor .mayor-position{
	font: 16px/26px 'Kanit', Arial, sans-serif;
}
@media (max-width: 374px) { ... }
@media (min-width: 375px) and (max-width: 419px) { 
.mayor .mayor-name {
  
font: 29px/35px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-vision {
   
font: 13px/24px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-text {
    position: absolute;
    left: -226px;
    top: 154px;
} 
.mayor .mayor-pic img{
	width: 56%;
	}
	.mayor .mayor-pic {
    position: absolute;
    left: -190px;
    top: 34px;
}	}
@media (min-width: 420px) and (max-width: 575px) { 
.mayor .mayor-pic {
    position: absolute;
    left: -190px;
    top: 34px;
}
.mayor .mayor-text {
    position: absolute;
    left: -225px;
    top: 154px;
} 
.mayor .mayor-pic img{
	width: 51%;
	}
		}
@media (min-width: 576px) and (max-width: 768px) {
	.mayor .mayor-name {
  
font: 29px/35px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-vision {
   font: 16px/24px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-text {
    position: absolute;
    left: 84px;
    top: 4px;
} 
.mayor .mayor-pic img{
	width: 97%;
	}
	.mayor .mayor-pic {
    position: absolute;
    left: -220px;
    top: 34px;
} }
@media (min-width: 992px) and (max-width: 1199px) { .mayor .mayor-name {
  
font: 29px/35px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-vision {
   font: 21px/24px 'Kanit', Arial, sans-serif;
}
.mayor .mayor-text {
    position: absolute;
    left: -226px;
    top: 154px;
} 
.mayor .mayor-pic img{
	width: 99%;
	}
	.mayor .mayor-pic {
    position: absolute;
    left: -190px;
    top: 34px;
}
	 	}
@media (min-width: 1200px) and (max-width: 1280px) { .mayor .mayor-text {
    position: absolute;
    left: -225px;
    top: 154px;
} 
.mayor .mayor-pic img{
	width:100%;
	}}
@media (min-width: 1281px) and (max-width: 1366px) { 
.mayor .mayor-pic{
	    left: -50px;	
}
.mayor .mayor-text {
    position: absolute;
    left: -35px;
    top: 34px;
}
 
 .mayor .mayor-pic img{
	width:100%;
	}
		}
@media (min-width: 1367px) and (max-width: 1440px) { ... }
@media (min-width: 1441px) and (max-width: 1600px) { ... }