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

.sub {
  position  : relative;
  margin-top: -29px;
  background: url(../images/sub-38-1/bg-sub.png) top center no-repeat;
}

.sub .btn {
  display            : inline-block;
  font-weight        : 400;
  text-align         : center;
  white-space        : nowrap;
  vertical-align     : middle;
  -webkit-user-select: none;
  -moz-user-select   : none;
  -ms-user-select    : none;
  user-select        : none;
  border             : 1px solid transparent;
  padding            : 0.375rem 0.75rem;
  font               : 16px/22px "anakotmai-medium", Arial, sans-serif;
  border-radius      : 0.25rem;
  transition         : background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.top-name {
  margin-top: 20px;
  display   : block;
  width     : 100%;
  height    : 99px;
  font      : 24px/75px "anakotmai-medium", Arial, sans-serif;
  color     : #000;
  text-align: center;
}

.suball {
  float  : left;
  display: block;
  width  : 100%;
  height : auto;
}

.subbody {
  margin        : 0 auto;
  /*padding     :35px 0px;*/
  display       : block;
  /*width       :670px;*/
  width         : 100%;
  /* margin-top : 59px; */
  min-height    : 500px;
  padding-bottom: 40px;
}

@media (max-width: 374px) {
  .sub {
    margin-top     : -236px;
    background-size: 265%;
  }

  .top-name {
    height: 35px;
    font  : 20px/35px "anakotmai-medium", Arial, sans-serif;
  }

  .subbody {
    margin-top: 20px;
  }
}

@media (min-width: 375px) and (max-width: 419px) {
  .sub {
    margin-top     : 0;
    background-size: 330%;
  }

  .top-name {
    height    : 35px;
    font      : 20px/35px "anakotmai-medium", Arial, sans-serif;
    margin-top: 10px !important;
  }

  .subbody {
    margin-top: 20px;
  }
}

@media (min-width: 420px) and (max-width: 575px) {
  .sub {
    margin-top     : 0;
    background-size: 320%;
  }

  .top-name {
    height    : 37px;
    font      : 20px/37px "anakotmai-medium", Arial, sans-serif;
    margin-top: 13px !important;
  }

  .subbody {
    margin-top: 20px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .sub {
    margin-top     : 0;
    background-size: 485%;
  }

  .top-name {
    height    : 37px;
    font      : 20px/37px "anakotmai-medium", Arial, sans-serif;
    margin-top: 22px !important;
  }

  .subbody {
    margin-top: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .sub {
    background-size: 159%;
    margin-top     : 0;
  }

  .top-name {
    height: 37px;
    font  : 22px/37px "anakotmai-medium", Arial, sans-serif;
  }

  .subbody {
    margin-top: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .sub {
    background-size: 149%;
    margin-top     : 0;
  }

  .top-name {
    height: 53px;
    font  : 26px/53px "anakotmai-medium", Arial, sans-serif;
  }

  .subbody {
    margin-top: 30px;
  }
}

@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) {}