@charset "utf-8";
/* CSS Document */
.vision-132-1{
	width:100%;
	height:
	auto;
	position:
	absolute;
	left: 18px;
	margin: 0 auto;
	top: 480px;
	}
	.vision-132-1 img{
		/* max-width: 69%; */
		height:
		auto;
	}
.mayor-132-1{
	width:100%;
	height:
	auto;
	/* position: relative; */
	}
.mayor-block{
	height: auto;
	/* position: absolute; */
	/* right: 156px; */
	/* top: -50px; */
	position: relative;
	left: 350px;
	}
.mayor-pic{
	width:100%;
	padding-top: 65px;
	height:
	auto;
	z-index: 1;
	position: absolute;
	bottom: -463px;
	right: 0;
	/* top: 0px; */
	/* right: 0; */
	}
	.mayor-pic img{
		max-width:100%;
		height:auto;	
	}
.mayor-text{
	width:100%;
	height:
	auto;
	position:
	absolute;
	bottom: -464px;
	/* bottom: -565px; */
	right: 267px;
	z-index: 0;
	}
.text-name{
	width:283px;
	height:50px;
	background: url(../images/mayor-132-1/p2.png) top left no-repeat;
	font: 21px/50px 'Kanit', Arial, sans-serif;
	color:#fff;
	text-align:
	center;
	position: relative;
	right: -26px;
	}
.text-rank{
	width:306px;
	height:50px;
	background: url(../images/mayor-132-1/p3.png) top left no-repeat;
	font: 20px/57px 'Kanit', Arial, sans-serif;
	color:#000;
	text-align:
	center;
	}
