@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,700&display=swap');

@font-face {
    font-family: 'Anakotmai';
    src: url('../fonts/Anakotmai/Anakotmai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Anakotmai';
    src: url('../fonts/Anakotmai/Anakotmai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Anakotmai';
    src: url('../fonts/Anakotmai/Anakotmai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Termina';
    src: url('../fonts/Termina/Termina-W05-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --font-size: 16px;
    --font-default: 'STIX Two Text', 'Anakotmai', 'Termina';
    --font-input-default: 'STIX Two Text', 'Anakotmai', 'Termina';
    --font-header: 'Termina';
    --font-2nd: 'Anakotmai';

    --color-theme: #a61f23;
    --color-theme-menu: #0ea552;
    --color-theme-bg: #ffd9bc;
    --color-theme-black: #000000;
    --color-theme-gray: #959595;

    --mobile-max-width: 600px;
    --tablet-min-width: 601px;
    --tablet-max-width: 1024px;
    --desktop-min-width: 1025px;

    --color-success-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(139deg) brightness(89%) contrast(114%);
    --color-warning-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(9deg) brightness(89%) contrast(119%);
    --color-danger-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(334deg) brightness(79%) contrast(114%);
    --color-gray-svg-filter: invert(42%) sepia(93%) saturate(12%) hue-rotate(139deg) brightness(129%) contrast(114%);
}

/* ||[ Default */

* {
    padding: 0;
    margin: 0;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-header);
}
p {
    line-height: 1.6rem;
}
html {
    font-size: var(--font-default);
    height: 100%;
}
body {
    font-size: var(--font-default);
    font-family: var(--font-default);
    height: 100%;
    background-color: #ffffff;
}
body.submitting {
    opacity: 0.5;
    pointer-events: none;
}
.preload * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* ||] End of Default */

/* ||[ Common */

.main-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    font-size: 0;
    color: #ffffff;
    background-color: #000000;
    z-index: 100;
}
.main-header-ls {
    display: inline-block;
    width: 200px;
    height: 100px;
    vertical-align: top;
    font-size: 1.0rem;
}
.main-header-rs {
    display: inline-block;
    width: calc(100% - 200px);
    height: 100px;
    vertical-align: top;
    font-size: 1.0rem;
    text-align: right;
}
.main-header-rs button {
    display: none;
    margin-top: 4px;
    margin-right: 4px;
}
.main-header-rs ul {
    list-style: none;
    padding-left: 0;
}
.main-header-rs ul li {
    display: inline-block;
}
.main-header-rs ul li a,
.main-header-rs ul li button {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-header);
    margin: 37px 16px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.0rem;
}
.main-header-rs ul li a:hover,
.main-header-rs ul li button:hover {
    color: var(--color-theme-bg);
}
.main-header-rs ul li a.active,
.main-header-rs ul li button.active {
    color: var(--color-theme-bg);
}
.main-header-logo {
    width: 200px;
    display: inline-block;
    background-color: transparent;
    height: 100%;
    border: none;
    cursor: pointer;
}
a.main-header-logo img,
button.main-header-logo img {
    height: 50px;
    height: 100%;
}
.main-header-mb {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
    display: none;
}
.main-header-kick { height: 100px; }
.main-sidebar {
    
}
.main-mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: calc(100% - 80px);
    height: 100%;
    color: var(--color-theme-bg);
    background-color: var(--color-theme-black);
    z-index: 9;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */   
}
.main-mobile-header ul {
    list-style: none;
    padding-left: 0;
    padding-bottom: 32px;
}
.main-mobile-header ul li {
    display: block;
}
.main-mobile-header ul li a,
.main-mobile-header ul li button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 32px;
    text-decoration: none;
    color: var(--color-theme-bg);
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1.0rem;
}
.main-mobile-header .main-header-logo {
    padding: 16px 0;
}
.main-mobile-header .main-header-logo img {
    width: 100%;
    padding: 16px 0;
}
.main-body {
    min-height: calc(100% - 100px - 200px);
}
.main-footer {
    font-size: 0;
    text-align: left;
    color: var(--color-theme-bg);
    background-color: #000000;
    padding: 32px 0;
    box-sizing: border-box;
}
.main-footer-ls {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    font-size: 1.0rem;
}
.main-footer-ls div {
    margin-bottom: 2px;
}
.main-footer-rs {
    display: inline-block;
    width: 50%;
    vertical-align: bottom;
    font-size: 1.0rem;
    text-align: right;
}
.main-mobile-btn {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    height: 58px;
    font-family: var(--font-default);
    padding: 8px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    color: #202020;
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    z-index: 10;
}
.main-mobile-btn img {
    width: 40px;
    height: 40px;
}
.main-mobile-btn:hover {
    background-color: #f8f8f8;
}
.main-mobile-btn:active {
    background-color: #f0f0f0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.container-fluid {
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    font-family: var(--font-2nd);
}
.form-group div[data-type="desc"] {
    color: #808080;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    font-family: var(--font-input-default);
    padding: var(--textbox-padding);
    height: var(--textbox-height);
    line-height: var(--textbox-height);
    outline: none;
    border: 1px solid var(--color-v4-theme-third);
    border-radius: var(--textbox-border-radius);
    font-size: 1.0rem;
    background-color: #ffffff;
    box-sizing: border-box;

    -moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    resize: none;
}
.form-group input[type="text"]:disabled,
.form-group input[type="password"]:disabled,
.form-group input[type="email"]:disabled,
.form-group input[type="number"]:disabled,
.form-group input[type="tel"]:disabled,
.form-group input[type="date"]:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    color: #b0b0b0;
    background-color: #f0f0f0;
    border-color: #f0f0f0;
}
.form-group input[type="date"] {
    -moz-appearance: unset;
    -webkit-appearance: unset;
    appearance: unset;
}
.form-group input::placeholder {
    color: var(--placeholder-color);
}
.form-group textarea {
    padding: var(--textarea-padding);
    height: unset;
    line-height: 1.5rem;
}
.form-group select {
    cursor: pointer;
    padding-right: 31px;
    background: url(../svg/expand-more.svg) no-repeat, #ffffff;
    background-size: 24px;
    background-position: right 6px center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.form-group input[type="text"]:hover,
.form-group input[type="password"]:hover,
.form-group input[type="email"]:hover,
.form-group input[type="number"]:hover,
.form-group input[type="tel"]:hover,
.form-group select:hover,
.form-group textarea:hover {
    /* border-color: #d0d0d4; */
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    /* border-color: #a0a0a4; */
}
.form-group div[data-type="info"] {
    font-size: 0.8rem;
    color: #b0b0b0;
    margin-top: 8px;
}

.form-group.form-group-theme-a input[type="text"],
.form-group.form-group-theme-a input[type="email"],
.form-group.form-group-theme-a textarea {
    border-bottom: 1px solid #000000;
    background-color: transparent;
}



.textbox {
    font-size: 0.9rem;
    font-family: var(--font-default);
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.textbox::placeholder {
    color: #c0c0c0;
}
.textarea {
    font-size: 0.9rem;
    font-family: var(--font-default);
    padding: 8px 12px;
    line-height: 1.5rem;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    resize: none;
}
.combobox {
    font-size: 0.9rem;
    font-family: var(--font-default);
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 8px;

    padding-right: 40px;
    background: url('../svg/expand-more.svg') no-repeat, #ffffff;
    background-size: 24px;
    background-position: right 6px center;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
}
.btn {
    display: inline-block;
    font-size: 0.9rem;
    font-family: var(--font-default);
    padding: 0 12px;
    height: 40px;
    line-height: 38px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    color: #202020;
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
.btn.btn-theme {
    color: #ffffff;
    background: var(--color-theme);
}
.btn.btn-theme img {
    filter: invert(100%);
}
.btn.btn-theme:hover {
    background-color: #d4383d;
}
.btn.btn-success {
    color: #F3F0DF;
    background: #0EA552;
}
.btn.btn-clean {
    border: none;
}
.btn:hover {
    background-color: #f8f8f8;
}
.btn.btn-success:hover {
    background-color: #0EA552;
}
.btn:active {
    background-color: #f0f0f0;
}
.btn > img {
    vertical-align: middle;
}
.btn > img:nth-child(3) {
    margin-left: 6px;
}
.btn > span:nth-child(2) {
    margin-left: 6px;
}
.btn > span {
    display: inline-block;
    vertical-align: middle;
}
.table-wrapper {
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th {
    border: 1px solid #a0a0a0;
    padding: 4px 12px;
    text-align: left;
}
.table th.text-center { text-align: center; }
.table td {
    border: 1px solid #e8e8e8;
    padding: 4px 12px;
}
.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup.active {
    display: block;
}
.popup-body {
    width: 640px;
    padding: 16px;
    margin: 0 auto;
    margin-top: 64px;
    border-radius: 8px;
    max-height: calc(100% - 128px);
    background-color: #ffffff;
    position: relative;
}
.popup-body button[data-type="popup-close"] {
    position: absolute;
    top: 8px;
    right: 8px;

    display: inline-block;
    font-size: 0.9rem;
    font-family: var(--font-default);
    width: 40px;
    height: 40px;
    line-height: 38px;
    outline: none;
    box-sizing: border-box;
    border: none;
    color: #202020;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}
.popup-body button[data-type="popup-close"]:hover {
    background-color: #f8f8f8;
}
.popup-body button[data-type="popup-close"]:active {
    background-color: #f0f0f0;
}
.popup-body button[data-type="popup-close"] > img {
    margin-top: -2px;
    vertical-align: middle;
}
.alert {
    display: none;
    padding: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
    position: relative;
}
.alert.active {
    display: block;
}
.alert.alert--success {
    color: #4caf50;
    border-color: #4caf50;
}
.alert.alert--warning {
    color: #f26336;
    border-color: #f26336;
}
.alert.alert--danger {
    color: #eb1000;
    border-color: #eb1000;
}
.alert button[data-type="alert-close"] {
    position: absolute;
    top: 8px;
    right: 8px;

    display: inline-block;
    font-size: 0.9rem;
    font-family: var(--font-default);
    width: 40px;
    height: 40px;
    line-height: 38px;
    outline: none;
    box-sizing: border-box;
    border: none;
    color: #202020;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}
.alert button[data-type="alert-close"]:hover {
    background-color: #f8f8f8;
}
.alert button[data-type="alert-close"]:active {
    background-color: #f0f0f0;
}
.alert button[data-type="alert-close"] > img {
    margin-top: -2px;
    vertical-align: middle;
}
.tab-header {
    border-bottom: 1px solid #e0e0e0;
}
.tab-header-item {
    display: inline-block;
    vertical-align: middle;
    padding: 16px;
    color: #808080;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.tab-header-item:hover {
    background-color: #f8f8f8;
}
.tab-header-item:active {
    background-color: #f0f0f0;
}
.tab-header-item.active {
    color: #000000;
    border-bottom: 2px solid #000000;
}
.tab-body-item {
    display: none;
}
.tab-body-item.active {
    display: block;
}
hr.theme-a {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 16px 0;
}
.breadcrumb-sb {
    text-decoration: none;
    color: #808080;
}
.breadcrumb-sb img {
    vertical-align: middle;
}
.breadcrumb-sb span {
    vertical-align: middle;
}
.breadcrumb-sb:hover {
    text-decoration: underline;
    color: #404040;
}
img {
    max-width: 100%;
}
img.svg-success {
    filter: var(--color-success-svg-filter);
}
img.svg-warning {
    filter: var(--color-warning-svg-filter);
}
img.svg-danger {
    filter: var(--color-danger-svg-filter);
}
img.svg-gray {
    filter: var(--color-gray-svg-filter);
}
video {
    max-width: 100%;
}

.udp-1 {
    margin-bottom: 32px;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}
.udp-1-1 {
    color: #808080;
    font-size: 0.9rem;
}
.udp-1-2 {
    float: right;
}
.udp-1-2 input {
    width: 50px;
}

/* Mobile + Tablet */
@media only screen and (max-width: 1024px) {
    .main-header {
        display: none;
    }
    .main-header-logo {
        width: unset;
    }
    .main-sidebar {
        display: none;
        box-shadow: 16px 0 24px rgba(0, 0, 0, 0.08);
        z-index: 100;
        top: 0;
        height: 100%;
    }
    .main-sidebar.active {
        display: block;
    }
    .main-body {
        margin-left: 0;
    }
    .main-header-rs button {
        display: inline-block;
    }
    .main-header-rs ul {
        display: none;
    }
    .main-mobile-header.active {
        display: block;
    }
    .main-mobile-btn {
        display: inline-block;
    }
}

/* ||] End of Common */

/* ||[ Util */

.hidden         { display: none; }
.text-left      { text-align: left; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

.text-success   { color: #4caf50; }
.text-white     { color: #ffffff; }
.text-gray      { color: #808080; }
.text-black     { color: #000000; }
.text-theme-primary { color: var(--color-theme); }
.text-theme-bg { color: var(--color-theme-bg); }

.text-bold      { font-weight: 700; }
.text-italic    { font-style: italic; }
.text-style-normal    { font-style: normal !important; }

.va-left        { vertical-align: left !important; }
.va-middle      { vertical-align: middle !important; }
.va-right       { vertical-align: right !important; }

.float-left     { float: left; }
.float-right    { float: right; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.h-100 { height: 100%; }
.h-50 { height: 50%; }
.h1-kick { height: 3.0rem; }
.h2-kick { height: 2.0rem; }
.h3-kick { height: 1.5rem; }
.h4-kick { height: 1.0rem; }
.h5-kick { height: 0.75rem; }
.h6-kick { height: 0.5rem; }
.h7-kick { height: 0.25rem; }
.pd-16 { padding: 16px; }
.pdt-4  { padding-top: 4px; }
.pdt-8  { padding-top: 8px; }
.pdt-12 { padding-top: 12px; }
.pdt-16 { padding-top: 16px; }
.pdt-20 { padding-top: 20px; }
.pdt-24 { padding-top: 24px; }
.pdb-4  { padding-bottom: 4px; }
.pdb-8  { padding-bottom: 8px; }
.pdb-12 { padding-bottom: 12px; }
.pdb-16 { padding-bottom: 16px; }
.pdb-20 { padding-bottom: 20px; }
.pdb-24 { padding-bottom: 24px; }
.pdl-4  { padding-left: 4px; }
.pdl-8  { padding-left: 8px; }
.pdl-12 { padding-left: 12px; }
.pdl-16 { padding-left: 16px; }
.pdl-20 { padding-left: 20px; }
.pdl-24 { padding-left: 24px; }
.pdr-4  { padding-right: 4px; }
.pdr-8  { padding-right: 8px; }
.pdr-12 { padding-right: 12px; }
.pdr-16 { padding-right: 16px; }
.pdr-20 { padding-right: 20px; }
.pdr-24 { padding-right: 24px; }
.mgt-4  { margin-top: 4px; }
.mgt-8  { margin-top: 8px; }
.mgt-12 { margin-top: 12px; }
.mgt-16 { margin-top: 16px; }
.mgt-20 { margin-top: 20px; }
.mgt-24 { margin-top: 24px; }
.mgb-4  { margin-bottom: 4px; }
.mgb-8  { margin-bottom: 8px; }
.mgb-12 { margin-bottom: 12px; }
.mgb-16 { margin-bottom: 16px; }
.mgb-20 { margin-bottom: 20px; }
.mgb-24 { margin-bottom: 24px; }
.mgl-4  { margin-left: 4px; }
.mgl-8  { margin-left: 8px; }
.mgl-12 { margin-left: 12px; }
.mgl-16 { margin-left: 16px; }
.mgl-20 { margin-left: 20px; }
.mgl-24 { margin-left: 24px; }
.mgr-4  { margin-right: 4px; }
.mgr-8  { margin-right: 8px; }
.mgr-12 { margin-right: 12px; }
.mgr-16 { margin-right: 16px; }
.mgr-20 { margin-right: 20px; }
.mgr-24 { margin-right: 24px; }


/* Desktop Only */
@media only screen and (min-width: 1025px) {
    .hidden-d { display: none; }
}

/* Custom size */
@media only screen and (min-width: 1025px) and (max-width: 1170px) {
    .main-header-rs ul li a {
        font-size: 0.9rem;
        margin: 37px 12px;
    }
}

/* Tablet Only */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .hidden-t { display: none; }
}

/* Mobile Only  */
@media only screen and (max-width: 600px) {
    .hidden-m { display: none; }
}





/* ||] End of Util */

/* ||[ Template */

/* Desktop + Tablet */
@media only screen and (min-width: 601px) {}

/* Mobile + Tablet */
@media only screen and (max-width: 1024px) {}

/* Desktop Only */
@media only screen and (min-width: 1025px) {}

/* Tablet Only */
@media only screen and (min-width: 601px) and (max-width: 1024px) {}

/* Mobile Only  */
@media only screen and (max-width: 600px) {}

/* ||] End of Template */

/* ||[ Row & Column  */

.row {
    font-size: 0;
    margin: 0 -8px;
}
.col {
    display: inline-block;
    font-size: 1.0rem;
    box-sizing: border-box;
    vertical-align: top;
    padding: 0 8px;
    width: 100%;
    text-align: left;
}
.col.middle { vertical-align: middle; }
.row.row-center { text-align: center; }

/* Desktop Only */
@media only screen and (min-width: 1025px) {

    .col-d-1 { width: calc(100% * (1/12)); }
    .col-d-2 { width: calc(100% * (2/12)); }
    .col-d-3 { width: calc(100% * (3/12)); }
    .col-d-4 { width: calc(100% * (4/12)); }
    .col-d-5 { width: calc(100% * (5/12)); }
    .col-d-6 { width: calc(100% * (6/12)); }
    .col-d-7 { width: calc(100% * (7/12)); }
    .col-d-8 { width: calc(100% * (8/12)); }
    .col-d-9 { width: calc(100% * (9/12)); }
    .col-d-10 { width: calc(100% * (10/12)); }
    .col-d-11 { width: calc(100% * (11/12)); }
    .col-d-12 { width: calc(100% * (12/12)); }
    .col.col-d-100 { width: 100px; }
    .col.col-d-120 { width: 120px; }
    .col.col-d-160 { width: 160px; }
    .col.col-d-200 { width: 200px; }
    .col.col-d-240 { width: 240px; }
    .col.col-d-250 { width: 250px; }
    .col.col-d-270 { width: 270px; }
    .col.col-d-300 { width: 300px; }
    .col.col-d-400 { width: 400px; }
    .col.col-d-420 { width: 420px; }
    .col.col-d-560 { width: 560px; }
    .col.col-d-640 { width: 640px; }
    .col.col-d-720 { width: 720px; }
    .col.col-d-100-rev { width: calc(100% - 100px); }
    .col.col-d-120-rev { width: calc(100% - 120px); }
    .col.col-d-160-rev { width: calc(100% - 160px); }
    .col.col-d-200-rev { width: calc(100% - 200px); }
    .col.col-d-240-rev { width: calc(100% - 240px); }
    .col.col-d-250-rev { width: calc(100% - 250px); }
    .col.col-d-270-rev { width: calc(100% - 270px); }
    .col.col-d-300-rev { width: calc(100% - 300px); }
    .col.col-d-400-rev { width: calc(100% - 400px); }
    .col.col-d-hidden { display: none; }

}

/* Tablet Only */
@media only screen and (min-width: 601px) and (max-width: 1024px) {

    .col-t-1 { width: calc(100% * (1/12)); }
    .col-t-2 { width: calc(100% * (2/12)); }
    .col-t-3 { width: calc(100% * (3/12)); }
    .col-t-4 { width: calc(100% * (4/12)); }
    .col-t-5 { width: calc(100% * (5/12)); }
    .col-t-6 { width: calc(100% * (6/12)); }
    .col-t-7 { width: calc(100% * (7/12)); }
    .col-t-8 { width: calc(100% * (8/12)); }
    .col-t-9 { width: calc(100% * (9/12)); }
    .col-t-10 { width: calc(100% * (10/12)); }
    .col-t-11 { width: calc(100% * (11/12)); }
    .col-t-12 { width: calc(100% * (12/12)); }
    .col.col-t-420 { width: 420px; }
    .col.col-t-560 { width: 560px; }
    .col.col-t-640 { width: 640px; }
    .col.col-t-120 { width: 120px; }
    .col.col-t-120-rev { width: calc(100% - 120px); }
    .col.col-t-hidden { display: none; }

}

/* Mobile Only  */
@media only screen and (max-width: 600px) {

    .col-m-1 { width: calc(100% * (1/12)); }
    .col-m-2 { width: calc(100% * (2/12)); }
    .col-m-3 { width: calc(100% * (3/12)); }
    .col-m-4 { width: calc(100% * (4/12)); }
    .col-m-5 { width: calc(100% * (5/12)); }
    .col-m-6 { width: calc(100% * (6/12)); }
    .col-m-7 { width: calc(100% * (7/12)); }
    .col-m-8 { width: calc(100% * (8/12)); }
    .col-m-9 { width: calc(100% * (9/12)); }
    .col-m-10 { width: calc(100% * (10/12)); }
    .col-m-11 { width: calc(100% * (11/12)); }
    .col-m-12 { width: calc(100% * (12/12)); }
    .col.col-m-640 { width: 640px; }
    .col.col-m-120 { width: 120px; }
    .col.col-m-120-rev { width: calc(100% - 120px); }
    .col.col-m-hidden { display: none; }

}

/* ||] End of Row & Column */

/* ||[ Custom */

.ct-1 {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    color: #808080;
}
.ct-1.ct-1-success {
    border-color: #4caf50;
}
.ct-2 {
    font-size: 0;
}
.ct-2-1 {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    font-size: 1.0rem;
    box-sizing: border-box;
}
.ct-2-1 img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.ct-2-2 {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 100px);
    font-size: 1.0rem;
    padding: 16px;
    padding-top: 32px;
    box-sizing: border-box;
}
.ct-2-2 a {
    text-decoration: none;
    color: #202020;
    font-size: 1.2rem;
}
.ct-3 {
    padding: 16px;
    background-color: #f8f8f8;
    border-radius: 8px;
}
.ct-3-1 span:first-child {
    display: inline-block;
    vertical-align: top;
    width: 120px;
}
.ct-3-1 span:nth-child(2) {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 140px);
    font-weight: 700;
}
.ct-4 {
    white-space: nowrap;
    overflow-x: auto;
    font-size: 0;
}
.ct-4-1 {
    display: inline-block;
    vertical-align: top;
    padding: 16px;
    background-color: #f8f8f8;
    border-radius: 8px;
    margin-right: 16px;
    margin-bottom: 16px;
    width: calc(30% - 16px);
    box-sizing: border-box;
    font-size: 0.9rem;
    text-decoration: none;
    color: #202020;
}
.ct-4-1 div[data-type="title"] {
    width: 100px;
    font-size: 1.0rem;
    color: var(--color-theme);
    white-space: initial;
    min-height: 50px;
}

.ct-5-1-1 {
    border-radius: 16px;
    width: 100%;
}
.ct-6 {
    text-align: center;
    font-size: 0;
}
.ct-6-dot-dot {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 100%;
    border: 1px solid #000000;
    box-sizing: border-box;
}
.ct-6-dot-dot.active {
    border-color: var(--color-theme);
}
.ct-6-dot-dot.active .ct-6-dot-dot-inner {
    background-color: var(--color-theme);
}
.ct-6-dot-dot-inner {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    background-color: #000000;
    border-radius: 100%;
    box-sizing: border-box;
}
.ct-6-dot-line {
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 16px);
    height: 1px;
    background-color: #000000;
}
.ct-6-dot-line.active {
    background-color: var(--color-theme);
}
.ct-6-dot-line.hidden {
    opacity: 0;
}
.ct-6-name {
    margin-top: 4px;
    font-size: 1.0rem;
    font-family: var(--font-header);
}
.ct-7-1 {
    width: 100px;
    height: 6px;
    border-radius: 8px;
    background-color: var(--color-theme);
}
.ct-7-1-white {
    background-color: var(--color-theme-bg);
}
.ct-8 {
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border-radius: 32px;
    padding: 32px;
}
.ct-9 {

}
.ct-9-header {
    background-color: #000000;
    color: var(--color-theme);
    border: 1px solid #000000;
    position: relative;
    text-align: center;
    padding: 24px 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.ct-9-header h2 {
    text-align: center;
}
.ct-9-body {
    background-color: var(--color-theme-bg);
    border: 1px solid #000000;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.ct-9-body h3 {
    color: var(--color-theme);
    font-family: var(--font-default);
}
.ct-9-wrap-1 {
    padding: 16px;
}
.ct-9-wrap-2 {
    padding: 16px;
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border-bottom-right-radius: 16px;
    height: 520px;
}
.ct-9-wrap-2 h3 {
    display: inline-block;
    color: var(--color-theme-bg);
}
.ct-9-wrap-2 img {
    filter: invert(100%);
}
.ct-9-wrap-2-1 > div {
    margin-bottom: 16px;
}
.ct-9-wrap-2-1 > div > img {
    vertical-align: top;
    width: 32px;
    margin-right: 8px;
}
.ct-9-wrap-2-1 > div > div {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 46px);
    padding-top: 6px;
}
.ct-10 {
    background-color: var(--color-theme-gray);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.ct-10-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.ct-10-1 {
    color: var(--color-theme-bg);
    margin: 16px 0;
    font-size: 1.8rem;
    font-style: italic;
}
.ct-10-1 span {
    vertical-align: middle;
}
.ct-10-1 img {
    filter: invert(100%);
    vertical-align: middle;
}
.ct-10-1-small {
    font-size: 1.0rem;
}
.ct-10-filter {
    background-color: #000000;
    height: 100%;
    aspect-ratio: 16 / 9;
    /* use opacity on inline */
}
.ct-10-p-tl {
    position: absolute;
    left: 5%;
    top: 10%;
}
.ct-10-p-tl-5-30 {
    position: absolute;
    left: 5%;
    top: 30%;
}
.ct-10-p-bl {
    position: absolute;
    left: 5%;
    bottom: 10%;
}
.ct-10-p-b {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.ct-10 .btn,
.ct-10-x .btn {
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    padding: 0 32px;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
}
.ct-10vvv {
    background-color: var(--color-theme-gray);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    font-size: 0;
}
.ct-10vvv video {
    width: 100%;
}
.ct-10vvv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 10%;
    width: 100%;
    font-size: 1.0rem;
}
.ct-10vvv-1 {
    color: var(--color-theme-bg);
    margin: 16px 0;
    font-size: 1.8rem;
    font-style: italic;
}
.ct-10vvv-1 span {
    vertical-align: middle;
}
.ct-10vvv-1 img {
    filter: invert(100%);
    vertical-align: middle;
}
.ct-10vvv-1-small {
    font-size: 1.0rem;
}
.ct-10vvv-filter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000000;
    height: 100%;
    /* use opacity on inline */
}
.ct-10vvv-p-tl {
    position: absolute;
    left: 5%;
    top: 10%;
}
.ct-10vvv-p-tl-5-30 {
    position: absolute;
    left: 5%;
    top: 30%;
}
.ct-10vvv-p-bl {
    position: absolute;
    /* left: 5%; */
    left: 16%;
    bottom: 10%;
}
.ct-10vvv-p-b {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.ct-10vvv .btn {
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    padding: 0 32px;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
}
.ct-10-x {
    position: relative;
    text-align: center;
}
.ct-10-x-container {
    /* max-width: 1200px;
    margin: 0 auto; */
    padding: 0 16px;
    box-sizing: border-box;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ct-10-x-main-img {
    width: 100%;
    height: auto;
}
.ct-10-x-p-bl {
    position: absolute;
    left: 16%;
    bottom: 10%;
}
.ct-11 {
    color: var(--color-theme-bg);
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
}
.ct-11:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.ct-11 img {
    filter: invert(100%);
    display: block;
    margin: 0 auto;
}
.ct-11 span {
    display: block;
}
.ct-12 {
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    padding: 0 32px;
    height: 50px;
    line-height: 50px;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: italic;
    font-family: var(--font-default);
}
.ct-13 {
    background-color: rgba(243, 240, 223, 0.5);
    color: #000000;
    font-family: var(--font-default);
}
.ct-14 {
    text-align: center;
}
.ct-14 h2 {
    margin: 16px 0;
}
.ct-14 div[data-type="content"] {
    margin: 16px 0;
}
.ct-14 .btn {
    background-color: var(--color-theme);
    color: var(--color-theme-bg);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    padding: 0 32px;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
}
.ct-15-1 {
    border-top-left-radius: 64px;
    border-bottom-right-radius: 64px;
}
.ct-15-2 {
    border-radius: 32px;
}
.ct-15-3 {
    display: inline-block;
    width: 100px;
    height: 12px;
    background-color: #0ea552;
    border-radius: 32px;
    margin-bottom: 16px;
}
.ct-15-home-title {
    font-family: 'Termina', 'Anakotmai';
    font-weight: 700;
    font-size: 2.0rem;
    margin-bottom: 16px;
}
.ct-19.ct-19-bg-green .ct-15-home-title {
    color: #ffffff;
}
.ct-15-home-content {
    font-family: 'Anakotmai', 'STIX Two Text';
    font-weight: 500;
    font-size: 1.3rem;
}
.ct-19.ct-19-bg-green .ct-15-home-content {
    color: #000000;
}
.ct-15-about-us-title {
    font-family: 'Termina', 'Anakotmai';
    font-weight: 700;
    font-size: 2.0rem;
    /* margin-bottom: 16px; */
}
.ct-19.ct-19-bg-green .ct-15-about-us-title {
    color: #ffffff;
}
.ct-15-about-us-content {
    font-family: 'Termina';
    font-weight: 500;
    font-size: 1.3rem;
}
.ct-19.ct-19-bg-green .ct-15-about-us-content {
    color: #000000;
}
.ct-19.ct-19-bg-green .ct-15-text-white-if-bg-green {
    color: var(--color-theme-bg);
}
.ct-16 {
    position: fixed;
    bottom: 16px;
    left: calc(50% - 400px);
    width: 800px;
    height: auto;
    border-radius: 20px;
    padding: 16px;
    background-color: #ffffff;
    box-sizing: border-box;
}
.ct-16-1 {
    margin-top: 10px;
}
.ct-16-2 {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 48px);
}
.ct-16-3 {
    vertical-align: middle;
    margin-right: 12px;
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(9deg) brightness(89%) contrast(119%);
}
.ct-17-1 {
    color: var(--color-theme);
    margin-top: 12px;
    font-size: 1.5rem;
}
.ct-17-1.ct-17-1-black {
    color: #000000;
}
.ct-17-1.ct-17-1-mod1 {
    margin-top: 24px;
}
.ct-17-2 {
    font-weight: 700;
    font-style: italic;
    font-size: 1.3rem;
    margin-top: 12px;
    margin-bottom: 12px;
}
.ct-17-2.ct-17-2-mod1 {
    margin-top: 20px;
}
.ct-17-3 {
    width: 100%;
}
a.btn.ct-17-4,
button.btn.ct-17-4 {
    margin-top: 8px;
    font-family: 'STIX Two Text';
    font-weight: 500;
    font-size: 1.0rem;
    font-style: normal;
}
a.btn.ct-17-4.ct-17-4-mod1,
button.btn.ct-17-4.ct-17-4-mod1 {
    margin-top: 28px;
}
a.btn.ct-17-4.ct-17-4-mod2,
button.btn.ct-17-4.ct-17-4-mod2 {
    padding: 0 50px;
    font-size: 1.2rem;
}
.ct-17-5.ct-17-5-mod1 {
    width: 1065px;
}
.ct-18-1 {
    font-family: 'Anakotmai', 'STIX Two Text';
    font-weight: 500;
    font-size: 1.3rem;
}
.ct-19.ct-19-bg-green .ct-18-1 {
    color: #000000;
}
.ct-18-2 {
    border-left: 2px dashed #959595;
    /* height: 400px; */
    height: 100%;
    display: inline-block;
    margin-left: 32px;
}
.ct-19.ct-19-bg-green .ct-18-2 {
    border-color: #ffffff;
}
.ct-19.ct-19-bg-green {
    color: #ffffff;
    background-color: var(--color-theme);
    padding-bottom: 32px;
    margin-top: 48px;
}
.ct-19.ct-19-corner-rounded {
    border-radius: 32px;
}
.ct-20 {
    display: flex;
    flex-direction: row;
}
.ct-20-item {
    width: calc(50% - 32px);
}
.ct-20-item:nth-child(2) {
    width: 64px;
}
.ct-19-2 {
    margin-right: 16px;
}

@media only screen and (max-width: 1080px) {
    .main-header-rs ul li a,
    .main-header-rs ul li button {
        margin: 37px 12px;
        font-size: 0.95rem;
    }
}

/* Mobile + Tablet */
@media only screen and (max-width: 1024px) {
    .ct-9-wrap-2 {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .ct-10-1 {
        font-size: 1.2rem;
    }
    .ct-10-x-p-bl {
        left: 16px;
    }
    .ct-10vvv-p-bl {
        left: 16px;
    }
    
    .ct-16 {
        width: calc(80%);
        left: 10%;
    }
    .ct-16-1 {
        text-align: center;
        margin-top: 16px;
    }
}

/* Tablet Only */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .ct-4-1 {
        width: calc(40% - 16px);
    }
}

/* Mobile Only  */
@media only screen and (max-width: 600px) {
    .ct-2-1 {
        display: block;
        width: 75%;
        margin: 0 auto;
    }
    .ct-2-2 {
        display: block;
        width: 100%;
        text-align: center;
    }
    .ct-4-1 {
        width: calc(75% - 16px);
    }
}

/* ||] End Custom */

/* ||[ nd */

.nd-alertp {
    text-align: left;
    border-radius: 12px;
    margin-bottom: 24px;
    opacity: 1;
    transition: opacity 0.5s ease;
    font-size: 1.0rem;
    background-color: #f8f8f8;
    font-family: var(--font-2nd);
}
.nd-alertp-body {
    padding: 16px 24px;
}
.nd-alertp[data-type="none"] {
    margin-bottom: 0;
    opacity: 0;
}
.nd-alertp[data-type="none"] .nd-alertp-cp {
    display: none;
}
.nd-alertp[data-type="none"] .nd-alertp-body {
    padding: 0;
}
.nd-alertp[data-type="success"] {
    color: #25903c;
    background-color: #eff7ed;
}
.nd-alertp[data-type="warning"] {
    color: #d8ae33;
    background-color: #fff6ef;
}
.nd-alertp[data-type="danger"] {
    color: #e03a3a;
    background-color: #ffefef;
}
.nd-alertp-cp { float: right; }
.nd-alertp-cp button[data-type="close"] {
    font-family: var(--font-default);
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    color: #404040;
    background-color: transparent;
    padding: 0px 20px;
    outline: none;
    height: 40px;
    /*line-height: 40px;*/
    border: none;
    /*border: 1px solid #cccccc;*/
    border-radius: 24px;
    cursor: pointer;
    box-sizing: border-box;
    /*box-shadow: 0 2px 4px rgba(0, 0, 64, 0.1);*/
    margin-top: 8px;
    vertical-align: middle;
    transition: background-color ease 0.2s;
}
.nd-alertp[data-type="success"] .nd-alertp-cp button[data-type="close"] > img {
    /*color: #25903c;*/
    filter: var(--color-success-svg-filter);
    -webkit-filter: var(--color-success-svg-filter);
}
.nd-alertp[data-type="warning"] .nd-alertp-cp button[data-type="close"] > img {
    /*color: #d8ae33;*/
    filter: var(--color-warning-svg-filter);
    -webkit-filter: var(--color-warning-svg-filter);
}
.nd-alertp[data-type="danger"] .nd-alertp-cp button[data-type="close"] > img {
    /*color: #e03a3a;*/
    filter: var(--color-danger-svg-filter);
    -webkit-filter: var(--color-danger-svg-filter);
}

/* ||] End nd */