@charset "utf-8";
/* CSS Document */
/* =========================================================
   OVERLAND 4x4 : Landing Page (ตามไฟล์ Figma ของดีไซเนอร์ "Overland")
   Structure  : Bootstrap 5.3.8 grid + custom style
   Font       : DB Heavent (ดู assets/fontface/stylesheet.css)
   Color      : #3A3B3B (primary) / #EE9940 (accent) / #282929 (dark) / #222222 (text)
                #CFCFCF (text on dark) / #5C5C5C (muted) / #D6D5CF (sand)
   Size       : ตัวเลข px ทั้งหมดอ้างอิงจากแบบ Desktop 1440 / Tablet 834 / Mobile 390
   ========================================================= */

/* ===================== Base ===================== */
html {max-width: 1920px;width: 100%!important;margin: 0 auto;background: #282929;}
body {font-size: 22px;position: relative;color: #222222;max-width: 1920px;font-family: "DB Heavent", sans-serif;font-weight: 400;font-style: normal;line-height: 1.25;margin: 0 auto;overflow-x: clip;background: #282929;}
/* body ใช้ overflow-x: clip (ไม่ใช่ hidden) เพื่อให้ header แบบ sticky ทำงาน */
p {font-size: inherit;color: inherit;margin-bottom: 0;}
img {max-width: 100%;height: auto;width: auto;}
a, div a, p a {color: inherit;text-decoration: none!important;outline: none;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
a:hover, div a:hover, p a:hover {color: #EE9940;}
h1, h2, h3, h4 {font-family: inherit;font-weight: 700;font-style: normal;line-height: 1.15;margin-bottom: 0;}
ul {list-style: none;margin: 0;padding: 0;}
.clear {clear: both;}
.content-wrap {width: 90%;margin: 0 auto;max-width: 1160px;position: relative;z-index: 9;}
.system-pc {display: block;}
.system-mb {display: none;}
.line-accent {height: 4px;background: #EE9940;width: 100%;}

/* ===================== Texture BG (ภาพปูน + สีทับตามแบบ) ===================== */
.bg-concrete-1, .bg-concrete-2 {position: relative;isolation: isolate;}
.bg-concrete-1 {background: #222222 url('../images/common/bg-concrete-1.webp') center center / cover;}
.bg-concrete-2 {background: #464747 url('../images/common/bg-concrete-2.webp') center center / cover;}
.bg-concrete-1::before, .bg-concrete-2::before {content: '';position: absolute;inset: 0;z-index: -1;background: rgba(34,34,34,.7);}
.sec-home-stat.bg-concrete-1::before {background: rgba(22,22,22,.8);}
.sec-home-catalog.bg-concrete-2::before {background: rgba(70,71,71,.7);}

/* ===================== Title ===================== */
.title-eyebrow {display: block;font-size: 24px;font-weight: 500;line-height: 1.2;color: #3A3B3B;margin-bottom: 12px;}
.title-main {font-size: 60px;font-weight: 700;line-height: 1.2;color: #222222;}
.title-bar {display: block;width: 56px;height: 4px;background: #EE9940;margin-top: 12px;}
.title-wh .title-eyebrow {color: #CFCFCF;}
.title-wh .title-main {color: #FFFFFF;}

/* ===================== Button ===================== */
.btn-defualt-ol {display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 48px;padding: 0 22px;border: 2px solid #3A3B3B;border-radius: 2px;color: #3A3B3B;font-weight: 500;font-size: 22px;line-height: 1;background: transparent;}
.btn-defualt-ol:hover {background: #EE9940;border-color: #EE9940;color: #222222;}
.btn-defualt-ol.btn-wh {border-color: #FFFFFF;color: #FFFFFF;}
.btn-defualt-ol.btn-wh:hover {background: #EE9940;border-color: #EE9940;color: #222222;}

/* ===================== Header ===================== */
.header-main {position: sticky;top: 0;z-index: 999;width: 100%;background: #FFFFFF;border-top: 4px solid #EE9940;-webkit-transition: box-shadow .3s ease-in-out;transition: box-shadow .3s ease-in-out;}
.header-main.header-scroll {box-shadow: 0 6px 20px rgba(0,0,0,.18);}
.header-main .wrap-menumain-row {display: flex;align-items: center;justify-content: space-between;gap: 24px;min-height: 89px;padding: 12px 0;}
.header-main .logo-main img {display: block;height: 64px;width: auto;-webkit-transition: height .3s ease-in-out;transition: height .3s ease-in-out;}
.header-main.header-scroll .logo-main img {height: 52px;}
.header-main .menu-list-item {display: flex;align-items: center;gap: 28px;}
.header-main .menu-list-item a {display: block;white-space: nowrap;padding: 4px 0;font-weight: 500;font-size: 24px;line-height: 1.2;color: #535355;border-bottom: 2px solid transparent;}
.header-main .menu-list-item a:hover, .header-main .menu-list-item a.active {color: #222222;border-bottom-color: #EE9940;}
.header-main .wrap-menumain-other {display: flex;align-items: center;gap: 16px;}
.btn-line-head {display: inline-flex;align-items: center;gap: 8px;min-height: 44px;padding: 0 18px;border: 2px solid #535355;border-radius: 2px;color: #535355;font-weight: 500;font-size: 24px;line-height: 1;}
.btn-line-head svg {width: 30px;height: 30px;flex-shrink: 0;}
.btn-line-head:hover {background: #EE9940;border-color: #EE9940;color: #222222;}
.switch-lang {display: flex;align-items: center;gap: 4px;font-weight: 700;font-size: 20px;color: #5C5C5C;}
.switch-lang a {display: block;padding: 8px 2px;color: #9A9A9A;}
.switch-lang a.lang-active {color: #5C5C5C;}
.switch-lang i {font-style: normal;color: #5C5C5C;}
#mainmenu-button-mb {display: none;width: 44px;height: 44px;border: 0;border-radius: 2px;background: #3A3B3B;padding: 0;position: relative;cursor: pointer;}
#mainmenu-button-mb span {position: absolute;left: 12px;width: 20px;height: 2px;background: #FFFFFF;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
#mainmenu-button-mb span:nth-child(1) {top: 15px;}
#mainmenu-button-mb span:nth-child(2) {top: 21px;}
#mainmenu-button-mb span:nth-child(3) {top: 27px;}
#mainmenu-button-mb.open span:nth-child(1) {top: 21px;transform: rotate(45deg);}
#mainmenu-button-mb.open span:nth-child(2) {opacity: 0;}
#mainmenu-button-mb.open span:nth-child(3) {top: 21px;transform: rotate(-45deg);}

/* ===================== Banner ===================== */
.section-banner {position: relative;background: #1F2020;overflow: hidden;}
.section-banner .banner-media {position: relative;width: 100%;height: 46vw;max-height: 884px;overflow: hidden;}
.section-banner .banner-media::after {content: '';position: absolute;inset: 0;background: rgba(0,0,0,.12);}
.section-banner .banner-media img, .section-banner .banner-media video {display: block;width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.section-banner .banner-caption {position: absolute;inset: 0;z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 16px;text-align: center;color: #FFFFFF;text-shadow: 0 2px 18px rgba(0,0,0,.35);}
.section-banner .banner-title {font-size: clamp(32px, 6.667vw, 128px);font-weight: 900;font-style: italic;line-height: 1.1;}
.section-banner .banner-sub {font-size: clamp(22px, 3.333vw, 64px);font-weight: 900;font-style: italic;line-height: 1.2;}

/* ===================== Stat ===================== */
.sec-home-stat {color: #FFFFFF;}
.sec-home-stat .stat-list-item {display: flex;align-items: center;gap: 16px;padding: 36px 24px;height: 100%;}
.sec-home-stat .col-4:first-child .stat-list-item {padding-left: 0;}
.sec-home-stat .stat-num {font-size: 64px;font-weight: 900;line-height: 1;color: #EE9940;white-space: nowrap;}
.sec-home-stat .stat-txt {font-size: 24px;line-height: 1.05;color: #CFCFCF;}

/* ===================== About ===================== */
.sec-home-about {color: #FFFFFF;}
.about-who-row .about-who-img {flex: 0 0 46.111%;width: 46.111%;position: relative;min-height: 600px;overflow: hidden;}
.about-who-row .about-who-img img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
.about-who-row .about-who-ct {flex: 0 0 53.889%;width: 53.889%;padding: 56px 72px;display: flex;flex-direction: column;justify-content: center;gap: 20px;}
.about-who-ct .title-eyebrow {margin-bottom: 8px;}
.about-who-ct .title-main {font-size: 70px;font-weight: 900;line-height: 1.07;}
.about-who-ct .title-bar {margin-top: 20px;}
.about-who-ct .about-who-lead {font-size: 28px;line-height: 1.2;color: #FFFFFF;}
.about-who-ct .about-who-txt {font-size: 22px;line-height: 1.18;color: #CFCFCF;}
.about-quote {border-top: 1px solid #454646;padding-top: 16px;}
.about-quote h3 {font-size: 40px;font-weight: 700;line-height: 1.2;color: #EE9940;}
.about-quote p {font-size: 22px;color: #CFCFCF;}
.about-company {border-top: 1px solid #3A3B3B;padding-top: 56px;}
.about-company .row {--bs-gutter-x: 64px;}
.about-company-ct .title-eyebrow {font-size: 20px;color: #CFCFCF;}
.about-company-ct h3 {font-size: 40px;font-weight: 900;line-height: 1.2;color: #FFFFFF;margin-bottom: 12px;}
.about-company-ct p {font-size: 22px;line-height: 1.18;color: #CFCFCF;}
.about-company-ct p + p {margin-top: 12px;}
.about-feature-list li {display: flex;align-items: flex-start;gap: 20px;padding: 14px 0;border-bottom: 1px solid #454646;}
.about-feature-list li:first-child {padding-top: 0;}
.about-feature-list li:last-child {border-bottom: 0;}
.about-feature-list .ico-accent {flex-shrink: 0;width: 50px;height: 50px;color: #EE9940;}
.about-feature-list .ico-accent svg {width: 100%;height: 100%;display: block;}
.about-feature-list h4 {font-size: 28px;font-weight: 700;line-height: 1.2;color: #FFFFFF;}
.about-feature-list p {font-size: 22px;line-height: 1.18;color: #CFCFCF;}
.about-motto {padding: 36px 0 60px;}
.about-motto p {font-size: 40px;font-weight: 500;line-height: 1.2;color: #FFFFFF;}

/* ===================== Catalog ===================== */
.sec-home-catalog {padding: 96px 0;color: #FFFFFF;}
.catalog-head {display: flex;align-items: flex-end;justify-content: space-between;gap: 16px;margin-bottom: 48px;}
.catalog-head p {max-width: 440px;font-size: 22px;color: #CFCFCF;}
.catalog-group {display: flex;gap: 48px;padding-top: 32px;border-top: 1px solid #5E5F5F;}
.catalog-head + .catalog-group {border-top-color: #EE9940;}
.catalog-group + .catalog-group {margin-top: 48px;}
.catalog-group-head {flex: 0 0 260px;}
.catalog-num {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: #EE9940;color: #222222;font-size: 32px;font-weight: 900;line-height: 1;margin-bottom: 6px;}
.catalog-group-title h3 {font-size: 40px;font-weight: 700;line-height: 1.2;color: #EE9940;}
.catalog-group-title p {font-size: 22px;}
.catalog-group-title .catalog-sub {display: block;font-weight: 500;font-style: italic;color: #FFFFFF;}
.catalog-group-title .catalog-count {display: block;color: #CFCFCF;}
.catalog-list-item {flex: 1 1 auto;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 16px;align-content: start;}
.catalog-tile {display: flex;align-items: center;gap: 16px;min-height: 114px;padding: 12px 12px 12px 16px;background: #FFFFFF;border: 1px solid #E3E3E1;color: #222222;}
.catalog-tile:hover {color: #222222;border-color: #EE9940;box-shadow: 0 10px 24px rgba(0,0,0,.28);transform: translateY(-3px);}
.catalog-tile-img {flex-shrink: 0;width: 88px;height: 88px;background: #F4F4F4;overflow: hidden;}
.catalog-tile-img img {display: block;width: 100%;height: 100%;object-fit: contain;}
.catalog-tile-txt {flex: 1 1 auto;min-width: 0;display: flex;flex-direction: column;}
.catalog-tile-txt strong {font-size: 28px;font-weight: 700;line-height: 1.15;}
.catalog-tile-txt span {font-size: 20px;line-height: 1.15;color: #5C5C5C;}
.catalog-tile-btn {flex-shrink: 0;display: inline-flex;align-items: center;gap: 6px;height: 44px;padding: 0 14px;border-radius: 2px;background: #EE9940;color: #222222;font-size: 20px;font-weight: 700;line-height: 1;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.catalog-tile-btn svg {width: 24px;height: 24px;color: #3A3B3B;}
.catalog-tile:hover .catalog-tile-btn {background: #3A3B3B;color: #FFFFFF;}
.catalog-tile:hover .catalog-tile-btn svg {color: #FFFFFF;}

/* ===================== Contact ===================== */
.sec-home-contact {position: relative;padding: 96px 0;background: #D6D5CF;border-top: 1px solid #BDBCB6;overflow: hidden;}
.sec-home-contact .contact-ridge {position: absolute;left: 0;bottom: 82px;width: 100%;height: 330px;pointer-events: none;z-index: 0;}
.sec-home-contact .title-wrap {margin-bottom: 40px;}
.contact-hq {background: #282929;border-top: 4px solid #EE9940;color: #FFFFFF;}
.contact-hq-ct {flex: 0 0 52.759%;width: 52.759%;padding: 48px;display: flex;flex-direction: column;gap: 18px;}
.contact-hq-label {font-size: 22px;line-height: 1.2;}
.contact-hq-ct h3 {font-size: 40px;font-weight: 700;line-height: 1.2;}
.contact-hq-ct h3 small {display: block;font-size: 32px;font-weight: 700;line-height: 1.15;}
.contact-hq-ct p, .contact-hq-list li {font-size: 22px;line-height: 1.18;}
.contact-hq-list li + li {margin-top: 4px;}
.contact-hq-list .txt-mail {word-break: break-all;}
.contact-hq-map {flex: 0 0 47.241%;width: 47.241%;position: relative;display: block;min-height: 500px;overflow: hidden;}
.contact-hq-map img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;-webkit-transition: transform .6s ease;transition: transform .6s ease;}
.contact-hq-map:hover img {transform: scale(1.04);}
.contact-channel {position: relative;margin-top: 40px;}
.contact-channel h4 {font-size: 36px;font-weight: 700;line-height: 1.2;color: #222222;margin-bottom: 16px;}
.channel-row {--bs-gutter-x: 16px;--bs-gutter-y: 16px;}
.channel-card {display: flex;align-items: center;gap: 14px;height: 100%;min-height: 91px;padding: 18px 20px;background: #FFFFFF;border: 1px solid #D6D6D3;color: #222222;}
.channel-card:hover {color: #222222;border-color: #EE9940;transform: translateY(-3px);box-shadow: 0 10px 22px rgba(0,0,0,.12);}
.channel-ico {flex-shrink: 0;width: 50px;height: 50px;color: #535355;-webkit-transition: color .3s ease-in-out;transition: color .3s ease-in-out;}
.channel-ico svg {display: block;width: 100%;height: 100%;}
.channel-card:hover .channel-ico {color: #EE9940;}
.channel-txt {display: flex;flex-direction: column;min-width: 0;}
.channel-txt strong {font-size: 28px;font-weight: 500;line-height: 1.15;}
.channel-txt span {font-size: 20px;line-height: 1.15;color: #5C5C5C;overflow-wrap: anywhere;}

/* ===================== Footer ===================== */
footer {border-top: 4px solid #EE9940;color: #CFCFCF;}
footer .footer-wrap {display: flex;justify-content: space-between;gap: 32px;padding: 64px 0 32px;}
footer .footer-logo img {display: block;height: 84px;width: auto;}
footer .footer-brand p {font-size: 22px;margin-top: 18px;}
footer .footer-nav {display: flex;gap: 56px;}
footer .footer-title {display: block;font-size: 24px;font-weight: 700;line-height: 1.2;color: #FFFFFF;margin-bottom: 10px;}
footer .footer-menu li {font-size: 22px;line-height: 1.18;}
footer .footer-menu li + li {margin-top: 10px;}
footer .copyright-wrap {border-top: 1px solid #3A3B3B;padding: 20px 0 28px;}
footer .copyright-wrap .content-wrap {display: flex;justify-content: space-between;align-items: center;gap: 12px;}
footer .copyright-wrap p {font-size: 22px;}
footer .footer-copyrigh-menu {display: flex;gap: 20px;font-size: 22px;}

/* ===================== Go To Top ===================== */
.gototop {display: none;position: fixed;right: 24px;bottom: 24px;z-index: 99;width: 48px;height: 48px;border: 0;border-radius: 2px;background: #EE9940;color: #222222;padding: 12px;cursor: pointer;box-shadow: 0 6px 16px rgba(0,0,0,.25);}
.gototop svg {display: block;width: 24px;height: 24px;}
.gototop:hover {background: #3A3B3B;color: #FFFFFF;}

/* ===================== Animation on Scroll ===================== */
/* .fade-scroll = เลื่อนขึ้น / .slide-down = เลื่อนลงจากด้านบน / .fade-only = จางเข้า */
.fade-scroll, .slide-down, .fade-only {opacity: 0;-webkit-transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);}
.fade-scroll {transform: translateY(40px);}
.slide-down {transform: translateY(-50px);}
.fade-scroll.is-show, .slide-down.is-show, .fade-only.is-show {opacity: 1;transform: none;}
[data-delay="1"] {transition-delay: .2s!important;}
[data-delay="2"] {transition-delay: .4s!important;}
[data-delay="3"] {transition-delay: .6s!important;}
.catalog-tile.is-show, .channel-card {-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .fade-scroll, .slide-down, .fade-only {opacity: 1;transform: none;transition: none;}
}

/* ===================== Responsive ===================== */
@media only screen and (max-width: 1366px) {
  .about-who-row .about-who-ct {padding: 48px 56px;}
  .about-who-ct .title-main {font-size: 60px;}
}

@media only screen and (max-width: 1200px) {
  .header-main .wrap-menumain-row {min-height: 79px;}
  .header-main .logo-main img {height: 54px;}
  .header-main .menu-list-item {gap: 22px;}
  .sec-home-stat .stat-list-item {padding: 30px 16px;gap: 12px;}
  .sec-home-stat .stat-num {font-size: 60px;}
  .sec-home-stat .stat-txt {font-size: 20px;}
  .about-who-row .about-who-img {min-height: 497px;}
  .about-who-row .about-who-ct {padding: 40px 36px;gap: 14px;}
  .about-who-ct .title-eyebrow {font-size: 20px;}
  .about-who-ct .title-main {font-size: 48px;line-height: 1.04;}
  .about-who-ct .title-bar {margin-top: 14px;}
  .about-who-ct .about-who-lead {font-size: 22px;}
  .about-who-ct .about-who-txt, .about-quote p, .about-company-ct p, .about-feature-list p {font-size: 18px;}
  .about-quote h3 {font-size: 32px;}
  .about-feature-list h4 {font-size: 24px;}
  .about-motto p {font-size: 30px;}
  .title-eyebrow {font-size: 20px;}
  .title-main {font-size: 50px;}
  .catalog-head p {font-size: 18px;}
  .catalog-group {gap: 32px;}
  .catalog-group-head {flex-basis: 220px;}
  .catalog-tile-txt strong {font-size: 24px;}
  .catalog-tile-txt span {font-size: 18px;}
  .contact-hq-ct {padding: 32px 28px;background: var(--bs-black);}
  .contact-hq-label, .contact-hq-ct p, .contact-hq-list li {font-size: 18px;}
  .contact-hq-ct h3 {font-size: 32px;}
  .contact-hq-ct h3 small {font-size: 24px;}
  .contact-hq-map {min-height: 417px;}
  .contact-channel h4 {font-size: 32px;}
  .channel-txt strong {font-size: 24px;}
  footer .footer-brand p, footer .footer-menu li {font-size: 20px;}
  footer .footer-title {font-size: 20px;}
  footer .copyright-wrap p, footer .footer-copyrigh-menu {font-size: 18px;}
}

/* Tablet (แบบ 834) */
@media only screen and (max-width: 980px) {
  .content-wrap {width: calc(100% - 80px);}
  .section-banner .banner-media {height: 48vw;}
  .about-company {padding-top: 48px;}
  .about-company .row {--bs-gutter-x: 24px;--bs-gutter-y: 28px;}
  .header-main .menu-list-item {gap: 28px;}
  .catalog-head p {max-width: 320px;}
  .about-motto {padding: 36px 0 56px;}
  .about-motto p {font-size: 24px;}
  .sec-home-catalog {padding: 72px 0;}
  .catalog-head {margin-bottom: 36px;}
  .catalog-group {flex-direction: column;gap: 20px;padding-top: 28px;}
  .catalog-group + .catalog-group {margin-top: 36px;}
  .catalog-group-head {flex-basis: auto;display: flex;align-items: center;gap: 14px;}
  .catalog-num {margin-bottom: 0;}
  .catalog-group-title p {font-size: 18px;}
  .catalog-group-title .catalog-sub {display: inline;font-style: normal;}
  .catalog-group-title .catalog-count {display: inline;}
  .catalog-group-title .catalog-count::before {content: ' · ';}
  .catalog-list-item {gap: 14px;}
  .sec-home-contact {padding: 72px 0;}
  .sec-home-contact .title-wrap {margin-bottom: 32px;}
  .sec-home-contact .contact-ridge {height: 191px;bottom: 50px;}
  .contact-hq-ct {flex-basis: 51.6%;width: 51.6%;}
  .contact-hq-map {flex-basis: 48.4%;width: 48.4%;}
  .btn-defualt-ol {font-size: 20px;}
  .contact-channel {margin-top: 32px;}
  .channel-row {--bs-gutter-x: 14px;--bs-gutter-y: 14px;}
  footer .footer-wrap {padding: 52px 0 28px;}
  footer .footer-logo img {height: 78px;}
  footer .footer-nav {gap: 32px;}
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .system-pc {display: none;}
  .system-mb {display: block;}
  .content-wrap {width: calc(100% - 40px);}
  .header-main .content-wrap {position: static;}
  .header-main .wrap-menumain-row {min-height: 67px;padding: 10px 0;gap: 12px;}
  .header-main .logo-main img {height: 46px;}
  .header-main.header-scroll .logo-main img {height: 40px;}
  .header-main .wrap-menumain-other {gap: 8px;}
  .btn-line-head {width: 44px;padding: 0;justify-content: center;border-width: 1px;}
  .btn-line-head span {display: none;}
  .switch-lang {font-size: 16px;}
  #mainmenu-button-mb {display: block;}
  #main-menulist {position: absolute;left: 0;right: 0;top: 100%;background: #FFFFFF;border-top: 1px solid #E2E2DF;box-shadow: 0 12px 20px rgba(0,0,0,.18);max-height: 0;overflow: hidden;-webkit-transition: max-height .4s ease-in-out;transition: max-height .4s ease-in-out;}
  #main-menulist.open {max-height: 320px;}
  .header-main .menu-list-item {flex-direction: column;align-items: stretch;gap: 0;padding: 8px 20px 16px;}
  .header-main .menu-list-item a {padding: 12px 0;border-bottom: 1px solid #EEEEEC;}
  .section-banner .banner-media {height: 61.54vw;}
  .sec-home-stat .content-wrap {width: calc(100% - 40px);}
  .sec-home-stat .stat-list-item, .sec-home-stat .col-4:first-child .stat-list-item {flex-direction: column;align-items: flex-start;gap: 0;padding: 22px 10px;}
  .sec-home-stat .col-4:first-child .stat-list-item {padding-left: 0;}
  .sec-home-stat .stat-num {font-size: 48px;}
  .sec-home-stat .stat-txt {font-size: 16px;}
  .about-who-row .about-who-img, .about-who-row .about-who-ct {flex-basis: 100%;width: 100%;}
  .about-who-row .about-who-img {min-height: 0;height: 66.667vw;}
  .about-who-row .about-who-ct {padding: 40px 20px;gap: 12px;}
  .about-company {padding-top: 36px;}
  .about-company-ct h3 {font-size: 36px;}
  .about-feature-list li {gap: 16px;}
  .about-motto {padding: 28px 0 44px;}
  .title-main {font-size: 40px;}
  .title-bar {width: 48px;margin-top: 10px;}
  .sec-home-catalog {padding: 52px 0;}
  .catalog-head {flex-direction: column;align-items: flex-start;gap: 12px;margin-bottom: 28px;}
  .catalog-head p {max-width: none;}
  .catalog-group {gap: 16px;padding-top: 24px;}
  .catalog-group + .catalog-group {margin-top: 28px;}
  .catalog-num {width: 40px;height: 40px;font-size: 28px;}
  .catalog-group-title h3 {font-size: 32px;}
  .catalog-group-title .catalog-sub {font-weight: 400;}
  .catalog-list-item {grid-template-columns: minmax(0, 1fr);gap: 10px;}
  .catalog-tile {min-height: 110px;gap: 12px;padding: 10px 10px 10px 12px;}
  .sec-home-contact {padding: 52px 0 72px;}
  .sec-home-contact .title-wrap {margin-bottom: 28px;}
  .sec-home-contact .contact-ridge {height: 140px;bottom: 36px;}
  .contact-hq-ct, .contact-hq-map {flex-basis: 100%;width: 100%;}
  .contact-hq-ct {padding: 24px 20px;gap: 14px;}
  .contact-hq-map {min-height: 0;height: 240px;}
  .contact-hq-action {padding: 16px 20px 20px;}
  .contact-hq-action .btn-defualt-ol {width: 100%;font-size: 24px;font-weight: 700;}
  .contact-channel {margin-top: 28px;}
  .contact-channel h4 {font-size: 24px;margin-bottom: 14px;}
  .channel-row {--bs-gutter-x: 10px;--bs-gutter-y: 10px;}
  .channel-row > div:last-child:nth-child(odd) {flex: 0 0 100%;width: 100%;}
  .channel-card {min-height: 80px;padding: 14px;gap: 8px;}
  .channel-ico {width: 36px;height: 36px;}
  .channel-txt strong {font-size: 22px;}
  .channel-txt span {font-size: 16px;}
  footer .footer-wrap {flex-direction: column;gap: 28px;padding: 44px 0 24px;}
  footer .footer-logo img {height: 68px;}
  footer .footer-brand p {margin-top: 14px;}
  footer .footer-nav {gap: 20px;}
  footer .footer-menu li {font-size: 18px;}
  footer .footer-menu li + li {margin-top: 8px;}
  footer .copyright-wrap {padding: 16px 0 24px;}
  footer .copyright-wrap .content-wrap {flex-direction: column;align-items: flex-start;gap: 8px;}
  footer .footer-copyrigh-menu {gap: 18px;}
  .gototop {right: 16px;bottom: 16px;width: 44px;height: 44px;padding: 10px;}
}

@media only screen and (max-width: 395px) {
  .channel-card {padding: 14px 10px;}
  .channel-ico {width: 32px;height: 32px;}
  .channel-txt span {font-size: 14px;}
  .sec-home-stat .stat-num {font-size: 42px;}
  .catalog-tile-btn {padding: 0 10px;}
  .catalog-tile-txt strong {font-size: 22px;}
}