@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@400;700&display=swap");
* {
  font-family: 'Anuphan', sans-serif; }

body.lock {
  overflow-y: hidden !important; }

.bold {
  font-weight: bold; }

.up-font-size {
  font-size: 18px; }

.page-wrapper {
  width: 100%;
  min-height: 100vh;
  overflow: hidden; }

.loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200; }
  .loading img {
    width: 100px;
    height: 100px; }

.container {
  max-width: 1000px;
  margin: 0 auto; }

#banner {
  position: relative;
  z-index: 101; }

#header {
  display: flex;
  align-items: center;
  height: 100px;
  position: relative;
  border-bottom: 2px solid #ffffff;
  z-index: 102; }
  #header .header-container {
    display: flex;
    align-items: center; }
  #header a {
    text-decoration: none;
    color: #008db1;
    text-align: right; }
    #header a:hover {
      color: #c37237;
      transition: .3s ease-in-out; }
  #header span.header-hover {
    color: #008db1;
    text-align: right;
    cursor: pointer;
    position: relative; }
    #header span.header-hover .header-sub-item-list {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgba(255, 255, 255, 0.5);
      width: 140%;
      display: none; }
    #header span.header-hover .header-sub-item {
      text-align: left;
      padding: 0 10px;
      display: inline-block;
      width: 100%;
      padding-top: 10px; }
      #header span.header-hover .header-sub-item.active {
        font-weight: bold; }
    #header span.header-hover:hover .header-sub-item-list {
      display: inline-block; }
  #header .header-item {
    font-size: 20px;
    padding: 0 15px; }
    #header .header-item:first-child {
      padding-left: 0; }
    #header .header-item.active {
      font-weight: bold; }
  #header .container {
    display: flex;
    padding: 20px; }
  #header .header-menu-list {
    display: flex;
    justify-content: space-between;
    width: 100%; }
  #header .contact-us {
    border: 2px solid #008db1;
    border-radius: 20px;
    padding: 5px 10px; }
    #header .contact-us:hover {
      border: 2px solid #c37237;
      transition: .3s ease-in-out; }
    #header .contact-us span {
      padding: 0; }
  #header .hamberger {
    display: none; }
    #header .hamberger i.fa {
      font-size: 30px;
      color: #65bacb; }
  #header .left, #header .right {
    display: flex;
    align-items: center; }

#footer a {
  text-decoration: none; }

#footer .upper {
  display: flex; }
  #footer .upper .name {
    font-size: 20px; }
  #footer .upper .name, #footer .upper .address, #footer .upper .menu {
    margin-bottom: 20px; }
  #footer .upper .social {
    display: flex;
    align-items: center;
    justify-content: flex-end; }
  #footer .upper .layout {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 5px; }
    #footer .upper .layout .follow-text {
      margin-right: 20px; }
    #footer .upper .layout a.social-icon {
      display: inline-block;
      font-size: 35px;
      margin: 0 5px; }
  #footer .upper .header-item {
    padding-left: 10px;
    display: inline-block; }
    #footer .upper .header-item.active {
      font-weight: bold; }
  #footer .upper .right {
    text-align: right; }

#footer .lower {
  border-top: 1px solid #6B8C8E;
  padding: 20px 5px; }

#footer .title, #footer .desc {
  color: #6B8C8E; }
  #footer .title a, #footer .desc a {
    color: #6B8C8E; }

.banner {
  position: relative;
  z-index: 100; }

.shadow {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
  top: 0;
  left: 0; }

.btn {
  background-color: white;
  padding: 5px 40px;
  border-radius: 30px;
  color: #6B8C8E;
  -webkit-transition: .35s all ease-in-out;
  -moz-transition: .35s all ease-in-out;
  -ms-transition: .35s all ease-in-out;
  -o-transition: .35s all ease-in-out;
  transition: .35s all ease-in-out; }
  .btn.border {
    border: 1px solid #6B8C8E; }
  .btn:hover {
    background-color: #6B8C8E;
    color: white; }

/* Large Devices, Wide Screens */
/* iPad  Landscape*/
/* Medium Devices, Desktops */
@media only screen and (max-width: 991px) {
  .up-font-size {
    font-size: 16px; }
  #header .header-item {
    font-size: 14px; }
  #header span.header-hover .header-sub-item-list {
    width: 160%; } }

/* Small Devices, Tablets */
@media (max-width: 767px) {
  #header {
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: .35s all ease-in-out;
    -moz-transition: .35s all ease-in-out;
    -ms-transition: .35s all ease-in-out;
    -o-transition: .35s all ease-in-out;
    transition: .35s all ease-in-out; }
    #header .logo {
      flex: 1; }
    #header a {
      text-align: center; }
    #header .header-item {
      font-size: 20px; }
    #header .container {
      width: 100%;
      justify-content: flex-end; }
    #header .header-menu-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 40px; }
      #header .header-menu-list a {
        padding: 10px 0;
        display: block;
        width: 100%;
        text-align: right; }
      #header .header-menu-list span.header-hover {
        padding: 10px 0; }
      #header .header-menu-list .contact-us {
        padding: 2px 100px; }
    #header .hamberger {
      display: block; }
    #header span.header-hover {
      width: 100%;
      text-align: right; }
      #header span.header-hover .header-sub-item-list {
        display: inline-block;
        position: relative;
        top: initial;
        left: initial;
        width: 100%;
        background: none; }
      #header span.header-hover .header-sub-item {
        text-align: right; }
      #header span.header-hover i {
        padding-right: 20px; }
    #header.active {
      background-color: rgba(255, 255, 255, 0.8); }
      #header.active .header-menu-list {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1; }
    #header .left {
      flex-direction: column;
      width: 100%; }
    #header .right {
      margin-top: 50px; }
  .header-menu-list {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    right: 0;
    top: 100px;
    width: 60%;
    height: calc(100vh - 100px);
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: .35s all ease-in-out;
    -moz-transition: .35s all ease-in-out;
    -ms-transition: .35s all ease-in-out;
    -o-transition: .35s all ease-in-out;
    transition: .35s all ease-in-out; }
    .header-menu-list a {
      display: block;
      padding: 30px 0; }
  #footer {
    padding: 1cqmax; }
    #footer .upper {
      display: block; }
      #footer .upper .right {
        text-align: left; }
      #footer .upper .social {
        justify-content: flex-start; }
      #footer .upper .header-item {
        padding-left: 0;
        padding-right: 10px; } }

/* Extra Small Devices, Phones */
/* Custom, iPhone Retina */