@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: 50px;
  left: 305px;
  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: 313px;
  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: 25px
}
.mayor-140-1 .mayor-mid .position {
  color: #fff000
}
.mayor-link {
  margin: 0;
  padding: 0;
  height: 149px;
  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: #ff5400;
  background: -moz-linear-gradient(left,#ff5400 0,#ff9e00 100%);
  background: -webkit-linear-gradient(left,#ff5400 0,#ff9e00 100%);
  background: linear-gradient(to right,#ff5400 0,#ff9e00 100%)
}
.mayor-link .download-mid {
  padding: 0;
  margin-top: -10px
}
.mayor-link .list {
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 26px
}
.mayor-link .list ul li {
  font: 17px/45px kanit,Arial,sans-serif;
  text-align: left;
  color: #000;
  padding-left: 60px;
  background: url(../images/mayor-140-1/bulet.png) 3% 50% no-repeat
}
.mayor-link .list .normal-1 {
  background: url(../images/mayor-140-1/normal-1.png) 0 50% no-repeat
}
.mayor-link .list .normal-2 {
  background: url(../images/mayor-140-1/normal-2.png) 0 50% no-repeat
}
.mayor-link .list ul li a {
  color: #fff
}
.mayor-link .list ul li:hover {
  padding-left: 60px;
  background: url(../images/mayor-140-1/hover.png) 0 50% no-repeat
}
.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-pic {
    top: 56px;
    left: 0;
    right: 0;
    text-align: right
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 0;
    font: 20px/24px kanit,Arial,sans-serif;
    height: auto;
    left: -10px;
    top: 160px
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 46%
  }
  .rank-text {
    padding-bottom: 30px;
    text-align: left;
    font: 9px/19px kanit,Arial,sans-serif
  }
  .n-block {
    left: 10px
  }
  .nt-v {
    font: 16px/27px kanit,Arial,sans-serif
  }
}
@media (min-width:375px) and (max-width:413px) {
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 46px;
    left: 0;
    right: 0;
    text-align: right
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    padding-top: 0;
    font: 21px/24px kanit,Arial,sans-serif;
    height: auto;
    left: -10px;
    top: 160px
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 46%
  }
  .rank-text {
    padding-bottom: 30px;
    text-align: left;
    font: 10px/19px kanit,Arial,sans-serif
  }
  .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: 0;
    right: 0;
    text-align: right
  }
  .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: 45%
  }
  .rank-text {
    padding-bottom: 30px;
    text-align: left;
    font-size: 11px
  }
  .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: 20px;
    left: 0;
    right: 0;
    text-align: right
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    font: 23px/24px kanit,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: -43px;
    left: -77px;
    right: 0;
    text-align: right
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    font: 27px/24px kanit,Arial,sans-serif;
    height: auto;
    padding-top: 0;
    left: 150px;
    width: auto;
    padding: 5px 6px
  }
  .rank-text {
    padding-bottom: 30px
  }
  .n-block {
    left: 10px
  }
  .mayor-140-1 .mayor-mid .mayor-pic {
    top: 25px
  }
  .mayor-140-1 .mayor-mid .mayor-pic img {
    max-width: 28%
  }
  .mayor-link .list ul li {
    background: url(../images/mayor-140-1/bulet.png) 3% 50% no-repeat
  }
  .mayor-link .list ul li:hover {
    margin-left: -15px;
    padding-left: 60px;
    background: url(../images/mayor-140-1/hover.png) 2% 50% no-repeat
  }
}
@media (min-width:992px) and (max-width:1199px) {
  .mayor-link .list ul li {
    background: url(../images/mayor-140-1/bulet.png) 2% 50% no-repeat
  }
  .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: 0;
    right: 0;
    text-align: center;
    padding-left: 200px
  }
  .rank-text {
    font: 16px/20px kanit,Arial,sans-serif
  }
  .n-block {
    left: 265px
  }
  .mayor-140-1 .mayor-mid .mayor-text {
    left: 175px;
    font: 27px/24px kanit,Arial,sans-serif;
    width: auto
  }
}
@media (min-width:1281px) and (max-width:1366px) {
  .mayor-140-1 .mayor-mid .mayor-text {
    left: 15px
  }
  .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: 12px;
    left: 261px
  }
  .rank-text {
    font: 15px/24px kanit,Arial,sans-serif
  }
}
@media (min-width:1367px) and (max-width:1440px) {
  .mayor-140-1 .mayor-mid .mayor-text {
    left: 5px
  }
  .mayor-140-1 .mayor-mid .mayor-pic {
    left: 279px
  }
}@media (min-width: 1441px) and (max-width: 1600px) {}