@media (max-width: 374px) {  
.all-byn {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e33a3+0,111c68+27 */
 background: #0e33a3; /* Old browsers */
 background: -moz-linear-gradient(top,  #0e33a3 0%, #111c68 27%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #0e33a3 0%,#111c68 27%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #0e33a3 0%,#111c68 27%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e33a3', endColorstr='#111c68',GradientType=0 ); /* IE6-9 */
 height: 858px;
}
.vision-132-1 {
    position: relative;
    left: 0;
    top: 47px;
}
.vision-132-1 img{
	max-width:100%;
}
.mayor-block {
    position: relative;
    /* right: 0; */
    top: 0;
    left: 100px;
    /* text-align: center; */
}
.mayor-pic{
	right: 0;
	left: 60px;
	z-index: 0;
	top: 28px;
}
.mayor-pic img {
	max-width: 58%;
    height: auto;
}
.mayor-text {
    position: relative;
    bottom: -290px;
    right: 90px;
    z-index: 1;
}
}
@media (min-width: 375px) and (max-width: 419px) { 
.all-byn {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e33a3+0,111c68+27 */
 background: #0e33a3; /* Old browsers */
 background: -moz-linear-gradient(top,  #0e33a3 0%, #111c68 27%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #0e33a3 0%,#111c68 27%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #0e33a3 0%,#111c68 27%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e33a3', endColorstr='#111c68',GradientType=0 ); /* IE6-9 */
 height: 906px;
 margin-top: -185px;
}
.vision-132-1 {
    position: relative;
    left: 0;
    top: 47px;
    margin-bottom: 60px;
}
.vision-132-1 img{
	max-width:100%;
}
.mayor-block {
    position: relative;
    /* right: 0; */
    top: 0;
    left: 100px;
    /* text-align: center; */
}
.mayor-pic{
	right: 0;
	left: 6px;
	z-index: 1;
	top: 200px;
}
.mayor-pic img {
	max-width: 58%;
    height: auto;
}
.mayor-text {
    position: relative;
    bottom: 26px;
    right: 90px;
    z-index: 1;
}
}
@media (min-width: 420px) and (max-width: 575px) { 
.all-byn {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e33a3+0,111c68+27 */
 background: #0e33a3; /* Old browsers */
 background: -moz-linear-gradient(top,  #0e33a3 0%, #111c68 27%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #0e33a3 0%,#111c68 27%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #0e33a3 0%,#111c68 27%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e33a3', endColorstr='#111c68',GradientType=0 ); /* IE6-9 */
 height: 977px;
 margin-top: -185px;
}
.vision-132-1 {
    position: relative;
    left: 0;
    top: 47px;
}
.vision-132-1 img{
	max-width:100%;
}
.mayor-block {
    position: relative;
    /* right: 0; */
    top: -232px;
    left: 100px;
    /* text-align: center; */
}
.mayor-pic{
	top: 500px;
	right: 0;
	left: 16px;
	z-index: 1;
}
.mayor-pic img {
	max-width: 58%;
    height: auto;
}
.mayor-text {
    position: relative;
    /* bottom: -305px; */
	bottom: -125px;
    right: 90px;
    z-index: 1;
}
}
@media (min-width: 576px) and (max-width: 767px) { 
.mayor-block {
    right: 0;
    /* top: -15px; */
    left: 290px;
}
.vision-132-1 {
      left: 20px;
    top: 134px;
}
.vision-132-1 img{
	    max-width: 54%;
    height: auto;	
}
.all-byn {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e33a3+0,111c68+27 */
 background: #0e33a3; /* Old browsers */
 background: -moz-linear-gradient(top,  #0e33a3 0%, #111c68 27%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #0e33a3 0%,#111c68 27%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #0e33a3 0%,#111c68 27%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e33a3', endColorstr='#111c68',GradientType=0 ); /* IE6-9 */
 height: 977px;
}

.mayor-text{
	    right: 267px;	
}
.text-name{
	     right: -36px;
    top: 0px;
}


}
@media (min-width: 768px) and (max-width: 991px) { 
.mayor-block {
    right: 0;
    /* top: -15px; */
    left: 470px;
}
.vision-132-1 {
      left: 325px;
      top: 120px;
}
.all-byn {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e33a3+0,111c68+27 */
 background: #0e33a3; /* Old browsers */
 background: -moz-linear-gradient(top,  #0e33a3 0%, #111c68 27%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #0e33a3 0%,#111c68 27%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #0e33a3 0%,#111c68 27%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e33a3', endColorstr='#111c68',GradientType=0 ); /* IE6-9 */
 height: 1075px;
 margin-top: -185px;
}
.mayor-text{
	right: 348px;
	bottom: -465px;
}
 .mayor-pic{
  bottom: -463px;
  right: 351px;
 }
.text-name{
	    right: -306px;
   top: -50px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {

.mayor-block {
    right: 0;
    top: -105px;
    left: 130px;
}
.vision-132-1 {
    /* left: -60px; */
    /* top: 54px; */
    display: none;
}
		.all-byn{
	background:	url(../images/banner-38-1/bg-m.png) top center no-repeat;
	background-size: 130%;
	height: 402px;
	margin-top: -185px;
}
.vision-132-1 img{
	max-width:65%;
}
.mayor-pic img{
	max-width: 68%;
	}
	.mayor-text {
   right: 265px;
   /* bottom: -464px; */
   bottom: -535px;
}
.mayor-pic {
    position: relative;
    z-index: 1;
    margin-top: -214px;
    right: 68px;
}
}
@media (min-width: 1281px) and (max-width: 1366px) { 
.all-byn{
	background:	url(../images/banner-38-1/bg-m.png) top center no-repeat;
	background-size:100%;
	height: 555px;
	margin-top: -360px;
}
.mayor-text {
    right: 206px;
    top: -66px;
}
.mayor-block {
        right: 0;
        top: -14px;
        left: 160px;
}
.vision-132-1 {
    left: -32px;
    top: 339px;
}
.mayor-pic {
    position: relative;
    right: -20px;
    top: 233px;
    padding-top: 0px;
}
}
@media (min-width: 1367px) and (max-width: 1440px) { 
.all-byn{
	background:	url(../images/banner-38-1/bg-m.png) top center no-repeat;
	background-size:100%;
	height: 502px;
}
.mayor-text {
    right: 206px;
    /* top: 364px; */
	top: 115px;
}
.mayor-block {
        right: 0;
        top: -135px;
        left: 120px;
}
.vision-132-1 {
    left: -96px;
    top: 90px;
}
.mayor-pic {
    /* position: relative; */
    right: -70px;
}
}
@media (min-width: 1441px) and (max-width: 1600px) {
	.all-byn{
	background:	url(../images/banner-38-1/bg-m.png) top center no-repeat;
	background-size:100%;
	height: 620px;
	margin-top: -390px;
}
.mayor-text {
    right: 256px;
    /* top: 65px; */
	top: 105px;
}
.mayor-block {
        /* right: 139px; */
        left: 257px;
        top: -84px;
}

.mayor-pic {
    /* position: relative; */
    right: -15px;
}
.vision-132-1 {
    left: -12px;
    top: 400px;
}
}