@charset "utf-8";
.mayor-140-1 {
  margin: 0;
  padding: 0;
  min-height: 200px;
  background: #fff top center no-repeat;
}
.mayor-140-1 .mayor-top {
  margin: 0;
  padding: 0;
  margin: 25px 0;
  color: #4cbb11;
  font: 28px/35px kanit, Arial, sans-serif;
  font-weight: 700;
}
.mayor-140-1 .mayor-mid {
  margin: 0;
  padding: 0;
  background: url(../images/mayor-140-1/bg.jpg) top center no-repeat;
  height: 271px;
  background-size: 100% 100%;
}
.mayor-140-1 .mayor-mid .mayor-pic {
  margin: 0;
  padding: 0;
  position: relative;
  top: -52px;
  left: 320px;
  z-index: 1;
}
.mayor-140-1 .mayor-mid .mayor-pic img {
  max-width: 100%;
  height: auto;
}
.n-block {
  position: absolute;
  left: 30px;
  top: 20px;
}
.n-title {
  height: auto;
  text-align: left;
  position: relative;
  font: 24px/24px kanit, Arial, sans-serif;
  color: #f6dd68;
  font-weight: 700;
}
.nt-v {
  height: auto;
  text-align: left;
  font: 18px/27px kanit, Arial, sans-serif;
  color: #fff;
  margin-top: 30px;
  position: relative;
  padding-left: 15px;
}
.mayor-140-1 .mayor-mid .mayor-text {
  margin: 0;
  padding: 5px 25px;
  width: 301px;
  height: auto;
  text-align: left;
  position: absolute;
  color: #131212;
  background: url(../images/mayor-140-1/bg-t.png) top center no-repeat;
  font: 21px/24px kanit, Arial, sans-serif;
  font-weight: lighter;
  top: 185px;
  left: 70px;
}
.mayor-140-1 .mayor-mid .position {
  color: #fff000;
}
.mayor-link {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #01824f;
}
.mayor-link .mayor-link-top {
  height: 44px;
  text-align: left;
  color: #fff;
  padding-left: 25px;
  margin-bottom: -26px;
  font: 23px/46px kanit, Arial, sans-serif;
  background: #61e14c;
  background: linear-gradient(42deg, #61e14c 0, #b7ec42 100%);
}
.mayor-link .download-mid {
  padding: 0;
  margin-top: -10px;
}
.mayor-link .list {
  width: 100%;
  position: relative;
  z-index: 1;
}
.mayor-link .list ul {
  padding: 26px 15px 25px 15px;
}
.mayor-link .list ul li {
  font: 17px/33px kanit, Arial, sans-serif;
  text-align: left;
  color: #000;
  padding-left: 25px;
  background: url(../images/mayor-140-1/bulet.png) 0 50% no-repeat;
}
.mayor-link .list ul li a {
  color: #fff;
}
.mayor-link .list ul li:hover {
  /* margin-left: -15px;
  background: #61e14c;
  background: linear-gradient(42deg, rgb(2 189 134) 0, rgb(1 130 79) 100%); */
}
.mayor-link .list ul li a:hover {
  color: #fff;
}
.rank-text {
  font: 15px/19px kanit, Arial, sans-serif;
  text-align: center;
  color: #000;
}
@media (max-width: 374px) {
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 0;
    font: 26px/28px thaisanslite, Arial, sans-serif;
    height: auto;
    left: 0;
    top: 214px;
  }
  .rank-text {
    padding-bottom: 30px;
  }
  .n-block {
    left: 10px;
  }
  .nt-v {
    font: 16px/27px kanit, Arial, sans-serif;
  }
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: -17px;
    left: 177px;
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 40%;
  }
}
@media (min-width: 375px) and (max-width: 413px) {
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 9px;
    left: 190px;
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 0;
    font: 22px/28px thaisanslite, Arial, sans-serif;
    height: auto;
    left: -10px;
    top: 160px;
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 37%;
  }
  .rank-text {
    padding-bottom: 30px;
    text-align: left;
  }
  .n-block {
    left: 10px;
  }
  .nt-v {
    font: 16px/27px kanit, Arial, sans-serif;
  }
}
@media (min-width: 414px) and (max-width: 575px) {
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 20px;
    left: 230px;
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 0;
    font: 26px/28px thaisanslite, Arial, sans-serif;
    height: auto;
    left: 0;
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 32%;
  }
  .rank-text {
    padding-bottom: 30px;
    text-align: left;
  }
  .n-block {
    left: 10px;
  }
  .nt-v {
    font: 16px/27px kanit, Arial, sans-serif;
  }
}
@media (min-width: 420px) and (max-width: 575px) {
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 13px;
    left: 220px;
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    font: 28px/28px thaisanslite, Arial, sans-serif;
    height: 106px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 27px;
    font: 30px/28px thaisanslite, Arial, sans-serif;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 9px;
    left: 458px;
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    font: 27px/24px thaisanslite, Arial, sans-serif;
    height: auto;
    padding-top: 0;
    left: 180px;
    padding: 5px 6px;
  }
  .rank-text {
    padding-bottom: 30px;
  }
  .n-block {
    left: 10px;
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 19%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .palad-pic img {
    max-width: 73%;
    height: auto;
  }
  .mayor-140-1 .mayor-mid {
    height: 356px;
  }
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 29px;
    left: 560px;
  }
  .rank-text {
    font: 16px/20px kanit, Arial, sans-serif;
  }
  .n-block {
    left: 265px;
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    left: 225px;
  }
}
@media (min-width: 1281px) and (max-width: 1366px) {
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 70%;
  }
  .mayor-140-1 .mayor-mid {
    height: 336px;
  }
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: -19px;
  }
  .rank-text {
    font: 15px/24px kanit, Arial, sans-serif;
  }
}