.eservice-1 {
  margin: 0;
  padding: 0;
  background: #32afff
}
.e-service {
  position: relative;
  height: 600px;
  background: #fbf5eb;
  background: url(../../images/eservice-1/bg.jpg) top center no-repeat;
}

.e-service .top {
  margin: 0;
  padding: 0;
  color: #fff;
  padding-top: 35px;
  padding-bottom: 0;
  padding-left: 70px
}
.e-service .top2 {
  margin: 0;
  padding: 0;
  padding-top: 70px;
  text-align: right;
  padding-right: 9px
}
.e-service .mid {
  margin: 0
}
.e-service .mid .e-block {
  margin: 0;
  padding: 0
}
.e-service .mid .e-block .icon {
  margin: 0;
  padding: 0;
  padding-top: 18px;
  text-align: center
}
.e-service .personal {
  bottom: 0;
  position: relative;
  bottom: -54px;
  text-align: center
}
.e-service .personal img {
  max-width: 100%;
  height: auto
}
.e-service .mid .e-block .icon img {
  max-width: 100%;
  height: auto;
  transform: scale(1,1);
  transition: all .18s ease-in-out
}
.e-service .mid .e-block:hover .icon img {
  transform: scale(1.1,1.1);
  transition: all .18s ease-in-out
}
.e-service .mid .e-block .text {
  margin: 0;
  padding: 0;
  text-align: center;
  font: 16px/24px Kanit,Arial,sans-serif;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all .18s ease-in-out
}
.e-service .mid .e-block:hover .text {
  transition: all .18s ease-in-out;
  font: 18px/24px Kanit,Arial,sans-serif
}
@media (min-width:375px) and (max-width:419px) {
  .e-service .top2 {
    margin: 0;
    padding: 0;
    padding-top: 19px;
    text-align: right;
    padding-right: 9px
  }
  .e-service .personal img {
    max-width: 130%
  }
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
}
@media (min-width:420px) and (max-width:575px) {
  .e-service .top2 {
    margin: 0;
    padding: 0;
    padding-top: 18px;
    text-align: right;
    padding-right: 9px
  }
  .e-service .personal {
    bottom: 0;
    position: relative;
    bottom: 0;
    padding-top: 22px;
    text-align: center
  }
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
}
@media (min-width:768px) and (max-width:991px) {
  .e-service .top2 {
    margin: 0;
    padding: 0;
    padding-top: 0;
    text-align: right;
    padding-right: 9px
  }
  .e-service .personal img {
    max-width: 130%
  }
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
}
@media (min-width:992px) and (max-width:1199px) {
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
}
@media (min-width:1200px) and (max-width:1280px) {
  .e-service .personal {
    bottom: -224px
  }
}
@media (min-width:1281px) and (max-width:1366px) {
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
  .e-service .personal {
    bottom: -199px
  }

    .e-service .personal {
    bottom: -208px;
}
}
@media (min-width:1367px) and (max-width:1440px) {
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
  .e-service .personal {
    bottom: -177px
  }

    .e-service .personal {
    bottom: -186px;
}
}
@media (min-width:1441px) and (max-width:1469px) {
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
  .e-service .personal {
    bottom: -130px
  }

  .e-service .personal {
    bottom: -177px;
}
}

@media (min-width:1470px) and (max-width:1600px) {

  .e-service .personal {
    bottom: -138px;
}
}


@media (min-width:1601px) and (max-width:1880px) {
  .e-service .mid .e-block .icon img {
    max-width: 93%
  }
  .e-service .personal {
    bottom: -130px
  }

  .e-service .personal {
    bottom: -115px;
}
}

@media (min-width:320px) and (max-width:767px) {
  .e-service {
    position: relative;
    height: 303px;
    background: #fbf5eb;
    background: url(../../images/eservice-1/bg.jpg) top center no-repeat
  }
  .e-service .personal img {
    max-width: 100%;
    padding: 0 13px
  }
}