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

.mayor-block{
	margin:0;
	padding:0;
	height:508px;
	position: relative;
	margin-top: 56px;z-index:2;
	background:url(../images/mayor/bg.png?v=1) top center no-repeat;
}

.mayor-block .mayor{
	position:relative;
}
.mayor-block .mayor .pic{
	margin:0;
	padding:0;
	text-align:center;
}
.mayor-block .mayor .pic img{
	max-width:100%;
	height:auto;
}
.mayor-block .mayor .name{
	margin:0;
	padding:0;
	/* margin-top: -6px; */padding-top:10px;
	text-align:
	center;
	font: 17px/22px 'Kanit', Arial, sans-serif;
}
.mayor-block .mayor .name .name-bold{
	font: 21px/22px 'Kanit', Arial, sans-serif;
	font-weight:bold;
}

.mayor-block .rong1{
	position:relative;
}
.mayor-block .rong1 .pic{
	margin:0;
	margin-top: 0px;
	text-align: center;
	padding-left: 120px;
}
.mayor-block .rong1 .pic img{
	max-width:100%;
	height:auto;
}
.mayor-block .rong1 .name{
	margin:0;
	padding:0;
	padding-top:10px;
	padding-left: 82px;
	text-align:
	center;
	font: 17px/22px 'Kanit', Arial, sans-serif;
}
.mayor-block .rong1 .name .name-bold{
	font: 21px/22px 'Kanit', Arial, sans-serif;
	font-weight:bold;
}


.mayor-block .rong2{
	position:relative;
}
.mayor-block .rong2 .pic{
	margin:0;
	margin-top: 0px;
	padding-right: 70px;
	text-align: center;
}
.mayor-block .rong2 .pic img{
	max-width:100%;
	height:auto;
}
.mayor-block .rong2 .name{
	margin:0;
	padding:0;
	padding-top:10px;
	padding-right: 110px;
	text-align:
	center;
	font: 17px/22px 'Kanit', Arial, sans-serif;
}
.mayor-block .rong2 .name .name-bold{
	font: 21px/22px 'Kanit', Arial, sans-serif;
	font-weight:bold;
}
@media (max-width: 374px) { 
.mayor-block{
	    margin-top: -5px;
			height:
	auto;
	padding-bottom: 40px!important;	
}
.mayor-block .mayor .name{
	font: 15px/22px 'Kanit', Arial, sans-serif;	
}
.mayor-block .rong1 .pic{
	padding-left: 0px;	
}
.mayor-block .rong1 .name{
	padding-left: 0;
    color: #fff;	
}
.mayor-block .rong2 .pic{
	padding-right: 0px;	
}
.mayor-block .rong2 .name{
	padding-right: 0;
    color: #fff;	
}
.mayor-block .col-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}

@media (min-width: 375px) and (max-width: 575px) { 
.mayor-block{
	height:
	auto;
	padding-bottom: 40px!important;
	margin-top: 5px;
}
.mayor-block .rong1 .pic{
	padding-left: 0px;	
}
.mayor-block .rong1 .name{
	padding-left: 0;
    color: #fff;	
}
.mayor-block .rong2 .pic{
	padding-right: 0px;	
}
.mayor-block .rong2 .name{
	padding-right: 0;
    color: #fff;	
}
.mayor-block .col-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
 }
@media (min-width: 576px) and (max-width: 767px) { 
.mayor-block{
	height:auto;
	padding-bottom: 40px!important;
}
.mayor-block .rong1 .pic{
	padding-left: 0px;	
}
.mayor-block .rong1 .name{
	padding-left: 0;
    color: #fff;	
}
.mayor-block .rong2 .pic{
	padding-right: 0px;	
}
.mayor-block .rong2 .name{
	padding-right: 0;
    color: #fff;	
}
 }
@media (min-width: 768px) and (max-width: 991px) { 
.mayor-block{
	height:
	auto;
	padding-bottom: 40px!important;
}
.mayor-block .rong1 .pic{
	padding-left: 0px;	
}
.mayor-block .rong1 .name{
	padding-left: 0;
    color: #fff;	
}
.mayor-block .rong2 .pic{
	padding-right: 0px;	
}
.mayor-block .rong2 .name{
	padding-right: 0;
    color: #fff;	
}
 }
@media (min-width: 992px) and (max-width: 1199px) { 
.mayor-block .rong1 .pic{
	padding-left: 0px;	
}
.mayor-block{
	    background-size: 140% 100%;	
}
.mayor-block .rong1 .name{
	padding-left: 0px;
	color: #fff;
}
.mayor-block .rong2 .name{
	    padding-right: 60px;
	    color: #fff;
}
.mayor-block .mayor .name{
	    font: 16px/17px 'Kanit', Arial, sans-serif;
	    color: #fff;
}
 }
 @media (min-width: 1200px) and (max-width: 1280px) { 
	... 
}
@media (min-width: 1281px) and (max-width: 1366px) { 
	... 
}
@media (min-width: 1367px) and (max-width: 1440px) { 
	... 
}
@media (min-width: 1441px) and (max-width: 1600px) { 
	...
}