@import url(./fonts.css);
body {
  font-family: "ThSarabun", sans-serif;
  font-size: 16px; }

html,
body {
  height: 100%; }

a {
  color: #000; }

.d-block {
  display: block; }

a:hover {
  text-decoration: none;
  color: #000; }

.text-bold {
  font-weight: bold !important; }

.text-primary {
  color: #a2917d; }

.d-flex {
  display: flex; }

.flex-wrap {
  flex-wrap: wrap; }

.justify-content-between {
  justify-content: space-between; }

.justify-content-center {
  justify-content: center; }

.align-items-center {
  align-items: center; }

.align-items-end {
  align-items: flex-end; }

.flex-column {
  flex-direction: column; }

.divider {
  display: block;
  clear: both;
  width: 100%;
  min-width: 100%;
  height: 1px;
  margin: 24px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  background: #e8e8e8; }

.divider.horizontal {
  margin: 24px 0; }

.fw-normal {
  font-weight: 400 !important; }

.w-25 {
  width: 25% !important; }

.w-100 {
  width: 100% !important; }

.p-0 {
  padding: 0 !important; }

.p-12 {
  padding: 12px; }

.p-24 {
  padding: 24px; }

.mt-1 {
  margin-top: 0.5rem; }

.m-0 {
  margin: 0 !important; }

.my-12 {
  margin-top: 12px;
  margin-bottom: 12px; }

.my-12 {
  margin-top: 12px;
  margin-bottom: 12px; }

.my-24 {
  margin-top: 24px;
  margin-bottom: 24px; }

.my-48 {
  margin-top: 48px;
  margin-bottom: 48px; }

.mt-12 {
  margin-top: 12px; }

.mt-24 {
  margin-top: 24px; }

.pt-24 {
  padding-top: 24px; }

.mt-48 {
  margin-top: 48px; }

.mb-12 {
  margin-bottom: 12px !important; }

.mb-24 {
  margin-bottom: 24px !important; }

.mb-48 {
  margin-bottom: 48px !important; }

.mr-2 {
  margin-right: 1rem; }

.mr-4 {
  margin-right: 3rem; }

.ml-2 {
  margin-left: 1rem; }

.ml-4 {
  margin-left: 3rem; }

.mr-0 {
  margin-right: 0; }

.btn-main {
  font-size: 23px;
  background: #a2917d;
  color: #fff;
  padding: 4px 25px 0 25px;
  line-height: 33px;
  border-radius: 2px;
}
  .btn-main:hover {
    color: #fff;
    background: #795d3d;
}

.btn-all {
  font-size: 23px;
  border-radius: 0;
  background: #998675;
  color: #fff;
  padding: 4px 25px 0 25px;
  line-height: 33px;
  border-radius: 2px;
  border-top: 2px solid transparent; }
  .btn-all:hover {
    color: #fff;
    background: #795d3d;
 }

footer {
  margin-top: 1rem; }
  footer .partner {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem; }
    footer .partner:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-top-color: #fff;
      border-bottom: 0;
      margin-left: -36px;
      margin-bottom: -36px; }
    footer .partner:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      z-index: 9;
      border: 6px solid transparent;
      border-top-color: #998675;
      border-bottom: 0;
      margin-left: -22px;
      margin-bottom: -22px; }
  @media screen and (max-width: 768px) {
    footer .partner {
      padding: 0 23px; }
      footer .partner:after {
        margin-left: -23px;
        margin-bottom: -35px; }
      footer .partner:before {
        margin-left: -9px;
        margin-bottom: -22px; } }
  footer .footer {
    background: #998675; }
    @media screen and (max-width: 768px) {
      footer .footer .desktop-menus {
        display: none; } }
    footer .footer .address {
      display: flex;
      flex-direction: column;
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold; }
      footer .footer .address .name {
        margin-bottom: 1rem; }

.bottom-footer-wrapper {
  background: #362f2d;
  color: #fff; }

.bottom-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0; }
  .bottom-footer .social a {
    margin-left: 0.5rem;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid white;
    color: white;
    line-height: 53px;
    width: 47px;
    height: 47px;
    text-align: center;
    display: inline-block;
    transition: 0.5s; }

@media screen and (max-width: 768px) {
  .bottom-footer {
    justify-content: center;
    flex-direction: column-reverse; } }

.footer {
  padding: 40px 0;
  color: #fff;
  font-size: 1.2rem; }
  .footer .link-header {
    font-weight: bold;
    margin-bottom: 1rem; }
  .footer .footer-link {
    color: #fff;
    display: block;
    line-height: 1.25; }
    .footer .footer-link:hover {
      color: #795d3d; }

.circle {
  cursor: pointer;
  padding: 8px 13px;
  font-size: 20px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  border: solid 1px; }

.btn-lg {
  font-size: 25px; }

.text-sm {
  font-size: 16px; }

.text-success {
  color: #a3cf5d; }

.text-danger {
  color: #a2917d; }

.warning {
  background: #faad3b; }

.danger {
  background: #a2917d; }

.success {
  background: #a3cf5d; }

.pr-0 {
  padding-right: 0 !important; }

.readmore {
  margin-top: 1rem; }
  .readmore span {
    cursor: pointer;
    border-bottom: 1px solid #363636; }

.mx-0 {
  margin-left: 0;
  margin-right: 0; }

.mlr-auto {
  margin: 0 auto; }

.pagination li > a {
  position: relative;
  float: left;
  padding: 6px 12px;
  font-size: 24px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  border: none; }

.pagination li > a > span {
  line-height: 1.9;
  font-size: 21px; }

.pagination li > a.active {
  color: #fff;
  background-color: #000;
  border: none; }

.pagination li > a:hover {
  background-color: transparent; }

.navbar-mobile.navbar-fixed-top {
  background: rgba(255, 255, 255, 0.9) !important; }

.navbar-mobile.navbar-default .navbar-nav > li.active > a {
  color: white;
  border-bottom: 3px solid #ec1c23;
  background-color: #ff3838; }

.navbar-mobile .navbar-header .navbar-toggle:hover {
  background-color: transparent; }

.navbar-mobile .navbar-header button {
  border: none;
  margin-top: 3px;
  margin-bottom: 3px; }
  .navbar-mobile .navbar-header button:focus, .navbar-mobile .navbar-header button:active, .navbar-mobile .navbar-header button:hover {
    background-color: transparent; }

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: transparent;
  border: 2px solid #fff; }

.carousel-indicators li.active {
  background: #fff; }

.carousel-caption {
  text-align: left;
  width: 35%;
  margin-bottom: 1rem; }
  .carousel-caption .caption-title {
    font-family: "ThSarabun";
    font-size: 4.5rem;
    font-weight: bold;
    line-height: 33px; }
  .carousel-caption .caption-subtitle {
    font-family: "ThSarabun";
    font-size: 3rem;
    line-height: 40px;
    margin-bottom: 1rem; }
  .carousel-caption .caption-text {
    font-family: "ThSarabun";
    font-size: 1.7rem;
    line-height: 30px; }
  .carousel-caption .caption-readmore {
    font-family: "ThSarabun"; }

.fa-times-thin:before {
  content: "\00d7"; }

.mobile-footer .btn-main {
  font-size: 19px;
  background: #4a3f3b;
  padding: 0px 19px 0 19px; }
  .mobile-footer .btn-main:focus, .mobile-footer .btn-main:active {
    box-shadow: none;
    outline: none; }

.main-header {
  color: #fff; }

.main-nav {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%; }
  .main-nav .co-logo-mobile {
    display: none; }
  @media screen and (max-width: 768px) {
    .main-nav .navbar {
      padding: 0.5rem 0; }
    .main-nav .fineart-logo {
      width: 50px; }
    .main-nav .co-logo-mobile {
      background: linear-gradient(to right, #ffe7b8 0%, #b99654 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 1.1rem;
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
      margin-left: 1rem; }
      .main-nav .co-logo-mobile .th-name {
        display: block;
        width: 100%;
        line-height: 1; }
      .main-nav .co-logo-mobile .en-name {
        display: block;
        width: 100%;
        line-height: 1; } }

.co-logo {
  background: linear-gradient(to right, #ffe7b8 0%, #b99654 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.1rem;
  font-weight: bold;width: 70%; line-height:0.9em; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .co-logo {
    font-size: 2rem; } }

.bg-transparent {
  background: transparent; }

.navbar-wrapper {
  width: 100%;
  padding-left: 3rem; }
  .navbar-wrapper .top-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1.2px solid #3e3f40; }
  .navbar-wrapper .bottom-navbar {
    padding-top: 0.5rem;
    font-size: 18px; }
    .navbar-wrapper .bottom-navbar .nav-link {
      font-family: "adman", sans-serif;
      color: #fff;
      transition: all 0.3s; }
      .navbar-wrapper .bottom-navbar .nav-link:hover {
        color: #d3c75e; }

#sidebar,
#footer-sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  right: -250px;
  height: 100vh;
  z-index: 9999999;
  background: #362f2d;
  color: #fff;
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); }

#sidebar.active,
#footer-sidebar.active {
  right: 0; }

.dismiss {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 31px;
  text-align: center;
  background: transparent;
  position: absolute;
  top: 6px;
  left: 0px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  color: #867b71; }

.dismiss:hover {
  color: #2f2a28; }

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out; }

.overlay.active {
  display: block;
  opacity: 1; }

#sidebar .sidebar-header,
#footer-sidebar .sidebar-header {
  padding: 20px;
  background: #474039; }

#sidebar ul.components {
  padding: 0 0 20px 0; }

#footer-sidebar ul.components {
  padding: 50px 0; }

#sidebar ul p,
#footer-sidebar ul p {
  color: #fff;
  padding: 10px; }

#sidebar ul li a,
#footer-sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
  color: #fff; }

#footer-sidebar ul li .title {
  font-weight: bold;
  font-size: 1.1em;
  display: block;
  color: #fff;
  padding: 7px 24px;
  background: #2f2a28; }

#footer-sidebar ul li a {
  padding: 7px 24px; }

#sidebar ul li {
  border-bottom: 1px solid #3c3c3c; }

#sidebar ul li a {
  font-family: "adman";
  text-align: center; }

#sidebar ul li a:hover,
#footer-sidebar ul li a:hover {
  color: #fff;
  background: #2f2a28; }

#sidebar ul li.active > a,
#footer-sidebar ul li.active > a,
a[aria-expanded="true"] {
  color: #fff;
  background: #2f2a28; }

a[data-toggle="collapse"] {
  position: relative; }

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%); }

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #474039; }

ul.CTAs {
  padding: 20px; }

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px; }

a.download {
  background: #474039;
  color: #fff; }

a.article,
a.article:hover {
  background: #474039 !important;
  color: #fff !important; }

.navbar-toggler {
  border-color: transparent !important;
  color: #fff !important; }
  .navbar-toggler:focus {
    outline: none; }

.nav-action {
  display: flex;
  align-items: center; }
  @media screen and (max-width: 768px) {
    .nav-action {
      flex-direction: row-reverse;
      align-items: flex-start;
      justify-content: space-between;
      padding: 6px 12px 0px 12px;
      margin-bottom: 0.5rem;
      margin-top: 1.5rem;
      background: #2f2a28; }
      .nav-action .change-fontsize,
      .nav-action .change-fontcolor {
        margin-left: 0rem !important; }
        .nav-action .change-fontsize .small,
        .nav-action .change-fontcolor .small {
          margin-left: 0 !important;
          margin-right: 0.5rem !important;
          font-size: 19px; }
        .nav-action .change-fontsize .medium,
        .nav-action .change-fontcolor .medium {
          margin-left: 0 !important;
          margin-right: 0.5rem !important;
          font-size: 23px; }
        .nav-action .change-fontsize .large,
        .nav-action .change-fontcolor .large {
          margin-left: 0 !important;
          margin-right: 0.5rem !important;
          font-size: 26px; }
        .nav-action .change-fontsize .black,
        .nav-action .change-fontcolor .black {
          margin-left: 0 !important;
          margin-right: 0.5rem !important; }
        .nav-action .change-fontsize .white,
        .nav-action .change-fontcolor .white {
          margin-left: 0 !important;
          margin-right: 0.5rem !important;
          color: #fff; }
        .nav-action .change-fontsize .yellow,
        .nav-action .change-fontcolor .yellow {
          margin-left: 0 !important;
          margin-right: 0.5rem !important;
          color: #f1c644; } }
  .nav-action .change-fontsize {
    margin-left: 1rem; }
    .nav-action .change-fontsize span { padding-right:10px; padding-top:10px;
      cursor: pointer;
      display: inline-block;
      transform: scale(0.8);
      transition: all 150ms ease-in-out; }
      .nav-action .change-fontsize span:hover {
        transform: scale(1); }
    .nav-action .change-fontsize .small {
      margin-left: 0.5rem;
      font-size: 19px; }
    .nav-action .change-fontsize .medium {
      margin-left: 0.5rem;
      font-size: 23px; }
    .nav-action .change-fontsize .large {
      margin-left: 0.5rem;
      font-size: 26px; }
  .nav-action .change-fontcolor {
    margin-left: 1rem; }
    .nav-action .change-fontcolor span {
      background: #4d4d4d;
      cursor: pointer;
      transform: scale(0.8);
      transition: all 150ms ease-in-out; }
      .nav-action .change-fontcolor span {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 32px;
        border-radius: 50%;
        font-size: 21px;
        color: #fff;
        text-align: center; }
      .nav-action .change-fontcolor span:hover {
        transform: scale(1); }
    .nav-action .change-fontcolor span.active {
      background: #fff;
      color: #000; }
    .nav-action .change-fontcolor .black {
      margin-left: 0.5rem; }
    .nav-action .change-fontcolor .white {
      margin-left: 0.5rem;
      color: #fff; }
    .nav-action .change-fontcolor .yellow {
      margin-left: 0.5rem;
      color: #f1c644; }

.news {
  background-color: #f5f5f8;
  padding: 2rem 0; }
  @media screen and (max-width: 768px) {
    .news .nav {
      flex-wrap: nowrap;
      overflow-y: scroll; } }
  .news .nav.nav-pills {
    justify-content: center; }
    .news .nav.nav-pills .nav-item .nav-link {
      position: relative;
      font-family: "ThSarabun";
      font-size: 1.5rem;
      font-weight: bold;
      color: #939598;
      background-color: transparent;
      border-radius: 0;
      padding: 0.5rem 4rem; }
      .news .nav.nav-pills .nav-item .nav-link:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40%;
        width: 50px;
        border-bottom: 2px solid #939598; }
    @media screen and (max-width: 768px) {
      .news .nav.nav-pills .nav-item .nav-link {
        font-size: 1.2rem;
        padding: 0.5rem 1rem; }
        .news .nav.nav-pills .nav-item .nav-link:before {
          left: 30%; } }
    .news .nav.nav-pills .nav-item .nav-link.active {
      position: relative;
      transition: all 0.3s;
      color: #4a3f3b; }
      .news .nav.nav-pills .nav-item .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40%;
        width: 50px;
        border-bottom: 2px solid #4a3f3b; }
    @media screen and (max-width: 768px) {
      .news .nav.nav-pills .nav-item .nav-link.active {
        font-size: 1.2rem;
        padding: 0.5rem 1rem; }
        .news .nav.nav-pills .nav-item .nav-link.active:before {
          left: 30%; } }
  @media screen and (max-width: 768px) {
    .news .nav.nav-pills {
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start; } }
  .news .tab-content {
    position: relative;
    z-index: 999;
    padding-bottom: 5rem;
    background: #f5f5f8; }

.news-list .news-item {
  display: flex;
  flex-direction: column;
  cursor: pointer; }
  .news-list .news-item .news-img {
    justify-content: center;
    display: flex;
    min-height: 218px;
    max-height: 218px;
    overflow: hidden;
    position: relative; }
    .news-list .news-item .news-img .news-actions {
      width: 100%;
      height: 120%;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
      transition: 0.5s ease;
      color: #c7b299; }
      .news-list .news-item .news-img .news-actions span {
        position: relative;
        top: 50%;
        left: 0;
        right: 0;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        transition: all 0.3s;
        margin-right: 1rem; }
        .news-list .news-item .news-img .news-actions span em {
          font-size: 1.5em; }
        .news-list .news-item .news-img .news-actions span:hover {
          color: #fff; }
  .news-list .news-item .news-desc {
    background: #fbfaf8;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3px 12px;
    transition: 0.5s ease; 
    min-height:170px;
  }
    .news-list .news-item .news-desc:after {
      content: "";
      position: absolute;
      top: -10px;
      left: 11%;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-bottom-color: #fbfaf8;
      border-top: 0;
      margin-left: -20px;
      margin-top: 0px;
      transition: 0.5s ease; }
    .news-list .news-item .news-desc .news-title,.news-list .news-item .news-desc .news-title a {
      color: #333; line-height: 1em; padding-top: 10px;
      font-size: 1.7rem; }
    .news-list .news-item .news-desc .news-date,
    .news-list .news-item .news-desc .news-place {
      color: #d1d1d1;
      font-size: 1.3rem;
      line-height: 23px; }
  .news-list .news-item:hover .news-img {
    overflow: hidden;
    position: relative; }
    .news-list .news-item:hover .news-img .news-actions {
      opacity: 1;
      background: rgba(0, 0, 0, 0.6); }
  .news-list .news-item:hover .news-desc {
    background-color: #362f2d; }
    .news-list .news-item:hover .news-desc:after {
      border-bottom-color: #362f2d; }
    .news-list .news-item:hover .news-desc .news-title, .news-list .news-item:hover .news-desc .news-title a {
      color: #fff; }
    .news-list .news-item:hover .news-desc .news-date,
    .news-list .news-item:hover .news-desc .news-place {
      color: #c7b299; }

.e-mag {
  position: relative;
  top: -140px;
  margin-bottom: -140px; }
  .e-mag .tab-content {
    margin-top: 3rem; }
  .e-mag .content-control .btn-circle {
    background: #fff;
    border: 1px solid #5e5e5e;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 26px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    transition: all 0.2s; }
    .e-mag .content-control .btn-circle:hover {
      border: 1px solid #fff;
      box-shadow: 0px 4px 6px 0px #cfcfcf; }
    .e-mag .content-control .btn-circle:active, .e-mag .content-control .btn-circle:focus, .e-mag .content-control .btn-circle:visited {
      outline: none; }
  .e-mag .content-control .btn-prev {
    position: absolute;
    top: 50%;
    left: 0; }
  .e-mag .content-control .btn-next {
    position: absolute;
    top: 50%;
    right: 0; }
  @media screen and (max-width: 768px) {
    .e-mag .content-control .btn-circle {
      display: none; } }

.e-mag-menus {
  /* background: url("../images/content-bg.png") 50% 90%; */
  background:#002700;
  position: relative;
  height: 300px; }
  .e-mag-menus .mascot {
    position: absolute;
    display: none;
    top: -90px;
    z-index: 9999;
    left: -130px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .e-mag-menus .mascot {
        display: none !important; } }
    @media screen and (min-width: 768px) {
      .e-mag-menus .mascot {
        display: block;
        left: 3px;
        height: 472px; } }
    @media screen and (min-width: 1800px) {
      .e-mag-menus .mascot {
        display: block;
        left: 260px; } }
  @media screen and (max-width: 768px) {
    .e-mag-menus .nav {
      flex-wrap: nowrap;
      overflow-y: scroll; } }
  .e-mag-menus .nav.nav-pills {
    justify-content: center;
    padding-top: 140px; }
    .e-mag-menus .nav.nav-pills:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-top-color: #340b0a;
      border-bottom: 0;
      margin-left: -20px;
      margin-bottom: -20px; }
    .e-mag-menus .nav.nav-pills:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      z-index: 9;
      border: 6px solid transparent;
      border-top-color: #fff;
      border-bottom: 0;
      margin-left: -6px;
      margin-bottom: -6px; }
    .e-mag-menus .nav.nav-pills .nav-item .nav-link {
      position: relative;
      font-family: "ThSarabun";
      font-size: 1.7rem;
      font-weight: bold;
      color: #939598;
      background-color: transparent;
      border-radius: 0;
      padding: 0.5rem 3.5rem;
      height: 100%; }
      .e-mag-menus .nav.nav-pills .nav-item .nav-link:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40%;
        width: 50px;
        border-bottom: 2px solid #939598; }
      .e-mag-menus .nav.nav-pills .nav-item .nav-link .menu {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center; }
      .e-mag-menus .nav.nav-pills .nav-item .nav-link:hover .menu .menu-icon {
        color: #fff; }
    @media screen and (max-width: 768px) {
      .e-mag-menus .nav.nav-pills .nav-item .nav-link {
        font-size: 1.2rem;
        padding: 0.5rem 1rem; }
        .e-mag-menus .nav.nav-pills .nav-item .nav-link:before {
          left: 30%; } }
    .e-mag-menus .nav.nav-pills .nav-item .nav-link.active {
      position: relative;
      transition: all 0.3s;
      color: #fff; }
      .e-mag-menus .nav.nav-pills .nav-item .nav-link.active:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 40%;
        width: 50px;
        border-bottom: 2px solid #fff; }
      .e-mag-menus .nav.nav-pills .nav-item .nav-link.active .menu .menu-icon {
        color: #fff; }
    @media screen and (max-width: 768px) {
      .e-mag-menus .nav.nav-pills .nav-item .nav-link.active {
        font-size: 1.2rem;
        padding: 0.5rem 1rem; }
        .e-mag-menus .nav.nav-pills .nav-item .nav-link.active:before {
          left: 30%; } }
  @media screen and (max-width: 768px) {
    .e-mag-menus .nav.nav-pills {
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start; } }

.content-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 2rem; }

@media screen and (max-width: 768px) {
  .contents {
    white-space: nowrap;
    overflow-x: auto;
    display: flex;
    overflow-y: hidden;
    justify-content: flex-start;
    flex-wrap: nowrap; } }

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  height: 100%;
  transform: scale(0.85);
  transition: all 0.3s; }
  .content img {
    opacity: 0.7;
    transition: all 0.3s; }
  .content .content-text {
    width: 85%;
    text-align: center;
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all 0.3s; }
  .content .content-readmore {
    width: 80%;
    color: #a2917d;
    text-align: center;
    margin-top: 1.5rem;
    font-weight: bold;
    font-size: 1.6rem;
    opacity: 0.7;
    transition: all 0.3s; }
  .content:hover {
    transform: scale(1); }
    .content:hover .content-text,
    .content:hover .content-readmore,
    .content:hover img {
      opacity: 1; }
  @media screen and (max-width: 768px) {
    .content {
      width: 250px;
      margin-right: 1rem;
      margin-left: 1rem; }
      .content .content-text {
        white-space: pre-line;
        width: 100%; } }

.content.active {
  transform: scale(1); }
  .content.active .content-text,
  .content.active .content-readmore,
  .content.active img {
    opacity: 1; }

#map {
  width: 100%;
  height: 300px;
  position: relative; }

@media screen and (max-width: 768px) {
  .carousel-item img {
    height: 350px; }
  .carousel-caption {
    display: block !important;
    text-align: left;
    width: 55%;
    margin-bottom: 1rem;
    position: absolute;
    right: 15%;
    bottom: 6px;
    left: 8%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff; }
    .carousel-caption .caption-title {
      font-family: "ThSarabun";
      font-size: 1.5rem;
      font-weight: bold;
      line-height: 16px; }
    .carousel-caption .caption-subtitle {
      font-family: "ThSarabun";
      font-size: 1rem;
      line-height: 0px;
      margin-bottom: 0.5rem; }
    .carousel-caption .caption-text {
      font-family: "ThSarabun";
      font-size: 1rem;
      line-height: 19px; }
    .carousel-caption .btn-main {
      font-size: 17px;
      background: #a2917d;
      color: #fff;
      padding: 4px 20px 0 20px;
      line-height: 27px;
      border-radius: 2px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .carousel-item img {
    height: 350px; }
  .carousel-caption {
    display: block !important;
    text-align: left;
    width: 55%;
    margin-bottom: 1rem;
    position: absolute;
    right: 15%;
    bottom: 6px;
    left: 8%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff; }
    .carousel-caption .caption-title {
      font-family: "ThSarabun";
      font-size: 2.7rem;
      font-weight: bold;
      line-height: 20px; }
    .carousel-caption .caption-subtitle {
      font-family: "ThSarabun";
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 0.5rem; }
    .carousel-caption .caption-text {
      font-family: "ThSarabun";
      font-size: 1.25rem;
      line-height: 19px; }
    .carousel-caption .btn-main {
      font-size: 17px;
      background: #a2917d;
      color: #fff;
      padding: 4px 20px 0 20px;
      line-height: 27px;
      border-radius: 2px;
    }
}

      /* ////////SEEREEN//////// CSS */

/* Navigation */

#main-navbar .nav-link{cursor: pointer!important; font-family: "THSarabun", sans-serif; font-size: 22px !important; color: rgba(255,255,255,1) !important; padding-right: 1.8rem !important;
   padding-left: 0px!important; background-color: transparent; }
.dropdown-item {padding: 0.1rem 1rem; line-height:30px; vertical-align: middle;  border-bottom: 1px solid #3c3c3c;  font-size: 19px !important; padding-left: 15px !important; color: #FFF; }
#navbars-menu-mainul li div.dropdown-menu a{  color: #FFF; font-size: 20px !important;}
  #navbars-menu-main ul.navbar-nav li:hover > ul.dropdown-menu {display: block;border:0;  font-size: 19px; background-color:#362f2d; border-radius: 2px; }
  .dropdown-submenu {	position:relative; }
  .dropdown-submenu>.dropdown-menu {top:0px;left:100%;margin-top:0px; background-color:#362f2d !important;}

  .dropdown-menu > li > a:hover:after {text-decoration: underline;transform: rotate(-90deg);}
  .dropdown-toggle::after {font-size: 14px; right:16px;}
  .dropdown-item:hover{ background-color: #49413f; color: #FFF; }

  /*.dropdown-menu.show {display:none;}*/
  .icon-search.show{display: block;}
     	/* page */
  .wrap-content{margin: 0;}
  .text-content{font-size: 1.3em; }
  .title-page{ color: #612e1a; font-weight: bold;font-size: 1.5em; }

/* pagination */
.breadcrumb{padding: .4rem 1rem !important; }
.pagination a {  margin: 0 4px; padding: 0px 12px !important;   }
.pagination a {  border-radius: 5px;}
.pagination a.active.page-link {  border-radius: 5px;}
.page-item.active .page-link{background-color: #612e1a !important;	color: white;}
.page-link{color: #333;background-color: #e2e2de !important;}
.pagination {	justify-content: center; margin-top: 40px;margin-bottom: 40px;}

.address {margin-top: 40px;}
.address ul{padding:0 ; margin: 0;}
.address ul li {list-style:none ; line-height: 20px;}
.address img{  margin-bottom: -29px;}
.address span{padding-left: 30px;  display: block; }
.btn-send {background-color: #81492e; color: #fff; font-weight: bold; font-size: 1.1em;}
.btn-send:hover {background-color: #8f5438; color: #fff;}
.color-brown{ color: #ac3b03; font-weight: bold;}
.color-blue{color: #2342a7;font-weight: bold;}
.hr01{ width: 100%; margin-top: 30px; margin-bottom: 30px;}
.bg-fields{font-size: 1em !important;}

    	/* ข่าวจัดซื้อจัดจ้าง */
      .date-procurement{color: rgb(175, 175, 175); font-size:0.8em; padding-left: 10px;}
      .procurement{font-size: 14px; width:100%;}
      .procurement ul {padding: 0; margin: 0; font-family: "THsarabun"; font-size:1.5em;}
      .procurement ul li {padding: 0; margin-left: 20px; list-style:none ; background-image: url(../images/pdf.png); background-position: 0px 13px; background-repeat: no-repeat;
        padding-left: 35px; line-height: 25px; border-bottom: 1px solid #e1e0e0; padding-bottom: 10px;padding-top: 10px;}
      .procurement ul li a {color: #333;}

/* gallery */
.album{background-image: url(../images/frame.png); margin-bottom: 5px; background-position:top center;    background-repeat: no-repeat; min-height:224px; }
.album img{padding-top: 45px;}
.p-gallery{margin-top: 20px;text-align: center;}
#aniimated-thumbnials div{margin-bottom: 30px; }
#aniimated-thumbnials div img{border: 5px solid #FFF;	border-radius: 2px; box-shadow: 0px 0px 5px #bcbcbb;}

  /* FAQ */
  .faq{margin-top: 20px; }
  .panel-group {    margin-bottom: 0;}
.panel-group .panel {    border-radius: 0;    box-shadow: none;}
.panel-group .panel .panel-heading {    padding: 0;}
.panel-group .panel .panel-heading h4 a {    background: #f6f9fc;    display: block;    font-size: 1em ;    line-height: 20px;    padding: 15px;    text-decoration: none;    color: #000;}

.panel-group .panel .panel-heading h4 a:not(.collapsed) i:before {    content: "-";    font-size: 30px;    line-height: 10px;}
.panel-group .panel .panel-heading h4 a em {    color: #999;    font-size: 12px;}
.panel-group .panel .panel-body {    padding-top: 0;}
.panel-group .panel .panel-heading + .panel-collapse > .list-group,
.panel-group .panel .panel-heading + .panel-collapse > .panel-body {    border-top: none;}
.panel-group .panel + .panel {    border-top: none;    margin-top: 0;}
.pxlr-faq-body{padding-left: 20px; padding-right: 20px;}

  /* TAB */
#publish-tab { text-align: center; margin: 0 auto; font-family: 'prompt'; font-size: 17px; color: #515050; margin-bottom: 30px; margin-top: 30px;}
.publish-tab { background-color: #ebebeb;  margin: 6px;  border-radius: 2px;  color: #333;}
.publish-tab:hover, .publish-tab a.active {  background-color: #c19b02 !important;  color: #fff !important;}

/* knowledge */
.card-knowledge{ padding: 0; margin:15px;}
.card-body-knowledge{background-color: #fbeddb;padding: 10px; text-align: center; font-family: "ThSarabun"; font-size: 1.1em;
	position: relative; min-height:270px; padding-top: 50px;}
.card-knowledge img{ width: 100%;}
.btn-knowledge{margin-top: 10px; margin-bottom: 10px; display: inline-block;	background-color: #915b38; color: #fff; border-radius:20px;  font-family: "ThSarabun";
	padding-left: 30px; padding-right: 30px; padding-top: 5px;padding-bottom: 5px;  font-size: 1.3rem; padding-top: 0; padding-bottom: 0;  font-weight: bold;}
.btn-knowledge:hover{color: #fff; background-color: #a1663e; text-decoration: none;}
.text-knowledge{font-size: 1.5rem;line-height: 1.9rem; padding-top: 10px; height:73px ; overflow: hidden;}
.arrow-up-knowledge {  width: 0;   height: 0;   border-left: 15px solid transparent;  border-right: 15px solid transparent;
  border-bottom: 15px solid #fbeddb; margin: 0 auto;    margin-top: -25px; position: relative; z-index:1 ;}
.arrow-down-knowledge {  width: 0;   height: 0;   border-left: 15px solid transparent;  border-right: 15px solid transparent;
	border-top: 15px solid #fbeddb; margin-left:auto; margin-right: auto; left: 0;  right: 0;bottom:-15px; position: absolute; z-index:1 ;}
/* use in: sub/content/list/list-card-4.php */
.news-item .header
{
	font-size: 1.2em; 
	color: #7d4c11; 
	font-weight: bold;
}
.news-item .description
{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}


.card-title{font-weight: bold; font-size: 1.4rem; }


  @media screen and (min-width: 320px) and (max-width: 320px){
        .head_pages {  height: 14vh !important;}
        .album img{padding-left: 39px;}
 }
 @media screen and (min-width: 360px) and (max-width: 360px){
  .album img{ padding-left: 59px;}
  }
 @media screen and (min-width: 375px) and (max-width: 375px){
 .album img {  padding-left: 22px !important;  margin: 0 auto;  display: block;}
}
  @media screen and (min-width: 568px) and (max-width: 568px){
        .head_pages {  height: 20vh !important;}
        .album img{padding-left: 21px;  margin: 0 auto; display: block;}
 }
  @media screen and (min-width: 640px) and (max-width: 640px){
    .head_pages {  height: 19vh !important;}
    .album img{padding-left: 13px;}
    .card-knowledge{ max-width: 44%; }
  }
  @media screen and (min-width: 667px) and (max-width: 667px){
    .head_pages {  height: 19vh !important;}
    .album img {padding-left: 14px;}
  }
  @media screen and (min-width: 731px) and (max-width: 736px){
    .head_pages {  height: 19vh !important;}
    .album img{padding-left: 13px;}
    .card-knowledge{ max-width: 44%; }
  }
  @media screen and (min-width: 411px) and (max-width: 414px){
    .album img { padding-left: 86px;}
  }



  @media screen and (max-width: 768px) {
    .menu-mobile.dropdown-item{width: 100%; color: #FFF; padding:0 !important;  }
    .menu-mobile{background-color:#3c3c3c; width: 100%; top: -49px !important;  position: relative;}
    .menu-mobile a.dropdown-item { border-bottom: 1px solid #515151 !important; background-color:#3c3c3c;  padding: 2px !important;  font-size: 17px !important; padding: 0px; }
    .dropdown-menu { position: relative !important;}
    .nav-action{padding: 0;}
    .dropdown-toggle::after{position: relative; float: right; top:12px;}
    .mCSB_inside>.mCSB_container { margin-right: 0px !important; }
    .dropdown-menu.show {display:block;}
    .head_pages{height: 10vh;}

  }

  @media screen and (min-width: 1290px) {
    .menu-mobile {display: none;}
    .album img {    padding-left: 70px;}
    .card-knowledge{ max-width: 22%; }
  }

  @media screen and (min-width: 1024px) and (max-width: 1366px){
    .logo-mobile{display: none;}
    .album img {padding-left: 69px;}
  }

  @media screen and (min-width: 1024px) and (max-width: 1024px){
  #main-navbar .nav-link{    font-size: 15px !important;   padding-right: 1.3rem !important; }
  .card-knowledge{ max-width: 21%; }
  }
  @media screen and (min-width: 812px) and (max-width: 823px){
  .main-nav .co-logo-mobile {
       background: linear-gradient(to right, #ffe7b8 0%, #b99654 100%);-webkit-background-clip: text;
      -webkit-text-fill-color: transparent; font-weight: bold;     display: block;float: right;      margin-left: 20px;margin-top: 5px;  }
  .main-nav .fineart-logo {      width: 50px;  }
  .main-nav .co-logo-mobile .en-name {      display: block;      width: 100%;      line-height: 1;  }
  .main-nav .co-logo-mobile .th-name {    display: block;    width: 100%;    line-height: 1;}
  .album img{padding-left: 0px;}
  .card-knowledge {max-width: 44% ; flex: 0 0 44%; }
  }

    /* Landscape ipad pro*/

    @media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {
      .head_pages {  height: 17vh;}
      .album img{padding-left: 22px; display: block; margin: 0 auto;}
    }

    /* Portrait ipad pro*/
    @media only screen and (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {
      .head_pages {  height: 10vh;}
    }

  /* Landscape ipad */
  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

  }
  @media only screen and (min-width : 375px) and (max-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {

  }

  @media only screen and (min-width : 375px) and (max-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {

  }


/**** Start Color Switcher ****/
.colors-switcher {
	width:46px;
	padding:10px 0px 0px 10px;
	position:fixed;
	z-index:5;
	top:160px;
	right:0;
	background-color: rgba(255,255,255,.9);
	border-radius:2px 0 0 2px;
	border:1px solid rgba(0,0,0,.1);
	-webkit-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-ms-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
}
.colors-switcher > p {	font-size: 11px;	line-height: 0;}
.colors-switcher #show-panel {
	position:absolute;
  left:-46px;
	top:15px;
	width:46px;
	height:38px;
	z-index:5;
	display:block;
	background-color: rgba(255,255,255,.9);
	border-radius:2px 0 0 2px;
	border:1px solid rgba(0,0,0,.1);
	border-right:none;
	cursor: pointer;
}
.colors-switcher #show-panel em {
	color: #3D3D3D;
	font-size: 20px;
	line-height: 38px;
	margin-left: 15px;
}
.colors-switcher .colors-list {	margin:0;	padding:0;}
.colors-switcher .colors-list li {
	float:left;
	display:block;
	margin-bottom:2px;
	margin-right:6px;
}
.colors-switcher .colors-list li a {
	display:inline-block;
	width:24px;
	height:24px;
	border-radius:2px;
	transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-webkit-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	cursor: pointer;
}
.colors-switcher .colors-list li a:hover {	box-shadow:inset 0 0 6px rgba(0,0,0,.4);}
.colors-switcher .colors-list a.green {	background-color:#5BB12F;}
.colors-switcher .colors-list a.brown {	background-color:#532318;}
.colors-switcher .colors-list a.blue{	background-color:#28ABE3;}

/* vertical Tabs */
.nav-vertical ul li h6{font-weight:bold;}
.nav-vertical .nav-left.nav-tabs {
    float: left;
    border-bottom: 0;
    border-radius: 0;
    display: table; }
    .nav-vertical .nav-left.nav-tabs li.nav-item {
      float: none;
      margin: 0;
	  margin-right: -1px;
	  display: block;
	  text-decoration: none;
	  min-height: 30px;
	  font-size: 21px;
	  line-height: 20px;
	  text-align: right;
	  padding: 10px 10px;
	}
      .nav-vertical .nav-left.nav-tabs li.nav-item a.nav-link.active {
        border: 1px solid #ddd;
        border-right: 0;
        border-radius: 0.25rem 0 0 0.25rem; }
    .nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link {
      color: #fff;
      background: #575656;
      border-bottom: 2px solid transparent;
      border-radius: 6px;
      padding-top: 5px;
      padding-right: 20px;
      height: 45px; }
      .nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link.active {
		color: #fff;
		background: #533c33;
		margin-bottom: 0px;
		border-bottom: 2px solid transparent;
		border-radius: 6px;
	}

  .nav-vertical .nav-left ~ .tab-content {
    margin-left: 0px; }
    .nav-vertical .nav-left ~ .tab-content .tab-pane {
      display: none;
      background-color: #fff;
      padding: 0 0 0.6rem 1rem;
      overflow-y: auto; }
      .nav-vertical .nav-left ~ .tab-content .tab-pane.active {
        display: block; }

  .nav-vertical .nav-right.nav-tabs {
    float: right;
    border-bottom: 0;
    border-left: 1px solid #ddd;
    border-radius: 0;
    display: table; }
    .nav-vertical .nav-right.nav-tabs li.nav-item {
      float: none;
      margin: 0;
      margin-left: -1px; }
      .nav-vertical .nav-right.nav-tabs li.nav-item a.nav-link.active {
        border: 1px solid #ddd;
        border-left: 0;
        border-radius: 0 0.25rem 0.25rem 0; }
    .nav-vertical .nav-right.nav-tabs.nav-border-right li.nav-item a.nav-link {
      color: #4eaa66; }
      .nav-vertical .nav-right.nav-tabs.nav-border-right li.nav-item a.nav-link.active {
        border-right: 3px solid #4eaa66;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        color: #555; }

  .nav-vertical .nav-right ~ .tab-content .tab-pane {
    display: none;
    background-color: #fff;
    padding: 0 0 0.6rem 1rem;
    overflow-y: auto; }
    .nav-vertical .nav-right ~ .tab-content .tab-pane.active {
	  display: block; }
.color-icon{color:#939598; font-size:50px;}
.bg-slide{background-image: url(../images/XL1A75251.jpg); background-repeat:no-repeat ; }
@media screen and (min-width: 1024px) and (max-width: 1920px){
  .bg-slide{ min-height:557px;}
}
.dropdown-menu {margin:0;}
.formcontact{    font-size: 1.3rem;}
#laws-tab{ text-align: center; margin: 0 auto; color: #515050; margin-bottom: 30px; margin-top: 30px;}
.laws-tab{ background-color: #ebebeb; margin: 6px; border-radius:2px; color: #333; }
.laws-tab a{ color: #333; font-family: "ThSarabun"; }
.laws-tab:hover,.laws-tab a.active {background-color: #c19b02 !important; color: #fff !important;}

.dropdown-menu.show{ background-color: #5c524f; color: #FFF;}
.wrap-flag{}
.flag{position:absolute; top:-15px; right:-5px; z-index: 2;}

.wrap-slide-banner{position:relative; }
.leftbanner{position: absolute; top:-120px; left:-100px;}
.rightbanner{position: absolute; top:-120px; right:-100px;}

.img-publish{max-height:203px;}

.probootstrap-service-2{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-shadow:0 2px 20px 0 rgba(0,0,0,.1);box-shadow:0 2px 20px 0 rgba(0,0,0,.1);margin-bottom:40px}
.probootstrap-service-2 .image{width:40%;overflow:hidden;position:relative}
.probootstrap-service-2 .text{width:60%;padding:20px}
@media screen and (max-width:480px){
.probootstrap-service-2 .image,.probootstrap-service-2 .text{width:100%}
.probootstrap-service-2 .image{width:100%;height:200px}
}
.probootstrap-service-2 .image .image-bg{position:absolute;left:50%;top:50%;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}
.probootstrap-service-2 .text h3{font-size:1.2em;margin:0; font-weight:bold; line-height:25px; margin-top:10px;}
.probootstrap-service-2 .text p{margin-top:10px; margin-bottom:10px; height:70px; overflow: hidden; line-height:25px;}
.probootstrap-service-2 .text p:last-child{margin-bottom:0}
.probootstrap-service-2 .text .probootstrap-meta{font-size:1em;color:#b3b2b2}
.probootstrap-service-2 .image .image-bg img{min-width:100%;min-height:100%}

/*---------------------------------------
      TEAM
  -----------------------------------------*/

  .team-thumb {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    text-align: left;
  }
  .team-info hr{ margin: 5px;}
  .team-info h5{font-size:1.5em;font-weight: bold; line-height: 0.9em;}
  .team-info {
	background: #e5b974;  font-weight: bold;
    color: #000;
    padding: 15px;
    border-radius: 0 0 3px 3px;
  }
  .team-info a{color:white;}

  .team-image img {
    width: 100%;
  }

  .team-thumb .social-icon {
    border-top: 1px solid #f0f0f0;
    padding: 4px 20px 0 20px;
  }

  .team-thumb .social-icon li a {
    background: #ffffff;
    color: #252020;
  }

  .team-info h3 {
    margin: 0;
  }

  .text-person{color:white; }
  .name-ceo {    color: #2f6f1a;    font-family: "prompt";    font-size: 1.2em;    font-weight: normal;}
.cite3 { padding-left: 0px; font-style: inherit;  color: #a27e3a;  font-family: "prompt";  font-size: 1em; font-weight: normal;}
.tb-person table tr td{vertical-align: middle;}
.thead-green th {    color: #fff;    background-color: #a77c4a;}



/* list-3 */

/* เพิ่มปุ่ม "เว็บกรมท่า" */

.btn-go-fa a { color: #FFFFFF!important; position: absolute; right: 10%; top:2px; font-size:1.3em; }
.btn-go-fa a:hover{color: #fef1a8!important;}
.btn2-go-fa a { color: #FFFFFF!important; position: absolute; right: 5%; top:9%; font-size:1em; }
.btn2-go-fa a:hover{color: #fef1a8!important;}



/* New footer: */
.footer{font-size: 1.4em;}
.menu-bottom li {font-size: 1em; list-style:none; margin-top: 5px; padding: 0; line-height:30px; display:block; background-image: url(../images/arrow-menu-button.png); background-repeat: no-repeat; background-position: 10px 8px; padding-left:35px;}
.menu-bottom a{color: #FFFFFF;  }
.counter-numbers li {list-style:none; display: inline-block;line-height: 15px;color:black;  font-size:22px; font-weight: bold; border-radius: 2px;background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(233,233,233,1) 50%); padding:7px; }