:root {
    --primary-bg-color: #f9bf10;
    --primary-linear-color: linear-gradient(212deg,rgba(249, 191, 16, 1) 3%, rgba(243, 3, 71, 1) 12%, rgba(186, 15, 143, 1) 30%, rgba(186, 15, 173, 1) 46%, rgba(254, 0, 0, 1) 69%, rgba(253, 118, 26, 1) 87%);
    --primary-linear-text-color: linear-gradient(212deg,rgba(249, 191, 16, 1) 3%, rgba(243, 3, 71, 1) 12%, rgba(186, 15, 143, 1) 30%, rgba(186, 15, 173, 1) 46%, rgba(254, 0, 0, 1) 69%, rgba(253, 118, 26, 1) 87%);
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div#siteWrapper {
    overflow-x: hidden;
}

.CommandButton, .Head, .Normal, .NormalBold, .NormalDisabled, .NormalRed, .NormalTextBox, .SubHead, .SubSubHead, a, a:hover, a:link, a:visited, body, h1, h2, h3, h4, h5, h6, input, table, td, th, li, ul, div, span {
    font-family: 'KanitLight', sans-serif;
    font-size: 16px;
    line-height: 1;
}

.fullSite {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

.footer .rights {
    padding: 10px;
    font-size: 11pt;
}

.rights {
    display: flex;
    justify-content: center;
    color: #b9b9b9;
}

.rights .lnk {
    cursor: pointer;
    text-decoration: none;
}

.rights .lnk.ft {
    color: #444;
}

.rights-txt {
    display: inline-block;
}

.main-bnr {
    background-image: url("/portals/0/images/banner/banner-04-wide.jpg");
    background-size: auto 100%;
    background-position: left center;
    position: relative;
    overflow: hidden;
    animation: moveBackground 80s linear infinite alternate;
    min-height: 100vh;
}

.main-bnr::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 30%);
    z-index: 0;
}

@keyframes moveBackground {
    0% {
        background-position: left center;
    }
    100% {
        background-position: right center;
    }
}

.section.who-are-we {
    background-color: #fcf8f8;
}

a.logo-img img {
    width: 120px;
    /* box-shadow: 2px 1px 5px #212121; */
    background-color: #353535;
}

.box-r {
    position: relative;
}

.box-r a.logo-img {
    position: fixed;
    top: 0px;          /* ระยะที่ต้องการให้ 'แปะ' ค้างไว้เมื่อ Scroll ลงมา */
    left: 20px;         /* ระยะห่างจากขอบซ้ายของ .box-r */
    z-index: 99;        /* ให้ลอยทับ Content อื่น */
    display: inline-block;
}

.main-bnr .main-menu {
    width: 100%;
    text-align: center;
    padding: 1rem 0px;
}

.main-menu .lnk.main {
    color: white;
    margin: 0px 1rem;
    text-decoration: none;
    font-size: 1.125rem;
    cursor: pointer;
}

.announce-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 2rem;
    /* flex-wrap: wrap; */
    width: 100%;
}

.announce-box .content {
    font-size: 2.8rem;
    color: white;
    text-shadow: 1px 1px 5px black;
    padding-bottom: .8em;
    font-family: 'Kanit';
}

.announce-box .content-desc.desc-2 {
    font-size: 1.25rem;
}

span {
    font-size: inherit;
    font-family: inherit;
    text-decoration: inherit;
}

