@font-face {
  font-family: "SarabunLight";
  src: url("fonts/Sarabun/Sarabun-Light.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "SarabunMedium";
  src: url("fonts/Sarabun/Sarabun-Medium.ttf") format("truetype");
  font-weight: 500; }
@font-face {
  font-family: "SarabunBold";
  src: url("fonts/Sarabun/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700; }
* {
  margin: 0;
  padding: 0;
  font-size: inherit; }

body {
  background: #eff3f6;
  font-family: "SarabunLight", sans-serif;
  font-weight: 300;
  color: #18221a;
  font-size: 0; }

header {
  position: fixed;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 100;
  display: flex; }
  header > .page-width-wrapper {
    display: flex;
    height: 100%; }
  header > div, header > .page-width-wrapper > div {
    white-space: nowrap;
    margin: auto 0; }
  header #homeAnchor img:first-of-type {
    height: 50px;
    margin-left: -4px;
    cursor: pointer; }
    @media screen and (min-width: 420px) {
      header #homeAnchor img:first-of-type {
        display: none; } }
  header #homeAnchor img:last-of-type {
    height: 40px;
    cursor: pointer; }
    @media screen and (max-width: 419px) {
      header #homeAnchor img:last-of-type {
        display: none; } }
  header .left {
    font-size: 0; }
  header .center {
    flex-grow: 1;
    text-align: center; }

header ul.nav {
  list-style: none;
  text-align: center;
  font-size: 0;
  display: inline-flex; }
  @media screen and (max-width: 1100px) {
    header ul.nav {
      display: none; } }
  header ul.nav li a {
    color: #18221A;
    font-size: 18px;
    text-decoration: none;
    border-bottom: 2px solid #fafbfc;
    display: block;
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    padding: 0 20px;
    transition: background 0.25s, border-color 0.25s;
    transition-delay: 0.25s; }
    header ul.nav li a.active {
      background: #e2f7e4;
      border-color: #8bc693;
      display: block; }
    header ul.nav li a:hover {
      background: #edf9ee; }

.card {
  background: #fafbfc;
  border-radius: 20px;
  /* -webkit-box-shadow: 0px 5px 10px -5px #18221A */
  /* box-shadow: 0px 5px 10px -5px #18221A */
  -webkit-box-shadow: 0px 5px 10px -5px rgba(24, 34, 26, 0.5);
  box-shadow: 0px 5px 10px -5px rgba(24, 34, 26, 0.5); }

input,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type="submit"],
button {
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 10px;
  outline: none;
  border: none;
  /* background: #e3600e */
  background: #fff;
  /* color: #eff3f6 */
  color: #ea520f;
  font-family: "SarabunMedium", sans-serif;
  font-weight: 500;
  cursor: pointer;
  -webkit-box-shadow: 0px 2px 5px -2px rgba(24, 34, 26, 0.5);
  box-shadow: 0px 2px 5px -2px rgba(24, 34, 26, 0.5); }
  input[type="submit"]:hover, input[type="submit"]:focus,
  button:hover,
  button:focus {
    background: #ea520f;
    color: #eff3f6; }
  input[type="submit"]:focus,
  button:focus {
    -webkit-box-shadow: 0px 2px 5px -2px #ea520f;
    box-shadow: 0px 2px 5px -2px #ea520f; }
  input[type="submit"].secondary,
  button.secondary {
    border: 2px solid transparent;
    padding: 8px 18px;
    background: transparent;
    color: #ea520f;
    -webkit-box-shadow: none;
    box-shadow: none; }
    input[type="submit"].secondary:hover,
    button.secondary:hover {
      border-color: #ea520f; }
  input[type="submit"].highlight,
  button.highlight {
    border: 2px solid #ea520f;
    padding: 8px 18px;
    background: transparent;
    color: #ea520f;
    -webkit-box-shadow: none;
    box-shadow: none; }
    input[type="submit"].highlight:hover,
    button.highlight:hover {
      background: #ea520f;
      color: #eff3f6; }
  input[type="submit"].disabled,
  button.disabled {
    pointer-events: none;
    background: rgba(24, 34, 26, 0.05);
    box-shadow: none;
    color: rgba(24, 34, 26, 0.25); }

.input-container {
  position: relative;
  padding-top: 20px; }
  .input-container label {
    position: absolute;
    top: 0;
    left: 10px;
    line-height: 20px;
    font-size: 14px;
    font-family: "SarabunMedium", sans-serif;
    font-weight: 500;
    color: #7e847f; }
  .input-container input,
  .input-container select {
    font-size: 18px;
    outline: none;
    padding: 5px 10px 0 10px;
    background: none;
    border: none; }
  .input-container:not(.read-only) input,
  .input-container select {
    padding: 9px;
    /* padding: 10px */
    background: #fff;
    border-radius: 10px;
    /* border: 1px solid #7e847f */
    border: 1px solid #fff;
    /* border: none */
    width: calc(100% - 20px);
    -webkit-box-shadow: 0px 2px 5px -2px rgba(24, 34, 26, 0.5);
    box-shadow: 0px 2px 5px -2px rgba(24, 34, 26, 0.5); }
    .input-container:not(.read-only) input:focus,
    .input-container select:focus {
      border-color: #ea520f;
      /* padding: 8px */
      /* border-width: 2px */
      -webkit-box-shadow: 0px 2px 5px -2px #ea520f;
      box-shadow: 0px 2px 5px -2px #ea520f; }
      .input-container:not(.read-only) input:focus + label,
      .input-container select:focus + label {
        color: #ea520f; }
  .input-container select {
    width: 100%; }
  .input-container + .input-container {
    margin-top: 10px; }
  .input-container + input[type="submit"] {
    margin-top: 20px; }
  .input-container:not(.read-only):hover input, .input-container:hover select {
    border-color: #ea520f; }

.float-right {
  float: right; }

.ma-0 {
  margin: 0px; }

.pa-0 {
  padding: 0px; }

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

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

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

.pr-0 {
  padding-right: 0px; }

.mb-0 {
  margin-bottom: 0px; }

.pb-0 {
  padding-bottom: 0px; }

.ml-0 {
  margin-left: 0px; }

.pl-0 {
  padding-left: 0px; }

.ma-1 {
  margin: 10px; }

.pa-1 {
  padding: 10px; }

.mt-1 {
  margin-top: 10px; }

.pt-1 {
  padding-top: 10px; }

.mr-1 {
  margin-right: 10px; }

.pr-1 {
  padding-right: 10px; }

.mb-1 {
  margin-bottom: 10px; }

.pb-1 {
  padding-bottom: 10px; }

.ml-1 {
  margin-left: 10px; }

.pl-1 {
  padding-left: 10px; }

.ma-2 {
  margin: 20px; }

.pa-2 {
  padding: 20px; }

.mt-2 {
  margin-top: 20px; }

.pt-2 {
  padding-top: 20px; }

.mr-2 {
  margin-right: 20px; }

.pr-2 {
  padding-right: 20px; }

.mb-2 {
  margin-bottom: 20px; }

.pb-2 {
  padding-bottom: 20px; }

.ml-2 {
  margin-left: 20px; }

.pl-2 {
  padding-left: 20px; }

.typo-title {
  font-size: 56px;
  font-family: "SarabunBold", sans-serif;
  font-weight: 700;
  line-height: 66px; }

.typo-head {
  font-size: 26px;
  font-family: "SarabunMedium", sans-serif;
  font-weight: 500;
  line-height: 36px; }

h4.typo-head {
  font-size: 18px;
  font-family: "SarabunMedium", sans-serif;
  font-weight: 500;
  line-height: 28px; }

.typo-bold {
  font-family: "SarabunMedium", sans-serif;
  font-weight: 500; }

.typo-text {
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; }

.typo-text img {
  display: inline;
  width: unset;
  height: 14px; }

hr {
  border: none;
  border-top: 1px solid #7e847f;
  opacity: 0.25;
  margin: 10px; }

div.alert {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100000;
  font-size: 18px;
  font-family: "SarabunMedium", sans-serif;
  font-weight: 500;
  line-height: 28px;
  border: 2px solid #bc0606;
  background: rgba(188, 6, 6, 0.8);
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  width: 90vw;
  max-width: 620px;
  text-align: center;
  backdrop-filter: blur(5px); }
  div.alert a {
    color: inherit; }

ul.footer {
  list-style: none;
  text-align: center;
  font-size: 0; }
  ul.footer li {
    display: inline;
    font-size: 14px; }
    ul.footer li:not(:last-of-type)::after {
      content: "|";
      color: #7e847f;
      margin: 0 5px; }
    ul.footer li a {
      color: #7e847f;
      text-decoration: none;
      font-size: inherit; }
      ul.footer li a.active, ul.footer li a:hover {
        color: #ea520f; }
      ul.footer li a.active {
        pointer-events: none; }