.card.card-main {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card.card-main .card-info {
    padding: 1.3rem 1.6rem;
}

.title-primary {
    background: var(--primary-linear-text-color);
    -webkit-background-clip: text;
    width: fit-content;
    background-clip: text;
    color: transparent;
}

.title {
    font-weight: bold;
    font-size: 2rem;
    font-family: Kanit;
}

.section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.sub-title {
    color: #222;
    font-size: 1.1rem;
    line-height: 1.2;
}

.card.card-main .card-info i {
    font-size: 20pt;
    color: #222;
}

.card.card-main .card-info .content {
    font-size: .9rem;
    line-height: 1.2;
}

.card.card-main .card-info .title {
    font-family: 'KanitLight';
    color: #222;
    font-size: 1rem;
    min-height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-main .card-ft {
    background: var(--primary-bg-color);
    background: var(--primary-linear-color);
}

.secondary-bg {
    background-color: #e7e6e7;
}

a.lnk.social-i {
    background-color: #222;
    border-radius: 6px;
    color: white;
    display: inline-flex;
    aspect-ratio: 1/1;
    justify-content: center;
    align-items: center;
    padding: .4rem;
    margin: 7px;
    text-decoration: none;
    box-shadow: 2px 1px 2px #939393;
}

.contact-item {
    display: flex;
    padding: 6px;
    font-size: 16px;
    color: #222;
}

.contact-item i {
    font-size: 16pt;
    margin-right: 8px;
}

.img-info-16 {
    aspect-ratio: 26/9;
    background-size: cover;
}

.about-info-01 {
    background-image: url("/portals/0/images/bg/about-img-01.jpg");
}

.about-info-02 {
    background-image: url("/portals/0/images/bg/about-img-02.jpg");
}

.about-info-03 {
    background-image: url("/portals/0/images/bg/about-img-04.jpg");
}

.section.about {
    background-image: url("/portals/0/images/bg/about-bg.jpg");
    background-size: cover;
    background-position: top center;
}

.white-txt {
    color: white;
}

.contact-item .content {
    font-size: 15pt;
}

.menu-bar {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    background-color: #353535;
    min-height: 60px;
}

.ham-menu {
    display: inline-block;
    color: white;
    position: absolute;
    right: 0;
    top: 13px;
    font-size: 26pt;
}

.overlay-menu {
    position: fixed;
    top: 0;
    right: -100%; /* ซ่อนไว้ทางขวาของหน้าจอ */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* สีพื้นหลังดำโปร่งแสง */
    background: var(--primary-bg-color);
    background: var(--primary-linear-color);
    z-index: 9999;
    transition: 0.5s; /* ความเร็วในการเลื่อน */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-menu.active {
    right: 0;
    width: 100vw;
    left: 0px;
    height: 100vh;
}

.menu-content a {
    display: block;
    font-size: 36px;
    color: white;
    text-decoration: none;
    margin: 1.5rem 0;
    padding-bottom: 1.5rem;
    text-align: center;
    transition: 0.3s;
    border-bottom: 1px dashed rgb(219 219 219 / 20%);
}

.menu-content a:hover {
    color: #f1f1f1;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: #fff;
    cursor: pointer;
}

.menu-content a:last-child {
    border: none;
}

div#side-menu nav {
    display: block;
}

.main-menu {
    display: none;
}

.sdp-mx-3 {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.primary-bg {
    background: var(--primary-bg-color);
    background: var(--primary-linear-color);
}

.primary-bg .page-title {
    color: white;
    font-size: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.breadcrum-bg {
    background-color: #e9ecef;
}

ol.breadcrumb {
    margin: 0px;
}

.breadcrum-bg nav {
    padding: 1em 0px;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 8px;
}

.breadcrum-bg a {
    color: #952d5f;
}

.fix-bar .main-menu .lnk.main {
    color: white;
}

.fix-bar .main-menu {
    text-align: center;
}

.fix-bar .box-r {
    min-height: 50pt;
}

.fix-bar .ham-menu {
    color: white;
    top: 16px;
}

.section.info {
    padding: 40px 0;
}

.section.info .headline {
    font-weight: bold;
    font-size: 1.4rem;
    color: #222;
    line-height: 1.2;
    display: inline-block;
}

.section.info.sub .headline {
    font-size: 1.2rem;
}

.section.info .content {
    font-size: 1rem;
    color: #222;
    line-height: 1.2;
    display: inline-block;
}

.image-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.flex-box {
    display: flex;
    height: 100%;
    padding: 1rem;
    flex-direction: column;
}

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

.info-bg {
    background-color: #f3f3f3;
}


.content-box.portfolio {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bg-4c .bg-col-item:nth-of-type(1),
.bg-4c .bg-col-item:nth-of-type(3){
    background-color: #efefef;
}

.bg-4c .bg-col-item:nth-of-type(2),
.bg-4c .bg-col-item:nth-of-type(4){
    background-color: white;
}

.content-box.portfolio .logo {
    margin-bottom: 10px;
}

.footer .company {
    padding: 15px;
}

.footer {
    background-color: #353535;
}

.rights > .container {
    border-top: 1px solid #6d6d6d;
    padding-top: 10px;
}

.footer .logo img {
    width: 100%;
    max-width: 100px;
}

.footer .address {
    color: #b9b9b9;
    line-height: 1.2;
    font-size: 11pt;
}

.rights-txt {
    font-size: 11pt;
}

.content-box.portfolio .logo img {
    width: 100%;
}



.otro-blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:#78C0A8;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.otro-blockquote::after{
  content: '';
}

.otro-blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
.otro-blockquote{
  font-size: 1.2em;
  width: 100%;
  margin: 3rem auto 2rem;
  color: #555555;
  padding: 1.2em 30px 1.2em 50px;
  border-left: 8px solid #f02c24;
  line-height: 1.2;
  position: relative;
  background: rgb(237 237 237 / 90%);
  margin-top: 18rem;
}

.otro-blockquote::before{
  font-family:Arial;
  content: "\201C";
  color: #eb5441;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.otro-blockquote::after{
  content: '';
}

.otro-blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
  line-height: 1.2;
}

.quote-bg {
    background: #FFF5F5;
    background: linear-gradient(180deg, rgba(255, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 54%);
}

.ks-q {
    background-image: url("/portals/0/images/photo/ks.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 80%;
}

.otro-blockquote span.source {
    font-size: 11pt;
    font-weight: normal;
    font-style: italic;
    color: #878787;
    margin-top: 5px;
}

.announce-box .content-desc {
    color: white;
    font-size: 1.8rem;
    text-shadow: 1px 1px 5px black;
}

.sub-title.vision {
    font-size: 1.4rem;
}

.content-desc.bold {
    font-family: kanit;
}

/* การตั้งค่าพื้นฐาน */
.reveal {
    opacity: 0;
    transition: all 1.0s ease-out; /* ปรับความเร็วตรงนี้ (1.0s) */
}

/* 1. ค่อยๆ เลื่อนจากขวามาซ้าย */
.from-right {
    transform: translateX(100px);
}

/* 2. ค่อยๆ เลื่อนจากซ้ายมาขวา */
.from-left {
    transform: translateX(-100px);
}

/* 3. ค่อยๆ เลื่อนจากล่างขึ้นบน */
.from-bottom {
    transform: translateY(100px);
}

/* สถานะเมื่อ Scroll มาถึง (Active) */
.reveal.active {
    opacity: 1;
    transform: translate(0, 0); /* กลับสู่ตำแหน่งปกติ */
}

.section.top-shadow {
    background-image: url(/portals/0/images/bg/shadows.png);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.mbg {
    background-color: #353535;
}

a.lnk.main::after {
    content: '';
    display: block;
    width: 0;
    height: 5px;
    background: rgb(254 36 8);
    background: var(--primary-linear-color);
    transition: width .3s;
    border-radius: 2px;
}

a.lnk.main::before {
    content: '';
    display: block;
    width: 0;
    height: 5px;
    border-radius: 2px;
}

a.lnk.main.active::after,
a.lnk.main:hover::after {
    width: 100%;
}

.modal-fs {
    background: transparent;
}

.modal-dialog.modal-fs {
    max-width: 99vw;
}

.modal-fs .modal-header {
    border: none;
}

.expand-area {
        position: absolute;
    width: 100%;
    height: 100%;
    display: inline-flex;
    left: 0;
    top: 0;
    color: rgb(185 53 53);
    background-color: rgb(53 53 53 / 4%);
    border-radius: 4pt;
    cursor: zoom-in;
}

.content-box.portfolio .subject, .content-box.portfolio .content {
    font-size: 1rem;
}

.content-box.portfolio .subject {
    color: #222;
    font-weight: bold;
    padding-bottom: 8px;
}

.content-box.portfolio .content {
    color: #666;
}

.expand-area i.fa-arrows-maximize {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 2em;
}

.lnk.main.sep-r {
    border-right: 1px solid #919191;
    padding-right: 10px;
    margin-right: 10px !important;
}

.lnk.main.nf {
    color: #636363 !important;
}

.lnk.main.nf:hover {
    color: #fff !important;
}

.lngBtn {
    display: flex;
    justify-content: center;
}

.bold {
    font-weight: bold;
}

.inherit {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    display: inline-block !important;
    margin: inherit !important;
    box-sizing: inherit !important;
    color: inherit !important;
    white-space: inherit !important;
}

@media screen and (max-width: 768px) {
    .image-box {
        padding: 35px 20px;
    }
}

@media screen and (min-width: 576px) {
    .bg-4c .bg-col-item:nth-of-type(1),
    .bg-4c .bg-col-item:nth-of-type(4){
        background-color: #efefef;
    }
    
    .bg-4c .bg-col-item:nth-of-type(2),
    .bg-4c .bg-col-item:nth-of-type(3){
        background-color: white;
    }
}

@media screen and (min-width: 768px) {
    .sdp-mx-3 {
        margin-right: 1rem;
        margin-left: 1rem;
    }
    .section.info {
        padding: 80px 0;
    }

    .ks-q {
        background-image: url("/portals/0/images/photo/ks.png");
        background-repeat: no-repeat;
        background-position: top right;
        background-size: initial;
    }

    .otro-blockquote {
        margin-top: 13rem;
        font-size: 1.5em;
    }
        
}

@media screen and (min-width: 992px) {
    .ham-menu,
    .overlay-menu { 
        display: none;
    }

    .main-menu {
        display: inline-flex;
        width: 100%;
        justify-content: end;
        align-items: center;
    }

    .menu-bar > .container {
        max-width: 960px;
    }
    
}

@media screen and (min-width: 1200px) {
    .menu-bar > .container {
        max-width: 1140px;
    }
    .otro-blockquote {
        margin-top: 13rem;
        font-size: 1.6em;
    }
}

@media screen and (min-width: 1400px) {
    .menu-bar > .container {
        max-width: 1320px;
    }
    
}


.wait-txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: calc(100vh - 181px);
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12pt;
}

.wait-frame {
    background-color: #353535;
}